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 Artikelreihe schauen wir uns das Template-Widget genauer an. Mit dem Template-Widget können wir uns mit HTML sowie den Datenpunkt-Bindings ein eigenes Widget für ein Dashboard erstellen. Im ersten Schritt fügen wir dazu nun im gewünschten Dashboard das Widget über die Schaltfläche „Add Widget“ hinzu.

Über die Bearbeitungsfunktion können wir nun den Inhalt des Widgets direkt bearbeiten.

In den Template Einstellungen können wir nun den anzuzeigenden Namen sowie das eigentliche Template bearbeiten.

Im Template fügen wir nun den folgende HTML-Snippet ein. Damit wird ein Textblock eingefügt, welcher den Inhalt des Datenpunktes „ical.0.date.html“ linksbündig darstellt.

 <p style="margin-top: 12px; text-align:left;" ng-bind-html="itemValue('ical.0.data.html')"></p> 

Die Ausführung sieht nun so aus:

						
				

				

										

						

						  						  

							

							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 🙂