[FHEM-Tablet-UI] User-Demos

[moonsorrox]

habe mir mir aus dem Internet dieses Umgebung besorgt.

das ist das FTUI von Roman1528, baut aber noch auf die 2.4er Version auf frage ihn doch dazu mal speziell

[Wasserwerk33]

Danke werde ich machen

Gesendet von meinem ALE-L21 mit Tapatalk

[Wasserwerk33]

Hi.

Hat jemand vielleicht eine 2.6 Tablet Ui dmoversion noch? Habe meine verbaut und es klappt leider nicht so wie ich es möchte. Und ist in 2.6 nicht auch gidrester möglich?

[Macblock]

Hallo zusammen,

ich habe mal eine Anfängerfrage zwischendurch. Ich verwende für meine UI auch die sensationelle Vorlage von Paul - dafür auch von meiner Seite nochmals vielen Dank - das Bereitstellen ist besonders für Anfänger echt Klasse  Vom Super-Design mal abgesehen...

Ich bin leider nur zu blöd, um die Darstellung der WI-Icons hinzubekommen. Kann mir jemand einen Tipp geben, was ich tun muss, damit dies dargestellt werden?

Viele Grüße

Markus

[paul79]

Hallo zusammen,

ich habe mal eine Anfängerfrage zwischendurch. Ich verwende für meine UI auch die sensationelle Vorlage von Paul - dafür auch von meiner Seite nochmals vielen Dank - das Bereitstellen ist besonders für Anfänger echt Klasse  Vom Super-Design mal abgesehen...

Ich bin leider nur zu blöd, um die Darstellung der WI-Icons hinzubekommen. Kann mir jemand einen Tipp geben, was ich tun muss, damit dies dargestellt werden?

Viele Grüße

Markus

Hallo Markus

Danke und meist du das hier?

Code Auswählen Erweitern

data-icon="wi wi-time-6"

Gruß Paul

[Macblock]

Hallo Paul,

ja, genau die meine ich. Deine js Dateien habe ich eingebunden.

Viele Grüße

Markus

[jnewton957]

Abbildung Raumklima

Hallo,

ich habe mich mal wieder ein ein komplexes logproxy mit Daten aus x,y-Koordinatenpaaren gewagt.

Nach einem entscheidenden Tip in der Verwendung von ftui l4sym anstelle von I4dot sieht es nun auch ansprechend aus.

Code Auswählen Erweitern

<header class="headerTransparent">Raumklima</header>
<div class="big"
         data-type="chart"
data-logdevice='["logProxy","logProxy","logProxy"]'
data-logfile="CURRENT"
data-columnspec='["Func:logProxy_xy2Plot([[19,39],[24.2,34],[22.2,67],[17.7,73],[19,39]])","Func:logProxy_xy2Plot([[19.4,20],[25.5,17.5],[26.7,32],[24.5,60],[20.7,82],[17.2,86],[16,76],[17.2,38],[19.4,20]])","Func:logProxy_xy2Plot([[ReadingsVal(\\x22CUL_TX_8\\x22,\\x22temperature\\x22,0),ReadingsVal(\\x22CUL_TX_8\\x22,\\x22humidity\\x22,0)]])","Func:logProxy_xy2Plot([[ReadingsVal(\\x22CUL_TX_10\\x22,\\x22temperature\\x22,0),ReadingsVal(\\x22CUL_TX_10\\x22,\\x22humidity\\x22,0)]])","Func:logProxy_xy2Plot([[ReadingsVal(\\x22CUL_TX_5\\x22,\\x22temperature\\x22,0),ReadingsVal(\\x22CUL_TX_5\\x22,\\x22humidity\\x22,0)]])","Func:logProxy_xy2Plot([[ReadingsVal(\\x22CUL_TX_110\\x22,\\x22temperature\\x22,0),ReadingsVal(\\x22CUL_TX_110\\x22,\\x22humidity\\x22,0)]])","Func:logProxy_xy2Plot([[ReadingsVal(\\x22CUL_TX_9\\x22,\\x22temperature\\x22,0),ReadingsVal(\\x22CUL_TX_9\\x22,\\x22humidity\\x22,0)]])","Func:logProxy_xy2Plot([[ReadingsVal(\\x22netatmo_D70_ee_50_27_ad_02\\x22,\\x22temperature\\x22,0),ReadingsVal(\\x22netatmo_D70_ee_50_27_ad_02\\x22,\\x22humidity\\x22,0)]])"]'
         data-style='["ftui l1fill","ftui l5","ftui l5sym","ftui l2sym","ftui l4sym","ftui l6sym","ftui l0sym","ftui l1sym"]'
         data-ptype='["lines","lines","points","points","points","points","points","points"]'
         data-uaxis='["primary","primary","primary","primary","primary","primary","primary","primary"]'
         data-legend='["Behaglich","Noch Behaglich","Bad","B&uuml;ro","HWR Oben","Herrenzimmer","Schlafzimmer","Wohnzimmer"]'
         data-width="670px"
