New FHEM Tablet UI

setstate · 03 November 2015, 14:12:46

Zitat von: ChristianR am 03 November 2015, 13:31:54
Nu hätte ich doch auch mal wieder ne quick question...

Hab nen circlemenu für die Farbauswahl meines LW12 gebastelt und leider sind die icons "verrutscht".
Jemand ne Idee warum das so ist, bzw. was ich falsch definiert habe? (Funktion ist übrigens gegeben)

Code und Snipping anbei.

Vielen Dank wie immer für eure Mühe!

Gruß Christian

Die Listenelemente brauchen kein class="cell"

Das nutz man nur dort, wo solch ein Shift von 10px oben und 10px links benötigt wird. Also, wo man Abstand zwischen Elementen braucht.

dadoc · 03 November 2015, 18:17:52

Zitat von: setstate am 02 November 2015, 18:02:17
pagebutton geht auch, hat aber ein anderes Verhalten als pagetab ...
Pagetab hätte ich so definiert (menu.html):

Vielen Dank, das werde ich mal ausprobieren. Ich hatte das Beispiel http://www.fhemwiki.de/wiki/FHEM_Tablet_UI#Beispiel_pagetab so interpretiert, dass pagetab vor <div class="gridster"> definiert wird. Seit das da weg ist (bzw. durch pagebutton ersetzt), klappt auch der Reload in Desktop-Browsern wieder besser, über dessen Probleme (zerschossene Seiten, die sich erst nach vielen Reloads/F5 wieder richtig aufbauen) einige hier im Thread schon geschrieben haben.
Anscheinend führt der von mir ursprünglich gewählte Weg dazu, dass Readings nicht mehr korrekt aktualisiert werden?

EpicMinister · 03 November 2015, 22:02:15

Hey,

erstmal muss ich erwähnen das ich sehr begeistern von dem FTUI bin:)

Ich hätte aber zwei Fragen:

Zu dem Modul: readingsgroup.
Das einbinden hat wunderbar geklappt und es wird auch alles richtig dargestellt, allerdings wird das Modul nicht aktualisiert.
Im Code habe ich maxupdate="10" benutzt, was aber nichts bringt...

Jm. eine idee?

Code: <div data-type="readingsgroup" data-device="Anrufliste" data-max-update="10"></div>

außerdem möchte ich Fragen ob es normal ist wenn es ab und an passiert das die Oberfläche nach einem Browser-refresh so aussehen kann wie im angehängten Bild?

Für jede Antwort bin ich Dankbar:)

setstate · 04 November 2015, 09:46:46

Zitat von: EpicMinister am 03 November 2015, 22:02:15

außerdem möchte ich Fragen ob es normal ist wenn es ab und an passiert das die Oberfläche nach einem Browser-refresh so aussehen kann wie im angehängten Bild?

Für jede Antwort bin ich Dankbar:)

Wenn die Seite so aussieht, dann ist definitiv ein Javascript-Fehler aufgetreten. Bitte in der Web-Console (Desktop-Browser) nachsehen. Eventuell ist auch nur das HTML syntaktisch nicht ganz richtig.

EpicMinister · 04 November 2015, 09:54:20

Danke für die Antwort:)

Das dachte ich auch...

habe auch schon nachgeschaut allerdings gibt es keinen Fehler.
Die Ausgabe auf der Konsole hört einfach mittendrin auf.
Alles sehr komisch $:-\$

skuggy · 04 November 2015, 10:06:07

Zitat von: uniqueck am 02 November 2015, 22:56:43
Spukt denn die JavaScript Console etwas aus, weil so sieht erst einmal alles ok aus.
Hast du denn auch das widget in der Header Section eingebunden, bzw. kann er sie laden ggf. Rechte prüfen.
Ansonsten müsste ich ein paar Log Ausgaben einbauen.

Mit der Console kenn ich mich nicht aus, sorry. Da kann ich keine Fehler erkennen bzw. weiß nicht was Fehler sind.

Folgendes hab ich in die html-Datei eingefügt, ist das so richtig? Sorry, viele Sachen hab ich noch nicht so richtig auf dem Schirm.

