Hauptmenü

Performaceprobleme?

Begonnen von Snake1980, 25 März 2016, 12:57:55

Vorheriges Thema - Nächstes Thema
Drucken
Nach unten Seiten1
Benutzer-Aktionen

Snake1980

25 März 2016, 12:57:55 Letzte Bearbeitung: 25 März 2016, 13:01:04 von Snake1980
Hallo FHEM-Gemeinde,

ich lese hier schon eine ganze Weile mit und habe in den letzten Wochen angefangen eine hübsche Tablet UI zu basteln.
Als Tablet kommt bei mir ein Acer Iconia one B3-A20 zum Einsatz.
Leider will es mit der Performance noch nicht so ganz hinhauen. Ein Seitenaufbau dauert mindestens 5 Sekunden, die Heizungseite braucht manchmal 10 Sekunden und mehr, bis man Eingaben tätigen kann. Zwischen den Eingaben muss auch einiges an Zeit vergehen, bis Kommandos wieder angenommen werden. Teilweise fehlen im Pagetab-Menü die Icons und man muss die Seite neu laden. Hin und wieder wird auch nur das Menü angezeigt und alles andere bleibt dunkel.
Ich hab mal ein kurzes Video aufgenommen. Es ist natürlich wie beim Zahnarzt: Wenn man da ist, sind die Schmerzen weg. Soll heißen: normalerweise ist das ganze noch langsamer, als im Video.
Ich bin so langsam echt der Verzweiflung nahe. Es stecken ja doch schon etliche Stunden "Arbeit" in der ganzen Sache. Ich habe den Code der html-Dateien schon mal durch so ein Testtool gejagt, um zu vermeiden, dass grobe Fehler auftauchen. Es sind lediglich ein paar Einträge übrig, die darauf hinweisen, dass bestimmter Code nicht mehr in html sondern in CSS benutzt werden soll.
Es wäre echt toll, wenn irgendjemand einen Tipp für mich hätte.

https://youtu.be/Ut7LFhkyy54

Vielen Dank!

Swen

Snake1980

#1
25 März 2016, 13:01:28
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-Tablet-UI</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.2, maximum-scale=1.0, user-scalable=no" />
        <meta name="widget_base_width" content="116">
        <meta name="widget_base_height" content="121">
        <meta name="mobile-web-app-capable" content="yes">
        <meta name="apple-mobile-web-app-capable" content="yes">
        <meta name='gridster_disable' content='1'>
        <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='toast' content="0"> <!-- toas messages -->

        <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="/fhem/tablet/lib/fhemSVG.css" />
        <link rel="stylesheet" href="/fhem/tablet/fonts/roman/style.css" />
<link rel="stylesheet" href="/fhem/tablet/fonts/materialfont/style.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/my_screensaver.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,large thin,large thinger,small,thin,large thin,wider -->
<!-- available data-type: symbol,dimmer,homestatus,label,push,slider,switch,thermostat,volume,weather -->
<!--<div data-template="screensaver.html"></div>-->

<div class="gridster">
        <ul>
                <li data-row="1" data-col="1" data-sizex="1" data-sizey="6" data-template="menu.html"></li>
        </ul>
</div>
</body>
</html>

Snake1980

#2
25 März 2016, 13:02:08
Startseite:

Code Auswählen
<!DOCTYPE html>
<html>
<head>
    <title>Licht</title>
</head>
<body>

<div class="gridster">
<ul>
<!-- ========= Linkes-Hauptmenü =========== -->
        <!-- ====================================== -->
<li data-row="1" data-col="1" data-sizex="1" data-sizey="6" data-template="menu.html"></li>
<!-- ========= Rechtes-Hauptmenü ========== -->
        <!-- ====================================== -->
        <li data-row="1" data-col="10" data-sizex="1" data-sizey="6" data-template="info_menu.html"></li>
<!-- Zeile 1   Spalte 2 -->
<li data-row="1" data-col="2" data-sizex="2" data-sizey="2">
<header><font size="+1">Licht</font></header>

<div data-type="switch" class="bigger"
            data-device="Schalter2"
            data-get-on="on"
            data-get-off="off"
data-icon="fa-lightbulb-o">
</div>


<div data-type="label" class="narrow">Stehlampen</div>
<br>
<div data-type="switch" class="bigger"
            data-device="Schalter0"
            data-get-on="on"
            data-get-off="off"
data-icon="fa-lightbulb-o">
</div>
<div data-type="label" class="narrow">Aquarium</div>
</li>
<!-- Zeile 1   Spalte 8 -->
<li data-row="1" data-col="8" data-sizex="2" data-sizey="1">
<header><font size="+1">Stromverbrauch</font></header>
<div class="inline"><br>
<div     data-type="label"
data-device="ESA2000"
data-get="day"
data-unit="kWh"
data-fix="2"
data-limits='[0,10,15]'
data-colors='["green","yellow","firebrick"]'
class="large">
</div>
<div class="">heute
</div>
</div>
<div class="inline"><br>
<div     data-type="label"
data-device="ESA2000"
data-get="day_last"
data-unit="kWh"
data-fix="2"
data-limits='[0,10,15]'
data-colors='["green","yellow","firebrick"]'
class="large">
</div>
<div class="">gestern
</div>
</div>
</li>
<li data-row="1" data-col="4" data-sizex="4" data-sizey="1">
                        <header><font size="+1">Abfallabholung</font>

</header>

          <div class="top-space">
                <div data-type="button"
                         data-background-icon="none"
                         data-device="myAbfall"
                         data-get="MuellCalendar_Restabfallbehaelter_tage"
                         data-off-color="#606060"
                         data-fhem-cmd="setreading myAbfall Restmuell_Tage off"
                         data-get-on='["off","0","1","[2-9]{1}|[0-9]{2}|[0-9]{3}"]'
                         data-icons='["ro-bin warn","ro-bin warn","ro-bin warn blink","ro-bin warn"]'
                         data-on-colors='["#606060","#606060","#606060","#606060"]'
                         class="bigger">
                </div>
                <div data-type="button"
                         data-background-icon="none"
                         data-device="myAbfall"
                         data-get="MuellCalendar_Papierbehaelter_tage"
                         data-off-color="cornflowerblue"
                         data-fhem-cmd="setreading myAbfall Papier_tage off"
                         data-get-on='["off","0","1","[2-9]{1}|[0-9]{2}|[0-9]{3}"]'
                         data-icons='["ro-bin warn","ro-bin warn","ro-bin warn blink","ro-bin warn"]'
                         data-on-colors='["cornflowerblue","cornflowerblue","cornflowerblue","cornflowerblue"]'
                         class="bigger">
                </div>

                 <div data-type="button"
                         data-background-icon="none"
                         data-device="myAbfall"
                         data-get="MuellCalendar_Kompostbehaelter_tage"
                         data-off-color="#739967"
                         data-fhem-cmd="setreading myAbfall Plastik_tage off"
                         data-get-on='["off","0","1","[2-9]{1}|[0-9]{2}|[0-9]{3}"]'
                         data-icons='["ro-bin warn","ro-bin warn","ro-bin warn blink","ro-bin warn"]'
                         data-on-colors='["#739967","#739967","#739967","#739967"]'
                         class="bigger">
                </div>
                <div data-type="button"
                         data-background-icon="none"
                         data-device="myAbfall"
                         data-get="MuellCalendar_GelberSack_tage"
                         data-off-color="yellow"
                         data-fhem-cmd="setreading myAbfall Plastik_tage off"
                         data-get-on='["off","0","1","[2-9]{1}|[0-9]{2}|[0-9]{3}"]'
                         data-icons='["fs-bag warn","fs-bag warn","fs-bag warn blink","fs-bag warn"]'
                         data-on-colors='["yellow","yellow","yellow","yellow"]'
                         class="bigger">
                </div>
        </div>
