Diagramm mit festen Werten in VIS - nur wie?

[hama19]

@vowill Ich würde mich der Frage anschließen, ich habe auch gedacht, hier suche ich am ersten, ob es schon Anpassungen am Script gibt. Seit der Umstellung zeigt es völlig falsche Sachen an. Meine Frau verlässt sich auf die 18,4 und wäscht und backt, dabei war der Preis eigentlich 32cent. Also Tibber hat die Art der Datenpunkte beibehalten, nur auf 99 Punkte im Viertelstunden-Takt erweitert.
Hier mal ein Screenshot, vielleicht erklärt es schon einiges:

[vowill]

@hama19 Danke. Wäre super, wenn du den Baum mit den Datenpunkten als (json-)Datei herunterladen und mir per Mail zusenden kannst. Dann kann ich das Skript vermutlich anpassen. (Ich selbst bin mangels steuerbarer Verbraucher nicht mehr bei Tibber.)
Ändert Tibber die Preise tatsächlich im 15-mim-Takz, oder bleiben 4 Werte nacheinander jeweils gleich?

[Ron 0]

@vowill moin moin, ja Tibber zeigt seit einiger Zeit einen 15 Minuten Takt an. Für meine Daten habe ich dir eine Nachricht gesendet.
Grüße
Ron

[hama19]

@vowill wie gewünscht habe ich Dir die Datenpunkte per Mail gesandt. Ja, es ist wirklich so, dass Tibber jetzt im Viertelstundentakt abrechnet und sich auch dementsprechend die Preise viermal in der Stunde ändern können.

[Hant0r]

Moin zusammen,
die, die das Script haben, ihr müsst den "Schleifenzähler" statt 25 auf 95 setzen, dann geht es wieder:

[vowill]

@hant0r Hallo Hant0r, danke für den "quick-fix"-Tipp!
Ich habe eine etwas umfangreichere Überarbeitung fertig, die gerade bei hama19 im Test ist. Diese korrigiert dann auch die Darstellung des Mittelwerts sowie den vertikalen Zeiger, der alle 5 min weitergeschaltet wird und die Orientierung im Diagramm erleichtert.
Ich poste das hier als js-Skript, sobald der Test abgeschlossen ist. Blockly dann, wie immer, gerne per Mail nach Anfrage im Chat.

[vowill]

Hier nun das Update für die Anzeige der Tibber-Daten (heute/morgen) in einem EChart (z.B. für vis). Das sieht dann z. B. in einem "View in Pop-up" so aus:

Hierfür holt sich das erste Skript die Daten im Objektbaum des Tibber-Adapters, hier unter ‚tibberlink.0.Homes.xxx.PricesToday.json' und '...xxx.PricesTomorrow.json‘, und schreibt sie als JSON im Format "ts" und "val" in einen (von dir anzulegenden) Datenpunkt namens '0_userdata.0.Stromversorgung.Tibber-Preise'. Der EChart-Adapter kann diese Daten direkt einlesen und darstellen; dazu muss im EChart-Adapter die Quelle lediglich auf JSON eingestellt und der genannte Datenpunkt angegeben werden (siehe auch https://github.com/ioBroker/ioBroker.echarts#readme). Damit auch der Mittelwert im EChart eingelesen werden kann, schreibt das Skript den Mittelwert aus dem Tibber-Datenpunkt im gleichen JSON-Format in den (ebenfalls anzulegenden) Datenpunkt '0_userdata.0.Stromversorgung.Tibber-Mittelwerte'.

var nur_Daten_fuer_heute, Quelldaten, Anzahl_Daten_heute, JSON_fuer_ECharts, letzte_Laenge, average_price, Schleifenzaehler;

function textCount(haystack, needle) {
  if (needle.length === 0) {
    return haystack.length + 1;
  } else {
    return haystack.split(needle).length - 1;
  }
}

function subsequenceFromStartLast(sequence, at1) {
  var start = at1;
  var end = sequence.length - 1 + 1;
  return sequence.slice(start, end);
}


// Daten von Tibber auf Änderung prüfen
// Nov. 2025: Umbau auf 15-min-Takt
on({ id: [].concat(['tibberlink.0.Homes.xxx.PricesToday.json']).concat(['tibberlink.0.Homes.xxx.PricesTomorrow.json']), change: 'ne' }, async (obj) => {
  // warten bis alle Daten stabil sind:
  await wait(5000);
  // prüfen, für welche Tage Daten da sind:
  // Prices.Tomorrow
  if (getState('tibberlink.0.Homes.xxx.PricesTomorrow.json').val == '[]') {
    nur_Daten_fuer_heute = true;
  } else {
    nur_Daten_fuer_heute = false;
  }
  // Daten von Tibber holen:
  Quelldaten = getState('tibberlink.0.Homes.xxx.PricesToday.json').val;
  Anzahl_Daten_heute = textCount(Quelldaten, 'startsAt');
  if (!nur_Daten_fuer_heute) {
    // Zusammenführung in eine Variable:
    // zuerst Daten von heute rechtsbündig bereinigen:
    while (Quelldaten.charAt((Quelldaten.length - 1)) != '}') {
      Quelldaten = Quelldaten.slice(0, Quelldaten.length - 1);
      // Zwangsabbruch, falls Endlosschleife droht:
      if (Quelldaten.length < 20) {
        break;
      }
    }
    Quelldaten = [Quelldaten,', ',subsequenceFromStartLast(getState('tibberlink.0.Homes.xxx.PricesTomorrow.json').val, 1)].join('');
  }
  // Datenformat umwandeln:
  JSON_fuer_ECharts = '[{"ts": ';
  while (Quelldaten.indexOf('startsAt') + 1 > 0) {
    letzte_Laenge = Quelldaten.length;
    JSON_fuer_ECharts = [JSON_fuer_ECharts,getDateObject(getAttr((() => { try { return JSON.parse(Quelldaten); } catch (e) { return {}; }})(), '0.startsAt')).getTime(),', "val": '].join('');
    JSON_fuer_ECharts = [JSON_fuer_ECharts,getAttr((() => { try { return JSON.parse(Quelldaten); } catch (e) { return {}; }})(), '0.total'),'}, {"ts": '].join('');
    if (Quelldaten.indexOf('},') + 1 < 2) {
      break;
    }
    Quelldaten = '[' + String(Quelldaten.slice(((Quelldaten.indexOf('},') + 1 + 2) - 1), Quelldaten.length));
    // Zwangsabbruch, falls Endlosschleife droht:
    if (Quelldaten.length == letzte_Laenge) {
      break;
    }
  }
  JSON_fuer_ECharts = String(JSON_fuer_ECharts.slice(0, JSON_fuer_ECharts.lastIndexOf('}, {"ts":') + 1)) + ']';
  if (nur_Daten_fuer_heute) {
    // kein Datensatz für Morgen --> Werte generieren:
    average_price = getAttr((() => { try { return JSON.parse(JSON_fuer_ECharts); } catch (e) { return {}; }})(), (String(('' + (Anzahl_Daten_heute - 1))) + '.val'));
    Quelldaten = JSON_fuer_ECharts;
    JSON_fuer_ECharts = String(Quelldaten.slice(0, Quelldaten.length - 1)) + ', {"ts": ';
    while (Quelldaten.indexOf('ts') + 1 > 0) {
      letzte_Laenge = Quelldaten.length;
      // Fortschreiben des letzten Tageswerts:
      JSON_fuer_ECharts = [JSON_fuer_ECharts,getAttr((() => { try { return JSON.parse(Quelldaten); } catch (e) { return {}; }})(), '0.ts') + 86400000,', "val": ',average_price,'}, {"ts": '].join('');
      if (Quelldaten.indexOf('},') + 1 < 2) {
        break;
      }
      Quelldaten = '[' + String(Quelldaten.slice(((Quelldaten.indexOf('},') + 1 + 2) - 1), Quelldaten.length));
      // Zwangsabbruch, falls Endlosschleife droht:
      if (Quelldaten.length == letzte_Laenge) {
        break;
      }
    }
    JSON_fuer_ECharts = String(JSON_fuer_ECharts.slice(0, JSON_fuer_ECharts.lastIndexOf('}, {"ts":') + 1)) + ']';
  }
  setState('0_userdata.0.Stromversorgung.Tibber-Preise' /* Tibber-Preise */, JSON_fuer_ECharts, true);
  // Datensatz für die Mittelwerte generieren:
  Quelldaten = JSON_fuer_ECharts;
  JSON_fuer_ECharts = '[{"ts": ';
  average_price = getState('tibberlink.0.Homes.xxx.PricesToday.average.total').val;
  Schleifenzaehler = 0;
  while (Quelldaten.indexOf('ts') + 1 > 0) {
    if (Schleifenzaehler == Anzahl_Daten_heute) {
      if (nur_Daten_fuer_heute) {
        // letzter Tageswert bleibt stehen; danach Abbruch
      } else {
        average_price = getState('tibberlink.0.Homes.xxx.PricesTomorrow.average.total').val;
      }
    }
    if (Schleifenzaehler > Anzahl_Daten_heute && nur_Daten_fuer_heute) {
      break;
    }
    letzte_Laenge = Quelldaten.length;
    JSON_fuer_ECharts = [JSON_fuer_ECharts,getAttr((() => { try { return JSON.parse(Quelldaten); } catch (e) { return {}; }})(), '0.ts'),', "val": ',average_price,'}, {"ts": '].join('');
    if (Quelldaten.indexOf('},') + 1 < 2) {
      break;
    }
    Quelldaten = '[' + String(Quelldaten.slice(((Quelldaten.indexOf('},') + 1 + 2) - 1), Quelldaten.length));
    // Zwangsabbruch, falls Endlosschleife droht:
    if (Quelldaten.length == letzte_Laenge) {
      break;
    }
    Schleifenzaehler = (typeof Schleifenzaehler === 'number' ? Schleifenzaehler : 0) + 1;
  }
  JSON_fuer_ECharts = String(JSON_fuer_ECharts.slice(0, JSON_fuer_ECharts.lastIndexOf('}, {"ts":') + 1)) + ']';
  setState('0_userdata.0.Stromversorgung.Tibber-Mittelwerte' /* Tibber-Mittelwerte */, JSON_fuer_ECharts, true);
});

('xxx' muss natürlich durch den eigenen Tibber-Code ersetzt werden.)

Die Positionierung der vertikalen roten Linie an der richtigen (Tageszeit-)Stelle erfolgt im zweiten Skript: Dieses läuft alle 5 Minuten, berechnet die benötigte horizontale Bildschirmposition (in px) und legt diese im (anzulegenden) Datenpunkt '0_userdata.0.Stromversorgung.Tibber_Tageszeiger_ECharts' ab. Desweiteren liest sie den zu dieser Tageszeit anstehenden Strompreis aus dem oben schon eingeführten JSON-Datenpunkt aus und schreibt diesen zusammen mit der Uhrzeit in den (anzulegenden) Datenpunkt '0_userdata.0.Stromversorgung.Tibber_Tageswerte_ECharts'.

var schedule1, Pos_um_0_Uhr, Pos_um_24_Uhr, Werte_pro_Stunde, Nummer_des_Datenwerts;

function textCount(haystack, needle) {
  if (needle.length === 0) {
    return haystack.length + 1;
  } else {
    return haystack.split(needle).length - 1;
  }
}

function textReplace(haystack, needle, replacement) {
  needle = needle.replace(/([-()[]{}+?*.$\^|,:#<!\])/g, '\\$1')
                 .replace(/\x08/g, '\\x08');
  return haystack.replace(new RegExp(needle, 'g'), replacement);
}


// Nov. 2025: Umbau auf 15-min-Takt
schedule1 = schedule('*/5 * * * *', async () => {
  // anpassen auf das eigene Display:
  // Offset = Pos. bei 0:00 Uhr = 115px von links;
  // Pos. um 24 Uhr bei Offest+862px von links
  Pos_um_0_Uhr = 115;
  Pos_um_24_Uhr = 862;
  // Formel: Pos. =
  // (Pos_um_0_Uhr) +(x/1440)*(Pos_um_24_Uhr)
  // mit Wert x = lfd. Minute des heutigen Tages
  // der folgende Block aktiviert die Linie um 0 Uhr:
  // der folgende Block aktiviert die Linie um 24 Uhr:
  // der folgende Block berechnet tagesaktuell:
  setState('0_userdata.0.Stromversorgung.Tibber_Tageszeiger_ECharts' /* Tibber Tageszeiger ECharts */, (Math.round(Pos_um_0_Uhr + (((new Date().getTime()) - /* start of day */ (() => { const d = new Date(); d.setHours(0, 0, 0, 0); return d.getTime(); })()) / 60000) * (Pos_um_24_Uhr / 1440))), true);
  Werte_pro_Stunde = Math.round(textCount(getState('0_userdata.0.Stromversorgung.Tibber-Preise').val, 'val') / 2) / 24;
  Nummer_des_Datenwerts = formatDate(new Date(), 'SS') * Werte_pro_Stunde + Math.floor(formatDate(new Date(), 'mm') / (60 / Werte_pro_Stunde));
  setState('0_userdata.0.Stromversorgung.Tibber_Tageswerte_ECharts' /* Tibber Tageswerte ECharts */, ([formatDate(new Date(), 'hh:mm'),' Uhr: ',textReplace(('' + Math.round((getAttr((() => { try { return JSON.parse(getState('0_userdata.0.Stromversorgung.Tibber-Preise').val); } catch (e) { return {}; }})(), (String(('' + Nummer_des_Datenwerts)) + '.val')) * 100) * 10) / 10), '.', ','),' cent'].join('')), true);
  console.info(getState('0_userdata.0.Stromversorgung.Tibber_Tageswerte_ECharts').val);
});

Für die Darstellung in vis kann für die vertikale Linie z. B. ein vis-inventwo-Universal-Widget eingesetzt werden, bei dem unter 'CSS Allgemein' als 'left'-Position der Wert '{0_userdata.0.Stromversorgung.Tibber_Tageszeiger_ECharts}' eingetragen wird. Hier das von mir verwendete Widget zum Import in vis-1:

[{"tpl":"i-vis-universal","data":{"g_fixed":true,"g_visibility":false,"g_css_font_text":false,"g_css_background":false,"g_css_shadow_padding":false,"g_css_border":false,"g_gestures":false,"g_signals":false,"g_last_change":false,"visibility-cond":"==","visibility-val":1,"visibility-groups-action":"hide","iUniversalWidgetType":"Background","iValueType":"boolean","iValueComparison":"equal","iStateResponseTime":"0","iStateResetValueTime":"0","iNavWait":"100","iPopUpBackground":"#666666","iPopUpPreventClickOutside":"","iPopUpShowTitle":"true","iPopUpTitle":"","iPopUpTitleColor":"#ffffff","iPopUpCloseBtnColor":"#dc2e2e","iPopUpWidth":"800px","iPopUpHeight":"500px","iPopUpHeightTitle":"50","iPopUpTitleSize":"28","iPopUpPosition":"center","iPopUpPositionX":"0","iPopUpPositionY":"0","iPopUpCloseAfterSeconds":"0","iPopUpCornerRadiusUL":"12","iPopUpCornerRadiusUR":"0","iPopUpCornerRadiusLR":"12","iPopUpCornerRadiusLL":"0","iPopUpShadowXOffset":"2","iPopUpShadowYOffset":"2","iPopUpShadowBlur":"2","iPopUpShadowSpread":"1","iPopUpShadowColor":"#111111","iButtonCol":"#ff0000","iButtonActive":"#ff0000","iButtonColHover":"","iOpacityBack":"1","iCornerRadiusUL":"0","iCornerRadiusUR":"0","iCornerRadiusLR":"0","iCornerRadiusLL":"0","iContentFlexDirection":"vertical","iContentVertAlign":"iSpace-between","iContentOrder":"orderImgText","iOpacityCtn":"1","iContentType":"image","iTextColor":"#ffffff","iTextColorActive":"#ffffff","iTextSize":"12","iTextAlign":"iStart","iTextSpaceTop":"0","iTextSpaceBottom":"0","iTextSpaceLeft":"0","iTextSpaceRight":"0","iIconSize":"35","iImgAlign":"iCenter","iImgSpaceTop":"5","iImgSpaceBottom":"0","iImgSpaceLeft":"0","iImgSpaceRight":"0","iImgRotation":"0","iImgBlinkFalse":"0","iImgBlinkTrue":"0","iImgColorFalse":"","iImgColorTrue":"","iImgClockFace":"01","iImgClockHands":"01","iImgClockShowBorder":"1","iImgColorClockFace":"#ffffff","iImgColorHands":"#ffffff","iImgColorHandSecond":"#ff0000","iClockShowSeconds":"","iClockTimezone":"Europe/Berlin","iHtmlTextFieldFalse":"","iHtmlTextFieldTrue":"","iShadowXOffset":"0","iShadowYOffset":"0","iShadowBlur":"0","iShadowSpread":"0","iShadowColor":"","iShadowColorActive":"","iShadowColorHover":"","iShadowInnerXOffset":"0","iShadowInnerYOffset":"0","iShadowInnerBlur":"0","iShadowInnerSpread":"0","iShadowInnerColor":"","iShadowInnerColorActive":"","iShadowInnerColorHover":"","iShadowTextXOffset":"0","iShadowTextYOffset":"0","iShadowTextBlur":"0","iShadowTextColor":"","iShadowTextColorActive":"","iBorderSize":"0","iBorderStyle":"none","iBorderColor":"#ffffff","iBorderColorActive":"#ffffff","iBorderColorHover":"","signals-cond-0":"==","signals-val-0":true,"signals-icon-0":"/vis/signals/lowbattery.png","signals-icon-size-0":0,"signals-blink-0":false,"signals-horz-0":0,"signals-vert-0":0,"signals-hide-edit-0":false,"signals-cond-1":"==","signals-val-1":true,"signals-icon-1":"/vis/signals/lowbattery.png","signals-icon-size-1":0,"signals-blink-1":false,"signals-horz-1":0,"signals-vert-1":0,"signals-hide-edit-1":false,"signals-cond-2":"==","signals-val-2":true,"signals-icon-2":"/vis/signals/lowbattery.png","signals-icon-size-2":0,"signals-blink-2":false,"signals-horz-2":0,"signals-vert-2":0,"signals-hide-edit-2":false,"lc-type":"last-change","lc-is-interval":true,"lc-is-moment":false,"lc-format":"","lc-position-vert":"top","lc-position-horz":"right","lc-offset-vert":0,"lc-offset-horz":0,"lc-font-size":"12px","lc-font-family":"","lc-font-style":"","lc-bkg-color":"","lc-color":"","lc-border-width":"0","lc-border-style":"","lc-border-color":"","lc-border-radius":10,"lc-zindex":0,"name":"Tageszeit vertikale Linie ","iHttpType":"iSend","iTextDecoration":"none","class":"showMedelayed"},"style":{"left":"{0_userdata.0.Stromversorgung.Tibber_Tageszeiger_ECharts}","top":"66px","width":"2px","height":"820px","z-index":"15"},"widgetSet":"vis-inventwo"}]

Die Textanzeige erfolgt durch ein einfaches basic-String-Widget, dessen left-Position genauso angegeben wird. Hier als Beispiel:

[{"tpl":"tplValueString","data":{"oid":"0_userdata.0.Stromversorgung.Tibber_Tageswerte_ECharts","g_fixed":true,"g_visibility":false,"g_css_font_text":true,"g_css_background":false,"g_css_shadow_padding":false,"g_css_border":false,"g_gestures":false,"g_signals":false,"g_last_change":false,"visibility-cond":"==","visibility-val":1,"visibility-groups-action":"hide","signals-cond-0":"==","signals-val-0":true,"signals-icon-0":"/vis/signals/lowbattery.png","signals-icon-size-0":0,"signals-blink-0":false,"signals-horz-0":0,"signals-vert-0":0,"signals-hide-edit-0":false,"signals-cond-1":"==","signals-val-1":true,"signals-icon-1":"/vis/signals/lowbattery.png","signals-icon-size-1":0,"signals-blink-1":false,"signals-horz-1":0,"signals-vert-1":0,"signals-hide-edit-1":false,"signals-cond-2":"==","signals-val-2":true,"signals-icon-2":"/vis/signals/lowbattery.png","signals-icon-size-2":0,"signals-blink-2":false,"signals-horz-2":0,"signals-vert-2":0,"signals-hide-edit-2":false,"lc-type":"last-change","lc-is-interval":true,"lc-is-moment":false,"lc-format":"","lc-position-vert":"top","lc-position-horz":"right","lc-offset-vert":0,"lc-offset-horz":0,"lc-font-size":"12px","lc-font-family":"","lc-font-style":"","lc-bkg-color":"","lc-color":"","lc-border-width":"0","lc-border-style":"","lc-border-color":"","lc-border-radius":10,"lc-zindex":0,"class":"showMedelayed","name":"Tageszeit Preis ","html_prepend":"&nbsp &nbsp "},"style":{"left":"{0_userdata.0.Stromversorgung.Tibber_Tageszeiger_ECharts}","top":"70px","z-index":"15","width":"300px","height":"30px","color":"#ff0000","text-align":"left","font-family":"Arial, Helvetica, sans-serif","font-style":"normal","font-variant":"normal","font-weight":"bold","font-size":"22px"},"widgetSet":"basic"}]

PS: Gerne stelle ich die beiden obigen Skripte als Blockly zur Verfügung; dann einfach mir über die Chat-Funktion deine Mailadresse schicken (aufgrund der Größe passt das hier nicht ins Forum).

[theGrinch]

@vowill Danke, Chart funktioniert super.
Nur das 2. Skript wirft bei mir einen Fehler:

error
script.js.Strom.tibber-chart-2025-15min-tageszeit compile failed:
at script.js.Strom.tibber-chart-2025-15min-tageszeit:13

Das ist
.replace(/\x08/g, '\x08');

Hast du da zufällig eine Idee?

[vowill]

@thegrinch Ja: Die Zeile 12,
"needle = needle.replace(/([-()[]{}+?*.$^|,:#<!])/g, '\$1')" müsste eigentlich heißen

d. h. es fehlen 6 Backslashes. Diese scheinen beim Darstellen in einem Code-Feld verloren zu gehen - obwohl sie bei mir im Editor drin sind. Ich kann sie daher in meinem Post auch nicht 'nachtragen'.
(Sorry, wenn das bei euch zu vielen Mails mit Updates des Posts geführt hat.)
Und: In der Zeile drunter müssen es bei \x08 zwei Backslashes sein, \\x08.
Hier die ganze Zeile (12+13 in einer):

[theGrinch]

@vowill verrückt. Bei mir haben "nur" 4 gefehlt, jetzt geht's. Danke dir!