Code Auswählen

</body>
  <script src="/fhem/pgm2/jquery.min.js"></script>
  <script src="/fhem/tablet/lib/jquery.toast.min.js"></script>
  <script src="/fhem/tablet/lib/jquery.gridster.min.js"></script>
  <script src="/fhem/tablet/js/fhem-tablet-ui.min.js"></script>
  <script src="/fhem/tablet/js/widget_calview.js"></script>
</html

Das hab ich unten eingefügt und nicht in den Head der Datei.

Die Rechte müsste muss ich heute Abend noch mal überprüfen.

h3llsp4wn · 04 November 2015, 10:17:58

Hallo zusammen,

kurze Frage - ich habe jetzt meine Navigation auf pagetab umgestellt und nutze hier u.a. auch ein circlemenu, um aus etlichen Räumen auszuwählen. Nun hätte ich gerne, dass wenn ein Eintrag aus dem circlemenu selektiert ist, dass circlemenu icon auch "aktiv" ist (quasi "on" mit entsprechender Farbe), so dass klar ist, das man sich in der "Kategorie" Räume befindet. Leider lässt pagetab wohl nicht zu ein dummy device mit einem Status zu versehen/zu triggern.

Hat jemand da ggf. eine Idee/Implementierung oder denke ich nur zu komplex?

Nachtrag: OK - hab's jetzt mit 'nem Switch für ein Circlemenu und den pagetabs hinbekommen - bei zwei oder mehr muss ich dann quasi schon den Status binär kodieren, um mit
den settern/gettern in einem dummy klar zu kommen. Scheint mir für den Moment etwas arg komplex zu sein.

Cheers,

h3ll

dadoc · 04 November 2015, 13:54:41

Zitat von: setstate am 02 November 2015, 18:02:17
Also index.html ist nicht Bestandteil des Menüs.

Habe ich jetzt mal ausprobiert. Gefühlt (nicht gemessen) dauert der Seitenwechsel länger als mit dem direkt in die Dateien gesetzten pagebuttons, aber das muss ich heute Abend mal vor Ort und auf dem Tablet genauer ausprobieren.

dadoc · 04 November 2015, 13:55:28

Zitat von: setstate am 02 November 2015, 18:02:17
Also index.html ist nicht Bestandteil des Menüs.

Habe ich jetzt mal ausprobiert. Gefühlt (nicht gemessen) dauert der Seitenwechsel länger als mit dem direkt in die Dateien gesetzten pagebuttons, aber das muss ich heute Abend mal vor Ort und auf dem Tablet genauer ausprobieren.

oehi86 · 04 November 2015, 14:46:05

Hat jemand noch eine Idee?

Zitat von: oehi86 am 01 November 2015, 23:02:57
Hi hi,
danke für die Antwort schon mal. Am Rechner funktioniert es absolut perfekt. Da erscheinen die Toast-Messages und der Aktor wird auch geschaltet. Am iOS Device werden der aktuelle Status angezeigt, aber die Toast-Messages erscheinen nur für die aus der "Standard-index.html" vorhandenen Devices. Nicht aber für die, die ich bereits in die index.html integriert habe.

wz_LEDSteckdose funktioniert nur am PC (von mir integriert), für das Philips Hue Device erhalte ich auf beiden Geräten (PC und iOS Device) eine Toast-Message. Funktionieren tut die Philips logischerweise nicht, da sie aus der template-index.html kommt.

Code Auswählen Erweitern
<div class="right right-space"> <div data-type="switch" data-device="wz_LEDSteckdose" class="cell"></div> <div data-type="label" class="">LED Lichtleiste</div> <div data-type="dimmer" data-device="HUEDevice1" data-get-on="!off" data-get-off="off" data-set="pct" class="top-space-2x" ></div> <div data-type="label" class="cell">Philips</div> </div>

setstate · 04 November 2015, 15:22:20

Ich verstehen leider die Frage nicht, auch nach mehrmaligem Lesen.
Baue bitte eine index.html nur mit deinen Devices und im iOS den Broswer neu laden (Task vorher beenden).

