Animation eines Stromflussbildes, "Popup"-Menü

  • Hallo,


    Ich bin neu hier im Forum und würde mich auch eher als Anfänger im Bereich der html, css, javascript programmierung sehen.
    Ich soll jedoch für die Arbeit unsere Website überarbeiten, grundsätzlich komm ich bis jetzt ganz gut voran nur hab ich jetzt ein zwei Probleme bei denen ich nicht weiterkomme und auch bei eine Webrecherche nicht wirklich fündig geworden bin. Ich hoffe ihr könnt mir weiterhelfen.


    1.Problem


    Die besagte Website dient als Monitoring stelle für eine Photovoltaik-Anlage, welche die aktuellen Messwerte mittels Phyton-Script ausließt.
    Nun ist gewünscht, dass je nach aktueller Leistung sozusagen "Stromflusskügelchen" in die jeweilige Richtung fließen. Damit man sich das besser Vorstellen kann was ich meine anbei ein Bild der Fronius Solar-Web-Page, so ungefähr soll das mit de kügelchen aussehen (fließen sollen sie hald, also animiert sein)


    [Blockierte Grafik: https://i-magazin.at/media/k2/galleries/5694/SE_PI_Fronius_Solutions_PlusXAward_4.jpg]


    Das 2te Problem mit dem ich konfrontiert bin, ist, dass ich ein Popup-Fenster erstellen möchte welches sich beim klicken auf einen Messwert öffnet und indem eine Interaktion möglich ist (weitere Messwerte sollen drin stellen, ein graph mit Link), das soll ungefähr so aussehen wie in dem angehängten Bild rechts oben ersichtlich.


    Ich hoffe ihr könnt mir helfen,


    vielen Dank bereits im Voraus


    LG Simon

  • Interessante Aufgaben. Für die erste mit den Kügelchen gibt es AFAIK zwei Möglichkeiten:

    • Du stellst die Kügelchen als HTML-Elemente dar, die Du mit CSS zu Kugeln machst. Diese animierst Du dann. Prinzipiell kann man Animationen mit CSS machen, aber da das Ganze dynamisch sein soll, würde ich empfehlen, es mit jQuery zu machen. Informiere dich über die Funktion animate().
    • Du verwendest HTML5-Canvas und zeichnest das ganze Bild in einem Canvas. Damit die Animation leicht zu machen ist, empfehle ich, ein Framework zu verwenden, z. B. jCanvas oder createjs.


    PS: Ich verstehe dich so, dass das Ganze eine öffentliche Seite werden soll und auf allen Arten von Geräten dargestellt werden muss, also auch auf mobilen?

  • Super Danke für die Antwort,


    Ich werd mich morgen mal etwas Spielen und ausprobieren welche Möglichkeit die bessere für mich ist :)


    Ja genau, in weiterer Folge auf jeden Fall. hast du noch Tipps was ich hierbei beachten sollte?


    LG

  • "Ja genau, in weiterer Folge auf jeden Fall. hast du noch Tipps was ich hierbei beachten sollte?" - bezieht sich das auf meine Frage, ob die Seite responsiv sein muss? Ich habe das immer so gelöst, dass ich einen umgebenden Container definiert habe. Dieser hat eine Basisgröße und passt seine Größe an den Bildschirm an. Aus der Basisgröße kann man einen Faktor berechnen und damit die Größe und Position aller Elemente anpassen.

  • ja genau bezog sich auf diese Frage,


    Perfekt, dass hab ich bereits so gelöst mit einer Standardgröße von 980px. Die Automatische Bildschirmanpassung erreiche ich dann mittels Javascript?


    LG

  • Hallo!


    Wenn du mit Canvas arbeiten möchtest (was ich nur empfehlen kann), dann kann ich dir hier einige Tipps mit an die Hand geben.


    Achtung: Grafische Effekte, die mit CSS erzielt werden, sind um ein vielfaches aufwändiger zu berechnen als Canvas. Gerade als mobile Lösung für Animationen kann ich aufgrund der Vielzahl an Geräten nur Canvas empfehlen.


    Um es dir einfacher zu machen, solltest du alle Maße innerhalb des Bildes, welches gezeichnet werden soll, in Abhängigkeit der Größe des Canvas berechnen. Dazu legst du am Betsen erstmal ein Seitenverhältnis fest. In meinem Beispiel nehme ich mal 1:1. Das heißt, das Bild ist genau so breit wie hoch. Die Größe ist dabei erst einmal unrelevant:


    HTML
    1. <canvas width="450" height="450"></canvas>


    Zum testen noch ein wenig Farbe:


    CSS
    1. canvas {
    2. background: #333;
    3. }


    Jetzt wird im Browser ein dunkelgrauer Kasten angezeigt.


    Als nächstes mittels Javascript den Kontext holen:


    JavaScript
    1. var canvas = document.getElementsByTagName("canvas")[0];
    2. var ctx = canvas.getContext("2d");


    Und nun ganz wichtig. Die Dimension des Canvas auslesen:


    JavaScript
    1. var canvasDimension = {
    2. width: canvas.offsetWidth,
    3. height: canvas.offsetHeight
    4. }


    Jetzt sollten alle Größen in Abhängigkeit dieser Werte gebildet werden. Als Beispiel nehme ich einfach mal einen hellgrauen Quader und einen roten Kreis.


    Der Quader soll 10% Abstand nach oben und genau den selben Abstand nach links haben. Außerdem soll er genau 20% der Höhe des Canvas als Maße annehmen. Ganz wichtig: Immer abrunden! Wenn Canvas mit ungerundeten Fließkommazahlen arbeitet erhält man unschöne Nebeneffekte wie z. B. unterschiedliche Abstände trotz gleicher Größe oder unscharfe Kanten. Wenn man aufrundet, sind Elemente eventuell nicht mehr sichtbar, da sie über den Rand hinaus gehen.


    Die Berechnung könnte also so aussehen:


    JavaScript
    1. var cubeDimension = {
    2. size: Math.floor(canvasDimension.height*.2),
    3. x: Math.floor(canvasDimension.height*.1),
    4. y: Math.floor(canvasDimension.height*.1)
    5. }


    Dann nur noch Farbe setzen und zeichnen:


    JavaScript
    1. ctx.fillStyle = "#999999";
    2. ctx.fillRect(cubeDimension.x, cubeDimension.y, cubeDimension.size, cubeDimension.size);


    Der Radius des Kreises soll 10% der Höhe, der Abstand nach rechts 10% und der Abstand nach unten 15% betragen. Die Koordinaten werden in der arc-Funktion für das Zentrum des Kreisbogens angegeben, das muss beachtet werden. Die Berechnung könnte so aussehen:


    JavaScript
    1. var circleDimension = {
    2. radius: Math.floor(canvasDimension.height*.1),
    3. x: Math.floor(canvasDimension.height*.9 - canvasDimension.height*.1),
    4. y: Math.floor(canvasDimension.height*.85 - canvasDimension.height*.1)
    5. }


    Und dann noch zeichnen:


    JavaScript
    1. ctx.fillStyle = "#ff0000";
    2. ctx.beginPath();
    3. ctx.arc(circleDimension.x, circleDimension.y, circleDimension.radius, 0, Math.PI*2);
    4. ctx.fill();


    Es ist sicher kein beeindruckendes Gemälde, jedoch kommt nun der eigentliche Knackpunkt. Wenn die Größe des Canvas verändert wird, ändert sich der Inhalt proportional mit:


    HTML
    1. <canvas width="200" height="200"></canvas>


    Siehe Bilder im Anhang oder einfach hier selber ausprobieren.


    Animieren lässt sich ein Canvas auch wunderbar mittels der requestAnimationFrame-Funktion.


    Canvas kann besonders bei trignometrischen Funktionen wirklich kompliziert werden, da braucht es ein wenig sich reinzuarbeiten. Es lohnt aber auf jeden Fall und hier im Forum erhältst du jederzeit alle Hilfe, die du benötigst.


    Ich hoffe ich konnte ein wenig helfen.


    canvas.pngcanvas_small.png

  • Hallo :)


    So, hat etwas gedauert, aber hab mich jetzt etwas mit Javascript rumgespielt, da das ganze mit CSS sehr sehr unstabil läuft :-O


    Es funktioniert auch, dass eine Kugel in Dauerschleife von links nach rechts fliegt :)


    Aber wie kann ich es jetzt machen, dass diese Funktion nach weiß ich nicht 1 sekunde wieder von vorn startet jedoch der vorherige Durchlauf nicht unterbrochen wird? Sprich wie schaffe ich es, dass nun mehrere "Kügelchen" hintereinander immer und immer wieder den Bildschirm durchlaufen? :-O


    Danke schon im Voraus


    Anbei der Code :)



    HTML
    1. <div id="energieFluss" width="900px" height="500px" color="red">
    2. <img id="bullet" src="http://www.heideman-store.de/images/artikel/kugel-blausaphirmatt_2_91.jpg" height ="25" width= "25">
    3. </div>



  • "da das ganze mit CSS sehr sehr unstabil läuf" Das wundert mich, denn ich hatte es ausprobiert und es hatte einwandfrei und flüssig funktioniert:

    Canvas ist aber sicher auch eine gute Lösung. Ich werde mir deins mal ansehen.

    Dieser Beitrag wurde bereits 1 Mal editiert, zuletzt von Sempervivum ()

  • Hallo :)


    Ja so funktionierts ganz gut, aber wenn man was öffnet nebenbei (pop up) oder kurz auf einen anderen Tab wechselt und wieder zurück, dann sind einige kugeln ganz dich aneinander und es entsteht ein großes loch :-O


    mit Canvas wärs mir sowieso am liebsten, weil das Schema auch mit Canvas gezeichnet wurde, dann wird das etwas einfacher :-D


    Weißt du auch wie ich es in Javascript so programmieren kann, dass die küglchen nur wenn Wert XY > xy ist angezeigt werden? :-O


    Danke für deine unterstützung bei diesem Projekt, du bist mir eine große Hilfe :)


    LG

  • Bei Canvas bring ich aber derzeit nur zusammen, dass eine Kugel von links nach rechts wandert und dann stehn bleibt :-(

  • "mit Canvas wärs mir sowieso am liebsten, weil das Schema auch mit Canvas gezeichnet wurde" Das ist natürlich ein entscheidender Grund, Canvas zu verwenden.
    Bei Animationen kann man sich die Arbeit sehr erleichtern, wenn man ein Framework verwendet, jQuery bei normalen Animationen und jCanvas bei Animationen in Canvas. (Gibt natürlich noch mehr für Canvas.) Dort kannst Du Beginn und Ende der Animation angeben, so dass sich deine Frage wg. "nur wenn Wert XY > xy" u. U. erübrigt.

  • Ich habe mal eine kleine Demo mit jCanvas angefertigt:

    Du siehst, mit jCanvas wird es sehr kompakt und einfach. Das müsste im wesentlichen das sein, was Du brauchst. Das mit dem iBullet gefällt mir nicht so, aber anscheinend ist es bei jCanvas nicht möglich, die Elemente in Variablen abzulegen.

    Dieser Beitrag wurde bereits 2 Mal editiert, zuletzt von Sempervivum ()