Hi @RGroll thanks. The issue was about quotes.
Changing =props.Mode_item to '=props.Mode_item' solved it.
hi folks
How do I used expressions with actionAnalyzerItems:
I tried:
actionAnalyzerItems:
- =props.AQI_item
it results in:
http://192.168.1.XXX:8080/#!/analyzer/?items==props.AQI_item&chartType=&coordSystem=time
Its taking everything after the dash ( - ) literally and not resoving it. doesn’t matter if i include quotes or not, or whether i remove the equal to sign etc.
Note, that this requires a 2 line syntax. pulling the item name back to the previous line doesnt work
Try
actionAnalyzerItems: =props.AQI_item
or maybe =[props.AQI_item] since it expects an array.
1 Like
Actually, a combination of two worked. haha
actionAnalyzerItems: =[props.AQI_item]
1 Like
Hi together,
is there a possibility to set multiple variables in one action?
I tried serval possibilities but was not able to get this working
- component: oh-label-card
config:
title: =vars.myVar1 || "myVar 1 empty"
label: =vars.myVar2 || "myVar2 empty"
content: click me
action: variable
actionVariable: myVar1, myVar2
actionVariableValue: "myVar1 has a value", "myVar2 has a value"
Hello- Is it possible to change the font size in card widget? Example below… where text is over flowing. I couldnt give any CSS property that works with cards for fonts
What card widget are you using? If you use an f7-card you can add the following to change the text size.
- component: f7-card
config:
content: test
style:
fontSize: 10px
1 Like
Yeah actually it’s an oh-label-cell … created in the UI in items screen - default cell widget. The Yaml can be edited but don’t know how to reduce font for it
I was not able to resize the oh-label-cell. I think you should use an f7-cell instead and build the logic inside this. If you share your code I will have a look on it.
1 Like
There’s a stateStyle property passed as CSS, sorry it isn’t documented 
component: oh-label-cell
config:
trendItem: ZW074Sensor_Temperature
action: analyzer
actionAnalyzerItems:
- ZW074Sensor_Temperature
item: ZW074Sensor_Temperature
title: Temperature
icon: oh:temperature
stateStyle:
fontSize: 18px
color: "=Number.parseFloat(items.ZW074Sensor_Temperature.state) > 20 ? 'red' : 'blue'"
3 Likes
Thanks. this was beautiful.
- in
oh-label-celli can’t get theon:expression to work for color. am i doing something wrong?
- component: oh-label-cell
config:
header: TV Power
footer: '="Input: "+(items.RoomTVMode.state)'
icon: f7:tv
stateStyle:
fontSize: 40px
color: green
item: RoomTVPower
action: toggle
actionItem: RoomTVPower
actionCommand: ON
actionCommandAlt: OFF
on: =(items.RoomTVPower.state=="ON")
- also - the three dots which correspond to the
expandableproperty. How can we use it? can we show another widget or something in the popup? (i am thinking two actions with one card - toggle with normal press and another action with the popup)
edit
3. Sorry one more question - is there a way to center align the oh-grid-cells such that the cell cards within are in the horizontal center. css styles dont seem to work with oh-block or oh-grid-cells
1 Like
- you found a bug
- yes, with limitations: see openHAB 3 Main UI - Question about Slots.
tl;dr the default slot controls what you can put in the expanded section (you can expand with a right click on a desktop instead of the 3 dots btw).
In this example it’s a list, but you can put any you want as long as it’s not a card or another cell - including a personal widget that you design separately.
component: oh-label-cell
config:
title: Test
...
slots:
default:
- component: widget:intesis_aircon
config: {}
(widget taken from @hmerk here: [SOLVED] UI Widget: Intesis aircon controller; No commands send to items)
I may add an option to let the user directly pick a widget.
Other cells have more slots: for instance oh-knob-cell has beforeKnob & afterKnob (put things above and below the knob, respectively), oh-slider-cell has beforeSlider & afterSlider etc.
- Afraid not, but this could be a nice option
These cells are still largely experimental, so while I tend to avoid breaking changes as much as possible there might be some while OH3 is not released.
1 Like
Hi… is there any (innovative?) Way to show an analyser chart in the expanded card layout? I cant seem to do it.
I guess a chart needs to be contained in a widget first… Dont know if it’s possible
Hi, thanks for @RGroll for the solution which inspire me to found another workaround by placeing two buttons one over the other.
The first button width=100% and the required bg colors (incl. hover and pressed) with the Label in the slots
The second button small width (I.e 100px) and transparent color with the oh-icon or oh-image in the slots
In this way it is possible to include any image or icon and also to correctly manage the button background colors
As soon as I rearrange a little bit the graphic I will post the solution if someone are interested
1 Like
@candiesdoodle @ysc any word on the list entries for a select type f7-input widget?
Also could the options inherit from commandDescription metadata by default? In essence both are k=v maps.
Working on the same widget, why doesn’t title: =items[props.item].label work? I’ve tried on an oh-input-card on a page and with a custom widget, but the title just remains blank as if it was not specified. Even specifying an item like title: =items.ITEM_NAME.label does the same thing. I see all over the place you can get item states like items.ITEM_NAME.state…
EDIT: Added just a little bit of content to better explain some things.
that items object are not the complete items actually, just their state (and eventual displayState with the transformations applied). It’s retrieved from a completely different API than the items endpoint.
For now if you want an option list the only way to do it is configure an “options” action and select the item - it will open an action sheet when you click the widget.
So does that mean there is no way to pull the item label at all in the UI?
Ah hah! That’s what I was looking for. I was looking at the f7-input card but you’ve already made that functionality into an action.
@ysc, @RGroll, it’s becoming more and more clear to me that we will need some sort of step by step tutorials for creating a custom widget. I took a shot at it using what I could glean from what gets built when I create stuff on the Overview page but’s its clear to me that I don’t have a clue what I’m doing and not getting to where I need to be.
What I was thinking was showing how to create a Chromecast widget showing the now playing image, player controls, volume control, a stop button, and the currently playing app. Bonus points for having it be hidden when the Idle channel is ON.
I was able to build something close to what I was thinking but it’s not one coherent widget. It’s a block with three rows and three disjoint cards.
uid: chromecast_widget
tags: []
props:
parameters:
- description: How all the Items associated with this chromecast starts
label: Item prefix
name: prefix
required: false
type: TEXT
- description: Title for the widget
label: Static Title
name: title
required: false
type: TEXT
parameterGroups: []
timestamp: Dec 3, 2020, 8:57:58 PM
component: oh-block
config:
title: =props.title
slots:
default:
- component: oh-grid-row
config: {}
slots:
default:
- component: oh-grid-col
config: {}
slots:
default:
- component: oh-image-card
config:
item: =props.prefix+"_Image"
- component: oh-grid-row
config: {}
slots:
default:
- component: oh-grid-col
config: {}
slots:
default:
- component: oh-player-card
config:
item: =props.prefix+"_MediaControl"
artistItem: =props.prefix+"_MediaArtist"
trackItem: =props.prefix+"_MediaTitle"
- component: oh-grid-col
config: {}
slots:
default:
- component: oh-list-card
config: {}
slots:
default:
- component: oh-slider-item
config:
item: =props.prefix+"_Volume"
min: 0
max: 100
step: 10
- component: oh-label-item
config:
action: command
actionCommand: ON
actionFeedback: Media Stopped
icon: f7:stop
iconColor: red
actionItem: =props.prefix+"_Stop"
- component: oh-grid-row
config: {}
slots:
default:
- component: oh-grid-col
config: {}
slots:
default:
- component: oh-label-card
config:
item: =props.prefix+"_App"
Even when I add this to my Overview page and set the parameters (very nice feature BTW) it ends up taking the full width of the page and it creates three separate rows of widgets. I was thinking that it would sit there nice and contained within the row and column I created and dropped it into.
I’m sure there is something simple I’m missing here. Maybe I misunderstand the differences between masonary, blocks, and cells or something. like that. And given this is a case where I want this to become a step-by step tutorial, I need to understand what I’m missing, or is this something that just can’t be done.
I really think we need some sort of ste-by-step for Pages like we have with the Things, model, and as of yesterday rules. Am I heading in the wrong direction? Or am I missing something simple?
2 Likes