FTUI version 3

[LuGu]

@setstate

Mir ist heute beim ersten Schneefall aufgefallen, dass beim meteocons icon set N/A angezeigt wird.
In der weather.map.js scheinen noch ein paar Mappings zu fehlen, für die aber ja icons vorhanden sind.

Code Auswählen Erweitern


     'Schneefall': './icons/snowy2.svg',
     'Schneeschauer': './icons/snowy,svg',

und vielleicht auch noch

Code Auswählen Erweitern


     'Gewitter': './icons/lightning1.svg',
     'Nebel': './icons/lines,svg',


Könntest Du das bei Gelegenheit mal bitte ergänzen?

[octek0815]

Moin,

sind mit Chart Modul schon Funktionen für Logproxy möglich?

Also die quasi folgendes: { FHEM::Buienradar::LogProxy("System_Regenvorhersage")}

Ging vorher mit: Func:FHEM::Buienradar::LogProxy("System_Regenvorhersage")

Grüße
Olli

[Eisix]

Hallo,

ja habe ich hier schon mal gepostet

Code Auswählen Erweitern


<ftui-chart title="Schildkr&ouml;ten">
          <ftui-chart-data label="Schildkr&ouml;ten" color="#21a000" log="logdb" file="-" spec="Sensor_Schildies:temperature"></ftui-chart-data>
          <ftui-chart-data label="morgen" color="blue" log="lp" spec="FileLog:Schildis_TempMin,offset=60*60*24:4:Wetter.fc1_tempMin::"></ftui-chart-data>
          <ftui-chart-data label="kritisch" color="#ff0000" log="lp" file="-" spec="ConstY:4"></ftui-chart-data>
          <ftui-chart-data label="aussen" fill background-color="#ffad33" color="#ff9900" log="logdb" file="-" spec="Sensor_aussen:CleanTemp"></ftui-chart-data>
          <ftui-chart-controls units="day, week"></ftui-chart-controls>
</ftui-chart>

Gruß
Eisix


[moonsorrox]

ich muss mal ganz zum Anfang zurück und etwas fragen, ich habe die Install aus dem Github genutzt.
Ich habe also das Vezeichnis erstellt mit "mkdir /opt/fhem/www/ftui" dann bin ich eben auf die Server IP gegangen und lande so auf meiner alten FTUI Version 

Da ich nun parallel die Version 3 so langsam erstellen möchte habe ich das Verzeichnis erst einmal umbenannt in "ftuineu" damit ich wenigstens drauf komme, aber hier erscheint mir nur eine schwarze Seite, kann es sein das die beiden Versionen sich gegenseitig beeinflussen..?
Es sollte doch eine Demo Seite zu sehen sein, oder muss ich da etwas ändern.?
Klar kann ich auch die index anders nennen, aber die Seite bleibt schwarz 

Hab ich ein Brett vorm Kopf 

[Eisix]

http://ip:8083/fhem/www/ftuineu/index.html

müßte dein Link sein.

Gruß
Eisix

und mach noch ein chown -R fhem:dialout  /opt/fhem/www/ftuineu

[Eisix]

Hallo,

ich möchte ein reading formatiert mit label ausgeben

reading ist z.B. 23:14:54   --->  23:14  soll aber nur ausgegeben werden.

Code Auswählen Erweitern


<ftui-label [text]="Receiver:eventstart_hr | timeFormat('hh:mm')"></ftui-label>


Der code gibt mir aber nur 00:00 aus.

Jemand einen Tip für mich.

Gruß
Eisix

[moonsorrox]

nee, dass ist mir schon klar, aber er zeigt mir trotzdem eine schwarze Seite

Müßte der Befehl nicht "chown -R fhem:dialout /opt/fhem/www/ftuineu" heißen:?

[grossmaggul]

Läuft Dein ftui über einen eigenen Server? Wenn nicht, dann diese Zeile in der index.html mal auskommentieren

Code Auswählen Erweitern

<!-- when serving the page with other web servers, e.g. lighttpd -->
  <meta name="fhemweb_url" content="http://fhem.local:8083/fhem/">

[Eisix]

nee, dass ist mir schon klar, aber er zeigt mir trotzdem eine schwarze Seite

Müßte der Befehl nicht "chown -R fhem:dialout /opt/fhem/www/ftuineu" heißen:?

Du liest schneller als ich meine Fehler korrigieren kann  verschrieben.

[moonsorrox]

Ok das war's grossmaggul  Dankeschön

Demo Seite kommt 

Du liest schneller als ich meine Fehler korrigieren kann  verschrieben.

alles gut kein Problem  geht jetzt alles...
Nun werde ich mich mal durchwurschteln, habe ja schon ein paar schöne Sachen hier gesehen...

[OdfFhem]

Code Auswählen Erweitern


<ftui-label [text]="Receiver:eventstart_hr | timeFormat('hh:mm')"></ftui-label>


