New FHEM Tablet UI

Begonnen von setstate, 22 Februar 2015, 23:37:24

Vorheriges Thema - Nächstes Thema

Spartacus

Hallo setstate, waschbaerbauch,
ganz lieben Dank für Euren Input. Bin leider das WE unterwegs und werde die Tipps erst in der kommenden Woche umsetzen/anwenden können. Selfhtml gibt es noch und da werde ich mich mal etwas einlesen...

Nochmals danke und bis bald,
Christian
Fhem-System: 1 x raspberry PI Typ B, 1 x enOcean PI Typ B | Enocean: PTM210, FMS61NP, FAM14, 2 x FSR14-4x, FTS14-EM | LaCrosse: 2 x TX29D über Jeelink V3 | 1-Wire: 2 x DS18B20 über DS9490R

kvo1

Hallo waschbaerbauch,

würdest Du ev. bitte den FTUI Code für das Thermostat posten !
Wäre meine nächste Baustelle!

Danke
RPi1: mit CUL: HM-CC-RT-DN,HM-ES-PMSw1-Pl,HM-LC-BL1-FM,HM-LC-Bl1PBU-FM,HM-LC-SW1-PL2,HM-SCI-3-FM,HM-SEC-SC-2,KFM-Sensor
RPi2: Viessmann(optolink) mit 99_VCONTROL.pm,
Cubietruck: Wheezy / Apache / Owncloud
Cubietruck: Armbian(Jessie) / fhem 5.7 / LMS 7.9
RPi3: (Test) mit 7" Touch  &  HM-MOD-RPI-PCB

waschbaerbauch

Moin kvo1,

aber selbstverständlich - ist doch alles ein Geben und Nehmen ;)

Hab den Code beim Screenshot hinterlegt.

Gruß
Mario

bert

#3618
Zitat von: bert am 22 Dezember 2015, 13:27:49
@setstate
Ich kämpfe immer noch mit meinem Layout. Ich habe viele Stellen an denen ich mit class="col-1-2" und class="col-1-3" hantiere.
Nach dem Wegfall von  "float: left;" klappt es nicht mehr.

Im Code habe ich darauf geachtet, dass kein Platz "verschwendet" wird. Das obere Bild zeigt das "gute Layout", das untere dasselbe ohne  "float: left;" in der CSS, bei gleichem Code. Ich vermute, dass ich das mit dem "col-..." nicht richtig verstanden habe.

Gruß Bert

<!-- WZ -->
<li data-row="1" data-col="2" data-sizex="3" data-sizey="2">
<header><font size="+1">Wohnzimmer </font><div data-type="label" data-device="FTR_WZ" data-get="temperature" class="inline" data-limits='[18,20,23]' data-colors='["#6699FF","#aa6900","#ff6242"]' data-unit="°C" ></div></header>
   <div class="container top-space">
        <div class="col-1-2">
            <div class="container top-space">
                <div class="col-1-3">
<div data-type="dimmer" data-device="Wohnen_Lampe_oben" data-get="dim" data-get-off="0" data-get-on="[1-9][0-9]*" data-set-on="on" data-set-off="off" data-dim="dim" data-min="0" data-max="100"></div>
<div data-type="label" class="darker">Oben</div>
<div data-type="dimmer" data-device="Wohnen_Lampe_Tür" data-get="dim" data-get-off="0" data-get-on="[1-9][0-9]*" data-set-on="on" data-set-off="off" data-dim="dim" data-min="0" data-max="100"></div>
<div data-type="label" class="darker">Tür</div>
</div>
<div class="col-1-3">
<div data-type="dimmer" data-device="Wohnen_Lampe_hinten" data-get="dim" data-get-off="0" data-get-on="[1-9][0-9]*" data-set-on="on" data-set-off="off" data-dim="dim" data-min="0" data-max="100"></div>
<div data-type="label" class="darker">Hinten</div>
<div data-type="dimmer" data-device="Wohnen_Lampe_vorne" data-get="dim" data-get-off="0" data-get-on="[1-9][0-9]*" data-set-on="on" data-set-off="off" data-dim="dim" data-min="0" data-max="100"></div>
<div data-type="label" class="darker">Vorne</div>
</div>
<div class="col-1-3">
<div data-type="switch" data-device="Wohnen_Blumen_Lampe" data-get-on='B0|an|on' data-get-off='BI|aus|off' data-set-on='B0' data-set-off='BI' ></div>
<div data-type="label" class="darker">Blumen</div>
<div data-type="dimmer" data-device="Wohnen_Kamin_Licht" data-get="dim" data-get-off="0" data-get-on="[1-9][0-9]*" data-set-on="on" data-set-off="off" data-dim="dim" data-min="0" data-max="100"></div>
<div data-type="label" class="darker">Kamin</div>
</div>
</div>
        </div>
        <div class="centered">
