Mitmachen: Sprich „ioBroker“ ein – für ein lokales Aktivierungswort

[dering]

@micklafisch mit {{row_*}} bekommst du den Wert aus der Zeile, keinen Datenpunkt. Deshalb funktioniert es im Titel (Text), aber nicht im Datenpunkt-Feld eines Widgets. Zum Anzeigen den Platzhalter in ein Textfeld schreiben (Titel, Text-Widget, HTML-Popup), z. B. Verbrauch: {{rowtext_verbrauch}}. rowtext_ liefert den Wert so formatiert wie in der Tabelle. Nur wenn in deinem JSON eine Datenpunkt-ID steht, gehört {{row_<feld>}} ins Datenpunkt-Feld.
siehe https://hdering.github.io/ioBroker.aura/einstellungen/popups#platzhalter und https://hdering.github.io/ioBroker.aura/widgets/json-tabelle#klick-auf-zeile

[micklafisch]

@dering
ich muss zugeben, ich hab dein Text 3x gelesen und leider noch nicht so ganz verstanden, außer "es geht nicht" . Dachte ursprünglich Aura würde den Wert der Zeile als eine Art Binding im Datenpunktfeld anzeigen - da war mein Denkfehler.

Ich habe jetzt rechts ein HTML Widget genommen und etwas länger mit der Formatierung gespielt, dass es dem benachbarten linken Werte-Feld identisch aussieht (vielleicht wäre es auch schneller oder eleganter gegangen):

Wer das als Vorlage benötigt, hier der Code dazu (die Umsetzung des Darkmodes ist die Idee von ChatGPT)

Spoiler

<style>
 html, body {
   margin: 0;
   padding: 0;
   overflow: hidden;
   background: transparent;
 }

 .wert {
   font-family: Arial, sans-serif;
   font-size: 22px;
   font-weight: 400;
   line-height: 1.3;
   color: #0f172a;
   white-space: nowrap;
   position: absolute;
   top: 25px;
   left: 0;
 }

 .wert.dark {
   color: #f1f5f9;
 }
</style>

<div class="wert" id="wert">
 {{rowtext_start}}
</div>

<script>
 aura.subscribe(
   'aura.0.config.themeMode.frontend',
   function(mode) {
     document.getElementById('wert')
       .classList.toggle('dark', mode === 'dark');
   }
 );
</script>

[MeinzIsAs]

Gibt es eine Möglichkeit, beim Auswahlfeld die Hintergrundfarbe des Feldes zu ändern? Egal welche Farbe ich ändere, die Farbe dieses Feldes bleibt gleich.

[dering]

@MeinzIsAs sagte:

Gibt es eine Möglichkeit, beim Auswahlfeld die Hintergrundfarbe des Feldes zu ändern? Egal welche Farbe ich ändere, die Farbe dieses Feldes bleibt gleich.

Meinst du die Hintergrundfarbe vom Wert oder die des gesamten Widgets?

[MeinzIsAs]

Die vom Wert. Ich hätte da gerne die gleiche Farbe wie im Widget.

[Codierknecht]

Du könntest das gezielt per CSS anpassen.

Im Widget holst Du Dir die ID

Im CSS: div.aura-widget-w-1793209156508 button[type="button"] {background-color: var(--widget-bg) ! important}

[MeinzIsAs]

Ich habe das jetzt mal so eingefügt und die ID von meinem Auswahlfeld eingesetzt. Leider ändert sich die Farbe des Feldes nicht.

div.aura-widget-child-1793187571700-lafh8 button[type="button"] {background-color: var(--widget-bg) ! important}

Ich habe es auch mit enum[type-"enum"] getestet, da im exportierten json als Type "enum" steht.

[MeinzIsAs]

Sollte nicht die Accent Color auf das Feld wirken? Wenn man die ändert, ändert sich nur die Farbe des Menüpfeiles im Dashboard Editor.

[Codierknecht]

@MeinzIsAs sagte:

Ich habe das jetzt mal so eingefügt und die ID von meinem Auswahlfeld eingesetzt. Leider ändert sich die Farbe des Feldes nicht.

Schau Dir mit F12 im Browser an, wie die Hierarchie dort aufgebaut ist und welche Klassen da tatsächlich verwendet werden.

[icebear]

@dering

Ich habe ein Universal-Widget, in dem habe ich ein Hintergrundbild eingestellt. Kannst du eine Funktion hinzufügen, das man einstellen kann, das das Hintergrundbild im Universal-Widget anhand von Bedingungen gewchselt wird?

