New FHEM Tablet UI

[peterboss]

Danke Gunther !

Das ist schon mal ein Anfang!

Vielen Dank!

[Gunther]

Was genau zeigst Du damit an?

[marko67]

Hallo einen schönen Sonntag,

ich benötige Hilfe mit dem popup Fenster. Folgendes ist mir nicht klar verständlich bzw. geht nicht:

"Mit Überschreiben der Parameter data-device, data-get, data-get-on und data-get-off kann man sogar das Öffnen und Schließen des Dialogs per FHEM Reading steuern.
Anwendungsfall:
- Türklingel ändert ein Reading in FHEM und auf der UI poppt das Kamerabild der Tür-Cam auf"

Ich habe einen test2 dummy definiert.

Internals:
   CFGFN
   NAME       test2
   NR         4892
   STATE      1
   TYPE       dummy
   Readings:
     2015-11-22 16:39:03   state           1
Attributes:
   event-on-change-reading .*
   room       Panel
   webCmd     1:0

Das widget wie folgt:

<div data-type="popup" data-height="400px" data-width="400px">
              <div data-type="label"
                   data-device="test2"
               data-get-on='["1","0"]'
               class="big">
              </div>
              <div class="dialog">
                 <header>Wetter</header>
                    <div data-type="image"
                      data-url="http://niederschlagsradar.de/image.ashx?type=regioloop&regio=sbr&j=&m=&d=&mi=&uhr=&bliksem=0&voor=&srt=loop1stunde&tijdid=201510131946"
                      data-size="100%">
                    </div>
              </div>
           </div>

Wenn sich der state des dummy von 0 auf 1 ändert geht leider kein popup Fenster auf. Wo könnte mein Fehler liegen?

Schöne Grüsse und vorab schon Danke für Eure Hilfe

[chris1284]

ich baue gerade meine ui auf pagebuttons um da mit Pagetab und data-template nicht sonderlich zufriedenstellend arbeiten (seiten laden erst beim x. mal volständig usw).
wie kann ich in der index.html sagen das der pagebutton, der auf die index.html verweist, aktiv ist, also bereits geklickt wurde?

Danke!

[setstate]

...
ich benötige Hilfe mit dem popup Fenster. Folgendes ist mir nicht klar verständlich bzw. geht nicht:

"Mit Überschreiben der Parameter data-device, data-get, data-get-on und data-get-off kann man sogar das Öffnen und Schließen des Dialogs per FHEM Reading steuern.
Anwendungsfall:
- Türklingel ändert ein Reading in FHEM und auf der UI poppt das Kamerabild der Tür-Cam auf"
.......
Das widget wie folgt:

<div data-type="popup" data-height="400px" data-width="400px">
              <div data-type="label"
                   data-device="test2"
               data-get-on='["1","0"]'
               class="big">
              </div>
              <div class="dialog">
                 <header>Wetter</header>
                    <div data-type="image"
                      data-url="http://niederschlagsradar.de/image.ashx?type=regioloop&regio=sbr&j=&m=&d=&mi=&uhr=&bliksem=0&voor=&srt=loop1stunde&tijdid=201510131946"
                      data-size="100%">
                    </div>
              </div>
           </div>

Wenn sich der state des dummy von 0 auf 1 ändert geht leider kein popup Fenster auf. Wo könnte mein Fehler liegen?

Schöne Grüsse und vorab schon Danke für Eure Hilfe

Keine Multi-State-Schreibweise (Array) beim Popup! Man muss das so angeben:

data-get-on="1" data-get-off="0"

Außerdem brauchst du unbedingt ein Objekt, dass den Dialog per Klick öffnen lässt. Ansonsten funktioniert der Auto-Open Code leider nicht:

Basic structure for a popup:

<div data-type="popup" data-height="150px" data-width="250px">
  <div><!-- click object to open the popup --></div>
  <div class="dialog">
      <header>DIALOG</header>
      <div><!-- widget(s) inside the popup dialog --></div>
  </div>
</div>

[setstate]