Was passiert bei nun bei der wz_LEDSteckdose?

dadoc · 04 November 2015, 16:15:22

Zitat von: dadoc am 04 November 2015, 13:55:28
das muss ich heute Abend mal vor Ort und auf dem Tablet genauer ausprobieren.

Dasselbe Phänomen wie beim direkten Einbinden der pagetabs: Readings wie Sender oder Programm werden beim Umschalten des Kanals nicht aktualisiert. Ich glaube, ich bleibe bei den pagebuttons, mit denen geht's...

ChristianR · 04 November 2015, 21:59:53

Zitat von: setstate am 03 November 2015, 14:12:46
Die Listenelemente brauchen kein class="cell"

Das nutz man nur dort, wo solch ein Shift von 10px oben und 10px links benötigt wird. Also, wo man Abstand zwischen Elementen braucht.

Danke, das war der gesuchte Hinweis!

uniqueck · 04 November 2015, 22:49:24

Hi @skuggy,

diese Angabe bitte in den head Bereich in der HTML Seite einbinden.

Code Auswählen


<head>
	<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="137">
	<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">
	<meta name="debug" content="0">
	
	<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">
	<link rel="stylesheet" href="/fhem/tablet/lib/openautomation.css">
	<link rel="stylesheet" href="./css/wopr.css">
	<link rel="stylesheet" href="./css/style.css">
	<link rel="stylesheet" href="./css/own.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>
	<script type="text/javascript" src="/fhem/tablet/js/widget_calview.js"></script>	
	
	
	</head>

Zitat von: skuggy am 04 November 2015, 10:06:07
Mit der Console kenn ich mich nicht aus, sorry. Da kann ich keine Fehler erkennen bzw. weiß nicht was Fehler sind.

Folgendes hab ich in die html-Datei eingefügt, ist das so richtig? Sorry, viele Sachen hab ich noch nicht so richtig auf dem Schirm.

Code Auswählen Erweitern
</body> <script src="/fhem/pgm2/jquery.min.js"></script> <script src="/fhem/tablet/lib/jquery.toast.min.js"></script> <script src="/fhem/tablet/lib/jquery.gridster.min.js"></script> <script src="/fhem/tablet/js/fhem-tablet-ui.min.js"></script> <script src="/fhem/tablet/js/widget_calview.js"></script> </html

Das hab ich unten eingefügt und nicht in den Head der Datei.

Die Rechte müsste muss ich heute Abend noch mal überprüfen.

setstate · 04 November 2015, 23:39:28

New Widget: Chart

Das neue Widget Chart ist von User eki entwickelt worden. Ich habe es gerade auf Github hochgeladen.
Die Liste der Features gibt es im Ursprungsthread: siehe hier http://forum.fhem.de/index.php/topic,37378.msg352326.html#msg352326

Beispiel zu Nutzung:

Code Auswählen


<li data-row="4" data-col="9" data-sizex="10" data-sizey="3">
  <header>CHART</header>
    <div class="normal"
         data-type="chart"
         data-device="WohnzimmerHeizung"
         data-logdevice='["FileLog_WohnzimmerHeizung","FileLog_WohnzimmerHeizung","FileLog_WohnzimmerHeizung"]'
         data-columnspec='["4:measured-temp","4:desired-temp","4:ValvePosition"]'
         data-style='["ftui l0fill","ftui l0dot","ftui l2dash"]'
         data-ptype='["lines","lines","lines"]'
         data-uaxis='["primary","primary","secondary"]'
         data-legend='["Measured", "Desired", "Valve"]'
         data-yunit="°C"
         data-ytext="Temperature"
         data-minvalue="auto"
         data-maxvalue="auto"
         data-yunit_sec="%"
         data-ytext_sec="Percentage"
         data-yticks="auto"
         data-minvalue_sec="0"
         data-maxvalue_sec="100"
         data-daysago_start="0"
         data-daysago_end="-1"
         data-crosshair="true"
         data-cursorgroup="1"
         data-scrollgroup="1"
         data-showlegend="true"
         data-xticks="auto">
    </div>
</li>