New FHEM Tablet UI

[devil77]

Ich bräuchte mal hilfen beim erstellen eines Plots mit simplechart und dlog.
Ich komme einfach nicht weiter wie ich die Daten abgreifen muss.
Mein logdevice ist myDbLog mit logfile in HISTORY. Für die einzelnen Geräte lasse ich immer State loggen und greife die Daten dann ab.
Z.Bsp. mein Thermostat schreibt in den state

Code Auswählen Erweitern

T: 24.3 desired: 5.0 valve: 0 und über die gplot holle ich mit

Code Auswählen Erweitern

#DbLog <SPEC1>:state:::$val=~s/.*T:\s([-\.\d]+).*/$1/eg die Temperatur für den Plot.

Doch ich weiß einfach nicht wie ich das ganze mit columnspec abgreifen muss damit es mir den plot darstellt.

Code Auswählen Erweitern

<div data-type="simplechart"
data-logdevice="myDbLog"
data-logfile="HISTORY"
data-columnspec="DbLog:myDbLog:????"
data-yticks="2"
data-daysago="0"
data-caption="Temperatur"
class="fullsize">

Kann mir da jemand weiterhelfen?

[mc-hollin]

So, jetzt brauch ich doch mal Hilfe.
Ich komme einfach nicht weiter.
Die Idee war eine Art "Config-Extension" zu schreiben mit der es möglich ist die Pages auszulagern.
Im Anhang mein aktueller Stand.
Ich bekomme es nicht hin, dass die Widgets nicht mehrfach geladen werden.

Vielleicht kann sich das mal einer anschauen. Wäre super.
Kurze Erläuterung:

Index.html

   
• Hier wird nur noch das Gridster definiert. Aber keine Pages mehr.

ftuiConfig.json

   
• Templates werden als "Pool" definiert
• fixedGridsterWidgets sind Templates die auf allen Pages immer dargestellt werden
• pages sind die einzelnen Ansichten ohne die fixed Templates

widget_pagebutton

   
• ruft die definierte Page aus der Config anhand der ID auf. Ist aber noch nicht komplett fertig!

fhem-tablet-ui-config

   
• lädt die Konfigurationsdatei
• stellt Funktionen für den Seitenaufbau zur Verfügung

EDIT: hab noch meine fhem-tablet-ui-user.css angehangen. Sonst funktionieren die Designs aus der Config nicht.

[setstate]

Erstmal Danke für die rasche Umsetzung!

Das popup-widget funktioniert bei mir allerdings noch nicht richtig. Es wird war ein Pop-Up geöffnet, dieses aber "rechts neben" des gridster-Rasters. Zudem wird beim Schliessen des Pop-Ups automatisch auf die Default-Pagetab-Seite "geschalten". Soll das so sein, bzw. kann man das per data-blabla beeinflussen?

Die Beeinflussung von Pagetab durch den Popup Close Button konnte ich durch Wechsel von einem Hyperlink zu einem normalen DIV verbessern. Mit dem Fehler mit Gridster konnte ich aber nicht nachvollziehen. Hast du vllt. Änderungen im CSS gemacht, die das verursachen? Probiere mal temporär die CSS von Github.

[viegener]

Wenn ich einen Switch mit mulitStates (also data-get-on ist array) anlege habe ich keine Möglicht gefunden zu definieren, was der initiale Zustand des switches sein soll.

m.a.W. Der status wird richtig angezeigt, der innere Zustand des Knopes ist aber immer direkt nach dem Laden "off", oder habe ich etwas im Code übersehen?

Hintergrund ich habe eine Keymatic:

Code Auswählen Erweitern


<div data-type="switch" data-device="eine_keymatic"
  data-get-on='["locked","unlocked","unlocked (uncertain)","locked (uncertain)"]'
  data-icons='["fs-lock","fs-unlock","fs-unlock fa-blink","fs-lock fa-blink"]'
  data-on-colors='["#aa6900","#aa6900","#505050","#505050"]' 
  data-on-background-colors='["#aa6900","#aa6900","#505050","#505050"]'
  data-set-on="lock" data-set-off="unlock"
  data-background-icon="fa-square-o" class="">
