New FHEM Tablet UI

[setstate]

Ja ich weiß.
Aber bei HM ist pct 100 wenn der Rolladen auf ist, d.h. wenn der Slider (Rolladen) oben ist habe ich 100 und wenn der Slider unten ist 0.
Daher sollte data-min="100" sein und data-max="0", dies funktioniert aber leider nicht  .

Ich verstehe leider dein Problem nicht.
Der Default Slider hat, wenn der Knopf unten ist den Wert 0 und oben 100. Die Variante mit class="negated" hat unten Wert 100 und oben 0. Was gibt es noch?
Bei den Farben Orange / Grau ist es  Ansichtssache, was oben und was unten sein soll. Eine schöne Erklärung beim Default Slider ist: "Wenn ich auf 20% stelle, habe ich unten nur noch ein einen kleinen Spalt, wo Sonne (Orange) reinkommt, oben ist schon alles dunkel. Kein Licht kommt mehr rein"

[setstate]

@setstate: hast du mal überlegt diese Änderung als Fix für den IE zu übernehmen ?
und hast du evt. auch eine Lösung für die Kurven ?

Ich muss leider jedesmal nach dem update auf deine neuen Versionen die Anpassung wieder  on Hand nachziehen

Okay, ich ändere jetzt die Linienbreite abhängig davon, ob vectorEffect verfügbar ist oder nicht. Ist aber noch nicht veröffentlicht. Ich will morgen nochmal drüber schauen ...

[Haecksler]

Ich verstehe leider dein Problem nicht.
Der Default Slider hat, wenn der Knopf unten ist den Wert 0 und oben 100. Die Variante mit class="negated" hat unten Wert 100 und oben 0. Was gibt es noch?
Bei den Farben Orange / Grau ist es  Ansichtssache, was oben und was unten sein soll. Eine schöne Erklärung beim Default Slider ist: "Wenn ich auf 20% stelle, habe ich unten nur noch ein einen kleinen Spalt, wo Sonne (Orange) reinkommt, oben ist schon alles dunkel. Kein Licht kommt mehr rein"

Wollte eigentlich Orange haben wenn der Rollo zu ist, aber dein "Licht" argument hat mich überzeugt  . Danke!

[mc-hollin]

so jetzt habe ich mich endlich auch mal mit der Widget Erstellung befasst.
Mir gefiel hier im Forum auch die simpleClock.
Da ich nicht nur die Url einbinden wollte, habe ich mich mal an ein Widget gewagt.
Hierbei habe ich mir nesges widget_clock als Vorlage genommen
Leider war ich mir nicht sicher wie ich auch davon ableiten kann und ob es auch sinnig ist. Daher habe ich ein paar Teile erst mal nur übernommen.
Folgendes ist dabei heraus gekommen.
Vielleicht kann es ja einer gebrauchen.
Bsp1.

Code Auswählen Erweitern

<div data-type="simpleClock" data-date-format="l, d. F Y" data-date-color="#fff" data-time-color="#fff" data-time-bg-colors='["#555","#000"]' class="big"></div>

Bsp2.

Code Auswählen Erweitern

<div data-type="simpleClock" data-date-format="l, d. F Y" data-date-color="#3f92ca" data-time-color="#fce740" data-time-bg-colors='["#2ebd13","#882200"]' class="big"></div>

Bei mir ist auf dem UI ein Hintergrundbild eingebaut und die Gridster haben eine Transparenz. Daher kann es sein, dass die Standardfarben etwas zu dunkel sein können.

Edit: widget_simpleClock leitet jetzt von widget_clock ab!
Edit: data-time-format eingebaut.

[StefanW]

Hallo,

ich hätte da einen kleinen Änderungswunsch in dem Symbol-Widget.

Wäre es möglich, das bei der State-Auswertung auch die Zustände "Open" & "Closed" zusätzlich mit ausgewertet werden?
Bei meinen FHT80TF-2 sind die States nämlich groß geschrieben.

Oder bin ich da mit dem Widget auf dem Holzweg?

Gruß
Stefan

[setstate]

Hallo,

ich hätte da einen kleinen Änderungswunsch in dem Symbol-Widget.

Wäre es möglich, das bei der State-Auswertung auch die Zustände "Open" & "Closed" zusätzlich mit ausgewertet werden?
Bei meinen FHT80TF-2 sind die States nämlich groß geschrieben.

Oder bin ich da mit dem Widget auf dem Holzweg?

Gruß
Stefan

Hallo Stefan,

du kannst die Defaultwerte der Widgets überschreiben:

Code Auswählen Erweitern

data-get-on="Open" data-get-off="Closed"

[nesges]

Leider war ich mir nicht sicher wie ich auch davon ableiten kann und ob es auch sinnig ist. Daher habe ich ein paar Teile erst mal nur übernommen.

Vom clock-Widget konnte man tatsächlich nicht sehr sinnvoll ableiten, daher habe ich die init-Funktion grade verschlankt und die Hauptaufgaben in init_datearray und init_datetext ausgelagert. Du könntest jetzt folgendermassen "ableiten" (JS kann nicht wirklich ableiten, es ist eher ein "mergen"):

Code Auswählen Erweitern

if (typeof widget_clock == 'undefined') {
    loadplugin('widget_clock');
}

