Modern Dashboard Lite Part 4 - berkansezer77/home-assistant GitHub Wiki
Part 4
This part consists of three sections. One with the main page, second and third with the cameras.
Swipe card is used here to divide sections.
First section : Starting from line 5
Second section : Starting at Line 2483
Third Section : Starting at Line 2513
Weather Card
Out first card is the weather card(Line 23). Browser Mode is used in here. When you click the card weather card will appear.
Browser Mode content starts at Line 41
Special Gifs used in the design are available at the download section of this project. For a weather integration you have multiple choices on Home Assistant.
For the weather card you have to install Platinum weather card from hacs.
Line 377 is the place of card template. If clauses used here for different weather conditions will be reflected to the outside border of the card.
Line 524 is the place where what to wear card exist. This card show random pictures for me to wear inside my home. The pictures are dynamic and changes according to the house temperature.
The card also has browser Mode support. Browser Mode content starts at Line 537
When tapped a browser window opens and you will see clothing advices just like in the picture.
If you swipe down on the picture you will see your climate controls.
Clothing advices can easily be edited to your like.
As seen in the picture just edit the appropriate clothing picture which comes next to temperature degrees.
Climate control page starts on Line 759. Just swipe down to reach that page from the main screen. I have 7 Trv controllers in my house and the page can only display 4 at a time, so I need an extra page and this page starts at Line 1044.
The external part of the card also gives advces of clothing with the help of a template.
Fortu part are devices
3 device have been added here but you can ofcourse add more options.
The card here is also supported with browser mode. Content starts at Line 1357. Inside the browser app a swiper card is being used for transition between the cards. Stata images for heaters or Air conditions are liste. For example state change for water heater is at Line 1418 and the picture changes according to those states.
Out 4.th card is birthday card. Here you will need some integrations ana template sensors.
The borwser card version shows the full calendar birthday data as seen in the picture. The upper text "Sonraki DG Bugün" means next birthday is today. This section will give you the time left to the next birthday. Before coming to that I will write down step by step to create a birthday card.
- Setup Google Calendar installation for Home Assistant. My card takes birthday data straight from Google Calendars. Alternatively you can also use other calendar integrations.
Okay when Google Calendar is installed we are good to go. First of all make sure that people are recorded with their birthday data to Google Calendar. As an example today is the birthday of my friend Baran. When I go to contacts.google.com and find Baran person card I can see this:
So I have Baran's birthday data and it also exist in Home Assistant now.
Now I need to create a sensor to take the message from Google Calendar.
- platform: template
sensors:
dogum_gunleri:
value_template: " {{state_attr('calendar.dogum_gunleri', 'message') }}"
After refreshing template entities in developers tools - yaml, a new sensor should appear as "sensor.dogum_gunleri"
So now let's go back to the card. On line 1798 as I said there is a sensor which tells time left to the next birthday. This is a template sensor created in sensors.yaml
- platform: template
sensors:
dogum_gunleri_kalan_sure:
value_template: >
{% set midnight = now().replace(hour=0, minute=0, second=0, microsecond=0).timestamp() %}
{% set event = as_timestamp(states.calendar.dogum_gunleri.attributes.start_time) %}
{% set delta = ((event - midnight) // 86400) | int %}
{% if delta == 0 %}
Bugün
{% elif delta == 1 %}
Yarın
{% elif delta == 2 %}
2 gün sonra
{% elif delta == 3 %}
3 gün sonra
{% elif delta == 4 %}
4 gün sonra
{% elif delta == 5 %}
5 gün sonra
{% elif delta == 6 %}
6 gün sonra
{% elif delta == 7 %}
7 gün sonra
{% elif delta == 8 %}
8 gün sonra
{% elif delta == 9 %}
9 gün sonra
{% elif delta == 10 %}
10 gün sonra
{% else %}
Baya Var
{% endif %}
It will tell you the time until the next birthday. It will count until 10 and if there is more time then 10 days, in else cause it will write as "Baya Var" which means "a lot time remaning". So we have our new sensor of time and we use it on line 1799.
Now the boring part. We have already created a sensor named "sensor.dogum_gunleri". We take this message and use it in a state image like in Line 1893. Baran's birthday sensor message is tied with is picture. So the result when the day comes the card will display his pictures like this.
You have to create birthdays for everyone you wish to see in the card.
" Baran Alpay adlı kişinin doğum günü: /local/birthday"
the above line matches birthday message from the sensor we cretaed and the pciture of Baran. If the message coming from the sensor is like "Baran Alpay adlı kişinin doğum günü" it will display the picture.
We also need atomic calendar integration from Hacs to access our calendar. We can specify specific calendar to display in the page. In my birthday card I have only displayed "birthday calendar" from Google Calendar.
If you also want to see the picture of the birthday owner at the card on the main screen you have to enter the template details as well.
This section of the cards starts from line 2030
As a last card we now have our calendar card.
There is an animated gif on the cover and the card itsel don't display any additional information in fron of the card. Instead all the contents are inside and are displayed again with the browser mode. Contents start at Line 2300. To display my calendar I used Atomic Calendar from Hacs again. This time, unlike the birthday card, I added all the calendars in this card.
Finally on line 2483 and Line 2513 I have added my camera images so that with a swipe move I can display them in the middle of my Modern Dashboard setup.
