Guten Tag liebe ioBroker Community,
erstmal möchte ich mich für dieses tolle Forum bedanken. Ich habe dank diverser Anleitungen bereits einiges gelesen/konfiguriert und Probleme gelöst. - Vielen Dank dafür
Ich bin UI/UX-Designer von Beruf und würde gerne eine eigene Visualisierung mittels VIS gestalten. Ich habe bereits damit begonnen, komme nun allerdings nicht weiter und könnte eure Hilfe sehr gut gebrauchen.
Was möchte ich tun?:
Anders als die meisten hier, würde ich gerne eine Art responsive Website mittels HTML/CSS/JS erstellen. Dabei möchte ich den Code selbst schreiben und nicht per Drag&Drop meine Oberfläche erstellen. Ich habe dazu das HTML-Widget ausprobiert und dort angefangen meine View zu erstellen.
Was habe ich bisher getan?:
- Vis installiert
- Neues Projekt angelegt
- View angelegt (main_view)
- HTML-Widget eingefügt und angefangen Code zu schreiben
- über den Reiter "CSS" habe ich mit @import Bootstrap eingebunden
- über den Reiter "Skript" füge ich mittels appendChild ein paar jQuery-Plugins und andere Libraries (z.B. Boostrap) hinzu.
Was steht in meinem HTML-Widget
Ziemlich viel inzwischen. Grundlegend allerdings ein ziemlich normaler Aufbau:
<header>Bootstrap Navi</header>
<main>Headlines, Spalten, Zeilen...usw.
Mein Problem beschäftigt sich mit einem Slider, HTML-Aufbau in etwa so:
<div id="slider">
<div class="main-carousel">
<div class="carousel-cell"></div>
<div class="carousel-cell"></div>
<div class="carousel-cell"></div>
<div class="carousel-cell"></div>
<div class="carousel-cell"></div>
</div>
</div>
</main>
Bild:
Anmerkung: Die Initialisierung des Sliders hat unter "Skripte" nicht funktioniert. Auch das auslagern in eine externe Datei + das Anhängen des Skripts in den Header funktioniert leider nicht.
Deshalb rufe ich diese Datei mittels <script>-Tag direkt über dem Slider auf. Das ist eine ziemlich komische Lösung, funktioniert aber soweit.
Ich benutze diesen Slider hier: https://flickity.metafizzy.co/
Anschließend habe ich mir Datenpunkte aus dem Spotify-Adapter rausgesucht und lasse diese in meinem Code ausgeben: <div>{Daten.Punkt}</div>
Als ich die Zeitanzeige eingebunden habe, habe ich festgestellt, dass die View oder das Widget einmal pro Sekunde neugeladen wird. Das macht natürlich Sinn, da der Wert der Zeit ja jede Sekunde geändert wird und irgendwie ausgegeben werden muss. (Übrigens sehr cool, dass das bereits von selbst funktioniert. Ich dachte, ich muss mir etwas entsprechendes schreiben)
Mein Problem:
Dadurch, dass die Initialisierung des Sliders im HTML-Widget, direkt über dem entsprechenden Code (s. oben) stattfindet und sich das/die Widget/View einmal pro Sekunde aktualisiert wird, wird natürlich auch der Slider immer neu geladen. Somit fange ich, wenn ich auf Slide 2 bin, natürlich nach einem Reload wieder vorne an.
Was würde ich gerne wissen?:
Vieles - Ich habe das Gefühl, meine Umsetzung ist ziemlich zusammengebastelt. Deshalb habe ich für den Anfang einmal zwei grundlegende Fragen:
- Wie würdet ihr eine entsprechende HTML Oberfläche anlegen und wie ist es gedacht, Dateien/Skripte in eine View oder ein Widget einzufügen?
- Ist es möglich, einen sich aktualisierenden Datenpunkt in das HTML-Widget einzubinden ohne das ganze Widget aktualisieren zu lassen?
Ich habe bereits fast die komplette Doku zu Vis, Widgets, Adaptern... usw. gelesen. Deshalb habe ich auch den Javascript-Adapter ausprobiert und dort meinen Javascriptcode geschrieben. Ich habe diese jedoch nicht funktionierend in meine Visualisierung bekommen.
Ich freue mich über jede Antwort, welche ich bekommen kann und bitte habt etwas Gnade mit einem Anfänger wie mir
Vielen Dank
Daniel