Awesome
<h1 align="center"> <img src="https://user-images.githubusercontent.com/3549445/293683009-196cd771-7d29-4975-a741-0a5c8a76e095.png"> <br> <br> ha-floorplan </h1> <h4 align="center">Floorplan for Home Assistant - your imagination (almost) defines the limits </h4> <p align="center"> <a href="https://github.com/ExperienceLovelace/ha-floorplan/commits/master" target="_blank"> <img src="https://github.com/ExperienceLovelace/ha-floorplan/workflows/Last%20commit/badge.svg?style=flat-square&logo=github&logoColor=white" alt="GitHub Last commit"> </a> <a href="https://github.com/ExperienceLovelace/ha-floorplan/issues" target="_blank"> <img src="https://img.shields.io/github/issues-raw/ExperienceLovelace/ha-floorplan.svg?style=flat-square&logo=github&logoColor=white" alt="GitHub Issues"> </a> <a href="https://github.com/ExperienceLovelace/ha-floorplan/pulls" target="_blank"> <img src="https://img.shields.io/github/issues-pr-raw/ExperienceLovelace/ha-floorplan.svg?style=flat-square&logo=github&logoColor=white" alt="GitHub Pull Requests"> </a> <a href="https://github.com/ExperienceLovelace/ha-floorplan/releases" target="_blank"> <img src="https://img.shields.io/github/stars/ExperienceLovelace/ha-floorplan?style=flat-square" alt="GitHub Stars"> </a> <a href="https://github.com/ExperienceLovelace/ha-floorplan/releases" target="_blank"> <img src="https://img.shields.io/github/v/release/ExperienceLovelace/ha-floorplan.svg?style=flat-square&logo=github&logoColor=white" alt="Current version"> </a> <a href="https://experiencelovelace.github.io/ha-floorplan/docs/quick-start/#hacs" target="_blank"> <img src="https://img.shields.io/badge/HACS-Default-orange.svg?style=flat-square&logoColor=white" alt="HACS Default repository - Go to Quick Start in Docs"> </a> </p> <p align="center"> • <a href="https://experiencelovelace.github.io/ha-floorplan/" target="_blank">Floorplan Documentation</a> • <a href="https://github.com/ExperienceLovelace/ha-floorplan/discussions" target="_blank">Discussion (Ask for help, feedback & support)</a> • <a href="https://community.home-assistant.io/t/floorplan-now-available-as-a-lovelace-card/115489" target="_blank">Home Assistant Community</a> • </p> <hr> <a title="Click to see the live floorplan example" href="https://experiencelovelace.github.io/ha-floorplan/docs/example-floorplanner-home/"> <img style="border: 1px solid #26c7fb;border-radius: 3px;max-width: 350px;width: 100%;box-sizing: border-box;margin:0 auto;display:block;text-align:center;" src="https://user-images.githubusercontent.com/3549445/293683054-a110a5fe-72d3-4004-970b-1e07159e5577.png" alt="SVG Preview"> </a>Draw it and bring it to life
This tool expands way beyond creating just floorplans. If you can draw it in an SVG file, you can bring it to life with ha-floorplan. Explore endless possibilities and customize your home automation experience to your liking.
Getting started
We'll suggest you to visit our Installation guide.
If you're unsure on where to start in the creation process, we'll suggest you to check our Live Examples.
Find more documentation on how to use each action and functions, by visiting the Usage page.
Features
- Make Floorplan(s) with SVG-files
- Trigger states, visualize states and more
- Call services and more, for even more options
- Use as Lovelace-card, or as a panel
- It's hard to mention everything in a list like this, so give it a try 🥳
Ressource template for Home Assistant
resources:
- url: /hacsfiles/ha-floorplan/floorplan.js
type: module
<hr>
<br>
<table>
<tr>
<td>
<br>
Would you like to play around with the code behind HA Floorplan? There's many ways to build HA Floorplan. The question is, what you're going to do?
Just execute npm install
to install the dependencies. Use npm run build
for the production-env. Are you going to test something, use npm run build:dev
instead. For other options, check package.json.