ich baue gerade meine ui auf pagebuttons um da mit Pagetab und data-template nicht sonderlich zufriedenstellend arbeiten (seiten laden erst beim x. mal volständig usw).
wie kann ich in der index.html sagen das der pagebutton, der auf die index.html verweist, aktiv ist, also bereits geklickt wurde?

Danke!

Pagebutton wird aktiv, wenn die aktuelle Seite mit der der data-url übereinstimmt. Also muss auf jeder Seite immer das ganze Set von Pagebuttons enthalten sein. Das kann man auch per Template machen, um Wiederholungen zu vermeiden.

[marko67]

Keine Multi-State-Schreibweise (Array) beim Popup! Man muss das so angeben:

data-get-on="1" data-get-off="0"

Außerdem brauchst du unbedingt ein Objekt, dass den Dialog per Klick öffnen lässt. Ansonsten funktioniert der Auto-Open Code leider nicht:

Danke für Deine Antwort. Das mit der Schreibweise hatte ich so und so getestet. Was ist mit " unbedingt ein Objekt, dass den Dialog per Klick öffnen lässt " gemeint??
Ich habe es wie folgt ohne Erfolg geändert:

<div data-type="popup" data-height="400px" data-width="400px">
              <div data-type="symbol"
                data-icon="oa-message_attention"
               data-device="test2"
               data-get-on="1"
               data-get-off="0"
               class="big">
              </div>
              <div class="dialog">
                 <header>NIEDERSCHLAGSRADAR</header>
                    <div data-type="image"
                      data-url="http://niederschlagsradar.de/image.ashx?type=regioloop&regio=sbr&j=&m=&d=&mi=&uhr=&bliksem=0&voor=&srt=loop1stunde&tijdid=201510131946"
                      data-size="100%">
                    </div>
              </div>
           </div>

Bei drücken des Warnsymbols geht das popup auf, aber nicht automatisch bei Änderung des state von test2 von 0 auf 1.

Gruss Marko

[chris1284]

Pagebutton wird aktiv, wenn die aktuelle Seite mit der der data-url übereinstimmt. Also muss auf jeder Seite immer das ganze Set von Pagebuttons enthalten sein. Das kann man auch per Template machen, um Wiederholungen zu vermeiden.

ist es, problem ist nur das beim ersten aufruf index.html nicht in der url auftaucht das die url http://srv01.fritz.box:8083/fhem/ftui/ ist.
kann man wohl nur umgehen wenn man beim ersten mal gleich http://srv01.fritz.box:8083/fhem/ftui/index.html aufruft.

[setstate]

@Marko: data-device und data-get-* auch beim popup hinzufügen, dann kann das auch auf den Status vom Dummy reagieren:

Code Auswählen Erweitern

<div data-type="popup" data-height="400px" data-width="400px" data-device="test2"
               data-get-on="1"
               data-get-off="0">
              <div data-type="symbol"
                data-icon="oa-message_attention"
               data-device="test2"
               data-get-on="1"
               data-get-off="0"
               class="big">
              </div>
              <div class="dialog">
                 <header>NIEDERSCHLAGSRADAR</header>
                    <div data-type="image"
                      data-url="http://niederschlagsradar.de/image.ashx?type=regioloop&regio=sbr&j=&m=&d=&mi=&uhr=&bliksem=0&voor=&srt=loop1stunde&tijdid=201510131946"
                      data-size="100%">
                    </div>
              </div>
           </div>


[marko67]

@Marko: data-device und data-get-* auch beim popup hinzufügen, dann kann das auch auf den Status vom Dummy reagieren:

Code Auswählen Erweitern

<div data-type="popup" data-height="400px" data-width="400px" data-device="test2"
               data-get-on="1"
               data-get-off="0">
              <div data-type="symbol"
                data-icon="oa-message_attention"
               data-device="test2"
               data-get-on="1"
               data-get-off="0"
               class="big">
              </div>
              <div class="dialog">
                 <header>NIEDERSCHLAGSRADAR</header>
                    <div data-type="image"
                      data-url="http://niederschlagsradar.de/image.ashx?type=regioloop&regio=sbr&j=&m=&d=&mi=&uhr=&bliksem=0&voor=&srt=loop1stunde&tijdid=201510131946"
                      data-size="100%">
                    </div>
              </div>
           </div>


