Problem:
BoGoB buttons works great on laptop screens, but is unusable on mobile phone devices because most of the buttons are rendered outside the viewable screen area and there are no scroll bars.
Version 2:
- Split single grid of buttons into 3 separate grids.
- Implemented flexbox container to host the three grids.
- Each grid is displayed in a row (as before) where screen space allows all grids to be rendered. When a grid cannot fit in the remaining screen space, it is rendered as a second row. In practice on a mobile phone the grids appear to be in a column and are all usable.
- Fixed a couple of incorrectly coded buttons.
- Improved text alignment in buttons (vertical centred text) / minor styling tweaks.
- Added a TiVo status reporting label (above keypad) which displays the latest message returned (in the example, channel status 601). This is a simple example of adding additional “non button” controls to a grid object.
Result:
Large screen:
Small screen:
BTW, anyone wanting to give the TiVo binding a go can find it in the latest snapshot builds of openHAB.
If anyone has adapted this widget for their own “Big Ol’ Grid O’ Buttons”, it would be great to see a screenshot or two 
YAML below:
uid: BoGoB
tags: []
props:
parameters:
- description: Set card header title. Only displays if populated.
label: Card Title
name: title
required: false
type: TEXT
groupName: general
- context: color
description: Specify the background color for card. Any valid <a class="link external" href="https://www.w3schools.com/css/css_colors.asp" target="_blank">HTML color format (RGB/RGBA/HEX/HSL)</a> or <a class="link external" href="https://framework7.io/docs/css-variables.html" target="_blank">CSS theme</a> color. e.g. rgb(255,255,255), --f7-color-white. <b>Default = --f7-color-white</b>
label: Background color
name: backgroundColor
required: false
type: TEXT
groupName: general
- description: Set the width of a grid unit button. <b>You must include the CSS units e.g. px,em,rem etc.</b> Objects that span multiple grid containers will stretch to fill the container. Default 4rem.
label: Button Width
name: buttWidth
required: true
type: TEXT
groupName: grid
- description: Set the height of a grid unit button. <b>You must include the CSS units e.g. px,em,rem etc.</b> Objects that span multiple grid containers will stretch to fill the container. Default 3rem.
label: Button Height
name: buttHeight
required: true
type: TEXT
groupName: grid
parameterGroups:
- name: grid
label: Grid setup
- name: general
label: Display options
timestamp: Feb 3, 2021, 10:06:04 PM
component: f7-card
config:
title: =props.title
style:
background-image: ='url(' + props.backgroundUrl + ')'
backdrop-filter: ='blur(' + props.backgroundBlur + 'px)'
background-size: contain
background-repeat: no-repeat
background-position: 100% 100%
background-color: '=(props.backgroundColor === undefined ? "var(--f7-color-white)" : (props.backgroundColor.substring(0,2) === "--" ? "var(props.backgroundColor)" : props.backgroundColor))'
border-radius: 5px
overflow: hidden
-ms-user-select: none
-moz-user-select: none
-webkit-user-select: none
user-select: none
slots:
default:
- component: f7-block
config:
style:
padding-left: 0px
padding-top: 10px
padding-bottom: 10px
display: flex
flex-direction: row
flex-wrap: wrap
slots:
default:
- component: f7-block
config:
class: bog
style:
display: grid
grid-auto-columns: '=(props.buttWidth === undefined) ? "4rem" : props.buttWidth'
grid-auto-rows: '=(props.buttHeight === undefined) ? "3rem" : props.buttHeight'
grid-gap: 6px 6px
align-items: flex-start
justify-content: start
margin-top: 0px
padding-top: 10px
slots:
default:
- component: oh-repeater
config:
sourceType: unset
for: i
in:
- - 1
- 1
- 1
- 1
- Standby
- false
- f7
- power
- true
- TivoLivingRoom_RemoteControlButton
- STANDBY
- ""
- --f7-color-gray-tint
- --f7-color-green
- - 1
- 2
- 1
- 3
- Home
- true
- ""
- ""
- false
- TivoLivingRoom_ChangeMenuScreen
- TIVO
- ""
- --f7-color-gray-tint
- --f7-color-white
- - 1
- 5
- 1
- 1
- TV
- true
- ""
- ""
- false
- TivoLivingRoom_ChangeMenuScreen
- LIVETV
- ""
- --f7-color-gray-tint
- --f7-color-white
- - 2
- 2
- 1
- 3
- Guide
- true
- ""
- ""
- false
- TivoLivingRoom_ChangeMenuScreen
- GUIDE
- ""
- --f7-color-gray-tint
- --f7-color-white
- - 2
- 5
- 1
- 1
- Info
- true
- f7
- info_circle
- true
- TivoLivingRoom_RemoteControlButton
- INFO
- ""
- --f7-color-gray-tint
- --f7-color-white
- - 3
- 3
- 1
- 1
- Up
- false
- f7
- arrowtriangle_up_fill
- true
- TivoLivingRoom_RemoteControlButton
- UP
- ""
- --f7-color-gray-shade
- --f7-color-white
- - 3
- 5
- 1
- 1
- Subs On
- true
- ""
- ""
- false
- TivoLivingRoom_RemoteControlButton
- CC_ON
- ""
- --f7-color-gray-tint
- --f7-color-white
- - 4
- 5
- 1
- 1
- Subs Off
- true
- ""
- ""
- false
- TivoLivingRoom_RemoteControlButton
- CC_OFF
- ""
- --f7-color-gray-tint
- --f7-color-white
- - 4
- 1
- 1
- 1
- Back
- true
- ""
- ""
- false
- TivoLivingRoom_RemoteControlButton
- EXIT
- ""
- --f7-color-gray-tint
- --f7-color-white
- - 4
- 2
- 1
- 1
- Left
- false
- f7
- arrowtriangle_left_fill
- true
- TivoLivingRoom_RemoteControlButton
- LEFT
- ""
- --f7-color-gray-shade
- --f7-color-white
- - 4
- 3
- 1
- 1
- OK
- true
- ""
- ""
- false
- TivoLivingRoom_RemoteControlButton
- SELECT
- ""
- --f7-color-gray-shade
- --f7-color-white
- - 4
- 4
- 1
- 1
- Right
- false
- f7
- arrowtriangle_right_fill
- true
- TivoLivingRoom_RemoteControlButton
- RIGHT
- ""
- --f7-color-gray-shade
- --f7-color-white
- - 5
- 1
- 1
- 1
- Vol +
- true
- ""
- ""
- false
- TivoLivingRoom_RemoteControlButton
- VOLUMEUP
- ""
- --f7-color-gray-shade
- --f7-color-white
- - 5
- 3
- 1
- 1
- Down
- false
- f7
- arrowtriangle_down_fill
- true
- TivoLivingRoom_RemoteControlButton
- DOWN
- ""
- --f7-color-gray-shade
- --f7-color-white
- - 5
- 5
- 1
- 1
- Ch +
- true
- ""
- ""
- false
- TivoLivingRoom_RemoteControlButton
- CHANNELUP
- ""
- --f7-color-gray-shade
- --f7-color-white
- - 6
- 1
- 1
- 1
- Vol -
- true
- ""
- ""
- false
- TivoLivingRoom_RemoteControlButton
- VOLUMEDOWN
- ""
- --f7-color-gray-shade
- --f7-color-white
- - 6
- 2
- 1
- 3
- My Shows
- true
- ""
- ""
- false
- TivoLivingRoom_RemoteControlButton
- NOWPLAYING
- ""
- --f7-color-gray-tint
- --f7-color-white
- - 6
- 5
- 1
- 1
- Ch -
- true
- ""
- ""
- false
- TivoLivingRoom_RemoteControlButton
- CHANNELDOWN
- ""
- --f7-color-gray-shade
- --f7-color-white
- - 7
- 1
- 1
- 1
- Thumb Down
- false
- f7
- hand_thumbsdown_fill
- true
- TivoLivingRoom_RemoteControlButton
- THUMBSDOWN
- ""
- --f7-color-red-shade
- --f7-color-white
- - 7
- 2
- 1
- 1
- Mute
- true
- material
- volumne_off
- false
- TivoLivingRoom_RemoteControlButton
- MUTE
- ""
- --f7-color-gray-tint
- --f7-color-white
- - 7
- 3
- 1
- 2
- Record
- false
- f7
- recordingtape
- true
- TivoLivingRoom_RemoteControlButton
- RECORD
- ""
- --f7-color-red-shade
- --f7-color-white
- - 7
- 5
- 1
- 1
- Thumbs Up
- false
- f7
- hand_thumbsup_fill
- true
- TivoLivingRoom_RemoteControlButton
- THUMBSUP
- ""
- --f7-color-green-shade
- --f7-color-white
fragment: true
slots:
default:
- component: oh-button
config:
visible: "=(loop.i[5] || loop.i[8]) ? true : false"
action: command
actionItem: =loop.i[9]
actionCommand: =loop.i[10]
class: ob
style:
display: inline-flex
grid-row-start: =loop.i[0]
grid-row-end: ='span ' + loop.i[2]
grid-column-start: =loop.i[1]
grid-column-end: ='span ' + loop.i[3]
justify-self: stretch
height: 100%
--f7-button-bg-color: "=(loop.i[12] === undefined || loop.i[12] === '' ? 'var(--bg-color-primary)' : (loop.i[12].substring(0,2) === '--' ? 'var(' + loop.i[12] + ')' : loop.i[12]))"
--f7-button-hover-bg-color: var(--f7-color-white-shade)
slots:
default:
- component: f7-icon
config:
visible: =loop.i[8]
f7: '=(loop.i[6] === "f7") ? loop.i[7] : ""'
material: '=(loop.i[6] === "material") ? loop.i[7] : ""'
size: 20px
style:
color: "=(loop.i[13] === undefined || loop.i[13] === '' ? 'var(--text-color-primary)' : (loop.i[13].substring(0,2) === '--' ? 'var(' + loop.i[13] + ')' : loop.i[13]))"
- component: Label
config:
visible: =loop.i[5]
text: =loop.i[4]
style:
color: "=(loop.i[13] === undefined || loop.i[13] === '' ? 'var(--text-color-primary)' : (loop.i[13].substring(0,2) === '--' ? 'var(' + loop.i[13] + ')' : loop.i[13]))"
white-space: normal
line-height: normal
margin: 2px
- component: f7-block
config:
class: bog
style:
padding-top: 10px
display: grid
grid-auto-columns: '=(props.buttWidth === undefined) ? "4rem" : props.buttWidth'
grid-auto-rows: '=(props.buttHeight === undefined) ? "3rem" : props.buttHeight'
grid-gap: 6px 6px
align-items: flex-start
justify-content: start
slots:
default:
- component: oh-repeater
config:
sourceType: unset
for: i
in:
- - 1
- 3
- 1
- 1
- Play
- false
- f7
- play_fill
- true
- TivoLivingRoom_RemoteControlButton
- PLAY
- ""
- --f7-color-gray-tint
- --f7-color-white
- - 2
- 2
- 1
- 1
- Rewind
- false
- f7
- backward_fill
- true
- TivoLivingRoom_RemoteControlButton
- REVERSE
- ""
- --f7-color-gray-tint
- --f7-color-white
- - 2
- 3
- 1
- 1
- Pause
- false
- f7
- pause_fill
- true
- TivoLivingRoom_RemoteControlButton
- PAUSE
- ""
- --f7-color-yellow-tint
- --f7-color-black
- - 2
- 4
- 1
- 1
- Fast Forward
- false
- f7
- forward_fill
- true
- TivoLivingRoom_RemoteControlButton
- FORWARD
- ""
- --f7-color-gray-tint
- --f7-color-white
- - 3
- 3
- 1
- 1
- Stop
- false
- f7
- stop_fill
- true
- TivoLivingRoom_RemoteControlButton
- STOP
- ""
- --f7-color-gray-tint
- --f7-color-white
- - 4
- 1
- 1
- 1
- Skip back
- false
- f7
- backward_end_fill
- true
- TivoLivingRoom_RemoteControlButton
- REPLAY
- ""
- --f7-color-gray-tint
- --f7-color-white
- - 4
- 2
- 1
- 1
- Slow motion
- false
- material
- slow_motion_video
- true
- TivoLivingRoom_RemoteControlButton
- SLOW
- ""
- --f7-color-gray-tint
- --f7-color-white
- - 4
- 3
- 1
- 2
- Search
- false
- material
- search
- true
- TivoLivingRoom_RemoteControlButton
- SEARCH
- ""
- --f7-color-gray-tint
- --f7-color-white
- - 4
- 5
- 1
- 1
- Skip forward
- false
- f7
- forward_end_fill
- true
- TivoLivingRoom_RemoteControlButton
- ADVANCE
- ""
- --f7-color-gray-tint
- --f7-color-white
- - 5
- 1
- 1
- 2
- Red
- false
- f7
- square_fill
- true
- TivoLivingRoom_RemoteControlButton
- ACTION_A
- ""
- --f7-color-red-shade
- --f7-color-black
- - 5
- 3
- 1
- 1
- Green
- false
- f7
- square_fill
- true
- TivoLivingRoom_RemoteControlButton
- ACTION_B
- ""
- --f7-color-green-shade
- --f7-color-black
- - 5
- 4
- 1
- 1
- Yellow
- false
- f7
- square_fill
- true
- TivoLivingRoom_RemoteControlButton
- ACTION_C
- ""
- --f7-color-yellow-tint
- --f7-color-black
- - 5
- 5
- 1
- 1
- Blue
- false
- f7
- square_fill
- true
- TivoLivingRoom_RemoteControlButton
- ACTION_D
- ""
- --f7-color-blue-shade
- --f7-color-black
- - 6
- 1
- 1
- 1
- YouTube
- true
- ""
- ""
- false
- TivoLivingRoom_CurrentChannelRequest
- "198"
- Tivo_YouTube
- --f7-color-blue-tint
- --f7-color-white
- - 6
- 2
- 1
- 1
- Netflix
- true
- ""
- ""
- false
- TivoLivingRoom_RemoteControlButton
- NETFLIX
- Tivo_Netflix
- --f7-color-blue-tint
- --f7-color-white
- - 6
- 3
- 1
- 1
- Amazon Prime
- true
- ""
- ""
- false
- TivoLivingRoom_CurrentChannelRequest
- "205"
- Tivo_Prime
- --f7-color-blue-tint
- --f7-color-white
- - 6
- 4
- 1
- 1
- BBC News
- true
- ""
- ""
- false
- TivoLivingRoom_CurrentChannelRequest
- "601"
- Tivo_BBC
- --f7-color-blue-tint
- --f7-color-white
- - 6
- 5
- 1
- 1
- LBC Radio
- true
- ""
- ""
- false
- TivoLivingRoom_CurrentChannelRequest
- "919"
- Tivo_LBC
- --f7-color-blue-tint
- --f7-color-white
fragment: true
slots:
default:
- component: oh-button
config:
visible: "=(loop.i[5] || loop.i[8]) ? true : false"
action: command
actionItem: =loop.i[9]
actionCommand: =loop.i[10]
class: ob
style:
display: inline-flex
align-items: center
grid-row-start: =loop.i[0]
grid-row-end: ='span ' + loop.i[2]
grid-column-start: =loop.i[1]
grid-column-end: ='span ' + loop.i[3]
justify-self: stretch
height: 100%
--f7-button-bg-color: "=(loop.i[12] === undefined || loop.i[12] === '' ? 'var(--bg-color-primary)' : (loop.i[12].substring(0,2) === '--' ? 'var(' + loop.i[12] + ')' : loop.i[12]))"
--f7-button-hover-bg-color: var(--f7-color-white-shade)
slots:
default:
- component: f7-icon
config:
visible: =loop.i[8]
f7: '=(loop.i[6] === "f7") ? loop.i[7] : ""'
material: '=(loop.i[6] === "material") ? loop.i[7] : ""'
size: 20px
style:
color: "=(loop.i[13] === undefined || loop.i[13] === '' ? 'var(--text-color-primary)' : (loop.i[13].substring(0,2) === '--' ? 'var(' + loop.i[13] + ')' : loop.i[13]))"
- component: Label
config:
visible: =loop.i[5]
text: =loop.i[4]
style:
color: "=(loop.i[13] === undefined || loop.i[13] === '' ? 'var(--text-color-primary)' : (loop.i[13].substring(0,2) === '--' ? 'var(' + loop.i[13] + ')' : loop.i[13]))"
white-space: normal
line-height: normal
margin: 2px
- component: f7-block
config:
class: bog
style:
padding-top: 10px
display: grid
grid-auto-columns: '=(props.buttWidth === undefined) ? "4rem" : props.buttWidth'
grid-auto-rows: '=(props.buttHeight === undefined) ? "3rem" : props.buttHeight'
grid-gap: 6px 6px
align-items: flex-start
justify-content: center
slots:
default:
- component: oh-repeater
config:
sourceType: unset
for: i
in:
- - 2
- 1
- 1
- 1
- "1"
- true
- ""
- ""
- false
- TivoLivingRoom_KeyboardCommand
- NUM1
- ""
- --f7-color-gray-tint
- --f7-color-white
- - 2
- 2
- 1
- 1
- "2"
- true
- ""
- ""
- false
- TivoLivingRoom_KeyboardCommand
- NUM2
- ""
- --f7-color-gray-tint
- --f7-color-white
- - 2
- 3
- 1
- 1
- "3"
- true
- ""
- ""
- false
- TivoLivingRoom_KeyboardCommand
- NUM3
- ""
- --f7-color-gray-tint
- --f7-color-white
- - 3
- 1
- 1
- 1
- "4"
- true
- ""
- ""
- false
- TivoLivingRoom_KeyboardCommand
- NUM4
- ""
- --f7-color-gray-tint
- --f7-color-white
- - 3
- 2
- 1
- 1
- "5"
- true
- ""
- ""
- false
- TivoLivingRoom_KeyboardCommand
- NUM5
- ""
- --f7-color-gray-tint
- --f7-color-white
- - 3
- 3
- 1
- 1
- "6"
- true
- ""
- ""
- false
- TivoLivingRoom_KeyboardCommand
- NUM6
- ""
- --f7-color-gray-tint
- --f7-color-white
- - 4
- 1
- 1
- 1
- "7"
- true
- ""
- ""
- false
- TivoLivingRoom_KeyboardCommand
- NUM7
- ""
- --f7-color-gray-tint
- --f7-color-white
- - 4
- 2
- 1
- 1
- "8"
- true
- ""
- ""
- false
- TivoLivingRoom_KeyboardCommand
- NUM8
- ""
- --f7-color-gray-tint
- --f7-color-white
- - 4
- 3
- 1
- 1
- "9"
- true
- ""
- ""
- false
- TivoLivingRoom_KeyboardCommand
- MUM9
- ""
- --f7-color-gray-tint
- --f7-color-white
- - 5
- 1
- 1
- 1
- Clear
- true
- ""
- ""
- false
- TivoLivingRoom_KeyboardCommand
- CLEAR
- ""
- --f7-color-gray-tint
- --f7-color-white
- - 5
- 2
- 1
- 1
- "0"
- true
- ""
- ""
- false
- TivoLivingRoom_KeyboardCommand
- NUM0
- ""
- --f7-color-gray-tint
- --f7-color-white
- - 5
- 3
- 1
- 1
- Last Ch
- true
- ""
- ""
- false
- TivoLivingRoom_KeyboardCommand
- ""
- ""
- --f7-color-gray-tint
- --f7-color-white
- - 6
- 3
- 1
- 1
- Find Remote
- true
- ""
- ""
- false
- TivoLivingRoom_RemoteControlButton
- FIND_REMOTE
- ""
- --f7-color-blue-tint
- --f7-color-white
fragment: true
slots:
default:
- component: oh-button
config:
visible: "=(loop.i[5] || loop.i[8]) ? true : false"
action: command
actionItem: =loop.i[9]
actionCommand: =loop.i[10]
class: ob
style:
display: inline-flex
align-items: center
grid-row-start: =loop.i[0]
grid-row-end: ='span ' + loop.i[2]
grid-column-start: =loop.i[1]
grid-column-end: ='span ' + loop.i[3]
justify-self: stretch
height: 100%
--f7-button-bg-color: "=(loop.i[12] === undefined || loop.i[12] === '' ? 'var(--bg-color-primary)' : (loop.i[12].substring(0,2) === '--' ? 'var(' + loop.i[12] + ')' : loop.i[12]))"
--f7-button-hover-bg-color: var(--f7-color-white-shade)
slots:
default:
- component: f7-icon
config:
visible: =loop.i[8]
f7: '=(loop.i[6] === "f7") ? loop.i[7] : ""'
material: '=(loop.i[6] === "material") ? loop.i[7] : ""'
size: 20px
style:
color: "=(loop.i[13] === undefined || loop.i[13] === '' ? 'var(--text-color-primary)' : (loop.i[13].substring(0,2) === '--' ? 'var(' + loop.i[13] + ')' : loop.i[13]))"
- component: Label
config:
visible: =loop.i[5]
text: =loop.i[4]
style:
color: "=(loop.i[13] === undefined || loop.i[13] === '' ? 'var(--text-color-primary)' : (loop.i[13].substring(0,2) === '--' ? 'var(' + loop.i[13] + ')' : loop.i[13]))"
white-space: normal
line-height: normal
margin: 2px
- component: f7-block
config:
style:
display: inline-flex
align-items: center
grid-row-start: 1
grid-row-end: span 1
grid-column-start: 1
grid-column-end: span 3
slots:
default:
- component: Label
config:
visible: =loop.i[5]
text: =items.TivoLivingRoom_TiVoStatus.state