</li>
<li data-row="2" data-col="4" data-sizex="4" data-sizey="2">
<header class="headerTransparent">ANRUFE</header>
<table width="100%" class="">
        <tr>
            <td>
<div data-type="symbol"
data-device="FritzBoxCallList"
data-get="1-state"
data-states='["=>","=> X","=>  ((o))","=>  [=]","=> O_O"]'
data-icons='["ma-call_end","ma-phone_missed","ma-ring_volume fa-blink","ma-phone_in_talk fa-blink","ma-voicemail"]'
data-colors='["green","firebrick","firebrick","green","#aa6900"]'
class="">
</div>
</td>
            <td>
                <div data-type="label"
data-device="FritzBoxCallList"
data-get="1-timestamp"
data-part="1"
class="inline">
</div>
<div data-type="label"
data-device="FritzBoxCallList"
data-get="1-timestamp"
data-part="2"
class="inline">
</div>
<div data-type="label"
data-device="FritzBoxCallList"
data-get="1-timestamp"
data-part="3"
class="">
</div>
            </td>
            <td>
<div data-type="label"
data-device="FritzBoxCallList"
data-get="1-number"
class="">
</div>
<div data-type="label"
data-device="FritzBoxCallList"
data-get="1-name"
class="">
</div>
</td>
            <td>
<div data-type="symbol"
data-device="FritzBoxCallList"
data-get="1-internal"
data-get-on='["Wohnzimmer","Büro"]'
data-icons='["ma-phone","oa-scene_office"]'
data-on-colors='["",""]'
class="">
</div>
            </td>
            <td>
<div data-type="label"
data-device="FritzBoxCallList"
data-get="1-duration"
class="">
</div>
</td>
</tr>
<tr>
            <td>
<div data-type="symbol"
data-device="FritzBoxCallList"
data-get="2-state"
data-states='["=>","=> X","=>  ((o))","=>  [=]","=> O_O"]'
data-icons='["ma-call_end","ma-phone_missed","ma-ring_volume fa-blink","ma-phone_in_talk fa-blink","ma-voicemail"]'
data-colors='["green","firebrick","firebrick","green","#aa6900"]'
class="">
</div>
</td>
            <td>
                <div data-type="label"
data-device="FritzBoxCallList"
data-get="2-timestamp"
data-part="1"
class="inline">
</div>
<div data-type="label"
data-device="FritzBoxCallList"
data-get="2-timestamp"
data-part="2"
class="inline">
</div>
<div data-type="label"
data-device="FritzBoxCallList"
data-get="2-timestamp"
data-part="3"
class="">
</div>
            </td>
            <td>
<div data-type="label"
data-device="FritzBoxCallList"
data-get="2-number"
class="">
</div>
<div data-type="label"
data-device="FritzBoxCallList"
data-get="2-name"
class="">
</div>
</td>
            <td>
<div data-type="symbol"
data-device="FritzBoxCallList"
data-get="2-internal"
data-get-on='["Wohnzimmer","Büro"]'
data-icons='["ma-phone","oa-scene_office"]'
data-on-colors='["",""]'
class="">
</div>
</td>
            <td>
<div data-type="label"
data-device="FritzBoxCallList"
data-get="2-duration"
class="">
</div>
            </td>
        </tr>
        <tr>
<td>
<div data-type="symbol"
data-device="FritzBoxCallList"
data-get="3-state"
data-states='["=>","=> X","=>  ((o))","=>  [=]","=> O_O"]'
data-icons='["ma-call_end","ma-phone_missed","ma-ring_volume fa-blink","ma-phone_in_talk fa-blink","ma-voicemail"]'
data-colors='["green","firebrick","firebrick","green","#aa6900"]'
class="">
</div>
</td>
            <td>
                <div data-type="label"
data-device="FritzBoxCallList"
data-get="3-timestamp"
data-part="1"
class="inline">
</div>
<div data-type="label"
data-device="FritzBoxCallList"
data-get="3-timestamp"
data-part="2"
class="inline">
</div>
<div data-type="label"
data-device="FritzBoxCallList"
data-get="3-timestamp"
data-part="3"
class="">
</div>
            </td>
            <td>
<div data-type="label"
data-device="FritzBoxCallList"
data-get="3-number"
class="">
</div>
<div data-type="label"
data-device="FritzBoxCallList"
data-get="3-name"
class="">
</div>
</td>
            <td>
<div data-type="symbol"
data-device="FritzBoxCallList"
data-get="3-internal"
data-get-on='["Wohnzimmer","Büro"]'
data-icons='["ma-phone","oa-scene_office"]'
data-on-colors='["",""]'
class="">
</div>
</td>
            <td>
<div data-type="label"
data-device="FritzBoxCallList"
data-get="3-duration"
class="">
</div>
            </td>
        </tr>
        <tr>
            <td>
<div data-type="symbol"
data-device="FritzBoxCallList"
data-get="4-state"
data-states='["=>","=> X","=>  ((o))","=>  [=]","=> O_O"]'
data-icons='["ma-call_end","ma-phone_missed","ma-ring_volume fa-blink","ma-phone_in_talk fa-blink","ma-voicemail"]'
data-colors='["green","firebrick","firebrick","green","#aa6900"]'
class="">
</div>
</td>
            <td>
                <div data-type="label"
data-device="FritzBoxCallList"
data-get="4-timestamp"
data-part="1"
class="inline">
</div>
<div data-type="label"
data-device="FritzBoxCallList"
data-get="4-timestamp"
data-part="2"
class="inline">
</div>
<div data-type="label"
data-device="FritzBoxCallList"
data-get="4-timestamp"
data-part="3"
class="">
</div>
            </td>
            <td>
<div data-type="label"
data-device="FritzBoxCallList"
data-get="4-number"
class="">
</div>
<div data-type="label"
data-device="FritzBoxCallList"
data-get="4-name"
class="">
</div>
</td>
            <td>
<div data-type="symbol"
data-device="FritzBoxCallList"
data-get="4-internal"
data-get-on='["Wohnzimmer","Büro"]'
data-icons='["ma-phone","oa-scene_office"]'
data-on-colors='["",""]'
class="">
</div>
</td>
            <td>
<div data-type="label"
data-device="FritzBoxCallList"
data-get="4-duration"
class="">
</div>
            </td>
        </tr>
        <tr>
            <td>
<div data-type="symbol"
data-device="FritzBoxCallList"
data-get="5-state"
data-states='["=>","=> X","=>  ((o))","=>  [=]","=> O_O"]'
data-icons='["ma-call_end","ma-phone_missed","ma-ring_volume fa-blink","ma-phone_in_talk fa-blink","ma-voicemail"]'
data-colors='["green","firebrick","firebrick","green","#aa6900"]'
class="">
</div>
</td>
            <td>
                <div data-type="label"
data-device="FritzBoxCallList"
data-get="5-timestamp"
data-part="1"
class="inline">
</div>
<div data-type="label"
data-device="FritzBoxCallList"
data-get="5-timestamp"
data-part="2"
class="inline">
</div>
<div data-type="label"
data-device="FritzBoxCallList"
data-get="5-timestamp"
data-part="3"
class="">
</div>
            </td>
            <td>
