Habpanel eigene Icon

[zitteralex]

@Daniel_N ich bin leider nicht weitergekommen damit.

Mittlerweile bin ich zum lovelace-Adapter gewechselt, da ich leider erst sehr spät gemerkt hatte, dass die HABPanel UI auf versch. Endgeräten, wie z.B. Handy nicht mitskaliert und somit Buttons oder Texte außerhalb des sichtbaren Bereichs liegen. Das ist mega schade, da ich das HAB Panel eigentlich echt mochte.

[Daniel_N]

Na doch du kannst in habpanel verschiedene Ansichten speichern. Ich habe aktuell eine für Smartphone und eine für das tablet. Funktioniert wunderbar

[smile]

Hat es nun schon jemand geschafft, erfolgreich eigene Icons einzubinden? Und wenn ja, wie?
Danke euch.

[Xanon]

Das würde mich auch interessieren.

[pk68]

Ich verwende die Icon-Sammlung "eclipse-smarthome-classic". Dort war ich auf der Suche nach Icons für den Sonnenauf- bzw. Untergang. Diese Icons können nicht ausgewählt werden, sind aber im Verzeichnis vorhanden; z.B. "sunrise.svg". Grund ist, dass die Dateinamen nicht in der entsprechenden Inhaltsdatei "eclipse-smarthome-classic.list.json" enthalten sind.

Ich habe per FTP die Icon-Sammlung heruntergeladen, ein paar Icons gelöscht und ein paar hinzugefügt. Anschließend habe ich eine neue Inhaltsdatei erstellt und diese samt der Icons wieder hochgeladen. Danach konnte ich die gesuchten Icons auswählen. Allerdings werden einige wenige Icons nicht dargestellt. Warum erschließt sich mir nicht.

Also wer eigene Icons nutzen will, sollte diese in eine bestehende Icon-Sammlung kopieren und die entspr. Inhaltsdatei anpassen.

Gruß Paule

[Zeebo]

@smile

Hallo!

Eines vorweg:

Macht von jeder Datei, bevor ihr sie modifiziert, ein Backup, z.B. mit
sudo cp Dateiname.ext Dateiname.ext.bak
Und am besten auch von den modifizierten Dateien, bevor ihr ein Upload macht. Sonst ist nachher was weg und ihr müsst es neu machen.

So habe ich es geschafft:

1. Ordner für neue Icons erstellen: /opt/iobroker/node_modules/iobroker.habpanel/www/assets/icons/NeuesIconSet

sudo mkdir /opt/iobroker/node_modules/iobroker.habpanel/www/assets/icons/NeuesIconSet

2. Icons im SVG-Format in das neue Verzeichnis hochgeladen
3. NeuesIconSet.list.json-Datei wie folgt anlegen:

cd /opt/iobroker/node_modules/iobroker.habpanel/www/assets/icons
sudo ls -1 ./NeuesIconSet > NeuesIconSet.list.json
sudo sed -i ':M;N;$!bM;s#\n#\n\t"#g' NeuesIconSet.list.json
sudo sed -i 's/.svg/",/g' NeuesIconSet.list.json
sudo nano NeuesIconSet.list.json

In nano fügen wir am Anfang der Datei folgendes ein:

{
  "notice": "Dieser Text wird beim Iconpicker angezeigt",
  "url": "Quelle der Icons, z.B. URL zu github etc.",
  "icons": [
        "

wobei das " in der 5. Zeile direkt vor dem ersten Dateinamen stehen muss (hier fehlt nämlich noch eines).
Mit ALT + SHIFT + 7 (M-/) springen wir in die letzte Zeile und fügen folgendes ein am Ende ein:

  ]
}

Zudem löschen wir das "," hinter dem letzten Dateinamen.

4. Rechte und Eigentümer anpassen

