Weihnachtsangebot 2025! 🎄

[nik82]

Hallo,
ausschlaggebend für diese Frage ist dieser Threat:
https://forum.iobroker.net/topic/80117/vis-auf-einer-seite-sind-widget-schwarz-bei-tablet/1

Gibts es ein alternatives Widget für "jqui-mfd-custom10"?
Ich will das sich die Icons immer nach einem bestimmten Wert die Farbe ändert:

Habe natürlich im Forum schon gesucht, habe hier auch die Materialdesign Widgets gefunden, aber hier finde ich kein Widget was die Funktion von dem "jqui-mfd-custom10" hat oder übersehe ich was?

[Codierknecht]

@nik82 sagte in Alternative Widgets für jqui-mfd-custom10:

kein Widget was die Funktion von dem "jqui-mfd-custom10" hat

Was genau fehlt Dir denn?
Im Zweifelsfall kann man alles per CSS so designen wie man's möchte.

[nik82]

@codierknecht
Ich teste seit gestern rum wie ein verrückter, ich habe folgende crazy Fehler:
Es liegt nicht am Widget, sondern an dem SVG Icon:

Sobald ich im custom10 Widget dieses SVG Icon reinmache...

... zerhaut es mir die Formatierung aller Icons auf der VIS Seite und alle Icons sind schwarz:

Hier der Code des SVG-Icons:

Spoiler

