Hello, I solved the problem myself
What did you do to get it working?
Putting the oh-image inside an f7-block makes the refresh of the image work?
Yes runs. this is only for the shadow run from oh2
matix-theme. so specially intended for it.
Hey @RGroll,
this is a bit OT, but is anyway related to the f7-segmented used in the widget above…
I’m on my way to define buttons to select the operating mode of my Daikin HVAC.
Button pressed selects the correct operating mode of the HVAC, but I’m struggeling to get the right button highlighted with the current seeting.
It seems as if the “fill:” always receives “true”, hence all buttons are highlighed.
item:
DaikinACUnit192168040_Mode
oh-button config / fill (e.g. string “COLD” activates cooling mode":
fill: "=(item.DaikinACUnit192168040_Mode.state === 'COLD') ? true : false"
YAML:
uid: f7-segmented Test
tags: []
props: []
parameterGroups: []
timestamp: Jan 24, 2021, 10:23:25 AM
component: f7-card-content
config:
style:
--f7-card-margin-horizontal: 0px
--f7-card-margin-vertical: 3px
--f7-card-content-padding-horizontal: 10px
--f7-card-content-padding-vertical: 10px
slots:
default:
- component: f7-segmented
config:
round: false
outline: false
class:
- segmented-strong
style:
--f7-segmented-strong-padding: 0px
--f7-segmented-strong-between-buttons: 5px
--f7-segmented-strong-button-font-weight: 300
--f7-segmented-strong-bg-color: rgba(255, 255, 255, 0.05)
--f7-segmented-strong-button-hover-bg-color: rgba(255, 255, 255, 0.07)
slots:
default:
- component: oh-button
config:
iconF7: arrow_2_squarepath
fill: "=(item.DaikinACUnit192168040_Mode.state === 'AUTO') ? true : false"
round: false
outline: false
style:
--f7-button-font-size: 14px
--f7-button-border-width: 1px
--f7-button-text-color: white
--f7-button-border-color: rgba(255,255,255,.15)
--f7-button-border-radius: 5px
action: command
actionItem: DaikinACUnit192168040_Mode
actionCommand: ="AUTO"
- component: oh-button
config:
iconF7: snow
fill: "=(item.DaikinACUnit192168040_Mode.state === 'COLD') ? true : false"
round: false
outline: false
style:
--f7-button-font-size: 14px
--f7-button-border-width: 1px
--f7-button-text-color: white
--f7-button-border-color: rgba(255,255,255,.15)
--f7-button-border-radius: 5px
action: command
actionItem: DaikinACUnit192168040_Mode
actionCommand: ="COLD"
- component: oh-button
config:
iconF7: flame
fill: "=(item.DaikinACUnit192168040_Mode.state === 'HEAT') ? true : false"
round: false
outline: false
style:
--f7-button-font-size: 14px
--f7-button-border-width: 1px
--f7-button-text-color: white
--f7-button-border-color: rgba(255,255,255,.15)
--f7-button-border-radius: 5px
action: command
actionItem: DaikinACUnit192168040_Mode
actionCommand: ="HEAT"
- component: oh-button
config:
iconF7: drop
fill: "=(item.DaikinACUnit192168040_Mode.state === 'DEHUMIDIFIER') ? true : false"
round: false
outline: false
style:
--f7-button-font-size: 14px
--f7-button-border-width: 1px
--f7-button-text-color: white
--f7-button-border-color: rgba(255,255,255,.15)
--f7-button-border-radius: 5px
action: command
actionItem: DaikinACUnit192168040_Mode
actionCommand: ="DEHUMIDIFIER"
- component: oh-button
config:
iconF7: wind
fill: "=(item.DaikinACUnit192168040_Mode.state === 'FAN') ? true : false"
round: false
outline: false
style:
--f7-button-font-size: 14px
--f7-button-border-width: 1px
--f7-button-text-color: white
--f7-button-border-color: rgba(255,255,255,.15)
--f7-button-border-radius: 5px
action: command
actionItem: DaikinACUnit192168040_Mode
actionCommand: ="FAN"
What am I doing wrong?
Thanks a lot !
Great idea and post. Thus, wants me to make similar things.
So far, so good, but I have a design issue and no idea how to solve it.
I always have a white bar at the bottom and don’t know how to get rid of it. I do not need a header or footer. My very basic code so far:
uid: Chart-widget
tags: []
props:
timestamp: Jan 25, 2021, 2:32:56 PM
component: f7-card
config:
style:
border-radius: 20px
background-color: rgba(17,28,31)
slots:
default:
- component: f7-card-content
slots:
default:
- component: oh-webframe-card
config:
src: https://server:3000/d-solo/0ZnG09uZk/openhab?orgId=2&refresh=5m&from=now-8h&to=now&panelId=2
Anyone any idea?
Fixed it with adding/chaging the following in the webframe definition
- component: oh-webframe-card
config:
src: =props.urlContent
class:
- display-block@ysc ,
is there a way change the orientation of the f7-segmented to vertical?
Couldn’t find anything on the f7 website…
Thank you.
No, you can stack regular buttons vertically with flexbox but that’s all.
Or you can try the transform: rotate(-90deg) along with transform-origin and some other adjustments. Probably not what you wanted though.
component: f7-card
config:
title: Rotate
footer: =props.prop1
style:
height: 300px
slots:
default:
- component: f7-card-content
config:
style:
display: flex
flex-direction: row
height: 200px
slots:
default:
- component: f7-segmented
config:
round: true
style:
width: 200px
margin-left: -80px
transform: rotate(-90deg)
transform-origin: center center
slots:
default:
- component: oh-button
config:
text: 123
round: true
outline: true
- component: oh-button
config:
text: 234
round: true
outline: true
- component: oh-button
config:
text: 345
round: true
outline: true
Thanks for this code. I used it and is working fine.
I want to extent this code with a second line of buttons where you can select the base url. In that way the same yaml code can be used to display multiple Grafana layouts.
Did already someone created such a layout?
Or is there another way to archive the same?
Well, haven’t tried myself but I’d try with the same approach as described here for {period}.
I would see 2 options that should work:
-
Replace “panelId=2” with “panelId={panelnumber}” to differentiate between the different graphs when the graphs are in the same grafana dashboard
-
Replace “4OdYJNbMk/energie-pv-haus” with “{dashboard}” when the graphs are in different dashboards
… or a combination of the 2 options.
Awesome widget. I would be really happy to use it. Maybe you can help me with my issue. I have set up InfluxDB and I am using Grafana 7.2.0.
The problem I am facing is that after adding the props to the widget and saving it doesn’t show the graph at all. Tried different browsers.
adding the props
graph not showing in page
I also wonder that the props seem to disappear. After chosing “set props” again the property values are empty. Even though I saved them before and had a preview as you can see in the picture above.
props empty again
Is this an issue about the grafana credentials or embedding itself?
Props are not saved in “Widgets” section - this is where you edit your widget and you can set some temporary props to see whether the widget works properly.
You need to go to the page on which you use the widget and set props there. Don’t forget to save the page.
1 Like
What a bummer. I was not aware of that. Thanks a lot. Works out of the box.
Do you have some screenshots of your UIs somewhere?
Great Widget!
maybe someone can help including a datepicker “Kalender”?
uid: Grafana chart with timeranges
tags: []
props:
parameters:
- description: Title of the chart
label: Title
name: title
required: false
type: TEXT
- description: URL to show in the frame
label: Source URL
- default: https://xxxx.de/solaranzeige/d-solo/KyT4EHHVz/eiche-10?orgId=1&refresh=5s&{period}&panelId=118"
name: URL
required: true
type: TEXT
- default: from=now%2Fd&to=now%2Fd;Heute,from=now-1d%2Fd&to=now-1d%2Fd;Gestern,from=now-2d%2Fd&to=now-2d%2Fd;Vorgestern,from=now-3d&to=now;Die letzten 3 Tage,from=now-7d&to=now;Die letzten 7 Tage,from=now-14d&to=now;Kalender
description: Comma-separated List of options. Example "from=now-6h&to=now;-6h,from=now-1d/d&to=now-1d/d;yesterday" for past "6h" and "yesterday". First entry is default.
label: Time range options
name: timerange
required: true
type: TEXT
- description: Height of the Frame (empty = default)
label: Height
name: height
required: false
type: TEXT
parameterGroups: []
timestamp: Mar 22, 2023, 4:21:08 AM
component: f7-card
config:
title: =props.title
outline: true
style:
--f7-card-margin-horizontal: 10px
--f7-card-margin-vertical: 3px
--f7-card-padding-horizontal: 10px
--f7-card-padding-vertical: 100px
margin-top: 10px
margin-bottom: 10px
noShadow: false
border-radius: var(--f7-card-expandable-border-radius)
box-shadow: 5px 5px 10px 1px rgba(0,0,0,0.3)
slots:
default:
- component: oh-webframe-card
config:
borders: false
noBorder: false
noShadow: true
height: =props.height
src: =props.URL.replace('{period}', vars.selectedPeriod || [props.timerange.split(',')[0].split(';')[0]])
class:
- display-block
- component: f7-segmented
config:
round: false
outline: false
class:
- padding-bottom-half
style:
margin-left: 10px
margin-right: 10px
--f7-button-font-size: 14px
--f7-button-text-color: "=themeOptions.dark === 'light' ? 'black' : 'white'"
--f7-button-text-transform: none
--f7-button-border-radius: 4px
--f7-button-outline-border-width: 1px
--f7-button-font-weight: 300
--f7-button-padding-vertical: 0px
--f7-button-padding-horizontal: 0px
slots:
default:
- component: oh-repeater
config:
sourceType: range
for: size
fragment: true
slots:
default:
- component: oh-repeater
config:
fragment: true
for: period
in: =[props.timerange.split(",")[loop.size].split(";")[1]]
slots:
default:
- component: oh-button
config:
text: =loop.period
fill: "=(([props.timerange.split(',')[loop.size].split(';')[0]] == vars.selectedPeriod) || (props.timerange.split(',')[0].split(';')[1] === loop.period) && !vars.selectedPeriod) ? true : false"
round: false
outline: true
style:
--f7-button-border-color: var(--f7-card-outline-border-color)
action: variable
actionVariable: selectedPeriod
actionVariableValue: =props.timerange.split(",")[loop.size].split(";")[0]