I want to design a roller shutter widget with buttons and information. In the left part, up / stop / down buttons should be made available and in the right part I would like to accommodate 5 lines according to the following scheme:
Text1 and value from Item1
Text2 and value from Item2
Text3 and value from Item3
Text4 and value from Item4
Text5 and value from Item5
The size of the left part should be 33% and that of the right part 67% of the total width.
I have already been able to design the switches in the left part, the right part gives me considerable difficulties.
It sounds like you are going to want to use an oh-repeater for this (there are lots of examples on the forums) but you’re going to need to be a little more specific before there’s much in the way of more specific guidance we can give you.
Do you mean a just a list with 5 items in it or is there some kind of interaction involved as well?
How is this information stored in this item? Do you mean the label of the item and the item state, or other information stored in the item’s metadata maybe? Are these always the same 5 items for each use of this widget, or does the user set these in the properties? Are they all members of a certain group or do they all have a similar item name?
This link might help with your spacing. The f7-row you put your two areas in is a flex-box and so you just have to set the flex properties of your two areas to 1 for the 33% and 2 for the 67% (the second one will always try to take twice the space of the first one).
To get your list of information it looks like you just need to use a list widget and populate that with the one `oh-label-item’ for each of your 5 items.
Something like this:
uid: widget_oh-list
component: f7-card
config:
title: List test
slots:
default:
- component: oh-list
config: {}
slots:
default:
- component: oh-label-item
config:
item: AutomationTime
title: Text goes here
- component: oh-label-item
config:
item: Door_MudRoom_Status
title: Mud Room Door
Thank you very much, I have to deal with that first to understand it (creating widgets is new to me). However, I have another idea: how do I have to create a popup with this “information” that my widget can open?
…
might help with your spacing. The f7-row you put your two areas in is a flex-box and so you just have to set the flex properties of your two areas to 1 for the 33% and 2 for the 67% (the second one will always try to take twice the space of the first one).
…
This is exactly where I have problems with the configuration. I can’t get any further with the link. Which wording and where do I have to enter in the widget to get to the right part?
Here’s a very simplified version of a 1:2 ratio. Note the row you want to divide gets the display-flex class and the columns you want to space each get the flex style with numbers giving the ratio of space they should take up:
Yes, first I used the standard wiget. However, I did not succeed in the optics (size, color, etc.). to modify.
I once read a config statement somewhere, something like this: horizontal: true. However, it doesn’t work in my widget. Horizontal would be better, it doesn’t take up that much space.
Now I decided on the standard Rollershutter widget because there weren’t any major problems with the design. In case anyone is interested, I’ll put all of the code here.
Thank you again for your support!
uid: shutter_widget_v5
tags: []
props:
parameters:
- description: Title of the card (blank for none)
label: Title
name: title
required: false
type: TEXT
- description: The card footer (no footer!!)
label: Footer
name: footer
required: false
type: TEXT
- description: Description Info 1 (<u>Suggestion:</u> <b>Interne Temperatur</b>)
label: Info1
name: title1
required: true
type: TEXT
- description: Description Info 2 (<u>Suggestion:</u> <b>Total consumption</b>)
label: Info2
name: title2
required: true
type: TEXT
- description: Description Info 3 (<u>Suggestion:</u> <b>Signal strength</b>)
label: Info3
name: title3
required: true
type: TEXT
- description: Description Info 4 (<u>Suggestion:</u> <b>Firmware</b>)
label: Info4
name: title4
required: true
type: TEXT
- description: Description Info 5 (<u>Suggestion:</u> <b>Shutter-Position</b>)
label: Info5
name: title5
required: true
type: TEXT
- context: item
description: Item for info 1 (<u>Example:</u> <b>RollBuero8DeviceInternalTemp</b>)
label: Item
name: item1
required: true
type: TEXT
- context: item
description: Item for info 2 (<u>Example:</u> <b>RollBuero8MeterTotalKWH</b>)
label: Item
name: item2
required: true
type: TEXT
- context: item
description: Item for info 3 (<u>Example:</u> <b>RollBuero8DeviceWifiSignal</b>)
label: Item
name: item3
required: true
type: TEXT
- context: item
description: Item for info 4 (<u>Example:</u> <b>RollBuero8DeviceUpdateAvailable</b>)
label: Item
name: item4
required: true
type: TEXT
- context: item
description: Item for info 5 (<u>Example:</u> <b>RollBuero8RollerControl</b>)
label: Item
name: item5
required: true
type: TEXT
- context: item
description: Item for Rollershutter Control (<u>Example:</u> <b>RollBuero8RollerControl</b>)
label: Item
name: control
required: true
type: TEXT
- description: Set background color (blank for none)
name: background
required: false
type: TEXT
- description: Set text color (blank for none)
name: color
required: false
type: TEXT
advanced: false
parameterGroups: []
timestamp: Apr 7, 2021, 8:32:43 AM
component: f7-card
config:
style:
width: 250px
background: '=(props.background) ? props.background : ""'
color: '=(props.color) ? props.color : ""'
filter: brightness(95%)
title: =props.title
slots:
default:
- component: f7-card-content
slots:
default:
- component: f7-row
config:
class:
- display-flex flex-direction-row
- justify-content-space-evenly
- align-items-center
style:
width: 250px
slots:
default:
- component: f7-col
config:
class:
- display-flex
- flex-direction-column
- justify-content-center
- align-items-center
style:
height: calc(100% - 30px)
- component: oh-rollershutter-card
config:
item: =props.control
dirIconsStyle: chevron_{dir}_square_fill
stopIconStyle: stop_circle_fill
style:
background-color: rgba(246, 158, 81, 0.2)
- component: f7-col
slots:
default:
- component: oh-list
config: {}
slots:
default:
- component: oh-label-item
config:
style:
width: 220px
font-size: 13px
margin-left: 0px
margin-bottom: 0px
margin-top: 5px
z-index: 1
title: =props.title1
item: =props.item1
- component: oh-label-item
config:
style:
width: 220px
font-size: 13px
margin-left: 0px
margin-bottom: 0px
margin-top: 5px
margin-right: 0px
z-index: 1
title: =props.title2
item: =props.item2
- component: oh-label-item
config:
style:
width: 220px
font-size: 13px
margin-left: 0px
margin-bottom: 0px
margin-top: 5px
z-index: 1
title: =props.title3
item: =props.item3
- component: oh-label-item
config:
style:
width: 220px
font-size: 13px
margin-left: 0px
margin-bottom: 0px
margin-top: 5px
z-index: 1
title: =props.title4
item: =props.item4
- component: oh-label-item
config:
style:
width: 220px
font-size: 13px
margin-left: 0px
margin-bottom: 0px
margin-top: 5px
z-index: 1
title: =props.title5
item: =props.item5
