Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[sitemap] New Colortemperaturepicker element #2412

Merged
merged 2 commits into from
Nov 29, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Binary file modified ui/images/sitemap_demo_colorpicker.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added ui/images/sitemap_demo_colortemperaturepicker.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
26 changes: 25 additions & 1 deletion ui/sitemaps.md
Original file line number Diff line number Diff line change
Expand Up @@ -148,6 +148,7 @@ The following element types may be used in a Sitemap definition file.
| [Button](#element-type-button) | Renders a button inside a Buttongrid that is used to send commands to a given Item. |
| [Chart](#element-type-chart) | Adds a time-series chart object for [persisted](persistence.html) data. |
| [Colorpicker](#element-type-colorpicker) | Allows the user to choose a color from a color wheel. |
| [Colortemperaturepicker](#element-type-colortemperaturepicker) | Allows the user to choose a color temperature from a white color gradient. |
| [Default](#element-type-default) | Renders an Item in the default UI representation specified by the type of the given Item. |
| [Frame](#element-type-frame) | Establishes an area containing various other Sitemap elements. |
| [Group](#element-type-group) | Concentrates all elements of a given group in a nested block. |
Expand Down Expand Up @@ -454,7 +455,9 @@ Colorpicker item=<itemname> [label="<labelname>"] [icon=<iconref>] [staticIcon=<

This element is a combined control for something like a rgb or rgbw light where you can adjust brightness as well es the color hue.
The down-button decreases brightness to zero and switches the light off. The up-button sets brightness to full but keeps the previous color (hue).
The middle button opens an overlay to finetune your color. A color wheel let you pick the hue and a slider allows to set the brightness.
The middle button opens an overlay to fine-tune your color when you click on it.
In the overlay, a color wheel lets you pick the hue and a slider allows to set the brightness.
The content of this middle button can also show what is the current color.

**Example:**

Expand All @@ -464,6 +467,27 @@ Colorpicker item=LR_LEDLight_Color label="LED Light Color" staticIcon=colorwheel

![Presentation of the Colorpicker element in BasicUI](images/sitemap_demo_colorpicker.png)

### Element Type 'Colortemperaturepicker'

```java
Colortemperaturepicker item=<itemname> [label="<labelname>"] [icon=<iconref>] [staticIcon=<iconref>]
```

This element is a control for something like a rgb or rgbw light where you can adjust the color temperature.
The button opens an overlay to fine-tune your color temperature when you click on it.
In the overlay, a white color gradient lets you pick and set the color temperature.
The content of this button can also show what is the current color temperature.

- `minValue` and `maxValue` limit the possible range of the value (both included in the range).

**Example:**

```java
Colortemperaturepicker item=LR_LEDLight_ColorTemp label="LED Light Color Temperature" staticIcon=colorwheel
```

![Presentation of the Colortemperaturepicker element in BasicUI](images/sitemap_demo_colortemperaturepicker.png)

### Element Type 'Input'

```java
Expand Down