wichtiges UPDATE für controller 7.2.2 im stable

[Ro75]

Updatereihenfolge, sofern schon das Script in einer vorherigen Version (< 1.1.0) genutzt wurde:

WICHTIG: Reihenfolge beachten und sorffältig abarbeiten, dann ist der gesamte Vorgang in 2 bis 3 Minuten abgeschlossen.

1. Folgende Werte müssen aus den bisherigen Script (was jetzt schön läuft) gesichert werden:

const apiKey = dein Schlüssel
const base =  dein Pfad
const image_base = dein Pfad
const myLocation = deine Daten
const stations = deine Stationen;

2. Tausche das komplette Script wie in Beitrag #1 gepostet aus.
3. Tausche in diesem Code nun die unter Punkt 1 gesicherten Informationen wieder aus. Damit sind alle Einstellungen wieder vorhanden.
4. Das Script kann nun gestartet werden.

Im Objektbaum befindet sich nun bei jeder Tankstelle ein Datenpunkt "svg". Dieser kann, z.B. mit VIS 1, über ein "String (unescaped)" dargestellt werden.

Im Ordner "config" gibt es ein Datenpunkt namens "theme". Darüber wird das Thema gewählt und gesetzt. Wichtig ist, das Script muss laufen. Nur so wird die Änderung sofort sichtbar.

Konfiguration: Im unteren Teil vom Script ist folgendes zu finden.

const VisibleStatistik     = true;   // sichtbarkeit Statistik‑Badge inklusive Text
const VisibleBorder        = true;   // Sichtbarkeit Rahmen / Border der SVG
const minimalModeActiv     = false;  // Minimal‑Modus aktiv (ohne Kontrollkästchen, Statistik‑Badge)
const useDotInsteadOfComma = true;   // false = Komma | true = Punkt

Script in Post #1 aktualisiert.

Ro75.

[berno63]

Hallo,
habe gerade das Script ausgetauscht und natürlich an meine Daten angepasst leider bekomme ich folgenden fehler beim Script start

javascript.0
2026-06-21 20:53:49.306	error	script.js.scripts.smarthome.Tanken.Tankerkoenig_extendet: [Tankerkoenig ERROR] Fehler beim Start: ReferenceError: formatDateTime is not defined

javascript.0
2026-06-21 20:53:49.111	info	script.js.scripts.smarthome.Tanken.Tankerkoenig_extendet: registered 7 subscriptions, 1 schedule, 0 messages, 0 logs and 0 file subscriptions

javascript.0
2026-06-21 20:53:49.094	info	script.js.scripts.smarthome.Tanken.Tankerkoenig_extendet: start JavaScript (Javascript/js)

[Ro75]

function formatDateTime(ts = null) {
    const d = ts ? new Date(ts) : new Date();

    const t = String(d.getDate()).padStart(2, "0");
    const m = String(d.getMonth() + 1).padStart(2, "0");
    const y = d.getFullYear();

    const h = String(d.getHours()).padStart(2, "0");
    const mi = String(d.getMinutes()).padStart(2, "0");
    const s = String(d.getSeconds()).padStart(2, "0");

    return `${t}.${m}.${y} ${h}:${mi}:${s}`;
}

Füge das in das Script mit ein.

Ro75.

EDIT: Post #1 ist um die fehlende Funktion aktualisiert.

[berno63]

Danke dir jetzt läuft es wieder 1a

[Ro75]

Hallo,

das Transparent-Theme hat einen kleinen Fehler. Dadurch ist nicht alles transparent.

Hier in wenigen Punkten zur Lösung.

1. Suche die Zeile beginnend mit:

transparent:{widgetBgTop:"transparent",widgetBgBottom:...

2. Ersetze folgenden Werte:

headerTop:"#1E293B"
headerBottom:"#0F172A"
footerTop:"#1E293B"
footerBottom:"#0F172A"

3. Durch diese Werte:

headerTop:"transparent"
headerBottom:"transparent"
footerTop:"transparent"
footerBottom:"transparent"

Das war es schon. Das Script in Post #1 wurde gefixt und trägt die Version 1.1.1

Ro75.

[Nashra]

Moin, kann die Kontrollkästchen nicht aktivieren.
Darstellung versucht mit basic-string (unescaped) und basic-html

[icebear]

@ro75

@Nashra sagte:

Moin, kann die Kontrollkästchen nicht aktivieren.
Darstellung versucht mit basic-string (unescaped)

Geht bei mir auch nich, VIS-2 basic-string (unescaped)

[Ro75]

@nashra @icebear

Die Kontrollkästchen habe ich über vis-materialdesign 0.5.94 (VIS 1) gelöst. Da gibt es

dieses Widget. Rand und Hintergrund kann man transparent machen, dann passt es sehr gut.

ODER alternativ dieses Widget

und bei "HTML bei 'true'" setzt ihr ✓ ein.

Hier mal die drei Widget zum Importieren (materialdesign).

[{"tpl":"tplVis-materialdesign-CheckBox","data":{"oid":"0_userdata.0.tankerkoenig.51d4b70e-a095-1aa0-e100-80009459e03a.enabled","g_fixed":false,"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","toggleType":"boolean","stateIfNotTrueValue":"on","vibrateOnMobilDevices":"50","labelPosition":"right","labelClickActive":true,"valueFontFamily":"InterVariable","valueFontSize":"12","colorCheckBox":"transparent","colorCheckBoxBorder":"transparent","colorCheckBoxHover":"#mdwTheme:vis-materialdesign.0.colors.checkbox.hover","labelColorFalse":"rgba(255,255,255,0.8)","labelColorTrue":"rgba(255,255,255,0.8)","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,"valueOff":"false","valueOn":"true","labelFalse":"","labelTrue":"","g_lock":false,"autoLockAfter":"10","lockIconTop":"5","lockIconLeft":"5","lockIconColor":"#mdwTheme:vis-materialdesign.0.colors.checkbox.lock_icon","lockFilterGrayscale":"30","clickSoundVolume":"0.5","generateHtmlControl":"true","readOnly":false,"clickSoundPlay":true},"style":{"left":"193px","top":"413px","width":"76px","height":"20px","z-index":"10","text-shadow":"3px 3px 4px #000","font-family":"InterVariable","font-style":"normal","font-variant":"normal","font-weight":"normal","font-size":"12px","transform":"scale(0.7)"},"widgetSet":"materialdesign"},{"tpl":"tplVis-materialdesign-CheckBox","data":{"oid":"0_userdata.0.tankerkoenig.51d4b70e-a095-1aa0-e100-80009459e03a.favorite","g_fixed":false,"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","toggleType":"boolean","stateIfNotTrueValue":"on","vibrateOnMobilDevices":"50","labelPosition":"right","labelClickActive":true,"valueFontFamily":"InterVariable","valueFontSize":"12","colorCheckBox":"transparent","colorCheckBoxBorder":"transparent","colorCheckBoxHover":"#mdwTheme:vis-materialdesign.0.colors.checkbox.hover","labelColorFalse":"rgba(255,255,255,0.8)","labelColorTrue":"rgba(255,255,255,0.8)","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,"valueOff":"false","valueOn":"true","labelFalse":"","labelTrue":"","g_lock":false,"autoLockAfter":"10","lockIconTop":"5","lockIconLeft":"5","lockIconColor":"#mdwTheme:vis-materialdesign.0.colors.checkbox.lock_icon","lockFilterGrayscale":"30","clickSoundVolume":"0.5","generateHtmlControl":"true","readOnly":false,"clickSoundPlay":true},"style":{"left":"107px","top":"413px","width":"76px","height":"20px","z-index":"10","text-shadow":"3px 3px 4px #000","font-family":"InterVariable","font-style":"normal","font-variant":"normal","font-weight":"normal","font-size":"12px","transform":"scale(0.7)"},"widgetSet":"materialdesign"},{"tpl":"tplVis-materialdesign-CheckBox","data":{"oid":"0_userdata.0.tankerkoenig.51d4b70e-a095-1aa0-e100-80009459e03a.dataonly","g_fixed":false,"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","toggleType":"boolean","stateIfNotTrueValue":"on","vibrateOnMobilDevices":"50","labelPosition":"right","labelClickActive":true,"valueFontFamily":"InterVariable","valueFontSize":"12","colorCheckBox":"transparent","colorCheckBoxBorder":"transparent","colorCheckBoxHover":"#mdwTheme:vis-materialdesign.0.colors.checkbox.hover","labelColorFalse":"rgba(255,255,255,0.8)","labelColorTrue":"rgba(255,255,255,0.8)","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,"valueOff":"false","valueOn":"true","labelFalse":"","labelTrue":"","g_lock":false,"autoLockAfter":"10","lockIconTop":"5","lockIconLeft":"5","lockIconColor":"#mdwTheme:vis-materialdesign.0.colors.checkbox.lock_icon","lockFilterGrayscale":"30","clickSoundVolume":"0.5","generateHtmlControl":"true","clickSoundPlay":true,"readOnly":false},"style":{"left":"22px","top":"413px","width":"76px","height":"20px","z-index":"10","text-shadow":"3px 3px 4px #000","font-family":"InterVariable","font-style":"normal","font-variant":"normal","font-weight":"normal","font-size":"12px","transform":"scale(0.7)"},"widgetSet":"materialdesign"}]

Die Größe des Häkchen kann via "transform" und scale(0.7) definiert werden.

Hier mal das Widget zum Importieren (BOOL HTML)

[{"tpl":"tplValueBoolCtrl","data":{"oid":"0_userdata.0.tankerkoenig.005056ba-7cb6-1ed2-bceb-b72e2ef04d4a.dataonly","g_fixed":false,"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,"html_true":"✓"},"style":{"left":"289px","top":"234px","color":"#ffffff","width":"16px","height":"24px","z-index":"6","transform":""},"widgetSet":"basic"}]

Dann passt es auch wunderbar rein. Hinweis. Der Z-Index dieser Widget sollte immer höher sein als das vom Widget mit dem SVG-Datenpunkt.

Ro75.

[Ro75]

Wenn man die Kontrollkästchen nicht steuern möchte, sondern es über den Datenpunkt manuell macht, dann kann man im Script diese Konstante von false auf true setzen.

const minimalModeActiv     = true;

Ro75.

[icebear]

@ro75

Eine Bitte hätt ich noch, könntest du in die Kopfzeile noch den Ort mitaufnehmen?

Hintergrund, bei uns wird das "Hauptauto" mit einer Flottenkarte betankt, da geht hauptsächlich nur ARAL oder SHELL, demzufolge hab ich in der Liste mehrere ARAL und Shell Stationen und da wäre es gut wenn man hinter 'ARAL Tankstelle' auch den Ort sehen könnte

[Ro75]

@icebear suche im Script folgenden Bereich - ganz am Ende:

        const svg = createTankstellenSVG({
            stationName: getState(`${path}.name`)?.val,
            stationState: getState(`${path}.status`)?.val,
            distance: getState(`${path}.distance`)?.val + "Km",
            lastFetch: "Abruf: " + getState(`${path}.lastChecked`)?.val,
            lastUpdate: "Update: " + getState(`${path}.lastPriceUpdate`)?.val,
            openingHours: JSON.parse(getState(`${path}.openingTimes`)?.val),
            priceBenzin: getState(`${path}.benzin_str`)?.val,
            priceE10: getState(`${path}.e10_str`)?.val,
            priceDiesel: getState(`${path}.diesel_str`)?.val,
            logoUrl: getState(`${path}.image`)?.val,
            trendBenzin: getState(`${path}.aspects.benzin.trend_24h_proj`)?.val,
            trendE10: getState(`${path}.aspects.e10.trend_24h_proj`)?.val,
            trendDiesel: getState(`${path}.aspects.diesel.trend_24h_proj`)?.val,
            showStatistik: VisibleStatistik,
            showBorder: VisibleBorder,
            minimalMode: minimalModeActiv
        });

Dort könntest du folgende Änderung selbst vornehmen. Ändere diese Zeile von

stationName: getState(`${path}.name`)?.val,

in

stationName: getState(`${path}.name`)?.val + ' (' + getState(`${path}.place`)?.val + ')',

ab. Damit wird der Ort in Klammer am Ende angefügt. Wäre das für dich brauchbar?

Alternativ kannst du den Inhalt vom Datenpunkt "name" auch manuell anpassen. Dieser wird nicht überschrieben. Nur wenn dieser "leer" ist.

Ro75.

[icebear]

@ro75

Perfekt, Danke, ist schon implementiert.