Pluginidee: Wertänderung von Items auf Basis einer "Sollwertkurve"

[Onkelandy]

Sehr geil, vielen Dank, das klappt nun alles prima! Fast

Zeitzeiger mit der aktuellen Zeit sehe ich keinen bei mir... Ist aber auch kein Drama.
Blöder:
Das Entfernen funktioniert bei mir nicht mehr
Das (De)Aktivieren auch nicht. Teils wird hier noch ein Punkt direkt über dem geklickten Punkt erstellt.

Bezüglich Farben/CSS: Hier wäre cool, wenn du in die Doku die Klassen rein nehmen und/oder allen Elementen eine uzsu-Klasse geben könntest. Momentan hab ich folgende Sachen raus gefunden:
.uzsu-event-sunrise / sunset
.uzsu-min / max
.highcharts-button
.highcharts-point
.highcharts-markers
g.highcharts-series

Was ich nicht gerafft habe:
inaktive Punkte (lässt sich über die highcharts-color abfangen, die ist aber wohl immer anders nummeriert)
die Linie zwischen min und max. Die würde ich per Default gestricht/gepunktet machen, damit man nicht meint, es wäre eine Tangente für den Spline

Für's Erstellen eines neuen Punktes durch Klick ins nichts wäre das hier super hilfreich: http://jsfiddle.net/6me6j77z/

Über CSS kann sich jeder das crosshair bei Bedarf auch unsichtbar machen:
.highcharts-crosshair {
stroke-width: 1px;
stroke: rgba(244, 67, 54, 0);
}

sunrise/set event schreien fast nach sowas: symbol: 'url(https://www.highcharts.com/samples/graphics/sun.png)' statt dem Dreiecksmarker, nicht ? Oder der Marker, der von der Sonne abhängt.. wird aber wohl schwieriger sein..

Warum genau ist der Sonnenaufgang/untergang-Marker nicht auf draggableX: false,? Die Zeitpunkte werden ja berechnet, oder?

Zu guter letzt fehlt nur noch der "(De)Aktivieren-Button für die komplette UZSU (das uzsu Icon quasi neben den 3 Interpolations-Symbolen zB?) - dann bräucht man das klassische Popup so gut wie gar nicht mehr.

[Onkelandy]

Was würdest du davon halten, wenn man im UZSU popup nach Klick auf das uzsuicon zwischen Text- und Grafikeingabe hin und herschalten könnte? Als Tab/Pfeil links/rechts oder Symbole? Fände das sehr praktisch

[smai]

Zeitzeiger mit der aktuellen Zeit sehe ich keinen bei mir

Bei mir funktioniert dieser, hast du irgend eine Exception oder so?

Das Entfernen funktioniert bei mir nicht mehr
Das (De)Aktivieren auch nicht. Teils wird hier noch ein Punkt direkt über dem geklickten Punkt erstellt.

Auch das funktioniert bei mir.

die Linie zwischen min und max. Die würde ich per Default gestricht/gepunktet machen

Klingt sinnvoll, habe ich gemacht.

inaktive Punkte (lässt sich über die highcharts-color abfangen, die ist aber wohl immer anders nummeriert)

Aktiv müsste immer highcharts-color-0 und inaktive highcharts-color-1 sein.
Ich habe den Serien nun aber zusätzlich die Klassen uzsu-active und uzsu-inactive gegeben.
Dafür habe ich die Klasse bei ganz deaktivierter UZSU zu uzsu-inactive-all umbenannt.

Für's Erstellen eines neuen Punktes durch Klick ins nichts wäre das hier super hilfreich: http://jsfiddle.net/6me6j77z/

Sieht wirklich gut aus, habe ich eingebaut.
Die Werte werden mit Berücksichtigung von Step gerundet (so wie auch der Punkt erstellt wird).

sunrise/set event schreien fast nach sowas: symbol: 'url(https://www.highcharts.com/samples/graphics/sun.png)' statt dem Dreiecksmarker, nicht ?

