Evaluierungsversion 2.2

[setstate]

Genau! Bin auch mit dem Rad unterwegs

Update: Verbesserung beim Shortpoll ist jetzt verfügbar

[setstate]

Neu: Material Icons im FTUI

Da die Material Icons von Google optisch sehr gut zum Stil von FTUi passen, über 1000 verschiedene Icons dabei sind und außerdem auch zahlreiche Home-Automation relevante Icons dabei sind, habe ich diesen Font mit aufgenommen.

Dafür muss man beim data-icon den Prefix "mi-" anführen.
Die Icon-Namen sucht man sich hier raus: https://design.google.com/icons/
In den Header der Seite zusätzlich folgendes hinzufügen:

Code Auswählen Erweitern

<link rel="stylesheet" href="lib/material-icons.min.css" />

Beispiel: 

Code Auswählen Erweitern


        <div>
            <div data-type="symbol" data-device="kitchen" data-icon="mi-kitchen" class="bigger"></div>
            <div>kitchen</div>
        </div>
        <div>
            <div data-type="symbol" data-device="pool" data-icon="mi-pool" class="bigger"></div>
            <div>pool</div>
        </div>
        <div>
            <div data-type="symbol" data-device="laundry" data-icon="mi-local_laundry_service" class="bigger"></div>
            <div>laundry</div>
        </div>
        <div>
            <div data-type="symbol" data-device="wc" data-icon="mi-wc" class="bigger"></div>
            <div>wc</div>
        </div>
        <div>
            <div data-type="symbol" data-device="hot_tub" data-icon="mi-hot_tub" class="bigger"></div>
            <div>hot tub</div>
        </div>


[setstate]

Neu: Image Widget - Class-Änderung per Parameter

Anwendungsbeispiel:  Bildchen für Homestatus. Ist die Person nicht zuhause, wird das Bild anders dargestellt (transparent, roter Ring ...)

da data-get beim Image-Widget ja schon für den Parameter zum Liefern der Image-URL vorgesehen ist, gibt es beim Image-Widget data-state-get zum Definieren des Parameters für den Status. Dieser Status wird dann mit den Möglichkeiten unter  data-states verglichen und entsprechend des passenden Index die unter data-classes angegebenen Klassen zugewiesen.
Es können auch mehrere Klassen gleichzeitig angegeben werden

Code Auswählen Erweitern

data-classes='["border-green","border-red half-transparent"]'

Beispiel:

Code Auswählen Erweitern


<div
  data-type="image"
  data-device="ftuitest"
  data-state-get="homie1"
  data-states='["anwesend","abwesend"]'
  data-classes='["","half-transparent"]'
  data-width="60"
  data-height="60"
  data-url="http://lorempixel.com/150/150/people/1"
  class="round" ></div>


[chris1284]

hallo setstate schau mal hier https://forum.fhem.de/index.php/topic,56449.0.html evtl übernimmst du es ja ins repo

ich habe das widget dahingehen optimiert das es den alten style hat und auch auf eigene bedürfnisse angepasst werdne kann (wie die meisten widgets)

[oeiber]

hallo!

erstmal vielen dank für die tolle arbeit!

jetzt zu meiner frage

wäre es möglich für das mobile frontend "pull-down to refresh" zu implementieren?

herzlichen dank!

[CoolTux]

Nein das geht nicht. Das wird nicht von einer Webseite aus gemacht sondern von der BrowserApp.
Fully kann das zum Beispiel.

[Thyraz]

Es gibt durchaus Javascript Implementierungen.

https://apeatling.com/2014/11/javascript-pull-to-refresh-web/

Die sollte auch jeder selbst in seine FTUI Seiten einbinden können.

[CoolTux]

Ah, ok. Danke Dir für die Info. Wieder bisschen schlauer 

[oeiber]

danke! werd ich heute abend mal testen

[Gyvrr]

Anscheinend wird die "onFormat" Methode aus dem Modul_knob nicht mehr aufgerufen.
Ich hab das mal ein bischen gedebuggt, aber konnte den Grund dafür nicht finden. Ich kenn mich aber auch nicht mit diesem Knob-Modul und jQuery aus.

Kann den Fehler von phil82 bestätigen. Auch ich sehe laut debugging, dass die "onFormat(v)" Methode nicht aufgerufen wird. Gibt es schon einen Fix, den ich übersehen habe?