<?xml version="1.0" encoding="iso-8859-1"?>
<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="361px"
height="361px" viewBox="0 0 361 361" style="enable-background:new 0 0 361 361;" xml:space="preserve">
<g id="measure_x5F_photovoltaic_x5F_inst">
<g>
<g>
<path style="fill:#FFFFFF;" d="M107.643,172.392c-12.008,11.611-24.015,23.222-36.023,34.833
c2.042,1.188,4.085,2.377,6.127,3.566c4.086-16.196,8.173-32.392,12.259-48.587c-1.795,0.73-3.59,1.46-5.385,2.191
c7.921,4.585,15.842,9.17,23.764,13.755c4.1,2.373,7.79-3.964,3.7-6.331c-7.921-4.585-15.842-9.17-23.764-13.755
c-2.016-1.167-4.802-0.121-5.385,2.191c-4.086,16.196-8.173,32.392-12.259,48.587c-0.9,3.569,3.467,6.139,6.127,3.566
c12.008-11.61,24.015-23.222,36.023-34.832C116.231,174.285,111.041,169.105,107.643,172.392z"/>
</g>
</g>
<g>
<g>
<path style="fill:#FFFFFF;" d="M168.469,286.943c-0.094-31.259-0.189-62.518-0.283-93.776c-2.508,1.439-5.016,2.878-7.523,4.317
c38.969,29.556,77.939,59.11,116.909,88.666c2.246,1.703,4.492,3.407,6.738,5.11c0.841-3.105,1.683-6.212,2.523-9.317
c-41.121,0-82.242,0-123.364,0c-6.449,0-6.449,10,0,10c41.122,0,82.243,0,123.364,0c5.402,0,6.252-6.489,2.523-9.317
c-38.97-29.556-77.939-59.11-116.909-88.666c-2.246-1.703-4.492-3.407-6.738-5.11c-3.125-2.37-7.534,0.867-7.523,4.317
c0.094,31.259,0.189,62.518,0.283,93.776C158.489,293.391,168.489,293.393,168.469,286.943z"/>
</g>
</g>
<g>
<g>
<path style="fill:#FFFFFF;" d="M186.102,198.53c27.914,21.531,55.828,43.063,83.742,64.594c5.106,3.938,10.076-4.756,5.047-8.635
c-27.914-21.531-55.828-43.063-83.742-64.594C186.042,185.957,181.072,194.651,186.102,198.53L186.102,198.53z"/>
</g>
</g>
<path style="fill:none;stroke:#FFFFFF;stroke-width:10;stroke-miterlimit:10;" d="M269.763,123.484
c0,2.466-1.999,4.466-4.466,4.466h-25.682c-2.467,0-4.467-2-4.467-4.466V97.802c0-2.467,2-4.466,4.467-4.466h25.682
c2.467,0,4.466,2,4.466,4.466V123.484z"/>
<g>
<g>
<path style="fill:#FFFFFF;" d="M210.597,78.328c2.644,2.644,5.288,5.289,7.933,7.933c1.926,1.926,5.145,1.926,7.07,0
c1.927-1.926,1.927-5.145,0-7.071c-2.644-2.644-5.288-5.289-7.933-7.933c-1.926-1.926-5.145-1.926-7.07,0
C208.67,73.183,208.67,76.401,210.597,78.328L210.597,78.328z"/>
</g>
</g>
<g>
<g>
<path style="fill:#FFFFFF;" d="M176.358,115.369c12.271,0,24.542,0,36.812,0c6.448,0,6.448-10,0-10c-12.271,0-24.541,0-36.812,0
C169.909,105.369,169.909,115.369,176.358,115.369L176.358,115.369z"/>
</g>
</g>
<g>
<g>
<path style="fill:#FFFFFF;" d="M290.743,143.233c-2.187-2.187-4.373-4.373-6.561-6.56c-1.926-1.926-5.145-1.926-7.07,0
c-1.927,1.926-1.927,5.145,0,7.071c2.187,2.187,4.373,4.373,6.561,6.56c1.926,1.926,5.145,1.926,7.07,0
C292.67,148.378,292.67,145.159,290.743,143.233L290.743,143.233z"/>
</g>
</g>
<g>
<g>
<path style="fill:#FFFFFF;" d="M256.906,185.917c0-12.271,0-24.542,0-36.813c0-6.449-10-6.449-10,0c0,12.271,0,24.542,0,36.813
C246.906,192.365,256.906,192.365,256.906,185.917L256.906,185.917z"/>
</g>
</g>
<g>
<g>
<path style="fill:#FFFFFF;" d="M200.668,169.776c8.678-8.677,17.354-17.354,26.031-26.031c4.564-4.564-2.507-11.635-7.07-7.071
c-8.678,8.677-17.354,17.354-26.031,26.031C189.033,167.269,196.104,174.34,200.668,169.776L200.668,169.776z"/>
</g>
</g>
<g>
<g>
<path style="fill:#FFFFFF;" d="M109.334,74.042c-9.947,17.159-19.893,34.318-29.84,51.477c-4.855,8.376,8.136,15.875,12.99,7.5
c9.947-17.159,19.893-34.318,29.84-51.477C127.18,73.166,114.188,65.667,109.334,74.042L109.334,74.042z"/>
</g>
</g>
<g>
<g>
<path style="fill:#FFFFFF;" d="M84.009,136.503c10.483,1.972,20.966,3.944,31.449,5.916c9.458,1.779,13.464-12.682,3.961-14.47
c-10.483-1.972-20.966-3.944-31.449-5.916C78.512,120.254,74.505,134.716,84.009,136.503L84.009,136.503z"/>
</g>
</g>
<g>
<g>
<path style="fill:#FFFFFF;" d="M110.943,131.434c-9.947,17.159-19.893,34.317-29.84,51.476c-4.855,8.376,8.136,15.875,12.99,7.5
c9.947-17.159,19.893-34.317,29.84-51.476C128.789,130.558,115.797,123.059,110.943,131.434L110.943,131.434z"/>
</g>
</g>
</g>
<g id="Ebene_1">
</g>
</svg>

Wenn ich aber das Icon editiere und nur den oberen Text rausmache, so das das Icon so aussieht...

... dann sind meine Icons auf der ganzen Seite wieder normal:

Hier der abgeänderte Code des SVG:

Spoiler

