Habpanel eigene Icon

zitteralex

Moin, ich möchte das Thema nochmal aufgreifen, da es für mich immer noch nicht beantwortet ist.

Der Wunsch ist nach eigenen Icons an diesem Punkt:
Button mit eigenem Icon
Und zwar nicht über Custom Icon! Sondern in einer bequemen Auswahlliste, wie die Builtin Geschichten.
[Edit] Beantworte ich nach langer Recherce mal selbst: Die Entwickler haben das so nicht vorgesehen. Nur über Custom Icons möglich!

Hierzu habe ich den Vorschlag von Daniel ausprobiert und alle Bilder in einen Unterorder Namens "classic" als SVG hochgeladen und die Rechte, sowie Besitzer angepasst. Eigentlich genau so, wie es der Leitfaden hier auch erklärt. Leider ohne Erfolg.

Anschließend habe ich in dem Hauptordner (/opt/iobroker/iobroker-data/files/habpanel/assets/icons) noch eine - ich nenne es mal Inhaltsverzeichnis - JSON Datei angelegt (classic.list.json). Diese listet im JSON Format alle SVG Dateien von dem Unterverzeichnis "classic". Für die Builtin Icons liegen nämlich auch solche Dateien vor.
Auch kein Erfolg. Es wird immer nur ein "broken Image"-Symbol angezeigt.

Die Recherche über das FireFox Entwicklertool zeigt einen 404 Error (Datei nicht gefunden).
Also manuell im Browser nochmal aufgerufen aber natürlich auch da der selbe Fehler.

Dann mal aus den Builtin-Icons eine URL aufgerufen
(IPAdresse:8082/habpanel/assets/icons/smarthome-set/alarm.svg) - Bild ist da und wird angezeigt.

Auch ein Neustart am Schluss brachte keine anderen Eegebnisse.
Hat jemand dazu noch eine Idee?

Daniel_N

@zitteralex schon Erfolg gehabt? Hab seit ein paar Tagen versucht mal das Thema wieder anzugreifen. Mir ist auch aufgefallen das mir bei den vorgegeben icon nicht alle angezeigt werden. Es müssten laut dieser Liste viel mehr sein

https://www.openhab.org/docs/configuration/iconsets/classic/

Kann sich das evtl einer mal ansehen? Ich habe auch mal via Filezilla geschaut es sind auch viel mehr icon in dem order als in der Liste im habpanel angezeigt wird. Hatte dann auch versucht diesen kompletten Ordner in dem Ordner classics einzufügen aber bekomme immernoch broken image...

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:

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

Icons im SVG-Format in das neue Verzeichnis hochgeladen
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.

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

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.

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

NEWS

Habpanel eigene Icon

Support us

797
Online

31.9k
Users

80.1k
Topics

1.3m
Posts

NEWS

Habpanel eigene Icon

Support us

797Online

31.9kUsers

80.1kTopics

1.3mPosts

797
Online

31.9k
Users

80.1k
Topics

1.3m
Posts