"Something pretty" for mobile

Hello :slight_smile:
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 :smiley: You can always ask me if you have any questions.

1. Download these files and put them in you local folder:

  • transparent box

  • 3dlightbulb

  • 3dlightbulbred for rgb lights

  • 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:

weather

  • 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

avatars

  • 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 !

14 Likes

Hi @danieljarhult ,

I tried to use your theme-file but my HA crashes with this error-message:

Logger: homeassistant.components.websocket_api.http.connection
Source: components/websocket_api/connection.py:134 
Integration: Home Assistant WebSocket API (documentation, issues) 
First occurred: 15:55:03 (4 occurrences) 
Last logged: 15:59:01

[139670687946256] Error handling message: The system cannot restart because the configuration is not valid: Invalid config for [frontend]: value should be a string for dictionary value @ data['frontend']['themes']['pretty']['Something pretty Theme']. Got OrderedDict([('app-header-background-color', 'rgb(23, 23, 23)'), ('app-header-text-color', 'rgb(198, 203, 210)'), ('primary-color', 'rgb(138, 180, 248)'), ('light-primary-color', 'var(--primary-color)'), ('primary-background-color', '#1c1c1d'), ('secondary-background-color', 'rgb(32, 33, 36)'), ('divider-color', 'var(--primary-background-color)'), ('accent-color', 'rgb(255, 255, 255, 0.6)'), ('primary-text-color', 'rgb(255, 255, 255, 0.8)'), ('secondary-text-color', 'rgb(181,210,245, 0.6)'), .... (See /config/configuration.yaml, line 14).````

Do you have a hint for me, what is the problem here?

Hello!
Hmm strange, whats do you have on line 14 in the configuration.yaml ?

(See /config/configuration.yaml, line 14).

Thats easy:
themes: !include configuration/themes.yaml
and my themes.yaml looks like that:

desktop:
  !include themes/desktop/desktop.yaml
mobile:
  !include themes/mobile/mobile.yaml
pretty:
  !include themes/something_pretty_theme/something_pretty_theme.yaml

so, finally got it… My indentation was not correct.

But: While pasting your raw config data i get the next error:

YAML kann nicht geparsed werden: YAMLException: bad indentation of a mapping entry (556:25) 553 | text-align: left; } 554 | content: > 555 | ### Here are some jinja2 templates. If the device is o ... 556 | <font size="3px"> {% if -------------------------------^ 557 | is_state('media_player.samsung_ ... 558 | vardagrummet ‰r pÂ! {% endif % ...

Hello, please try with this code instead :

I supect it has something to do with comments also some minor updated to the code.

1 Like

Love this! Fantastic work!

I’ve gotten most of it to work. Although i cant get the transparency working. Cant say I’ve changed to much, if anything, except sensors etc. All popups/windows are grey.

Any ideas where to start?

Hello!
I guess you have downloaded and are using the theme file ?

I think the blur effect only works with webkit based browsers such as safari. Should work in chrome also i think.

Yes, using you theme file.

So basically it wont work in home assistant app?

On iphone it works fine for me using the app. I have not tried on any other device. :slight_smile:

Wow - so amazing I would love to invite you for coffee :slight_smile: and a beer (if you like) lol

I have a few small questions Can you help me in private?

Hello Thanks! Shure, send me your questions :smiley:

Your work is amazing -
I’m sitting to make settings for my system …— will take some time | :slight_smile:

After the settings and compatibility to my system I will send you a question :slight_smile:

But something small - I want to give the system to my wife and she wants a hot water timer - I have something that works - I work in front of Nod-Red if you know

something really important, I need to see cameras - I have 3 children at home I have to access the cameras, how do I add a camera category?

A question on transparent memoji pictures. If have them stored as transparent PNGs. When I e.g. put them into a powerpoint slide, it works with the face having transparent background. If I add it as a person picture in home assistant, the picture crop view does also show correcty transparent background, but then it does however upload the picture with a completely black background.
Am I doing something wrong or is the person picture functionality not supporting transparency and I need to use the picture from a different source if I want to use it in lovelace?

If i understand you correctly, what you mean is that the background turns black when the picture is used as an enity picture to the entity “person.yourname” ? Thats because lovelace add a black background as standard for the background to the entity picture for the “person” entity i think. But with some css you change that color. Look into the card-mod topic.

Right, in the standard lovelace cards it makes it at least a circle, but if you use the person picture in e.g. a custom button card, you have it with a black rectangle. But as a work around, I uploaded the same png and linked to that local file, and then it is transparent as expected.

1 Like

What an awesome project!
I’m trying to implement it on my NSPanel, I think it would look great.

I’m just having an issue where the markdown card is not working.
I’m getting “custom element doesn’t exist: markdown.”

Even though I’m able to create markdown cards in other lovelace UI’s without issues. When removing the “Templating” it’s able to render without error, but the markdown card is not showing at all then.