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

[fritzke316]

Ich verfolge die Entwicklung von Aura jetz schon eine weile und finde es erstaunlich wie viele Fuktionen da täglich dazukommen.
Hatte noch nicht sehr viel Zeit mich intensiver mit Aura zu beschäftigen, denke aber das es in zukunft meine Vis ersetzen wird :)
Also mal einen großen Dank für den tollen Adapter.

Dann noch zu meiner Frage:
Ist es eigentlich auch bei den Widgets möglich so wie bei den Popups eine Vorlage anzulegen die man dann den Widgets zuweisen kann?
Also so dass man sich z.B. eine Design Vorlage für ein Rolladen Widget anlegt wo Schriftgröße, Text, Positionen, Farben, Icons usw. vorgegeben wird und dann kann man beim erstellen des Widgets einfach auswählen nach Vorlage so uns so.
Der große Vorteil wäre, man müsste nur die Vorlage ändern und alle anderen Widgets werden mit angepasst.

[dering]

@fritzke316 das geht: https://hdering.github.io/ioBroker.aura/einstellungen/popups

[dering]

@ltsalvatore erstelle dafür bitte ein issue in GitHub.

[Bluefox]

@dering Ich würde backend Code auf TS umschreiben, ansonsten ist ein großes Lob an den Entwickler!

[icebear]

@dering said:

ab > 0.91.0 kann das Spiegel-Widget auch einen Tab spiegeln.

Du bist mein Held!!! Einfach ohne Wort und super genial was Du hier leistest!!

Genau das was ich gebraucht hab und funktioniert super beim ersten Test. Jetzt kann ich mit einem zweiten Horizontalen Menü innerhalb eines Tab (Hier Energy) zwischen den Unter-Tabs für Energy umschalten!

Einfach nur klasse. Wenn es einen Preis für den Entwickler des Jahres geben würde, du würdest ihn bekommen.

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