[FHEM-Tablet-UI] User-Demos

[sw85]

ja genau sind highcharts. Die normalen svg sind nicht wirklich schön 

Hier mal der Code vom Wohnzimmer:

Code Auswählen Erweitern

<li data-row="3" data-col="2" data-sizex="7" data-sizey="6">
<header>Klima</header>
<div data-type="highchart"
     data-height="150"
     data-device="DHT22_WZ"
     data-logdevice="myDbLog"
     data-columnspec="DHT22_WZ:Temperature DHT22_WZ:Humidity"
     data-linenames="Temperatur,Feuchte"
     data-linetypes="line,line"
     data-yaxis="0,1"
     data-yunit="Temperatur °C,Feuchte %"
data-yopposites="false,true"
data-daysago="2"
     data-tooltip="{series.name} <b>{point.y:,.0f}</b>"
style="width: 550px; height: 200px;"
>
</div>
<div data-type="highchart"
     data-height="150"
     data-device="HM_Thermostat_WZ_Clima"
     data-logdevice="myDbLog"
     data-columnspec="HM_Thermostat_WZ_Clima:ValvePosition HM_Thermostat_WZ_Clima:desired-temp"
     data-linenames="Ventielöffnung, SOLL"
     data-linetypes="line,line"
     data-yaxis="0,1"
     data-yunit="Ventielöffnung %, SOLL °C"
data-yopposites="false"
data-daysago="2"
data-minvalue="0"
data-maxvalue="40"
     data-tooltip="{series.name} <b>{point.y:,.0f}</b>"
style="width: 550px; height: 200px;"

>
</div>
</li>
Der erste Div ist der DHT. Der Andere sind die Daten vom HM Thermostat. Bad ist im Prinzip genauso, nur das es da eben das andere Gerät ist.

[setstate]

@sw85: sieht ja schon sehr schön aus, aber ...
Gib mir mal bitte den Code-Teil (<li ...) für "Musik" von der 1-Übersicht. Ich will mal versuchen, die Positionen der Elemente etwas zu optimieren.

War nicht so einfach ...
Zwei Varianten habe ich aber. Einmal mit col-x-y und einmal mit Flexbox, je nach Geschmack.

Code Auswählen Erweitern


<li data-row="1" data-col="1" data-sizex="4" data-sizey="2">
<header>Musik1</header>
<div class="row row-1-2 center">
<div class="col-1-4">Radio</div>
<div class="col-1-4" data-type="switch" data-device="myMPD" data-icon="fa-music" class="col-1-3" data-get-on="play" data-get-off="stop"></div>
<div class="col-2-4 right-space" data-type="select" data-device="myMPD" data-items='["1Live","SWR3"]' data-get="playlist" data-set="playlist" ></div>
</div>
<div class="row row-1-3 center">
    <div class="col-1-4">Volume</div>
    <div class="col-3-4 left-space-2x horizontal value" data-type="slider" data-device='myMPD' data-get='volume' data-set='volume' data-max="80" data-width="175"></div>
</div>
</li>


<li data-row="1" data-col="5" data-sizex="4" data-sizey="2">
<header>Musik2</header>
<div class="vbox">
  <div class="hbox full-height center">
    <div class="grow-1">Radio</div>
    <div class="grow-1" data-type="switch" data-device="myMPD" data-icon="fa-music" class="col-1-3" data-get-on="play" data-get-off="stop"></div>
    <div class="grow-2 right-space" data-type="select" data-device="myMPD" data-items='["1Live","SWR3"]' data-get="playlist" data-set="playlist" ></div>
  </div>
  <div class="hbox full-height center">
    <div class="grow-1">Volume</div>
    <div class="grow-2 left-space-2x horizontal value" data-type="slider" data-device='myMPD' data-get='volume' data-set='volume' data-max="80" data-width="180"></div>
  </div>
</div>
</li>


[TWART016]

Zwei Varianten habe ich aber. Einmal mit col-x-y und einmal mit Flexbox, je nach Geschmack.

Gibt es eine Doku zu den Formatierungen z.b. wie funktioniert col oder wie kann horizontal zentriert werden?

[TWART016]

@Masterfunk großer Respekt!!!

Könntest du vielleicht deinen kompletten Code zur Verfügung stellen? Interessiere mich für sehr viele Widgets wie Systemstatus, iframes, charts, ...

[sw85]

@setstate

Vielen Dank, jetzt sieht es so aus wie ich es auch eigentlich haben wollte.
Dürfte ich dich vielleicht noch mal um Hilfe bei einem anderen Element bitten, an welchem ich schon verzweifelt bin?

Ich verwende im Wohnzimmer folgenden Code um ein Popup zu öffnen:

Code Auswählen Erweitern