<div data-type="label"
data-device="FritzBoxCallList"
data-get="5-number"
class="">
</div>
<div data-type="label"
data-device="FritzBoxCallList"
data-get="5-name"
class="">
</div>
</td>
            <td>
<div data-type="symbol"
data-device="FritzBoxCallList"
data-get="5-internal"
data-get-on='["Wohnzimmer","Büro"]'
data-icons='["ma-phone","oa-scene_office"]'
data-on-colors='["",""]'
class="">
</div>
</td>
            <td>
<div data-type="label"
data-device="FritzBoxCallList"
data-get="5-duration"
class="">
</div>
            </td>
        </tr>
</table>
</li>
<li data-row="2" data-col="8" data-sizex="2" data-sizey="2">
<header><font size="+1">Spritpreise</font></header>
<div class="inline"></div>

<div class="">Classic
</div>
<div class="inline">
<div     data-type="label"
data-device="Classic"
data-get="Diesel"
data-unit="Euro"
data-fix="2"
data-limits='[0.95,1.0,1.1]'
data-colors='["green","yellow","firebrick"]'
class="large">
</div>
<div class="">Diesel
</div>
</div>
<div class="inline">
<div     data-type="label"
data-device="Classic"
data-get="SuperE10"
data-unit="Euro"
data-fix="2"
data-limits='[0.95,1.21,1.31]'
data-colors='["green","yellow","firebrick"]'
class="large">
</div>
<div class="">Super
</div>
</div>
<div class="inline"></div>

<div class="">Shell
</div>
<div class="inline">
<div     data-type="label"
data-device="Shell"
data-get="Diesel"
data-unit="Euro"
data-fix="2"
data-limits='[0.95,1.0,1.1]'
data-colors='["green","yellow","firebrick"]'
class="large">
</div>
<div class="">Diesel
</div>
</div>
<div class="inline">
<div     data-type="label"
data-device="Shell"
data-get="SuperE10"
data-unit="Euro"
data-fix="2"
data-limits='[0.95,1.21,1.31]'
data-colors='["green","yellow","firebrick"]'
class="large">
</div>
<div class="">Super
</div>
</div>
<div class="inline"></div>

<div class="">Esso
</div>
<div class="inline">
<div     data-type="label"
data-device="Esso"
data-get="Diesel"
data-unit="Euro"
data-fix="2"
data-limits='[0.95,1.0,1.1]'
data-colors='["green","yellow","firebrick"]'
class="large">
</div>
<div class="">Diesel
</div>
</div>
<div class="inline">
<div     data-type="label"
data-device="Esso"
data-get="SuperE10"
data-unit="Euro"
data-fix="2"
data-limits='[0.95,1.21,1.31]'
data-colors='["green","yellow","firebrick"]'
class="large">
</div>
<div class="">Super
</div>
</div>
</li>


<!-- Zeile 1   Spalte 4 -->
<li data-row="3" data-col="2" data-sizex="2" data-sizey="4">
<header><font size="+1">LED-Strip</font></header>
<br>
<div data-type="label">Helligkeit</div>
<br>
<div data-type="volume"
            data-device="WlanRGB2"
data-step="1"
data-get="brightness"
data-set="dim"
            data-min="0"
data-max="100"
class="large dim-back">
</div>

<!--  TEST -->
<div class="top-space">
<div data-type="popup"
data-height="150px"
data-width="700px"
class="">
<div data-type="push"
data-icon="fa-paint-brush"
class="bigger">
</div>
<div data-type="label"
class="">Farbe
</div>
<div class="dialog dialogTransparent">
<header class="dialogheaderTransparent">LED-Strip Farbe einstellen</header>
<div class="top-space">
<div class="inline">
<div onclick="$('.dialog-close').trigger('click');"
data-type="push"
data-device="WlanRGB2"
data-set="RGB"
data-set-on="#FF0000"
data-off-color="#FF0000"
data-icon="fa-paint-brush"
class="bigger">
</div>
<div data-type="label"
class="">Rot
</div>
</div>
<div class="inline">
<div onclick="$('.dialog-close').trigger('click');"
data-type="push"
data-device="WlanRGB2"
data-set="RGB"
data-set-on="#FFFF00"
data-off-color="#FFFF00"
data-icon="fa-paint-brush"
class="bigger">
</div>
<div data-type="label"
class="">Gelb
</div>
</div>
<div class="inline">
<div onclick="$('.dialog-close').trigger('click');"
data-type="push"
data-device="WlanRGB2"
data-set="RGB"
data-set-on="#00FF00"
data-off-color="#00FF00"
data-icon="fa-paint-brush"
class="bigger">
</div>
<div data-type="label"
class="">Gr&uuml;n
</div>
</div>
<div class="inline">
<div onclick="$('.dialog-close').trigger('click');"
data-type="push"
data-device="WlanRGB2"
data-set="RGB"
data-set-on="#00FFFF"
data-off-color="#00FFFF"
data-icon="fa-paint-brush"
class="bigger">
</div>
<div data-type="label"
class="">T&uuml;rkis
</div>
</div>
<div class="inline">
<div onclick="$('.dialog-close').trigger('click');"
data-type="push"
data-device="WlanRGB2"
data-set="RGB"
data-set-on="#0000FF"
data-off-color="#0000FF"
data-icon="fa-paint-brush"
class="bigger">
</div>
<div data-type="label"
class="">Blau
</div>
</div>
<div class="inline">
<div onclick="$('.dialog-close').trigger('click');"
data-type="push"
data-device="WlanRGB2"
data-set="RGB"
data-set-on="#FF00FF"
data-off-color="#FF00FF"
data-icon="fa-paint-brush"
class="bigger">
</div>
<div data-type="label"
class="">Pink
</div>
</div>
<div class="inline">
<div onclick="$('.dialog-close').trigger('click');"
data-type="push"
data-device="WlanRGB2"
data-set="RGB"
data-set-on="FFFFFF"
data-off-color="#FFFFFF"
data-icon="fa-paint-brush"
class="bigger">
</div>
<div data-type="label"
class="">Wei&szlig;
</div>
</div>
</div>
</div>
</div>
</div>

</li>
<li data-row="4" data-col="7" data-sizex="3" data-sizey="3">
<header><font size="+1">Kalender Swen</font></header>

<table class="" width="100%" style="font-size:100%">
       
<tr>
        <th>Datum</th>
    <th>Anfang</th>
    <th>Ende</th>
<th> </th>
  </tr>   

<td>
<br>
            <div data-type="label" data-device="SwenCalView" data-get="t_001_bdate" data-part="(\d\d\.\d\d\.).*"></div>
            </td>
           
<td>
<br>
                <div data-type="label" data-device="SwenCalView" data-get="t_001_btime" data-part="(\d\d\:\d\d).*"></div>
</td>

<td>
<br>
                <div data-type="label" data-device="SwenCalView" data-get="t_001_etime" data-part="(\d\d\:\d\d).*"></div>
</td>

            <td class="r"><br><div data-type="label" data-device="SwenCalView" data-get="t_001_summary" style="text-align:left;"></div></td>
        </tr>
        <tr>
            <td>
            <div data-type="label" data-device="SwenCalView" data-get="t_002_bdate" data-part="(\d\d\.\d\d\.).*"></div>
            </td>
            <td>
                <div data-type="label" data-device="SwenCalView" data-get="t_002_btime" data-part="(\d\d\:\d\d).*"></div>