data-height="590px"
         data-minvalue="15"
         data-maxvalue="28"
data-minvalue_sec="15"
         data-maxvalue_sec="90"
data-yticks="auto"
data-showlegend="true"
data-crosshair="false"
         data-cursorgroup="1"
         data-scrollgroup="1"
data-xticks="auto">
    </div>

Ich nehme aber gerne Verbesserungsvorschläge an, da ich eine deratige Darstellung des Raumklimas bisher noch nicht gesehen habe.

Grüße
Jörg

[jnewton957]

Hallo,


Airquality

ich habe mir auch eine tabletUI Umsetzung für das neue Modul airquality.pm gebaut.

Code Auswählen Erweitern

<header class="headerTransparent">Aktuelle Luftqualität</header>
<table class="top-space">
<tr>
<td>Feinstaub (PM10) (Tagesmittelwert):
</td>
<td>
<div data-type="label"
data-device="airquality2"
data-get="PM10"
data-unit=" μg/m3"
data-limits="[0,20,40,60,80,100,120,140,160,180,200]"
data-colors='["#0000FF","#3232ff","#6666ff","#9999ff","#ccccff","#ffffb2","#ffff32","#ffbf7f","#ffa64c","#f4530d","#ff0000"]'
class="right big" >
</div>
</td>
<td>
<div data-type="label"
data-device="airquality2"
data-get="lastUpdatePM10"
class="right small" >
</div>
</td>
</tr>
<tr>
<td>CO (8h median):
</td>
<td>
<div data-type="label"
data-device="airquality2"
data-get="CO"
data-unit=" μg/m3"
data-limits="[0,1000,2000,3000,4000,5000,6000,7000,8000,9000,10000]"
data-colors='["#0000FF","#3232ff","#6666ff","#9999ff","#ccccff","#ffffb2","#ffff32","#ffbf7f","#ffa64c","#f4530d","#ff0000"]'
style="display:inline"
class="right big" >
</div>
</td>
<td>
<div data-type="label"
data-device="airquality2"
data-get="lastUpdateCO"
style="display:inline"
class="right small" >
</div>
</td>

</tr>
<tr>
<td>Stickstoffdioxid (Ein-Stunden-Mittelwert):
</td>
<td>
<div data-type="label"
data-device="airquality2"
data-get="NO2"
data-unit=" μg/m3"
data-limits="[0,20,40,60,80,100,120,140,160,180,200]"
data-colors='["#0000FF","#3232ff","#6666ff","#9999ff","#ccccff","#ffffb2","#ffff32","#ffbf7f","#ffa64c","#f4530d","#ff0000"]'
class="right big" >
</div>
</td>
<td>
<div data-type="label"
data-device="airquality2"
data-get="lastUpdateNO2"
class="right small" >
</div>
</td>
</tr>

</table>

Kann mir da bitte jemand mit einer hoffentlich Kleinigkeit helfen.

Ich möchte unterhalb des header "Aktuelle Luftqualität" EINE Zeile haben, in der die Schwellwerte (wie im Bild airquality3.png dargestellt) mit den farbigen Symbolen angezeigt werden. Ob als farbiger Kreis oder besser als Rechteck ist egal.
Die farbcodes sollen identisch zu data-colors sein.

Wie bekomme ich das hin ?

Danke
Jörg

[paul79]

Hallo,


Airquality

ich habe mir auch eine tabletUI Umsetzung für das neue Modul airquality.pm gebaut.

Code Auswählen Erweitern

<header class="headerTransparent">Aktuelle Luftqualität</header>
<table class="top-space">
<tr>
<td>Feinstaub (PM10) (Tagesmittelwert):
</td>
<td>
<div data-type="label"
data-device="airquality2"
data-get="PM10"
data-unit=" μg/m3"
data-limits="[0,20,40,60,80,100,120,140,160,180,200]"
data-colors='["#0000FF","#3232ff","#6666ff","#9999ff","#ccccff","#ffffb2","#ffff32","#ffbf7f","#ffa64c","#f4530d","#ff0000"]'
class="right big" >
</div>
</td>
<td>
<div data-type="label"
data-device="airquality2"
data-get="lastUpdatePM10"
class="right small" >
</div>
</td>
</tr>
<tr>
<td>CO (8h median):
</td>
<td>
<div data-type="label"
data-device="airquality2"
data-get="CO"
data-unit=" μg/m3"
data-limits="[0,1000,2000,3000,4000,5000,6000,7000,8000,9000,10000]"
data-colors='["#0000FF","#3232ff","#6666ff","#9999ff","#ccccff","#ffffb2","#ffff32","#ffbf7f","#ffa64c","#f4530d","#ff0000"]'
style="display:inline"
class="right big" >
</div>
</td>
<td>
<div data-type="label"
data-device="airquality2"
data-get="lastUpdateCO"
style="display:inline"
class="right small" >
</div>
</td>

