Hallo,

ich bin seit ein paar Tagen auch Nutzer von ioBroker und wie vielleicht einigen anderen Nutzer auch "stört" mich die Visualisierung etwas. Insbesondere die fehlende responsiv Design Möglichkeit und Unterstützung von Icon Fonts haben mich auf die Idee gebracht mich mal an einem Widget zu probieren und somit ist ioBroker.bootstrap4 entstanden.

Das Font Awesome Widget ist stand-alone und kann alle Free-Icons darstellen. Dazu einfach die entsprechenden Klassen in Icon Klasse eintragen. Eine Übersicht der Icons finden man hier.

Bootstrap4 ist ein Widget das die volle View einer Seite einnimmt und HTML & CSS Quelltext aufnimmt und visualisiert.
Damit lassen sich z.B. auch eine (responsiv) Navbar umsetzen.
Wegen Problemen mit der Darstellung im VIS-Editors lassen sich Funktionalitäten (wie z.B. bei der Navbar) aber nicht im Editor direkt testen, sondern nur in der Runtime! Alle anderen (CSS-) Effekte können direkt im Editor angeschaut werden.

Da das mein "erster Kontakt" mit ioBroker und der Entwicklung eines Widgets ist, hoffe ich das sich eventuell ein paar Interessierte finden, die etwas ähnliches (wie ich) gesucht haben und es sich mal anschauen wollen. Kenntnisse (oder zumin. den Willen es lernen zu wollen) in HTML & CSS sind von Vorteil. Dokumentation Bootstrap

Zum Github: https://github.com/GOOFY008/ioBroker.bootstrap4

Feedback erwünscht!

Frank

@sigi234
Das klappt aber (anscheinend) nur wenn HTML Dateien geändert werden, nicht aber wenn man "nur" eine JS oder CSS Datei verändert.
Zumind. hat meine Suche bisher nichts ergeben... ich muss immer auch die Widget HTML verändern damit er ein Update macht.
Oder gibt es da einen anderen "Trick"?

Und wieder was gelernt bzw. eine Alternative

Hi!
Ich denke mal, es ist eine der beiden Möglichkeiten:

1. Hast du die Instanz auch gelöscht?

2. Ich vermute mal das im Verzeichnis node_modules das ioBroker.bootstrap4 gelöscht wurde?
   Sollte das der Fall sein (wovon ich ausgehe) dann liegt das Problem vor...was auch bei der Entwicklung recht nervig ist.
   Diese Anleitung ist anscheinend nicht mehr ganz aktuell.
   ("iobroker upload xxxx" ist leider nicht immer verlässlich)

Folgende beiden Befehle beheben (auf Linux) das Problem und danach sind index.html und edit.html wieder "sauber".

sudo cp /opt/iobroker/node_modules/iobroker.vis/www/index.html /opt/iobroker/iobroker-data/files/vis/index.html

sudo cp /opt/iobroker/node_modules/iobroker.vis/www/edit.html /opt/iobroker/iobroker-data/files/vis/edit.html

Frank

@Bachmann77

Keine Sorge, es "zerschiesst" dir nichts. Worst case einfach wieder deinstallieren und gut ist
Es ist "nur" ein Widget (bzw. 2) und verändert keine Einstellungen oder so.

Frank

@CKMartens
Ich mach das ja erst ein paar Tage aber ich vermute (weil ich diese Meldung nicht bekomme) das diese Fehlermeldungen event. von der Plattform (npm) auf der installiert wird abhängen?
Ich bekomme z.B.

 WARN optional SKIPPING OPTIONAL DEPENDENCY: osx-temperature-sensor@1.0.4 (node_modules/osx-temperature-sensor):npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for osx-temperature-sensor@1.0.4: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"arm"})

Es sind aber keine Abhängigkeiten eingetragen

Da es aber nur eine INFO ist...einfach mal ignorieren wenn ansonsten alles funktioniert

Frank

Version 0.0.2 ist nun auf Github online.

Musste leider erst VIS "bezwingen" (Aktualisierung) damit mir der/die Fehler auch angezeigt wurden.
Nun sollte soweit alles funktionieren.

Sorry, ist meine erste Entwicklung für ioBroker.

Frank

@sigi234
Ist doch da...die 2. Card zeigt es doch
Im Editor dann bootstrap4 auswählen und es erscheinen die 2 Widgets.

@Bachmann77
Erstmal danke fürs testen!
Ich denke mal, du meinst mit verschoben die Anzeigen im Editor? Genau dieses Problem hatte ich auch, weswegen die JS von Bootstrap nur in der Runtime geladen wird/werden soll. Ich habe allerdings den Verdacht, dass die Erkennung von vis.edit nicht immer sauber funktioniert.

Hattest du zufällig mal mehrfach versucht einen Reload der Seite im Browser durchzuführen? Bei mir hatte das als es einmal vorkam geholfen. Danach nie wieder was das Reproduzieren schwierig gestalltet.

Wie gesagt...ist nur ein Verdacht. Genauso, wie bei mir öfter mal Aktualisierungen aus z.B. dem Spotify Adapter erst wesentlich später auf der Seite ankommen (auch ohne mein Widget). Wäre super wenn du das noch einmal testen könntest um der Ursache auf den Grund zu gehen.
Zur Sicherheit mache ich jetzt mal meinen Rapi3 platt um eine frische Installation testen zu können...

Frank

Nach dem du eine Instanz angelegt hast, sollte es im VIS erscheinen (Dropdown).

Wie man mir mitteilte, bin ich allerdings im falschen Forum. Daher hier weiter

Widget zur Darstellung von Bootstrap v4.3.1 (Responsiv Webdesign) & Font Awesome v5.11.2 Icons in VIS.

Original Post

MOD Edit Jey Cee: Titel geändert entsprechend den [Richtlinien](Link Adresse) dieser Kategorie.