</td>
<td>
                <div data-type="label" data-device="SwenCalView" data-get="t_002_etime" data-part="(\d\d\:\d\d).*"></div>
            </td>
            <td class="r"><div data-type="label" data-device="SwenCalView" data-get="t_002_summary" style="text-align:left;" ></div></td>
        </tr>
        <tr>
            <td>
            <div data-type="label" data-device="SwenCalView" data-get="t_003_bdate" data-part="(\d\d\.\d\d\.).*"></div>
            </td>
            <td>
                <div data-type="label" data-device="SwenCalView" data-get="t_003_btime" data-part="(\d\d\:\d\d).*"></div>
</td>
<td>
                <div data-type="label" data-device="SwenCalView" data-get="t_003_etime" data-part="(\d\d\:\d\d).*"></div>
            </td>
            <td class="r"><div data-type="label" data-device="SwenCalView" data-get="t_003_summary" style="text-align:left;" ></div></td>
        </tr>       
        <tr>
            <td>
            <div data-type="label" data-device="SwenCalView" data-get="t_004_bdate" data-part="(\d\d\.\d\d\.).*"></div>
            </td>
            <td>
                <div data-type="label" data-device="SwenCalView" data-get="t_004_btime" data-part="(\d\d\:\d\d).*"></div>
</td>
<td>
                <div data-type="label" data-device="SwenCalView" data-get="t_004_etime" data-part="(\d\d\:\d\d).*"></div>
            </td>
            <td class="r"><div data-type="label" data-device="SwenCalView" data-get="t_004_summary" style="text-align:left;" ></div></td>
        </tr>       
        <tr>
            <td>
            <div data-type="label" data-device="SwenCalView" data-get="t_005_bdate" data-part="(\d\d\.\d\d\.).*"></div>
            </td>
            <td>
                <div data-type="label" data-device="SwenCalView" data-get="t_005_btime" data-part="(\d\d\:\d\d).*"></div>
</td>
<td>
                <div data-type="label" data-device="SwenCalView" data-get="t_005_etime" data-part="(\d\d\:\d\d).*"></div>
            </td>
            <td class="r"><div data-type="label" data-device="SwenCalView" data-get="t_005_summary" style="text-align:left;"></div></td>
        </tr>
        <tr>
            <td>
            <div data-type="label" data-device="SwenCalView" data-get="t_006_bdate" data-part="(\d\d\.\d\d\.).*"></div>
            </td>
            <td>
                <div data-type="label" data-device="SwenCalView" data-get="t_006_btime" data-part="(\d\d\:\d\d).*"></div>
</td>
<td>
                <div data-type="label" data-device="SwenCalView" data-get="t_006_etime" data-part="(\d\d\:\d\d).*"></div>
</td>
            <td class="r"><div data-type="label" data-device="SwenCalView" data-get="t_006_summary" style="text-align:left;"></div></td>
        </tr>
        <tr>
            <td>
            <div data-type="label" data-device="SwenCalView" data-get="t_007_bdate" data-part="(\d\d\.\d\d\.).*"></div>
            </td>
            <td>
                <div data-type="label" data-device="SwenCalView" data-get="t_007_btime" data-part="(\d\d\:\d\d).*"></div>
</td>
<td>
                <div data-type="label" data-device="SwenCalView" data-get="t_007_etime" data-part="(\d\d\:\d\d).*"></div>
            </td>
            <td class="r"><div data-type="label" data-device="SwenCalView" data-get="t_007_summary" style="text-align:left;"></div></td>
        </tr>
        <tr>
            <td>
            <div data-type="label" data-device="SwenCalView" data-get="t_008_bdate" data-part="(\d\d\.\d\d\.).*"></div>
            </td>
            <td>
                <div data-type="label" data-device="SwenCalView" data-get="t_008_btime" data-part="(\d\d\:\d\d).*"></div>
</td>
<td>
                <div data-type="label" data-device="SwenCalView" data-get="t_008_etime" data-part="(\d\d\:\d\d).*"></div>
            </td>
            <td class="r"><div data-type="label" data-device="SwenCalView" data-get="t_008_summary" style="text-align:left;"></div></td>
        </tr>       
        <tr>
            <td>
            <div data-type="label" data-device="SwenCalView" data-get="t_009_bdate" data-part="(\d\d\.\d\d\.).*"></div>
            </td>
            <td>
                <div data-type="label" data-device="SwenCalView" data-get="t_009_btime" data-part="(\d\d\:\d\d).*"></div>
</td>
<td>
                <div data-type="label" data-device="SwenCalView" data-get="t_009_etime" data-part="(\d\d\:\d\d).*"></div>
            </td>
            <td class="r"><div data-type="label" data-device="SwenCalView" data-get="t_009_summary" style="text-align:left;"></div></td>
        </tr>       
        <tr>
            <td>
            <div data-type="label" data-device="SwenCalView" data-get="t_010_bdate" data-part="(\d\d\.\d\d\.).*"></div>
            </td>
            <td>
                <div data-type="label" data-device="SwenCalView" data-get="t_010_btime" data-part="(\d\d\:\d\d).*"></div>
</td>
<td>
                <div data-type="label" data-device="SwenCalView" data-get="t_010_etime" data-part="(\d\d\:\d\d).*"></div>
            </td>
            <td class="r"><div data-type="label" data-device="SwenCalView" data-get="t_010_summary" style="text-align:left;"></div></td>
        </tr>
    </table>
</li>
<li data-row="4" data-col="4" data-sizex="3" data-sizey="3">
<header><font size="+1">Kalender Katja</font></header>


             
        <table class="" width="100%" style="font-size:100%">
       
<tr>
        <th>Datum</th>
    <th>Anfang</th>
    <th>Ende</th>
<th> </th>
  </tr>   

<td>
<br>
            <div data-type="label" data-device="KatjaCalView" data-get="t_001_bdate" data-part="(\d\d\.\d\d\.).*"></div>
            </td>
           
<td>
<br>
                <div data-type="label" data-device="KatjaCalView" data-get="t_001_btime" data-part="(\d\d\:\d\d).*"></div>
</td>

<td>
<br>
                <div data-type="label" data-device="KatjaCalView" data-get="t_001_etime" data-part="(\d\d\:\d\d).*"></div>
</td>

            <td class="r"><br><div data-type="label" data-device="KatjaCalView" data-get="t_001_summary" style="text-align:left;"></div></td>
        </tr>
        <tr>
            <td>
            <div data-type="label" data-device="KatjaCalView" data-get="t_002_bdate" data-part="(\d\d\.\d\d\.).*"></div>
            </td>
            <td>
                <div data-type="label" data-device="KatjaCalView" data-get="t_002_btime" data-part="(\d\d\:\d\d).*"></div>
</td>
<td>
                <div data-type="label" data-device="KatjaCalView" data-get="t_002_etime" data-part="(\d\d\:\d\d).*"></div>
            </td>
            <td class="r"><div data-type="label" data-device="KatjaCalView" data-get="t_002_summary" style="text-align:left;" ></div></td>
        </tr>
        <tr>
            <td>
            <div data-type="label" data-device="KatjaCalView" data-get="t_003_bdate" data-part="(\d\d\.\d\d\.).*"></div>
            </td>
            <td>
                <div data-type="label" data-device="KatjaCalView" data-get="t_003_btime" data-part="(\d\d\:\d\d).*"></div>