<div data-type="thermostat" data-device="FTR_WZ" data-get="temperature" data-temp="setpointTemp" data-fix="1" data-step="0.1" class=""></div>
        </div>
   </div>
</li>


Kann mir da jemand hefen?

Gruß Bert

netbus

Zitat von: setstate am 16 Dezember 2015, 16:31:46
data-fix="2"
Hallo setstate.
Trotz data-fix sind es noch immer 16 nachkommastellen. Woran kann das liegen?
<td>Gas heute:</td>
<div style="font-size:20px" data-type="label" data-device="Gasverbrauch" data-get="countsPerDay" data-limits='[0,250,375]' data-colors='["#33cc33","#ffff00","#FF0000"]' data-unit=" Euro" data-substitu
tion="trim()*0.004" data-fix="2" class="cell"></div>

setstate

Hallo Bert,

ich habe etwas dran herum "geschraubt":


<!-- WZ -->
<li data-row="1" data-col="2" data-sizex="3" data-sizey="2">
   <header><font size="+1">Wohnzimmer </font><div data-type="label" data-device="FTR_WZ" data-get="temperature" class="inline" data-limits='[18,20,23]' data-colors='["#6699FF","#aa6900","#ff6242"]' data-unit="°C" ></div></header>
   <div class="row top-space-2x">
        <div class="col-1-2">
            <div class="row">
                <div class="col-1-3">
                    <div data-type="dimmer" data-device="Wohnen_Lampe_oben" data-get="dim" data-get-off="0" data-get-on="[1-9][0-9]*" data-set-on="on" data-set-off="off" data-dim="dim" data-min="0" data-max="100"></div>
                    <div class="darker top-space bottom-space">Oben</div>
                    <div data-type="dimmer" data-device="Wohnen_Lampe_Tür" data-get="dim" data-get-off="0" data-get-on="[1-9][0-9]*" data-set-on="on" data-set-off="off" data-dim="dim" data-min="0" data-max="100"></div>
                    <div class="darker top-space">Tür</div>
                </div>
                <div class="col-1-3">
                    <div data-type="dimmer" data-device="Wohnen_Lampe_hinten" data-get="dim" data-get-off="0" data-get-on="[1-9][0-9]*" data-set-on="on" data-set-off="off" data-dim="dim" data-min="0" data-max="100"></div>
                    <div class="darker top-space bottom-space">Hinten</div>
                    <div data-type="dimmer" data-device="Wohnen_Lampe_vorne" data-get="dim" data-get-off="0" data-get-on="[1-9][0-9]*" data-set-on="on" data-set-off="off" data-dim="dim" data-min="0" data-max="100"></div>
                    <div class="darker top-space">Vorne</div>
                </div>
                <div class="col-1-3">
                    <div data-type="switch" data-device="Wohnen_Blumen_Lampe" data-get-on='B0|an|on' data-get-off='BI|aus|off' data-set-on='B0' data-set-off='BI' ></div>
                    <div class="darker top-space bottom-space">Blumen</div>
                    <div data-type="dimmer" data-device="Wohnen_Kamin_Licht" data-get="dim" data-get-off="0" data-get-on="[1-9][0-9]*" data-set-on="on" data-set-off="off" data-dim="dim" data-min="0" data-max="100"></div>
                    <div class="darker top-space">Kamin</div>
                </div>
        </div>
        </div>
        <div class="col-1-2">
                <div data-type="thermostat" data-device="FTR_WZ" data-get="temperature" data-temp="setpointTemp" data-fix="1" data-step="0.1" class=""></div>
        </div>
   </div>
</li>


Du hast das System von col-1-3 schon verstanden, aber die Browser-Renderer haben das nicht richtig im Zusammenhang mit inline-block".
Man muss die % etwas kürzen, damit man nicht an die 100% ran reicht, dann klappt es .

Ändere mal in der CSS col-1-3 zu:
.col-1-3 { width: 32% !important; }

Die anderen % hatte ich schon gekürzt, 1/3 noch nicht.

setstate

@netbus:

das liegt an der Reihenfolge der Funktionsaufrufe. Tausche mal Zeile 83 mit 84 in der widget_label.js

               
val = base.update_fix(val, elem.data('fix'));
val = base.update_substitution(val, elem.data('substitution'));

setstate

Zitat von: MrWishbone am 07 Januar 2016, 19:29:09
Hallo setstate,

ich habe die ganze Zeit gedacht, dass ich die Regulären Ausrücke im Bezug auf die Slider nicht verstanden haben, habe jetzt aber festgestellt, dass es sich hierbei anscheinend um einen Bug handelt.

