New FHEM Tablet UI

stromer-12 · 23 April 2015, 15:16:08

Mit dem Backup geht das Symbol wieder. Der Fehler mit dem IP aufruf bleibt.

                <div class="cell">
                        <div data-type="symbol" data-device="CUL_HM_HM_SEC_SC_2_tuer" class="narrow"></div>
                </div>

nesges · 23 April 2015, 15:37:35

Zitat von: stromer-12 am 23 April 2015, 15:16:08
Code Auswählen Erweitern
<div class="cell"> <div data-type="symbol" data-device="CUL_HM_HM_SEC_SC_2_tuer" class="narrow"></div> </div>

Danke! Fehler gefunden und korrigiert, in einem der nächsten Updates sollte die aktualisierte Fassung ausgeliefert werden.

tomster · 23 April 2015, 16:14:44

Gibt's eigentlich auch schon irgendetwas, was wie das "push-widget" nur in die andere Richtung ist?
Also etwas, das durch einen Trigger in FHEM eine Aktion auf dem Tablet-UI auslöst.
Ich dachte da z.B. an eine Klingel, die beim Drücken eine Aktion im UI triggert, und dann auf die webcam.html "geschaltet" wird.

--edit--

Sorry, wenn's zu fordernd klintgt, aber ist mir grad so eingefallen, als ich die Buttons für mein Layout, bzw. deren Funktionen zusammengestellt habe...

mw_fhem · 23 April 2015, 16:24:32

Zitat von: tomster am 23 April 2015, 16:14:44
Gibt's eigentlich auch schon irgendetwas, was wie das "push-widget" nur in die andere Richtung ist?
Also etwas, das durch einen Trigger in FHEM eine Aktion auf dem Tablet-UI auslöst.
Ich dachte da z.B. an eine Klingel, die beim Drücken eine Aktion im UI triggert, und dann auf die webcam.html "geschaltet" wird.

--edit--

Sorry, wenn's zu fordernd klintgt, aber ist mir grad so eingefallen, als ich die Buttons für mein Layout, bzw. deren Funktionen zusammengestellt habe...

Ich wüsste zwar spontan nicht, wie ich es für mich nutzen könnte, aber die Idee ist gut.

setstate · 23 April 2015, 16:36:26

Von mir auch Daumen hoch, ist eine gute Idee.
Entwickler vor! Kopiert ein Basis-Widget, und implementiert die zwei Funktionen "init" und "update"
Wenn dann per longpoll ein Event bei update reinkommt und Device und Reading übereinstimmt, wird das HTML Element, was bei "init" erzeugt wurde, verändert/angezeigt/was auch immer

Es könnte zum Beispiel ein modales Div von hidden auf show geschaltet werden und damit on top aufpopen

selfarian · 23 April 2015, 16:44:38

Irgendwo in diesem Post hatte mir jemand mal ein code-snippet gepostet, das eben bei einer gewissen Bedingung (alarm) das Glocken-icon eingeblendet hat

nesges · 23 April 2015, 16:48:43

Coole Idee! Wie wär's mit einem generischen data-change-action Attribut, das bei Wertänderung beliebigen JS-Code eval'ed?

https://github.com/nesges/Widgets-for-fhem-tablet-ui/blob/master/testing/widget_famultibutton.js

Code Auswählen

<div data-type="symbol" data-device="TEST" class="narrow"
            data-before-change-action="$.toast($(this).data('device') + ' changed from ' + $(this).data('value') + ' to ' + state)"
            data-after-change-action="eval($(this).data('before-change-action'))"
            ></div>

"Nachteil": Erfordert Kenntnisse der Widget-Interna. Dafür steht einem aber auch jede Schweinerei offen

nesges · 23 April 2015, 16:52:30

Zitat von: selfarian am 23 April 2015, 16:44:38
Irgendwo in diesem Post hatte mir jemand mal ein code-snippet gepostet, das eben bei einer gewissen Bedingung (alarm) das Glocken-icon eingeblendet hat

http://forum.fhem.de/index.php/topic,34233.msg281060/topicseen.html#msg281060

tomster · 23 April 2015, 16:53:44

Zitat von: setstate am 23 April 2015, 14:49:55
Das hatte ich vor kurzem auch: http://forum.fhem.de/index.php/topic,34507.msg284946.html#msg284946
Heute Morgen funktionierte es auf dem gleichen iPhone alles wieder. Kann nur an einem geänderten FHEM Modul liegen. Ich habe an phone oder FTUI nix geändert dafür.

