2021-02-05 18:22:23 +00:00
---
title: oh-knob-card - Knob Card
component: oh-knob-card
label: Knob Card
description: Display a knob in a card to visualize and control a quantifiable item
source: https://github.com/openhab/openhab-webui/edit/main/bundles/org.openhab.ui/doc/components/oh-knob-card.md
2021-03-01 14:42:17 +00:00
prev: /docs/ui/components/
2021-02-05 18:22:23 +00:00
---
2023-03-11 15:05:05 +00:00
# oh-knob-card - Knob & Rounded Slider Card
2021-02-05 14:16:35 +00:00
2023-02-12 19:21:15 +00:00
2021-03-01 14:42:17 +00:00
[[toc]]
<!-- Note: you can overwrite the definition - provided description and add your own intro/additional sections instead -->
<!-- DO NOT REMOVE the following comments if you intend to keep the definition - provided description -->
2021-02-05 14:16:35 +00:00
<!-- GENERATED componentDescription -->
2023-03-11 15:05:05 +00:00
Display a knob or a rounded slider in a card to visualize and control a quantifiable item
2021-02-05 14:16:35 +00:00
<!-- GENERATED /componentDescription -->
## Configuration
2023-03-11 15:05:05 +00:00
Use the advanced properties to change the appearance from a knob to a rounded slider.
2021-03-01 14:42:17 +00:00
<!-- DO NOT REMOVE the following comments -->
2021-02-05 14:16:35 +00:00
<!-- GENERATED props -->
### Card
2021-03-01 14:42:17 +00:00
< div class = "props" >
< PropGroup name = "card" label = "Card" >
Parameters of the card
< PropBlock type = "TEXT" name = "title" label = "Title" >
< PropDescription >
Title of the card
< / PropDescription >
< / PropBlock >
< PropBlock type = "TEXT" name = "footer" label = "Footer text" >
< PropDescription >
Footer of the card
< / PropDescription >
< / PropBlock >
< PropBlock type = "BOOLEAN" name = "noBorder" label = "No Border" >
< PropDescription >
Do not render the card border
< / PropDescription >
< / PropBlock >
< PropBlock type = "BOOLEAN" name = "noShadow" label = "No Shadow" >
< PropDescription >
Do not render a shadow effect to the card
< / PropDescription >
< / PropBlock >
< PropBlock type = "BOOLEAN" name = "outline" label = "Outline" >
< PropDescription >
Show the card outline
< / PropDescription >
< / PropBlock >
< / PropGroup >
< / div >
2021-02-05 14:16:35 +00:00
2023-03-11 15:05:05 +00:00
### Knob & Rounded Slider
2021-03-01 14:42:17 +00:00
< div class = "props" >
2023-03-11 15:05:05 +00:00
< PropGroup name = "knob" label = "Knob & Rounded Slider" >
Parameters are passed to the underlying < a target = "_blank" class = "external text-color-blue" href = "https://github.com/soundar24/vue-round-slider#props" > round-slider control< / a >
2021-03-01 14:42:17 +00:00
< PropBlock type = "TEXT" name = "item" label = "Item" context = "item" >
< PropDescription >
Item to control
< / PropDescription >
< / PropBlock >
< PropBlock type = "INTEGER" name = "min" label = "Min" >
< PropDescription >
Minimum value (default 0)
< / PropDescription >
< / PropBlock >
< PropBlock type = "INTEGER" name = "max" label = "Max" >
< PropDescription >
Maximum value (default 100)
< / PropDescription >
< / PropBlock >
2023-03-11 15:05:05 +00:00
< PropBlock type = "DECIMAL" name = "step" label = "Step" >
2023-02-12 19:21:15 +00:00
< PropDescription >
2023-03-11 15:05:05 +00:00
Minimum interval between values (default 1)
2023-02-12 19:21:15 +00:00
< / PropDescription >
< / PropBlock >
2023-05-07 12:20:42 +00:00
< PropBlock type = "DECIMAL" name = "offset" label = "Offset" >
< PropDescription >
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)
< / PropDescription >
< / PropBlock >
2023-06-13 13:32:35 +00:00
< PropBlock type = "BOOLEAN" name = "ignoreDisplayState" label = "Ignore Display State" >
< PropDescription >
Ignore the display state if available and always use the raw state.
< / PropDescription >
< / PropBlock >
2023-03-11 15:05:05 +00:00
< PropBlock type = "BOOLEAN" name = "releaseOnly" label = "Send command only on release" >
2023-02-12 19:21:15 +00:00
< PropDescription >
2023-03-11 15:05:05 +00:00
If enabled, no commands are sent during sliding
2023-02-12 19:21:15 +00:00
< / PropDescription >
< / PropBlock >
2023-03-11 15:05:05 +00:00
< PropBlock type = "INTEGER" name = "commandInterval" label = "Command Interval" >
2023-02-12 19:21:15 +00:00
< PropDescription >
2023-03-11 15:05:05 +00:00
Time to wait between subsequent commands in ms (default 200)
2023-02-12 19:21:15 +00:00
< / PropDescription >
< / PropBlock >
2023-03-11 15:05:05 +00:00
< PropBlock type = "INTEGER" name = "delayStateDisplay" label = "Delay State Display" >
2021-03-01 14:42:17 +00:00
< PropDescription >
2023-03-11 15:05:05 +00:00
Time to wait before switching from displaying user input to displaying Item state in ms (default 2000)
2021-03-01 14:42:17 +00:00
< / PropDescription >
< / PropBlock >
< PropBlock type = "BOOLEAN" name = "disabled" label = "Disabled" >
< PropDescription >
Disable the slider (usually set via an expression since the value will not be displayed when disabled)
< / PropDescription >
< / PropBlock >
< PropBlock type = "INTEGER" name = "size" label = "Size" >
< PropDescription >
Visual size of the control in px (or % if responsive is true)
< / PropDescription >
< / PropBlock >
2023-03-11 15:05:05 +00:00
< PropBlock type = "BOOLEAN" name = "responsive" label = "Responsive" >
2021-03-01 14:42:17 +00:00
< PropDescription >
2023-03-11 15:05:05 +00:00
Size the control using percentages instead of pixels
2021-03-01 14:42:17 +00:00
< / PropDescription >
< / PropBlock >
2023-03-11 15:05:05 +00:00
< PropBlock type = "INTEGER" name = "strokeWidth" label = "Stroke Width" >
2021-03-01 14:42:17 +00:00
< PropDescription >
2023-03-11 15:05:05 +00:00
Thickness of the arcs (default 18)
2021-03-01 14:42:17 +00:00
< / PropDescription >
< / PropBlock >
2023-03-11 15:05:05 +00:00
< PropBlock type = "INTEGER" name = "startAngle" label = "Start Angle" >
2021-03-01 14:42:17 +00:00
< PropDescription >
2023-03-11 15:05:05 +00:00
Angle of circle where the round slider should start (default -50); 0 is 9 o'clock; only if circleShape is not set
2021-03-01 14:42:17 +00:00
< / PropDescription >
< / PropBlock >
2023-03-11 15:05:05 +00:00
< PropBlock type = "INTEGER" name = "endAngle" label = "End Angle" >
2023-02-12 19:21:15 +00:00
< PropDescription >
2023-03-11 15:05:05 +00:00
Angle of circle where the round slider should start (default -130); 360 is 9 o'clock; only if circleShape is not set
2023-02-12 19:21:15 +00:00
< / PropDescription >
< / PropBlock >
2023-03-11 15:05:05 +00:00
< PropBlock type = "TEXT" name = "circleShape" label = "Circle Shape" >
2023-02-12 19:21:15 +00:00
< PropDescription >
2023-03-11 15:05:05 +00:00
Indicates the circle shape to be render
2023-02-12 19:21:15 +00:00
< / PropDescription >
2023-03-11 15:05:05 +00:00
< PropOptions >
< PropOption value = "full" label = "full" / >
< PropOption value = "half-top" label = "half top" / >
< PropOption value = "half-bottom" label = "half bottom" / >
< PropOption value = "half-left" label = "half left" / >
< PropOption value = "half-right" label = "half right" / >
< PropOption value = "quarter-top-left" label = "quarter top left" / >
< PropOption value = "quarter-top-right" label = "quarter top right" / >
< PropOption value = "quarter-bottom-left" label = "quarter bottom left" / >
< PropOption value = "quarter-bottom-right" label = "quarter bottom right" / >
< PropOption value = "pie" label = "pie" / >
< / PropOptions >
2023-02-12 19:21:15 +00:00
< / PropBlock >
2023-03-11 15:05:05 +00:00
< PropBlock type = "TEXT" name = "lineCap" label = "Line Cap" >
2023-02-12 19:21:15 +00:00
< PropDescription >
2023-04-10 13:23:24 +00:00
Sets the shape of the end of the path; dotted path and line cap cannot be used together.
2023-02-12 19:21:15 +00:00
< / PropDescription >
2023-03-11 15:05:05 +00:00
< PropOptions >
< PropOption value = "square" label = "square" / >
< PropOption value = "round" label = "round" / >
< / PropOptions >
2023-02-12 19:21:15 +00:00
< / PropBlock >
2023-03-11 15:05:05 +00:00
< PropBlock type = "TEXT" name = "dottedPath" label = "Dotted Path" >
2023-02-12 19:21:15 +00:00
< PropDescription >
2023-04-10 13:23:24 +00:00
Length of dotted path segments (using css stroke-dasharray); dotted path and line cap cannot be used together.
2023-02-12 19:21:15 +00:00
< / PropDescription >
< / PropBlock >
2023-03-11 15:05:05 +00:00
< PropBlock type = "INTEGER" name = "borderWidth" label = "Border Width" >
2021-03-01 14:42:17 +00:00
< PropDescription >
2023-03-11 15:05:05 +00:00
Sets the border width of the slider (px value)
2021-03-01 14:42:17 +00:00
< / PropDescription >
< / PropBlock >
2023-03-11 15:05:05 +00:00
< PropBlock type = "TEXT" name = "handleSize" label = "Handle Size" >
2021-03-01 14:42:17 +00:00
< PropDescription >
2023-03-11 15:05:05 +00:00
Sets the size of the slider handle (px value)
2021-03-01 14:42:17 +00:00
< / PropDescription >
< / PropBlock >
2023-03-11 15:05:05 +00:00
< PropBlock type = "TEXT" name = "handleShape" label = "Handle Shape" >
2021-05-16 18:25:36 +00:00
< PropDescription >
2023-03-11 15:05:05 +00:00
Sets the shape of the slider handle
2021-06-27 16:17:32 +00:00
< / PropDescription >
2023-03-11 15:05:05 +00:00
< PropOptions >
< PropOption value = "square" label = "square" / >
< PropOption value = "round" label = "round" / >
< PropOption value = "dot" label = "dot" / >
< / PropOptions >
2021-06-27 16:17:32 +00:00
< / PropBlock >
2023-03-11 15:05:05 +00:00
< PropBlock type = "TEXT" name = "borderColor" label = "Border Color" >
2021-06-27 16:17:32 +00:00
< PropDescription >
2023-03-11 15:05:05 +00:00
Sets the border color of the slider; set borderWidth as well! (HTML value)
2021-05-16 18:25:36 +00:00
< / PropDescription >
< / PropBlock >
2023-03-11 15:05:05 +00:00
< PropBlock type = "TEXT" name = "pathColor" label = "Path Color" >
< PropDescription >
Sets the path color of the slider (HTML value)
< / PropDescription >
< / PropBlock >
< PropBlock type = "TEXT" name = "rangeColor" label = "Range Color" >
2021-05-16 18:25:36 +00:00
< PropDescription >
2023-03-11 15:05:05 +00:00
Sets the range color of the slider (HTML value)
< / PropDescription >
< / PropBlock >
< PropBlock type = "TEXT" name = "tooltipColor" label = "Tooltip Color" >
< PropDescription >
Sets the tooltip color of the slider (HTML value)
2021-05-16 18:25:36 +00:00
< / PropDescription >
< / PropBlock >
2021-03-01 14:42:17 +00:00
< / PropGroup >
< / div >
2021-02-05 14:16:35 +00:00
2021-03-01 14:42:17 +00:00
<!-- GENERATED /props -->
2021-02-05 14:16:35 +00:00
2021-03-01 14:42:17 +00:00
### Inherited Properties
2021-02-05 14:16:35 +00:00
2023-03-11 15:05:05 +00:00
Properties are forwarded to the underlying [vue-round-slider ](https://vue.roundsliderui.com/ ) component, which means you can set [these parameters ](https://roundsliderui.com/document.html#options ).
A compatibility layer ensures backward compatibility with the [vue-knob-control ](https://github.com/kramer99/vue-knob-control#readme ) component that was initially used.
2021-02-05 14:16:35 +00:00
2021-03-01 14:42:17 +00:00
<!-- If applicable describe the slots recognized by the component and what they represent:
### Slots
2021-02-05 14:16:35 +00:00
2021-03-01 14:42:17 +00:00
#### `default`
2021-02-05 14:16:35 +00:00
2021-03-01 14:42:17 +00:00
The contents of the oh-knob-card.
2021-02-05 14:16:35 +00:00
2021-03-01 14:42:17 +00:00
-->
2021-02-05 14:16:35 +00:00
2021-03-01 14:42:17 +00:00
<!-- Add as many examples as desired - put the YAML in a details container when it becomes too long (~150/200+ lines):
## Examples
2021-02-05 14:16:35 +00:00
2021-03-01 14:42:17 +00:00
### Example 1
2021-02-05 14:16:35 +00:00
2021-03-01 14:42:17 +00:00
2021-02-05 14:16:35 +00:00
2021-03-01 14:42:17 +00:00
```yaml
component: oh-knob-card
config:
prop1: value1
prop2: value2
```
2021-02-05 14:16:35 +00:00
2021-03-01 14:42:17 +00:00
### Example 2
2021-02-05 14:16:35 +00:00
2021-03-01 14:42:17 +00:00
2021-02-05 14:16:35 +00:00
2021-03-01 14:42:17 +00:00
::: details YAML
```yaml
component: oh-knob-card
config:
prop1: value1
prop2: value2
slots
```
:::
2021-02-05 14:16:35 +00:00
2021-03-01 14:42:17 +00:00
-->
2021-02-05 14:16:35 +00:00
2021-03-01 14:42:17 +00:00
<!-- Try to clean up URLs to the forum (https://community.openhab.org/t/<threadID>[/<postID>] should suffice)
## Community Resources
2021-02-05 14:16:35 +00:00
2021-03-01 14:42:17 +00:00
- [Community Post 1 ](https://community.openhab.org/t/12345 )
- [Community Post 2 ](https://community.openhab.org/t/23456 )
-->
