[FHEM-Tablet-UI] User-Demos

[moonsorrox]

Da ja hier der User Demo Thread ist möchte ich auch mal ein paar Bilder beisteuern.
Es ist nur ein Auszug an Bilder da ich hier nicht jedes PopUp und Template dargestellt habe.
Fotos sind alle mit dem Handy gemacht.

[jnewton957]

Sehr schön, übersichtlich und aufgeräumt.

Sind deine Sensoren überwiegend Homematic und Hue?

[Eisix]

Hallo,

Dann packe ich mal meinen Tablet-Stand dazu.

Gruß
Eisix

[Eisix]

Und noch ein Video meiner Handy Version.

[Helmi55]

Hallo Eisix
super Sache die du da gebaut hast.
Würdest du von Main und System deinen Code posten
Da kann man(n) - ich - noch was lernen

Danke
Helmut

[TWART016]

Und noch ein Video meiner Handy Version.

Wie hast du denn das seitliche swipen umgesetzt?

[Eisix]

@Helmi55

welche der templates brauchst du
main

Code Auswählen Erweitern


<div class="page" id="content1">
    <div class="gridster">
      <ul>
<li data-row="1" data-col="1" data-sizex="4" data-sizey="3" data-template="templates/tmp_Vorratsraum.htm"></li>
        <li data-row="1" data-col="5" data-sizex="2" data-sizey="8" data-template="templates/tmp_Wetter.htm"></li>
<li data-row="1" data-col="7" data-sizex="4" data-sizey="4" data-template="templates/tmp_Wohnzimmer.htm"></li>
        <li data-row="1" data-col="11" data-sizex="1" data-sizey="2" data-template="templates/tmp_Klingel.htm"></li>
<li data-row="1" data-col="12" data-sizex="1" data-sizey="2" data-template="templates/tmp_LichtTerrasse.htm"></li>
<li data-row="1" data-col="13" data-sizex="5" data-sizey="6" data-template="templates/tmp_Geraete2.htm"></li>
<li data-row="4" data-col="1" data-sizex="4" data-sizey="5" data-template="templates/tmp_Homestatus.htm"></li>
<li data-row="5" data-col="7" data-sizex="4" data-sizey="2" data-template="templates/tmp_Abfall.htm"></li>
<li data-row="7" data-col="7" data-sizex="4" data-sizey="2" data-template="templates/tmp_Bose.htm"></li>
        <li data-row="3" data-col="11" data-sizex="2" data-sizey="2" data-template="templates/tmp_Garagen.htm"></li>
<li data-row="5" data-col="11" data-sizex="2" data-sizey="2" data-template="templates/tmp_Aquarium.htm"></li>
<li data-row="7" data-col="11" data-sizex="3" data-sizey="2" data-template="templates/tmp_Multimedia.htm"></li>
<li data-row="7" data-col="14" data-sizex="2" data-sizey="2" data-template="templates/tmp_Lueftung.htm"></li>
<li data-row="7" data-col="16" data-sizex="2" data-sizey="2" data-template="templates/tmp_Guest_WLAN.htm"></li>
<li data-row="9" data-col="1" data-sizex="17" data-sizey="7" data-template="templates/tmp_Calllist.htm"></li>
      </ul>
  </div>
</div>


system

Code Auswählen Erweitern


<div class="page" id="Settings">
    <div class="gridster">
      <ul>
                <li data-row="1" data-col="1" data-sizex="5" data-sizey="7" data-template="templates/tmp_Fhemmonitor.htm"></li>
                <li data-row="1" data-col="6" data-sizex="6" data-sizey="7" data-template="templates/tmp_Netzwerkmonitor.htm"></li>
                <li data-row="1" data-col="12" data-sizex="5" data-sizey="7" data-template="templates/tmp_Servermonitor.htm"></li>
                <li data-row="1" data-col="17" data-sizex="1" data-sizey="15" data-template="templates/tmp_Batterie.htm"></li>
                <li data-row="8" data-col="1" data-sizex="11" data-sizey="8" data-template="templates/tmp_Stromverbrauch.htm"></li>
                <li data-row="8" data-col="12" data-sizex="5" data-sizey="8" data-template="templates/tmp_APC.htm"></li>
        </ul>
    </div>