Hintergrund ist, ich habe Bilder für Tag und Nacht, die anzeigen welches Licht an ist. Hier mal zwei Beispiel Bilder:

Diese möchte ich halt je nach Bedingung (Tag oder Nacht) und der jeweiligen Beleuchtung wechseln (geht über einen DP der je nach Zustand geschaltet wird).

Wenn ich ein Issue dafür aufmachen soll, sag Bescheid.

[dering]

@MeinzIsAs

Für genau dieses Auswahlfeld:

.aura-widget-child-1793187571700-lafh8 .aura-widget-action > button {
  background: var(--widget-bg) !important;
}

Für alle Auswahlfelder:

.aura-widget-type-enum .aura-widget-action > button {
  background: var(--widget-bg) !important;
}

Zu deinen Versuchen:

• enum[type="enum"] funktioniert nicht. Ein Element enum gibt es nicht, der Typ steht als Klasse aura-widget-type-enum am Widget.
• Eigenes CSS wirkt nur im Frontend. In der Editor-Vorschau greift es erst, wenn „CSS auch im Editor anwenden“ aktiviert ist.
• Die Akzentfarbe ist dafür nicht zuständig. Der Hintergrund des Feldes kommt aus der Theme-Farbe „App-Hintergrund“ (--app-bg).

[dering]

@icebear

Das geht schon heute, ganz ohne neue Funktion. Das Hintergrundbild kann seinen Wert aus einem Datenpunkt holen.

So geht's:

1. Lade die Bilder hoch, z. B. nach /vis.0/grundriss/ oder über „Datei vom Server wählen“.
2. Lege einen eigenen Datenpunkt an, z. B. 0_userdata.0.aura.grundriss (Typ String).
3. Im Universal-Widget unter Hintergrundbild trägst du diesen DP bei „Bild aus Datenpunkt (optional)“ ein. In das feste Feld darüber kommt ein Standardbild. Es wird gezeigt, solange der DP leer ist.

Der DP darf eine URL, einen Pfad (/vis.0/grundriss/xyz.png) oder Base64 enthalten. Ändert sich der Wert, wechselt das Bild sofort.

Den Dateinamen setzt ein kleines Skript aus den Lichtzuständen zusammen. Die IDs und Kürzel unten musst du an deine Benennung anpassen:

const LIGHTS = {
    liv:    'hue.0.wohnzimmer.on',
    tv:     'hue.0.tv.on',
    essen:  'hue.0.essen.on',
    hood:   'hue.0.dunstabzug.on',
    treppe: 'hue.0.treppe.on',
};
const TARGET = '0_userdata.0.aura.grundriss';
const PATH   = '/vis.0/grundriss/';

createState(TARGET, '', { type: 'string', read: true, write: false });

function update() {
    const night = !isAstroDay();
    const on = Object.keys(LIGHTS).filter(k => getState(LIGHTS[k]).val);
    const name = [night ? 'n' : 'd', ...on].join('_');
    setState(TARGET, PATH + name + '.png', true);
}

on({ id: Object.values(LIGHTS), change: 'ne' }, update);
schedule({ astro: 'sunrise' }, update);
schedule({ astro: 'sunset' }, update);
update();

Damit ergibt sich z. B. n_liv_tv_essen_hood_treppe.png. Die Reihenfolge der Kürzel im Namen folgt der Reihenfolge in LIGHTS.

[fritzke316]

Ich möchte in AURA das Popup Widget mit Balken nutzen, habe aber 2 Probleme:

1. Lässt sich der Balken auf meinem Handy unter Chrom oder fully nicht schieben, ich kann nur auf eine stelle tippen und er springt da hin.
2. Ich kann beim verschieben des Balkens oder Sliders nicht sehen bei wieviel % ich gerade stehe, kann ich das irgendwo einschalten so wie bei den Rollos?Dort ist es "Position live mitzeichnen"

[Latzi]

Auf meinem iPhone werden keine Tortendiagramme angezeigt, auf allen anderen Nicht-IOS-Geräten schon. Kann das jemand bestätigen?

[MeinzIsAs]

@dering sagte:

@MeinzIsAs

Für genau dieses Auswahlfeld:

.aura-widget-child-1793187571700-lafh8 .aura-widget-action > button {
  background: var(--widget-bg) !important;
}

Für alle Auswahlfelder:

.aura-widget-type-enum .aura-widget-action > button {
  background: var(--widget-bg) !important;
}

Zu deinen Versuchen:

