New FHEM Tablet UI

viegener · 14 Mai 2015, 01:44:24

Zitat von: setstate am 14 Mai 2015, 01:23:53
Sorry

@setstate: Kein Grund für Sorry, das hilft mir weiter,

Ich hatte gerade eine (für mich) überraschende Erkenntnis:

Wenn man wie beschrieben das tablet UI in das www-Verzeichnis von FHEM packt, so wird der url fhem/tablet/... gar nicht durch die HTTPSRV behandelt sondern durch das FHEMWEB-Modul. Das ist eigentlich auch ganz einsichtig, denn die Verzeichnisse unter www werden ja alle über http bereitgestellt.

Nur wenn der URL-Pfad in der HTTPSRV-Definition vom Dateipfad abweicht läuft das ganze über die HTTPSRV-Definition

also z.B.

Code Auswählen

define tablet_ui HTTPSRV anders ./www/tablet3 Tablet Frontend

Dann kann man das tablet_ui auch über

http://server:8083/fhem/tablet/

aufrufen.

Wenn man das allerdings tut, dann kommt pagetab leider durcheinander und glaubt alle Pages sind gleichzeitig aktiv. Aber das lässt sich wohl beheben, wenn man in widget_pagetab.js die folgenden Zeilen:

Code Auswählen

            
var isCurrent=false;
if (elem_url.indexOf(filename)>-1 && !window.location.hash
    || window.location.hash.indexOf(elem_url,1)>-1){
    isCurrent=true;
}

durch diese ersetzt:

Code Auswählen


var isCurrent=false;
if ( ! filename ) {
  if (!window.location.hash ) {
    isCurrent = ( index == 0 );
  } else {
    isCurrent = (window.location.hash.indexOf(elem_url,1)>-1);
  }
} else if (elem_url.indexOf(filename)>-1) {
  isCurrent = true;
} else {
  if (!window.location.hash ) {
    isCurrent = ( index == 0 );
  } else {
    isCurrent = (window.location.hash.indexOf(elem_url,1)>-1);
  }
}

Vielleicht kannst Du das in den Code übernehmen?

Ich könnte mich auch noch mit der Refreshproblematik befassen, wenn es recht ist ...

Johannes

setstate · 14 Mai 2015, 02:48:44

Zitat von: setstate am 14 Mai 2015, 01:42:52
Danke, aber ich habe den negslider von viegener jetzt übernommen, überarbeitet und werde ihn, wenn ich fertig bin, als slider widget ausrollen. Dann kann man mit class="negated" das Verhalten rumdrehen, Die Farben sind jetzt auch schon mit negiert (bunt ist bei class="negated" dann oben). Einen kleinen Bug habe ich leider noch: wenn ich data-min="10" data-max="90" setze, läuft der Slider aber von 0-80

Das Update ist jetzt verfügbar. Das Slider Widget kann jetzt per class="negated" negiert werden (oben 0 - unten 100), um zum Beispiel zum Rollladen-Steuerung benutzt zu werden.
Ist data-value="true", wird der Wert sofort beim Sliden angezeigt werden.
Das Slider Widget unterstützt jetzt auch per Touch den direkten Sprung zum Zielwert.

Danke nochmal an viegener für die Änderungen

Edit
Jetzt mit Beispiel:

Code Auswählen


<div data-type="slider" data-device="dummy1" 
     data-min="0"  
     data-max="100" 
     data-on='(on|closed|down)' 
     data-off='(open|off)'  
     data-value="true" 
     class="negated">
 </div>

viegener · 14 Mai 2015, 13:27:30

Ich habe mal mit widget_pagetab herumgespielt und habe eine Lösung gebaut, die bei mir auch beim Refresh die richtige Seite lädt.

Die geänderte widget_pagetab.js anbei, vielleicht kann das ja jemand ausprobieren, der eine komplexere Umgebung hat.

Allerdings ergibt sich eine Verhaltensänderung, die index.html sollte nicht mehr die Standard-Seite enthalten (also quasi den ersten pagetab), sondern alle includes (js und cs), gridster und die pagetabs.

Also im Body zum Beispiel so

Code Auswählen


<body>
<div class="gridster">

<ul>

<li data-row="1" data-col="1" data-sizex="1" data-sizey="4" data-template="menu.templ"></li>

<!-- ********************** END ************************************ -->

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

Grund dafür. Dieser Raum wird bei Reload-Aktionen immer geladen, damit die richtige Seite aufgebaut werden kann.

Die einzelnen pagetab-Seiten (also auch die erste Seite) sind dann alle gleich aufgebaut und enthalten gridster und das menu wieder).
Für meine Umgebung ist das eigentlich sogar einfacher, denn es gibt keine Unterschiede zwischen den einzelnen Tabs mehr.
Ich habe keine Ahnung ob und wie das in php-Umgebungen laufen wird...

Feedback ist willkommen, denn bisher habe ich es nur in meiner noch recht kleinen Installation ausprobiert,
Johannes

