Featurewunsch: Neue(s) dynamische(s) Icon(s)

[Sipple]

Servus Wolfram (wvhn)

Falls du mal Zeit und Lust hast, ich könnte ein animiertes SVG Icon brauchen, bzw. zwei.

Basierend z.B. auf control_arrow_rightward.svg und control_arrow_leftward.svg. Schöner oder besser geeignet wäre vielleicht eher sowas, die Animation musst dir leider dazudenken :

grafik.png

Sie sollen Item Wert abhängig jeweils von hinten nach vorne in Pfeilrichtung aufgebaut werden und wieder verschwinden, zyklisch. Der Item Wert definiert dabei die Geschwindigkeit wie bei icon.ventilation oder icon.windmill. Ich weiß nicht, ob es möglich ist, das in ein Icon zu packen. Das soll den Energiefluß visualisieren und der ändert bei Netz und Batterie auch die Richtung.
Ich habe versucht mich da mal einzulesen, habe das Grundprinzip auch halbwegs verstanden, aber Java kann ich nicht und das dann letztendlich in die SmartVISU sauber zu integrieren, kann ich dann leider erst recht nicht.

Gruß, Martin

[wvhn]

Moin Sipple Martin,

das ist sicherlich machbar. Da ein icon eine feste Größe von 48x48 Pixel braucht um ins Raster zu passen, frage ich mich allerdings, ob der Lauflichteffekt in dieser Größe noch gut genug sichtbar ist.

Alternativ kann man die gesamte PV-Anlage als Widget darstellen, wie das hier gemacht ist. D.h. Man zeichnet alle Elemente als ein gemeinsames SVG und animiert einzelne Teile davon per JavaScript. Anstelle der Linien könnte man hier die Lauflichter einbauen. Vorteil ist, dass man von den icons und deren Größe unabhängig ist. Nachteil: es ist ziemlich viel Bastelarbeit, bis das Bild steht.

Was ist aus Deiner Sicht die bessere Lösung? Kannst Du mit dem SVG mal anfangen und ich helfe dann bei der Animation?

Gruß
Wolfram

[Sipple]

Hi Wolfram.
Drum hätte ich ein schon existierendes SVG genommen (Control Arrow right-/leftward). Da wäre das mehr oder weniger schon vom Raster her passend.
Wie das dann wirkt kann ich auch nicht sagen, bis man das sieht, da hast du vollkommen recht.
Mit was für einem Tool kann man am einfachsten SVG's mit Raster 48x48 erzeugen? So in etwa hätte ich das mal versucht.

grafik.png

[wvhn]

Moin Martin,

mit Inkscape kann man SVGs kostenlos erstellen. Allerdings schreibt das Programm viel Überflüssiges in die SVG-Datei. Hier gibt’s ein paar Tipps für die Erstellung und Bereinigung.

Gruß
Wolfram

[Sipple]

Servus Wolfram wvhn

Ich hatte in letzter Zeit sehr viel Stress, daher krame ich den Thread erst jetzt wieder raus.
Anbei ein mit Inkscape erzeugtes und durch SVGOMG reduziertes SVG als Beispiel.
DIe Animation sollte die Dreiecke von links nach rechts durchlaufen lassen. Wobei ich mir grad selber nicht sicher bin, wie es am besten aussieht. Immer nur ein Dreieck "aktiv" oder immer nur ne Lücke von zwei Dreiecken. Und wie man den aktiven Zustand eines Dreiecks darstellt ist auch noch die Frage. Am einfachsten wäre wohl die inaktiven einfach ausblenden, das könnte aber doof aussehen.

Kannst du damit was anfangen? Ich bräuchte das ganze noch jeweils nach links, nach oben und nach unten. Wenn ich ein fertiges Beispiel von dem hier habe, kann ich aber vielleicht doch noch selber die anderen Varianten erstellen.

energy_flow_rightward.zip

[wvhn]

Moin Sipple,