• enum[type="enum"] funktioniert nicht. Ein Element enum gibt es nicht, der Typ steht als Klasse aura-widget-type-enum am Widget.
• Eigenes CSS wirkt nur im Frontend. In der Editor-Vorschau greift es erst, wenn „CSS auch im Editor anwenden“ aktiviert ist.
• Die Akzentfarbe ist dafür nicht zuständig. Der Hintergrund des Feldes kommt aus der Theme-Farbe „App-Hintergrund“ (--app-bg).

Super Danke das hat funktioniert.
Und noch ein rießiges Dankeschön für diesen Adapter und die schnelle Weiterentwicklung.

[dering]

@fritzke316
Danke für die Meldung! Das Ziehen der Balken-Regler per Finger war tatsächlich kaputt (betraf Dimmer, Slider und Licht). Ist in der nächsten Version behoben. Der Dimmer zeigt dann beim Ziehen auch in allen Layouts den Prozentwert mit an.

[fritzke316]

@dering
super Danke!!

[icebear]

@dering said:

Das geht schon heute, ganz ohne neue Funktion. Das Hintergrundbild kann seinen Wert aus einem Datenpunkt holen.

Super, Danke für den Hinweis und den Denkanstoß, ich hab's gleich mal umgesetzt und es funktioniert einwandfrei.

Jetzt hätte ich noch einen Punkt, wie du siehst, nutze ich die Bilder als Hintergrund für ein Universal-Widget und über die Spalten und Zeilen lasse ich mir dann noch andere Informationen in dem Widget anzeige (Temp, offene Fenster usw) jetzt würde ich gerne in jedem Raum ein Button (Bild oder Icon) einfügen mit dem ich bei 'Klick-Action' eine PopUp-View des jeweiligen Raums öffnen kann. Leider gibt es in der Auswahl die Option 'Button' nicht, siehe Bild:

Kannst du das noch einfügen, oder gibt es eine andere Möglichkeit?

Edit: Ich füg hier noch das Script (TypeScript) ein welches ich zum wechsel der Bilder benutze falls einer sowas ähnliches bauen möchte.

// Datenpunkte definieren
const dpState = '0_userdata.0.vis.VIS_Light_State.state_vis_widget';
const dpTarget = '0_userdata.0.Aura.lights';
const dpSunrise = '0_userdata.0.Astrodaten.Astro.sunrise';
const dpSunset = '0_userdata.0.Astrodaten.Astro.sunset';

// Mappings für Tag und Nacht
const dayImages: { [key: number]: string } = {
    0:  'vis-2.0/SmartHome/EG_Fertig2_Beleuchtung_test.png',
    1:  'vis-2.0/SmartHome/EG_Light/hood.png',
    2:  'vis-2.0/SmartHome/EG_Light/2_kueche.png',
    3:  'vis-2.0/SmartHome/EG_Light/3_kueche_hood.png',
    4:  'vis-2.0/SmartHome/EG_Light/wc.png',
    5:  'vis-2.0/SmartHome/EG_Light/5_hood_gwc.png',
    6:  'vis-2.0/SmartHome/EG_Light/8_tv_day.png',
    7:  'vis-2.0/SmartHome/EG_Light/wz.png',
    8:  'vis-2.0/SmartHome/EG_Light/wz_play.png',
    9:  'vis-2.0/SmartHome/EG_Light/d_wz_hood.png',
    10: 'vis-2.0/SmartHome/EG_Light/d_wz_play_hood.png',
    11: 'vis-2.0/SmartHome/EG_Light/11_d_wz_play_cook.png',
    12: 'vis-2.0/SmartHome/EG_Light/12_d_cook_gwc.png',
    13: 'vis-2.0/SmartHome/EG_Light/13_d_cook_hood_gwc.png',
    14: 'vis-2.0/SmartHome/EG_Light/14_d_wz_gwc.png',
    15: 'vis-2.0/SmartHome/EG_Light/15_wz_play_gwc.png',
    16: 'vis-2.0/SmartHome/EG_Light/16_d_wz_cook_gwc.png',
    17: 'vis-2.0/SmartHome/EG_Light/17_d_wz_play_cook_gwc.png'
};