<?xml version="1.0" encoding="iso-8859-1"?>
<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="361px"
height="361px" viewBox="0 0 361 361" style="enable-background:new 0 0 361 361;" xml:space="preserve">
<g id="measure_x5F_photovoltaic_x5F_inst">
<path style="fill:none;stroke:#FFFFFF;stroke-width:10;stroke-miterlimit:10;" d="M269.763,123.484
c0,2.466-1.999,4.466-4.466,4.466h-25.682c-2.467,0-4.467-2-4.467-4.466V97.802c0-2.467,2-4.466,4.467-4.466h25.682
c2.467,0,4.466,2,4.466,4.466V123.484z"/>
<g>
<g>
<path style="fill:#FFFFFF;" d="M210.597,78.328c2.644,2.644,5.288,5.289,7.933,7.933c1.926,1.926,5.145,1.926,7.07,0
c1.927-1.926,1.927-5.145,0-7.071c-2.644-2.644-5.288-5.289-7.933-7.933c-1.926-1.926-5.145-1.926-7.07,0
C208.67,73.183,208.67,76.401,210.597,78.328L210.597,78.328z"/>
</g>
</g>
<g>
<g>
<path style="fill:#FFFFFF;" d="M176.358,115.369c12.271,0,24.542,0,36.812,0c6.448,0,6.448-10,0-10c-12.271,0-24.541,0-36.812,0
C169.909,105.369,169.909,115.369,176.358,115.369L176.358,115.369z"/>
</g>
</g>
<g>
<g>
<path style="fill:#FFFFFF;" d="M290.743,143.233c-2.187-2.187-4.373-4.373-6.561-6.56c-1.926-1.926-5.145-1.926-7.07,0
c-1.927,1.926-1.927,5.145,0,7.071c2.187,2.187,4.373,4.373,6.561,6.56c1.926,1.926,5.145,1.926,7.07,0
C292.67,148.378,292.67,145.159,290.743,143.233L290.743,143.233z"/>
</g>
</g>
<g>
<g>
<path style="fill:#FFFFFF;" d="M256.906,185.917c0-12.271,0-24.542,0-36.813c0-6.449-10-6.449-10,0c0,12.271,0,24.542,0,36.813
C246.906,192.365,256.906,192.365,256.906,185.917L256.906,185.917z"/>
</g>
</g>
<g>
<g>
<path style="fill:#FFFFFF;" d="M200.668,169.776c8.678-8.677,17.354-17.354,26.031-26.031c4.564-4.564-2.507-11.635-7.07-7.071
c-8.678,8.677-17.354,17.354-26.031,26.031C189.033,167.269,196.104,174.34,200.668,169.776L200.668,169.776z"/>
</g>
</g>
<g>
<g>
<path style="fill:#FFFFFF;" d="M109.334,74.042c-9.947,17.159-19.893,34.318-29.84,51.477c-4.855,8.376,8.136,15.875,12.99,7.5
c9.947-17.159,19.893-34.318,29.84-51.477C127.18,73.166,114.188,65.667,109.334,74.042L109.334,74.042z"/>
</g>
</g>
<g>
<g>
<path style="fill:#FFFFFF;" d="M84.009,136.503c10.483,1.972,20.966,3.944,31.449,5.916c9.458,1.779,13.464-12.682,3.961-14.47
c-10.483-1.972-20.966-3.944-31.449-5.916C78.512,120.254,74.505,134.716,84.009,136.503L84.009,136.503z"/>
</g>
</g>
<g>
<g>
<path style="fill:#FFFFFF;" d="M110.943,131.434c-9.947,17.159-19.893,34.317-29.84,51.476c-4.855,8.376,8.136,15.875,12.99,7.5
c9.947-17.159,19.893-34.317,29.84-51.476C128.789,130.558,115.797,123.059,110.943,131.434L110.943,131.434z"/>
</g>
</g>
<g>
<g>
<path style="fill:#FFFFFF;" d="M107.643,172.392c-12.008,11.611-24.015,23.222-36.023,34.833
c2.042,1.188,4.085,2.377,6.127,3.566c4.086-16.196,8.173-32.392,12.259-48.587c-1.795,0.73-3.59,1.46-5.385,2.191
c7.921,4.585,15.842,9.17,23.764,13.755c4.1,2.373,7.79-3.964,3.7-6.331c-7.921-4.585-15.842-9.17-23.764-13.755
c-2.016-1.167-4.802-0.121-5.385,2.191c-4.086,16.196-8.173,32.392-12.259,48.587c-0.9,3.569,3.467,6.139,6.127,3.566
c12.008-11.61,24.015-23.222,36.023-34.832C116.231,174.285,111.041,169.105,107.643,172.392z"/>
</g>
</g>
</g>
<g id="Ebene_1">
</g>
</svg>