</div>


@TWART016

Wie hast du denn das seitliche swipen umgesetzt?

Wahrscheinlich einfacher als du vermutest 

Der gridster ist einfach 3 mal Bildschirmbreite und der 2+3 Bildschirm wird je nach ausgewählter Funktion ein/ausgeblendet.

index

Code Auswählen Erweitern


<div class="gridster">
<ul>
        <li data-row="1" data-col="1" data-sizex="1" data-sizey="2" data-template="templates/tmp_Licht.htm"></li>
        <li data-row="1" data-col="2" data-sizex="1" data-sizey="2" data-template="templates/tmp_LichtVR_mob.htm"></li>
        <li data-row="1" data-col="3" data-sizex="1" data-sizey="2" data-template="templates/tmp_Tueren.htm"></li>
        <li data-row="1" data-col="4" data-sizex="2" data-sizey="2" data-template="templates/tmp_Garagen.htm"></li>
        <li data-row="3" data-col="1" data-sizex="5" data-sizey="2" data-template="templates/tmp_Rolladen_mob.htm"></li>
        <li data-row="6" data-col="1" data-sizex="5" data-sizey="2" data-template="templates/tmp_Abfall.htm"></li>
        <li data-row="8" data-col="1" data-sizex="5" data-sizey="2" data-template="templates/tmp_Bose.htm"></li>
        <li data-row="10" data-col="1" data-sizex="5" data-sizey="2" data-template="templates/tmp_Multimedia_mob.htm"></li>
        <li data-row="12" data-col="1" data-sizex="5" data-sizey="2" data-template="templates/tmp_Homestatus_mob.htm"></li>
<li data-row="1" data-col="6" data-sizex="10" data-sizey="12" data-template="Switch.htm"></li>
</ul>
</div>


Switch.htm

Code Auswählen Erweitern


<div data-type="html" data-class="hubvirt:state" data-map-class='{"Licht":"show", ".*":"myhidden"}'>
  <div data-type="include" data-url="templates/tmp_Licht_mob.htm"></div>
</div>
<div data-type="html" data-class="hubvirt:state" data-map-class='{"Fernsehen":"show", ".*":"myhidden"}'>
  <div data-type="include" data-url="templates/tmp_Fernsehen_mob.htm"></div>
</div>
<div data-type="html" data-class="hubvirt:state" data-map-class='{"AmazonPrime":"show", ".*":"myhidden"}'>
<div data-type="include" data-url="templates/tmp_AmazonPrime_mob.htm"></div>
</div>
<div data-type="html" data-class="hubvirt:state" data-map-class='{"Musik":"show", ".*":"myhidden"}'>
<div data-type="include" data-url="templates/tmp_Onkyo_Player_mob.htm"></div>
</div>
<div data-type="html" data-class="hubvirt:state" data-map-class='{"Bose":"show", ".*":"myhidden"}'>
<div data-type="include" data-url="templates/tmp_Bose_Player_mob.htm"></div>
</div>
<div data-type="html" data-class="hubvirt:state" data-map-class='{"Filme":"show", ".*":"myhidden"}'>
<div data-type="include" data-url="templates/tmp_Filme_mob.htm"></div>
</div>
<div data-type="html" data-class="hubvirt:state" data-map-class='{"Zocken":"show", ".*":"myhidden"}'>
<div data-type="include" data-url="templates/tmp_Zocken_mob.htm"></div>
</div>
<div data-type="html" data-class="hubvirt:state" data-map-class='{"PowerOff":"show", ".*":"myhidden"}'>
<div data-type="include" data-url="templates/tmp_PowerOff_mob.htm"></div>
</div>


Gruß
Eisix

[Helmi55]

Danke für rasche Antwort - werde ich mir ansehen
Helmut

[jnewton957]

Hallo Eisix,

Mich würde das coding deines wetter chart mit dem Forecast für Regen interessieren. Das ist ja besser, als die Einbindung des Bildes  von meteosat.

Danke dir
Jörg

[Eisix]

Hallo Jörg,

alles nur geklaut, finde nur den Beitrag gerade nicht.

Code Auswählen Erweitern


