Neuer Installer und neuer Fixer: übersichtliche Oberfläche und `iob docker`

[fritzke316]

@dering
Ich weis das es bei den Popups geht, was ich meinte war ob sowas auch für die Widgets möglich ist, als Design Vorlage für Widgets.
Oder verstehe ich was falsch?

[dering]

@fritzke316 Wenn alle Widget-Typen nicht passen, kannst du das Universal-Widget nutzen. Dort kannstdu ein beliebiges Raster erstellen und pro Raster etwas einsetzen (Schalter, Schieber, Auswahlfeld, usw.). So eine Art Widget-Designer gibt es nicht.

Wenn du eine Kombination aus bestehenden Widget-Typen willst, z.B.
Wert-Anzeige
Diagramm
Schalter

Kannst du das entweder in eine Gruppe oder - recht neu - in eine Gerätekarte packen. https://hdering.github.io/ioBroker.aura/widgets/geraetekarte

Wenn neue Features dazukommen erstelle ich mittlerweile direkt eine Doku dazu.

Es lohnt sich in die Doku zu schauen.

[micklafisch]

@dering
Danke für die super schnelle Umsetzung. Bin immer wieder aufs Neue geflasht mit welchem Tempo und Engagement du hier ran gehst. Ich habe mich bereits daran versucht, nur leider erhalte ich im Popup den Wert "verbrauch" nicht als Wert für den Datenpunkt, aber im Widget-Titel geht er:

Wo liegt mein Denkfehler?

[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!!