Ein ganz dickes Danke für die gute und schnelle Hilfe.

Marko

[setstate]

Erfolg  ich habe es wahrhaftig selbst geschafft ...

ich definiere einen 3. Balken immer dann wenn min < 0 ist und aktiviere diesen in blau bis zur Oberkante 0 (und gerade Oberkante) wenn low auch kleiner 0 ist

Na schön !!!
So ist das auch besser visualisiert, damit man schneller sieht, was Sache ist.

Ich habe deine Änderung jetzt auch in meiner Version eingebaut. Aber ohne extra DIVs, nur mit CSS-Color-Gradiant und high Limit.
Ich packe das jetzt alles zusammen und werde es im Laufe des Tages hochladen.

Code Auswählen Erweitern

  <div class="cell">
    <div data-type="range" data-device="AgroWeather" data-low="fc0_tempMin" data-high="fc0_tempMax" data-max="5" data-min="-5" data-limit-low="0" data-limit-high="2" class="inline left-space"></div>
    <div data-type="range" data-device="AgroWeather" data-low="fc1_tempMin" data-high="fc1_tempMax" data-max="5" data-min="-5" data-limit-low="0" data-limit-high="2" class="inline left-space nolabels"></div>
    <div data-type="range" data-device="AgroWeather" data-low="fc2_tempMin" data-high="fc2_tempMax" data-max="5" data-min="-5" data-limit-low="0" data-limit-high="2" class="inline left-space nolabels"></div>
  </div>

[setstate]

ist es, problem ist nur das beim ersten aufruf index.html nicht in der url auftaucht das die url http://srv01.fritz.box:8083/fhem/ftui/ ist.
kann man wohl nur umgehen wenn man beim ersten mal gleich http://srv01.fritz.box:8083/fhem/ftui/index.html aufruft.

ich denke, eine zusätzliche Bedingung fürs Einschalten bringt auch die Lösung:

Code Auswählen Erweitern

  ... ||  filename==='' && elem_url==='index.html'

Ich werde das so noch mit einbauen ...

[Nobby1805]

...Aber ohne extra DIVs, nur mit CSS-Color-Gradiant und high Limit.

da bin ich ja gespannt wie du das gemacht ... ich sehe schon, da kann ich noch viel lernen

und dann hast du auch noch Labels ergänzt 

Vielen Dank ...

[stera]

Hallo,

sind Charts eigentlich auch mit DBLog möglich?  Habe dafür noch kein Beispiel gesehen..

Gruß,
SteRa

[guna83]

Ja geht. Habe ich auch letzte Woche nach geguckt. Bei mir ein Diagramm über Feuchte/Co2:

Code Auswählen Erweitern

<li data-row="3" data-col="2" data-sizex="5" data-sizey="2">
<header>Hausklima</header>
<div class="fullsize"
     data-type="chart"
     data-device="logdb"
     data-logdevice='["logdb","logdb","logdb","logdb"]'
     data-logfile='["HISTORY","HISTORY","HISTORY","HISTORY"]'
     data-columnspec='["Umwelt.Feuchte.Schlafen:state","Umwelt.Feuchte.Wohnen:state","Umwelt.Co2.Schlafen:state","Umwelt.Co2.Wohnen:state"]'
     data-legend='["Schlafen Feuchte","Wohnen Feuchte","Schlafen Co2","Wohnen Co2"]'
     data-style='["ftui l2dash","ftui l3dash","ftui l2dash","ftui l3dash"]'
     data-ptype='["lines","lines","lines","lines"]'
     data-uaxis='["primary","primary","secondary","secondary"]'
     data-yunit="%"
     data-ytext="Feuchte (Linie)"
     data-yunit_sec="ppm"
     data-ytext_sec="Co2 (Striche)"
     data-title="Hausklima"
     data-minvalue="auto"
     data-maxvalue="auto"
     data-minvalue_sec="auto"
     data-maxvalue_sec="auto"></div>
</li>