Hauptmenü

New FHEM Tablet UI

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

Vorheriges Thema - Nächstes Thema

budy

Ich bekomme das UI unter iOS/WebKit und auch unter OS X Safari nicht hin. Buttons funktionieren nur manchmal, einige gar nicht.  Die Thermostaten werden nicht vollständig "befüllt" und beim ersten Aufrufen des UIs stimmen die Stati nicht und werden nur sehr langsam aktualisiert. Ich habe z.B. 6 HM Thermostate und wenn man die Seite das erste Mal lädt, dann stehen in allen Widgets die Anfasser auf "0", was ja wohl bedeutet, dass noch keine Daten geladen sind. Dann werden die Widgets nach und nach aktualisiert, wobei sich aber der Anfasser nicht bewegt, sondern nur die Skala und die measured-temp aktualisiert werden.

Bei den drei kleinen Widgests, welche nur jeweils einen Thermostaten enthalten wird auf dem iPad auch der Wert der desired-temp im Widget nicht gezeichnet, während das bei den anderen beiden Thermostaten funktioniert.

Der einzige Browser, welcher bei mir richtig spielt ist Firefox - selbst Safari und Chrome unter OS X machen das nicht richtig. Hat das irgendjemand unter iOS hinbekommen? Vielleicht liegts ja auch an meinder index.html:

<!DOCTYPE html>
<html manifest="ui.appcache">
<head>
<!--
/* FHEM tablet ui */
/*
* Just another dashboard for FHEM
*
         * Version: 1.3.5
* Requires: jQuery v1.7+, font-awesome, jquery.gridster, jquery.toast
* URL: https://github.com/knowthelist/fhem-tablet-ui
*
* Copyright (c) 2015 Mario Stephan <mstephan@shared-files.de>
* Under MIT License (http://www.opensource.org/licenses/mit-license.php)
*
* - create a new folder named 'tablet' in /<fhem-path>/www
* - copy all files incl. sub folders into /<fhem-path>/www/tablet
* - add 'define tablet_ui HTTPSRV tablet ./www/tablet Tablet Frontend' in fhem.cfg
* - Tadaaa! A new fhem ui in http://<fhem-url>:8083/fhem/tablet/
*/
-->
<title>FHEM-Tablet-UI</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<meta name="widget_base_width" content="116">
<meta name="widget_base_height" content="131">
<meta name="mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-capable" content="yes">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="longpoll" content="1"> <!-- 1=longpoll;0=shortpoll every 30sec -->
<meta name="debug" content="0"> <!-- 1=output to console;0=not output -->
<meta name='gridster_disable' content='1'> <!-- disable drag and drop -->

<link rel="stylesheet" href="/fhem/tablet/lib/jquery.gridster.min.css" />
<link rel="stylesheet" href="/fhem/tablet/css/fhem-tablet-ui.css" />
<link rel="stylesheet" href="/fhem/tablet/lib/font-awesome.min.css" />
<link rel="stylesheet" href="/fhem/tablet/lib/jquery.toast.min.css" />
<link rel="stylesheet" href="/fhem/tablet/lib/powerange.min.css" />

        <!-- define your personal style here, it wont be overwritten  -->
        <link rel="stylesheet" href="/fhem/tablet/css/fhem-tablet-ui-user.css" />

<script type="text/javascript" src="/fhem/pgm2/jquery.min.js"></script>
        <script type="text/javascript" src="/fhem/tablet/lib/jquery.knob.mod.min.js"></script>
<script type="text/javascript" src="/fhem/tablet/lib/jquery.toast.min.js"></script>
<script type="text/javascript" src="/fhem/tablet/lib/jquery.circlemenu.js"></script>
<script type="text/javascript" src="/fhem/tablet/lib/powerange.min.js"></script>
<script type="text/javascript" src="/fhem/tablet/lib/jquery.gridster.min.js"></script>
        <script type="text/javascript" src="/fhem/tablet/lib/fa-multi-button.min.js"></script>
<script type="text/javascript" src="/fhem/tablet/js/fhem-tablet-ui.js"></script>

<!-- Enable this lines for usage with WebViewControl --><!--
<script type="text/javascript" src="/fhem/pgm2/cordova-2.3.0.js"></script>
<script type="text/javascript" src="/fhem/js/webviewcontrol.js"></script>
<script type="text/javascript">var wvcDevices = {'12345': 'Tablet'}; var wvcUserCssFile="webviewcontrol.css"</script>
--><!-- End for WebViewControl -->

</head>
<body>

<!-- available class: container,left,right,cell,narrow,darker,big,bigger,small,thin,large,wider -->
<!-- available data-type: symbol,dimmer,homestatus,label,push,slider,switch,thermostat,volume,weather -->

