Jahresrückblick 2025 – unser neuer Blogbeitrag ist online! ✨

[Communicate]

Hallo Zusammen,

ich würde gerne das Metro TIle Navigation Widget verändern. Und zwar würde ich gerne die Beschriftung nicht nur unten im Banner sondern auch mittig in der Kachel (quasi als Beschriftung ) anbringen.

Welche Dateien muss ich denn wo anpassen?

Spontan habe ich unter /opt/iobroker/node_modules/iobroker.vis-metro was gefunden, aber irgendwie finde ich da nicht das richtige.

Hat hier jemand einen Ansatz für mich?

Gruß

Dominic

[pix]

Hallo,

so wie ich das sehe, bietet das Widget keine Möglichkeit, das Beschriftungsfeld zu formatieren. HTML und CSS Code werden einfach in der Beschriftung gezeigt. Die Beschriftung wird standardmäßig im Abzeichen-Bereich eingeblendet. Ich dachte, ich könnte sie mit einem negativen margin-top nach oben bringen, geht aber nicht. Ebensowenig mit dem mehrfachen Zeilenwechsel

Da bleibt nur der Zusammenbau aus mehren Widgets übereinander mit Hilfe von Transparenz. Oder ganz aufwendig: den gewünschten Text als Grafik speichern und per Custom Icon einfügen.

Gruß

Pix

[Bluefox]

[{"tpl":"tplMetroTileNav","data":{"visibility-cond":"==","visibility-val":1,"hover":"true","transform":"true","label":"Navigation","bg_class":"bg-indigo","bg_class_active":"bg-magenta","badge_bg_class":"bg-cyan","badge_bg_class_active":"bg-teal","icon_badge":"icon-file","brand_bg_class":"ribbed-steel","brand_bg_class_active":"ribbed-indigo","icon_class":"icon-new"},"style":{"left":"411px","top":"234px"},"widgetSet":"metro"}]

Css:

.icon-new {
    width: 100% !important;
    height: 100% !important;
    margin-top: -40% !important;
    margin-left: -50% !important;
}
.icon-new::before{
    content: 'My super Kitchen' !important;
    font-size:16px;
    font-family: arial;
    overflow: visible;
}

Wichtig ist, dass Icon als "icon-new" gesetzt ist.

[Communicate]

Hallo pix,

vielen Dank. DIe Lösung mit den dahintergelegten Text nutze ich auch, würde das aber lieber etwas "komfortabler haben".

Hier hat ja auch schonmal jemand die Metro-Widgets "manipuliert":http://forum.iobroker.org/viewtopic.php?f=30&t=912

Ich habe nur nicht so wirklich verstanden wie er und vorallem welche Dateien er verändert hat.

Hast Du eine Idee?

Gruß

Dominic

[Communicate]

Bluefox mein Held!!!!

Davon aber mal unabhägig würde ich mich gerne mit den Widgets genauer beschäftigen, wo findet man denn die Quelldateien? Ich denke mal, darauf aufbauend kann man am besten lernen, oder?

Gruß

Dominic

[Bluefox]

@Communicate:

Bluefox mein Held!!!!

Davon aber mal unabhägig würde ich mich gerne mit den Widgets genauer beschäftigen, wo findet man denn die Quelldateien? Ich denke mal, darauf aufbauend kann man am besten lernen, oder? `
Natürlich.

Erst lese und mache das:

https://github.com/ioBroker/ioBroker/wi … widget-set

metro.html kannst du finden hier: /opt/iobroker/iobroker-data/files/vis/widgets/metro.html

Danach wenn du fertig mit den Experimenen bist, musst du die Dateien nach /opt/iobroker/node-modules/iobroker.vis-metro/widgets/metro.html Kopieren und pull request erstellen, damit ich das mergen kann.

[Communicate]

Hallo Bluefox,

vielen Dank für die Hinweise. Leider funktioniert das noch nicht so, wie erhofft :-(.

Ich habe mal versucht beim Navigations-Widget pre und suffix hinzuzufügen, aber es wird mir keine Änderung am Widget angezeigt.

Dann habe ich einmal ganz einfach versucht, nur die Übersetzung zu verändern, so habe ich Beschriftung in Beschriftung1 geändert und habe nach einem Reload von Vis gedacht, dass ich das direkt auf der Rechten Seite bei den Widget-Eigenschaften sehen kann. Aber leider ändert sich da gar nichts :-(

Irgendwas mache ich wohl falsch, nur was?

Kannst Du mir nochmal helfen?

Gruß

Dominic

[Bluefox]

Wenn du wirklich cache in ioBorker.json ausgeschaltet hast und

auch ioBroker neu gestartet hast und

auch edit.html und index.html aus edit.html.origin und index.html.origin ersetzt hast,

dann muss du nur Browser cache löschen.

[Communicate]

Hmm. browser cache war es auch nicht.

Ich bin genau nach der Anleitung vorgegangen.

Kann ich irgendwie überprüfen, an welcher Stelle ich scheitere.

[Bluefox]

@Communicate:

Hmm. browser cache war es auch nicht.

Ich bin genau nach der Anleitung vorgegangen.

Kann ich irgendwie überprüfen, an welcher Stelle ich scheitere. `
Drucke im Browser F12 (Developer Mode) und schaue edit.html