Beste Grüße

[setstate]

Kann den Fehler von phil82 bestätigen. Auch ich sehe laut debugging, dass die "onFormat(v)" Methode nicht aufgerufen wird. Gibt es schon einen Fix, den ich übersehen habe?

Beste Grüße

Jetzt gibt es ihn ...
Update ist oben.
Danke

[ulli]

seit dem letzten update lassen sich meine Pagebuttons nicht mehr klicken, diese sind wie folgender definiert:

Code Auswählen Erweitern


        <div data-type="pagebutton" class="top-space default"
data-url="#page_home.html" data-load="#home"
data-active-pattern=".*#page_home.html"
data-return-time="60"
data-icon="fa-home"
data-background-icon="fa-circle-thin"
                data-on-color="cornflowerblue"
                data-off-background-color="transparent"
></div>


Hinzu kommt das mein Cyclemenü einfach ganz links oben auf die Gesamtseite positioniert wird.

Code Auswählen Erweitern


<li class="halbTransparent" data-row="2" data-col="11" data-sizex="1" data-sizey="2">
<div data-type="circlemenu" class="circlemenu top-space" data-direction="left">
<ul>
<li><div data-type="push" data-icon="fa-tv" data-background-icon="fa-circle-thin" ></div></li>

<li>
<div data-type="pagebutton" class="top-space"
data-url="#page_tvNow.html" data-load="#tvNow"
data-active-pattern=".*#page_tvNow.html"
data-icon="fa-wrench"
data-background-icon="fa-circle-thin"
              data-on-color="cornflowerblue"
              data-off-background-color="transparent"
><div class="tiny">Now</div></div>
</li>
<li>
<div data-type="pagebutton" class="top-space"
data-url="#page_tvPrime.html" data-load="#tvPrime"
data-active-pattern=".*#page_tvPrime.html"
data-icon="fa-wrench"
data-background-icon="fa-circle-thin"
              data-on-color="cornflowerblue"
              data-off-background-color="transparent"
><div class="tiny">Prime</div></div>
</li>   
</ul>
</div>
</li>


[n4rrOx]

Hi,

habe heute ebenfalls ein Update gemacht (das letzte Mal ca. am 05.08.).

Benutze für die mobile Ansicht die Basis von index_nav_mobil.html, die ich für meine Bedürfnisse umgebaut habe.
Hier kann ich zwar die Pagebutton-Elemente anklicken und werde auch weitergeleitet, aber irgendwie scheint die ganze Seite verschoben zu sein?? ... und die Seite lässt sich nicht mehr scrollen, d. h. ich sehe nicht mehr den ganzen Inhalt.

Woran könnte das liegen?
Was wurde den alles geändert?

Edit:
Wenn ich eh gerade beim Slideout-Template bin...gibt es die Möglichkeit die "Slide-In" Richtung per Attribut mitzugeben?
z. B. right, left, top, bottum ? ... Dann könnte man sich auch "Quick-Settings" zusammenbasteln

[Jojo11]

Hallo,

ich habe heute auch seit Langem mal wieder ein update gemacht.  Seitdem ist mein vertikales circlemenu von oben rechts nach oben links gewandert. Es scheint so, als würde eine absolute Positionierung nicht mehr funktionieren. Der Code ist:

Code Auswählen Erweitern


<div data-type="circlemenu" data-border="square" data-direction="vertical" data-item-width="50" data-item-height="50" data-circle-radius="60" class="circlemenu" style="position:absolute;right:15px;top:12px">
      <ul>
<li>
...

Auch erscheint beim Ausklappen ein Balken, der bis zur Browserunterkante reicht (in grau). Der war vorher nicht da 
Woran könnte das liegen?

schöne Grüße
Jo

[FhemPiUser]

Ich habe etwas hin und her überlegt. Vllt. ist es doch besser, bei der jsonlist2 Abfrage nur die abonierten Devices abzufragen. Ich habe das mal eingebaut und muss sagen, das bringt tatsächlich was. Bei mir dauert die Abfrage jetzt nur noch 0,9 Sekunden.
Vllt. hilft es dir etwas ... (bitte Update machen, testen und berichten)

wow, ist bei mir jetzt viiiiel schneller. super!