Ich hatte mir das auch überlegt, wollte aber auf eine zusätzliche Grafik verzichten. Diese wäre dann auch nicht recht themeable.
Wenn mir tatsächlich mal langweilig wird, werde ich vielleicht ein eigenes Highcharts Symbol bauen (oder vielleicht sonst jemand?).

Oder der Marker, der von der Sonne abhängt.. wird aber wohl schwieriger sein.

Wäre genauso möglich, wird aber IMHO nicht übersichtlicher damit.

Warum genau ist der Sonnenaufgang/untergang-Marker nicht auf draggableX: false,? Die Zeitpunkte werden ja berechnet, oder?

Du kannst damit den Offset verschieben.
Oder meinst du von den Linien? Diese werden nicht berechnet, sondern sind Hardcoded bei 06:00 und 19:30. Diese zu berechnen wäre kompliziert und macht nur beschränkt Sinn, weil sie zu einer anderen Jahreszeit ja trotzdem woanders sein werden.

Zu guter letzt fehlt nur noch der "(De)Aktivieren-Button für die komplette UZSU

Ja, das habe ich auch schon gedacht, ist nun oben links eingebaut. Gestalterisch hätte es noch Potenzial, aber ich hab es mit vertretbarem Aufwand nicht besser hingekriegt in Highcharts.

Was würdest du davon halten, wenn man im UZSU popup nach Klick auf das uzsuicon zwischen Text- und Grafikeingabe hin und herschalten könnte?

Klingt schon interessant, gäbe aber wahrscheinlich einiges umzubauen.

[Onkelandy]

Zeitzeiger wird bei mir jetzt angezeigt -> top

Beim Aktivieren/Entfernen hatte ich beim Test jetzt noch 1 Mal das Problem, sonst aber nie. Mal sehen, ob das nochmals reproduzierbar ist. Klappt aber generell top!

CSS aktive/inaktive Marker - So kann ich das Ganze steuern: .uzsu-inactive .uzsu-event-time. Ohne event-time geht nix, da sich's dann nur auf die Gruppe, aber nicht auf den Pfad auswirkt. Passt aber eh gut so.

Fadenkreuz: Hammer!

Sonnensymbol: Was spricht denn gegen die Icons aus der Visu weather_sunrise und weather_sunset?

Sonnenlinien: Das ist ja sauberer Beschiss Komm jetzt vorallem nicht mit, wie das dann mit dem uzsu Scheduler zusammenspielt.. Denn dort wird ja der Sonnenauf/untergang des heutigen Tages tatsächlich in Echtzeit berechnet. Das wird dann ja durch das Graph Widget wieder zunichte gemacht oder nicht? Wie wärs denn, wenn das Plugin den Zeitpunkt für Sonnenauf- und untergang in das Item dict schreiben würde? Würde man nur den Minuten-Offset nutzen, würde sich's sogar recht leicht aus dem derzeitigen dict raus lesen lassen. Ist jetzt sicher nicht high prio, ich selbst nutz das eh gar nicht, aber wenn der Graph den eigentlich berechneten Wert verändert, ist das schon blöd.

Vielen Dank jedenfalls für die Updates, das ist jetzt schon ein richtig rundes Produkt. Hoffe, dass meine smarthomge-Plugin Änderungen auch mithalten Und das Popup zum Hin und Herschalten behalte ich auch mal im Auge.

[smai]

Was spricht denn gegen die Icons aus der Visu weather_sunrise und weather_sunset?

Das hatte ich mir auch überlegt. Diese würden aber als externe Bilder und nicht inline eingebunden und wären damit nicht färbbar.
Ich habe nun aber in stundenlanger Kleinarbeit weather_sunrise und weather_sunset als Highcharts Symbole abgebildet.

Sonnenlinien: Das ist ja sauberer Beschiss Komm jetzt vorallem nicht mit, wie das dann mit dem uzsu Scheduler zusammenspielt.. Denn dort wird ja der Sonnenauf/untergang des heutigen Tages tatsächlich in Echtzeit berechnet. Das wird dann ja durch das Graph Widget wieder zunichte gemacht oder nicht