Es muss so aussehen
48_img_002.png

[Communicate]

so siehts bei mir aus:

das habe ich verändert:

und in vis siehts so aus :

[Bluefox]

@Communicate:

so siehts bei mir aus:
filename="Bildschirmfoto 2015-09-26 um 19.10.14.png" index="3">~~

das habe ich verändert:

filename="Bildschirmfoto 2015-09-26 um 19.11.53.png" index="2">~~

filename="Bildschirmfoto 2015-09-26 um 19.12.56.png" index="1">~~

und in vis siehts so aus :

filename="Bildschirmfoto 2015-09-26 um 19.14.27.png" index="0">~~ `
Ich sehe schon auf dem ersten bild, dass es nicht in Ordnung ist.

Hast du edit.html unter

/opt/iobroker/node_modules/iobroker.vis/www

und unter

/opt/iobroker/iobroker-data/files/vis/

ersetz?

[Communicate]

` > Hast du edit.html unter

/opt/iobroker/node_modules/iobroker.vis/www

und unter

/opt/iobroker/iobroker-data/files/vis/

ersetz? `

hmm. ich habe die index und die edit.html von

/opt/iobroker/node_modules/iobroker.vis/www/

nach

/opt/iobroker/iobroker-data/files/vis/

kopiert.

was muss ich sonst noch kopieren?

So steht es in der Anleitung:

replace files in /opt/iobroker/iobroker-data/files/vis/index.html and edit.html with files from /opt/iobroker/node_modules/iobroker.vis/www/index.html

[Bluefox]

Man muss *.origin files nehmen.

Habe die Anleitung geändert.

[Communicate]

nur damit ich es richtig verstehe:

Ich kopiere die beiden origin files von /opt/iobroker/node_modules/iobroker.vis/www/index.html.origin und edit.html.origin nach /opt/iobroker/iobroker-data/files/vis/index.html und edit.html, richtig?

[Communicate]

… das scheint es nicht gewesen zu sein.

hab es wie beschrieben gemacht, dann die manifest geändert, danacg vis reload.

so siehts jetzt aus:

[Bluefox]

Wie sieht dann dein iobroker -data/files/vis/edit.html aus?

[Communicate]

so: (erste zeilen, die html darf ich nicht hochladen (Die hochgeladene Datei wurde abgewiesen, da sie als möglicher Angriffsversuch identifiziert wurde.)

    <title>ioBroker.vis</title>

[Bluefox]

Das ist definitiv falsche Datei.

Hast du wirklich .origin genommen?

[Communicate]

das habe ich kopiert:

root@raspberrypi:/opt/iobroker/iobroker-data/files/vis# cd /opt/iobroker/iobroker-data/files/vis/
root@raspberrypi:/opt/iobroker/iobroker-data/files/vis# cp /opt/iobroker/node_modules/iobroker.vis/www/edit.html.original edit.html
root@raspberrypi:/opt/iobroker/iobroker-data/files/vis# cp /opt/iobroker/node_modules/iobroker.vis/www/index.html.original index.html
root@raspberrypi:/opt/iobroker/iobroker-data/files/vis# nano /opt/iobroker/iobroker-data/files/vis/cache.manifest