After two weeks of reading lots of questions and answers here and some external documents I started my own widget “ButtonGrid” which is almost complete but need some fine-tuning from you experts out there
Reason for this widget:
- Columns and cards from the standard OH library have a spacing which prevents you from saving space on your screen
- This widget replaces sliders by a set of comma separated buttons (I do not like sliders)
Usage:
Item name, item’s display name, preset values and their display names are provided by a semicolon-/comma-separated syntax very similiar to md€appings
in .sitemap
.
Example:
Livingroom_Couch_Light=Couch;0=Off,40=40%,75=75%,100=On
This widget automatically creates a label card for items and buttons for commands. If you want more items just add another line.
This screenshot is obviously not the final result. I have changed some color settings especially for this post so that my questions can be better understood:
My questions are:
Button Background expression:
the background of each button is dependent from its item state. the item is represented by the following expression:
props['row_' + loop.i.toString()].split(';')[0].split('=')[0]]
this is working fine. however, the following if-then-else expression is incorrect:
"=(items[props['row_' + loop.i.toString()].split(';')[0].split('=')[0]].state === '40') ? '#222222' : 'white'"
where is the error?
F7 background
- syntax
background: '#222222'
is only accepted from oh-containers. f7-containers expect a color string likered
,green
, etc. Is there a specific syntax for this?
evenbackground: rgb(128,128,128)
does also not work.
[solved:--f7-card-bg-color: '#556677'
]
First column
- where does the extra spacing around
oh-label-card
come from? How can I avoid this?
[solved:--f7-card-margin-vertical: 0px
] -
text-align: left
does not work even placed in an f7-card containing an oh-label-card
Buttons (2nd column and more)
- How can I control mouse over and button-pressed color code?. again no success in putting this into an f7-container
[solved:-f7-button-hover-bg-color: green
,--f7-button-pressed-bg-color: yellow
] - How can I set the height to fit into the column height?
height: 100%
is not working - When (temporarily) forcing the height to be e.g. 50px. the button label is aligned top. how can I set it to be in the middle?
vertical-align: baseline
does not work.
Grid
I have read the f7 documentation but could not find any information about how to set colors of border lines. any idea here?
[solved: in my case this workaround did the trick
--f7-button-border-radius: 0px
--f7-button-border-color: gray
--f7-button-border-width: 1px
]
Calculation of non-empty rows in the properties section
the total number of button rows needs to provided by a property (props.iRows
). any idea how I can calculate this by the amount of props.row_ which are not empty?
Code
Here is the YAML code:
uid: ButtonGrid
tags: []
props:
parameters:
- description: Syntax ItemID=itemLabel;cmdValues=cmdLabels (comma separated); Example Livingroom_Couch_Light=Couch;0=Off,40=40%,75=75%,100=On
label: Row 1
name: row_1
required: false
type: TEXT
groupName: gRows
- label: Row 2
name: row_2
required: false
type: TEXT
groupName: gRows
- label: Row 3
name: row_3
required: false
type: TEXT
groupName: gRows
- label: Row 4
name: row_4
required: false
type: TEXT
groupName: gRows
- label: Total number of Rows
name: iRows
required: false
groupName: gGeneral
- label: Icon Name (oh or f7)
name: iconName
required: false
type: TEXT
groupName: gGeneral
- label: Highlight Color Code
name: highlightColor
required: false
type: TEXT
groupName: gGeneral
parameterGroups:
- name: gGeneral
label: General settings
- name: gRows
label: Define Items (each Item in a separate Row)
timestamp: Jan 18, 2021, 2:34:24 PM
component: f7-card
config:
containerStyle:
width: 100%
height: 100%
position: absolute
top: 0px
left: 0px
style:
font-size: 1em
background: gray
class:
- no-padding
- no-margin
slots:
default:
- component: oh-repeater
config:
fragment: true
sourceType: range
for: i
rangeStart: 1
rangeStop: "=(props.iRows == NULL) ? 1 : Number.parseInt(props.iRows)"
slots:
default:
- component: f7-row
config:
noGap: true
slots:
default:
- component: f7-col
slots:
default:
- component: oh-label-card
config:
label: =props['row_' + loop.i.toString()].split(";")[0].split("=")[1]
icon: oh:slider
item: =props['row_' + loop.i.toString()].split(";")[0].split("=")[0]
iconUseState: true
outline: true
background: "#111111"
text-color: white
fontSize: 12px
style:
text-align: left
- component: oh-repeater
config:
fragment: true
sourceType: array
for: lbl
in: =props['row_' + loop.i.toString()].split(";")[1].split(",")
slots:
default:
- component: f7-col
slots:
default:
- component: oh-button
config:
text: =loop.lbl.split("=")[1]
outline: true
text-color: white
border-color: black
raised: false
large: true
action: command
actionItem: =props['row_' + loop.i.toString()].split(";")[0].split("=")[0]
actionCommand: =loop.lbl.split("=")[0]
accordionList: true
background: "=(items[props['row_' + loop.i.toString()].split(';')[0].split('=')[0]].state === '40') ? '#222222' : 'white'"
style:
vertical-align: baseline
height: 50px