Nein. Das Graph-Widget sendet wie das UZSU-Popup nicht die Zeit, sondern den Event sunrise oder sunset allenfalls mit Offset und frühestens/spätestens.

Der Graph zeigt dabei nicht den heutigen Stand an, sondern Werte, welche so etwa im Jahresdurchschnitt bei 50° Nord in der Mitte der Zeitzone gelten. Deshalb kann man in der Anzeige auch Auf- und Untergang verschieben.
Da die UZSU ja prinzipiell das ganze Jahr gilt, finde ich das nicht vollkommen falsch. Schöner wäre es aber natürlich schon, die heutigen Werte zu haben.
Noch schöner wäre es natürlich, wenn man das Datum auswählen könnte - aber das geht dann vielleicht wieder etwas weit.

[Onkelandy]

Ah, dann ist es ja nicht so dramatisch.. Aber wie wärs, wenn das Plugin ein dict mit sun: { Datum1: {Sonnenaufgang: Zeit, Sonnenuntergang: Zeit }, Datum2: {Sonnenaufgang: Zeit, Sonnenuntergang: Zeit }, etc.} mitliefert? Und zwar immer zur aktuellen Woche. Im Widget sieht man ja eh immer nur die aktuelle Woche. Aber ist sicher nur nice to have.

Noch n nice to have: wäre übersichtlicher und in mehrfacher Sicht sehr hilfreich, wenn das Fadenkreuz verschwindet, wenn ein Punkt gehighlighted wird. Zum einen, wird dann das Popup nicht verdeckt, zum anderen checkt man, dass man jetzt keinen neuen Punkt erstellt, sondern einen bestehenden anpasst. Was meinst du?

Bei mir ist die Sonne übrigens ganz ausgefüllt, was recht komisch aussieht im Vergleich zum normalen Icon.
Screen Shot 2018-09-05 at 13.52.28.png

[smai]

Ah, dann ist es ja nicht so dramatisch.. Aber wie wärs, wenn das Plugin ein dict mit sun: { Datum1: {Sonnenaufgang: Zeit, Sonnenuntergang: Zeit }, Datum2: {Sonnenaufgang: Zeit, Sonnenuntergang: Zeit }, etc.} mitliefert?

Ein einzelner Auf- und Untergang würde wohl auch reichen. Innerhalb einer Woche ändert das kaum so stark, dass es in der Grafik sichtbar ist.

wäre übersichtlicher und in mehrfacher Sicht sehr hilfreich, wenn das Fadenkreuz verschwindet, wenn ein Punkt gehighlighted wird.

Klingt vernünftig, werde ich versuchen.
Ich habe eben noch festgestellt, dass wenn man in die nähe der Kurve kommt, der nächste Punkt highlighted wird. Dadurch kann man kaum präzise neue Punkte einfügen. Versuche ich auch noch zu optimieren.

Bei mir ist die Sonne übrigens ganz ausgefüllt, was recht komisch aussieht im Vergleich zum normalen Icon.

