Viele Fenster / LEDs - Drop down Menue möglich?

[Medicusi]

Einen traumhaften Guten Tag,

ich bin fleißig an der Zusammenstellung meiner Visu und stoße gerade an "optische" Herausforderungen.

Ich habe sehr viele Objekte in meinen Räumen und würde mir ein "Drop down / Auswahl Menue" wünschen um es übersichtlicher zu haben.

Hier im Forum habe ich zwar das ein oder andere Projekt gefunden aber keine Lösung ...

LED.PNG

Und das sind nur ein Teil der LEDs im Wohnzimmer .... gefolgt von 5 Fenstern mit Rollos.

Freue mich wie immer über Tipps und Anregungen ...

[wvhn]

Hallo Medicusi,

wenn Du das Problem mit der HSV-Steuerung gelöst hast, wäre es gut, wenn Du die Lösung in dem betreffenden Thread posten und den Thread auf "gelöst" setzen würdest (dazu den ersten Eintrag bearbeiten und bei "Präfix" -> gelöst auswählen.

Zu Deinen Fragen hier siehst Du Dir am Besten die 4 Beispiele an (in der SV Konfiguration "Example1.smarthome" bis "Example4.quad" auswählen und durchspielen. Dazu den Treiber auf "offline" stellen). Dort sind viele Gestaltungsmöglichkeiten umgesetzt. Für die vielen LEDs könntest Du z.B. "collapsible" Boxen verwenden. Für die Rollos gibt es ein widget "device.smallshut", dass diese in Tabellenform darstellt. Siehe "Example3.graphic".

Wie Du die Elemente verwendest ist in der Inline-Doku beschrieben. Die ist ebenfalls über die Konfigurationsseite zu erreichen.

Gruß
Wolfram

[Medicusi]

Hallo Medicusi,

wenn Du das Problem mit der HSV-Steuerung gelöst hast, wäre es gut, wenn Du die Lösung in dem betreffenden Thread posten und den Thread auf "gelöst" setzen würdest (dazu den ersten Eintrag bearbeiten und bei "Präfix" -> gelöst auswählen.

Vielen Dank für den Hinweis, ich habe den Fehler in der Widges tatsächlich gelöst ... werde die Lösung morgen oder später noch posten ... wenn meine Nachwuchs (4 Wochen alt) mir es erlaubt

[Onkelandy]

Gratuliere zum Nachwuchs
Du könntest auch Popups nutzen. Dazu gibt es in der Doku einen eigenen Eintrag. Ich hab das im Quad Design entsprechend gelöst, dass der RGB Wert anklickbar ist und sich dann ein Popup mit den Slidern öffnet.

[Medicusi]

Gratuliere zum Nachwuchs
Du könntest auch Popups nutzen. Dazu gibt es in der Doku einen eigenen Eintrag. Ich hab das im Quad Design entsprechend gelöst, dass der RGB Wert anklickbar ist und sich dann ein Popup mit den Slidern öffnet.

Lieben Dank für die Glückwünsche, spannende Zeit ... dann noch Arbeit und VISU

Du meinst sicher diese Auswahl hier (zum Beispiel):

auswahl.JPG

Das würde wohl gehen wobei ich gerade an so etwas bastele:

:Pop.jpg

Nur komme ich mit dem Java Script nicht so richtig weiter ... er übernimmt immer nur das erst ausgewählte Item und wenn im drop down ein anderes ausgewählt wurde.

[wvhn]

Ist das jQuery, was Du da verwendest, oder das 'basic.select'? Letzteres geht definitiv nicht, da dies einem einzelnen item eine Auswahl von Werten zuweist. Du willst aber variabel das item auswählen, dessen Steuerelemente dann angezeigt werden.

Theoretisch wäre das wie folgt lösbar:
Du stellst alle basic.shutter auf die Seite und packst die Aufrufe jeweils in ein <span> mit eindeutiger id und 'style="display: none" '. Dann werden die erstmal nicht angezeigt. Über einen Rollbalken könntest Du dann das darzustellende Element mit der id auswählen und nur für dieses den style überschreiben. Dazu musst Du aber ein eigenes widget bzw. js-script direkt in der Seite schreiben.

Alternativen habe ich Dir in #2 genannt. Die Popups (siehe #4) verwendest Du ja schon in Deinem Grundriss-Design. Dazu wäre eine gruppierte Schalterserie praktisch, die dann die Popups einzeln aufmacht.

[Onkelandy]

Ne, ich meinte ein simples Popup wie das hier. Klick auf die Zahlen -> Popup mit Slider. Aber wenn du das eh schon woanders drin hast, ist's eh klar wie du das handhaben müsstest

popup.png

[Medicusi]

Ist das jQuery, was Du da verwendest, oder das 'basic.select'? Letzteres geht definitiv nicht, da dies einem einzelnen item eine Auswahl von Werten zuweist. Du willst aber variabel das item auswählen, dessen Steuerelemente dann angezeigt werden.

Hier mal der Code den ich verwedet bzw. versuche ... vielleicht bin ich auch völlig auf dem Holzweg ...

</body>
 
 <h1><img class="icon" src='{{ icon0 }}scene_livingroom.png'/>fp_nz</h1>

    <div class="preblock">
    <div class="block">
		<div class="set-2" data-role="collapsible-set" data-theme="c" data-content-theme="a" data-mini="true">
				    <div data-role="collapsible" data-collapsed="false" >
					<select id="geraet" onchange="wertub(this.value)">
					 <option value="&#123&#123 device.shutter&#40'UG.Wohnzimmer.Rollo1','', 'UG.Wohnzimmer.Rollo.Fenster1.fahren', 'UG.Wohnzimmer.Rollo.Fenster1.stop', 'UG.Wohnzimmer.Rollo.Fenster1.Position_Behang', '', 'UG.Wohnzimmer.Rollo.Fenster1.Position_Lamelle', '', '', 100, '', 'full'&#41  &#125&#125">UG.Wohnzimmer.Rollo1</option>
					<option value="&#123&#123 device.shutter&#40'UG.Wohnzimmer.Rollo2_1','', 'UG.Wohnzimmer.Rollo.Fenster2_1.fahren', 'UG.Wohnzimmer.Rollo.Fenster2_1.stop', 'UG.Wohnzimmer.Rollo.Fenster2_1.Position_Behang', '', 'UG.Wohnzimmer.Rollo.Fenster2_1.Position_Lamelle', '', '', 100, '', 'full'&#41  &#125&#125">UG.Wohnzimmer.Rollo2_1</option>
					<option value="&#123&#123 device.shutter&#40'UG.Wohnzimmer.Rollo2_2','', 'UG.Wohnzimmer.Rollo.Fenster2_2.fahren', 'UG.Wohnzimmer.Rollo.Fenster2_2.stop', 'UG.Wohnzimmer.Rollo.Fenster2_2.Position_Behang', '', 'UG.Wohnzimmer.Rollo.Fenster2_2.Position_Lamelle', '', '', 100, '', 'full&#41  &#125&#125">UG.Wohnzimmer.Rollo2_2</option>
					<option value="&#123&#123 device.shutter&#40'UG.Wohnzimmer.Rollo2_3','', 'UG.Wohnzimmer.Rollo.Fenster2_3.fahren', 'UG.Wohnzimmer.Rollo.Fenster2_3.stop', 'UG.Wohnzimmer.Rollo.Fenster2_3.Position_Behang', '', 'UG.Wohnzimmer.Rollo.Fenster2_3.Position_Lamelle', '', '', 100, '', 'full'&#41  &#125&#125">UG.Wohnzimmer.Rollo2_3</option>
					<option value="&#123&#123 device.shutter&#40'UG.Wohnzimmer.Rollo3','', 'UG.Wohnzimmer.Rollo.Fenster3.fahren', 'UG.Wohnzimmer.Rollo.Fenster3.stop', 'UG.Wohnzimmer.Rollo.Fenster3.Position_Behang', '', 'UG.Wohnzimmer.Rollo.Fenster3.Position_Lamelle', '', '', 100, '', 'full'&#41  &#125&#125">UG.Wohnzimmer.Rollo3</option>
					<option value="&#123&#123 device.shutter&#40'UG.Wohnzimmer.Rollo4','', 'UG.Wohnzimmer.Rollo.Fenster4.fahren', 'UG.Wohnzimmer.Rollo.Fenster4.stop', 'UG.Wohnzimmer.Rollo.Fenster4.Position_Behang', '', 'UG.Wohnzimmer.Rollo.Fenster4.Position_Lamelle', '', '', 100, '', 'full'&#41  &#125&#125">UG.Wohnzimmer.Rollo4</option>
					<option value="&#123&#123 device.shutter&#40'UG.Wohnzimmer.Rollo5','', 'UG.Wohnzimmer.Rollo.Fenster5.fahren', 'UG.Wohnzimmer.Rollo.Fenster5.stop', 'UG.Wohnzimmer.Rollo.Fenster5.Position_Behang', '', 'UG.Wohnzimmer.Rollo.Fenster5.Position_Lamelle', '', '', 100, '', 'full'&#41  &#125&#125">UG.Wohnzimmer.Rollo5</option>
					</select>
				    <div id="txtHint">{{ device.shutter('UG.Wohnzimmer.Rollo1', '', 'UG.Wohnzimmer.Rollo.Fenster1.fahren', 'UG.Wohnzimmer.Rollo.Fenster1.stop', 'UG.Wohnzimmer.Rollo.Fenster1.Position_Behang', '', 'UG.Wohnzimmer.Rollo.Fenster1.Position_Lamelle', '', '', 100, '', 'full') }}</div>
                <script>
                     function wertub(wert) {
                         elem = document.getElementById('geraet').value;
                        document.getElementById("txtHint").innerHTML= elem;
                        document.getElementById("txtHint").contentWindow.location.reload(true);
                    }
                    
                </script>
            	</div>
			</div>
		</div>
	</div>
	

{% endblock %}

[wvhn]

Holzweg triffts ganz gut . Sorry.

Warum?

• die Widgets sind Twig-Macros (gekennzeichnet durch die doppelten geschweiften Klammern) die beim Rendern der Seite mit ihren Parametern fest in das html-Gerüst eingebaut werden. Der resultierende html-Code ist ab da statisch und kann dynamische Informationen wie die item-Inhalte nur über den js-Code der Widgets verarbeiten.
• Die items einer Seite werden in einem zentralen Objekt für die Seite verwaltet und müssen vor dem Anzeigen der Seite bekannt sein, damit die widget-Methoden die Item-Werte und deren Änderungen verarbeiten können. Alle Visu-Elemente, die an ein bestimmtes Item gekoppelt sind, werden als "listener" registriert und bei jeder Änderung des betreffenden items aktualisiert.
• Der js-Code der Widgets aktualisiert die Visu-Elemente in der Seite, z.B. einzelne Werte, styles oder css-Klassen. Wenn im html Platzhalter angelegt sind, kann in Grenzen auch der html-Code selbst verändert werden. Ein Ausbrechen aus der von der Twig-Engine gefüllten Struktur ist aber nicht möglich.

Was Du (wie in #6 geschrieben) machen kannst ist, dass Du Widgets für alle Rollos anlegst, aber versteckst. Die werden dann alle ganz normal aktualisiert. Das js-script kann dann die Anzeige für jeweils eine Rollo-Steuerung aktiv schalten, während die anderen versteckt bleiben.