Mittlerweile gibt es ein super funktionierendes Modul um die Viessmannheizung über FHEM und angeschlossenen Optolink-Adapter zu steuern:
http://forum.fhem.de/index.php/topic,20280.0.html (http://forum.fhem.de/index.php/topic,20280.0.html)
Es wäre nun richtig sexy, wenn wir es hinbekommen die Steuerung auf der tollen Tablet UI darzustellen.
Angeregt durch peterboss: Damit das nicht unter geht im riesigen Tablet UI-Thread, mache ich mal einen eigenen auf.
Ich stelle mir folgendes vor:
- Übersichtsseite mit den wichtigsten Informationen zu Temperaturen, Pumpenzuständen, etc.
- Diverse Plots der angeschlossenen Sensoren
- Eine Seite, über die verschiedene Timer an verschiedenen Tagen per Oberfläche gesteuert werden können
Es wäre also klasse, wenn alle Viesmann-Anhänger hier mitdiskutieren und entwickeln (was ich leider nicht kann).
Codebesispiele sind ebenso erwünscht.
Hi Gunther,
die Idee ist nicht schlecht, zumal ich auch mit dem Gedanken spiele , auf "Tablet UI" umzusteigen.
Gruß
kvo1
Hi,
dazu passend: hat jemand eine Idee, wie man dieses Beispiel in TabletUI umsetzen kann?
Hallo Tobias,
zumindest könnte man das "Grundbild" in einem Gridster-Element als Hintergrund verwenden...
<li data-row="1" data-col="6" data-sizex="3" data-sizey="4" style="background-image: url('images/ostsee.jpg');" >
Es gab jemanden im Tablet UI Bereich, der hat sowas in der mobilen Ansicht (Handy) über viele kleine Gridster Elemente und Hintergrundbild realisiert. Leider finde ich den Post nicht.
Meinst du das hier??
https://forum.fhem.de/index.php/topic,37378.msg386497.html#msg386497
ja, exakt. Hilft Dir das?
Zitat von: Gunther am 13 Juli 2016, 22:35:03
ja, exakt. Hilft Dir das?
Ich finde die Lösung über Gridster-Elemente definitiv zu aufwendig und zudem wirkt diese sich auch auf andere Gridsterelemete aus ...
Vorschlag: Benutzt dafür eine Tabelle mit fester Höhe, Breite und einem Hintergrundbild.
Info-Link bzgl. Tabellenaufbau in HTML: http://www.htmlmaster.de/html-kurs/09html.htm (http://www.htmlmaster.de/html-kurs/09html.htm)
Bsp.:
Euer Hintergrundbild hat die Größe 400 x 400 Pixel.
Dem Table-Tag gebt ihr ein Hintergrundbild:
<table high="400" width="400" style="background-image: url('images/hintergrundbild.jpg');">Nun liegt es an euch wie viele Informationen und wie genau ihr die Infos platzieren wollt. Man könnte ja mit einer Tabelle 10 x 10 Zellen anfangen, d. h. jedem der 10 <td> und <tr> Tags eine Breite bzw. Höhe mitgeben. Somit hat jede Zelle 40 x 40 Pixel.
Feintuning der Ausrichtung innerhalb einer Zelle mit align bzw. valign.
Falls einige Infos größer als 40x40 Pixel wären, kann man auch Zellen miteinander verbinden: rowspan bzw. colspan
http://www.starhtml.de/online/tabellen.htm (http://www.starhtml.de/online/tabellen.htm)
Ggf. die Formatierungen (Hintergrundbild, high, width, align, valign, .... etc.) in CSS-Klassen packen und nur noch mit diesen Klassen innerhalb der Tabelle arbeiten.
Vorteil:
Man muss nichts an den Gridstereinstellungen ändern, was sich auf das komplette Layout auswirken würde.
Gruß
Mathias
Ich habe es jetzt mit einem Gridstar element mit Hintergrundbild gemacht.
Alle Tablet-UI Div Elemente mit fixer positionierung hinterlegt.
<html>
<title>FHEM Home</title>
<head>
</head>
<body>
<div class="gridster">
<ul>
<li data-row="1" data-col="1" data-sizex="1" data-sizey="7" data-template="menu-main-left.html"></li>
<li data-row="1" data-col="2" data-sizex="8" data-sizey="4"
style="background: url(images/heizung_schematic.png) 0 0 no-repeat;position:fixed;top:13px;left:130px">
<header>Status Heizung</header>
<div data-type="label" class="bold" style="position:fixed;top:485px;left:250px">Heizung</div>
<div data-type="label" class="bold" style="position:fixed;top:482px;left:460px">Pufferspeicher</div>
<div data-type="label" class="bold" style="position:fixed;top:482px;left:655px">Warmwasser</div>
<div data-type="label"
style="position:fixed;top:200px;left:790px"
data-device="Heizung"
data-get="HZ-Temp-Aussen"
data-unit="%B0C%0A"
class="bold bigger">
</div>
<div data-type="label"
style="position:fixed;top:348px;left:790px"
data-device="Heizung"
data-get="WW-Temp-Oben"
data-limits='[0,40,53]'
data-colors='["#6699FF","#AA6900","#FF0000"]'
data-unit="%B0C%0A"
class="bold big">
</div>
<div data-type="label"
style="position:fixed;top:410px;left:790px"
data-device="Heizung"
data-get="WW-Temp-Unten"
data-limits='[0,40,53]'
data-colors='["#6699FF","#AA6900","#FF0000"]'
data-unit="%B0C%0A"
class="bold big">
</div>
[....]
sieht gut aus!
Womit hast Du das Bild gezeichnet?
Hi Tobias,
Zitat von: Gunther am 14 Juli 2016, 09:55:14
sieht gut aus!
Womit hast Du das Bild gezeichnet?
Stimme Gunther zu, sieht nett aus ! gleiche Frage: sidn die Bilder gezeichnet oder woher ?
Würdest Du ggf. dann mal dem kmpl. FTUI Code einstellen ?
Grundbild ist von hier: https://mirjamherman.wordpress.com/miscellaneous/house-control-panel/
Den Rest hab ich selbst eingebaut, siehe anhang.
Die Einzelnen Readings der Heizung exakt pixelgenau positioniert, ist aber noch nicht komplettiert...