New FHEM Tablet UI

TNT0068 · 27 Mai 2015, 13:42:08

Könntest du mir mal die Index.html zu verfügung stellen. Dann baue ich die mal ein mal sehen wie sich Pagetab dann verhält

CoolTux · 27 Mai 2015, 13:43:17

@setstate
Wäre es möglich das Homestatus Modul etwas auf zu bohren. Ich bräuchte noch ein gotosleep. Das ist ja im Moment von der Anzeige mit im Sleep drin. Ich bräuchte es als weitere Auswahl.
Anwendungsbeispiel:

gotosleep Sohn

Licht geht im Bad an wenn es zu dunkel ist, Heizung im Bad macht für 15 min ein boost, Sohn ist 1,5 Jahre alt und hat es gerne warm beim waschen
Im Kinderzimmer geht das Nachtlicht an

gotosleep Eltern

Ansage der Uhrzeit, Ansage des Wetters morgen früh, Licht an im Bad und im Schlafzimmer, Licht aus in nicht benötigten Räumen

Also ein GotoSleep Button wäre schon schön

Grüße

update71 · 27 Mai 2015, 14:31:56

Zitat von: TNT0068 am 27 Mai 2015, 13:42:08
Könntest du mir mal die Index.html zu verfügung stellen. Dann baue ich die mal ein mal sehen wie sich Pagetab dann verhält

heute Abend gerne. Bin in Berlin bummeln

TNT0068 · 27 Mai 2015, 14:37:28

update71 paahhhh das geht ja mal garnicht. Viel Spaß

Kann dann aber erst morgen testen

@setstate bitte ändere erstmal nichts ausser es melden sich noch mehr die das Problem haben. Ich werde es morgen nochmal testen. heute abend habe ich leider keine Zeit

aeronaut · 27 Mai 2015, 15:05:30

Zitat von: setstate am 27 Mai 2015, 13:16:29
Was genau soll größer werden? Die Schrift und damit die Höhe? Die Breite kann man jetzt schon mit w2x und w3x festlegen

Ja genau, die Schrift der Select-Items sollte größer werden, die Breite reicht nicht.

TNT0068 · 27 Mai 2015, 15:34:09

So Pagetab läuft jetzt. Habe nun eine leere Index.html die nur auf das Menü verweist und in Pagetab nicht mehr angesprochen wird.
Ich hoffe mal nicht das ich irgendwo etwas dazu überlesen habe.

mw_fhem · 27 Mai 2015, 15:59:58

Zitat von: TNT0068 am 27 Mai 2015, 15:34:09
So Pagetab läuft jetzt. Habe nun eine leere Index.html die nur auf das Menü verweist und in Pagetab nicht mehr angesprochen wird.
Ich hoffe mal nicht das ich irgendwo etwas dazu überlesen habe.

Gute Idee! Werde ich heute Abend mal testen.

mw_fhem · 27 Mai 2015, 20:18:22

Zitat von: mw_fhem am 27 Mai 2015, 15:59:58
Gute Idee! Werde ich heute Abend mal testen.

Ein schneller Test hat leider nicht zum Erfolg geführt

Ich werde morgen in Ruhe nochmal alles durchgehen.

update71 · 27 Mai 2015, 20:34:13

Ich hab es so:
index.html

Code Auswählen


<!DOCTYPE html>
<html>
<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-HC #index</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="130"> <!-- 116 -->
    <meta name="widget_base_height" content="140"> <!-- 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>
    
    <link rel="stylesheet" href="/fhem/tablet/lib/openautomation.css" />
    <link rel="stylesheet" href="/fhem/tablet/lib/fhemSVG.css" />
    <!-- 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':'EG_Tab1'}; var wvcUserCssFile="webviewcontrol.css"</script>
        <!-- End for WebViewControl -->

</head>
<body>
    <div data-type="clicksound"
    data-sound='["ion-button-tiny","ion-button-click-on","ion-tap"]'
    data-length='[200,300,400]'
    data-bind-to='["+button","+knob","+slider"]'></div>
    <!-- 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 ready">
    <ul style="height: 775px; width: 1270px; position: relative;">
        <li data-row="1" data-col="1" data-sizex="1" data-sizey="5" data-template="menu.html" class="gs-w">
        </li>
    </ul>
</div>
</body>
</html>

menu.html

Code Auswählen


<html>
<body>
    <header>Räume</header>
    <div class="cell">
        <div data-type="pagetab" data-url="start.html"  data-icon="fa-home" class="cell"></div>
        <div data-type="pagetab" data-url="multimedia.html" data-icon="fa-sliders" class="cell"></div>
        <div data-type="pagetab" data-url="wetter.html" data-icon="fa-cloud" class="cell"></div>
        <div data-type="pagetab" data-url="heizung.html" data-icon="oa-sani_heating" class="cell"></div>
     </div>
