@apollon77 Ich teste ein wenig und stelle ein PR wenn es funktioniert.

@apollon77 Ich teste ein wenig und stelle ein PR wenn es funktioniert.

@apollon77
Reden wir über diese Zeile?

@mickym
Ja, allerdings möchte ich gerne auf der Landscape Ansicht die Sidebar eingeblendet lassen und bei der Portrait Ansicht ausblenden.
Mir ist nicht bekannt wie man das zur Laufzeit ändert.

Ebenfalls soll die Fenstergröße im Landscape größer sein.

Wie steht es mit dem Aufwand für Multi Instanzen aus? Ich selber kann das nicht einschätzen.

Ich habe in der Suche leider nichts passendes gefunden.
Ich plante eine Visualisierung mittels des NodeRed Dashboards darzustellen. Diese Visualisierung soll auf einem Tablet (Landscape). Dazu sollte die Visualisierung auch auf einem Handy angezeigt werden (Portrait).
Idee war 2 NodeRed Instanzen zu erstellen, in Instanz 0 die Visualisierung zu erstellen und in angepasster Form auf Instanz 1 zu kopieren.

Warum ist es nicht möglich 2 Instanzen unter unterschiedlichen Ports auf einen Host laufen zu lassen? Node Red unterstützt dieses von Haus aus.

@buchi

Ah, ich habe die Version vom Github. Anscheinend hast du den Namen geändert. Das neue Repo ist jetzt https://github.com/gerbuchner/ioBroker.vis-owl ?

@buchi said in [Frage] Erstes eigenes Widget - Bitte um Feedback:

Hast mal bitte ein Beispiel wo das falsch formatiert ist?
Dachte eigentlich das sollte bereits passen. Die Tastenkombi bewirkt bei mir keine Textformatierung

Davor:

STRG + A / Strg+K → Strg+F

Danach:

Hi Gerhard,

ich bin ebenfalls gerade an der Entwicklung eines Widgets. Bei der Recherche wegen eines Fehlers bin ich auf dein Widget aufmerksam geworden. Darin sind auch einige Infos enthalten die ich bei mir gut weiter verwenden kann.

CSS Klassen:
Du kannst deinen <div> Containern Klassen zuweisen, was du auch schon gemacht hast:

        text += '<!-- istWert -->';
        text += '<div class="vis-widget" style="top: 8px; left: 110px; width: 50px; height: 14px; color: rgb(255, 255, 255); z-index: 3; text-align: right; font-size: small; color: rgb(255, 255, 255);">';
        text += '    <div class="vis-widget-body">';
        text += '        <div class="istWert" style="color: rgb(255, 255, 255);">';
        text += '             ' + vis.states[data.oidValIst + '.val'] + ' ' + data.valEinheitIst;
        text += '        </div>';
        text += '    </div>';
        text += '</div>';

Nun könntest du zum Beispiel der Klasse "vis-widget" in der CSS Datei Eigenschaften vorgeben und damit dein HTML Code kleiner machen. Dies würde dann so aussehen:

CSS:

.vis-widget {
	top: 8px;
	left: 110px; 
	width: 50px; 
	height: 14px; 
	color: rgb(255, 255, 255); 
	z-index: 3; 
	text-align: right; 
	font-size: small; 
	color: rgb(255, 255, 255)
}

JS:

        text += '<!-- istWert -->';
        text += '<div class="vis-widget">';
        text += '    <div class="vis-widget-body">';
        text += '        <div class="istWert" style="color: rgb(255, 255, 255);">';
        text += '             ' + vis.states[data.oidValIst + '.val'] + ' ' + data.valEinheitIst;
        text += '        </div>';
        text += '    </div>';
        text += '</div>';

Nun könntest du auch schnell CSS Dateien austauschen um verschiedene styles zu erhalten.

Bitte rücke auch deinen Code korrekt ein. Momentan ist er sehr schwer lesbar. VS Code kann das automatisch mittels der Tastenkombination: Strg+K → Strg+D (Dokument) / Strg+K → Strg+F (Auswahl)

Grüße

Stefan