</td>
<td>
                <div data-type="label" data-device="KatjaCalView" data-get="t_003_etime" data-part="(\d\d\:\d\d).*"></div>
            </td>
            <td class="r"><div data-type="label" data-device="KatjaCalView" data-get="t_003_summary" style="text-align:left;" ></div></td>
        </tr>       
        <tr>
            <td>
            <div data-type="label" data-device="KatjaCalView" data-get="t_004_bdate" data-part="(\d\d\.\d\d\.).*"></div>
            </td>
            <td>
                <div data-type="label" data-device="KatjaCalView" data-get="t_004_btime" data-part="(\d\d\:\d\d).*"></div>
</td>
<td>
                <div data-type="label" data-device="KatjaCalView" data-get="t_004_etime" data-part="(\d\d\:\d\d).*"></div>
            </td>
            <td class="r"><div data-type="label" data-device="KatjaCalView" data-get="t_004_summary" style="text-align:left;" ></div></td>
        </tr>       
        <tr>
            <td>
            <div data-type="label" data-device="KatjaCalView" data-get="t_005_bdate" data-part="(\d\d\.\d\d\.).*"></div>
            </td>
            <td>
                <div data-type="label" data-device="KatjaCalView" data-get="t_005_btime" data-part="(\d\d\:\d\d).*"></div>
</td>
<td>
                <div data-type="label" data-device="KatjaCalView" data-get="t_005_etime" data-part="(\d\d\:\d\d).*"></div>
            </td>
            <td class="r"><div data-type="label" data-device="KatjaCalView" data-get="t_005_summary" style="text-align:left;"></div></td>
        </tr>
        <tr>
            <td>
            <div data-type="label" data-device="KatjaCalView" data-get="t_006_bdate" data-part="(\d\d\.\d\d\.).*"></div>
            </td>
            <td>
                <div data-type="label" data-device="KatjaCalView" data-get="t_006_btime" data-part="(\d\d\:\d\d).*"></div>
</td>
<td>
                <div data-type="label" data-device="KatjaCalView" data-get="t_006_etime" data-part="(\d\d\:\d\d).*"></div>
</td>
            <td class="r"><div data-type="label" data-device="KatjaCalView" data-get="t_006_summary" style="text-align:left;"></div></td>
        </tr>
        <tr>
            <td>
            <div data-type="label" data-device="KatjaCalView" data-get="t_007_bdate" data-part="(\d\d\.\d\d\.).*"></div>
            </td>
            <td>
                <div data-type="label" data-device="KatjaCalView" data-get="t_007_btime" data-part="(\d\d\:\d\d).*"></div>
</td>
<td>
                <div data-type="label" data-device="KatjaCalView" data-get="t_007_etime" data-part="(\d\d\:\d\d).*"></div>
            </td>
            <td class="r"><div data-type="label" data-device="KatjaCalView" data-get="t_007_summary" style="text-align:left;"></div></td>
        </tr>
        <tr>
            <td>
            <div data-type="label" data-device="KatjaCalView" data-get="t_008_bdate" data-part="(\d\d\.\d\d\.).*"></div>
            </td>
            <td>
                <div data-type="label" data-device="KatjaCalView" data-get="t_008_btime" data-part="(\d\d\:\d\d).*"></div>
</td>
<td>
                <div data-type="label" data-device="KatjaCalView" data-get="t_008_etime" data-part="(\d\d\:\d\d).*"></div>
            </td>
            <td class="r"><div data-type="label" data-device="KatjaCalView" data-get="t_008_summary" style="text-align:left;"></div></td>
        </tr>       
        <tr>
            <td>
            <div data-type="label" data-device="KatjaCalView" data-get="t_009_bdate" data-part="(\d\d\.\d\d\.).*"></div>
            </td>
            <td>
                <div data-type="label" data-device="KatjaCalView" data-get="t_009_btime" data-part="(\d\d\:\d\d).*"></div>
</td>
<td>
                <div data-type="label" data-device="KatjaCalView" data-get="t_009_etime" data-part="(\d\d\:\d\d).*"></div>
            </td>
            <td class="r"><div data-type="label" data-device="KatjaCalView" data-get="t_009_summary" style="text-align:left;"></div></td>
        </tr>       
        <tr>
            <td>
            <div data-type="label" data-device="KatjaCalView" data-get="t_010_bdate" data-part="(\d\d\.\d\d\.).*"></div>
            </td>
            <td>
                <div data-type="label" data-device="KatjaCalView" data-get="t_010_btime" data-part="(\d\d\:\d\d).*"></div>
</td>
<td>
                <div data-type="label" data-device="KatjaCalView" data-get="t_010_etime" data-part="(\d\d\:\d\d).*"></div>
            </td>
            <td class="r"><div data-type="label" data-device="KatjaCalView" data-get="t_010_summary" style="text-align:left;"></div></td>
        </tr>
    </table>
</div>
</div>

<div data-type="label" class="narrow">Kalender<br>Katja</div>
<br>
</li>

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

Snake1980

#3
25 März 2016, 13:02:39
Heizung:

Code Auswählen
<!DOCTYPE html>
<html>
<head>
<title>Licht</title>
</head>

<body>

<div class="gridster">
    <ul>
        <!-- ========= Linkes-Hauptmenü =========== -->
        <!-- ====================================== -->
<li data-row="1" data-col="1" data-sizex="1" data-sizey="6" data-template="menu.html"></li>
<!-- ========= Rechtes-Hauptmenü ========== -->
        <!-- ====================================== -->
        <li data-row="1" data-col="10" data-sizex="1" data-sizey="6" data-template="info_menu.html"></li>
<!-- ========= Mitte ====================== -->
        <!-- ====================================== -->
        <li data-row="1" data-col="2" data-sizex="8" data-sizey="1">
            <header><font size="+1">Wohnzimmer</font></header>

             
<div class="inline">
                        <div    data-type="symbol"
                                 data-device="MAX_FK_ST"
                                 data-get-on="opened.*"
                                 data-get-off="closed.*"
                                 data-off-color="#3D4C66"
                                 data-on-color="firebrick"
                                 data-background-icon="fa-circle-thin"
                                 data-off-background-color="#3D4C66"
                                 class="big">
                        </div>
                           <div class="">Schiebetür</div>
                </div>
<div class="inline">
                        <div    data-type="symbol"
                                 data-device="MAX_FK_EZ"
                                 data-get-on="opened.*"
                                 data-get-off="closed.*"
                                 data-off-color="#3D4C66"
                                 data-on-color="firebrick"
                                 data-background-icon="fa-circle-thin"
                                 data-off-background-color="#3D4C66"
                                 class="big">
                        </div>
                           <div class="">Fenster-Tresen</div>
                </div>
<div class="inline">
                        <div    data-type="symbol"
                                 data-device="MAX_FK_KU"
                                 data-get-on="opened.*"
                                 data-get-off="closed.*"
                                 data-off-color="#3D4C66"
                                 data-on-color="firebrick"
                                 data-background-icon="fa-circle-thin"
                                 data-off-background-color="#3D4C66"
                                 class="big">
                        </div>
                           <div class="">Fenster-Küche</div>
                </div>


                <div class="inline">
                        <div data-type="switch"
                                 data-device="MAX_WT_WZ"
                                 data-get="mode"
                                 data-get-on="auto"
                                 data-get-off="^(?!auto).*$"
                                 data-set="desiredTemperature"
                                 data-set-on="auto"
                                 data-set-off="auto"
                                 data-icon="fa-calendar"
                                 data-background-icon="fa-circle-thin"
                                 data-on-color="cornflowerblue"
                                 data-off-color="#808080"
                                 data-on-background-color="#aa6900"
                                 data-off-background-color="#3D4C66"
                                 class="big">
                        </div>
