First steps...

[wvhn]

In den smartVISU-Plots kann man zoomen. Die Inline-Doku zeigt, wie das geht.

Die Zeitachse wird in der Regel auf ein festes Intervall eingestellt, also z.B. tmin='2d' und tmax='now'. Ein festes Anfangsdatum ist aktuell nicht möglich. Zwar unterstützt der shNG Websocket das, aber das Plot-Widget akzeptiert dies nicht für die Skalierung der X-Achse. Das nehme ich mal auf die to-do-Liste.

Gruß
Wolfram

[Tom Bombadil]

Gibt es bei den Plots eigentlich eine Möglichkeit, die Zeitachse variabel zu gestalten?

Ein plot.period mit dem Zoomtyp 'advanced' und mit tmin = '1m' sollte für das, was Du vorhast, sehr wahrscheinlich erstmal ausreichen. Bin mir nur grad nicht sicher, ob 'm' oder 'M' Monat bedeutet (Minuten wäre --> i, die sinds nicht).

Ggf. noch die Anzahl der Datenpunkte ein bisschen hochschrauben, sobald Du mehr Daten hast (default: 100) ...

/tom

[TheStig]

Schaue ich mir alles in Ruhe an, danke. Kurz nachgehakt, müsste das hier funktionieren https://www.highcharts.com/docs/stoc...745.1631526560 ?

[Tom Bombadil]

Das ist ziemlich genau das, was Du bei 'advanced' bekommst (siehe sV-Doku, da ist ganz unten ein Beispiel drin) ...
/tom

[TheStig]

Yes, sieht gut aus. Danke. Bastele da mal weiter...

Weitere Anfängerfrage: wie wird die Höhe eines Zoom-Plots bestimmt? Habe das noch nicht gefunden...

[wvhn]

Die Höhe hängt von mehreren Faktoren ab. In Deinem oben genannten Beispiel ist die Festlegung "chart: {height:'45%'}" ja schon enthalten. Dies stellt die Höhe auf 45% der Chart-Breite ein. Möglich ist auch ein Zahlenwert in Pixeln.

{{ plot.period( '', ['heizung.rk3.ladepumpe','heizung.sensoren.sf1','he izung.rk3.zirkulationspumpe'], 'raw', '2d', 'now', [30,70], [65,1] , '', ['Speicherladepumpe', 'Wasserspeichertemperatur', 'Zirkulationspumpe'], ['lightgray','#00719c'], ['areastair','areastair', 'areastair'], '', '5i', [2,1,2], [0,1], [], 'linear', '', {chart:{height:'45%', zoomType: 'xy'}, title:{text:'Warmwasser (48h)', align: 'left'}, yAxis:[{tickInterval:5},{visible:false}], legend:{align: 'right', floating:true, y:-3}, rangeSelector:{verticalAlign:'bottom',floating:tru e,x:-38,y:-57,inputBoxWidth:75,inputPosition:{x:40}}} ) }}

Zusätzlich muss das umgebende div natürlich groß genug sein. Wenn die smartVISU-Styles genutzt werden, dann müssen auch diese angepasst werden. Die CSS-Regeln für die Plots sind in der ./pages/base/base.css ab Zeile 1668 festgelegt. Die kann man in die visu.css im eigenen Seitenverzeichnis kopieren (immer ganze Blöcke) und dort abändern.

Gruß
Wolfram

[TheStig]

Danke dir Wolfram. Habe da mal durchgescannt und finde mich nicht wirklich zurecht. Mal am konkreten Beispiel:

 <div id="heizung_plot1_popup" class="heizung_plot_popup" data-role="popup" data-transition="flip" data-overlay-theme="c"
data-position="fixed" data-position-to="window" data-fullscreen="true" >
<a href="#" data-rel="back" data-role="button" data-icon="delete" data-iconpos="notext" class="ui-btn-right";>Close</a>
<span class="heizung_plot_popup_header" data-role="header" data-theme="c">Übersicht</span>
<div class="heizung_plot_popup_div">
{{ plot.period(
'', ['heizung.sensoren.af1', 'heizung.sensoren.vf1', 'heizung.sensoren.vf2', 'heizung.sensoren.ruef1', 'heizung.sensoren.ruef2'], 'raw', '14d', 'now',
[20,''], [70,''], '',['AT', 'Vorlauf Box', 'Vorlauf außen', 'Rücklauf Box', 'Rücklauf außen'], ['grey', '#00b0f0', 'red'], ['area', 'line', 'line'],
'', 'advanced', [2,1,1], [0,1], '', 'linear', '',
{chart:{zoomType: 'xy'}, title:{text:'Vorlauf und Rücklauf (14 Tage)', align: 'left'},
legend:{align: 'right', floating:true, y:-3}}
) }}
</div>
</div>

Wenn ich das ganze Popup-Window (also nicht das Chart selbst im Fenster, das ist voll ausgefüllt) größer machen möchte, wo geht das? In meiner (also Tom's visu.css) finde ich nichts entsprechendes zum justieren. Und in der Base.css auch nicht.

[wvhn]

• Im Widgetaufruf hast Du die Option „height“ jetzt heraus genommen. Das stand vorher vor der Option „zoomtype“ drin. Siehe Post #21.
• Das Popup wird über die Klasse "heizung_plot_popup" formatiert. Wo ist diese definiert? Vermutlich in der visu.css. Vielleicht gibt es auch eine eigene css- Datei in den Ordnern ./dropins oder ./pages/DeineSeiten. Oder Tom hat die base.css „gerade gebogen“ . Hier musst Du sehen, ob die Höhe begrenzt ist und dies ggfls. ändern.
• innerhalb des Popups legt die Klasse „heizung_plot_popup_div“ die Eigenschaften des Feldes fest, in dem der Plot angezeigt wird.
• Die Klassen für die smartVISU-Plots sind wie gesagt in der base.css. Die Zeilennummern habe ich genannt. Wenn die base.css verändert wurde, suche nach der Überschrift
  

  	/**
  	* --- W i d g e t s : P L O T ----------------------------------------------
  	*/

Ein tolles Werkzeug sind die Entwicklertools des Browsers. Klicke mit der rechten Maustaste auf den Plot und wähle „Element untersuchen“ aus dem Kontextmenü. Dann siehst Du für jedes html-Element, mit welchen Klassen die Eigenschaften festgelegt sind und wo diese Klassen definiert sind. Beginne bei dem Abschnitt

<div id="heizung_plot1_popup" class="heizung_plot_popup"…

Gruß
Wolfram

[TheStig]

Danke erneut.
- Das height ist wohl beim Basteln irgendwie rausgeflogen. Habs wieder reingesetzt
- Es gibt nur die visu.css im Ordner der Seiten. Sonst keinerlei css. Und in der visu.css ist nichts mit heizung_plot_popup_div definiert. So sieht sie aus (kommt ja wie gesagt alles von Tom)

/**
* -----------------------------------------------------------------------------
* @package smartVISU
* @author Martin Gleiß
* @copyright 2012 - 2015
* @license GPL [http://www.gnu.de]
* -----------------------------------------------------------------------------
*/

/**
* This file is for your own stylesheets.
*/

@CHARSET "UTF-8";


.base {
overflow: hidden;
margin: 0;
color: #fff /*{a-body-color}*/;
text-shadow: 0 /*{a-body-shadow-x}*/ 1px /*{a-body-shadow-y}*/ 1px /*{a-body-shadow-radius}*/ #111 /*{a-body-shadow-color}*/;
background: #222 /*{a-body-background-color}*/;
background-image: linear-gradient( #111 /*{a-body-background-start}*/, #222 /*{a-body-background-end}*/)
}

.ui-mobile {
size: landscape;
}

.base .primary {
width: 50%;
height: 100%;
}

.base .secondary {
width: 49%;
height: 100%;
}

.base .oneblock {
width: 100%;
height: 100%;
}


.ui-listview > .ui-li-has-thumb > .ui-btn, .ui-listview > .ui-li-static.ui-li-has-thumb {
padding-left: 0px;
text-align: center;
}

.plot {
height: auto;
}

/** von Quad
.content-primary {
width: 50%;
position: fixed;
top: 64px;
left: 0;
bottom: 0;
overflow: auto;
}

.content-secondary {
width: 50%;
position: fixed;
top: 64px;
right: 0;
bottom: 0;
}
**/


/** Diverses **/

.ui-right {
float: right;
margin-top: 5px;
margin-right: 5px;
}

div#menu.menu {
float: left;
margin-left: 5px;
}


/** Veränderte Anzeigen von Widgets **/

#index-clist {
column-count: 2
}

.phonelist {
column-count: 2
}



/** Buttonleiste mit Menü oben **/

.headerbutton1 {
float:left;
text-align:center;
border-right:solid black 1px;
padding-left: 0px;
height: 5% !important;
width: 7%;
}

.headerbutton2 {
float:left;
text-align:center;
border-right:solid black 1px;
padding-left: 0px;
height: 5% !important;
width: 11.52%;
display: inline;
overflow: hidden;
clear: right;
}

.listview {
white-space: nowrap;
display: inline;
clear: right;
}

.menubutton_frame {
position:relative;
width:85%;
padding-bottom:1.5em;
text-align:left;
}

.menubutton_pic {
position:fixed;
left:2.5em;
}

.menubutton_text {
font-size: large;
margin-top:0.75em;
margin-left:4em;
}

.ui-btn-active {
background-image: linear-gradient( #444444, #2d2d2d) !important;
}

- Die Klassen für die smartVISU-Plots habe ich in der base.css gefunden. Also den Ort, aber nicht, was ich damit anfangen soll. Da finde ich dann z.B. eine

.plot.plot-highstock {
height: 315px;
}

, aber ich sehe da den Link zu meiner heizung_plot_popup_div nicht.

[wvhn]

Wenn für die genannten Klassen tatsächlich keine CSS-Definitionen vorliegen, dann kannst Du die Größe des Popups selbst über die style-Eigenschaften festlegen. Auch das ist in der Inline-Doku beschrieben (Systemmenü -> Doku -> Popups). Hier die Ansicht der Doku-Seite mit zugehörigen Ansicht in der Entwicklerkonsole.

popup.png
Jede Eigenschaft kannst Du in dem Tool verändern und siehst sofort das Ergebnis. Neuladen der Seite setzt alles wieder zurück. Wenn Du Seiten gestalten / verändern willst, musst Du Dich mit den Grundzügen von html und css vertraut machen.

Für die Kombination smarthomeNG / smartVISU gibt es eine deutschsprachige Kurzanleitung, die die Zusammenhänge sehr gut darstellt. Lade diese in den Ordner ./pages/kurzanleitung herunter. Dann sollte sich im Systemmenü eine weitere Schaltfläche zeigen, mit der Du die Kurzanleitung innerhalb der smartVISU anzeigen kannst.

Gruß
Wolfram

[TheStig]

Danke dir Wolfram! Die "Untersuchen"-Sicht habe ich gefunden. Auch die dazugehörigen Styles. Jetzt muss ich da mal tiefer eintauchen, wo ich was wie ändere. Die Kurzanleitung werde ich mir mal zu Gemüte führen...mir fehlt es einfach an Grundlagenwissen.

[Tom Bombadil]

Ich würde (wie schon gesagt) an Deiner Stelle neue Plots schaffen. Das bringt für den Lerneffekt mehr, als Änderungen an meinem 'proof-of-concept' zu machen, da ist wirklich alles böse, ganz böse zusammengewürfelt und noch mitten aus der Ausprobierphase. Selbst das css ist da zum Teil im HTML hinterlegt - 'janz böser Stil'. Ich hatte das mal mittendrin beim Entwickeln jemandem zur Verfügung gestellt, daher gibt es das Repo bei git überhaupt nur.

Folgende Dinge beachten:

• Jeder Plot-Parameter wird an der Stelle erwartet, an der er dokumentiert ist. Die Doku ist Dein Freund. Am Ende kann man leere Parameter weglassen, mittendrin nicht.
  Benötigst Du einen Parameter, der mittendrin ist, nicht, dann stehen da zwei einzelne ' : ''. Auf keinen Fall diesen Parameter einfach weglassen - das Ergebnis wird nicht das erwartete sein.
• Hast Du 3 Kurven definiert: ['shNG-item1', 'shNG-item2', 'shNG-item3'], dann kannst Du in jedem folgenden Parameter entweder allen Kurven den gleichen Wert zuweisen: 'red', oder unterschiedliche - dann aber für jede Kurve einzeln aufführen: ['red', 'green', 'blue']. Die [ ] sorgen dafür, dass es als EIN Parameter mit mehreren Werten interpretiert wird. (meine heutige Anmerkung im HTD zur Farbe von ZP/SLP).
• Den letzten dokumentierten Parameter, der oft mit '{chart:' beginnt, solltest Du beim Experimentieren definitiv erstmal weglassen. Das schießt Steuerkommandos direkt zu Highcharts durch, also an der smartVISU vorbei. Da kann GANZ viel schiefgehen, selbst wenn man Übung darin hat (glaub mir - ich weiss, wovon ich rede, und Wolfram kann von meinem Gemaule darüber ein Lied singen).
• Lerne, die folgende Zeile zu interpretieren: '<div id="heizung_plot1" class="heizung_plot">'. Die id und die class können von Deinem css direkt angesteuert und formatiert werden.
• Die entsprechenden .css-Files hat Wolfram ja schon genannt. Wenn ich mich richtig erinnere (bitte korrigieren wenn falsch, Wolfram), überschreiben immer spätere Definitionen gleichnamige frühere. Die visu.css in Deiner Page wird erst nach dem Standard-css der smartVISU geladen. Und danach werden noch alle .css-Dateien eingesammelt , die im .css Unterverzeichnis Deiner Page liegen (hatte Stefan mit mir oder ich mit Stefan ;-) mal so ausgearbeitet). Also von der Definitionsreihenfolge bei gleichen Bezeichnern:
  
  smartVISU-Standard < page/visu.css < page/css/*.css < in html eingebettet

Hoffe, das hilft ein bisschen weiter,

/tom

Edit: Und wenn Dir das Zählen der Parameter zu heftig wird, kannst Du diese im HTML auch in mehrere Zeilen schreiben. Aus

{{ plot.period(id, item, mode, tmin, tmax, ymin, ymax, count, label, color, exposure, axis, zoom, assign, opposite, ycolor, ytype, unit, chartoptions) }}

wird im Extremfall

{{ plot.period(
  id,
  item,
  mode,
  tmin,
  tmax,
  ymin,
  ymax,
  count,
  label,
  color,
  exposure,
  axis,
  zoom,
  assign,
  opposite,
  ycolor,
  ytype,
  unit,
  chartoptions
) }}

[wvhn]

... und nochmal:
der geniale Widget Assistent von AndreK hilft Dir, das Widget live zu parametrieren und so lange zu spielen, bis alles passt. Der jeweilige Stand des ausprobierten (gerenderten) Codes ist jeweils in der Zwischenablage und kann nach Abschluss des Versuchs einfach in die endgültige html-Seite eingefügt werden.

[Tom Bombadil]

Stimmt, den vergess ich immer wieder - muss den endlich mal ausprobieren, greife reflexartig immer zum Editor. Der Mensch ist halt ein Gewohnheitstier. Aber vorher müsste ich die sV auf eine halbwegs aktuelle Version ziehen ...
/tom

[TheStig]

Danke euch weiterhin. Den Widget-Assistant habe ich fleißig genutzt und auch die grundlegende Logik verstehe ich im Ansatz. Habe meine Charts jetzt auch soweit gebaut, dass ich zufrieden bin. Aber beim Vergrößern des Popup-Fensters scheitere ich einfach. Ich bin auch mal in der Untersuchen-Ansicht unterwegs und ändere da die Heights an verschiedenen Stellen, aber da ist einfach zu komplex (es scheitert schon an der Frage, wie ich das dann überhaupt speichern könnte). Also irgendwo hier müsste das ja sein:
2021-09-17 11_44_50-Heizungssteuerung.png


Ich kann jetzt gut mit dem leben, was ich aktuell habe:

2021-09-17 11_44_00-Heizungssteuerung.png