8 | ha-floorplan has been replaced with ha-floorplan.
Please check out the new solution, and let us know what you think.
9 |
10 |
11 |
12 |
13 |
14 | # Floorplan for Home Assistant
15 |
16 | 
17 |
18 | ## Background
19 |
20 | Out of the box, the Home Assistant [front end](https://home-assistant.io/docs/frontend/) provides a great way of viewing and interacting with your entities. This project builds on top of that, allowing you to extend the user interface by adding your own visuals.
21 |
22 | With Floorplan for Home Assistant, you can:
23 |
24 | - Integrate with Home Assistant as either a state card or a custom panel
25 | - Display any number of entities (i.e. binary sensors, lights, cameras, etc.)
26 | - Style each entity's states using CSS
27 | - Gradually transition between states using color gradients
28 | - Display the last triggered binary sensor using CSS
29 | - Display hover-over text for each entity
30 | - Call a service or display a popup dialog when an entity is clicked
31 |
32 | Despite its title, Floorplan for Home Assistant can be used as a general purpose user interface for just about anything you want to present in a visual way.
33 |
34 | The concept is quite simple. You create an SVG file and simply add shapes/images to represent your Home Assistant entities. As long as the ids match up, your SVG comes to life and displays your entities' states in real time. Your entities also become clickable, so they act as shortcuts to opening the built-in 'more info' popups that are normally displayed by Home Assistant. This means clicking on a camera icon, for example, opens the Home Assistant 'more info' popup that displays the live camera feed. Hovering over the entitiy displays a tooltip showing all the information related to the entity.
35 |
36 | Although using it as a floorplan is the most common use case, you can go even further and create visuals of real world components. Some examples are:
37 |
38 | - An SVG image of a remote control with each button click triggering a service in Home Assistant
39 | - An SVG image of a Ring doorbell with the sensor and camera mapped to sensors in Home Assistant
40 | - An SVG image of a Logitech Squeezebox media player with the screen text mapped to the state, current song, etc. in Home Assistant
41 |
42 | ## Usage
43 |
44 | To get started, copy the following files from this repo to your Home Assistant directory:
45 |
46 | ```
47 | www/custom_ui/floorplan/ha-floorplan.html
48 | www/custom_ui/floorplan/floorplan.svg
49 | www/custom_ui/floorplan/floorplan.css
50 | www/custom_ui/floorplan/lib/jquery-3.2.1.min.js
51 | www/custom_ui/floorplan/lib/moment.min.js
52 | www/custom_ui/floorplan/lib/svg-pan-zoom.min.js
53 | ```
54 |
55 | Although a sample floorplan SVG file is included in this repo, you will want to create your own. See the [appendix](#creating-a-floorplan-svg-file) for more information.
56 |
57 | You then have two options for how you want to the floorplan to appear in Home Assistant:
58 |
59 | - custom state card
60 | - custom panel
61 |
62 | Of course, you can choose to have it displayed in both places. If you have several floorplans to display (i.e. different levels of a house), that is supported too.
63 |
64 | ### Option 1: Floorplan custom state card
65 |
66 | 
67 |
68 | To display the floorplan as a custom state card, copy the following file from this repo to your Home Assistant directory:
69 |
70 | ```
71 | www/custom_ui/state-card-floorplan.html
72 | ```
73 |
74 | To allow the above file to be served by Home Assistant, add it to the `frontend` section of your Home Assistant configuration:
75 |
76 | ```
77 | frontend:
78 | extra_html_url:
79 | - /local/custom_ui/state-card-floorplan.html
80 | ```
81 |
82 | Since Home Assistant requires a single entity to be used as the target for a state card, create a virtual entity to represent the overall floorplan. You can choose any type of entity for this, such as the MQTT binary sensor. Add the following to your Home Assistant configuration:
83 |
84 | ```
85 | binary_sensor:
86 | - platform: mqtt
87 | state_topic: dummy/floorplan/sensor
88 | name: Floorplan
89 | ```
90 |
91 | Then, add the following to get Home Assistant to display this new virtual entity using the floorplan custom state card:
92 |
93 | ```
94 | homeassistant:
95 | customize:
96 | binary_sensor.floorplan:
97 | custom_ui_state_card: state-card-floorplan
98 | config: !include floorplan.yaml
99 | ```
100 |
101 | To actually display the floorplan custom state card in the front end, add the virtual entity to one of your groups:
102 |
103 | ```
104 | group:
105 | zones:
106 | name: Zones
107 | entities:
108 | - binary_sensor.floorplan
109 | ```
110 |
111 | You can also add a 'last motion' entity to keep track of which binary sensor was triggered last. See the [appendix](#adding-a-last-motion-entity-to-your-floorplan) for more information.
112 |
113 | ### Option 2: Floorplan custom panel
114 |
115 | 
116 |
117 | To display the floorplan as a custom panel, copy the following file from this repo to your Home Assistant directory:
118 |
119 | ```
120 | panels/floorplan.html
121 | ```
122 |
123 | Then, add the following to your Home Assistant configuration:
124 |
125 | ```
126 | panel_custom:
127 | - name: floorplan
128 | sidebar_title: Floorplan
129 | sidebar_icon: mdi:home
130 | url_path: floorplan
131 | config: !include floorplan.yaml
132 | ```
133 |
134 | ### Configure the floorplan
135 |
136 | Whether your floorplan is being displayed as a custom state card or as a custom panel, the same configuration file `floorplan.yaml` is used. This is where you tell Home Assistant which entities you want to display on your floorplan.
137 |
138 | The example `floorplan.yaml` included in this repo shows how to add various entities to your floorplan and style their appearance based on their states.
139 |
140 | At the top of the file, you provide a name for the floorplan, as well as the location of the SVG and CSS files:
141 |
142 | ```
143 | name: Demo Floorplan
144 | image: /local/custom_ui/floorplan/floorplan.svg
145 | stylesheet: /local/custom_ui/floorplan/floorplan.css
146 | ```
147 |
148 | If you want the floorplan to display any warnings (i.e. SVG file does not contain required elements), add the following:
149 |
150 | ```
151 | warnings:
152 | ```
153 |
154 | If you want to support panning and zooming within your SVG file, add the following:
155 |
156 | ```
157 | pan_zoom:
158 | ```
159 |
160 | If you want to hide the main application toolbar and display the floorplan in true fullscreen mode (when used as a custom panel), add the following:
161 |
162 | ```
163 | hide_app_toolbar:
164 | ```
165 |
166 | To set the date format displayed in the hover-over text, add the following:
167 |
168 | ```
169 | date_format: DD-MMM-YYYY
170 | ```
171 |
172 | If you want to display a 'last motion' entity, you can include that in the next section of the file. You specify the name of the entity, as well as the CSS class used to style its appearance:
173 |
174 | ```
175 | last_motion_entity: sensor.template_last_motion
176 | last_motion_class: last-motion
177 | ```
178 |
179 | The remainder of the file is where you add your floorplan groups. These floorplan groups are not to be confused with [Home Assistant entity groups](https://home-assistant.io/components/group) that are used to combine multiple entities into one.
180 |
181 | ```
182 | groups:
183 | ```
184 |
185 | You need to place each of your entities into a floorplan group, since configuration is performed at a floorplan group level. The floorplan groups can be given any name, and have no purpose other than to allow for configuration of multiple items in one place.
186 |
187 | If you've already created some Home Assistant entity groups, you can actually include those groups in two different ways:
188 |
189 | - single - the group will be represented as a single entity (`group.pantry_lights` in the example below). These sorts of Home Assistant entity groups get added beneath `entities:`).
190 |
191 | - exploded - the group will be exploded into separate entities (`group.living_area_lights` in the example below). These sorts of Home Assistant entity groups get added beneath `groups:`).
192 |
193 | ```
194 | - name: Lights
195 | entities:
196 | - light.kitchen
197 | - group.pantry_lights
198 | groups:
199 | - group.living_area_lights
200 | ```
201 |
202 | In addition to monitoring your entities in real time, you can also trigger actions when your entities are clicked. Below is an example of such an action. Whenever one of the lights in the group is clicked, an action is triggered that calls the Home Assistant 'toggle' service. See the [appendix](#triggering-actions) for more information.
203 |
204 | ```
205 | - name: Lights
206 | entities:
207 | - light.kitchen
208 | - group.pantry_lights
209 | groups:
210 | - group.living_area_lights
211 | action:
212 | service: toggle
213 | ```
214 |
215 | Below are some examples of groups, showing how to configure different types of entities in the floorplan.
216 |
217 | #### Sensors
218 |
219 | Below is an example of a 'Sensors' group, showing how to add a temperature sensor (as text) to your floorplan. in the screenshot above, this can be seen as an SVG text element displaying the current temperature (i.e. '9.0°').
220 |
221 | The sensor's state is displayed using a `text_template`. As you can see, it contains some embedded code that determines which actual text to display.
222 |
223 | The sensor's CSS class is determined dynamically using a `class_template`. In the example below, the CSS class is determined based on the actual temperature value.
224 |
225 | See the [appendix](#using-template-literals-in-your-configuration) for more information on how to use template literals in your configuration.
226 |
227 | ```
228 | - name: Sensors
229 | entities:
230 | - sensor.melbourne_now
231 | - group.major_city_temp_sensors
232 | text_template: '${entity.state ? entity.state : "unknown"}'
233 | class_template: '
234 | var temp = parseFloat(entity.state.replace("°", ""));
235 | if (temp < 10)
236 | return "temp-low";
237 | else if (temp < 30)
238 | return "temp-medium";
239 | else
240 | return "temp-high";
241 | '
242 | ```
243 |
244 | Below is an example of using dynamic images which are swapped out at runtime, based on the sensor's current state. In the example below, the `sensor.home_dark_sky_icon` entitiy is mapped to a `` in the SVG file with the same id (which simply acts as a placeholder). Whenever the temperature sensor changes state, the `image_template` is evaluated to determine which SVG image should be emebedded within the bounds of the ``. Also you need to make sure that the placeholder is placed directly within the svg (e.g. not in a layer in inkscape) or else the calculated coordinates will be wrong.
245 |
246 | ```
247 | groups:
248 |
249 | - name: Dark Sky Sensors
250 | entities:
251 | - sensor.home_dark_sky_icon
252 | image_template: '
253 | var imageName = "";
254 |
255 | switch (entity.state) {
256 | case "clear-day":
257 | imageName = "day";
258 | break;
259 |
260 | case "clear-night":
261 | imageName = "night";
262 | break;
263 |
264 | case "partly-cloudy-day":
265 | imageName = "cloudy-day-1";
266 | break;
267 |
268 | case "partly-cloudy-night":
269 | imageName = "cloudy-night-1";
270 | break;
271 |
272 | case "cloudy":
273 | imageName = "cloudy";
274 | break;
275 |
276 | case "rain":
277 | imageName = "rainy-1";
278 | break;
279 |
280 | case "snow":
281 | imageName = "snowy-1";
282 | break;
283 | }
284 |
285 | return "/local/custom_ui/floorplan/images/weather/" + imageName + ".svg";
286 | '
287 | ```
288 |
289 | #### Switches
290 |
291 | Below is an example of a 'Switches' group, showing how to add switches to your floorplan. The appearance of each switch is styled using the appropriate CSS class, based on its current state.
292 |
293 | ```
294 | - name: Switches
295 | entities:
296 | - switch.doorbell
297 | states:
298 | - state: 'on'
299 | class: 'doorbell-on'
300 | - state: 'off'
301 | class: 'doorbell-off'
302 | action:
303 | domain: switch
304 | service: toggle
305 | ```
306 |
307 | #### Lights
308 |
309 | Below is an example of a 'Lights' group, showing how to add lights to your floorplan. The appearance of each light is styled using the appropriate CSS class, based on its current state.
310 |
311 | ```
312 | - name: Lights
313 | entities:
314 | - light.hallway
315 | - light.living_room
316 | - light.patio
317 | states:
318 | - state: 'on'
319 | class: 'light-on'
320 | - state: 'off'
321 | class: 'light-off'
322 | ```
323 |
324 | #### Alarm Panel
325 |
326 | Below is an example of an 'Alarm Panel' group, showing how to add an alarm panel (as text) to your floorplan. The appearance of the alarm panel is styled using the appropriate CSS class, based on its current state. In the screenshot above, this can be seen as an SVG text element displaying the current alarm status (i.e. 'disarmed').
327 |
328 | ```
329 | - name: Alarm Panel
330 | entities:
331 | - alarm_control_panel.alarm
332 | states:
333 | - state: 'armed_away'
334 | class: 'alarm-armed'
335 | - state: 'armed_home'
336 | class: 'alarm-armed'
337 | - state: 'disarmed'
338 | class: 'alarm-disarmed'
339 | ```
340 |
341 | #### Binary Sensors
342 |
343 | Below is an example of a 'Binary sensors' group, showing how to add binary sensors to your floorplan. The appearance of each binary sensor is styled using the appropriate CSS class, based on its current state. In the screenshot above, these can be seen as SVG paths (i.e. rooms/zones of the house).
344 |
345 | The `state_transitions` section is optional, and allows your binary sensors to visually transition from one state to another, using the fill colors defined in the CSS classes associated with each state. You can specify the duration (in seconds) for the transition from one color to the other.
346 |
347 | ```
348 | - name: Binary Sensors
349 | entities:
350 | - binary_sensor.front_hallway
351 | - binary_sensor.kitchen
352 | - binary_sensor.master_bedroom
353 | - binary_sensor.theatre_room
354 | states:
355 | - state: 'off'
356 | class: 'info-background'
357 | - state: 'on'
358 | class: 'warning-background'
359 | state_transitions:
360 | - name: On to off
361 | from_state: 'on'
362 | to_state: 'off'
363 | duration: 10
364 | ```
365 |
366 | #### Cameras
367 |
368 | Below is an example of a 'Cameras' group, showing how to add cameras to your floorplan. The appearance of each camera is styled using the appropriate CSS class, based on its current state. In the screenshot above, these can be seen as camera icons, which were imported from an external SVG image.
369 |
370 | - name: Cameras
371 | entities:
372 | - camera.hallway
373 | - camera.driveway
374 | - camera.front_door
375 | - camera.backyard
376 | states:
377 | - state: 'idle'
378 | class: 'camera-idle'
379 |
380 | #### Media Players
381 |
382 | Below is an example of a 'Media Players' group, showing how to add media players to your floorplan. The appearance of each media player is styled using the appropriate CSS class, based on its current state. In the screenshot above, these can be seen as Logitech Squeezebox icons, which were imported from an external SVG image.
383 |
384 | - name: Media Players
385 | entities:
386 | - media_player.alfresco
387 | - media_player.ensuite
388 | - media_player.salon
389 | states:
390 | - state: 'off'
391 | class: 'squeezebox-off'
392 | - state: 'idle'
393 | class: 'squeezebox-off'
394 | - state: 'paused'
395 | class: 'squeezebox-off'
396 | - state: 'playing'
397 | class: 'squeezebox-on'
398 |
399 | #### Toggling the visibility of entities
400 |
401 | If you'd like to control the visibility of your entities, you can create a layer in your SVG file (using the `` element) that contains the entities you want show/hide, along with a button (using ``, for example) that is actually used to toggle the visiblity. Below is an example of a button `media_players_button` that toggles the visibility of all media players in the floorplan (i.e. those that are contained within the `media_players_layer` layer). The floorplan toggles between the two CSS classes whenever the button is clicked.
402 |
403 | ```
404 | - name: Media Players
405 | elements:
406 | - media_players_button
407 | action:
408 | domain: class
409 | service: toggle
410 | data:
411 | elements:
412 | - media_players_layer
413 | classes:
414 | - layer-visible
415 | - layer-hidden
416 | default_class: layer-hidden
417 | ```
418 |
419 | ## Appendix
420 |
421 | ### Creating a floorplan SVG file
422 |
423 | [Inkscape](https://inkscape.org/en/develop/about-svg/) is a free application that lets you create vector images. You can make your floorplan as simple or as detailed as you want. The only requirement is that you create an element (i.e. `rect`, `path`, `text`, etc.) for each entity ( i.e. binary sensor, switch, camera, etc.) you want to display on your floorplan. Each of these elements needs to have its `id` set to the corresponding entity name in Home Assistant.
424 |
425 | For example, below is what the SVG element looks like for a Front Hallway binary sensor. The `id` of the shape is set to the entity name `binary_sensor.front_hallway`. This allows the shape to automatically get hooked up to the right entity when the floorplan is displayed.
426 |
427 | ```html
428 |
430 | ```
431 |
432 | If you need a good source of SVG files for icons or images, you can check out the following resources :
433 | [Material Design Icons](https://materialdesignicons.com/), [Noun Project](https://thenounproject.com/) and [Flat Icon](http://flaticon.com)
434 |
435 | ### Adding a last motion entity to your floorplan
436 |
437 | As an optional step, you can create a 'last motion' entity to keep track of which binary sensor was triggered last. To do so, add the following:
438 |
439 | ```
440 | sensor:
441 | - platform: template
442 | sensors:
443 | template_last_motion:
444 | friendly_name: 'Last Motion'
445 | value_template: >
446 | {%- set sensors = [states.binary_sensor.theatre_room, states.binary_sensor.back_hallway, states.binary_sensor.front_hallway, states.binary_sensor.kitchen] %}
447 | {% for sensor in sensors %}
448 | {% if as_timestamp(sensor.last_changed) == as_timestamp(sensors | map(attribute='last_changed') | max) %}
449 | {{ sensor.name }}
450 | {% endif %}
451 | {% endfor %}
452 | ```
453 |
454 | To actually display the 'last motion' entity', add it to one of your groups:
455 |
456 | ```
457 | group:
458 | zones:
459 | name: Zones
460 | entities:
461 | - sensor.template_last_motion
462 | - binary_sensor.floorplan
463 | ```
464 |
465 | ### Using template literals in your configuration
466 |
467 | The settings `text_template`, `class_template`, and `action_template` allow you to inject your own expressions and code using JavaScript [template literals](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Template_literals). Within these template literals, you have full access to the entity's state object, which allows you to access other properties such as `last_changed`, `attributes.friendly_name`, etc. The full set of objects available to your template literals is shown below:
468 |
469 | - `entity` - the state object for the current entity
470 | - `entities` - the state objects for all entities
471 | - `hass` - the [hass object](https://home-assistant.io/developers/development_hass_object/)
472 | - `config` - the floorplan configuration
473 |
474 | ```
475 | - name: Sensors
476 | entities:
477 | - sensor.melbourne_now
478 | text_template: '${entity.state ? entity.state : "unknown"}'
479 | class_template: '
480 | var temp = parseFloat(entity.state.replace("°", ""));
481 | if (temp < 10)
482 | return "temp-low";
483 | else if (temp < 30)
484 | return "temp-medium";
485 | else
486 | return "temp-high";
487 | '
488 | ```
489 |
490 | ### Triggering actions
491 |
492 | Within each group, you can define an `action` that triggers a call to the specified Home Assistant service when an entity is clicked. The `domain` is optional, and defaults to either the domain of the entity being clicked (for regular entities, i.e. 'light'), or to 'homeassistant' (for Home Assistant group entities).
493 |
494 | In its simplest form, an `action` can be used to toggle an enity (or a group of entities, in the case of a Home assistant group).
495 |
496 | ```
497 | action:
498 | service: toggle
499 | ```
500 |
501 | You can also explictly set the `domain` if you want to call a service from a particular domain.
502 |
503 | ```
504 | action:
505 | domain: homeassistant
506 | service: toggle
507 | ```
508 | The ability to specify a domain means you can kick off just about any service available in Home Assistant (scripts, automations, notifcations, shell commands, TTS, etc.).
509 |
510 | ```
511 | action:
512 | domain: script
513 | service: sound_frontdoor_chime
514 | ```
515 |
516 | For services that support additional data, you can include that as well. Below is an example of setting the transition and brightness when switching on a light.
517 |
518 | ```
519 | action:
520 | domain: light
521 | service: turn_on
522 | data:
523 | transition: 50
524 | brightness: 75
525 | ```
526 |
527 | When an entity is clicked, it can actually trigger an action on another entity. The example below shows how clicking on a light triggers a different light to be switched on, by supplying the other's light's `entity_id` as part of the action.
528 |
529 | ```
530 | action:
531 | domain: light
532 | service: turn_on
533 | data:
534 | entity_id: light.some_other_light
535 | transition: 50
536 | brightness: 75
537 | ```
538 |
539 | For more flexibility, you can use the `data_template` to dynamically generate data required for your `action`. The example below shows how a JSON object is dynamically created and populated with data. Thanks to template literals, you can inject code to evaluate expressions at runtime. Just for the purposes of illustration, the example shows the use of the JavaScript Math.min() function being used in conjunction with another entity's current state.
540 |
541 | ```
542 | action:
543 | domain: light
544 | service: turn_on
545 | data_template: '
546 | {
547 | "entity_id": "light.some_other_light",
548 | "brightness": ${Math.min(entities["zone.home"].attributes.radius, 50)}
549 | }
550 | '
551 | ```
552 |
553 | ## Troubleshooting
554 |
555 | First of all, check the indentation of the floorplan config. All the examples above show the correct level of indentantion, so make sure that's done before proceedeing further.
556 |
557 | The recommended web browser to use is Google Chrome. Pressing F12 displays the Developer Tools. When you press F5 to reload your floorplan page, the Console pane will show any errors that may have occurred. Also check the Network tab to see if any of the scripts failed to load. Ad-blockers have been known to prevent some scripts from loading.
558 |
559 | If you're not seeing latest changes that you've made, try clearing the web browser cache. This can also be done in the Chrome Developer Tools. Select the Network tab, right click and select Clear browser cache.
560 |
561 | If you're not able to access the floorplan in your web browswer at all, it could be that you've been locked out of Home Assistant due to too many failed login attempts. Check the file `ip_bans.yaml` in the root Home Assistant config directory and remove your IP address if it's in there.
562 |
563 | If you encounter any issues with your entities not appearing, or not correctly showing state changes, firstly make sure that `warnings:` is added to your floorplan config. It will report any SVG elements that are missing, misspelt, etc.
564 |
565 | If you're adding your own CSS classes for styling your entities, make sure you escape the dot character in the id, by prefixing it with a backlash:
566 |
567 | ```
568 | #light\.hallway:hover {
569 | }
570 | ```
571 |
572 | ## Resources
573 |
574 | Check out Patrik's tutorial on [how to create a custom floorplan SVG](own-floorplan-svg-file-tutorial.md)
575 |
576 | ## More information
577 |
578 | For discussions and more information, check out the [thread](https://community.home-assistant.io/t/floorplan-for-home-assistant) on the Home Assistant forums.
579 |
--------------------------------------------------------------------------------
/binary_sensors.yaml:
--------------------------------------------------------------------------------
1 | - platform: mqtt
2 | state_topic: dummy/floorplan/sensor
3 | name: Floorplan
4 |
--------------------------------------------------------------------------------
/configuration.yaml:
--------------------------------------------------------------------------------
1 | homeassistant:
2 | customize: !include customize.yaml
3 |
4 | frontend: !include frontend.yaml
5 | panel_custom: !include panel_custom.yaml
6 | binary_sensor: !include binary_sensors.yaml
7 |
--------------------------------------------------------------------------------
/customize.yaml:
--------------------------------------------------------------------------------
1 | binary_sensor.floorplan:
2 | custom_ui_state_card: state-card-floorplan
3 | config: !include floorplan.yaml
4 |
--------------------------------------------------------------------------------
/floorplan.yaml:
--------------------------------------------------------------------------------
1 | name: Demo Floorplan
2 | image: /local/custom_ui/floorplan/floorplan.svg
3 | stylesheet: /local/custom_ui/floorplan/floorplan.css
4 |
5 | # These options are optional
6 | # warnings: # enable warnings (to find out why things might ot be working correctly)
7 | # pan_zoom: # enable experimental panning / zooming
8 | # hide_app_toolbar: # hide the application toolbar (when used as a custom panel)
9 | # date_format: DD-MMM-YYYY # Date format to use in hover-over text
10 |
11 | last_motion_entity: sensor.template_last_motion
12 | last_motion_class: last-motion
13 |
14 | groups:
15 |
16 | - name: Sensors
17 | entities:
18 | - sensor.dark_sky_temperature
19 | #text_template: '${entity.state ? entity.state : "unknown"}'
20 | # An example of rounding up a number, i.e. a temperature of 90.1 becomes 91
21 | text_template: '${entity.state ? Math.ceil(entity.state) : "undefined"}'
22 | class_template: '
23 | var temp = parseFloat(entity.state.replace("°", ""));
24 | if (temp < 10)
25 | return "temp-low";
26 | else if (temp < 30)
27 | return "temp-medium";
28 | else
29 | return "temp-high";
30 | '
31 |
32 | - name: Lights
33 | entities:
34 | - light.hallway
35 | - light.living_room
36 | - light.patio
37 | - group.kitchen_lights
38 | - group.living_room_lights
39 | states:
40 | - state: 'on'
41 | class: 'light-on'
42 | - state: 'off'
43 | class: 'light-off'
44 | action:
45 | domain: homeassistant # This optional parameter allows you to use other services such as homeassistant.toggle like here.
46 | service: toggle
47 |
48 | - name: Switches
49 | entities:
50 | - switch.doorbell
51 | states:
52 | - state: 'on'
53 | class: 'doorbell-on'
54 | - state: 'off'
55 | class: 'doorbell-off'
56 |
57 | - name: NVR
58 | entities:
59 | - binary_sensor.blue_iris_nvr
60 | text_template: '${(entity.state === "on") ? "online" : "offline"}'
61 | states:
62 | - state: 'off'
63 | class: 'danger-text'
64 | - state: 'on'
65 | class: 'success-text'
66 |
67 | - name: Alarm Panel
68 | entities:
69 | - alarm_control_panel.alarm
70 | states:
71 | - state: 'armed_away'
72 | class: 'alarm-armed'
73 | - state: 'armed_home'
74 | class: 'alarm-armed'
75 | - state: 'disarmed'
76 | class: 'alarm-disarmed'
77 |
78 | - name: Binary sensors
79 | entities:
80 | - binary_sensor.front_hallway
81 | - binary_sensor.kitchen
82 | - binary_sensor.master_bedroom
83 | - binary_sensor.theatre_room
84 | states:
85 | - state: 'off'
86 | class: 'info-background'
87 | - state: 'on'
88 | class: 'warning-background'
89 | state_transitions:
90 | - name: On to off
91 | from_state: 'on'
92 | to_state: 'off'
93 | duration: 10
94 |
95 | - name: Cameras
96 | entities:
97 | - camera.hallway
98 | - camera.driveway
99 | - camera.front_door
100 | - camera.backyard
101 | states:
102 | - state: 'idle'
103 | class: 'camera-idle'
104 |
105 | # - name: thermostat_temp
106 | # entities:
107 | # - climate.downstairs
108 | # - climate.upstairs
109 | # text_template: '${entity.attributes.current_temperature ? entity.attributes.current_temperature : "undefined"}'
110 | #
111 | # The above text_template uses extended attributes from the climate.* objects to get current temperature.
112 |
113 | # - name: text_states
114 | # entities:
115 | # - sensor.downstairs_thermostat_humidity
116 | # - sensor.dark_sky_temperature
117 | # - sensor.last_message
118 | # text_template: '${entity.state ? entity.state.replace(/\s{2,}/g,"") : "undefined"}'
119 | #
120 | # The above text_template uses jQuery syntax to search and replace any instance of 2 consecutive (or more) spaces in a string of text.
121 |
--------------------------------------------------------------------------------
/frontend.yaml:
--------------------------------------------------------------------------------
1 | extra_html_url:
2 | - /local/custom_ui/state-card-floorplan.html
3 |
--------------------------------------------------------------------------------
/own-floorplan-svg-file-tutorial.md:
--------------------------------------------------------------------------------
1 | # Creating your own custom floorplan-file from scratch #
2 |
3 | This is a short guide to creating your own floorplan-file, based on your own home.
4 |
5 | Recommended resources:
6 | - [Inkscape](https://inkscape.org/en/) for editing your floorplan
7 | - [the Noun Project](https://thenounproject.com/) for neat looking custom icons
8 |
9 | ## 1. Get started
10 | Download, install and open [Inkscape](https://inkscape.org/en/).
11 |
12 | ## 1.1 Set the size of the work area
13 | I've set the size of my floorplan-file to match the resolution of a full-screen iPad Air (1024x768).
14 | - Click File > Document Properties
15 | - Ensure the top right corner says "px" as display units. There is another one under "Custom size" that should also read "px".
16 | - Set the width and height of Orientation/custom size to 1024 by 768.
17 | - Make sure scale = 1
18 | - Set view box x, y, width and height to: 0, 0, 1024, 768.
19 | - Close the document properties and save the file as floorplan.svg
20 |
21 | 
22 |
23 |
24 | ## 1.2 Draw your building
25 | Start drawing your house/apartment using rectangles. Add two placeholders for lights using the circle tool (or download and insert more classy looking ones from the Noun Project). Also add a text string that we will be using for showing the temperature. These steps have been taken in the image below.
26 |
27 | 
28 |
29 | ## 1.3 Link the items to entities in Home Assistant
30 | To link an object in the floorplan-file to Home Assistant, you first set its object id to the name of the entity in Home Assistant. There are two lights: ```light.hall_1``` and ```light.hall_2``` as well as a temperature sensor ```sensor.forecastio_apparent_temperature```.
31 | - To link an entity, right click one of the circles and select "Object properties". You will see something along "ID: xzyy3212".
32 | - Set the ID to light.hall_1 as shown in the image below. Click "Set".
33 | - Click outside of the circle and click inside it again and make sure Inkscape hasn't added "_" to the end of the ID.
34 | - Do the same for the other light and also with the text.
35 |
36 | 
37 |
38 | ## 1.4 Add the necessary config to your floorplan.yaml-file
39 | Add the following lines to your floorplan.yaml file:
40 |
41 | ```
42 | - name: temp_forecastio
43 | entities:
44 | - sensor.forecastio_apparent_temperature
45 | text_template: '${entity.state ? Math.ceil(entity.state) + "°": "undefined"}'
46 | class_template: 'return "static-temp";'
47 |
48 | - name: Lights
49 | entities:
50 | - light.hall_1
51 | - light.hall_2
52 | states:
53 | - state: 'on'
54 | class: 'light-on'
55 | - state: 'off'
56 | class: 'light-off'
57 | ```
58 |
59 | ## 1.5 Upload your floorplan
60 | Upload and overwrite the floorplan.svg file with your own, customized, file.
61 |
62 | ## 1.6 Restart Home Assistant
63 | You need to do this in order to pick up the changes you made to the floorplan.yaml-file.
64 |
--------------------------------------------------------------------------------
/panel_custom.yaml:
--------------------------------------------------------------------------------
1 | - name: floorplan
2 | sidebar_title: Floorplan
3 | sidebar_icon: mdi:home
4 | url_path: floorplan
5 | config: !include floorplan.yaml
6 |
--------------------------------------------------------------------------------
/panels/floorplan.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
23 |
24 |
25 |
26 |