PowerFlow [animiertes SVG, dummy, javascript]

[schwatter]

Nabend,

ich habe mir gerade einen Token erstellt. Teste mal:

Code Auswählen Erweitern

deletereading electricitymap message
deletereading electricitymap error

Code Auswählen Erweitern

defmod electricitymap HTTPMOD none 60
attr electricitymap event-on-change-reading .*
attr electricitymap extractAllJSON 1
attr electricitymap get1Header1 accept: */*
attr electricitymap get1Header2 auth-token: XpiDeinGeheimerTokenAut
attr electricitymap get1Name carbon-intensity
attr electricitymap get1Poll 1
attr electricitymap get1URL https://api.electricitymap.org/v3/carbon-intensity/latest?lat=51.817132&lon=9.764435
attr electricitymap get2Header1 accept: */*
attr electricitymap get2Header2 auth-token: XpiDeinGeheimerTokenAut
attr electricitymap get2Name power-breakdown
attr electricitymap get2Poll 1
attr electricitymap get2URL https://api.electricitymap.org/v3/power-breakdown/latest?lat=51.817132&lon=9.764435
Gruß schwatter

[ergerd]

Das funktioniert, vielen Dank!

Gruß ergerd

[schwatter]

Nabend,

Update im ersten Post. Bitte erneuert alle 3 (dummy,JS und CSS). Weiß nicht mehr so genau, ob
ich bei allen etwas geändert habe    my $name = 'Alzheimer';

STRG + F5 für Cache löschen!

- CSS SVG Größe Desktop auf 85vw umgestellt. Daher jetzt mit vielen Skins kompatibel.
- CSS SVG Größe Mibile auf 95vw umgestellt. Daher jetzt mit vielen Skins kompatibel.
- CSS Animation für Hausring erstellt. Bei betreten des Raums sowie Werteänderung.
- Devicename wird per CSS ausgeblendet. Daher entfällt das attr alias <span></span>.

@ergerd
Ich konnte dein Problem nachstellen. Lag daran, das ich bei width: 90% !important; hatte.
Das muss aber width: 85vw !important; bzw Viewport == sichtbare Teil des Browserfensters.
Wahrscheinlich musst du die 85vw minimal anpassen.

Gruß schwatter

[carlos]

Hallo,
Leider ist bei mir der Powerflow seit einigen Versionen nicht mehr zu gebrauchen.
Am Anfang ging er noch, aber jetzt sieht er im f18 style so aus:
Du darfst diesen Dateianhang nicht ansehen.

Im flex style sogar so:
Du darfst diesen Dateianhang nicht ansehen.

Bei f18 sieht man kurz den ganzen Powerflow, dann sieht es aus wie oben.

Schade, habe aber auch keine Ahnung wie man das ändern kann.

[ergerd]

Hallo carlos,
ich benutze den Firefox und habe das gleiche Problem.
Workaround für mich:
Ich ändere kurz den Zoom auf 110% und wieder zurück auf 100%
Das geht gut mit gedrückter Ctrl-Taste und dem Mausrad.

Grüße
ergerd

[schwatter]

Tag,

ja einen guten Kompromiss zwischen Firefox und Chrome zu finden ist wenn man nach Performance sucht nicht so einfach. Auch die Skins haben ihre Eigenarten.
Grundsätzlich möchte ich bei mehr CSS bleiben damit es performanter ist.
Ich sehe auch, seit dem umstellen fingen die Probleme bei euch an.
Gibt bestimmt eine Lösung.

@carlos
Hast du denn schon feste Werte für Größe verwendet? Die helfen eigentlich immer.
Also anstatt width mit % oder vw dann 1200px.
Das erste Bild bei F18, so sieht es bei mir aus wenn ich etwas ändere
aber danach kein STRG + F5 ausführe oder ein File nicht
gefunden wird.

Edit:
Auch hatte ich die Namensgebung der Files umgestellt und den Pfad auf /opt/fhem/www/codemirror geändert für alles.

Gruß schwatter

[schwatter]

Nabend,

damit der Powerflow in Flexstyle funktioniert, muss der Skin erstmal angepasst werden.
Damals mochte ich den Skin, habe ihn dann aber gegen f18 getauscht. Die Stylevorgaben waren
mir zu strikt. Die SVG's vom DOIF waren immer zu klein....

So, habe Flexstyle etwas frisiert für Desktop und Mobile. Damit schauen einige Elemente
wieder viel besser aus und nicht mehr so klein.


1. CSS-File aus dem Anhang ersetzen. Speichert das Alte ab!
2. Im Skin --> Sytle settings -->Mehrspalten Layout-->single
3. Auf Desktop STRG + F5 und Handy auf Browsercache löschen.
4. Gegebenfalls in der svg_update.css die Größen anpassen.

Gruß schwatter

[schwatter]

Ich musste Plotcontrol hinzufügen. Die Buttons für das SVG (Plus,Minus,Zoom) waren viel zu groß.
Bzw die class .SVGlabel svg. Update in dem Post drüber.
Bin bei mir nochmal alle Räume durchgegangen und finde in meiner Umgebung jetzt keine Ausreißer mehr.

Gruß schwatter

[schwatter]

Und noch ein Update zu Flexstyle 2 Posts drüber.
.roomoverview svg musste auch noch dazu. Im Deviceoverview zu SolarForecast gingen die SVG's durch die Decke.
edit:
Und nochmal erweitert mit td.containsTable svg.

Gruß schwatter

[Icinger]

Ein einzelnes Icon habe ich noch im Flex, welches viel zu groß ist.
Schaut aber nur im DOIF so aus, im Device selber ist das Icon "normal" groß.

lg, Stefan

[schwatter]

Ich denke ich war zu weit in den Unterklassen. Ich habe es jetzt auf

Code Auswählen Erweitern

.odd svg, .even svg {
    width: 30px;
    height: 30px;
}

geändert.


edit...
moment

edit2:
so nochmal. Hatte wieder zuviel gelöscht...

Code Auswählen Erweitern

.odd svg, .even svg, td.wrapped svg, .col2 svg, .col3 svg, .SVGlabel svg, .roomoverview svg, td.containsTable svg {
    width: 30px;
    height: 30px;
}

Gruß schwatter

[carlos]

Hallo,
Leider funktioniert es bei mir immer noch nicht.
Ich habe svg_update.css und svg_update.js im codemirror verzeichnis auch im WEB device mit flex eingestellt.
Dein flexstyle.css liegt in /opt/fhem/www/pgm2 und ist vom update ausgeschlossen.

Ergebnis ist folgendes:
Gehe ich in den Raum wird das Device kurz richtig angezeigt, dann sieht es so aus:

Du darfst diesen Dateianhang nicht ansehen.

Das gleiche im F18 style.


Gruß

Hubert

[ergerd]

Hallo Carlos,
schon den Workaround aus #64 probiert?
Gruß ergerd

[carlos]

Ich nutze Chrome und der Workaround hilft bei mir nicht.

Gruß

Hubert

[schwatter]

Gibt bitte die "Raw definition" von deinen FHEMWEB-Devices sowie vom powerGrid-dummy.

Edit:
Hast du vielleicht ein Adblocker der etwas blockiert?

Edit:
Lösche ich im dummy die Zeile zum CSS-File, dann sieht es bei mir auch ganz klein aus.
Ich tippe auf das nicht gefundenes CSS-File.

Code Auswählen Erweitern

<head>
    <title>powerGrid</title>
    <link rel="stylesheet" type="text/css" href="/fhem/www/codemirror/svg_update.css">
</head>Aber deine "Raw definition" würde ich mir gerne anschauen.

Gruß schwatter