Benutzer:Rstooks21/Kiosk UI - Versionsgeschichte

Rstooks21: Further details about lighting process control

2024-01-23T18:48:13Z

Further details about lighting process control

← Nächstältere Version		Version vom 23. Januar 2024, 20:48 Uhr
Zeile 638:		Zeile 638:
	The light functions work together to make sure the UI reflects FHEM consistently and vice versa. The principle of how it works is described in this diagram for state changes:		The light functions work together to make sure the UI reflects FHEM consistently and vice versa. The principle of how it works is described in this diagram for state changes:

	If the master power button is clicked in the UI, the change is propagated to the detail tab for all lights. The change is also sent directly to FHEM and updated in the light() ~~objec~~		[[Datei:State changes.png\|alternativtext=A diagram showing how @value-change and the state mutation observer work together to keep FHEM, the UI and the light() object in sync.\|rahmenlos\|600x600px]]

			* If the master power button is clicked in the UI, the change is propagated to the detail tab for all lights.
			** The change is also sent directly to FHEM and updated in the relevant light() objects
			* If the state is changed in FHEM, this is sent to the Lighting Detail Panel, observed by the state mutation observer and the light() object updated
			** The change is also reflected in the master Lighting Panel if required
			** This does not result in a cycle, as the @value-change event is not triggered for a state change programatically applied - only for an event in the UI


			However, for the light channels on the Lighting Detail Panel, things get more complicated as the value selected by the user cannot be sent directly to FHEM, but first has to be set in the light object so the hex rgbw value can be calculated:

			[[Datei:Kiosk Lighting Slider changes.png\|alternativtext=A diagram showing how @value-change and the slider mutation observer work together to keep FHEM, the UI and the light() object in sync.\|rahmenlos\|600x600px]]

			# The user changes a slider. @value-change changes the light() value for that channel.
			# ... and then sends the new light().hex value to FHEM and sets the master dimmer level
			# FHEM sends the new light value to the Lighting Detail Panel
			# the sliderObserver also changes the light() object and sets the master dimmer level

			$$ NEED TO CONFIRM AND EXPLORE THE ANTI-CYCLING LOGIC $$

Rstooks21: Typo changes

2024-01-23T18:20:20Z

Typo changes

← Nächstältere Version		Version vom 23. Januar 2024, 20:20 Uhr
Zeile 478:		Zeile 478:
	This is the most complex of the Panels to set up.		This is the most complex of the Panels to set up.

	The results from the fetch are added to a new light() object and the light object added to the list of lights for the room. Note this includes: RGBW levels, the state (~~or ort~~ off) and the settings of each scene for this light.		The results from the fetch are added to a new light() object and the light object added to the list of lights for the room. Note this includes: RGBW levels, the state (on/off) and the settings of each scene for this light.

	Then the mutation observers for the light details are created and references saved to the light() object.<syntaxhighlight lang="javascript" line="1" start="100">		Then the mutation observers for the light details are created and references saved to the light() object.<syntaxhighlight lang="javascript" line="1" start="100">

Rstooks21: /* BODY - The Outline Panels */

2024-01-23T18:16:42Z

BODY - The Outline Panels

← Nächstältere Version		Version vom 23. Januar 2024, 20:16 Uhr
Zeile 134:		Zeile 134:
	</syntaxhighlight>		</syntaxhighlight>

	==== ~~BODY~~ - The Outline Panels ====		==== body - The Outline Panels ====
	The <BODY> contains outlines of the Panels, ready for customisation by the JavaScript.		The <BODY> contains outlines of the Panels, ready for customisation by the JavaScript.

Rstooks21: Further descriptions of the Javascript

2024-01-23T18:15:12Z

Further descriptions of the Javascript

Änderungen zeigen

Rstooks21: Typo in html

2024-01-22T23:36:20Z

Typo in html

← Nächstältere Version		Version vom 23. Januar 2024, 01:36 Uhr
Zeile 124:		Zeile 124:

	The body has a kiosk_onLoad() function - this is part of the Kiosk customisation and is called to customise the predefined panels once the outlines have been loaded<syntaxhighlight lang="html" line="1" start="45">		The body has a kiosk_onLoad() function - this is part of the Kiosk customisation and is called to customise the predefined panels once the outlines have been loaded<syntaxhighlight lang="html" line="1" start="45">
	<body class="'body" onload="kiosk_onLoad()">		<body class="body" onload="kiosk_onLoad()">
	</syntaxhighlight>The first tab defined is a clock. This should only ever be shown if there are no controllable devices in the room. It's included so that this is obvious (for instance if something has gone wrong with the Kiosk definition). There are also three clickable tabs in this panel. These serve two purposes:		</syntaxhighlight>The first tab defined is a clock. This should only ever be shown if there are no controllable devices in the room. It's included so that this is obvious (for instance if something has gone wrong with the Kiosk definition). There are also three clickable tabs in this panel. These serve two purposes:

Rstooks21: Part way through the first draft

2024-01-22T23:31:41Z

Part way through the first draft

Änderungen zeigen

Rstooks21: Started the Kiosk UI Page

2024-01-22T21:53:42Z

Started the Kiosk UI Page

Neue Seite

=== Kiosk UI ===
The following page describes how to create a dynamic UI that allows the user to use a small, maybe wall-mounted, touch screen device to control only the devices in the same room.