Ich hab grad Mal einen Versuch in's Blaue gestartet und einfach

Code Auswählen

<meta http-equiv="Expires" content="-1">
in der index.html hinzugefügt. Scheint zu funktionieren.

--edit--

Nun ja, sagen wir einmal: es scheint besser zu funktionieren...

stromer-12 · 23 April 2015, 17:30:46

Zitat von: stromer-12 am 23 April 2015, 14:58:05
wenn ich das UI per IP von meinen Laptop aufrufe fehlen die Slider.

fhem und ui sind aktuell.

In der Web-Console taucht folgender Fehler bei aufruf mittels IP auf.

Code Auswählen

SecurityError: The operation is insecure. jquery.min.js line 2 > eval:16:0
TypeError: pwrng is undefined jquery.min.js line 2 > eval:63:5

Ohne Slider ist der Fehler weg

setstate · 23 April 2015, 18:22:57

Zitat von: tomster am 23 April 2015, 16:53:44

Nun ja, sagen wir einmal: es scheint besser zu funktionieren...

Jetzt geht's bei mir auch nicht mehr. So ein sch...
Wenn das jemand lösen könnte ...

stromer-12 · 23 April 2015, 19:09:08

Wenn ich einen 2. Dimmer darstellen lassen will, wird er nicht angezeigt und in der Webconsole steht folgender Fehler:

Code Auswählen

TypeError: $(...).data(...) is undefined jquery.min.js line 2 > eval:57:28

Code Auswählen

<div data-type="dimmer" data-device="CUL_HM_HM_LC_BL1_FM_Wz" data-get="pct" data-get-on="[0-9]{1,3}|on" data-get-off="off" data-icon="fa-bars" class="cell"></div>

Die beiden Dimmer sind in verschieden Zellen definiert. Jeder für sich allein erzeugt keinen Fehler.

Edit: Nur im Firefox unter Windows und nur mit IP-Adresse, mit Hostnamen funktioniert es.
Auf dem Android-Tablet im WVC funktioniert es aber mit IP-Adresse.

mmh

setstate · 23 April 2015, 19:36:56

Zitat von: stromer-12 am 23 April 2015, 19:09:08

Edit: Nur im Firefox unter Windows und nur mit IP-Adresse, mit Hostnamen funktioniert es.
Auf dem Android-Tablet im WVC funktioniert es aber mit IP-Adresse.

mmh

Also, ich habe jetzt extra meine Windows-Kiste ausgegraben und angeworfen. Keine Fehler im Firefox mit IP-URL und zwei Dimmern. Hat jemand noch eine Idee?

tomster · 23 April 2015, 20:34:55

Wie hast du denn die Dimmer in FHEM definiert?

stromer-12 · 23 April 2015, 20:38:46

Ich habe jetzt das UI Verseichnis neu erstellt, aber da keine Besserung.
Mein Rechner hier Windows 7 mit FF 37.0.2
Auf einen anderen Rechner mit XP mit FF 35.0 gleicher Fehler

Es sind HM Blind Aktoren
Auf meinen Android Tablet wird die Seite in Chrome und WVC korrekt dargestellt.

Code Auswählen

<!DOCTYPE html>
<html>
<head>
    <!-- 
     /* FHEM tablet ui */
     /*
     * Just another dashboard for FHEM
     *
     * Version: 1.3.2
     * 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 -->

    <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" />
    
    <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': 'WVC_CL'}; var wvcUserCssFile="webviewcontrol.css"</script>
    <script type="text/javascript" charset="UTF-8"></script>
    <!-- End for WebViewControl -->

</head>
<body>

<!-- available class: container,left,right,cell,narrow,darker,big,small -->
<!-- available data-type: contact,dimmer,homestatus,label,push,slider,switch,thermostat,volume -->

<div class="gridster">
<ul>
<li data-row="1" data-col="2" data-sizex="2" data-sizey="2">
    <header>ESSZIMMER</header>
        <div data-type="dimmer" data-device='CUL_HM_HM_LC_BL1_FM_Ez' data-get="pct" data-get-on='[0-9]{1,3}|on' data-get-off="off" data-icon="fa-bars" class="cell"></div>
</li>

<li data-row="3" data-col="5" data-sizex="2" data-sizey="2">
    <header>WOHNZIMMER</header>
        <div data-type="dimmer" data-device="CUL_HM_HM_LC_BL1_FM_Wz" data-get="pct" data-get-on="[0-9]{1,3}|on" data-get-off="off" data-icon="fa-bars" class="cell"></div>
</li>

</ul>
</div> 
</body>
</html>