das einfachste wäre ein dynamisches Icon, das wie icon.battery2 werteabhängig jeweils ein zusätzliche Segement anzeigt.
energy.gif
Das Widget habe ich mal angehängt. Du musst die Datei nur in ./dropins/widgets ablegen und die Endung .txt entfernen.

So wird die Darstellung im Widget-Assistenten aufgerufen:

{{basic.slider('','meinTestItem',0,100,5)}}<br>
{{myicon.energyflow1('','','meinTestItem',0,100,'icon1')}}​

Im Widget-Code siehst Du auch, wie ich die Segmente des SVG aufgeteilt habe, um die einzelnen Dreiecke ansprechbar zu machen.

Auf derselben Basis kann man - mit mehr js-Aufwand - auch ein Lauflicht programmieren.

Gruß
Wolfram

[wvhn]

Moin Martin Sipple,

ich habe nochmal ein bisschen gespielt. Mit dem zusätzlichen Parameter "angle" kann man jetzt einen Winkel angeben, so dass nur ein dynamisches icon für alle Ausrichtungen benötigt wird. Angle ist der Winkel in Grad.

{{myicon.energyflow1('','','meinTestItem',0,100,'ic on1',45 )}}

energy.gif

Gruß
Wolfram

[Sipple]

Servus Wolfram

Sorry für die späte Antwort, etwas stressig hier.
Die Lösung aus Post 6 hatte ich sehr ähnlich schon vor einigen Monaten mal gebaut und mich auch an dem Batterieicon orientiert
Ich habe es aber wieder verworfen, weil es letztendlich doch ziemlich statisch ist und das war dann doch nicht was ich wollte.
Deine zweite Lösung ist aber schon mal eine geniale Erweiterung!

Ich habe aber kürzlich was gefunden, was ansich total einfach aussieht, aber in der Praxis habe ich noch Probleme das sauber zu positionieren. Vielleicht ist mein Hirn da aber auch nicht geeignet dafür.

Leider weiß ich nicht, wie ich da wie du eine animierte Sequenz hier posten kann, damit man genau sieht, wie das dargestellt wird.

Der Code (CSS aktuell in der SmartVISU Seite mit eingebettet):

<style type="text/css">

.loading {
    fill: none;
    stroke: lime;
    stroke-width: 5;
    stroke-dasharray: 15 5;
    animation: strokeAni 2s infinite linear;
}

@keyframes strokeAni {
    0% {
        stroke-dashoffset: 40;
    }
    100% {
        stroke-dashoffset: 0;
    }
}

</style>​
.................
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 46">
         <path class="loading" d="m0,23 h100" />
</svg>​

Das Ergebnis (die laufende Linie muss man sich denken):

grafik.png

Die Linie oben links läuft von links nach rechts.
Zwei Probleme, die ich aktuell noch nicht lösen konnte, weil meine CSS/HTML Kenntnisse immer noch eher rudimentär sind:

1. Die Geschwindigkeit der laufenden Linie soll durch den Wert des Leistungs-Items beeinflusst werden.
2. Die Positionierung muss so sauber sein, dass es auf allen Geräten passt. Aktuell ist das so im Browser schon sehr nah dran, aber auf dem Smartphone passt die vertikale Position dann schon nicht mehr.

Hier nochmal mit eingeschalteten Borders der Tabelle, damit man sieht wie das konstruiert ist:

grafik.png
Wenn da jemand helfen könnte, wie man das suaber löst, wäre das schon super.

Gruß, Martin

[wvhn]

Leider weiß ich nicht, wie ich da wie du eine animierte Sequenz hier posten kann, damit man genau sieht, wie das dargestellt wird.

Es gibt ein kleines Programm namens LICEcap, das Videosequenzen vom Bildschirm aufnimmt und in ein animiertes GIF speichert.

Mit den @fkeyfames-Regeln kann man auch die dynamischen icons animieren. Siehe z.B. icon.windmill, wo die Geschwindigkeit verändert wird, indem javaScript die Dauer der Animation verändert. Da habe ich allerdings auch noch keine Erfahrung und muss mich erstmal einlesen. Das hier scheint ganz gut zu sein.

Gruß
Wolfram