[Tablet UI] Oberfläche zur Steuerung der Viessmann-Heizung

Gunther · 22 November 2015, 13:37:43

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

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.

kvo1 · 22 November 2015, 20:56:11

Hi Gunther,

die Idee ist nicht schlecht, zumal ich auch mit dem Gedanken spiele , auf "Tablet UI" umzusteigen.

Gruß
kvo1

Tobias · 11 Juli 2016, 14:20:55

Hi,
dazu passend: hat jemand eine Idee, wie man dieses Beispiel in TabletUI umsetzen kann?

kvo1 · 11 Juli 2016, 23:41:20

Hallo Tobias,

zumindest könnte man das "Grundbild" in einem Gridster-Element als Hintergrund verwenden...

Code Auswählen

<li data-row="1" data-col="6" data-sizex="3" data-sizey="4" style="background-image: url('images/ostsee.jpg');" >

Gunther · 12 Juli 2016, 22:47:40

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.

Tobias · 13 Juli 2016, 09:48:58

Meinst du das hier??
https://forum.fhem.de/index.php/topic,37378.msg386497.html#msg386497

Gunther · 13 Juli 2016, 22:35:03

ja, exakt. Hilft Dir das?

n4rrOx · 14 Juli 2016, 09:00:59

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

Bsp.:
Euer Hintergrundbild hat die Größe 400 x 400 Pixel.
Dem Table-Tag gebt ihr ein Hintergrundbild:

Code Auswählen

<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
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

Tobias · 14 Juli 2016, 09:38:29

Ich habe es jetzt mit einem Gridstar element mit Hintergrundbild gemacht.
Alle Tablet-UI Div Elemente mit fixer positionierung hinterlegt.

Code Auswählen

<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>
[....]

Gunther · 14 Juli 2016, 09:55:14

sieht gut aus!

Womit hast Du das Bild gezeichnet?

kvo1 · 14 Juli 2016, 10:09:53

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 ?

Tobias · 14 Juli 2016, 12:28:16

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...