Ein Slider in einem Popup zeigt keine Werte an, egal ob per RegEx oder ohne. Der selber Slider funktioniert außerhalb des Popups Fehlerfrei.
Wenn ich das Popup während des Ladevorgangs geöffnet bekomme, dann schafft es der Slider anscheinen die Daten zu laden.
Ebenso scheint es so zu sein, dass wenn ich während das Popup auf ist und ich überschreibe den Wert in Fhem, dann wird ebenfalls der Wert geladen.

Das Problem liegt in der Implementierung der Powerange Lib, die das Slider Widget nutzt.
Bei einigen Berechnungen wird der Paremeter "offsetHeight" herangezogen. Der ist aber bei Elementen, die nicht sichtbar sind, gleich 0. Slider auf dem Popup sind unsichtbar und die Position des Reglers wird falsch berechnet.

Ich habe jetzt einen Workaround beim Slider eingebaut, der die Wertsetzung des Sliders nach dem Sichbarwerden auf einem Popdialog wiederholt. 



setstate

Zitat von: Stril am 22 Dezember 2015, 17:08:18
Hallo!

Kennt ihr eine Möglichkeit, nach einer Zeit immer auf die Startseite zurück zu wechseln nach Inaktivität?

Also via Pagetab diverse Unterseiten und nach einigen Minuten auf die "Basis-Page" zurück wäre optimal

Was ich versucht habe:

<meta http-equiv="refresh" content="3; URL=/fhem/tablet/index_ipm.html#index_body_ipm.html">

--> Das wird aber nur ausgeführt, wenn ich es in die index.html packe - nicht, wenn ich es in die Unterseiten-Heads packe.

Danke für eure Hilfe!

Gruß
Phil

nach Update ist das jetzt möglich:

Pagetab kennt jetzt data-return-time (Zeit in Sekunden). Diese Parameter muss beim ersten Pagetab (Hauptseite) platziert werden.

Wenn eine Unterseite angeklickt wurde und die gegebene Zeit abgelaufen ist, wird wieder zurück zur  Hauptseite gesprungen.

Gunther

Ich spiele gerade mit einem Popup rum auf dem ich u.a. einen Slider habe.

1.) Kann ich das Popup fixieren, so dass es sich nicht mit dem Slide-Vorgang gleichzeitig verschiebt?
So ist derzeit der Slider bei mir im Popup nicht zu gebrauchen.

2. Wie bekomme ich den Button Details (vgl. Anhang)
  a) als Button (also mit Rahmen)
  b) zentriert im Feld dargestellt?

Mein Code:
<li data-row="3" data-col="2" data-sizex="1" data-sizey="1">
<header>Leuchtkästen alle</header>
<div data-type="switch"
data-device="eg_ki_Leuchtkasten_alle.schalten"
data-get="state"
data-set=""
data-set-on="on"
data-set-off="off"
data-icon="fa-lightbulb-o"
class="cell">
</div>

<div data-type="popup" data-height="600px" data-width="800px">
<div data-type="link" class="round top-space center left-space"
     data-width="20"
data-height="10"
data-color="grey"
     data-icon="fa-server">Details
        </div>
  <div class="dialog">
          <header>Leuchtkasten rechts</header>
          <div class="top-space">
                <div class="inline centered">
<div data-type="slider"
data-device="eg_ki_Leuchtkasten_1m_rechts"
data-min="0"
data-max="100"
data-on="0!"
data-off="0"
data-width="180"
class="horizontal">
</div>
<div data-type="label"
class="narrow darker">Helligkeit
</div>
</div>
<div class="inline">
<div data-type="push"
data-device="eg_ki_Leuchtkasten_1m_rechts"
data-set-on="0"
data-icon="oa-light_light_dim_00"
class="cell">
</div>
<div data-type="label"
class="narrow darker">AUS
</div>
</div>
<div class="inline">
<div data-type="push"
data-device="eg_ki_Leuchtkasten_1m_rechts"
data-set-on="35"
data-icon="oa-light_light_dim_10"
class="cell">
</div>
<div data-type="label"
class="narrow darker">Perfekt
</div>
</div>
<div class="inline">
<div data-type="push"
data-device="eg_ki_Leuchtkasten_1m_rechts"
data-set-on="100"
data-icon="oa-light_light_dim_100"
class="cell">
</div>
<div data-type="label"
class="narrow darker">AN
</div>
</div>
               
<header>Leuchtkasten rechts</header>
          <div class="top-space">
                <div class="inline centered">