Das ist doch crazy oder? Anscheinend haben einige Icons einfach eine komische formatierung.

Weiß jemand zufällig noch andere SVG Icons die mit dem custom10 Widget funktionieren?
Im Internet finde ich nichts, ausser Bezahlseiten.

[sigi234]

@nik82
Inventwo Icons gehen nicht?

[nik82]

@sigi234
Gerade probiert, aber die Inventwo Icons färben sich nicht mit dem Custom10 Widget.
Ist auch klar, weil das sind nur PNGs, keine SVG.

[Codierknecht]

@nik82
Was willst Du denn darstellen?
Nur das Icon aufgrund des Wertes einfärben?

Hast Du mal ein "jqui-mfd - valve" probiert?

[nik82]

@codierknecht
Ganz genau, ich will eigentlich nur das Icon mit den Werten einfärben,
"jqui-mfd - valve" geht schon, aber hier kann ich ja nicht das Symbol ändern oder bin ich blind?

[Codierknecht]

@nik82 sagte in Alternative Widgets für jqui-mfd-custom10:

aber hier kann ich ja nicht das Symbol ändern oder bin ich blind?

Stimmt natürlich. Daran hatte ich nicht gedacht.
Funktioniert das denn mit dem Einfärben damit?

Edit
Funktioniert hier einwandfrei:

[nik82]

@codierknecht
Das einfärben funktioniert, aber nochmal, dass ist nicht mein Problem, mein Problem ist, dass es mir meine Icons zerhaut bei bestimmten SVG Bilder, also die SVG funktionieren alle, aber bei manchen werden meine anderen Icons einfach schwarz und bei manchen eben nicht.
Sie Post: https://forum.iobroker.net/post/1255103

[Codierknecht]

@nik82 sagte in Alternative Widgets für jqui-mfd-custom10:

bei manchen werden meine anderen Icons einfach schwarz

Was sind das für "andere"?

[nik82]

@codierknecht
HQ-Widgets, aber auch jqui-Container, also alle die eigentlich so einen schwarz/weißen Farbverlauf haben.
Aber das wiederrum auch nur an meinem Tablet, am PC funktioniert die Seite auch mit dem custom10 widget und dem icon.
Komplett crazy Fehler.

[Samson71]

@nik82 sagte in Alternative Widgets für jqui-mfd-custom10:

Aber das wiederrum auch nur an meinem Tablet, am PC funktioniert die Seite auch mit dem custom10 widget und dem icon.
Komplett crazy Fehler.

Da klingt weniger nach crazy als nach einem Problem/einer Macke von Android bzw. dem damit verwendeten Browser. Ich hatte vor x Jahren mal ein ähnliches Phänomen mit einem älteren Tablet, wo Farben/Darstellungen vom PC teils abwichen. Lag damals an einem (uralten) Android bzw. der dagehörigen Webview-Version.

[Codierknecht]

@nik82 sagte in Alternative Widgets für jqui-mfd-custom10:

nur an meinem Tablet, am PC funktioniert die Seite

Dann bin ich hier raus, da ich das nicht nachvollziehen kann.

[nik82]

@samson71
Da geb ich dir absolut Recht und ist ja eigentlich schon belegt das es so ist.
Leider ist es bei allen Browsern am Tablet der Fall.
Was ich halt crazy finde das es bei manchen Icons funktioniert und bei manchen nicht.
Aber dann werd ich einfach jetzt ein paar Icons durchprobieren.

Hat jemand noch eine andere Quelle an SVG Icons die mit dem Custom 10 funktionieren?

Hätte sogar den Illustrator hier, aber egal wie ich die SVG exportiere, die Färben sich einfach nicht mit dem Custom10.

[sigi234]

@nik82
Mal den Energiefluss Adapter erweitert angesehen?

[nik82]

@sigi234
Hey Sigi, danke dir, der schaut echt nice aus, werde ich gleich mal anschauen :+1: