Here my latest work, I integrated the code I found here:
Please note the grey boxed are for privacy only…
Some questions idea’s where som help would be much appreciated:
- How can make the hight of the oh-card smaller? I would like to make the scenes buttons a bit smaller in size
- I would like to only expand the lights on to more functions:
- show the active scene (only when that scene is actually active)
- Lights off
- Heating temperature
Any idea how I can implement that I a smart way? Maybe @ysc do you have any idea?
Here the latest code
uid: Card_room_3
tags: []
props:
parameters:
- label: Background image-url
name: backgroundUrl
required: false
type: TEXT
groupName: general
- description: Background blur
label: Intensity of the background-blur (0 - 10)
name: backgroundBlur
required: false
type: TEXT
groupName: general
- label: Text header
name: text_header
required: false
type: TEXT
groupName: general
- label: page
name: page
required: true
groupName: general
- context: item
description: select group for status lights
label: Item
name: status
required: false
type: TEXT
parameterGroups:
- name: general
label: General settings
- name: wording
label: Wording
timestamp: Dec 29, 2020, 10:26:48 PM
component: oh-cell
config:
title: '=(props.text_header) ? props.text_header : "Set props!"'
action: popup
actionModal: =props.page
slots:
background:
- component: f7-block
config:
class:
- card-opened-fade-out
style:
position: absolute
left: 50%
bottom: -10px
slots:
default:
- component: f7-card
config:
style:
background-image: "='url(' + props.backgroundUrl.substring(0, (props.backgroundUrl.length -4)) + ((props.itemTimesOfDay === undefined || items[props.itemTimesOfDay].state === 'NULL') ? '' : '_' + items[props.itemTimesOfDay].state) + props.backgroundUrl.substr(-4) + ')'"
background-size: cover
background-repeat: no-repeat
background-position: 100% 50%
border-radius: 0px
height: 200px
width: 20em
- component: f7-block
config:
class:
- card-opened-fade-out
style:
position: absolute
left: -18px
bottom: 10px
slots:
default:
- component: f7-chip
config:
class:
- margin-left
iconF7: lightbulb
iconColor: yellow
text: Lights are on
visible: =items[props.status].state === 'ON'
- component: f7-block
config:
class:
- card-opened-fade-out
style:
position: absolute
right: 8%
bottom: 30%
slots:
default:
- component: f7-icon
config:
style:
font-size: 25px
color: white
position: absolute
f7: arrow_right