</div>


Alles läuft gut, aber beim ersten Click (nach dem Neuladen) wird immer der Befehl lock gesendet auch wenn der Zustand bereits "locked" entspricht. Also scheint der innere Zustand des switches immer initial "off" zu sein.

[viegener]

Wenn ich einen Switch mit mulitStates (also data-get-on ist array) anlege habe ich keine Möglicht gefunden zu definieren, was der initiale Zustand des switches sein soll.

m.a.W. Der status wird richtig angezeigt, der innere Zustand des Knopes ist aber immer direkt nach dem Laden "off", oder habe ich etwas im Code übersehen?

Ok, selbst ist der Mann: Habe eine Änderung gemacht und als Pull request überstellt.
Dabei wird jetzt der erste Zustand in data-get-on als ON interpretiert und alle anderen als OFF.
Ist erstmal nur eine Minimallösung, denn eigentlich bräuchte man einen richtigen Automaten mit Übergängen und Zuständen, aber das wäre jetzt bei der Wärme wohl overkill...

Wers ausprobieren will:

in windget_famultibutton.js muss die funktion showMultiStates wie folgt am Ende aussehen
(nur die 6 Zeilen ab "var faelem" sind neu):

Code Auswählen Erweitern


        var idx=indexOfGeneric(states,state);
        if (idx>-1){
            var faelem = elem.data('famultibutton');
            if ( idx == 0 ) {
               faelem.setOn();
            } else {
               faelem.setOff();
            }
            elm.removeClass()
            .addClass('fa fa-stack-1x')
            .addClass(icons[idx])
            .css( "color", colors[idx] );
            var bgelm=elem.children().filter('#bg');
            bgelm.css( "color", bgcolors[idx]);
           
        }


[viegener]

Die Beeinflussung von Pagetab durch den Popup Close Button konnte ich durch Wechsel von einem Hyperlink zu einem normalen DIV verbessern. Mit dem Fehler mit Gridster konnte ich aber nicht nachvollziehen. Hast du vllt. Änderungen im CSS gemacht, die das verursachen? Probiere mal temporär die CSS von Github.

Bei mir erscheint das popup innerhalb vom Gridster-bereich allerdins sieht es so aus, als ob die Position des Popups von der Fenstergrösse abhängt (Beim Verändern der Fenstergrösse wandert das Popup) und es scheint, als ob die linke (obere ?) Ecke des popups mittig positioniert wird, denn diese erscheint etwa in der Mitte des Fensters.

(In diesem Fall Firefox auf Windows und safari auf iOS-ipad)

[Jewo]

New Widget: Popup Widget

Damit kann man, ähnlich wie beim Circle Menü, selten gebrauchte Widgets in ein Sub-Menü verfrachten. Beim Klick auf das Trigger-Widget (beliebig: Image, Button, Label o.ä.), öffnet sich mittig ein modaler Dialog, der beliebige andere FTUI Widgets zeigt.
Anwendungsfälle:
- Submenü für Station-Umschalter (TV/Radio Sender mit Icon)
- Wetter Details nach Klick auf Label "Wetter"
- Mini Cam-Vorschau nach Klick als großes Bild
- Mini Chart nach Klick als großes Chart

Hallo setstate,

es einmal vielen Dank an Dich und alle anderen für die super Arbeit.

Wie kann ich es anstellen, das das Popup in der Mitte "aufpoppt" ?

Zur Zeit erscheint es bei mir zu weit unten, Siehe Anhang.
Auf dem Tablet muss ich dann immer scrollen.

Gruß
Jens

[devil77]

Zu dem Problem mit simplechart und dblog habe ich die Lösung selber gefunden mit hilfe der commandref von dblog, denn dort steht

Code Auswählen Erweitern

where column_spec is <device>:<reading>:<default>:<fn>

Damit sieht das ganze dann so aus

Code Auswählen Erweitern