<li data-row="1" data-col="9" data-sizex="2" data-sizey="1">
<div data-type="popup" data-height="400px" data-width="800px">
<div data-type="link"
data-icon="fa-television"
class="round"
data-color="grey"
data-border-color="grey">TV Programm</div>
  <div class="dialog bg-lightgray">
          <header>TV Programm</header>
          <div data-template="tv_prog.html" class="bg-lightgray"></div>
  </div>
</div>
</li>

Wie das aussieht habe ich noch mal angehangen.
Ich hätte aber gern, dass der komplette Button vertikal im li zentriert ist und dass der Text ebenfalls vertikal zum Icon zentriert ist.

[Masterfunk]

Hab mal die Icons für die Apps angepasst.
Bin jetzt ein Meister im "freistellen". 

Gruß Detlef

[bjoernbo]

Es geht immer weiter 

Nachdem ich am WE meine 3 GTags von Siemens für die Anwesenheitserkennung eingebunden habe, gibt es hierzu natürlich nun auch eine entsprechende Anzeige in der MobilenFTUI Version bei mir die mir anzeigt wieviele Bewohner gerade zuhause sind.

Anbei der Code für die Zählung, wen es interessiert

define AnzahlAnwesende dummy
attr AnzahlAnwesende readingList Zaehler
attr AnzahlAnwesende room Anwesenheit
attr AnzahlAnwesende setList state Zaehler
attr AnzahlAnwesende userReadings Zaehler

define nt_AnzahlAnwesende notify (GtaG.*):.* {
my $bisherigeAnwesende = ReadingsVal("AnzahlAnwesende",$NAME,0);
my $Wert=ReadingsVal("AnzahlAnwesende","Zaehler",0);
if($EVENT eq "present" && $bisherigeAnwesende ne "present")
{$Wert = $Wert+1;
fhem("setreading AnzahlAnwesende Zaehler $Wert");
fhem("setreading AnzahlAnwesende $NAME present");
fhem("set AnzahlAnwesende $Wert");
}
elsif($EVENT eq "absent" && $bisherigeAnwesende ne "absent")
{$Wert = $Wert-1;
fhem("setreading AnzahlAnwesende Zaehler $Wert");
fhem("set AnzahlAnwesende $Wert");
fhem("setreading AnzahlAnwesende $NAME absent");
}
}

<div data-type="symbol" data-device="AnzahlAnwesende"
         data-get='Zaehler' data-off-color="grey"
         data-get-on='["^[0]$","^[1-9][0-9]|[1-9]$"]'
         data-icons='["fa-home","fa-home warn"]'
         data-on-colors='["grey","green"]' class="col-1-5 big center-align"></div>

[Eisix]

Hallo,

dann packe ich mein gebastel auch mal dazu 

Der letzte screenshot ist die Mobil Version.

Gruß
Eisix

[Helmi55]

sieht alles sehr super aus.
@eisix würdest du deinen Code posten?
Besonders das Wetter würde mich interessieren
Gruß
Helmut

[Eisix]

Das meiste sind leicht modifizierte Sachen die hier im Thread schon mal aufgetaucht sind.

Gruß
Eisix

[waschbaerbauch]

Das macht doch nichts, dafür ist das Forum doch da!?

Kannst auch gerne komplett posten, sobald ich mal Zeit habe steht hier ggf. ein Redesign an und die eine oder andere Idee würde ich dann auch gerne abkupfern

[accessburn]

Hallo,

dann packe ich mein gebastel auch mal dazu 

Der letzte screenshot ist die Mobil Version.

Gruß
Eisix

Verrätst du mir wie du beim Servermonitor die Prozentanzeige so hinbekommen hast?

[Eisix]

Der Servermonitor ist gerade in arbeit.
Soll noch uptime, update und restart dazu.

data-unit="%"
ist das was du suchst denke ich

Code Auswählen Erweitern


<div class="inline">
        <div data-type="knob"
                data-device="sysmon"
                data-get="fs_Daten"
                data-anglearc="360"
                data-angleoffset="0"
                data-part=".*,\s(\d{1,3})\s%.*"
                data-min="0"
                data-max="100"
                data-bgcolor="green"
                data-fgcolor="#FA2828"
                class="mini readonly"
                data-unit="%"
        ></div>
        <div data-type="label">/Daten</div>
</div>


[accessburn]

Interessant...
Würde mich für das ganze dahinter interessieren. Ich habe einen kleinen NAS laufen und das wäre sehr cool den so angezeigt zu bekommen. Aktuell überwache ich nur die IP auf Up- oder Down. Da ich kein schimmer hab wie das funktioniert   

[Eisix]

Basiert auf dem Sysmon Modul.

define <name> SYSMON [MODE[:[USER@]HOST][:PORT]] [<M1>[ <M2>[ <M3>[ <M4>]]]]

siehe Command Ref

Meine Anzeige ist aber wie gesagt noch im Anfangsstadium.