sudo chown -R iobroker:iobroker ./NeuesIconSet
sudo chown iobroker:iobroker NeuesIconSet.list.json
sudo chmod 644 ./NeuesIconSet/*
sudo chmod 755 ./NeuesIconSet
sudo chmod 644 NeuesIconSet.list.json 

5. Liste der IconSets bearbeiten

sudo nano /opt/iobroker/node_modules/iobroker.habpanel/www/app/services/icon.service.js

Am Ende der folgenden Zeile (Zeile ~21) ein Komma (,) hinter der schließenden geschweiften Klammer einfügen

{ id: 'eclipse-smarthome-classic', name: 'Eclipse SmartHome Classic', type: 'builtin', colorize: false }

und folgende Zeile darunter einfügen:

{ id: 'NeuesIconSet', name: 'Mein eigenes Iconset', type: 'builtin', colorize: true }

name: gibt dabei an, unter welchem Namen das Iconset in der Auswahlliste auftauchen soll.

6. Nun fehlt nur noch:

/opt/iobroker/iobroker upload habpanel
/opt/iobroker/iobroker restart

[smile]

@Zeebo Cool dass du es hinbekommen hast.
Und richtig klasse mit der gut erklärten Anleitung. Danke!!! Werde ich auf jeden Fall austesten.

[Zeebo]

Nachtrag:

Ich habe u.a. Icons aus dem OpenAutomationProject verwendet:
https://github.com/OpenAutomationProject/knx-uf-iconset/tree/master/raw_svg

Nach der o.g. Anleitung funktioniert dies zwar, in der Auswahlliste sieht man jedoch keine Icons (weißes Bild auf weißem Grund).

Daher habe ich in der Datei
/opt/iobroker/node_modules/iobroker.habpanel/www/assets/styles/themes/default.css
noch folgendes ergänzt:

.iconpicker-icon {
    background-color: #c0c0c0;
}

Dadurch erhalten alle Icons in der Auswahl einen grauen Hintergrund.

Wenn ihr nur einem speziellen Iconset eine andere Hintergrundfarbe verpassen wollt:

sudo nano /opt/iobroker/node_modules/iobroker.habpanel/www/app/services/icon.service.js

In etwa Zeile 81 müsste stehen:

'<div ng-if="iconset && iconset !== \'custom-icon\' && iconset !== \'custom-url\'" class="btn-group" uib-dropdown is-open="status.isopen">' +

Fügt in dem class-Attribut hinter "btn-group", getrennt durch ein Leerzeichen, folgendes ein: {{iconset}}
Sollte dann so aussehen:

'<div ng-if="iconset && iconset !== \'custom-icon\' && iconset !== \'custom-url\'" class="btn-group {{iconset}}" uib-dropdown is-open="status.isopen">' +

In der Datei /opt/iobroker/node_modules/iobroker.habpanel/www/assets/styles/themes/default.css dann:

div.NeuesIconSet li.iconpicker-icon {
        background-color: #c0c0c0;
}

Abschließend noch ein Restart:

/opt/iobroker/iobroker upload habpanel
/opt/iobroker/iobroker restart

Da dies hier mehr oder weniger ein Gedächtnisprotokoll ist, bin ich mir auch nicht mehr so sicher, an welchem Punkt genau ich den Upload durchgeführt habe.

Macht von jeder Datei, bevor ihr sie modifiziert, ein Backup, z.B. mit

sudo cp Dateiname.ext Dateiname.ext.bak

Und am besten auch von den modifizierten Dateien, bevor ihr ein Upload macht. Sonst ist nachher was weg und ihr müsst es neu machen.

[Zeebo]

@pk68

weather_sunrise und weather_sunset im OpenAutomationProject -KNX-UF-Iconset

[pk68]

@Zeebo
Danke für den Tipp.
Bei mir sieht es jetzt im HABpanel so aus:

[da_Woody]

@pk68 moin!
im shelly forum gibts eine kleine gruppe wo auch eigene widgets gebastelt werden...

[pk68]

@da_Woody sagte in Habpanel eigene Icon:

@pk68 moin!
im shelly forum gibts eine kleine gruppe wo auch eigene widgets gebastelt werden...

Danke. Mit dem Erstellen von Winget wollte ich mich auch mal beschäftigen. Habe bisher nur Wingets vom Internet importiert und "umgebastelt". Ein Winget zur Anzeige einer boolschen Variable wäre nicht schlecht. Als Anzeigeelement kommt ja nur das Element Dummy in Frage und das zeigt nur true/false an. Nicht gerade schick bei einem Fensterkontakt. Besser wäre es andere Textstrings z.B. offen/geschlossen entspr. dem Variablenwert anzuzeigen.
Eine schöne Anleitung zum Erstellen von Wingets habe ich noch nicht gefunden.

[Zeebo]

@pk68 mit dem true/false wollte ich mich auch noch auseinandersetzen. Es gibt da noch ein paar Dinge, die Verbesserungswürdig sind... was u.a. wohl daran liegt, dass HABPanel ursprünglich von OpenHAB kommt.
Dinge die u.a. noch fehlen oder verbessert werden müssen:

• wir brauchen Widgets, viele Widgets. U.a. für Homematic (Heizung, Steckdosen mit Messwerten etc.)
• statusabhängige Grafiken und Farben
• anpassbare Farben für SVG-Grafiken
• In den HABPanel-Einstellungen kann man Items hinterlegen
  • Kommando Item
  • Items für Sensoren etc.
  • Item für Dashboard-Wechsel

Bei den Items weiß ich allerdings nicht, was da rein gehört. Und in den Select-Feldern steht nichts drin.
Aber vielleicht finde ich ja was hier im Forum, habe noch nicht danach gesucht

[da_Woody]

@Zeebo hilft eventuell weiter...
erklärbär

[Patrickoli]

@zeebo Vielen Dank für die Anleitung! Das hat wunderbar geklappt.

Warum werden die Änderungen in

.../opt/iobroker/node_modules/iobroker.habpanel/www/...

gemacht, anstatt in

.../opt/iobroker/iobroker-data/files/habpanel/...

?

Wo ist der Unterschied zwischen beiden Verzeichnissen?

Gibt es Neueigkeiten bzgl. deiner Vorhaben:

• wir brauchen Widgets, viele Widgets. U.a. für Homematic (Heizung, Steckdosen mit Messwerten etc.)
• statusabhängige Grafiken und Farben
• anpassbare Farben für SVG-Grafiken
• In den HABPanel-Einstellungen kann man Items hinterlegen
  • Kommando Item
  • Items für Sensoren etc.
  • Item für Dashboard-Wechsel