Das ist nun aber meckern auf hohem Niveau. Du kannst das Icon gerne anpassen, der Code dazu sieht so aus:

    Highcharts.SVGRenderer.prototype.symbols.sunrise = function (x, y, w, h) {
      var wt = w/300, ht = h/300;
      var xt = x-20*wt, yt = y-20*ht-120*ht;
      return [
        'M',xt+ 79*wt,yt+267*ht,'h',   -4*wt,      'c',-3*wt,0   ,-5*wt, 2*ht,-5*wt, 5*ht,    'c',0,3*ht,2*wt,5*ht,5*wt,5*ht,'h',  4*wt,       'c', 3*wt, 0   ,  5*wt, -2*ht,  5*wt, -5*ht,                                    'c',0,-3*ht,-2*wt,-5*ht,-5*wt,-5*ht,'z',
        'M',xt+232*wt,yt+267*ht,'h',  -48*wt,      'c',-7*wt,0   ,-7*wt,10*ht, 0   ,10*ht,                                   'h', 48*wt,       'c', 7*wt, 0   ,  7*wt,-10*ht,  0   ,-10*ht,                                    'z',
        'M',xt+ 72*wt,yt+217*ht,'l',   18*wt,19*ht,'c', 5*wt,5*ht,12*wt,-3*ht, 8*wt,-7*ht,                                   'l',-19*wt,-19*ht,'c',-5*wt,-4*ht,-12*wt,  3*ht, -7*wt,  7*ht,                                    'z',
        'M',xt+127*wt,yt+172*ht,'v',   49*ht,      'c', 0   ,6*ht,10*wt, 6*ht,10*wt, 0*ht,                                   'v',-49*ht,       'c', 0   ,-7*ht,-10*wt, -7*ht,-10*wt,  0   ,                                    'z',
        'M',xt+201*wt,yt+194*ht,'l',  -34*wt,35*ht,'c',-5*wt,4*ht, 2*wt,12*ht, 7*wt, 7*ht,                                   'l', 34*wt,-35*ht,'c', 5*wt,-4*ht, -2*wt,-11*ht, -7*wt, -7*ht,                                    'z',
        'M',xt+195*wt,yt+239*ht,'l',  -14*wt, 5*ht,'c',-2*wt,1*ht,-4*wt, 4*ht,-3*wt, 7*ht,0   , 2*ht, 3*wt, 4*ht, 6*wt, 3*ht,'l', 14*wt, -6*ht,'c', 2*wt,-1*ht,  4*wt, -3*ht,  3*wt, -6*ht, 0   ,-2*ht,-3*wt,-4*ht,-6*wt,-3*ht,'z',
        'M',xt+154*wt,yt+206*ht,'l',   -6*wt,14*ht,'c',-1*wt,3*ht, 1*wt, 6*ht, 4*wt, 6*ht,2*wt, 1*ht, 5*wt,-1*ht, 6*wt,-3*ht,'l',  5*wt,-14*ht,'c', 1*wt,-2*ht, -1*wt, -5*ht, -3*wt, -6*ht,-3*wt,-1*ht,-5*wt, 1*ht,-6*wt, 3*ht,'z',
        'M',xt+101*wt,yt+209*ht,'l',    6*wt,14*ht,'c', 1*wt,2*ht, 3*wt, 4*ht, 6*wt, 3*ht,3*wt, 0   , 5*wt,-3*ht, 4*wt,-6*ht,'l', -6*wt,-14*ht,'c',-1*wt,-2*ht, -3*wt, -4*ht, -6*wt, -3*ht,                                    's',-5*wt,4*ht,-4*wt,6*ht,'z',
        'M',xt+286*wt,yt+281*ht,'H',xt+75*wt,      'c',-7*wt,0   ,-7*wt,10*ht, 0   ,10*ht,                                   'h',211*wt,       'c', 7*wt, 0   ,  7*wt,-10*ht,  0*wt,-10*ht,                                    'z',
        'M',xt+ 74*wt,yt+252*ht,'l',    8*wt, 4*ht,'c', 2*wt,1*ht, 5*wt,-1*ht, 6*wt,-4*ht,0   ,-3*ht,-1*wt,-5*ht,-4*wt,-6*ht,'l', -8*wt, -3*ht,'c',-2*wt,-1*ht, -5*wt,  1*ht, -6*wt,  3*ht,-1*wt, 3*ht, 1*wt, 5*ht, 4*wt, 6*ht,'z',
        'M',xt+ 94*wt,yt+280*ht,'v',  -29*ht,      'c', 0   ,-11*ht,9*wt,-20*ht,20*wt,-20*ht,                                'h', 35*wt,       'c',11*wt, 0   , 20*wt,  9*ht, 20*wt, 20*ht,                                    'v',29*ht
      ];
    };