<div class="nobuttons fullsize"
data-type="chart"
data-device="Wetter"
data-logdevice='[
"lp",
"lp",
"lp"
]'
data-columnspec='[
"Func:logProxy_proplanta2Plot(\\x22Wetter\\x22,\\x22weatherIcon\\x22,$from,$to,12,\\x22day\\x22)",
[
"Func:logProxy_proplanta2Plot(\\x22Wetter\\x22,\\x22tempMax\\x22,$from,$to,12,\\x22day\\x22)",
"Func:logProxy_proplanta2Plot(\\x22Wetter\\x22,\\x22tempMin\\x22,$from,$to,12,\\x22day\\x22)"
],
"Func:logProxy_proplanta2Plot(\\x22Wetter\\x22,\\x22rain_\\x22,$from,$to,12,\\x22day\\x22)"
]'
data-style='[
"ftui l99icon",
["fill",["-40","#00A1DE","1.0"],["0","#00A1DE","0"],["0","#E17000","0"],["400","#E17000","1.0"]],
"ftui l5fill"
]'
data-ptype='[
"icons:1",
"cubic",
"steps"
]'
data-uaxis='[
"primary",
"primary",
"secondary"
]'
data-legend='[
"Wetterbedingung",
"Temperatur",
"Niederschlag"
]'
data-legendpos='["behind","top"]'
data-showlegend="true"
data-minvalue="auto"
data-maxvalue="auto"
data-minvalue_sec="0"
data-maxvalue_sec="20"
data-xticks="720"
data-yticks="auto"
data-yunit="°C"
data-yunit_sec="mm"
data-y_margin="20"
data-width="100%"
data-height="310px"
data-daysago_start = "now"
data-daysago_end = "-7d"
data-timeformat="hh\LF\ee\LF\dd.MM.."
data-nofulldays='true'
></div>


css

Code Auswählen Erweitern


