New FHEM Tablet UI

[nightstorm99]

Das slider Widget mag nur Zahlen für den Wert. Man könnte auf Fhem Seite mit userReadings arbeiten

Ich könnte aber auch noch data-part ins Sliderwidget einbauen, so wie beim Labelwidget. Dann könnte man sich den Zahlenwert rausfiltern.

Das wäre sehr nett, ich denke es wird noch mehr Devices geben, die dort eine Filterung brauchen.
Wenn das ganze dann noch im VOLUME Widget drin wäre, das wäre der Hammer! 
Ich finde diese optisch noch besser!

Danke im Voraus

[hyper2910]

Danke, funktioniert:

<li data-row="1" data-col="3" data-sizex="1" data-sizey="1">
   <header>2</header>
    <img src="img/senderlogos/ZDF-HD.png" class="top-space"  data-type="push" onclick="setFhemStatus('set SATReceiver channel ZDF')"></img>




Gruss Dirk

[idansch]

Gibt es eine Möglichkeit das Icon bei Statusänderung wechseln zu lassen? Bei widget Symbol geht es. So habe ich es am laufen.

Code Auswählen Erweitern

div data-type="symbol" data-device="Flur_Eingang_Tuer"
        data-get-on='["open","closed"]'
data-background-icon="fa-circle"
data-on-background-color="#555"
        data-icons='["ftui-door warn","ftui-door"]'
        data-on-colors='["#222","#222"]'
        class="cell"></div>
<div data-type="label"
class="cell">HAUS OFFEN</div>

Bei dem widget Switch ist das nicht so umsetzbar. Oder mach ich das etwas falsch?

[kleing]

Hallo Gerald,
jetzt sind viele der Bugs aus dem simplechart gefixed. Bitte testet es jetzt nochmal. Auch das Thema mit dem falschen Anstieg müsste jetzt viel besser aussehen.
Viele Grüße
Mario

Hallo Mario,
vielen Dank, sieht viel besser aus .....

Gruß
Gerald

[setstate]

Gibt es eine Möglichkeit das Icon bei Statusänderung wechseln zu lassen? Bei widget Symbol geht es. So habe ich es am laufen.

Das geht mit dem Multistatebutton (Siehe fhem Wiki -> fhem-Tablet-UI)

[bjoernbo]

Hallo setstate,

kannst Du eine Auskunft darüber geben, ob es geplant ist, mehrere Kurven in einem plot darzustellen? Ich hatte die Frage mal vor ein paar Wochen in den Raum geworfen. Beispielsweise, dass man sie Wetterdaten wie Temperatur, Niederschlag und Luftfeuchtigkeit in einem Graph unterbringt (mi unterschiedlichen Farben).
Ich weiß das dies sicherlich einen immensen Aufwand bedeutet, von daher meine Frage nur aus Interesse ob da angedacht ist.

Gruß Björn

[setstate]

kannst Du eine Auskunft darüber geben, ob es geplant ist, mehrere Kurven in einem plot darzustellen? Ich hatte die Frage mal vor ein paar Wochen in den Raum geworfen. Beispielsweise, dass man sie Wetterdaten wie Temperatur, Niederschlag und Luftfeuchtigkeit in einem Graph unterbringt (mi unterschiedlichen Farben).

Ja, auf jeden Fall, wird es das mal geben. Aber von meiner Seite her habe ich jetzt erst einmal andere Baustellen. Ich muss endlich mal bei Playlists für MPD / Mopidy weiterkommen. Außerdem wollte ich noch einen Popup-Dialog bauen, ähnlich des Circlemenü, nur rechteckig mit beliebigem Inhalt. Man könnte damit dann ein Chart erst auf Klick als Fenster anzeigen. Oder eine Station-Submenü zum Sender umschalten mit großen Icons.

Aber vielleicht findet sich jemand hier aus der Gemeinde, der das Simplechart als Kopiervorlage nimmt und auf mehrere Graphen erweitert.

[Mario67]

Hallo,

ich benötige auch eine Möglichkeit zur Anzeige ausgewählter Messwerte in der "Alltags"-Oberfläche.
Deshalb habe ich die von Johhanes (viegener) in Post #1829 vorgestellte Variante für mich so angepasst, dass sie in das Design passt.
Ich halte die Möglichkeiten der SVG-Plots und der vorhanden Erweiterungen (z.B. logproxy) auch für FTUI erhaltenswert. Weiterhin kommt bei mir dazu, dass ich in FHEMWEB meine "Admin"-Oberfläche mit mehr Details und Inhalt habe.

Anbei meine ersten Resultate und die Files. Ich habe Anpassungen bezüglich der verwendeten Farben für den Hintergrund der Plots und einige der Signalverläufe vorgenommen.
Dabei habe ich die Farben, welche mir "zu heftig" waren, gegen die Farben der "Konkurrenz" ausgetauscht. Ganz fertig bin ich noch nicht (das Margenta wird z.B. bei Fill noch verwendet).
Die Änderungen erfolgten direkt in den für SVG zuständigen CSS-Files  und SVG-Includes der FHEM-Installation (darkstyle!)) und ist deshalb noch nicht Update-fest.