<div class="gridster">
<ul>
<li data-row="1" data-col="1" data-sizex="1" data-sizey="1">
<header>KUECHE</header>
<div data-type="thermostat"
data-device="Heizung_Kueche_Clima"
data-valve="ValvePosition"
data-get="desired-temp"
data-temp="measured-temp"
class="cell">
</div>
</li>
<li data-row="1" data-col="2" data-sizex="1" data-sizey="1">
<header>BAD OG</header>
<div data-type="thermostat"
      data-device="Heizung_Bad_OG_Clima"
        data-valve="ValvePosition"
      data-get="desired-temp"
      data-temp="measured-temp"
      class="cell">
</div>
</li>
<li data-row="1" data-col="3" data-sizex="1" data-sizey="1">
<header>SCHLAFZIMMER</header>
<div data-type="thermostat"
      data-device="Heizung_OG_Eltern_Clima"
        data-valve="ValvePosition"
      data-get="desired-temp"
      data-temp="measured-temp"
class="cell">
</div>
</li>
<li data-row="2" data-col="1" data-sizex="4" data-sizey="2">
<header>WOHNZIMMER</header>
<div class="container">
<div class="left">
<div class="cell">
                <div data-type="thermostat" data-device="Heizung_Whz_Terrasse_Clima" data-valve="ValvePosition" data-get="desired-temp" data-temp="measured-temp"></div>
<div data-type="label" class="cell">Terrasse</div>
</div>
</div>
<div class="left">
<div class="cell">
                <div data-type="thermostat" data-device="Heizung_Whz_Flur_Clima" data-valve="ValvePosition" data-get="desired-temp" data-temp="measured-temp"></div>
<div data-type="label" class="cell">Esstisch</div>
</div>
</div>
<div class="left">
<div class="cell">
<div data-type="dimmer" data-device="Licht_Whz_Esstisch_Dimmer" data-get-on="!off" data-get-off="off"></div>
<div data-type="label" class="cell">Esstisch</div>
<div data-type="dimmer" data-device="Licht_Whz_Decke_Dimmer" data-get-on="!off" data-get-off="off"></div>
<div data-type="label" class="cell">Decke</div>
</div>
</div>
<div class="left">
<div data-type="switch" data-device="Steckdose_Whz_Garten_Sw" class="cell"></div>
<div data-type="label" class="cell">TV-Licht</div>
</div>
<div class="right">
<div class="cell">
<div data-type="symbol" data-device="Fensterkontakt_Whz_Terrasse" class="narrow"></div>
<div data-type="label" class="narrow darker small">Terassentür offen</div>
<div data-type="symbol" data-device="Tuergriff_Whz_Terrasse" class="narrow"></div>
<div data-type="label" class="narrow darker small">Terassentürgriff</div>
</div>
</div>
<div data-type="push"
      data-device="allesAusWhz"
      data-cmd="trigger"
      data-set-on="on"
      class="cell">
      </div>
<div data-type="push"
      data-device="LichtSzeneTV"
      data-cmd="trigger"
      data-set-on="on"
      data-icon="fa-film"
      class="cell">
      </div>
</div>
</li>
</ul>
</div>
</body>
</html>


Bin für jeden Hinweis dankbar.
Debian stretch, FHEM 5.9.
HM-CC-RT-DN, HM-ES-PMSw1-Pl, HM-LC-Dim1TPBU-FM, HMUARTLGW, HMLAN, HM-SEC-KEY, HM-SEC-RHS, HM-SEC-SC-2, HM-SEC-SCo, HM-SEC-SD-2, HM-OU-CFM-TW, div. HUEs, Wifilight, Ring Video Pro

lapidu

#2056
Hallo Zusammen,

ich stehe noch ganz am Anfang von FHEM Tablet UI und habe folgendes Problem.

Ich möchte eine Heizung und einen Schaler darstellen.

Zitat<li data-row="1" data-col="2" data-sizex="2" data-sizey="1">
        <header>BADTEST</header>
       <div data-type="thermostat"
     data-device="Heizung.2OG.Bad"
     data-get="desired-temp"
     data-temp="measured-temp"
     class="cell">
</div>
</li>

Zitat<li data-row="1" data-col="8" data-sizex="1" data-sizey="1">
        <header>ZimmerTEST</header>
        <div data-type="switch" data-device="Licht.Wz" class="cell"></div>
        <div data-type="label" class="cell">Licht.Wz</div>
</li>

Wenn ich per Webbrowser auf die index.html gehe wird mir nichts angezeigt.