Änderung: 19.5. - Weiter stabilisierte Version

hillbicks · 14 Mai 2015, 18:44:27

Waere es moeglich den gesamten Quellcode der Demo bereitzustellen? Am liebsten inklusive aller configs der wunderhuebschen Plots

satprofi · 14 Mai 2015, 18:56:22

Zitat von: nesges am 11 Mai 2015, 15:41:33
Der FTUI-Code ist korrekt, die Ursache sollte an anderer Stelle zu finden sein. Hast du schonmal im Event-Monitor geschaut, was dort bei einer Statusänderung ankommt? Siehe auch FAQ: Das UI zeigt Statusänderungen gar nicht an.

So, habe jetzt entdeckt warum der Eventmonitor nur bei gewissen Bedingungen arbeitet. link

Und das ist die Ausgabe von einem Fensterkontakt

2015-05-14 18:51:43 CUL_FHTTK Fenster_Terasse Window: Open
2015-05-14 18:51:43 CUL_FHTTK Fenster_Terasse Open

Phil__ · 14 Mai 2015, 19:00:25

Zitat von: hillbicks am 14 Mai 2015, 18:44:27
Waere es moeglich den gesamten Quellcode der Demo bereitzustellen? Am liebsten inklusive aller configs der wunderhuebschen Plots

https://github.com/nesges/TabletUI-Demo-WOPR?files=1

hillbicks · 14 Mai 2015, 19:40:10

Zitat von: Phil__ am 14 Mai 2015, 19:00:25
https://github.com/nesges/TabletUI-Demo-WOPR?files=1

Auf die Idee da nachzugucken bin ich natuerlich nicht gekommen. Ich danke Dir

nesges · 14 Mai 2015, 23:30:05

Und wegen der Plots:

Zitat von: nesges am 27 April 2015, 15:25:42
Das ist nicht ohne weiteres möglich. Die Plots werden extern erzeugt und per Iframe eingebunden; sie haben also weder direkt mit FTUI noch einem Fhem-Modul zu tun. Zur Erzeugung verwende ich dygraphs (http://dygraphs.com/), das seine Daten aus einer MySQL-Datenbank bezieht, die von Fhem mit DbLog befüllt wird.

Der Code dafür ist wild zusammen gehackt und nicht zur Nachahmung empfohlen, von daher veröffentliche ich ihn erstmal nicht, sorry

hexenmeister · 15 Mai 2015, 01:09:43

Zitat von: nesges am 14 Mai 2015, 23:30:05
Der Code dafür ist wild zusammen gehackt und nicht zur Nachahmung empfohlen, von daher veröffentliche ich ihn erstmal nicht, sorry

Na so schwer zu verstehen, was Du da machst und wie die Daten beschaffen sind - war auch wieder nicht

Außerdem ist dygraphs ausreichend dokumentiert.
Aber ich muss das auch erst noch vom statischen Prototyp zu produktiven Code entwickeln.

(http://forum.fhem.de/index.php?action=dlattach;topic=34233.0;attach=32085;image)

Btw. Bekommt man mit CSS-Mitteln die SVG-Graphik (Tür) eingefärbt? Klar, man kann eine eigene dafür erstellen, ist aber unsportlich

Rince · 15 Mai 2015, 05:13:45

Holla.
Das ist mal Eyecandy

Jetzt wird mir klar, warum der Thread gleich die 100 Seiten Grenze sprengt.

update71 · 15 Mai 2015, 08:21:08

Morgen,

darf ich mein Anliegen noch einmal vorholen?

ZitatKann mir jemand sagen ob es für das circlemenu auch die Möglichkeit gibt einen ON Status (wie bei einem Switch) zu machen.
Hintergrund: ich hab mir solche Menüs für meine HUEs gebaut (an, 20, 40, 60, 80, aus) gebaut und würde gern den Button bei AUS anders als bei irgend einem AN Status darstellen. Die einzelnen Dimmstufen wäre dann nochmal eins oben drauf, aber das wäre absoluter Luxus

2. Bei meinem HM Thermostaten wird manchmal beim aktualisieren nur 10 anstelle der eingestellten 15 angezeigt, mal isses so mal nicht (dann zeigts korrekt an)

setstate · 15 Mai 2015, 08:44:31

Hallo update71,

zu 1.:
Man kann das mittlere Widget durch beliebige andere ersetzen. Dafür muss nur das erste in der Liste <li> ausgetauscht werden. Für das, was du machen willst, würde ich den Push durch ein Symbol Widget austauschen, was optisch zu einem Push getrimmt werden müsste, weil das Symbol Widget auch den Status anzeigen kann, was der Push nicht kann. Der kann nur Senden.

Code Auswählen


<div data-type="circlemenu" class="cell circlemenu">
              <ul>
                <li><div data-type="symbol" data-device="dummy1" 
                             data-get-on="on" data-get-off="off" 
                             data-background-icon="fa-circle-thin" 
                             data-icon="fa-wrench"></div></li>
                <li> ...widget ...</li>
                <li> ...widget ...</li>
                <li> ...widget ...</li>
                <li> ...widget ...</li>
             </ul>
          </div>

Optisch den Wert anzeigen kann man mit den bekannten Arrays bei Icon, Color, Get

Code Auswählen


 data-icons='["fa-wrench"]' 
 data-get-on='["[12]*[0-9]","[3456][0-9]","([789][0-9]|100)"]' 
 data-on-colors='["#855","#a55","#d55"]'

zu2.: Ist schwer, die Ursache zu finden ...
Manchmal kann es passieren, dass bei einem Javascriptfehler die Programmausführung abgebrochen wird. Damit werden dann bestimmte Sachen nicht gezeichnet oder aktualisiert. Je nachdem, welches Widget zuerst angezeigt wird, passiert das Anzeigeproblem oder nicht. Was sagt die Webconsole? Gibt es Fehler?
Ansonsten fallen mir noch die Probleme im Zugsamenhang mit iOS und FHEMWEB/HTTPSRV ein, die noch nicht verstanden sind.

nesges · 15 Mai 2015, 09:17:13

Zitat von: hexenmeister am 15 Mai 2015, 01:09:43
Na so schwer zu verstehen, was Du da machst und wie die Daten beschaffen sind - war auch wieder nicht

Hab ich auch nicht behauptet

Ich sag nur, dass ich das für mich notdürftig zusammen gehackt hab. Meins kann man im aktuellen Zustand keinem in die Hand geben

ZitatBtw. Bekommt man mit CSS-Mitteln die SVG-Graphik (Tür) eingefärbt? Klar, man kann eine eigene dafür erstellen, ist aber unsportlich

Hab ich nicht hinbekommen und wäre auch dankbar für Tipps.

setstate · 15 Mai 2015, 09:28:22

Zitat von: nesges am 15 Mai 2015, 09:17:13
Hab ich nicht hinbekommen und wäre auch dankbar für Tipps.

Das SVG Grafik auch nur durch HTML Tags definiert werden, bekommt man mit dem richtigen CSS selector auch ein bestimmtes Attribut überschrieben. Das SVG Icon muss aber inline im HTML eingebettet sein, nicht als Image. Dazu hatte ich hier in diesem Thread schon mal einen JS Konverter gepostet, der aus Icon.svg eingebetteten Images Inline HTML macht, der dann per CSS in der Farbe geändert werden kann.

nesges · 15 Mai 2015, 10:16:29

Zitat von: setstate am 15 Mai 2015, 09:28:22
Das SVG Grafik auch nur durch HTML Tags definiert werden, bekommt man mit dem richtigen CSS selector auch ein bestimmtes Attribut überschrieben. Das SVG Icon muss aber inline im HTML eingebettet sein, nicht als Image. Dazu hatte ich hier in diesem Thread schon mal einen JS Konverter gepostet, der aus Icon.svg eingebetteten Images Inline HTML macht, der dann per CSS in der Farbe geändert werden kann.

Danke!

Code Auswählen

<script>
    $(function() {
        g = new Dygraph( 
            [...]
        ); 
        g.ready(function(){
            g.setAnnotations([{ 
                            series: "Türe",
                            x: "2015/05/09 11:12",
                            text: "Tür geöffnet",
                            icon: "http://wopr:8083/fhem/images/openautomation/fts_door_open.svg",
                            height: 20,
                            width: 20,
                            cssClass: "dygraph-annotation"
                        },
                        [...]
            ]);
            
            jQuery(".dygraph-annotation img").each(function(){
                var $img = jQuery(this);
                var imgID = $img.attr("id");
                var imgClass = $img.attr("class");
                var imgURL = $img.attr("src");
                
                jQuery.get(imgURL, function(data) {
                    // Get the SVG tag, ignore the rest
                    var $svg = jQuery(data).find("svg");
                
                    // Add replaced image"s ID to the new SVG
                    if(typeof imgID !== "undefined") {
                        $svg = $svg.attr("id", imgID);
                    }
                    // Add replaced image"s classes to the new SVG
                    if(typeof imgClass !== "undefined") {
                        $svg = $svg.attr("class", imgClass+" replaced-svg");
                    }
                
                    // Remove any invalid XML tags as per http://validator.w3.org
                    $svg = $svg.removeAttr("xmlns:a");
                    $svg.attr("width",$img.attr("width"));
                    $svg.attr("height",$img.attr("height"));
                
                    // Replace image with new SVG
                    $img.replaceWith($svg);
                
                }, "xml");
            })
        });
    });
</script>

und CSS:

Code Auswählen

.dygraph-annotation path {
    fill: white;
}

Im Grunde kann man dabei nur über drei Dinge stolpern:

die SVGs können erst in g.ready() ersetzt werden, in $(document).ready() stehen sie noch nicht sofort zur Verfügung
die CSS-Klasse muss man selbst setzen
der Selector "img.svg" muss durch "img" ersetzt werden