const nightImages: { [key: number]: string } = {
    0:  'vis-2.0/SmartHome/EG_Fertig2_light_tv.png',
    1:  'vis-2.0/SmartHome/night/n_hood.png',
    2:  'vis-2.0/SmartHome/night/n_cook_bergsee.png',
    3:  'vis-2.0/SmartHome/night/n_kueche_kochen.png',
    4:  'vis-2.0/SmartHome/night/n_wc.png',
    5:  'vis-2.0/SmartHome/night/n_hood_wc.png',
    6:  'vis-2.0/SmartHome/night/n_play.png',
    7:  'vis-2.0/SmartHome/night/n_wz.png',
    8:  'vis-2.0/SmartHome/night/n_liv.png',
    9:  'vis-2.0/SmartHome/night/n_wz_hood.png',
    10: 'vis-2.0/SmartHome/night/n_wz_play_hood.png',
    11: 'vis-2.0/SmartHome/night/n_wz_play_bergsee.png',
    12: 'vis-2.0/SmartHome/night/12_n_cook_gwc.png',
    13: 'vis-2.0/SmartHome/night/13_n_cook_hood_gwc.png',
    14: 'vis-2.0/SmartHome/night/14_n_wz_gwc.png',
    15: 'vis-2.0/SmartHome/night/15_n_wz_play_gwc.png',
    16: 'vis-2.0/SmartHome/night/16_n_wz_tv_bergsee_gwc_essen.png',
    17: 'vis-2.0/SmartHome/night/17_n_wz_play_bergsee_gwc_treppe.png'
};

// Hilfsfunktion zur Prüfung, ob es aktuell Tag ist (zwischen Sonnenaufgang und Sonnenuntergang)
function isDayTime(): boolean {
    const now = new Date();
    const currentTime = now.getHours() * 60 + now.getMinutes(); // Minuten seit Tagesbeginn

    const sunriseVal = getState(dpSunrise).val;
    const sunsetVal = getState(dpSunset).val;

    if (typeof sunriseVal !== 'string' || typeof sunsetVal !== 'string') {
        log('Astro-Daten (Sunrise/Sunset) haben kein gültiges String-Format!', 'warn');
        return true; // Fallback auf Tag
    }

    // Erwartet Format "HH:MM" oder ISO-String; wir extrahieren die Uhrzeit
    const parseTimeToMinutes = (timeStr: string): number => {
        let hours = 0;
        let minutes = 0;
        if (timeStr.includes(':')) {
            const parts = timeStr.split(':');
            hours = parseInt(parts[0], 10);
            minutes = parseInt(parts[1], 10);
        } else {
            // Falls es ein kompletter ISO-String ist
            const d = new Date(timeStr);
            hours = d.getHours();
            minutes = d.getMinutes();
        }
        return hours * 60 + minutes;
    };

    const sunriseMinutes = parseTimeToMinutes(sunriseVal);
    const sunsetMinutes = parseTimeToMinutes(sunsetVal);

    return currentTime >= sunriseMinutes && currentTime < sunsetMinutes;
}

// Hauptfunktion zur Ermittlung und zum Schreiben des Bildpfades
function updateLightImage() {
    const stateVal = getState(dpState).val;
    const stateIndex = Number(stateVal);

    if (isNaN(stateIndex)) {
        log(`Ungültiger Wert im Widget-State: ${stateVal}`, 'warn');
        return;
    }

    const dayTime = isDayTime();
    let imagePath = '';

    if (dayTime) {
        imagePath = dayImages[stateIndex] || '';
    } else {
        imagePath = nightImages[stateIndex] || '';
    }

    if (imagePath) {
        setState(dpTarget, imagePath, true);
        log(`Bildpfad aktualisiert (${dayTime ? 'Tag' : 'Nacht'}, Index ${stateIndex}): ${imagePath}`, 'debug');
    } else {
        log(`Kein passender Bildpfad für Index ${stateIndex} gefunden!`, 'warn');
    }
}

// Event-Listener: Ausführen, wenn sich das Widget ändert
on(dpState, () => {
    updateLightImage();
});

// Event-Listener: Ausführen, wenn sich die Astro-Zeiten aktualisieren
on([dpSunrise, dpSunset], () => {
    updateLightImage();
});

// Initialer Aufruf beim Start des Scripts
updateLightImage();

[dering]

@icebear sagte:

Leider gibt es in der Auswahl die Option 'Button' nicht

Schalter -> Button

[icebear]

@dering said:

Schalter -> Button

Das war mir schon klar, aber damit kann ich ja keine 'Klick-Action' open PopUpView ausführen.
Ich hatte mir das so vorgestellt, das wenn ich in (wie auf dem Bild) auf den Orangen Punkt klicke, dann kann ich damit eine PopUp-View öffnen die den jeweiligen Raum zeigt.

Das geht ja mit einem Schalter nicht, da kann ich keine PopUp-View verlinken.

Edit: Habs rausgefunden, geht wie beschrieben zwei Post's unten drunter.