Der code gibt mir aber nur 00:00 aus.

timeFormat geht davon aus, dass eine Zeitangabe in Millisekunden (Standard, 'ms') bzw. Sekunden ('s') vorliegt.
Eine bereits formatierte Zeit müsste vorher entsprechend umgerechnet werden.

reading ist z.B. 23:14:54   --->  23:14  soll aber nur ausgegeben werden.

Ist die Zeit bereits ausreichend formatiert, könnte man mit replace den gewünschten Teil ausschneiden:

Code Auswählen Erweitern


  <ftui-label [text]="ftuitest:time_hhmmss | replace(/:..$/, '')"></ftui-label>


[grossmaggul]

Funktioniert das auch bei einem Slider?

[OdfFhem]

? Wo? Was habe ich verpasst?

dateAgo und dateTill endeten auf "};" - woher auch immer das ";" kam ...

Done

Funktioniert grundsätzlich; allerdings ist die CSS-Kontrolle doch ein wenig schleierhaft.


Ich habe mal ein einfaches label-Beispiel (popup verhält sich ähnlich, erfordert aber mehr Bedienschritte) konstruiert, an dem man ein paar Ungereimtheiten ausmachen kann:

Code Auswählen Erweitern


<!DOCTYPE html>
<html>
  <head>
    <base href="../" />
    <script src="ftui.js"></script>
    <link href="ftui.css" rel="stylesheet">
    <link href="themes/ftui-theme.css" rel="stylesheet">
    <link href="favicon.ico" rel="icon" type="image/x-icon" />

  <!--   <meta name="debug" content="2"> -->
    <title>FTUI Example Label</title>
    <style>
      .special {
        color: lightblue;
        animation: blink 1s step-start 0s infinite;
      }
      #label-1,#label-2,#label-3 .special {
        color: magenta;
        animation: hop 2s infinite cubic-bezier(0.280, 0.840, 0.420, 1);
      }

      .special:hover {
        color: #FF0000;
      }
      #label-1,#label-2,#label-3 .special:hover {
        color: #00FF00;
      }
    </style>
  </head>

  <body>
    <ftui-grid base-width="150" base-height="150">
      <ftui-grid-tile row="1" col="1" height="1" width="1">
        <header>label-1</header>
        <ftui-label id="label-1" class="special">Close1</ftui-label>
      </ftui-grid-tile>
      <ftui-grid-tile row="1" col="2" height="1" width="1">
        <header>label-2</header>
        <ftui-label id="label-2">
          <span class="special" slot="content">Close2</span>
        </ftui-label>
      </ftui-grid-tile>
      <ftui-grid-tile row="1" col="3" height="1" width="1">
        <header>label-3</header>
        <ftui-label>
          <span id="label-3" class="special" slot="content">Close3</span>
        </ftui-label>
      </ftui-grid-tile>
    </ftui-grid>
  </body>
</html>


• 
  Bei label-1 werden zunächst die allgemeinen CSS-Einstellungen angewendet und dann von den id-bezogenen CSS-Einstellungen überschrieben - die erwartete Animation ist aktiv. hover wird ständig angewendet und nicht nur, wenn ein hover-Fall vorliegt.
  
• 
  Bei label-2 werden zunächst die id-bezogenen CSS-Einstellungen angewendet, dann aber von den allgemeinen CSS-Einstellungen überschrieben; interessanterweise bleiben beide Animationen aktiv. Für hover gilt das gleiche Verhalten und wird auch nur angewendet, wenn ein hover-Fall vorliegt.
  
• 
  Bei label-3 werden zunächst die id-bezogenen CSS-Einstellungen angewendet, dann aber von den allgemeinen CSS-Einstellungen überschrieben. Für hover gilt das gleiche Verhalten; hover wird auch nur angewendet, wenn ein hover-Fall vorliegt.
  

Vielleicht gibt es (einfache) Erklärungen für das Verhalten ... würde mich auf jeden Fall interessieren ...

[OdfFhem]

Funktioniert das auch bei einem Slider?

Aktuell bietet der slider (scheinbar) keine Möglichkeit, textliche Beschriftungen anzuzeigen.
Die Min/Max-Werte auszublenden, scheint auch (noch) nicht möglich.
Somit wäre der Einsatz zusätzlicher label-Elemente (vermutlich) noch keine Lösung.

Eine von vielen Varianten für eine label-Darstellung wäre:

Code Auswählen Erweitern


  <ftui-label [text]="ftuitest:timeInSeconds | timeFormat('[ m:ss minutes ]','s')"></ftui-label>


Vielleicht gibt es ja bald eine Attribut-Möglichkeit für minText bzw. maxText in der slider-Komponente ...

[setstate]

für

        <ftui-label id="label-2">
          <span class="special"></span>
        </ftui-label>

passt

#label-1 .special

Child Element

----------------------

für

        <ftui-label id="label-2" class="special"></ftui-label>

passt

#label-1.special

selbes Element