<div data-type="slider"
data-device="eg_ki_Leuchtkasten_1m_rechts"
data-min="0"
data-max="100"
data-on="0!"
data-off="0"
data-width="180"
class="horizontal">
</div>
<div data-type="label"
class="narrow darker">Helligkeit
</div>
</div>
<div class="inline">
<div data-type="push"
data-device="eg_ki_Leuchtkasten_1m_rechts"
data-set-on="0"
data-icon="oa-light_light_dim_00"
class="cell">
</div>
<div data-type="label"
class="narrow darker">AUS
</div>
</div>
<div class="inline">
<div data-type="push"
data-device="eg_ki_Leuchtkasten_1m_rechts"
data-set-on="35"
data-icon="oa-light_light_dim_10"
class="cell">
</div>
<div data-type="label"
class="narrow darker">Perfekt
</div>
</div>
<div class="inline">
<div data-type="push"
data-device="eg_ki_Leuchtkasten_1m_rechts"
data-set-on="100"
data-icon="oa-light_light_dim_100"
class="cell">
</div>
<div data-type="label"
class="narrow darker">AN
</div>
</div>
          </div>
  </div>
</div>
</li>
FHEM@Proxmox@Nuc: TabletUI als User-Interface (4 Wandtablets) / IOs per ser2net gekapselt
Homematic: Heizung, Fenster, Bewegung | Jeelink: Temperatur | Z-Wave: Bewegung, Temperatur | FS20: Temperatur, Fenster | Viessmann-Heizung eingebunden

kvo1

#3625
Zitatnach Update ist das jetzt möglich:

Pagetab kennt jetzt data-return-time (Zeit in Sekunden). Diese Parameter muss beim ersten Pagetab (Hauptseite) platziert werden.

Wenn eine Unterseite angeklickt wurde und die gegebene Zeit abgelaufen ist, wird wieder zurück zur  Hauptseite gesprungen.

Coooool  ;)

Danke
klaus

/EDIT/   gut wäre natürlich wenn die "data-return-time" getriggert würde, also solange man sich in den Untermenüs bewegt soll die
Zeit nicht laufen , erst wenn ich "data-return-time" keine Eingabe/Auswahl getätigt habe soll diese loslaufen !
RPi1: mit CUL: HM-CC-RT-DN,HM-ES-PMSw1-Pl,HM-LC-BL1-FM,HM-LC-Bl1PBU-FM,HM-LC-SW1-PL2,HM-SCI-3-FM,HM-SEC-SC-2,KFM-Sensor
RPi2: Viessmann(optolink) mit 99_VCONTROL.pm,
Cubietruck: Wheezy / Apache / Owncloud
Cubietruck: Armbian(Jessie) / fhem 5.7 / LMS 7.9
RPi3: (Test) mit 7" Touch  &  HM-MOD-RPI-PCB

setstate

#3626
@Gunter:

1.: Seit dem Update von gestern geht das: <div data-type="popup" data-draggable="false"

2.: <div data-type="link" class="round"
                        data-color="white"
                        data-background-color="green"
                     data-icon="fa-server">Details</div>

oder
<div data-type="link" class="round"
                        data-color="grey"
                        data-border-color="grey"
                     data-icon="fa-server">Details</div>

Gunther

#3627
Danke für die schnelle Antwort. Klappt leider nicht...

<div data-type="popup" data-draggable="false" data-height="600px" data-width="800px">

Edit: Im Webbrowser verschiebt sich das Popup weiterhin. Auf dem Tablet nicht. Der Slider ist dort aber kaum zu bedienen. Er reagiert nur ganz selten. (klingt komisch, ist aber so... ;-) )
FHEM@Proxmox@Nuc: TabletUI als User-Interface (4 Wandtablets) / IOs per ser2net gekapselt
Homematic: Heizung, Fenster, Bewegung | Jeelink: Temperatur | Z-Wave: Bewegung, Temperatur | FS20: Temperatur, Fenster | Viessmann-Heizung eingebunden

waschbaerbauch

#3628
Das kann ich so bestätigen. Allerdings ändert es bei mir auch nichts auf dem Tablet, wenn man z.B. den Heizungsregler im Popup bedient ob da
<div data-type="popup" data-draggable="false" data-height="600px" data-width="800px"> eingetragen ist oder nicht.
Laptop -> Maustaste auf den Slider -> Popup wandert mit nach links und rechts
Tablet -> Finger auf dem Slider -> Popup bleibt auf der Stelle wie es soll

setstate

Zitat/EDIT/   gut wäre natürlich wenn die "data-return-time" getriggert würde, also solange man sich in den Untermenüs bewegt soll die
Zeit nicht laufen , erst wenn ich "data-return-time" keine Eingabe/Auswahl getätigt habe soll diese loslaufen !

Den Gedanken hatte ich auch schon und habe noch etwas weiter gebaut. Funktioniert soweit, ich teste aber erst noch etwas mehr ...