data-type="simplechart"
data-logdevice="myDbLog"
data-logfile="HISTORY"
data-columnspec="BZ.Stellantrieb_Clima:state:::$val=~s/.*T:\s([-\.\d]+).*/$1/eg"
data-minvalue="0"
data-maxvalue="40"
class="fullsize"
<

[lapidu]

Hallo zusammen,

habe mal wieder eine Frage zum Tablet UI.

Mann hat ja die Möglichkeit die Widgets per Drag & Drop auf der Website zu verschieben.
Wenn man die Seite neu lädt, sind die Widget wieder so wie sie vorhe waren.
Wie kann man das abspeichern?

Danke.

Lapidu

Hat schon jemand eine Idee?

[setstate]

Zum Speichern geänderter Gridster Koordinaten ist keine Funktion implementiert. War auch nicht vorgesehen. Das Bewegen ist nur ein zufälliges Feature, was Gridster mitbringt.

[Jewo]

Ok, ich habe in der widget_popup.js die Zeilen :

Code Auswählen Erweitern

top: ($(window).height() - dialog.outerHeight()) /2,
            left: ($(window).width() - dialog.outerWidth()) / 2

Geändert in:

Code Auswählen Erweitern

top: ($(window).height() - dialog.outerHeight()) / 9,
           left: ($(window).width() - dialog.outerWidth()) / 3

So ist es zumindest bei mir in der Mitte.

Gruß
Jens

Hallo setstate,

es einmal vielen Dank an Dich und alle anderen für die super Arbeit.

Wie kann ich es anstellen, das das Popup in der Mitte "aufpoppt" ?

Zur Zeit erscheint es bei mir zu weit unten, Siehe Anhang.
Auf dem Tablet muss ich dann immer scrollen.

Gruß
Jens

[setstate]

ich habs auf

Code Auswählen Erweitern


dialog.css({
     top: ($(window).height() / 2 - dialog.outerHeight()) / 2,
     left: ($(window).width() / 2 - dialog.outerWidth()) / 2
    });


geändert. Passt doch universeller, oder?

[devil77]

Gibt es eine Möglichkeit bei simplechart die min und max Anzeige in Abhängigkeit der Werte automatisch festzulegen?
data-minvalue= kleinster Wert im plot
data-maxvalue= größter Wert im plot

[viegener]

ich habs auf

Code Auswählen Erweitern


dialog.css({
     top: ($(window).height() / 2 - dialog.outerHeight()) / 2,
     left: ($(window).width() / 2 - dialog.outerWidth()) / 2
    });


geändert. Passt doch universeller, oder?

Bei mir nicht, aber wenn ich aus dem Minus ein Plus mache passt es sehr gut.

Also:

Code Auswählen Erweitern


                  dialog.css({
                       top: (($(window).height() / 2) + dialog.outerHeight()) / 2,
                       left: (($(window).width() / 2) + dialog.outerWidth()) / 2
                      });


[wolfram]

Hallo zusammen,

ich habe eine Frage und wollte mal fragen ob sowetwas überhaupt möglich ist.

Ich habe folgende Geräte:

Verstärker Marantz - verwende ich mit dem Denon-Modul.
MacMini - hier verwende ich das iTunes-Modul
VUPlus (Enigma2-Fernsehbox) - hier verwende ich das Enigma2-Modul

nun möchte ich , abhängig vom Input des Verstärkers, die buttons "Skip", "Play" und "Pause", unterschiedlich belegen (damit ich nicht für jedes Device extra Buttons benötige):

Mit anderen Worten:

Wenn der Input-Kanal meines Verstärkers "Tuner" ist, möchte ich gern über die "Skip"-buttons den Radiosender wechseln.
Wenn der Input-Kanal meines Verstärkers "mPlay" ist, möchte ich über die "Skip"-Buttons den iTunes-Song wechseln.
Wenn der Input-Kanal meines Verstärkers "SAT/Cabel" ist, möchte ich über die "Skip"-Buttons den Fernsehsender wechseln.

Für jeden Hinweis bin ich sehr dankbar.

vielen Dank und einen guten Wochenstart
wolf