Hi, when I first try home assistant some week ago I had some reaction ( how the programation language was not natural to my, but how powerful it could be… and MOSTLY how much I did not like the UI )
So couple of week later this is the ios app I made for my wife : (p.s it’s just a web app of a Lovelace page)
EDIT this is my code … feel free to give me some tips … I know that 280 lines it’s a lot and I have a lot of repetitive code but like I said this is not natural for me and after a lot of tried I finally make it work this way
background: center / cover no-repeat url("/local/image/wp2.jpg") fixed
resources:
- type: js
url: /local/kiosk.js
- type: js
url: /local/custom-lovelace/compact-custom-header/compact-custom-header.js?v0
- type: js
url: /local/card-tools.js
- type: js
url: /local/card-modder.js
- icon: 'mdi:cellphone-iphone'
theme: 'dark_cyan'
title: ''
views:
- badges: []
cards:
- type: horizontal-stack
cards:
- type: 'custom:compact-custom-header'
background_image: true
header: false
- type: custom:card-modder
style:
border-radius: 5px
text-align: center
font-size: 200%
border: 'solid 1px rgba(255,255,255,1)'
box-shadow: '3px 3px rgba(0,0,0,0.4)'
--primary-color: "#FFFFFF"
card:
type: markdown
content: >
[Appartement](http:/home.local:8123)
- type: vertical-stack
cards:
- type: horizontal-stack
cards:
#---------------------------------------------------------- #----------------------------------------------------------
- type: custom:card-modder
card:
type: entity-button
entity: light.cuisine
icon: 'mdi:silverware-fork-knife'
name: Cuisine
tap_action:
action: toggle
style:
border-radius: 5px
border: 'solid 1px rgba(255,255,255,1)'
box-shadow: '3px 3px rgba(0,0,0,0.4)'
#----------------------------------------------------------
- type: custom:card-modder
card:
type: entity-button
entity: group.all_lights_salon
icon: 'mdi:sofa'
name: Salon
tap_action:
action: toggle
style:
border-radius: 5px
border: 'solid 1px rgba(255,255,255,1)'
box-shadow: '3px 3px rgba(0,0,0,0.4)'
#----------------------------------------------------------
- type: custom:card-modder
card:
type: entity-button
entity: light.toillette
icon: 'mdi:toilet'
name: Toilette
tap_action:
action: toggle
style:
border-radius: 5px
border: 'solid 1px rgba(255,255,255,1)'
box-shadow: '3px 3px rgba(0,0,0,0.4)'
#----------------------------------------------------------
- type: horizontal-stack
cards:
- type: custom:card-modder
card:
type: entity-button
entity: light.chambre
icon: 'mdi:bed-empty'
name: Chambre
tap_action:
action: toggle
style:
border-radius: 5px
border: 'solid 1px rgba(255,255,255,1)'
box-shadow: '3px 3px rgba(0,0,0,0.4)'
#----------------------------------------------------------
- type: custom:card-modder
card:
type: entity-button
entity: light.gateway_light_34ce00fa706c
icon: 'mdi:lamp'
name: Veuilleuse
tap_action:
action: toggle
style:
border-radius: 5px
border: 'solid 1px rgba(255,255,255,1)'
box-shadow: '3px 3px rgba(0,0,0,0.4)'
#----------------------------------------------------------
- type: custom:card-modder
card:
type: entity-button
entity: switch.pool_filter
icon: 'mdi:desk-lamp'
name: Bureau
tap_action:
action: toggle
style:
border-radius: 5px
border: 'solid 1px rgba(255,255,255,1)'
box-shadow: '3px 3px rgba(0,0,0,0.4)'
#----------------------------------------------------------
- type: horizontal-stack
cards:
- type: custom:card-modder
card:
type: entity-button
entity: input_boolean.tv_insignia
icon: 'mdi:television'
name: TV Salon
tap_action:
action: toggle
style:
border-radius: 5px
border: 'solid 1px rgba(255,255,255,1)'
box-shadow: '3px 3px rgba(0,0,0,0.4)'
#----------------------------------------------------------
- type: custom:card-modder
card:
type: entity-button
entity: input_boolean.tv_changhong
icon: 'mdi:television'
name: TV Chambre
tap_action:
action: toggle
style:
border-radius: 5px
border: 'solid 1px rgba(255,255,255,1)'
box-shadow: '3px 3px rgba(0,0,0,0.4)'
#----------------------------------------------------------
- type: horizontal-stack
cards:
- type: custom:card-modder
card:
type: entity-button
entity: input_select.tab_cuisine
icon: 'mdi:tablet-ipad'
name: Cuisine
tap_action:
action: toggle
style:
border-radius: 5px
border: 'solid 1px rgba(255,255,255,1)'
box-shadow: '3px 3px rgba(0,0,0,0.4)'
#----------------------------------------------------------
- type: custom:card-modder
card:
type: entity-button
entity: input_select.tab_salon
icon: 'mdi:tablet-ipad'
name: Salon
tap_action:
action: toggle
style:
border-radius: 5px
border: 'solid 1px rgba(255,255,255,1)'
box-shadow: '3px 3px rgba(0,0,0,0.4)'
#----------------------------------------------------------
- type: custom:card-modder
card:
type: entity-button
entity: input_select.tab_coridor
icon: 'mdi:tablet-ipad'
name: Coridor
tap_action:
action: toggle
style:
border-radius: 5px
border: 'solid 1px rgba(255,255,255,1)'
box-shadow: '3px 3px rgba(0,0,0,0.4)'
#----------------------------------------------------------
- type: custom:card-modder
style:
border-radius: 5px
text-align: center;
border: 'solid 1px rgba(255,255,255,1)'
box-shadow: '3px 3px rgba(0,0,0,0.4)'
card:
type: markdown
content: " "
- type: horizontal-stack
cards:
- type: custom:card-modder
card:
type: entity-button
entity: input_boolean.night_mode
icon: 'mdi:weather-night'
name: Nuit
tap_action:
action: toggle
style:
border-radius: 5px
border: 'solid 1px rgba(255,255,255,1)'
box-shadow: '3px 3px rgba(0,0,0,0.4)'
#----------------------------------------------------------
- type: custom:card-modder
card:
type: entity-button
entity: input_boolean.cleaning_mode
icon: 'mdi:broom'
name: Ménage
tap_action:
action: toggle
style:
border-radius: 5px
border: 'solid 1px rgba(255,255,255,1)'
box-shadow: '3px 3px rgba(0,0,0,0.4)'
#---------------------------------------------------------- #----------------------------------------------------------
and for the theme it’s a modified version of dark cyan : (DO NO APPLIED IN FRONTEND it’s gonna be really ugly ! )
dark_cyan:
primary-color: "#00bcd4"
disabled-text-color: "#545454"
divider-color: "rgba(255, 255, 255, 0.12)"
paper-grey-200: "#191919"
paper-item-icon-color: "#d3d3d3"
paper-listbox-background-color: "#202020"
paper-listbox-color: "#FFFFFF"
primary-background-color: "rgba(5, 5, 8, 0.30)"
primary-text-color: "#cfcfcf"
secondary-background-color: "rgba(0, 0, 0, 0.12)"
secondary-text-color: "#04a7bc"
label-badge-background-color: "var(--secondary-background-color)"
label-badge-text-color: "var(--text-primary-color)"
paper-card-header-color: "#var(--paper-item-icon-color)"
paper-grey-50: "var(--primary-text-color)"
paper-item-icon-active-color: "var(--primary-color)"
paper-item-icon_-_color: "var(--primary-text-color)"
paper-slider-active-color: "var(--primary-color)"
paper-slider-knob-color: "var(--primary-color)"
paper-slider-knob-start-color: "var(--primary-color)"
paper-slider-pin-color: "var(--primary-color)"
paper-slider-secondary-color: "var(--light-primary-color)"
paper-toggle-button-checked-ink-color: "var(--dark-primary-color)"
paper-toggle-button-checked-button-color: "var(--primary-color)"
paper-toggle-button-checked-bar-color: "var(--light-primary-color)"
paper-toggle-button-unchecked-bar-color: "var(--primary-text-color)"
paper-card-background-color: "rgba(5, 5, 8, 0.50)"
paper-card-border-color: "rgba(255, 0, 0, 1)"