(http://up.picr.de/22364167ls.jpg)
(http://up.picr.de/22364168ld.jpg)

In der Javascript Konsole bekomme ich folgendes angezeigt:

(http://up.picr.de/22364169wj.jpg)

Vielen Dank für eure Hilfe.

Lapidu

setstate

New Widget: Popup Widget

Damit kann man, ähnlich wie beim Circle Menü, selten gebrauchte Widgets in ein Sub-Menü verfrachten. Beim Klick auf das Trigger-Widget (beliebig: Image, Button, Label o.ä.), öffnet sich mittig ein modaler Dialog, der beliebige andere FTUI Widgets zeigt.
Anwendungsfälle:
- Submenü für Station-Umschalter (TV/Radio Sender mit Icon)
- Wetter Details nach Klick auf Label "Wetter"
- Mini Cam-Vorschau nach Klick als großes Bild
- Mini Chart nach Klick als großes Chart

HTML-Struktur:

<div data-type="popup">
<div data-type="..." ></div>
<div class="dialog">
<header>DIALOG-HEADER</header>
<div data-type="..."></div>
                <div data-type="..."></div>
                <div data-type="..."></div>
</div>
</div>

Das erste Widget ist das sichtbare Main-Widget, alle Widgets unterhalb <div class="dialog"> erscheinen erst bei Klick auf das Main-Widget.

Mit Überschreiben der Parameter data-device, data-get, data-get-on und data-get-off kann man sogar das Öffnen und Schließen des Dialogs per FHEM Reading steuern.
Anwendungsfall:
- Türklingel ändert ein Reading in FHEM und auf der UI poppt das Kamerabild der Tür-Cam auf

Code-Beispiel (Mini-Chart -> Big-Chart):
<div data-type="popup" data-width="450px">
<div data-type="simplechart"
  data-logdevice="FileLog_OutTemp"
  data-columnspec="4:temp"
  data-minvalue="-25"
  data-maxvalue="35"
  data-height="50"
  data-width="100"
  class="cell">
</div>
<div class="dialog">
<header>BIG-CHART</header>
<div data-type="simplechart"
  data-logdevice="FileLog_OutTemp"
  data-columnspec="4:temp"
  data-minvalue="-25"
  data-maxvalue="35"
  data-yticks="5"
  data-height="150"
  class="cell">
</div>
</div>
</div>

setstate

Zitat von: lapidu am 27 Juni 2015, 09:58:24
Hallo Zusammen,

ich stehe noch ganz am Anfang von FHEM Tablet UI und habe folgendes Problem.

Ich möchte eine Heizung und einen Schaler darstellen.

Wenn ich per Webbrowser auf die index.html gehe wird mir nichts angezeigt.

(http://up.picr.de/22364167ls.jpg)
(http://up.picr.de/22364168ld.jpg)

In der Javascript Konsole bekomme ich folgendes angezeigt:

(http://up.picr.de/22364169wj.jpg)

Vielen Dank für eure Hilfe.

Lapidu

Gib mal <meta name="debug" content="1"> in die index.html und schaue dir den Output in der Console an.
Gleich am Anfang sieht man das Plugin-Dir. Das liegt relativ von FHEM im www Ordner. Im js-Ordner müssten alle benutzen Plugins liegen. Ist dort widget_switch.js dabei?

"Plugin dir: /fhem/tablet/js" fhem-tablet-ui.js:113:0
"Filename: index.html" fhem-tablet-ui.js:117:0
"Collecting required readings" fhem-tablet-ui.js:199:0
"Request readings from FHEM" fhem-tablet-ui.js:210:0
"Loaded plugin: widget_popup" fhem-tablet-ui.js:36:0
"Loaded plugin: widget_simplechart" fhem-tablet-ui.js:36:0
"Loaded plugin: widget_label"

Was sagen andere Browser? Hast du das Recht die *.js Files zu öffnen?

berndp

Servus!

Ich wollte mal fragen ob jemand das Thermostat Widget mit einer mehrgeteilten Datenquelle benutzt hat.
Ich benutze einen KNX Thermostat, den ich durch 3 Fhem Elemente steuern und lesen kann:




GWC_SollwertRückleseelement für den eingestellten Sollwert
GWC_KomfortsollwertSchreibelement für den Sollwert
GWC_TemperaturmesswertDer aktuelle Temperaturmesswert im Raum

Ich hatte schon viel gebastelt um per notifies alle Werte in ein Dummy zu verschachteln und bei Änderung der Werte wieder entsprechend zu schreiben. Jedoch ist das ein ganz schönes Gebastel und macht die Steuerung nicht wirklich übersichtlicher.
Hätte sonst noch das Widget zu einem extended-ThermostatWidget umgebastelt, aber vielleicht hat ja jemand eine einfachere Lösung dafür?
Vielen Dank schon mal für anregende Ideen!

VG
Bernd

setstate

Zitat von: berndp am 27 Juni 2015, 15:19:43
Servus!

Ich wollte mal fragen ob jemand das Thermostat Widget mit einer mehrgeteilten Datenquelle benutzt hat.
Ich benutze einen KNX Thermostat, den ich durch 3 Fhem Elemente steuern und lesen kann:




GWC_SollwertRückleseelement für den eingestellten Sollwert
GWC_KomfortsollwertSchreibelement für den Sollwert
GWC_TemperaturmesswertDer aktuelle Temperaturmesswert im Raum

Ich hatte schon viel gebastelt um per notifies alle Werte in ein Dummy zu verschachteln und bei Änderung der Werte wieder entsprechend zu schreiben. Jedoch ist das ein ganz schönes Gebastel und macht die Steuerung nicht wirklich übersichtlicher.
Hätte sonst noch das Widget zu einem extended-ThermostatWidget umgebastelt, aber vielleicht hat ja jemand eine einfachere Lösung dafür?
Vielen Dank schon mal für anregende Ideen!

VG
Bernd

Der Grundstein dafür ist schon gelegt. Es gibt auch schon einige Widgets, die externe Readings einbeziehen können. Zum Beispiel Label Widget mit dem data-limits-get. Da kann man mit DEVICE:READING arbeiten. Eventuell ist das auch unkompliziert in andere Widgets aufnehmbar.

tomster

Erstmal Danke für die rasche Umsetzung!

Das popup-widget funktioniert bei mir allerdings noch nicht richtig. Es wird war ein Pop-Up geöffnet, dieses aber "rechts neben" des gridster-Rasters. Zudem wird beim Schliessen des Pop-Ups automatisch auf die Default-Pagetab-Seite "geschalten". Soll das so sein, bzw. kann man das per data-blabla beeinflussen?

tomster

Hast Du am image-Widget auch was geschraubt?
Ich bekomme nun kein Bild mehr angezeigt, wenn ich den MJPEG-Stream als Image-URL angebe...

setstate

Upps, das Zusammenspiel mit pagetab habe ich noch gar nicht getestet.
Wie hast du das definiert? Schon innerhalb eines Gridster <li> ?

tomster

#2064
So isses eingebaut:

<li data-row="6" data-col="9" data-sizex="6" data-sizey="4">
        <header>GARTENTEICH</header>
        <div data-type="popup">
        <div data-type="image"
        data-url="http://192.168.1.34/jpeg/vga.jpg"
        data-size="350"></div>
        <div class="dialog">
        <div data-type="image"
        data-url="http://192.168.1.34/mjpeg"
        data-size="750"</div>
        </div>
        </div>
</li>


Allerdings scheint, wie gesagt der MJPEG-Stream nimma zu gehen, dem Pop-Up lässt sich anscheinend keine Größe zuordnen und die PopUp-Position ist quasi "off-limits"... sprich auf dem Tablet für es zu einem faktischen Freeze, weil ich durch mein block-on-move-event natürlich nicht mehr scrollen kann und deshalb auch das "close"-Kreuzchen nicht clicken/ touchen kann ;-)

lapidu

Hallo zusammen,

ich möchte gerne die Aussentemperatur anzeigen lassen.

Zitat<li data-row="1" data-col="2" data-sizex="2" data-sizey="1">
<div data-type="label"
           data-device="AussenTemp"
           data-get="measured-temp"
           data-limits='[-73,19,23]'
           data-colors='["#6699FF","#AA6900","#FF0000"]'
           data-unit="%B0C%0A"
           class="cell inline big">
</div>
</li>

Dieser Code zeigt folgendes an:

(http://up.picr.de/22370478kx.jpg)

Ich bekomme von dem Fühler im FHEM Temperatur und Luftfeuchtigkeit zusammen.
Wie kann ich beide Werte einzeln anzeigen lassen?
Wie kann ich die Farbe vom Text ändern?

Danke

Lapidu

Nobby1805

Ist das ein HomeMatic-Fühler ... da gibt es dann aber auch einzelne Readings für Temperatur und Feuchte
FHEM-Featurelevel: 6.2   (fhem.pl:28227/2023-11-29) auf Windows 10 Pro mit Strawberry Perl 5.32.1.1-32bit
TabletUI: 2.7.15
IO: 2xHMLAN(0.965)|HMUSB2(0.967)

setstate

Ansonsten mit data-part arbeiten. data-part="2" oder data-part="4"

lapidu

Danke, hat mit den Readings geklappt.

lapidu

Hallo zusammen,

habe mal wieder eine Frage zum Tablet UI.

Mann hat ja die Möglichkeit die Widgets per Drag & Drop auf der Website zu verschieben.
Wenn man die Seite neu lädt, sind die Widget wieder so wie sie vorhe waren.
Wie kann man das abspeichern?

Danke.

Lapidu