Hi!

Bei der Suche nach schönen Visualisierungen für ioBroker ist mir aufgefallen dass es sehr wenig icons gibt bzw die icon Sets optisch nicht so gut harmonieren, daher hab ich mich durch die Doku gewühlt und versucht einen eigenen "Adapter" bzw eher ein Widget Set zu erstellen.

Ihr könnt ihn mittels npm install iobroker.fontui installieren und testen, im VIS erscheint eine neue gruppe fontUI

Funktionen derzeit:

• Icons mit oder ohne Content/Werten hinzufügen
• Farbe, Grösse und Animation anpassen

Eine kleine Auswahl der Icons(sind ca. 1500):

Liste der Icons mit Suchfunktion

In Arbeit/Geplant:

• Alternative Werte für true/false
• Touch Buttons für Icons

Projekt bei Github

Danke fürs Testen!

@htrecksler Danke fürs Testen, freut mich dass es mal so funktioniert!

Ja das select möchte ich ändern dass eine miniatur vom icon gleich daneben steht. Muss noch schauen wie ich das innerhalb von ioBroker hinbekomme, möchte javascript "hacks" vermeiden so gut es geht.

Als nächstes möchte ich die Icons animierbar machen(drehen, pulsieren, glow), danach bin ich mir noch nicht ganz sicher...
Entweder gehe ich Richtung Button Funktionen(z.b. Icon rot & drehen wenn Wert > 100) oder baue mehr Design Elemente ein, habe eine zeit lang mit FHEM Tablet UI gewerkelt und bin davon eigentlich sehr angetan.

Insgesamt möchte ich es jedoch simpel halten damit man FontUI leicht in bestehende Designs integrieren kann und nicht zuviel overhead beim laden der ganzen JS und CSS files entsteht.

@dos1973 freut mich dass es funktioniert hat!

Buttons sind bereits in Arbeit

bei mir geht der link zum edit und ist nicht ausgegraut, ich hab aber am adapter selbst nicht geändert seit der letzten version(nur VIS)
das verhalten ist bei mir exakt gleich wie z.b. bei FLOT daneben, einstellungen gibts derzeit sowieso keine

Update 0.1.0:

• Durchsuchbare Icon Liste mit vorschau der icons
• Mehr animationen und einstellungen für icons
• Übersetzungen hinzugefügt

Danke fürs Testen!

@AlCalzone dann werd ich cache clean weglassen, hab das hier im Forum als Lösung gefunden

@foxriver76
Danke für den tipp, html file ändern bewirkt wirklich einen refresh der css files, muss das noch automatisieren aber das sollte einfach gehen.

Ich würde gerne meinen Workflow bei der Adapter/VIS Entwicklung optimieren um meine freie Zeit besser zu nutzen und damits mehr spass macht. Leider kämpfe ich regelmässig gegen den ioBroker Cache und bekomme einfach keine konsistenten Ergebnisse, vor allem bei Änderung der CSS files. JS files werden mit den untenstehenden Schritten (meistens) aktualisiert, CSS komplett unregelmässig. Bevor jemand fragt es ist nicht der Browser cache...
Folgendes hab ich gemacht bzw die letzten zwei bei jeder Änderung:

• WEB adapter cache off
• VIS noFileCache => true
• index.html und edit.html durch .src ersetzt wie hier erklärt
• iobroker upload fonui
• npm cache clean

Wie habt ihr das gelöst? Ich überlege ein script zu bauen welches bei file Änderung die Schritte ausführt(files liegen auf anderem Rechner)

@Negalein
hier ist eine liste mit suchfunktion:
https://fontawesome.com/icons?d=gallery&m=free

werd ich noch ins repo einbauen, erster post ist angepasst zwecks der übersicht...

@sigi234 hmm strange, unter instanzen sollten sie noch vorhanden sein. ist aber egal da sie derzeit nicht verwendet werden...

@sigi234 bittesehr:
https://github.com/runsnbunsn/ioBroker.fontui

@sigi234
Änderbarer true oder false Wert macht sinn, das werd ich einbauen

Neues update ist online, icons können jetzt gedreht bzw animiert werden.
Zusätzlich sollten manche icons oben jetzt nicht mehr abgeschnitten werden....
Falls jemand am Tablet testet würd mich die performance bei spinning icon interessieren(meins ist noch im "aufbau"), da es ne Schriftart ist sollte es wenig CPU beanspruchen.

@sigi234 du hast recht, Adapter stimmt nicht bzw noch nicht
Ich hab beim erstellen beide optionen gewählt da ich keinen Nachteil darin sah und evtl später eine Adapterkonfiguration dazukommt(z.b. falls jemand Font Awesome Pro besitzt und nutzen will). Die Installation und die Updates sind auch einfacher falls es mal im Repo ist.

Falls ich hier falsch liege bzw etwas gravierendes übersehen habe bitte um Aufklärung, jetzt ist es noch einfach zu ändern.
Danke fürs Testen!