This is a link to open a popup from weather widget:
Awesome stuff @narf27 and @Mark_VG! I might just create a generic âbuttonâ widget to pop-up my other widgets in a specific window format. For the time being until we can call a specific pop-up format from a cell off course
Hi!
i tried your widget Cell_Weather_Actual_1
on your screenshot for mobile it looks like this:
on pc it looks just like that, but on mobile the line-height changes:
please ignore the display state for temp and the missing values - the screen should only show the gap between lines.
card is exactly the same as in your code (height: 150px) and on your example 3 lines would fit in the card. on my android phone the third line it outside the card⊠as i would like to add another row i would reeaaally like to change the line-height / gap between the lines. i tried with margin-bottom = 0px
for the f7-chips but the space between lines (on phone) is still to bigâŠ
Hi!
i presume the group for lights is defined as Group:Number:SUM
, right?
with âSUMâ iâm not able to switch OFF all lights in the group with gLights.sendCommand(OFF)
anymore.
Or is there another way to count the lights that are âONâ and where i will still be able to send commands through the group item?
I think you can just use 2 groups. One for cutting GroupLightStatus and the other for control GroupLightControl
so the info on Items | openHAB is out of date?
Examples for derived states on Group Items when declared in the Item DSL:
Group:Number Lights "Active Lights [%d]" // e.g. "2" Group:Switch:OR(ON,OFF) Lights "Active Lights [%d]" // e.g. ON and "2" Group:Switch:AND(ON,OFF) Lights "Active Lights [%d]" // e.g. ON and "2"
The first three examples above compute the number of active lights and store them as group state. However, the second group is of type switch and has an aggregation function of
OR
. This means that the state of the group will beON
as soon as any of the member lights are turned on.
no, the docs describe exactly what @opnhab7373 said. If you want the count of lights that are on and also to be able to command all the lights through the Group, you need two Groups, one with Number and the other with Switch as the type.
Hey @Integer ,
I am absolutely stoked by the look of your Main UI. Iâll try to copy some of your widgets to customize them by my own needs. Very nice template!
By the way: Is anyone able to give me a hint how to configure the f7-components when developing new widgets. I tried very hard the last days, but the docs at Building Pages - Components & Widgets | openHAB and Component Reference | openHAB are not very meaningful in case of explaining how to use f7-components. It ist not easy to get the openHAB documentation and Framework7 Documentation together. I didnât manage to find out, which config options and slot options are available for the different f7 components in openHAB. Is there any tutorial or additional documentation beside the mentioned openHAB sides available? Especially for developing openHAB widgets with f7 components?
Regards,
Boris
EDIT: Ok, I got it. Didnât know that openHAB ist using svelte. The documentation at Block Svelte Component | Framework7 Svelte Documentation is easy to understand and all config options are quite clear.
I would like to share with you my widgets for the grid layout. The widgets are available in table version and in a special version for mobile screens optimized. The widgets are tested on iPad and iPhone.
Use it, or take them and modify them
The source code can be found here:
Regards,
Andras
Your widgets for iphone and ipad looks good and i would like to use them.
Could you pls. share the YAML of the grip page you use to have a easy starting point for myself
Thanks in advance.
Hello guys! Finally iâve made my widgets to show some useful info from my rooms!
first i wanna thank all people that post their widgets here in the forum so iâve learnt many things and to put the right code in the right place (i hope!).
i would like to say that this widget is highly customizable and is studied to add those functions that are missing in openhab customization and are made easy to understand for beginners like me.
there is the possibility to add a big icon on top center, the description, and if you want, you can add 2 other items to display the state. in my case it show the number of lights turned on, and the status of rollershutter. all labels and icons can be colored by widget settings.
last, you can decide to add the wallpaper to the card and eventually a footer text. one last thing, iâve added action when the widget is clicked.
This image is how the widget looks like from computer.
âŠand this is looks like from my iPhone X.
let me know what do you think of this job, i will appreciate. also i add the widget code to be checked and eventually cleaned and adjusted by who is better than me in coding.
thanks to all for feedback!
uid: Label-Card-Background-IconsV2
tags:
- MadeByEvil
props:
parameters:
- description: Path of the background image
label: Image path
name: imagepath
required: false
type: TEXT
- description: Icon name (without f7)
label: Icon
name: icon
required: false
type: TEXT
- description: Icon color
label: Icon color
name: iconcolor
required: false
type: TEXT
- description: Label of the card
label: Label
name: desc
required: false
type: TEXT
- description: Label color for the title of the card
label: Label color
name: desccolor
required: false
type: TEXT
- description: Description under the card
label: Footer text
name: defi
required: false
type: TEXT
- context: item
description: Extra item to show
label: Item
name: extra_item
required: false
type: TEXT
- context: icon
description: Icon of the extra item (visible only when extra item is defined)
label: Extra item icon
name: extra_item_icon
required: false
type: TEXT
- context: item
description: Another extra item to show
label: Item
name: extra_item_2
required: false
type: TEXT
- context: icon
description: Icon of the secondary extra item (visible only when extra item is defined)
label: Secondary extra item icon
name: extra_item_2_icon
required: false
type: TEXT
parameterGroups:
- name: widgetAction
context: action
label: Action
description: Action to perform when the element is clicked
timestamp: Dec 4, 2021, 1:52:48 PM
component: f7-card
slots:
default:
- component: oh-link
config:
actionPropsParameterGroup: widgetAction
color: white
class:
- no-padding
- no-margin
style:
max-height: 192px
width: 100%
height: 100%
position: absolute
top: 0
left: 0
z-index: 98
- component: f7-block
config:
style:
min-height: 110px
background: ='url(' + props.imagepath + ')'
background-size: 100% 240%
background-repeat: no-repeat
display: flex
flex-direction: column
background-position: center
slots:
default:
- component: f7-icon
config:
f7: =props.icon
color: =props.iconcolor
size: 28
style:
position: absolute
width: 100%
height: 100%
top: 15%
left: 0
- component: oh-link
config:
action: navigate
actionPage: ='page:' + props.targetPage
style:
position: absolute
width: 100%
height: 100%
top: 0
left: 0
- component: Label
config:
text: =props.desc
style:
font-weight: 400
color: =props.desccolor
font-size: 18px
text-align: center
margin-top: 35px
line-height: 50px
overflow: hidden
- component: f7-icon
config:
f7: =props.extra_item_icon
size: 15
color: =props.iconcolor
visible: "=props.extra_item ? true : false"
style:
margin-left: -5px
bottom: 5px
position: absolute
- component: Label
config:
visible: "=props.extra_item ? true : false"
text: =items[props.extra_item].state
style:
color: =props.iconstextcolor
font-size: 15px
margin-left: 15px
bottom: 1px
position: absolute
- component: f7-icon
config:
visible: "=props.extra_item_2 ? true : false"
f7: =props.extra_item_2_icon
size: 15
color: =props.iconcolor
style:
margin-left: 40px
bottom: 5px
position: absolute
- component: Label
config:
visible: "=props.extra_item_2 ? true : false"
text: =items[props.extra_item_2].state
style:
color: =props.iconstextcolor
font-size: 15px
margin-left: 60px
bottom: 1px
position: absolute
- component: f7-block
config:
min-height: 20px
- component: Label
config:
text: =props.defi
style:
font-weight: 400
color: grey
font-size: 10px
margin-left: 15px
line-height: 20px
overflow: hidden
Hi,
no problem.
here is the YAML Fiel for Tablet. The Mobile version is the same with the âgwmâ instead of âgwâ as prefix.
config:
layoutType: fixed
label: Overview - Tablet
margin: 5
sidebar: true
order: "1"
hideNavbar: true
hideSidebarIcon: true
colNum: 13
screenWidth: 1024
screenHeight: 768
scale: false
blocks: []
masonry: null
grid:
- component: oh-grid-item
config:
x: 0
y: 2
h: 3
w: 3
slots:
default:
- component: widget:gw_RoomWidget
config:
header: Nappali / TV
lightState: ActuatorABB700D85E2FArbeitszimmer_ActuatorChannel
roomTemperature: MeasuredTemperature
roomSetTemperature: SetpointTemperature
button_action: navigate
button_actionPage: page:page_63122c2c9b
button_actionModalConfig: {}
backgroundImageUrl: /static/TV.jpg
button_actionModal: page:page_63122c2c9b
popupId: nappali
showLowerPart: true
- component: oh-grid-item
config:
x: 3
y: 2
h: 3
w: 3
slots:
default:
- component: widget:gw_RoomWidget
config:
header: DolgozĂłszoba
lightState: ActuatorABB700D85E2FArbeitszimmer_ActuatorChannel
roomTemperature: ThermostatABB700CF0FB0Arbeitszimmer_ThermostatMeasuredTemperature
roomSetTemperature: ThermostatABB700CF0FB0Arbeitszimmer_SetpointTemperature
button_action: navigate
button_actionPage: page:page_ede1311420
button_actionModalConfig: {}
backgroundImageUrl: /static/arbeitszimmer.jpg
button_actionModal: page:page_ede1311420
colorCodeTopText_d: "#111111"
popupId: dolgozo
showLowerPart: true
- component: oh-grid-item
config:
x: 6
y: 2
h: 3
w: 3
slots:
default:
- component: widget:gw_RoomWidget
config:
header: HĂĄlĂłszoba
lightState: ActuatorABB700D85E31Schlafzimmer_ActuatorChannel
roomTemperature: ThermostatABB700CFC324Schlafzimmer_ThermostatMeasuredTemperature
roomSetTemperature: ThermostatABB700CFC324Schlafzimmer_SetpointTemperature
button_action: navigate
button_actionPage: page:page_3283a58fd5
button_actionModalConfig: {}
backgroundImageUrl: /static/bedroom.jpg
button_actionModal: page:page_3283a58fd5
popupId: haloszoba
showLowerPart: true
- component: oh-grid-item
config:
x: 9
y: 2
h: 3
w: 3
slots:
default:
- component: widget:gw_RoomWidget
config:
header: Konyha
roomTemperature: ThermostatABB700D0FC10Kuche_ThermostatMeasuredTemperature
roomSetTemperature: ThermostatABB700D0FC10Kuche_SetpointTemperature
button_action: navigate
button_actionModal: widget:widget_Room_LivingRoom
button_actionModalConfig: {}
popupId: konyha
colorCodeTop_d: "#cccccc"
colorCodeTopText_d: "#111111"
button_actionPage: page:page_b0a767a8f1
showLowerPart: true
- component: oh-grid-item
config:
x: 9
y: 5
h: 3
w: 3
slots:
default:
- component: widget:gw_RoomWidget
config:
header: FĂŒrdĆszoba
roomTemperature: ThermostatABB700CFF611Bad_ThermostatMeasuredTemperature
roomSetTemperature: ThermostatABB700CFF611Bad_SetpointTemperature
colorCodeText: "#111111"
button_action: navigate
button_actionPage: page:page_6b1965d8d4
colorCodeTopText_d: "#111111"
showLowerPart: true
- component: oh-grid-item
config:
x: 0
y: 5
h: 3
w: 3
slots:
default:
- component: widget:gw_RoomWidget
config:
backgroundImageUrl: /static/Yamaha.png
header: Multimedia
button_action: navigate
button_actionPage: page:page_676790417d
button_actionModalConfig: {}
button_actionModal: page:page_676790417d
colorCodeText: "#111111"
popupId: multimedia
colorCodeTopText_d: "#111111"
- component: oh-grid-item
config:
x: 0
y: 0
h: 2
w: 2
slots:
default:
- component: widget:gw_CompButton
config:
header: HangulatvilĂĄgĂtĂĄs
activeIcon: lightbulb_fill
inactiveIcon: lightbulb
itemForState: SwitchMoodlight_Livingroom
button_action: toggle
button_actionItem: SwitchMoodlight_Livingroom
button_actionCommand: ON
button_actionCommandAlt: OFF
Title: HangulatvilĂĄgĂtĂĄs
SubTitle: Nappali
switchItem: SwitchMoodlight_Livingroom
uniqueID: Nappali-HangulatvilĂĄgĂtĂĄs
- component: oh-grid-item
config:
x: 2
y: 0
h: 2
w: 2
slots:
default:
- component: widget:gw_CompButton
config:
header: Mozi / Film
activeIcon: film_fill
inactiveIcon: film
itemForState: MovieSwitch
button_action: toggle
button_actionItem: MovieSwitch
button_actionCommand: ON
button_actionCommandAlt: OFF
Title: Mozi / Film
switchItem: MovieSwitch
uniqueID: MoziFilmMultimedia
SubTitle: Multimedia
- component: oh-grid-item
config:
x: 4
y: 0
h: 2
w: 2
slots:
default:
- component: widget:gw_CompButton
config:
header: Spotify
activeIcon: speaker_3
inactiveIcon: speaker
itemForState: MusicSwitch
button_action: toggle
button_actionItem: MusicSwitch
button_actionCommand: ON
button_actionCommandAlt: OFF
Title: Spotify
switchItem: MusicSwitch
SubTitle: Multimedia
uniqueID: SpotifyMultimedia
- component: oh-grid-item
config:
x: 6
y: 0
h: 2
w: 6
slots:
default:
- component: widget:gw_WeatherCard
config:
forecastHours: "12"
forecastDays: "6"
bigCard: false
sunIndicator: true
locationTitle: Rutesheim
dateScheme: YYYY MMMM DD
dateFormat: true
wordingFeel: HĆĂ©rzet
wordingForecastHours: ĂrĂĄnkĂ©nt
wordingForecastDays: Napi
wordingNow: Most
wordingToday: Ma
wordingSunrise: Napfelkelte
wordingSunset: Naplemente
wordingForecastPrecib: Csapadék
itemPrefix: OneCallAPIweatherandforecast_
itemPrefix2: Localweatherandforecast_
widget_action: popup
widget_actionModal: widget:weatherPopup
widget_actionModalConfig:
itemPrefix: OneCallAPIweatherandforecast_
forecastHours: "12"
forecastDays: "3"
sunIndicator: true
locationTitle: Rutesheim
- component: oh-grid-item
config:
x: 3
y: 5
h: 2
w: 2
slots:
default:
- component: widget:gw_MultiroomAudio
config:
SubTitle: Multimedia
Title: Multiroom Audio
activeIcon: hifispeaker_fill
inactiveIcon: hifispeaker
uniqeid: MultiroomAudioTablet
multiroomSwitch: MultiroomSwitch
masterVolume: MusicastMaster_Volume
satVolume: MusicastSatelite_1_Volume
- component: oh-grid-item
config:
x: 12
y: 0
h: 10
w: 1
slots:
default:
- component: widget:gw_Sidebar
config:
buttonLight_action: navigate
buttonLight_actionPage: page:page_aa6e67c319
buttonHeating_action: navigate
buttonHeating_actionPage: page:page_f6f2518fda
- component: oh-grid-item
config:
x: 5
y: 5
h: 2
w: 2
slots:
default:
- component: widget:gw_CompButton
config:
Title: KarĂĄcsonyi vilĂĄgĂtĂĄs
uniqueID: xmaslightlr
activeIcon: lightbulb_fill
inactiveIcon: lightbulb
switchItem: Kaffeemaschiene_Switch
itemForState: Kaffeemaschiene_Switch
This is my first attempt at creating a tablet interface for openhab3.
Iâve re-used some code available in this topic to create my own widgets and by searching a lot around the web. I also got a basic understanding of HTML/CSS which helped me a lot.
My 2 widgets are highly customizable in appearance and on/off statusses. Let me know what config you want me to put up here to help were Iâm able to.
This screen is made up with 3 different widgets.
Top widget: Daystatus
It shows the outside temperature, time and cloud coverage according to the location.
It uses the FMI Weather binding to get its info.
Light switch (Dimmable)
The whole button is used to turn on/off lights. Only the up and down arrow donât trigger the on/off switch but the dimmer with a 10% in or decrease.
When light is on the background changes from gray to the rainbow color
Light switch
The whole button is used to turn on/off lights.
When light is on the background changes from gray to the rainbow color
Enjoy!
Onac
Ey @Integer , great widgets you got there.
Iâm trying to modify a little bit your âCell_Weather_Actual_1â to add the Time the information was taken through the timestamp channel. I have setted up as a prop so I can post it later on if some people want to reuse it:
- context: item
description: Item of Timestamp
label: Timestamp of the weather
name: item_timestamp
required: false
type: TEXT
And I set up a pattern for the timestamp so it shows the format that I want to use. But Iâm running into a problem, if I link to the item directly everything works as planned
- component: Label
config:
text: =items.OneCallAPIweatherandforecast_Current_Time.displayState
But if I use the prop approach, then nothing shows up when I set the prop
- component: Label
config:
text: "=props.item_timestamp ? props.item_timestamp.displayState : '--:--'"
No PROP
PROP
Any idea why this could be happening?
Thanks!
Hey Luis!
Good Idea!
But use instead of:
"=props.item_timestamp ? props.item_timestamp.displayState : '--:--'"
this one:
"=props.item_timestamp ? items[props.item_timestamp].displayState : '--:--'"
let me know, if it works?
Can you share your code please
Hey Integer,
It (of course) worked. Iâm still learning about YAML and how to create my own widgets.
So thanks for the tip!
This is how it is looking right now after some changes (specially since I do not own a weather station, I wanted to have it only integrated with OWM).
Hi Nikos7179,
Which code are you looking for?
Hi,
I am interesting to see ho you achieve all the layout of this page
for example this one Top widget: Daystatus
Ok, Here we go:
Widget: Daystatus
uid: Daystatus
tags: []
props:
parameters:
- description: What is the Location?
label: Location
name: location1
required: false
type: TEXT
- description: Which temperature Icon?
label: Temperature Icon (f7:thermometer)
name: tempicon1
required: false
type: TEXT
- context: item
description: Temperature item to display?
label: Temperature item
name: itemTemp
required: false
type: TEXT
- description: Which cloud coverage icon?
label: Cloud coverage Icon (f7:cloud)
name: cloudicon1
required: false
- context: item
description: Cloud coverage item to display?
label: Cloud coverage item
name: itemCloud
required: false
type: TEXT
- description: Cloud coverage text?
label: Cloud Coverage text
name: cloudtxt1
required: false
type: TEXT
- description: Which Clock icon?
label: Clock Icon (f7:clock)
name: clockicon1
required: false
type: TEXT
parameterGroups: []
timestamp: Dec 12, 2021, 1:28:10 PM
component: f7-card
config:
expandable: false
noShadow: false
style:
border-radius: 0px 0px 20px 20px
padding: 0px 0px 0px 0px
margin: 0px 0px 20px 0px
box-shadow: none
background: transparent
border-bottom: 1px solid rgba(0,250,250,1)
height: 90px
display: flex
flex-flow: row wrap
justify-content: center
align-items: center
text-shadow: 0px 0px 3px black
width: 100%
slots:
default:
- component: f7-block
config:
style:
margin: 0px
padding: 0px
display: flex
flex-flow: row
justify-content: center
align-items: center
height: 35px
slots:
default:
- component: f7-icon
config:
f7: =props.tempicon1
size: 20
style:
margin: 0px 5px 0px 0px
padding: 0px
color: rgba(0,250,250,1)
- component: f7-block
config:
style:
margin: 0px 0px 0px 0px
padding: 0px
display: flex
flex-flow: column
justify-content: center
align-items: center
slots:
default:
- component: Label
config:
text: =(Number.parseFloat(items[props.itemTemp].state.split(" ")[0]) * 100 / 100).toFixed(1) + ' °c'
style:
color: white
margin: 0px
padding: 0px 5px 5px 4px
font-weight: 400
font-size: 20px
line-height: 1
border-bottom: 1px solid rgba(0,250,250,1)
- component: Label
config:
text: =props.location1
style:
font-size: 12px
align-self: start
color: white
padding: 5px 5px 0px 4px
- component: f7-block
config:
style:
margin: 0px 10px 0px 30px
padding: 0px 30px 0px 30px
display: flex
flex-flow: column
justify-content: center
align-items: center
border-left: 1px solid rgba(0,250,250,1)
border-right: 1px solid rgba(0,250,250,1)
slots:
default:
- component: f7-block
config:
style:
margin: 0px 0px 0px 0px
padding: 0px 0px 0px 0px
display: flex
flex-flow: row
justify-content: center
align-items: center
slots:
default:
- component: f7-icon
config:
f7: clockicon1
size: 20
style:
margin: 0px 5px 0px 0px
padding: 0px
color: rgba(0,250,250,1)
- component: oh-clock
config:
timeFormat: HH:mm
style:
color: white
font-size: 30px
font-weight: 100
- component: f7-block
config:
style:
margin: 0px 6px 0px 20px
padding: 0px
display: flex
flex-flow: row
justify-content: center
align-items: center
height: 35px
slots:
default:
- component: f7-icon
config:
f7: =props.cloudicon1
size: 20
style:
margin: 0px 5px 0px 0px
padding: 0px
color: rgba(0,250,250,1)
- component: f7-block
config:
style:
margin: 0px 0px 0px 0px
padding: 0px
display: flex
flex-flow: column
justify-content: center
align-items: center
slots:
default:
- component: Label
config:
text: =(items[props.itemCloud].state)
style:
color: white
margin: 0px
padding: 0px 5px 5px 4px
font-weight: 400
font-size: 20px
line-height: 1
border-bottom: 1px solid rgba(0,250,250,1)
- component: Label
config:
text: =props.cloudtxt1
style:
font-size: 12px
align-self: start
padding: 5px 5px 0px 4px
Day status widget has been put in a page in a column at a full 100% width
If you have any questions, let me know.