ioBroker HABPanel – Teil 20 – iCal Termine HTML-Darstellung

In dieser Artikelreihe zeige ich Dir eine weitere Visualierungsoberfläche für ioBroker.  

Im 20. Teil der HABPanel-Artikelreihe schauen wir uns das Widget Template genauer an. Mit dem Template-Widget können wir uns mit HTML sowie den Datenpunkt-Bindings (Object-Bindings) ein eigenes Widget für unser Dashboard erstellen. Im ersten Schritt öffnen wir die Konfiguration des HABPanels und navigieren auf das Dashboard, auf dem wir das Widget einfügen möchten. Über die Plus-Schaltfläche oben rechts (Add Widget) fügen wir dann das Widget Template zu unserem Dashboard hinzu.

Nach dem Einfügen des Widgets, können wir nun mit der Konfiguration des Widgets beginnen. Dazu klicken wir auf die Bearbeitungsfunktion Edit oben rechts im Menü des Sandwitch-Buttons.

Im neuen Fenster können wir nun das Widget bearbeiten. In den Template Einstellungen können wir nun den anzuzeigenden Namen sowie das eigentliche Template in Form von HTML-Code bearbeiten.

Im Template fügen wir nun das folgende HTML-Snippet ein. Mit dem Snippet wird ein Paragraph-Element (p) in das Widget eingefügt, welches über die itemValue-Definition sowie die ng-bind-html-Richtlinie den Wert des Datenpunkts „ical.0.date.html“ in dem Widget darstellt. Mittels den Styling-Optionen des Paragraph-Elements wird zudem der Abstand zum oberen Rand verändert sowie die Textausrichtung auf links gesetzt.

Weitere Informationen zum Thema Object-Binding mit AngularJS findest Du auch hier:

https://www.w3schools.com/angular/ng_ng-bind-html.asp

In der Visualisierung wird das Widget jetzt folgt dargestellt:
Über das Object-Binding wird die komplette HTML-Definition des Datenpunkts „ical.0.date.html“ im Widget dargestellt. Über diese Vorgehensweise können wir recht einfach HTML-Definitionen in unser Dashboard übernehmen.

						
				

				

										

						

						  						  

							

							ioBroker HABPanel
						  
 												 
						 

							

 	
Teil 1 – Installation und Grundlagen
 	
Teil 2 – Dashboard und Widgets
 	
Teil 3 – Custom Widgets 
 	
Teil 4 – Custom Widgets importieren (JSON-Format)
 	
Teil 5 – Custom Widgets anpassen und erweitern
 	
Teil 6 – Eigenes Widget erstellen
 	
Teil 7 – Unterstützung von verschiedenen Geräten und Auflösungen
 	
Teil 8 – Tür-/Fensterkontakt visualisieren
 	
Teil 9 – Das Chart Widget
 	
Teil 10 - Mit dem Frame-Widget eine VIS-View einbinden
 	
Teil 11 - Script über Button starten
 	
Teil 12 - Das Timeline-Widget
 	
Teil 13 - Das Template-Widget
 	
Teil 14 - Template Wissenssammlung
 	
Teil 15 – Das Slider-Widget
 	
Teil 16 – Das Dummy-Widget
 	
Teil 17 – Das Knob-Widget
 	
Teil 18 – Das Clock-Widget
 	
Teil 19 – Das Button-Widget
 	
Teil 20 – iCal Termine HTML-Darstellung
 	
Teil 21 – OpenWeatherMap Widget
Teil 22 – Image Widget
Teil 23 – Selection Widget
Teil 24 – Online-Status Widget
						  
						   
						
					
										
					
				
								
											

Ich hoffe Dir gefällt der Artikel. Ich freue mich über Deinen Kommentar 🙂