/* icon lines */
.ftui.l99icon { stroke:#DDA400; stroke-width:48px; fill:none; }

Hoffe ich habe nichts vergessen.

Das meteosat Video öffnet bei mir ein Popup zu www.windy.com dort gibt es dann alle Details bei Bedarf.

Gruß
Eisix

[Jewe]

Hallo Eisix,

das sieht richtig toll aus was Du da gemach hast [emoji106] Ich bin auch dabei mein FTUI zu Designen von daher interessieren mich auch ein paar Aachen, die Du umgesetzt hast .
-> Amazon, System, TV und Onkyo.
Es eilt nicht, ist ja schon einiges [emoji3][emoji3]

Vielen Dank im Voraus,

Jens


Gesendet von iPhone mit Tapatalk

[Det20]

@Eisix: Wie bist du an die Preview Bilder der Sender gekommen? Also was da momentan läuft?

[Eisix]

@Det20
über das Webif interface meines Sat-Receivers

Code Auswählen Erweitern


<div data-type="image"
        data-url="http://X.X.X.X/grab?format=jpg"
                data-size='350'
                data-refresh="30"
                class="top-space-2x nocache">
</div>



Gruß
Eisix

[Andy89]

welche der templates brauchst du

Hallo Eisix,
dank dir bin ich darauf gekommen, dass ich meine USV ja auch mal in FHEM einbinden könnte.

Wärst du so nett folgende Templates bereitzustellen?
- "templates/tmp_APC.htm"
- "templates/tmp_Servermonitor.htm"

Vielen Dank!

Beste Grüße
Andy

[Eisix]

@Andy

APC

Code Auswählen Erweitern


<div class="row">
<div class="">
<br>
<div class="inline">
<div data-type="scale"
data-device="APC"
data-get="BCHARGE"
data-tick="4"
data-extra-tick="20"
data-value-interval="20"
data-orientation="vertical"
data-height="120"
data-width="35px"
data-limits='["0","50","90"]'
data-colors='["#FA2828","#dddd22","#21a000"]'
data-min="0"
data-max="100"
data-part="^(\d+).\d.+$"
style="margin-left: -20px !important;"
class="white darker showdeco"
></div>
<b>Ladestand</b></div>

<div class="inline"></div>
<div class="inline"></div>
<div class="inline"></div>
<div class="inline"></div>
<div class="inline"></div>
<div class="inline"></div>
<div class="inline"></div>

<div class="inline">
<div data-type="scale"
data-device="APC"
data-get="LOADPCT"
data-tick="4"
data-extra-tick="20"
data-value-interval="20"
data-orientation="vertical"
data-height="120"
data-width="35px"
data-limits='["0","50","80"]'
data-colors='["#21a000","#dddd22","#FA2828"]'
data-min="0"
data-max="100"
data-part="^(\d+).\d.+$"
style="margin-left: -20px !important;"
class="white darker showdeco"
></div>
<b>Belastung</b></div>
</div>
</div>
<div class="row">
        <div class="center">
<br>
<br>
                <div data-type="controlbutton"
                        data-device="APC"
                        data-get="STATUS"
                        data-get-on="ONLINE"
                        data-get-off="!ONLINE"
data-icon="fa-plug"
                        data-on-color="white"
                        data-off-color="white"
                        data-on-background-color="#21a000"
                        data-off-background-color="#FA2828"
                        class=""
                ><div data-type="label" data-device='APC'
                        data-get='STATUS'
                        class="bold"
                ></div></div>
        </div>
</div>
<div class="row">
<div class="">
<br>
<div><b>Restaufzeit:</b></div>
<br>
    <div data-type="label" data-device='APC'
          data-get='TIMELEFT'
class=""
></div>
</div>
</div>


servermonitor

Code Auswählen Erweitern


<div class="inline">
<br>
<div data-type="popup" data-width="400px" data-height="300px">
    <div data-type="knob"
        data-device="SYSMON2"
        data-get="CPU"
data-anglearc="360"
data-angleoffset="0"
        data-min="0"
        data-max="100"
data-fgcolor="#FA2828"
data-bgcolor="#21a000"
data-nomcolor="white"
        class="mini readonly"
data-unit="%"
></div>
        <div>CPU</div>
                <div class="dialog">
                        <header>TEMPERATUR</header>
<table align="center" style="width:90%">
        <tr>
        <td style="" class="A1"><center><div class="inline"></div></td>
        <td style="solid grey;" class="A2"><center><div class="inline"><big>Aktuell<br></big></div></td>
        <td style="" class="A3"><center><div class="inline"></div></td>
        <td style="solid grey;" class="A4"><center><div class="inline"><big>Durchschnitt<br></big></div></td>
</tr>
<tr>
                        <td style="" class="B1"><center><div class="inline"></div>
                                        <div>CPU1</div>
                        </td>
                        <td style="" class="B2"><center><div class="inline"></div>
                                        <div data-type="label"
                                                data-device="sysmon"
                                                data-get="cpu1_temp"
                                                data-unit="%B0C%0A"
                                                data-limits='[0,40]'
                                                data-colors='["#21a000","#FA2828"]'
                                                class="big">
                                        </div>
                        </td>
                        <td style="" class="B3"><center><div class="inline"></div></td>
                        <td style="" class="B4"><center><div class="inline"></div>
                                        <div data-type="label"
                                                data-device="sysmon"
                                                data-get="cpu1_temp_avg"
                                                data-unit="%B0C%0A"
                                                data-limits='[0,40]'
                                                data-colors='["#21a000","#FA2828"]'
                                                class="big">
                                        </div>
                        </td>
                        </tr>
                        <tr>
                        <td style="" class="C1"><center><div class="inline"></div>
                                        <div>CPU2</div>
                        </td>
                        <td style="" class="C2"><center><div class="inline"></div>
                                        <div data-type="label"
                                                data-device="sysmon"
                                                data-get="cpu2_temp"
                                                data-unit="%B0C%0A"
                                                data-limits='[0,40]'
                                                data-colors='["#21a000","#FA2828"]'
                                                class="big">
                                        </div>
                        </td>
                        <td style="" class="C3"><center><div class="inline"></div></td>
                        <td style="" class="C4"><center><div class="inline"></div>
                                        <div data-type="label"
                                                data-device="sysmon"
                                                data-get="cpu2_temp_avg"
                                                data-unit="%B0C%0A"
                                                data-limits='[0,40]'
                                                data-colors='["#21a000","#FA2828"]'
                                                class="big">
                                        </div>
                                </div>
                        </td>
                        </tr>
                        <br>
                        </table>
<header class="headerTransparent">AUSLASTUNG</header>
                        <table align="center" style="width:90%">
                        <tr>
        <td style="" class="A1"><center><div class="inline"></div>
                        <div>User:</div>
        <td style="" class="B1"><center><div class="inline"></div>
                        <div>System:</div>
        <td style="" class="C1"><center><div class="inline"></div>
                        <div>Idle:</div>
<tr>
        <td style="" class="A2"><center><div class="inline"></div>
                        <div data-type="label"
                                  data-device="sysmon"
                                  data-get="stat_cpu_text"
data-part="2"
                                  data-unit=" %"
                                  data-limits='[0,80]'
                                  data-colors='["#21a000","#FA2828"]'
                                  class="big">
                        </div>
</td>
        <td style="" class="B2"><center><div class="inline"></div>
                        <div data-type="label"
                                  data-device="sysmon"
                                  data-get="stat_cpu_text"
data-part="8"
                                  data-unit=" %"
                                  data-limits='[0,80]'
                                  data-colors='["#21a000","#FA2828"]'
                                  class="big">
                        </div>
</td>
        <td style="" class="A2"><center><div class="inline"></div>
                        <div data-type="label"
                                  data-device="sysmon"
                                  data-get="stat_cpu_text"
data-part="11"
                                  data-unit=" %"
                                  data-limits='[0,20]'
                                  data-colors='["#FA2828","#21a000"]'
                                  class="big">
                        </div>
</td>
                </tr>
</table>
                </div>
</div>
</div>
<div class="inline">
        <div data-type="popup" data-width="240px" data-height="120px">
        <div data-type="knob"
                data-device="SYSMON2"
                data-get="Mem"
                data-anglearc="360"
                data-angleoffset="0"
                data-min="0"
                data-max="100"
                data-bgcolor="#21a000"
                data-fgcolor="#FA2828"
data-nomcolor="white"
        class="mini readonly"
data-unit="%"
        ></div>
        <div>RAM</div>
                <div class="dialog">
                        <header>RAM</header>
                        <table align="center" style="width:90%">
                        <tr>
                        <td style="solid grey;" class="A1"><center><div class="inline left"><big>Total:<br></big></div></td>
                        <td style="" class="B1"><center><div class="inline"></div>
                        <div data-type="label"
                                  data-device="sysmon"
                                  data-get="ram"
                                  data-part="2"
                                  data-unit="MB"
                                  data-color="#21a000"
                                  class="big top left">
                        </div>
                        </td>
                        </tr>
                        <tr>
                        <td style="solid grey;" class="A2"><center><div class="inline left"><big>Belegt:<br></big></div></td>
                        <td style="" class="B2"><center><div class="inline left"></div>
                                        <div data-type="label"
                                                data-device="SYSMON2"
                                                data-get="Mem"
                                                data-unit=" %"
                                                data-color="#21a000"
                                                class="big top left">
                                        </div>
                        </td>
                        </tr>

                        </table>
                </div>
        </div>
</div>
<div class="inline">
<div data-type="knob"
data-device="SYSMON2"
data-get="Swap"
data-anglearc="360"
data-angleoffset="0"
data-min="0"
data-max="100"
data-bgcolor="#21a000"
data-fgcolor="#FA2828"
data-nomcolor="white"
class="mini readonly"
data-unit="%"
></div>
<div>SWAP</div>
</div>
<div class="inline">
<div data-type="knob"
data-device="SYSMON2"
data-get="fs_root"
data-anglearc="360"
data-angleoffset="0"
data-min="0"
data-max="100"
data-bgcolor="#21a000"
data-fgcolor="#FA2828"
data-nomcolor="white"
class="mini readonly"
data-unit="%"
></div>
<div>/</div>
</div>
<div class="inline">
<div data-type="knob"
data-device="SYSMON2"
data-get="fs_Daten"
data-anglearc="360"
data-angleoffset="0"
data-min="0"
data-max="100"
data-bgcolor="#21a000"
data-fgcolor="#FA2828"
data-nomcolor="white"
class="mini readonly"
data-unit="%"
></div>
<div>/Daten</div>
</div>
<br>
<br>

<table align="center" style="border:1px solid grey;  width:80%">
<tr>
<td style="border:2px solid grey;"><div><big>System load:</big></div></td>
<td style="border:2px solid grey;"><div data-type="label" data-device="sysmon" data-get="loadavg"></div></td>
</tr>
</td>
        <td style="border:2px solid grey;" class="C1"><center><div class="inline"><big>Server uptime<br></big></div>
                </br>
                <div data-type="label" data-device="sysmon" data-get="uptime_text" class="small"></div>
        </td>
        <td style="border:2px solid grey;" class="C1"><center>
                <div data-type="popup" data-width="120px" data-height="80px">
                        <div data-type="button" data-icon="fa-linux" data-background-icon="fa-circle" data-on-background-color="#3f3d3e" data-off-background-color="#3f3d3e" data-on-color="#4ee02a" data-off-color="#4ee02a" class=""></div>
                        <div class="dialog">
                                <header>Neustart Server</header>
                                <div data-type="input"
                                        data-device="UPDATE.status"
                                        data-set="CODE"
                                        default-value="0000"
                                        data-cmd="setreading"
                                        class="centered"
                                ></div>
                                <div class="top">PIN!</div>
                        </div>
                </div>
        </td>
</table>
</br>
<th><b>Dienste</b></th>
<table>
<center>
<div class="row">
<div class="cell">
<div data-type="symbol"
data-device="SYSMON2"
data-get="RaidStatus"
                data-warn="SYSMON2:RaidRebuild"
                data-warn-off='no'
                data-get-on='["3","4"]'
                data-icons='["fa-unlink warn","fa-link"]'
                data-colors='["#FA2828","#21a000"]'
></div>
<div class="top-narrow">Raid</div>
</div>

<div class="cell">
        <div data-type="symbol"
                data-device="Unifi"
data-get="state"
                data-get-on='["disconnected","connected"]'
                data-icons='["fa-unlink","fa-link"]'
                data-colors='["#FA2828","#21a000"]'
        ></div>
        <div class="top-narrow">Unifi</div>
</div>

<div class="cell">
        <div data-type="symbol"
                data-device="SYSMON2"
                data-get="UMS"
                data-get-on='["0","1"]'
                data-icons='["fa-unlink","fa-link"]'
                data-colors='["#FA2828","#21a000"]'
        ></div>
        <div class="top-narrow">UMS</div>
</div>

<div class="cell">
        <div data-type="symbol"
                data-device="SYSMON2"
                data-get="minidlna"
                data-get-on='["0","1"]'
                data-icons='["fa-unlink","fa-link"]'
                data-colors='["#FA2828","#21a000"]'
        ></div>
        <div class="top-narrow">MiniDLNA</div>
</div>
</div>
<div class="row">
<div class="cell">
        <div data-type="symbol"
                data-device="SYSMON2"
                data-get="LMS"
                data-get-on='["0","1"]'
                data-icons='["fa-unlink","fa-link"]'
                data-colors='["#FA2828","#21a000"]'
        ></div>
        <div class="top-narrow">LMS</div>
</div>

<div class="cell">
        <div data-type="symbol"
                data-device="SYSMON2"
                data-get="Samba"
                data-get-on='["0","1"]'
                data-icons='["fa-unlink","fa-link"]'
                data-colors='["#FA2828","#21a000"]'
        ></div>
        <div class="top-narrow">Samba</div>
</div>

<div class="cell">
        <div data-type="symbol"
                data-device="SYSMON2"
                data-get="AFS"
                data-get-on='["0","1"]'
                data-icons='["fa-unlink","fa-link"]'
                data-colors='["#FA2828","#21a000"]'
        ></div>
        <div class="top-narrow">AFS</div>
</div>
<div class="cell">
        <div data-type="symbol"
                data-device="SYSMON2"
                data-get="bind9"
                data-get-on='["0","1"]'
                data-icons='["fa-unlink","fa-link"]'
                data-colors='["#FA2828","#21a000"]'
        ></div>
        <div class="top-narrow">DNS</div>
</div>
</div>
</center>
</div>


Gruß
Eisix