<div class="">Auto
</div>
                </div>
<div class="inline">
                        <div data-type="switch"
                                 data-device="MAX_WT_WZ"
                                 data-get="desiredTemperature"
                                 data-get-on="21.0"
                                 data-get-off="^(?!21.0).*$"
                                 data-set="desiredTemperature"
                                 data-set-on="comfort"
                                 data-set-off=""
                                 data-icon="fa-sun-o"
                                 data-background-icon="fa-circle-thin"
                                 data-on-color="green"
                                 data-off-color="#808080"
                                 data-on-background-color="#aa6900"
                                 data-off-background-color="#3D4C66"
                                 class="big">
                        </div>
                        <div data-type="label"
                                 class="">21&deg;C
                        </div>

                </div>
                <div class="inline">
                            <div     data-type="spinner"
                                  data-device="MAX_WT_WZ"
                                 data-get="desiredTemperature"
                                 data-set="desiredTemperature"
                                 data-icon-left-color="blue"
                                 data-icon-right-color="red"
                                 data-min="4.5"
                                 data-max="25.0"
                                 data-step="0.5"
                                 data-width="190"
                                 data-height="60"
                                 data-unit="&deg;"
                                 data-longdelay="2500"
                                 data-background-color="rgba(61,76,102,0.5"
                                  class="valueonly"
                                 style="margin-bottom:6px;">
</div>
<div class="">Soll-Temperatur
</div>
                </div>

<div class="inline">
<div     data-type="label"
data-device="MAX_WT_WZ"
data-get="temperature"
data-unit="%B0C%0A"
data-limits='[10,18,22]'
data-colors='["cornflowerblue","green","firebrick"]'
class="big">
</div>
<div data-type="symbol"
data-device="MAX_WT_WZ"
data-get="battery"
data-states='["ok","low"]'
data-icons='["fa-battery-4","fa-battery-1 fa-blink"]'
data-colors='["green","firebrick"]'
class="small">
</div>
<br> 
<div class="">Ist-Temperatur
</div>
</div>
<div class="inline">
<div     data-type="label"
data-device="MAX_HT_WZ1"
data-get="valveposition"
data-unit="%"
data-limits='[0,33,66]'
data-colors='["cornflowerblue","green","firebrick"]'
class="big">
</div>
<div data-type="symbol"
data-device="MAX_HT_WZ1"
data-get="battery"
data-states='["ok","low"]'
data-icons='["fa-battery-4","fa-battery-1 fa-blink"]'
data-colors='["green","firebrick"]'
class="small">
</div>
<br> 
<div class="">Ventil1
</div>
</div>
<div class="inline">
<div     data-type="label"
data-device="MAX_HT_WZ2"
data-get="valveposition"
data-unit="%"
data-limits='[0,33,66]'
data-colors='["cornflowerblue","green","firebrick"]'
class="big">
</div>
<div data-type="symbol"
data-device="MAX_HT_WZ2"
data-get="battery"
data-states='["ok","low"]'
data-icons='["fa-battery-4","fa-battery-1 fa-blink"]'
data-colors='["green","firebrick"]'
class="small">
</div>
<br> 
<div class="">Ventil2
</div>
</div>
<div class="inline">
<div     data-type="label"
data-device="MAX_HT_WZ3"
data-get="valveposition"
data-unit="%"
data-limits='[0,33,66]'
data-colors='["cornflowerblue","green","firebrick"]'
class="big">
</div>
<div data-type="symbol"
data-device="MAX_HT_WZ3"
data-get="battery"
data-states='["ok","low"]'
data-icons='["fa-battery-4","fa-battery-1 fa-blink"]'
data-colors='["green","firebrick"]'
class="small">
</div>
<br> 
<div class="">Ventil3
</div>

</div>
<div class="inline">
<div     data-type="label"
data-device="MAX_HT_WZ4"
data-get="valveposition"
data-unit="%"
data-limits='[0,33,66]'
data-colors='["cornflowerblue","green","firebrick"]'
class="big">
</div>
<div data-type="symbol"
data-device="MAX_HT_WZ4"
data-get="battery"
data-states='["ok","low"]'
data-icons='["fa-battery-4","fa-battery-1 fa-blink"]'
data-colors='["green","firebrick"]'
class="small">
</div>
<br> 
<div class="">Ventil4
</div>

</div>
<div class="inline">
<div     data-type="label"
data-device="MAX_HT_WZ5"
data-get="valveposition"
data-unit="%"
data-limits='[0,33,66]'
data-colors='["cornflowerblue","green","firebrick"]'
class="big">
</div>
<div data-type="symbol"
data-device="MAX_HT_WZ5"
data-get="battery"
data-states='["ok","low"]'
data-icons='["fa-battery-4","fa-battery-1 fa-blink"]'
data-colors='["green","firebrick"]'
class="small">
</div>
<br> 
<div class="">Ventil5
</div>

</div>

               

<li data-row="2" data-col="2" data-sizex="8" data-sizey="1">
<header><font size="+1">Schlafzimmer</font></header>
                    <div class="inline">
                        <div     data-type="symbol"
                                 data-device="MAX_FK_SZ"
                                 data-get-on="opened.*"
                                 data-get-off="closed.*"
                                 data-off-color="#3D4C66"
                                 data-on-color="firebrick"
                                 data-background-icon="fa-circle-thin"
                                 data-off-background-color="#3D4C66"
                                 class="big">
                        </div>
                        <div class="">Fenster
                        </div>
                </div>


                <div class="inline">
                        <div data-type="switch"
                                 data-device="MAX_WT_SZ"
                                 data-get="mode"
                                 data-get-on="auto"
                                 data-get-off="^(?!auto).*$"
                                 data-set="desiredTemperature"
                                 data-set-on="auto"
                                 data-set-off="auto"
                                 data-icon="fa-calendar"
                                 data-background-icon="fa-circle-thin"
                                 data-on-color="cornflowerblue"
                                 data-off-color="#808080"
                                 data-on-background-color="#aa6900"
                                 data-off-background-color="#3D4C66"
                                 class="big">
                        </div>
                        <div class="">Auto
                        </div>
                </div>
<div class="inline">
                        <div data-type="switch"
                                 data-device="MAX_WT_SZ"
                                 data-get="desiredTemperature"
                                 data-get-on="21.0"
                                 data-get-off="^(?!21.0).*$"
                                 data-set="desiredTemperature"
                                 data-set-on="comfort"
                                 data-set-off=""
                                 data-icon="fa-sun-o"
                                 data-background-icon="fa-circle-thin"
                                 data-on-color="green"
                                 data-off-color="#808080"
                                 data-on-background-color="#aa6900"
                                 data-off-background-color="#3D4C66"
                                 class="big">
                        </div>
                        <div data-type="label"
                                 class="">21&deg;C
                        </div>

                </div>
                <div class="inline">
                            <div     data-type="spinner"
                                  data-device="MAX_WT_SZ"
                                 data-get="desiredTemperature"
                                 data-set="desiredTemperature"
                                  data-icon-left-color="blue"
                                  data-icon-right-color="red"
                                  data-min="4.5"
                                  data-max="25.0"
                                 data-step="0.5"
                                 data-width="190"
                                 data-height="60"
                                 data-unit="&deg;"
                                 data-longdelay="2500"
                                 data-background-color="rgba(61,76,102,0.5"
                                  class="valueonly"
                                 style="margin-bottom:6px;">
                      </div>
                        <div class="">Soll-Temperatur
                        </div>
                </div>
                <div class="inline">