</body>
</html>

start.html (gekürzt)

Code Auswählen


<!DOCTYPE html>
<html>
<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-HC</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="130"> <!-- 116 -->
    <meta name="widget_base_height" content="140"> <!-- 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>
    
    <link rel="stylesheet" href="/fhem/tablet/lib/openautomation.css" />
    <link rel="stylesheet" href="/fhem/tablet/lib/fhemSVG.css" />
    <!-- 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':'EG_Tab1'}; var wvcUserCssFile="webviewcontrol.css"</script>
        <!-- End for WebViewControl -->

</head>
<body>
    <div data-type="clicksound"
    data-sound='["ion-button-tiny","ion-button-click-on","ion-tap"]'
    data-length='[200,300,400]'
    data-bind-to='["+button","+knob","+slider"]'></div>
    <!-- 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 ready">
    <ul style="height: 775px; width: 1270px; position: relative;">
    <!------------- Menü links --------------- 1. Reihe senkrecht Platz 1-5 -------------------->
        <li data-row="1" data-col="1" data-sizex="1" data-sizey="5" data-template="menu.html" class="gs-w">
        </li>
    <!------------- Ende linkes Menü --------------------------------------------->
...
...
...
 </ul>
</div>
</body>
</html>

nesges · 27 Mai 2015, 21:06:29

Zitat von: aeronaut am 27 Mai 2015, 11:32:50
Es scheint keine Möglichkeit zu geben, das Select-Widget mit z.B. class="bigger" zu vergrößern, oder mache ich was falsch? Es scheint nur eine Größe zu haben und in der Doku steht ja auch, dass nicht jedes Widget jede CSS-Klasse unterstützt ... könnte das ggf. erweitert werden?

"bigger" ist mit einer Vergrößerung von 320% definiert - das wäre etwas übertrieben beim Timer

Aber "large" (150%) habe ich implementiert.

http://forum.fhem.de/index.php/topic,36122.msg298425.html#msg298425

Risiko · 27 Mai 2015, 21:54:57

Zitat von: update71 am 27 Mai 2015, 13:27:44
Bei funktioniert es mit den Pagetabs einwandfrei. Ich hab die Änderungen von viegener schön länger drin.

Ich auch.

Zitat von: update71 am 27 Mai 2015, 13:27:44
Bitte keine Rolle rückwärts!

+1

update71 · 27 Mai 2015, 22:07:29

Cool wäre wenn mal jemand was zum Thema index.html oder nicht beim Aufruf von FTUI sagen kann.
Ich komme so: http://fhem:8083/fhem/tablet/ nicht auf die UI sondern erhalte eine blanke weisse Seite
Eine frische Testinstallation auf einem anderen PI ergab das gleiche Ergebnis.
mit http://fhem:8083/fhem/tablet/index.html gehts und ich werde korrekt nach http://fhem:8083/fhem/tablet/index.html#start.html weitergeleitet.

Da ich auch Probleme mit WVC habe (http://fhem:8083/fhem/ da funktioniert es einwandfrei) dass die Seite nicht geladen werden kann bzw nach kurzer Zeit die Seite nicht erreichbar ist (Fehler -2 oder -6) nehme ich an dass ich irgendwo was nicht so habe wie andere

Könnte mal jemand bei dem WVC mit der FTUI sauber läuft seine Def. für ftui, WVC und die entsprechende Stelle in den html's posten?
Eingerichtet und installiert habe ich WVC so wie in der Anleitung des Autors beschrieben.

Ich würde mich sehr freuen wenn wir das gelöst bekommen!

Danke

setstate · 27 Mai 2015, 22:18:48

Zitat von: aeronaut am 27 Mai 2015, 11:32:50
Es scheint keine Möglichkeit zu geben, das Select-Widget mit z.B. class="bigger" zu vergrößern, oder mache ich was falsch? Es scheint nur eine Größe zu haben und in der Doku steht ja auch, dass nicht jedes Widget jede CSS-Klasse unterstützt ... könnte das ggf. erweitert werden?

Das Select Widget geht jetzt mit der Class large und big größer zu machen. Dazu muss nur das CSS file neu gezogen werden.

Lling · 27 Mai 2015, 23:47:14

Gibts ne Möglichkeit, einen RGB Controller über Volume anzusprechen ähnlich wie HUE?

Geht speziell um ein LW12 Wifi Light Modul.

nesges · 27 Mai 2015, 23:51:30

Die Änderung der .cell margin von 5px auf 10px (fhem-tablet-ui.css 76) wirft ziemlich viel durcheinander. Lokal bei mir werd ich's überschreiben.

New FHEM Tablet UI

Lling