</tr>
<tr>
<td>Stickstoffdioxid (Ein-Stunden-Mittelwert):
</td>
<td>
<div data-type="label"
data-device="airquality2"
data-get="NO2"
data-unit=" μg/m3"
data-limits="[0,20,40,60,80,100,120,140,160,180,200]"
data-colors='["#0000FF","#3232ff","#6666ff","#9999ff","#ccccff","#ffffb2","#ffff32","#ffbf7f","#ffa64c","#f4530d","#ff0000"]'
class="right big" >
</div>
</td>
<td>
<div data-type="label"
data-device="airquality2"
data-get="lastUpdateNO2"
class="right small" >
</div>
</td>
</tr>

</table>

Kann mir da bitte jemand mit einer hoffentlich Kleinigkeit helfen.

Ich möchte unterhalb des header "Aktuelle Luftqualität" EINE Zeile haben, in der die Schwellwerte (wie im Bild airquality3.png dargestellt) mit den farbigen Symbolen angezeigt werden. Ob als farbiger Kreis oder besser als Rechteck ist egal.
Die farbcodes sollen identisch zu data-colors sein.

Wie bekomme ich das hin ?

Danke
Jörg

Hallo Jörg,

meinst du es so?

Code Auswählen Erweitern

<div data-type="symbol"
data-device="airquality1"
data-get="SO2"
data-icon="fa-stop"
data-states="[0,13,25,38,50,63,75,88,100,113,125]"
         data-colors='["#0000ff","#3232ff","#6666ff","#9999ff","#ccccff","#ffffb2","#ffff32","#ffbf7f","#ffa64c","#f4530d","#ff0000"]'
class="right big" >
</div>


Gruß Paul

[jnewton957]

Hallo Jörg,

meinst du es so?

Code Auswählen Erweitern

<div data-type="symbol"
data-device="airquality1"
data-get="SO2"
data-icon="fa-stop"
data-states="[0,13,25,38,50,63,75,88,100,113,125]"
         data-colors='["#0000ff","#3232ff","#6666ff","#9999ff","#ccccff","#ffffb2","#ffff32","#ffbf7f","#ffa64c","#f4530d","#ff0000"]'
class="right big" >
</div>


Gruß Paul

Hallo Paul,

nein das meinte ich nicht.
Die Werte sind aus meiner Sicht nicht aussagekräftig. Was sagt mir 1 μg/m3 oder 300 μg/m3?
Bei den Luftdaten steckt die Information in der Farbe (Schwellwert). Ist 1 blau oder gelb oder rot?

Dafür gibt es eine Farblegende. So sehe ich anhand der 11 Werte, ob bzw. wie weit es (anhand der Farbe) von gelb bzw. rot "entfernt" ist. Ich habe ja den Messwert eben farbig (datengetrieben) eingefärbt.

Ich habe das mal gemalt. Die Lgenede entweder mit Schwellwerten oder eben nur mit den Farbrechtecken. Also nicht Datengetrieben pro Messwert.
Einfach eine Zeile mit 11 unterschiedlich farbigen Kästchen direkt unter dem header. Also z.B. 11 x fa-stop in unterschiedlichen Farben nebeneinander.

Grüße
Jörg
P.S: vielleicht zu einfache Frage ? Bin halt kein html5 programmieren

[en-trust]

Gibt es eine Vorlage für die verschiedenen Auflösungen  (z.B. Tablet 7 oder 10 Zoll) ?

[paul79]

Gibt es eine Vorlage für die verschiedenen Auflösungen  (z.B. Tablet 7 oder 10 Zoll) ?

jo https://forum.fhem.de/index.php/topic,37378.msg591642.html#msg591642

Gruß Paul

[lenn1]

Hallo,

ich bin seit September 2016 auch dabei und möchte mein Design für mein Wandtablet einmal zeigen.
Verglichen mit dem, was vorherige Poster aufgebaut haben noch wirklich überschaubar.

Ich habe aktuell allerdings noch das Problem, dass die ganze Oberfläche noch nicht mittig ist.
Geht das überhaupt. Ich finde das sieht sonst ein wenig wonky aus, wenn da soviel platz rechts und unten ist.

Grüße
Lennart

[Octopus180]

Hallo Lennart,

wärst du so nett und würdest deine .html zu Verfügung stellen. Ich finde aus jedem Aufbau kann man Ideen herrausfilten und in seine eigenen Ideen verwenden.

Gruß Peter

[en-trust]

Leider zeigt mir die Tablet Version von Paul nur eine merkwürdige Oberfläche an...

Es fehlen die css Dateien in der zip.

<link rel="stylesheet" type="text/css" href="css/fhem-tablet-ui.css" />   
<link rel="stylesheet" type="text/css" href="css/fhem-grayblue-user-ui.css" />         
<link rel="stylesheet" type="text/css" href="css/fhem-tablet-ui-user.css" />            
<link rel="stylesheet" type="text/css" href="css/fhem-tablet-ui-weekprofile.css" />