<div     data-type="label"
data-device="MAX_WT_SZ"
data-get="temperature"
data-unit="%B0C%0A"
data-limits='[10,18,22]'
data-colors='["cornflowerblue","green","firebrick"]'
class="big">
</div>
<div data-type="symbol"
data-device="MAX_WT_SZ"
data-get="battery"
data-states='["ok","low"]'
data-icons='["fa-battery-4","fa-battery-1 fa-blink"]'
data-colors='["green","firebrick"]'
class="small">
</div>
<br> 
<div class="">Ist-Temperatur
</div>
</div>
<div class="inline">
<div     data-type="label"
data-device="MAX_HT_SZ"
data-get="valveposition"
data-unit="%"
data-limits='[0,33,66]'
data-colors='["cornflowerblue","green","firebrick"]'
class="big">
</div>
<div data-type="symbol"
data-device="MAX_HT_SZ"
data-get="battery"
data-states='["ok","low"]'
data-icons='["fa-battery-4","fa-battery-1 fa-blink"]'
data-colors='["green","firebrick"]'
class="small">
</div>
<br> 
<div class="">Ventil
</div>
</div>
           


  <li data-row="3" data-col="2" data-sizex="8" data-sizey="1">
            <header><font size="+1">Bad</font></header>
                       <div class="inline">
                         <div    data-type="symbol"
                                 data-device="MAX_FK_BA"
                                 data-get-on="opened.*"
                                 data-get-off="closed.*"
                                 data-off-color="#3D4C66"
                                 data-on-color="firebrick"
                                 data-background-icon="fa-circle-thin"
                                 data-off-background-color="#3D4C66"
                                 class="big">
                         </div>
                           <div class="">Fenster</div>
                       </div>


                <div class="inline">
                        <div data-type="switch"
                                 data-device="MAX_WT_BA"
                                 data-get="mode"
                                 data-get-on="auto"
                                 data-get-off="^(?!auto).*$"
                                 data-set="desiredTemperature"
                                 data-set-on="auto"
                                 data-set-off="auto"
                                 data-icon="fa-calendar"
                                 data-background-icon="fa-circle-thin"
                                 data-on-color="cornflowerblue"
                                 data-off-color="#808080"
                                 data-on-background-color="#aa6900"
                                 data-off-background-color="#3D4C66"
                                 class="big">
                        </div>
                        <div class="">Auto
                        </div>
                </div>
<div class="inline">
                        <div data-type="switch"
                                 data-device="MAX_WT_BA"
                                 data-get="desiredTemperature"
                                 data-get-on="21.0"
                                 data-get-off="^(?!21.0).*$"
                                 data-set="desiredTemperature"
                                 data-set-on="comfort"
                                 data-set-off=""
                                 data-icon="fa-sun-o"
                                 data-background-icon="fa-circle-thin"
                                 data-on-color="green"
                                 data-off-color="#808080"
                                 data-on-background-color="#aa6900"
                                 data-off-background-color="#3D4C66"
                                 class="big">
                        </div>
                        <div data-type="label"
                                 class="">21&deg;C
                        </div>

                </div>
                <div class="inline">
                            <div     data-type="spinner"
                                  data-device="MAX_WT_BA"
                                 data-get="desiredTemperature"
                                 data-set="desiredTemperature"
                                  data-icon-left-color="blue"
                                  data-icon-right-color="red"
                                  data-min="4.5"
                                  data-max="25.0"
                                 data-step="0.5"
                                 data-width="190"
                                 data-height="60"
                                 data-unit="&deg;"
                                 data-longdelay="2500"
                                 data-background-color="rgba(61,76,102,0.5"
                                  class="valueonly"
                                 style="margin-bottom:6px;">
                      </div>
                        <div class="">Soll-Temperatur
                        </div>
                </div>
                <div class="inline">
<div     data-type="label"
data-device="MAX_WT_BA"
data-get="temperature"
data-unit="%B0C%0A"
data-limits='[10,18,22]'
data-colors='["cornflowerblue","green","firebrick"]'
class="big">
</div>
<div data-type="symbol"
data-device="MAX_WT_BA"
data-get="battery"
data-states='["ok","low"]'
data-icons='["fa-battery-4","fa-battery-1 fa-blink"]'
data-colors='["green","firebrick"]'
class="small">
</div>
<br> 
<div class="">Ist-Temperatur
</div>
</div>
<div class="inline">
<div     data-type="label"
data-device="MAX_HT_BA"
data-get="valveposition"
data-unit="%"
data-limits='[0,33,66]'
data-colors='["cornflowerblue","green","firebrick"]'
class="big">
</div>
<div data-type="symbol"
data-device="MAX_HT_BA"
data-get="battery"
data-states='["ok","low"]'
data-icons='["fa-battery-4","fa-battery-1 fa-blink"]'
data-colors='["green","firebrick"]'
class="small">
</div>
<br> 
<div class="">Ventil
</div>
</div>


<li data-row="4" data-col="2" data-sizex="8" data-sizey="1">
            <header><font size="+1">Kinderzimmer</font></header>
                    <div class="inline">
                        <div     data-type="symbol"
                                 data-device="MAX_FK_KI"
                                 data-get-on="opened.*"
                                 data-get-off="closed.*"
                                 data-off-color="#3D4C66"
                                 data-on-color="firebrick"
                                 data-background-icon="fa-circle-thin"
                                 data-off-background-color="#3D4C66"
                                 class="big">
                        </div>
                        <div class="">Fenster
                        </div>
                </div>


                <div class="inline">
                        <div data-type="switch"
                                 data-device="MAX_WT_KI"
                                 data-get="mode"
                                 data-get-on="auto"
                                 data-get-off="^(?!auto).*$"
                                 data-set="desiredTemperature"
                                 data-set-on="auto"
                                 data-set-off="auto"
                                 data-icon="fa-calendar"
                                 data-background-icon="fa-circle-thin"
                                 data-on-color="cornflowerblue"
                                 data-off-color="#808080"
                                 data-on-background-color="#aa6900"
                                 data-off-background-color="#3D4C66"
                                 class="big">
                        </div>
                        <div class="">Auto
                        </div>
                </div>
<div class="inline">
                        <div data-type="switch"
                                 data-device="MAX_WT_KI"
                                 data-get="desiredTemperature"
                                 data-get-on="21.0"
                                 data-get-off="^(?!21.0).*$"
                                 data-set="desiredTemperature"
                                 data-set-on="comfort"
                                 data-set-off=""
                                 data-icon="fa-sun-o"
                                 data-background-icon="fa-circle-thin"
                                 data-on-color="green"
                                 data-off-color="#808080"
                                 data-on-background-color="#aa6900"
                                 data-off-background-color="#3D4C66"
                                 class="big">
                        </div>
                        <div data-type="label"
                                 class="">21&deg;C
                        </div>

                </div>
                <div class="inline">
                            <div     data-type="spinner"
                                  data-device="MAX_WT_KI"
                                 data-get="desiredTemperature"
                                 data-set="desiredTemperature"
                                  data-icon-left-color="blue"
                                  data-icon-right-color="red"
                                  data-min="4.5"
                                  data-max="25.0"
                                 data-step="0.5"
                                 data-width="190"
                                 data-height="60"
                                 data-unit="&deg;"
                                 data-longdelay="2500"
                                 data-background-color="rgba(61,76,102,0.5"
                                  class="valueonly"
                                 style="margin-bottom:6px;">
                      </div>
                        <div class="">Soll-Temperatur
                        </div>
                </div>
