| title | component | label | description | source | prev |
|---|---|---|---|---|---|
oh-knob-cell - Knob Cell |
oh-knob-cell |
Knob Cell |
A cell expanding to a knob control |
/docs/ui/components/ |
[[toc]]
A cell expanding to a knob or rounded slider control
Use the advanced properties to change the appearance from a knob to a rounded slider.
General settings of the cell
Header of the cell
Title of the cell
Subtitle of the cell
Footer of the cell
Use
oh:iconName (openHAB icon), f7:iconName (Framework7 icon), material:iconName (Material icon) or iconify:iconSet:iconName (Iconify icon, requires being online if not in cache)
Color to use when highlighted
Expression to determine when the card should be highlighted. If blank, determine automatically from the primary bound item if applicable.
Item to control
Minimum value (default 0)
Maximum value (default 100)
Minimum interval between values (default 1)
Offset to be applied to the Item's state (e.g. Item state = 2; offset = 20; knob/rounded slider behaves as Item state would be 22)
Ignore the display state if available and always use the raw state.
If enabled, no commands are sent during sliding
Time to wait between subsequent commands in ms (default 200)
Time to wait before switching from displaying user input to displaying Item state in ms (default 2000)
Disable the slider (usually set via an expression since the value will not be displayed when disabled)
Visual size of the control in px (or % if responsive is true)
Size the control using percentages instead of pixels
Thickness of the arcs (default 18)
Angle of circle where the round slider should start (default -50); 0 is 9 o'clock; only if circleShape is not set
Angle of circle where the round slider should start (default -130); 360 is 9 o'clock; only if circleShape is not set
Indicates the circle shape to be render
Sets the shape of the end of the path; dotted path and line cap cannot be used together.
Length of dotted path segments (using css stroke-dasharray); dotted path and line cap cannot be used together.
Sets the border width of the slider (px value)
Sets the size of the slider handle (px value)
Sets the shape of the slider handle
Sets the border color of the slider; set borderWidth as well! (HTML value)
Sets the path color of the slider (HTML value)
Sets the range color of the slider (HTML value)
Sets the tooltip color of the slider (HTML value)
Action to perform when the element is clicked
Type of action to perform
URL to navigate to or to send HTTP request to
Open the URL in the same tab/window instead of a new one. This will exit the app.
HTTP method to use for the request
Body to send with the request
Item to perform the action on
Command to send to the Item. If "Toogle Item" is selected as the action, only send the command when the state is different
Command to send to the Item when "Toggle Item" is selected as the action, and the Item's state is equal to the command above
Comma-separated list of options; if omitted, retrieve the command options from the Item dynamically. Use
Edit in YAML, e.g.
Objects are in the photos array format with an additional
Edit in YAML or provide a JSON object, e.g.
See photo browser parameters (not all are supported). Group Item whose members to show in a popup Start analyzing with the specified (set of) Item(s) The initial analyzing period - dynamic or a predefined fixed period: day, week, month or year The initial coordinate system of the analyzer - time, aggregate or calendar (only time is supported for dynamic periods) Shows a dialog or sheet to ask for confirmation before the action is executed. Can either be a text to show in the dialog or a JSON object
value=label format to provide a label different than the option.
Scene, Script or Rule to run
Object representing the optional context to pass. Edit in YAML or provide a JSON object, e.g. { "param1": "value1", "param2": { "subkey1": "testing", "subkey2": 123 } }.
Page to navigate to
Use a specific page transition animation
Page or widget to display in the modal
Configuration (prop values) for the target modal page or widget
Array of URLs or objects representing the images. Auto-refresh is not supported.Edit in YAML, e.g.
- item: ImageItem1
caption: Camera
[ "url1", { "item": "ImageItem1", "caption": "Camera" } ]Objects are in the photos array format with an additional
item property to specify an item to view.
Configuration for the photo browser.Edit in YAML or provide a JSON object, e.g.
{ "exposition": false, "type": "popup", "theme": "dark" }See photo browser parameters (not all are supported). Group Item whose members to show in a popup Start analyzing with the specified (set of) Item(s) The initial analyzing period - dynamic or a predefined fixed period: day, week, month or year The initial coordinate system of the analyzer - time, aggregate or calendar (only time is supported for dynamic periods) Shows a dialog or sheet to ask for confirmation before the action is executed. Can either be a text to show in the dialog or a JSON object
{ type: "dialog", title: "Confirm", text: "Are you sure?" } or { type: "sheet", text: "Confirm", color: "green" }
Shows a toast popup when the action has been executed. Can either be a text to show or a JSON object including some of the supported parameters
The variable name to set
The value to set the variable to
Consider the variable value is an object and set the corresponding deep property within that object using a key syntax. Examples: user.name, user[0].address[1].street, [0], [0].label. The inner property and its parent hierarchy will be created if missing.
Properties are forwarded to the underlying vue-round-slider component, which means you can set these parameters. A compatibility layer ensures backward compatibility with the vue-knob-control component that was initially used.