Jump to the latest working code:
Hi,
I have a requirement to test up to 45+ functions for the forthcoming TiVo binding. So I really need to replicate each of the buttons on the remote control. Unfortunately these functions are associated with different items, some need labels, some need icons etc.
I was hoping to develop something generic that can be re-used for any other relevant application (by me or anyone else). My idea was to use a unset
for/loop with an array of the required properties:
- [0, '', false, '', '', false, '', '', '', :'gray', 'white']
- [1, 'Standby', false, 'f7', 'power', true, 'TivoLivingRoom_RemoteControlButton', 'STANDBY', '', :'gray', 'lime']
- [2, 'Home', true, '', '', false, 'TivoLivingRoom_ChangeMenuScreen', 'TIVO', '', :'gray', 'white']
- [1, 'TV', true, '', '', false, 'TivoLivingRoom_ChangeMenuScreen', 'LIVETV', '', :'gray', 'white']
- [0, '', false, '', '', false, '', '', '', :'gray', 'white']
- [1, 'Guide', true, '', '', false, 'TivoLivingRoom_ChangeMenuScreen', 'GUIDE', '', :'gray', 'white']
- [1, 'My Shows', true, '', '', false, 'TivoLivingRoom_ChangeMenuScreen', '', '', :'gray', 'white']
- [1, 'Subtitles', true, '', '', false, 'TivoLivingRoom_ChangeMenuScreen', '', '', :'gray', 'white']
- [0, '', false, '', '', false, '', '', '', :'gray', 'white']
Note: I know this is is JSON array format, it works but when you save / exit / re-enter the component it is converted to YAML array format. I just find the one line easier to generate (in an Excel workbook).
Where the array elements are:
- size = 0, new row | > 0 renders a button that is n * multiple button size in pixels.
- label = button label (also used to keep track of rows where icons are used)
- labelShow = true | false to display the label
- iconCollection = f7 | material icon collection
- iconName = icon name
- iconShow = true | false
- itemName = item name
- itemCommand = command to send when the button is pressed
- ruleName = rule to run when button is pressed
- bgColor = background color
- fgColor = foreground color
The YAML below, basically works but draws each button on a separate row.
Ideally I was hoping it was possible to conditionally add the row component when the loop reached an entry where the first element = 0 i.e. when (loop.i[0]===0 ? true : false)
.
- component: f7-row
config:
class:
- align-items-flex-center
Iāve been looking at this most of the afternoon and Iām stuckā¦ Iām beginning to think that this may not be possible as I originally envisagedā¦ I guess it may be the change of indent that tells framework7 to close the component tags ???
So if anyone knows is this is possible / what the syntax isā¦ or has an alternative approach to tryā¦
Andy
Code
Here is the WIP so far:
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
- description: Background image URL e.g. http://10.1.0.1/static/fibaromotion.png
label: Background image URL
name: backgroundUrl
required: false
type: TEXT
groupName: general
- description: Intensity of the background-blur (0 - 10)
label: Background image blur
name: backgroundBlur
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: Specify the foreground color for text and icons. 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-black. <b>Default = --f7-color-black</b>
label: Foreground color (normal)
name: foregroundColor
required: false
type: TEXT
groupName: general
- description: Specify the foreground color for highlighted text / icons (when warning condition is true). 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-red. <b>Default = --f7-theme-color</b>
label: Foreground color (warning)
name: foregroundColorWarn
required: false
type: TEXT
groupName: general
- description: Set the number of rows in the grid.
label: Number of rows
name: rows
required: true
type: INTEGER
groupName: grid
- description: Set the number of columns in the grid.
label: Number of columns
name: columns
required: true
type: INTEGER
groupName: grid
- description: Set the number of columns in the grid.
label: Button Array specification
name: buttArray
required: true
type: TEXT
groupName: grid
parameterGroups:
- name: general
label: Display options
- name: grid
label: Grid setup
timestamp: Jan 24, 2021, 8:11:29 PM
component: f7-card
config:
title: '=(props.title) ? props.title : "Set props to test!"'
slots:
default:
- component: f7-block
slots:
default:
- component: oh-repeater
config:
sourceType: unset
for: i
in:
- [0, '', false, '', '', false, '', '', '', :'gray', 'white']
- [1, 'Standby', false, 'f7', 'power', true, 'TivoLivingRoom_RemoteControlButton', 'STANDBY', '', :'gray', 'lime']
- [2, 'Home', true, '', '', false, 'TivoLivingRoom_ChangeMenuScreen', 'TIVO', '', :'gray', 'white']
- [1, 'TV', true, '', '', false, 'TivoLivingRoom_ChangeMenuScreen', 'LIVETV', '', :'gray', 'white']
- [0, '', false, '', '', false, '', '', '', :'gray', 'white']
- [1, 'Guide', true, '', '', false, 'TivoLivingRoom_ChangeMenuScreen', 'GUIDE', '', :'gray', 'white']
- [1, 'My Shows', true, '', '', false, 'TivoLivingRoom_ChangeMenuScreen', '', '', :'gray', 'white']
- [1, 'Subtitles', true, '', '', false, 'TivoLivingRoom_ChangeMenuScreen', '', '', :'gray', 'white']
- [0, '', false, '', '', false, '', '', '', :'gray', 'white']
- [1, 'Blank', false, '', '', false, '', '', '', :'gray', 'white']
- [1, 'Up', false, 'f7', 'arrowtriangle_up', true, '', 'UP', '', :'gray', 'white']
- [1, 'Info', false, 'f7', 'info_circle_fill', true, 'TivoLivingRoom_ChangeMenuScreen', 'NOWPLAYING', '', :'gray', 'white']
- [0, '', false, '', '', false, '', '', '', :'gray', 'white']
- [1, 'Left', false, 'f7', 'arrowtriange_left', true, '', 'LEFT', '', :'gray', 'white']
- [1, 'OK', true, '', '', false, '', 'SELECT', '', :'gray', 'white']
- [1, 'Right', false, 'f7', 'arrowtriange_right', true, '', 'RIGHT', '', :'gray', 'white']
- [0, '', false, '', '', false, '', '', '', :'gray', 'white']
- [1, 'Back', true, '', '', false, '', '', '', :'gray', 'white']
- [1, 'Down', false, 'f7', 'arrowtriange_down', true, '', 'DOWN', '', :'gray', 'white']
- [1, 'Subtitles', true, '', '', false, '', '', '', :'gray', 'white']
- [0, '', false, '', '', false, '', '', '', :'gray', 'white']
- [1, '1', true, '', '', false, 'TivoLivingRoom_KeyboardCommand', 'NUM1', '', :'gray', 'white']
- [1, '2', true, '', '', false, 'TivoLivingRoom_KeyboardCommand', 'NUM2', '', :'gray', 'white']
- [1, '3', true, '', '', false, 'TivoLivingRoom_KeyboardCommand', 'NUM3', '', :'gray', 'white']
- [0, '0', false, '', '', false, '', '', '', :'gray', 'white']
- [1, '4', true, '', '', false, 'TivoLivingRoom_KeyboardCommand', 'NUM4', '', :'gray', 'white']
- [1, '5', true, '', '', false, 'TivoLivingRoom_KeyboardCommand', 'NUM5', '', :'gray', 'white']
- [1, '6', true, '', '', false, 'TivoLivingRoom_KeyboardCommand', 'NUM6', '', :'gray', 'white']
- [0, '0', false, '', '', false, '', '', '', :'gray', 'white']
- [1, '7', true, '', '', false, 'TivoLivingRoom_KeyboardCommand', 'NUM7', '', :'gray', 'white']
- [1, '8', true, '', '', false, 'TivoLivingRoom_KeyboardCommand', 'NUM8', '', :'gray', 'white']
- [1, '9', true, '', '', false, 'TivoLivingRoom_KeyboardCommand', 'NUM9', '', :'gray', 'white']
- [0, '0', false, '', '', false, '', '', '', :'gray', 'white']
- [1, 'Clear', true, '', '', false, 'TivoLivingRoom_KeyboardCommand', 'CLEAR', '', :'gray', 'white']
- [1, '0', true, '', '', false, 'TivoLivingRoom_KeyboardCommand', 'NUM0', '', :'gray', 'white']
- [1, 'Last Ch', true, '', '', false, 'TivoLivingRoom_KeyboardCommand', '', '', :'gray', 'white']
fragment: true
slots:
default:
- component: f7-row
config:
class:
- align-items-flex-center
slots:
default:
- component: oh-button
config:
visible: "=(loop.i[5] || loop.i[2]) ? true : false"
action: analyzer
class:
- float-left
- align-items-flex-start
- justify-content-center
- align-items-start
- text-align-center
style:
height: 100%
border: 1px solid black
margin: 1px
width: =loop.i[0] * 100 + 'px'
--f7-button-bg-color: var(--f7-color-gray-shade)
--f7-button-hover-bg-color: var(--f7-color-white-shade)
--f7-button-pressed-bg-color: var(--f7-color-white-shade)
slots:
default:
- component: f7-icon
config:
visible: =loop.i[5]
f7: =loop.i[4]
size: 14
style:
padding-right: 5px
color: =loop.i[10]
- component: Label
config:
visible: =loop.i[2]
text: =loop.i[1]
style:
font-size: 14px
font-weight: 400
color: =loop.i[10]