var widget_simpleClock = $.extend({}, widget_clock, {

Damit stehen dir die beiden neuen Funktionen zur Verfügung. Der Rest ergibt sich sicher aus dem Code

[mc-hollin]

@nesges oder eher "Flash" 
super. Werde ich morgen mal mit rumspielen.
Vielleicht hast du gesehen, dass ich auch die Funktionalität für die Kalenderwoche eingebaut habe.
Eventuell macht es ja mehr Sinn, wenn du diese übernimmst.
Falls diese so OK ist und auch funktioniert.

[nesges]

Hatte ich nicht gesehen, ist aber sinnvoll das zu übernehmen (hab ich dann jetzt auch). Danke!

[kleing]

Hallo setstate,
vielen Dank für die Anpassungen am simplechart, allerdings bin ich gerade mit meinem Latein am Ende.
Ich habe die Tablet Ui upgedated (und den FHEM Server neu gestartet) und aus meinen ehemals drei vollständig angezeigten Grafiken kommt beiliegendes Bild raus.
Die erste Grafik wird korrekt dargestellt, die zweite fehlt bis auf Caption und X Achsenbeschriftung und bei der dritten fehlt die Messkurve.

Wo mache ich den Fehler?

Anbei noch die Definitionen:

Code Auswählen Erweitern


        <header>GRAFIKEN</header>
        <div data-type="simplechart"
data-logdevice="FileLog_KS300"
data-logfile="-"
data-columnspec="4:KS300.*:1"
data-minvalue="-25"
data-maxvalue="35"
data-width="220"
data-height="150"
data-yticks="5"
data-xticks="720"
data-daysago="1"
data-caption="Aussentemperatur"
class="cell">
</div> 
        <div data-type="simplechart"
data-logdevice="FileLog_KS300"
data-logfile="-"
data-columnspec="10:KS300.*:1:delta-h"
data-minvalue="0"
data-maxvalue="10"
data-width="220"
data-height="150"
data-yticks="1"
data-xticks="720"
data-daysago="1"
data-caption="Regen l/h"
class="cell">
</div> 
        <div data-type="simplechart"
data-logdevice="FileLog_KS300"
data-logfile="-"
data-columnspec="8:KS300.*:1"
data-minvalue="0"
data-maxvalue="100"
data-width="220"
data-height="150"
data-yticks="10"
data-xticks="720"
data-daysago="1"
data-caption="Wind"
class="cell">
</div> 


Vielen Dank,
Gruß
Gerald

[mc-hollin]

Hallo nesges,

kannst du mal im widget_clock.init_datetext schauen ob folgender Code auch funktionieren würde?

Code Auswählen Erweitern


for (var l = 0; l < datearr.length; l++) {
      if (!(d[datearr[l]] == null)) {datearr[l] = d[datearr[l]];};
}

Hatte den so bei mir im Einsatz und das schien zu laufen.
Hierdurch hatte ich den 2. Schleifendurschlauf gespart.
Oder mache ich da einen Fehler?

Zum Verständnis:
Wie verhält es sich mit der Zeile?

Code Auswählen Erweitern

base = this;
Wird hier alles gehalten oder nur das Basis Objekt (bei mir dein widget_clock)?
Ich denke doch alles .

Wenn ich das init_attr deiner Klasse auch aufrufen will, mache ich das dann mit ?

Code Auswählen Erweitern

widget_clock.init_attr($(this));
Da ich das ja am Anfang geladen habe.

Edit: widget_simpleClock leitet jetzt von widget_clock ab und scheint auch zu funktionieren.

[setstate]

Hallo Gerald,

du machst nix falsch, ich muss da noch einigen optimieren, dass das für alle Bereich besser passt.
Update folgt.

[bjoernbo]

wo du dabei bist... schau dir mal meinen Temperaturverlauf an. Die Darstellung ist so nicht richtig, obwohl ich eindeutige Werte habe.

[uniqueck]

Vielen Dank für das schöne Uhrzeit Widget.

so jetzt habe ich mich endlich auch mal mit der Widget Erstellung befasst.
Mir gefiel hier im Forum auch die simpleClock.
Da ich nicht nur die Url einbinden wollte, habe ich mich mal an ein Widget gewagt.
Hierbei habe ich mir nesges widget_clock als Vorlage genommen
Leider war ich mir nicht sicher wie ich auch davon ableiten kann und ob es auch sinnig ist. Daher habe ich ein paar Teile erst mal nur übernommen.
Folgendes ist dabei heraus gekommen.
Vielleicht kann es ja einer gebrauchen.
Bsp1.

Code Auswählen Erweitern

<div data-type="simpleClock" data-date-format="l, d. F Y" data-date-color="#fff" data-time-color="#fff" data-time-bg-colors='["#555","#000"]' class="big"></div>

Bsp2.

Code Auswählen Erweitern

<div data-type="simpleClock" data-date-format="l, d. F Y" data-date-color="#3f92ca" data-time-color="#fce740" data-time-bg-colors='["#2ebd13","#882200"]' class="big"></div>

Bei mir ist auf dem UI ein Hintergrundbild eingebaut und die Gridster haben eine Transparenz. Daher kann es sein, dass die Standardfarben etwas zu dunkel sein können.

Edit: widget_simpleClock leitet jetzt von widget_clock ab!

[update71]

Moin, is ja so ruhig hier in letzter Zeit

Hab ich irgendwas nicht mitbekommen oder warum bringt der Code hier keinen ablaufenden Kreis mehr?

Code Auswählen Erweitern

<div data-type="push" class="cell bigger" data-device="HWR_Zirkulation" data-set="on-for-timer 300"></div>
Schaltet wie es soll aber der ablaufende Kreis is wech ... das ging mal. Ich weis jetzt aber nicht wie lange es schon nicht mehr funktioniert. Hab das erst wieder ausgekramt.
UI ist aktuell.

Gruß Thomas