Ernsthaft: Diese Icons sind ziemlich pain in the a... Sie müssen aus einem einzelnen SVG Path bestehen und mit Hilfe von w/h skaliert und mit x/y absolut positioniert werden. Ich habe Stunden gebraucht, um dies zurecht zu biegen und möchte nicht noch mehr investieren.

[Onkelandy]

Ich hätte mich ja mit nem schwarzen Sonnen-Icon begnügt Dann könnte man einfach url('weather_sunrise.svg') als symbol nutzen, bzw. mit nem Offset für die Position. Ich hatte es auch mal geschafft, das Icon über background-image über CSS zu definieren, weiß aber nicht mehr wie.Es war dann halt immer ein Image und ist nicht in die xml-Teile gesplittet worden, aber ich glaub, das hat dann ein js erledigt?

Egal.. wenn man den fill auf none und stroke-width verringert, sieht's eh super aus

Die Sonnenproblematik ist nun auch gelöst!
Für's device.js hätte ich hier einen commit (leider mit dem Quad Design PR kombiniert, sniff):
https://github.com/Martin-Gleiss/sma...137d0d5caea4cb

Das uzsu Plugin schreibt nun die zwei Infos einfach mit ins dict.
https://github.com/onkelandy/plugins...213381621809ab

[smai]

Ich hätte mich ja mit nem schwarzen Sonnen-Icon begnügt

Du vielleicht schon - aber im Standardtheme ist der Hintergrund schwarz, da wäre das suboptimal.
Das mit dem JS greift übrigens nur, wenn es als <img> Tag drin ist, nicht bei css background (zumindest das standard JS von SV).

Für's device.js hätte ich hier einen commit (leider mit dem Quad Design PR kombiniert, sniff):

Kannst du das trennen? So werde ich es nicht pullen (weder das eine noch das andere).

[Onkelandy]

PRs sind nun hoffentlich getrennt

[smai]

OK, werde ich mergen.
Allerdings finde ich das draggableX: false nicht so sinnvoll, so kann man ja immer nur den Stand heute anschauen und nicht prüfen, wie die Kurve z.B. im nächsten Winter ist.

[Onkelandy]

Ja, war da auch unschlüssig. Der Graph spiegelt dann halt nicht das wider, was eigentlich passiert. Andererseits kann das der User ja selbst entscheiden, wenn draggable auf ein ist. Insofern wohl besser "frei verschiebbar" wie du vorschlägst.

Beim Offset ist noch das Problem, dass der Offset nach Grad im graph nicht angezeigt wird. Ich könnte vom Plugin den kalkulierten Wert ins dict schreiben lassen. Ob man dann drauf zugreifen will oder nicht, ist dann ja offen Wobei nicht viel dagegen sprechen dürfte oder doch?

Ich hab gesehen, dass es beim Plugin Probleme mit dem Errechnen vom Sonnenauf- und Untergang gibt, wenn der Offset zu hoch ist. Die typische "sun is above horizon", die's auch bei smarthomeng manchmal gibt. Muss ich noch abfangen.

[Onkelandy]

Update ist online. Damit's keine Fehler gibt, falls man es mal mit den Offset-Graden übertreibt, müsst man sich auch noch das lib.orb updaten. Müsste aber auch ohne funzen.
https://github.com/smarthomeNG/smarthome/pull/278

Mit dem neuen Commit hat nun jeder Listeneintrag (zumindest bei denen was mit der Sonne passiert) auch einen "Calculated" Key mit dabei. In den wird immer aktuell die neue Kalkulation eingefügt, wie zB Offset über Grad-Angabe. Über den orb-commit werden hier auch sinnlose Angaben (zu hohe Offsets für die aktuelle Jahreszeit, etc.) berücksichtigt bzw. korrekt ins dict eingetragen: https://github.com/smarthomeNG/plugi...0f611f39d1fd39

[Onkelandy]

