Oh-knob-card

Setup, Configuration and Use Widgets
1

Hi,
just starting with the oh3 ui. (was dedicated fan of the habpanel)

Can someone maybe please tell me how can I add a unit display like “A” for amps for the value displayed inside of the gauge.

image

Is there any reference how to format pieces of the provided cards and what are the name of slots?

TIA
Maciej

2

The knob component comes from GitHub - kramer99/vue-knob-control: A rotary knob control for Vue.js . You can see in that doc there is a value-display-function option that will convert the displayed value. If you’re using any of the 3.4 releases then your widgets should be able to use the arrow function syntax to define a function that satisfies this property.

- component: oh-knob-card
  config:
    title: Current
    item: chargingCurrentItem
    valueDisplayFunction: =(x => `${x}A`)

image

Start here Creating Personal Widgets | openHAB . There are some explanations of how most of these components are derived and some links to the docs page and f7 pages that cover what you’re looking for.

3 Likes
3

Hey Justin, since the update to OpenHAB 4.0.0 this solution doesn‘t work anymore. Do you have an idea? I use the OpenHAB docker on qnap. Switching back to 3.4 the dipsplayValueFunction works again but i think this isn‘t a good way :wink:

4

The source widget underlying the oh-knob was changed for OH4. The new widget, as far as I know, doesn’t have, doesn’t have an equivalent function for modifying the displayed value. You might need to put in a feature request in the UI repository to get a property added to the oh-knob component that appends the desired text.

In the meantime, there is an awkward css fix. If you use the stylesheet property on the knob or knob card, then you can add an after pseudoclass and use that to add your text.

  stylesheet: >
    .rs-tooltip-text::after {
      content: ' A';
    }
1 Like
5

Bit dirty but it works, great!
In a quiet minute i can make the request, is a useful feature in my opinion.
Many thanks for the quick reply and explanation.

6

Hi,

Is it possible to use stylesheet in order to modify the size/color of the displayed value in OH4?

7

Yes, you would use almost exactly the same stylesheet only without the ::after pseudoclass.

Depending on how the new knob component is constructed, you may need to add !important to the declarations you are making so that they do not get overridden when the knob gets drawn.

8

Hi Justin,

Thanks much for the reply. I was able to change the color with the following:

stylesheet: >
    .rs-tooltip-text {
      color: red;
    }

However, was not successful with the text size.

stylesheet: >
    stylesheet: >
    .rs-tooltip-text {
      size: 15px;
    }

Could you please point out where I have gotten it wrong.
Also, at the risk of sounding redundant , has there been any change to the oh-knob that allows color gradient? or maybe oh-gauge? Thx much!

9

The css property for text size is not size but font-size.

I don’t believe so. The knob currently uses this library:

10

Much appreciate all the help!