<div class="inline">
<div     data-type="label"
data-device="MAX_WT_KI"
data-get="temperature"
data-unit="%B0C%0A"
data-limits='[10,18,22]'
data-colors='["cornflowerblue","green","firebrick"]'
class="big">
</div>
<div data-type="symbol"
data-device="MAX_WT_KI"
data-get="battery"
data-states='["ok","low"]'
data-icons='["fa-battery-4","fa-battery-1 fa-blink"]'
data-colors='["green","firebrick"]'
class="small">
</div>
<br> 
<div class="">Ist-Temperatur
</div>
</div>
<div class="inline">
<div     data-type="label"
data-device="MAX_HT_KI"
data-get="valveposition"
data-unit="%"
data-limits='[0,33,66]'
data-colors='["cornflowerblue","green","firebrick"]'
class="big">
</div>
<div data-type="symbol"
data-device="MAX_HT_KI"
data-get="battery"
data-states='["ok","low"]'
data-icons='["fa-battery-4","fa-battery-1 fa-blink"]'
data-colors='["green","firebrick"]'
class="small">
</div>
<br> 
<div class="">Ventil
</div>
</div>
               
           
  <li data-row="5" data-col="2" data-sizex="8" data-sizey="1">
            <header><font size="+1">Gästezimmer</font></header>
                       <div class="inline">
                         <div    data-type="symbol"
                                 data-device="MAX_FK_GZ"
                                 data-get-on="opened.*"
                                 data-get-off="closed.*"
                                 data-off-color="#3D4C66"
                                 data-on-color="firebrick"
                                 data-background-icon="fa-circle-thin"
                                 data-off-background-color="#3D4C66"
                                 class="big">
                         </div>
                           <div class="">Fenster</div>
                       </div>


                <div class="inline">
                        <div data-type="switch"
                                 data-device="MAX_WT_GZ"
                                 data-get="mode"
                                 data-get-on="auto"
                                 data-get-off="^(?!auto).*$"
                                 data-set="desiredTemperature"
                                 data-set-on="auto"
                                 data-set-off="auto"
                                 data-icon="fa-calendar"
                                 data-background-icon="fa-circle-thin"
                                 data-on-color="cornflowerblue"
                                 data-off-color="#808080"
                                 data-on-background-color="#aa6900"
                                 data-off-background-color="#3D4C66"
                                 class="big">
                        </div>
                        <div class="">Auto
                        </div>
                ...hier fehlt der Rest wg. maximale Zeichen...

                             

Snake1980

#4
25 März 2016, 13:04:12
Menü:

Code Auswählen
<!DOCTYPE html>
<html>
<head>
<title>Menu</title>
</head>
<body>

 
   
<!-- Start Menu  class="top-space" -->
<header><font size="+1">Menu</font></header>
    <div class="cell">

<!-- Erster Button CF90-Home -->
        <div data-type="pagetab" data-url="licht.html"
             data-icon="fa-fort-awesome"
             data-on-background-color="#CC7A00"
             class="bigger"></div>

<div data-type="label" class="narrow">CF90-Home</div>

<br>
<br>

<!-- Zweiter Button Heizung -->
<div data-type="pagetab" data-url="heating.html" data-icon="fa-fire"
             data-on-background-color="#CC7A00"
             class="bigger"></div>     
        <div data-type="label" class="narrow">Heizung</div>

<br>
<br>

<!-- Dritter Button Wetter -->
        <div data-type="pagetab" data-url="wetter.html" data-icon="fa-cloud"
             data-on-background-color="#CC7A00"
             class="bigger"></div>     
        <div data-type="label" class="narrow">Wetter</div>   

<br>
<br>


<!-- Vierter Button Temps -->
<div data-type="pagetab" data-url="info2.html"
data-icon="fa-line-chart"
data-on-background-color="#CC7A00"
class="bigger"></div>

<div data-type="label" class="narrow">Temperaturen</div>

<br>


<br><br>



<br>
<br>




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

tobi73

#5
27 März 2016, 13:02:58
Hallo Swen,

hab mir Dein Video zwar nicht vollständig angesehen - aber was die Geschwindigkeit angeht, halte ich es nicht für allzu langsam. Diese Einschätzung ist natürlich abhängig von der verwendeten HW.
Das Problem, dass einige Widgets sporadisch nicht geladen werden, wurde hier schon mal diskutiert:

https://forum.fhem.de/index.php/topic,48057.0.html

Grundsätzlich sind dort zwei "Workarounds" benannt:

  • Bereitstellung der Seiten über einen Apache Server
  • Nutzung von Pagetab / Templates einschränken bzw. vermeiden

Ich bin zweiten Weg gegangen und habe seitdem keine Probleme mehr. Die HTML Seiten sind nun halt entsprechend unübersichtlich - aber dafür läuft alles relativ zügig.  Da Du auch Pagetabs nutzt, wäre das evtl. mal ein Versuch. Interessant wäre zu wissen, ob du von allen Endgeräten / Browsern das Problem beobachtest. Und welche HW benutzt du als Server? Damit wäre das Problem vielleicht etwas besser eingrenzbar.

Gruß Tobi

setstate

#6
27 März 2016, 13:54:52
Ich bin gerade dabei zu testen, ob ein vorab Laden aller Unterseiten in den Speicher eine Option ist. Dann ist nur der erste Start etwas länger, aber jedes Umschalten passiert dann in Echzeit. Läuft schon so bei mir, muss nur noch den Feinschliff machen und testen ob nix negatives dabei Auftritt. -> Version 2.1
Aber erst einmal genieße ich die Sonne draußen :-)

Snake1980

#7
29 März 2016, 08:17:46
Hallo,

danke schon mal für die Antworten.
Als Hardware läuft bei mir ein AMD-E350, auf dem auch mein NAS (openmediavault) läuft, welches aber nicht viel zu tun hat.

Die Bereitstellung über Apache klingt interessant, allerdings weiß ich nicht, ob ich mich da ran traue.

Das Umschalten der Seiten ist gar nicht mein hauptsächliches Problem - die 3-5 Sekunden kann ich verkraften. Die Heizungsseite braucht allerdings ewig bis die Readings fertig sind. Das macht sich auch bemerkbar, wenn ich z.B. die Temperatur mit dem Spinner auf 21 Grad stelle. Bis dann das Symbol daneben das 21-Grad-Reading annimmt vergehen auch locker 5 Sekunden. In der Zeit kann man nichts anderes bedienen, bzw jede andere Eingabe wird nicht richtig umgesetzt. Die Bedienung der FS20 Steckdosen für die Stehlampen und das Aquarium läuft dagegen verzögerungsfrei.
Hin und wieder lädt wie geschrieben das Menü nicht richtig (Symbole fehlen - Text ist da), oder es lädt nur das Menü und alles ab COL2 ist schwarz. Das ist natürlich Gift für den WAF  ;)

Vielleicht muss ich tatsächlich mal das pagetab rauswerfen...?!?  :-\

Gruß Swen

olindner

#8
29 März 2016, 10:14:35
Hi Swen, meine Heizungsregler (Homematic) sind auch etwas träge. Aber das liegt nach meiner Meinung nicht am TabletUI! Nach Einstellen einer Temperatur dauert es in der Regel ein paar Sekunden, bis die Werte an das Device gesendet werden (pending) und danach wird auch das Reading korrekt aktualisiert. Schaue mal zeitgleich in das Device, wenn du über TabletUI einen Wert einstellst. Gruß Olaf
Drucken
Nach oben Seiten1
Benutzer-Aktionen