The Picture Elements car in Home Assistant is one of the most flexible
cards available for the loveless UI allowing us to add icons text and
services on different parts of an image today I'm going to show you how to set
up an image of a floorplan and add entities to that image using the picture
elements car. Alright let's go ahead and get started. So here I have an image of a
floor plan that I created there are a few apps out there that you can use to
create this but one that I highly recommend is called Magicplan it is a
very easy to use app and it's available on both iOS and Android you can create a
floor plan for free and export an image for just $3.00 which is pretty cheap for
all the features that you get and also how easy it is to use so I definitely
recommend it if you would like to check it out you can find a link in the
description below alright so once you have an image of a floor plan you need
to save it in the www folder if you don't have this folder yet you will need
to create it inside the home assistant config folder now open the lovelace.yaml
file and set up a separate view for the floor plan. you also want to set
up the view as a panel select that the picture element card displays in full
width then define the card type as a picture elements and below add the floor
plan image using the path /local/ and then the name of the picture
including the file extension all right so now below you can start adding all
the elements that you want on top of the floor plan there are a few elements that
you can use the first one that we're going to look at is the state-badge which
allows adding sensors to the image define the element type as a state-badge
then for the entity enter the name for the sensor that you want to display now
to specify the position of the elements on the image you will need to use this
style variable and set the volume for the top and left variables if you
increase the percentage for the top it will position the element more towards
the bottom and the same thing goes for the left if you increase the value it
will move the element more towards the right the style variable uses CSS so
there are several things that you can change for example if you want to change
the size of the font you can change it using the variable font size save the
changes to the file and refresh the lovelace UI and you will now have a
floor plan image in a full panel view and with the new state badge created
there are no other variables available for the state badge that you can use but
to add more functionality to the sensor entity you could use the state label
with the state label you can add the same sensor and add some tags either
before or after the entity using the variables prefix or suffix you can also
use the variables tab action and hold action to either open the morning for
pop up call a service or navigate to another view here's an example for the
same weather sensor I set up the element type as a state label for the entity I
entered the same weather sensor then I added some text to show before the
entity using the prefix variable the text is also enclosed within quotes so
space could be added at the end to separate text from the entity value I
also added a tap action variable and I set it to navigate and then below I use
the navigation path variable set to the view where I want to navigate to lastly
I use the style variable to set the position of the label and I also change
the font size now the state label shows up with the entity data and when clicked
on is going to navigate to the view that are specified so apart from the state
badge and the state label you also have the state icon which allows adding
entity icons like switches and lights to see the current state with the state
icon you can also use the variables tap action hold action navigation path and
service here's an example that I set up from a living room light I define the element
type as a state icon for the entity I added a switch that is connected to my
lamp and I also give it a title which is shows up when I hover over the icon I
set up the tab action as a toggle so like that when I click on it it turns
the light on and off
by default the icons are a bit small but we can make them bigger by adding the
options iron icon height and iron icon a width to the style variable now there is
also the icon element which works similar to the state icon the only
difference is that it doesn't show the state of the entity it also has the same
variables available with the addition of the icon variable to be able to define
the icon that we want to display for the specific entity here's an example I used
this element I set up an icon element from a living room camera and I defined the
icon that I wanted to use for this entity then I added a variable iron icon
fill color to match the color of the icon with my current theme now I didn't
add the tab action variable because by default when you tap on the icon it
shows the more info pop-up but if you want to set something else you can
always say that variable like on this example where I set up an icon to
navigate to another view alright so those were the state elements available
plus the icon element now let's take a look at this service button which allows
adding a button to call a service a perfect example for this will be to
create a master button that would turn off all your lights at the same time let
me show you an example after you define the element type as a
service button add a title that will be the label for the button the service set
it to homeassistant.turn_off then set the variable service data with
the entity ID group.all_lights if you're like me and you have some light
entities and also some smart switches connected to lamps then you can create a
script like this to group all the lights together and then add the script name to
the service variable now anytime you want to turn off all
your lights at once instead of tapping on each individual light you can use the
service button to do it quickly so it is definitely an essential element to set
up on your floor plan especially if you have several lights all right last but
not least let's take a look at the image element which allows adding additional
images on top of the main picture it is very convenient because you can create
some cool effects like for example making a room on a floor plan look
darker when the light is off and then brighter when the light is turned on you
also have access to the variables that we use on the previous element with the
addition of the variables image camera image state image filter and a state
filter okay so for example to make the room look darker when the lights are off
you will first need to make a copy of the floor plan and crop the image to
just that room that you need after that save the image and the www folder then
in the lovelace file define the element type as an image set up the line entity
for that rule then add the tap action variable and if you want to tap anywhere
on the image to turn the line on and off then set it to toggle otherwise set it
to none if you are using a state icon to toggle the light now add the variable
image and add the path for the new cropped image then using the variable
State filter set up the brightness for the on and off state for the light
entity now position the image using the style variable and also add the width to
specify the size of the image now anytime that you turn the light on and
off the specific room in the floor plan will change between a normal image and a
darker image another way that we can set up the same example is by using two
cropped images for a room one with a normal brightness and the other one that
will be darker or you can do like me and set up a vignette to give it a better
look when the light is off then instead of using the filter and the state filter
variables you can use the state image and set up the two images on the on and off
alright so there's a lot more ways that you can use the picture elements card
and make it work better for your own setup I hope that this walkthrough of
the available elements can help you accomplish that
now of future videos I also want to go over some of the available custom cards
for lovelace I already have a few in mind that I want to cover but I would
definitely like to get some more feedback so definitely let me know in
the comments below alright guys like always thank you for
watching if you like this video give it a thumbs up don't forget to subscribe if
you haven't done so already and I will see you in the next video
For more infomation >> Erol Mütercimler The Economist 2019 Kapağı Gizli Şifre İç Savaş - Duration: 14:42. 
For more infomation >> Blogger & WordPress Site - Error 404 not found - The Requested URL was Not Found on This Server - Duration: 9:27. 
For more infomation >> DESCOBERTA PIRÂMIDE DE 25.000 MIL ANOS NA INDONÉSIA - Duration: 7:33. 
For more infomation >> Игрушечный Патруль: Понивиль - Duration: 5:54. 
For more infomation >> Готовка челлендж #9 | Готовлю новогоднюю еду в игре Toca Kitchen 2 для детей - Duration: 13:00. 
For more infomation >> Hai người bị bắt vì giả nhà sư lừa người dân. Tin Phật Giáo - Duration: 2:45. 
Không có nhận xét nào:
Đăng nhận xét