Hello 
Today i have the pleasure to show off a project i have been working on for many hours. I wanted to create a mobile interface that almost feels and looks like a native IOS/Android app. This is easy to control with one hand and gives a good overview in a small form factor. I simply call this “Something pretty”.
This is built with the picture-element and the custom card state-switch, button-card & card-mod. I have put alot of trial and error trying to make it look good on most mobile displays but it is primarily made for the iPhone SE.
If you like this you can always:
How To Setup:
Make shure you have some hours free before starting 
You can always ask me if you have any questions.
1. Download these files and put them in you local folder:
-
Something pretty theme-file can be downloaded here. This is s slightly modified google dark theme. Create a folder called something_pretty_theme inside your themes folder and save the theme file into that folder.
-
Weather icons can be downloaded for free here Create a folder named weather in your www folder and put them into that folder.
( i can´t share them here beacuse of copyright)
I am using the following names and icons:
-
Some of the 3D-icons seen on the “home” and “warnings” card can be bought here (for copyright reasons i can´t share the ones i bought myself. I have tried to find a solution with UI8 but no sucess yet… free3dicon.com may have alternatives.
-
Create memojis for your self and your girlfriend on an iPhone and save them to a folder named avatar stored in your local folder. I am using the following emotions and names.
→ guide to export memoji as .png files
- If you are using the apple-tv you will need this picture.
2. Make shure you have the following custom cards from HACS.
- state-switch, button-card, card-mod, kiosk-mode, cupertino-icons, config-template card, light-entity-card, mini media player, atomic-calendar-revive
Also set up the spotify integration, iCal, waze travelsensors and yahoo finance (HACS integrations),
3. Create three input booleans and one input_select. I have this in my config.yaml.
The booleans are used for changing some content (stocks/health/travel) in the “more info tab” and the input_select is used for the “notification field”
input_boolean:
dummy_button1:
name: dummy1
initial: off
dummy_button2:
name: dummy2
initial: off
dummy_button3:
name: dummy3
initial: off
input_select:
notiser_select:
name: notiser
options:
- tom
- n1
- n2
- n3
- n4
- n5
- n6
- n7
- n8
- n9
- n10
initial: tom
Some automations is needed for the input booleans.
- id: '1625817649684'
alias: dummy1
description: ''
trigger:
- platform: state
entity_id: input_boolean.dummy_button1
to: 'on'
condition: []
action:
- service: input_boolean.turn_off
target:
entity_id:
- input_boolean.dummy_button2
- input_boolean.dummy_button3
mode: single
- id: '1625817778045'
alias: dummy2
description: ''
trigger:
- platform: state
entity_id: input_boolean.dummy_button2
to: 'on'
condition: []
action:
- service: input_boolean.turn_off
target:
entity_id:
- input_boolean.dummy_button1
- input_boolean.dummy_button3
mode: single
- id: '1625817812900'
alias: dummy3
description: ''
trigger:
- platform: state
entity_id: input_boolean.dummy_button3
to: 'on'
condition: []
action:
- service: input_boolean.turn_off
target:
entity_id:
- input_boolean.dummy_button1
- input_boolean.dummy_button2
mode: single
Notifications:
You also need to create one automation per notfication that you want to show in the notification field.
I have one automation for n1, n2, n3 etc. (n = notification)
This is my first notficiation (n1) , it works like this:
→ When my motion sensor turns on, this automation changes my input_select to option “n1”.
→ State “n1” is now displayed by the state switch card.
→ After 10 seconds it changes back input_select to option “tom”.
So you need to change to your own sensor and if you would like to show it
for more than 10 seconds just change that value to something you prefer.
- id: '1627594209620'
alias: notishall
description: ''
trigger:
- type: turned_on
platform: device
device_id: 2350134a582ed0feb5295f5888f836af
entity_id: binary_sensor.rorelsesensor_rorelselarm
domain: binary_sensor
action:
- service: input_select.set_options
data:
options: n1
target:
entity_id: input_select.notiser_select
- delay:
hours: 0
minutes: 0
seconds: 10
milliseconds: 0
- service: input_select.set_options
target:
entity_id: input_select.notiser_select
data:
options: tom
mode: single
4. Here is my lovelace code. Copy it into the “Raw Config Editor”.
It´s not pretty but I have made some comments in the code which i hope will make it a bit easier to understand what´s going on.
5. Now change to your own sensors, person etc and write some jinja2templates where it is needed. Enjoy and feel free to ask me if you have any questions.
Credits:
@lukevink The code for changing the hue-filter on an image to match the state of an rgb-light is taken from his config.
@Mattias_Persson Some code for animation on tap and some css-code for styling the map card is taken from his config. His work is like a holy-grail. Check it out.
@tben Took some inspiration for some of the icons found in his theme.
Big thanks to @RomRider for the greatest card ever and to @thomasloven for card-mod and state-switch. Hope i have not forget to mention anyone !
and a beer (if you like) lol