Und noch ein Update, das Duplikate aus dem dict löscht, da es sonst zu lustigen Überraschungen kommen kann
Apropos Überraschung, bei mir sieht das Widget recht kaputt aus, wenn man zur gleichen Zeit eines Sonnen-Events (z.B. 6.50 Uhr, weil dort genau der Sonnenaufgang ist) einen weiteren manuellen Wert eingibt. Mehr oder weniger jeder selbst schuld, allerdings kann man dann auch das Sonnenitem nicht mehr anfassen - es bleibt nur noch als Geist bestehen und die Linien (frühestens, spätestens) schwirren auch mittendrin rum.

Lösche ich den Eintrag aus dem dict zB übers Backend, ist der Geist auch brav weg, interessanterweise sind aber noch die min/max-Knubbel da.

Hat definitiv lowest prio und die Situation wird ziemlich sicher verhindert, wenn man für die Sonnenitems den "calculated" Wert aus dem dict einliest, das ich inzwischen eingebaut habe. Erwähnen wollt ich's trotzdem Bild siehe hier:
graph_bug.png

[Onkelandy]

Ich hab hier noch ein CSS, das man sich ins dropins legen kann, um die Farben selbst nach Lust und Laune anzupassen.

.highcharts-root .uzsu-event-sunrise { /* sunrise icon */
  fill: none;
  stroke: rgba(255, 185, 15, 1);
  stroke-width: 0.5px;
}

.highcharts-root .uzsu-event-sunset { /* sunset icon */
  fill: none;
  stroke: rgba(238, 118, 0, 1);
  stroke-width: 0.5px;
}

.highcharts-root .highcharts-point.uzsu-event-sunrise { /* sunrise-dependent point */
  fill: rgba(255, 185, 15, 0.8);
  stroke: rgba(255, 185, 15, 1);
  stroke-width: 1px;
}

.highcharts-root .highcharts-point.uzsu-event-sunset { /* sunset-dependent point */
  fill: rgba(238, 118, 0, 0.8);
  stroke: rgba(238, 118, 0, 1);
  stroke-width: 1px;
}

.highcharts-root .uzsu-min,
.highcharts-root .uzsu-max { /* min/max points for sun-events */
  fill: rgba(200, 185, 15, 0.5);
  stroke: rgba(200, 185, 15, 1);
  stroke-width: 1px;
}

.highcharts-root .uzsu-minmax .highcharts-graph { /* min/max line for sun-events */
  stroke-dasharray: 4px 3px;
  stroke-width: 1px;
  stroke-linecap: butt;
}

.highcharts-root .uzsu-now { /* current time */
  stroke: rgba(120, 67, 220, 0.5);
  stroke-width: 1px;
}

.highcharts-root .uzsu-event-time { /* standard point */
  fill: rgba(50, 67, 200, 1);
  stroke: rgba(244, 67, 54, 0.5);
  stroke-width: 1px;
}

.uzsu-inactive .uzsu-event-time { /* inactive point */
  fill: rgba(55, 55, 0, 0.5);
  stroke: rgba(55, 67, 54, 0.5);
  stroke-width: 1px;
}

.highcharts-root g.highcharts-series { /* graph */
  fill: blue;
  stroke: rgba(244, 67, 54, 0.5);
  stroke-width: 1px;
}

.highcharts-root .highcharts-button-normal { /* buttons for interpolation */
  stroke: rgba(255, 255, 255, 1);
  stroke-width: 1px;
}

.highcharts-root .uzsu-active-toggler { /* button for activation of whole uzsu item */
  fill: rgba(80, 180, 200, 0.5);
  stroke: rgba(100, 200, 250, 0.5);
  stroke-width: 1px;
}

.uzsu-all-inactive g.highcharts-series,
.uzsu-all-inactive .highcharts-point,
.uzsu-all-inactive .highcharts-markers,
.uzsu-all-inactive .uzsu-active-toggler { /* elements when whole item is set inactive */
  fill: #808080;
  stroke: #808080;
}