1. Veränderung des Plot-Hintergrunds (dunkelgrauer Gradient) in ..\fhem\www\pgm2\darksvg_defs.svg

Veränderung von

Code Auswählen Erweitern

  <linearGradient id="gr_bg" x1="0%" y1="0%" x2="0%" y2="100%">
    <stop offset="0%"   style="stop-color:#FFFFF7; stop-opacity:1"/>
    <stop offset="100%" style="stop-color:#A7A7A7; stop-opacity:1"/>
  </linearGradient>

nach

Code Auswählen Erweitern

  <linearGradient id="gr_bg" x1="0%" y1="0%" x2="0%" y2="100%">
    <stop offset="0%"   style="stop-color:#707070; stop-opacity:1"/>
    <stop offset="100%" style="stop-color:#2A2A2A; stop-opacity:1"/>
  </linearGradient>

Die Definition kommt durch ..\fhem\www\pgm2\svg_style.css
als

Code Auswählen Erweitern

.border  { stroke:black; fill:url(#gr_bg); }
in den SVG-Plots vor.

2. In  ..\fhem\www\pgm2\svg_style.css sind die Farben der einzelnen Verläufe änderbar.
Grüße,
Mario

[viegener]

Anbei meine ersten Resultate und die Files. Ich habe Anpassungen bezüglich der verwendeten Farben für den Hintergrund der Plots und einige der Signalverläufe vorgenommen.
Dabei habe ich die Farben, welche mir "zu heftig" waren, gegen die Farben der "Konkurrenz" ausgetauscht. Ganz fertig bin ich noch nicht (das Margenta wird z.B. bei Fill noch verwendet).
Die Änderungen erfolgten direkt in den für SVG zuständigen CSS-Files  und SVG-Includes der FHEM-Installation (darkstyle!)) und ist deshalb noch nicht Update-fest.

Das gefällt mir gut, ich hatte noch gar keine Zeit so etwas anzufanen, es gibt zu viele noch offene Baustellen. Wenn Du eine Version hast, die man als Extra-css einbinden kann, wäre das super und ich ein Interessent 

Johannes

[viegener]

Apropos, könnte man den Thread nicht mal neu auflegen, inzwischen dauert das Anworten schon gefühlte 2-3 Widget-Entwicklungszeiten und laut Boardinfo, hängt das wohl stark von der Länge des Threads ab...

Johannes

[nightstorm99]

Das slider Widget mag nur Zahlen für den Wert. Man könnte auf Fhem Seite mit userReadings arbeiten

Ich könnte aber auch noch data-part ins Sliderwidget einbauen, so wie beim Labelwidget. Dann könnte man sich den Zahlenwert rausfiltern.

Ich habe es jetzt mit userReadings gelöst und kann jetzt auch das Volume Widget verwenden.
Im Anhang ist ein Bild wie es jetzt aus sieht.

Code Auswählen Erweitern

attr <device> userReadings status {substr(Value("wz.rollo.rechts"),4) ;;}

Danke nochmal

[bjoernbo]

Hallo setstate,

kannst Du bitte noch folgende Änderung / Korrektur für das simpelchart-Widget einfügen.
Schau mal auf meine Hardcopy, dann weißt Du was ich meine, Bezüglich der Werte auf der y-Achse.

Anbei noch der Code:

<li data-row="5" data-col="2" data-sizex="4" data-sizey="2">
    <header>Niederschlag</header>
   <div data-type="simplechart"
          data-logdevice="FileLog_netatmo_aussen"
            data-logfile="-"
        data-columnspec="4:rain:.*1"
        data-minvalue="0"
        data-maxvalue="1"
        data-width="400px"
        data-height="200px"
        data-yticks="0.1"
        data-daysago="1"
        class="inline cell  top-space-2x"
        data-caption="Regenniederschalg in mm">
</li>

Danke.

(//)

[Sky]

Hallo ,

ich war eine Weile aus beruflichen Gründen nicht mehr in diesem Forum und muss gestehen ,es hat sich rasant entwickelt .
Ein großes Dankeschön an alle die sich eifrig bemühen!!

Aufgrund meiner Abwesenheit habe ich bemerkt ,das sich einiges geändert hat .
Einige Änderungen habe ich schon getätigt , z.B. wurde aus Tablet Frontend ----- Tablet UI ...usw.

Nun wollte ich an meinem Frontend weiterbasteln , bekomme aber meine .png Dateien nicht angezeigt .
In der user-Demo von Phil lautet der Pfad ,z.B. in der tanken.html ,  "./images/shell.png"

Welcher Ordner ist damit gemeint ?
/opt/fhem/www/tablet/images 

Ich habe Testweise eine .png Datei dort abgelegt , funktioniert nicht .

[nojo0812]

Der images-Ordner sollte in diesem Fall in dem Ordner zu finden sein, in dem auch die tanken.html liegt.

Gesendet von meinem Nexus 5 mit Tapatalk

[Sky]

Dies ist der Fall ..............