New FHEM Tablet UI

[Haecksler]

Von Anfang an alles laden und im Hintergrund aktualisieren lassen. Sehr gute Idee... muss ich mich die Tge nochmal mit befassen^^ Nett!

Das ist mal eine klare Erklärung. Habe es danach aufgebaut und siehe daaa... alles schick. bis auf das eine klitzekleine Problemchen dass er ab und an die icons nicht oder nur teilweise lädt. Habe schon alles auf Fehler (Anführungszeichen, <div>, ', und und und) gecheckt... Alles hat seine Ordnung. Der Fehler tritt auch nur sporadisch auf.

Da hatte ich auch Probleme mit, bei mir hat es geholfen den debug Modus zu deaktivieren. Keine Ahnung wieso.

Code Auswählen Erweitern

<meta name="debug" content="0"> <!-- 1=output to console;0=not output -->

Gruß,
Stefan

[roman1528]

Da hatte ich auch Probleme mit, bei mir hat es geholfen den debug Modus zu deaktivieren. Keine Ahnung wieso.

Code Auswählen Erweitern

<meta name="debug" content="0"> <!-- 1=output to console;0=not output -->

Der Debug-Modus ist aus. Schon immer xD

@setstate : Muss in die weiteren index_*.html auch wieder der ganze header oder im Grunde nur die Widgets? Also die ganzen .js/.css wieder mit rein oder kommt es dann eventuell zu einer "Überladung" der js? Gerade wegen JQuery... Das mehrmals zu laden is ja fatal... Auf gut deutsch: werden die weiteren Seiten über die index.html (MAIN-Site) eingebunden oder komplett neu geladen?

EDIT
Hab gerade das Update geladen... Alles zerstöööört 
Hast du in der fhem-tablet-ui.css irgendwas an den big und bigger classes geändert?

EDIT 2
Jetzt hab ich wieder gefunden warum ich von pagetab weg bin ... wenn ein pagetab "button" "on"(also aktiv, weil reading ist true) ist weil man ihn für "warn" oder "warn activate" verwendet kann man ihn nicht mehr anklicken... weil er ja im Grunde "on" ist. Das hat erstmal prorität denke ich.

[setstate]

Muss in die weiteren index_*.html auch wieder der ganze header ... ?

-> nein, scripts und CSS links sind nur in der index.html. Von den Unterseiten wird dann nur der Body dazu nachgeladen.

EDIT
Hab gerade das Update geladen... Alles zerstöööört 
Hast du in der fhem-tablet-ui.css irgendwas an den big und bigger classes geändert?

ja, habe ich. Schaue ich mir nochmal an ...

EDIT 2
Jetzt hab ich wieder gefunden warum ich von pagetab weg bin ... wenn ein pagetab "button" "on"(also aktiv, weil reading ist true) ist weil man ihn für "warn" oder "warn activate" verwendet kann man ihn nicht mehr anklicken... weil er ja im Grunde "on" ist. Das hat erstmal prorität denke ich.

Würde ich mir auch ansehen, ob man das verbessern kann.

[dadoc]

Hi,
ich nutze "Slider" u.a. als Füllstandsanzeige eines Behälters. Der Slider ist ganz normal definiert:

Code Auswählen Erweitern

<div data-type="slider" data-device="Pool" data-get="pH-_Rest" data-part="1" data-value="true" class="readonly big"></div>
Ich würde aus optischen Gründen gern die Linie des Sliders verbreitern, damit er mehr nach Behälter ausieht, konnte aber nicht herausfinden, ob bzw. wie das geht. Müsste man das global im CSS hinterlegen (was aber dann auf alle Slider Auswirkungen hätte) oder gibt es einen anderen Weg?
Danke & Grüße
Martin

[roman1528]

Hi,
ich nutze "Slider" u.a. als Füllstandsanzeige eines Behälters. Der Slider ist ganz normal definiert:

Code Auswählen Erweitern

<div data-type="slider" data-device="Pool" data-get="pH-_Rest" data-part="1" data-value="true" class="readonly big"></div>
Ich würde aus optischen Gründen gern die Linie des Sliders verbreitern, damit er mehr nach Behälter ausieht, konnte aber nicht herausfinden, ob bzw. wie das geht. Müsste man das global im CSS hinterlegen (was aber dann auf alle Slider Auswirkungen hätte) oder gibt es einen anderen Weg?
Danke & Grüße
Martin

Für einen Füllstand würde ich das Level Widget nehmen. Wenn du dafür sonst keine Verwendung hast kannst du das bearbeiten Blödsinn weil das auch mit der powerange.js/css zusammenhängt. dann ist dein slider auch im Eimer.

Spiel mal mit style="put-css-code-here" herum ....
Das hilft dir bei CSS: https://wiki.selfhtml.org/wiki/CSS/Eigenschaften

[setstate]

Hi,
ich nutze "Slider" u.a. als Füllstandsanzeige eines Behälters. Der Slider ist ganz normal definiert:

Code Auswählen Erweitern

<div data-type="slider" data-device="Pool" data-get="pH-_Rest" data-part="1" data-value="true" class="readonly big"></div>
Ich würde aus optischen Gründen gern die Linie des Sliders verbreitern, damit er mehr nach Behälter ausieht, konnte aber nicht herausfinden, ob bzw. wie das geht. Müsste man das global im CSS hinterlegen (was aber dann auf alle Slider Auswirkungen hätte) oder gibt es einen anderen Weg?
Danke & Grüße
Martin

Du müsstest in deine fhem-tablet-ui-user.css folgendes aufnehmen

Code Auswählen Erweitern


.big > .vertical .range-bar {
    width: 14px;
}

für dieses Level Widget

Code Auswählen Erweitern

<li data-row="4" data-col="1" data-sizex="2" data-sizey="3">
  <header>EXAMPLE1</header>
  <div data-type="level" data-device='dummy1' class="big"></div>
</li>

Aber ich würde das auch in die Standard CSS aufnehmen, wenn es für euch passt.

[Tedious]

Hallo, kurze Frage: ich plage mich grade damit ab eine Audio-Notification auf einem IPad auszugeben falls ein bestimmtes Event passiert (z.B. Kühlschrank ausgefallen, etc...). Ein "paar Posts" früher wurde mal eine Warnbox ausserhab Gridsters aufgeführt:

Zitat von: selfarian am 02 April 2015, 13:41:51

    Wäre es vielleicht möglich, eine Art Meldung oder so einzubauen die irgendwie getriggert wird?
    Also das z.B. bei einem Alarm eine Rote Meldung im Vordergrund eingeblendet wird o.ä.?


Sowas?

Code: [Auswählen]

<div data-type="symbol"
    data-device="ALARM"
    data-get="active"
    data-get-on="on"
    data-get-off="off"
    data-icon="fa-exclamation-triangle"
    data-background-icon="fa-circle"
    data-on-color="#ffffff"
    data-on-background-color="#ff0000"
    data-off-color="rgba(0,0,0,0)"
    data-off-background-color="rgba(0,0,0,0)"
    style="font-size:250px;top:20px;left:150px;position:absolute;z-index:9999;pointer-events:none;"></div>


Muss allerdings ausserhalb(!) des <div class="gridster"> notiert werden.
« Letzte Änderung: 02 April 2015, 14:32:45 von nesges »

Frage an die HTML-Profis - es gibt ja das HTML5 <audio> Tag - ließe sich das hier einbauen? Oder liefert das immer einen "Player", der erst angeklickt werden muss? Muss gestehen meine HTML-Kentnisse sind eher als basal zu bezeichnen, aber kann ich beim eintreten eines Events einfach ein MP3 abspielen lassen? Wenn ja würde das meine Probleme sehr einfach lösen...?!

[dadoc]

Super - funktioniert auch mit Slider, was den Vorteil hat, dass man einfacher die Höhe beeinflussen kann. Das sieht jetzt fast so aus wie der tatscähcliche Kanister
Da ich die Breite auf 60 px gestellt habe, werde ich wohl das Offset noch etwas anpassen müssen, auch wenn das meine anderen Slider ebenfalls betreffen wird. Oder ich machen den Wert eben mit label darunte.
Viele Dank!

[Izmir Schlecht]

Hallo zusammen,

habe nach einem update vor ca. 3 Wochen das gleiche Problem wie Gunther (Antwort #2837 am: 07 November 2015, 17:14:22). Mein Müll-Alarm funktioniert nicht mehr so wie vorher. Mache ich was falsch oder habe ich eine Änderung übersehen?

Hier noch einmal meine index.html, die ich auf das Problem reduziert habe.

Code Auswählen Erweitern


<!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.0, maximum-scale=1.0, user-scalable=no">
        <meta name="widget_base_width" content="170">
        <meta name="widget_base_height" content="140">
        <!-- <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">
        <link rel="stylesheet" href="/fhem/tablet/lib/openautomation.css">
       
       
        <script type="text/javascript" src="/fhem/pgm2/jquery.min.js"></script>
        <script type="text/javascript" src="/fhem/tablet/lib/jquery.knob.mod.min.js"></script>
        <script type="text/javascript" src="/fhem/tablet/lib/jquery.toast.min.js"></script>
        <script type="text/javascript" src="/fhem/tablet/lib/jquery.circlemenu.js"></script>
        <script type="text/javascript" src="/fhem/tablet/lib/powerange.min.js"></script>
        <script type="text/javascript" src="/fhem/tablet/lib/jquery.gridster.min.js"></script>
        <script type="text/javascript" src="/fhem/tablet/lib/fa-multi-button.min.js"></script>
        <script type="text/javascript" src="/fhem/tablet/js/fhem-tablet-ui.js"></script>
       
        <!-- Enable this lines for usage with WebViewControl --><!--
        <script type="text/javascript" src="/fhem/pgm2/cordova-2.3.0.js"></script>
        <script type="text/javascript" src="/fhem/js/webviewcontrol.js"></script>
        <script type="text/javascript">var wvcDevices = {'12345': 'Tablet'}; var wvcUserCssFile="webviewcontrol.css"</script> -->
        <!-- End for WebViewControl -->
   
    </head>
   
    <body>
   
        <!-- available class: container,left,right,cell,narrow,darker,big,bigger,small,thin,large,wider -->
        <!-- available data-type: symbol,dimmer,homestatus,label,push,slider,switch,thermostat,volume,weather -->
           
        <div class="gridster">
            <ul>
                <li
                    data-row="1"
                    data-col="1"
                    data-sizex="1"
                    data-sizey="1"
                >
                    <header>Müll</header>
                    <div
                        style="font-size:30px; color:rgb(96, 0, 0);"
                        data-type="button"
                        data-device="MuellAlarm"
                        data-color="#aa6900"
                        data-get-on='["on","off"]'
                        data-url="index_Muell.html"
                        data-icons='["fa-trash warn blink","fa-trash"]'
                        class="cell small">
                    </div>
                    <div data-type="label" class="narrow darker">Müll</div>
                </li>
            </ul>
        </div>
    </body>
</html>



Damit erhalte ich die im Anhang stehende Ausgabe.

[setstate]

Das nesges Button-Widget scheint nicht mehr zu funktionieren.
Mit dem Pagebutton müsste es aber klappen

Hier ein Beispiel mit alternativer Farbwahl von mir:

Code Auswählen Erweitern


  <div data-type="pagebutton"
       data-device="MuellAlarm"
       data-colors='["green","#777"]'
       data-background-colors='["#222","#222"]'
       data-states='["on","off"]'
       data-url="index_Muell.html"
       data-icons='["fa-trash warn blink","fa-trash"]'
       class="">
  </div>


[felix.steinbeis]

Das habe ich bei einem "alten" Android und unter iOS (Iphone 4S) auch.
Keine Ahnung woran das liegt, irgendein ungünstiges Laufzeitverhalten.
Beim Homestatus Widget werden die Icons anders (Text im Canvas) als bei den Switches/Symbols gezeichnet.

Das ist aber nur beim ersten Laden so. Einmal mit Pagetab auf eine andere Seite und wieder zurück - danach hat der Homostatus dann seine Icons

Hallo setstate,

erstmal danke für Dein geniales UI. Ich baue damit meine erstes Control-Panel und bin begeistert vom Funktionsumfang und der Flexibilität.

Leider habe ich auch das Darstellungsproblem mit dem Homestatus. Und da der Kiosk-Browser regelmäßig selbst einen neuen Page-Reload macht, fehlen immer wieder die Symbole.

Gibt oder wird es eine Lösung für das Darstellungsproblem geben?

Danke und Gruß
Felix

[setstate]

Hallo Felix,

zumindest habe ich seit gestern einen Workaround drin, der das Control nach 15 Sekunden nach Reload neu zeichnet, damit die Symbole erscheinen. Wenn du ein Update machst, probiere danach mal aus, ob es auch bei dir hilft.

Danke

[setstate]

Jetzt hab ich wieder gefunden warum ich von pagetab weg bin ... wenn ein pagetab "button" "on"(also aktiv, weil reading ist true) ist weil man ihn für "warn" oder "warn activate" verwendet kann man ihn nicht mehr anklicken... weil er ja im Grunde "on" ist. Das hat erstmal prorität denke ich.

soooo, Pagetab setzt jetzt kein On und Off abhängig vom MultiStatus. Damit sollte auch bei 'warn' der Tab nun klickbar bleiben.

[roman1528]

zumindest habe ich seit gestern einen Workaround drin, der das Control nach 15 Sekunden nach Reload neu zeichnet, damit die Symbole erscheinen. Wenn du ein Update machst, probiere danach mal aus, ob es auch bei dir hilft.

Guten Morgen setstate.
Testzeit: 15 Minuten... bei jedem Reload wurden die Icons des HomeStatus sauber geladen. Bis jetzt also nicht wieder aufgetreten.

soooo, Pagetab setzt jetzt kein On und Off abhängig vom MultiStatus. Damit sollte auch bei 'warn' der Tab nun klickbar bleiben.

Perfekt! Danke dir. Auch für das rückgangig machen der .bigger 

Hätt ich nen MacBook würd ich's dir schicken  freu dich auf dein Weihnachtsgeschenk 

[Izmir Schlecht]

Das nesges Button-Widget scheint nicht mehr zu funktionieren.
Mit dem Pagebutton müsste es aber klappen

@setstate: Hab vielen Dank für deine schnelle Hilfe! Damit komme ich weiter. So macht das richtig Spaß!!