Please read the docs before asking. Floorplan for Home Assistant
I’ve used that documentation to create my floorplan and have it working. I’ve watched many of his videos. I get how to toggle an overlay to darken the room or to toggle a light bulb etc. My question was really more for those whom used floorplanner in ha-floorplan as to how did you get the rooms to look like the lights are on in the room. My image looks a bit dark and not well lit. I was just hoping for a tip to lead me in the right direction.
I guess I may not be able to give you a direct answer as I didn’t use floorplanner, I used SweetHome3D but the usual approach is you generate two images, a darker one for lights off and a bright one for lights on.
You then crop out each room from your lights on image and overlay that on the dark image and then control the visibility of that with ha-floorplan.
If you are after specific floorplanner instructions I can only suggest starting with section 5d here http://cdn.floorplanner.com/static/brochures/Floorplanner+editor+manual+version+180219.pdf
I am particularly interested in people icon for occupancy. Would you mind sharing related yaml/svg?
After seeing @OzGav weather card in floorplan, I used floorplan to create this custom touchscreen thermostat.
as of now, I can use it to adjust the temp, set fan mode, heat, cool, off modes.
I’m using a basic Honeywell wifi thermostat. I’m wondering if I can tape into the schedule?
2 Likes
Another year another floorplan! This one is inspired by the Homewizard Energy Display
I want to try and maximise my solar energy use during the day without going over. I have some things automated like the car charging and pool heating. For the rest I thought an at a glance traffic light system might be good.
So the main gauges are using the technique described here
The top right corner is showing total power cost for today and so far this month. The icons across the bottom allow access to the power control for that device. The green/red shows whether sufficient excess is available to use that device.
Hope this spurs some more floorplan sharing action!
3 Likes
Here’s mine. Created used Floorplanner and Inkscape with overlays for light. The shading follows outside illuminance.
I am not happy with the sharp lines in rooms with multiple lights, but plan to solve by overlapping and blurring.
2 Likes
Video embedded in the SVG file for ha-floorplan.
This may be something that others have done and I just couldn’t find it.
I was creating a separate pop-up (browser-mod) floorplan for my car and thankfully I had a 3D model that I could customize to look more like by car, and create a render of for the backdrop. That was all pretty easy with ha-floorplan.
However I thought it would be cool to have an animated background. I was pretty sure I could find a way to embed a video element in an SVG file.
Here is the result:
This could also be used to put a video on a screen in your floorplan, or animate some other part of the main floorplan as it can be transformed and positioned like any other element. Obviously video size and quality will impact load times - my video here is instantaneous and is about 6MB.
The biggest challenge was to get the elements inside the SVG file formatted correctly to work in floorplan and to realize that Inkscape would rewrite them every time I saved even when I did. In particular Inkscape would rewrite the namespace explicitly for each element etc… and that didn’t work in floorplan for whatever reason.
Anyway, if you embed something similar to this code in your SVG, after saving with Inkscape, voila!
<g id="g7">
<foreignObject
x="0"
y="0"
width="100%"
height="100%">
<div xmlns="http://www.w3.org/1999/xhtml" width="100%" height="100%">
<video
height="auto"
width="100%"
autoplay=""
loop=""
muted=""
playsinline=""
style="position: fixed; left: 0px; top: 0px;">
<source
src="https://yourhomeassistanturl/local/floorplan/yourvideo.mp4"
type="video/mp4" />
</video>
</div>
</foreignObject>
</g>
4 Likes
Hi!
I have a question and a request if someone can help me!
Let me first clarify that I have no programming knowledge and I understand yaml somewhat! I would like the data from the google calendar add-on as shown in the image:
Inserted into the SVG text field, which is made on the floor plan:
Previously, I had done it with the help of add-on cards, but the display on all devices (PC, tablet, phone) gave me problems.
Now the view works satisfactorily for me on all devices, after I changed the display to just the SVG file (I don’t use any other cards except the floor plan card)!
Since I don’t have programming skills, I don’t know how to solve the issue of giving me selected (not only my events! Also data such as the next F1 race, Moto GP, waste collection, national holidays, etc.) data from the google calendar add-on!
Link to my floor plan view and zip of both card views : My floor plan example: · ExperienceLovelace/ha-floorplan · Discussion #411 · GitHub
1 Like
Hi OzGav!
Thanks for the reply. As you know, I have no knowledge of programming and for this reason I do not know what the code is supposed to mean.
Currently, I managed to find the code on the Internet:
Start at: {{ state_attr("calendar.prazniki_v_sloveniji","start_time")}} {{ state_attr("calendar.prazniki_v_sloveniji","message")}}
Start at: {{ state_attr("calendar.krscanski_prazniki","start_time")}} {{ state_attr("calendar.krscanski_prazniki","message")}}
Start at: {{ state_attr("calendar.pravoslavni_prazniki","start_time")}} {{ state_attr("calendar.pravoslavni_prazniki","message")}}
Start at: {{ state_attr("calendar.zodiac","start_time")}} {{ state_attr("calendar.zodiac","message")}}
Start at: {{ state_attr("calendar.f1","start_time")}} {{ state_attr("calendar.f1","message")}}
Start at: {{ state_attr("calendar.moto_gp","start_time")}} {{ state_attr("calendar.moto_gp","message")}}
Start at: {{ state_attr("calendar.odvoz_odpadkov","start_time")}} {{ state_attr("calendar.odvoz_odpadkov","message")}}
Start at: {{ state_attr("calendar.dom","start_time")}} {{ state_attr("calendar.dom","message")}}
Start at: {{ state_attr("calendar.robert","start_time")}} {{ state_attr("calendar.robert","message")}}
First of all the date is not in EU format and it only shows me 1 next event per calendar entity. Besides, I don’t know how to make a sensor out of it! If necessary?
Do you have any idea and if I can please write me back with an example of the whole code.
Please post the attributes for calendar.f1
Did you mean this:
message: F1: Prvi prosti trening (VN Savdske Arabije)
all_day: false
start_time: 2024-03-07 14:30:00
end_time: 2024-03-07 15:30:00
location: Jeddah
description:
offset_reached: false
friendly_name: F1
I don’t know how you got that calendar list before. It will be difficult to come up with a way to have a sorted list of events from multiple calendars.
If however, you would be happy with a line per calendar which would show the next event here is a template example for the F1 calendar
{{ as_timestamp(strptime(state_attr("calendar.f1","start_time"),"%Y-%m-%d %H:%M:%S")) | timestamp_custom("%b %d") }} {{ state_attr("calendar.f1","message") }}
This would allow you to add to your floorplan this:
Mar 07 F1 Previ prosti trening (VN Savdske Arabije)
Looks like you used the hass-addon-calendar? If so then you could use something like this. Using their example on their readme
{{ as_timestamp(state_attr("sensor.my-calendar", "data")[0].startDateISO) | timestamp_custom("%b %d") }} {{ state_attr("sensor.my-calendar", "data")[0].summary }}
{{ as_timestamp(strptime(state_attr(“calendar.f1”,“start_time”),“%Y-%m-%d %H:%M:%S”)) | timestamp_custom(“%d %B %Y %H:%M”) }} {{ state_attr(“calendar.f1”,“message”) }}
This retur me:
07 March 2024 14:30 F1: Prvi prosti trening (VN Savdske Arabije)
We are already on a better path. I corrected a little what you wrote to make it look the way I wanted.
I don’t have a calendar/entity as a sensor.**** but a calendar.*****
This return me:
sorry cut and paste error Actually I see you actually wanted something different from your original dashboard. All good.
If you just have all different calendars then use what you know have and do something similar for all calendars. I was just guessing what you used for your original dashboard which had the calendar down the left.
Yes, at the beginning, when you advised me to do everything in SVG format for display on all devices, I set about converting the SVG file and since you helped me with the display of the weather, I moved it to the upper left so that I was not disturbed by the calendar. Now it is back as it was before with the floor plan card and add-on cards with small changes. It’s true that I haven’t updated the pictures on My floor plan example: · ExperienceLovelace/ha-floorplan · Discussion #411 · GitHub because I’m not that far with the new implementation with just an SVG file.
What could be wrong in the code:
template:
- trigger:
- platform: calendar
event: start
entity_id: calendar.a
- platform: calendar
event: start
entity_id: calendar.b
- platform: calendar
event: end
entity_id: calendar.a
- platform: calendar
event: end
entity_id: calendar.b
action:
- service: calendar.get_events
data:
duration:
hours: 72
target:
entity_id:
- calendar.a
- calendar.b
response_variable: calendars
- variables:
e: |
{% set ns = namespace(cal_events=[]) %}
{%- for key, value in calendars.items() %}
{%- for event in value.events %}
{%- set ns.cal_events = ns.cal_events + [event] %}
{%- endfor %}
{%- endfor %}
{{ ns.cal_events | sort(attribute='start') | list }}
sensor:
- name: MultiCal 72 hour agenda
state: "{{ e | count }}"
attributes:
events: "{{e}}"
entity_id: |
{{['calendar.a','calendar.b']}}
In HA devtools it returns me: ‘calendars’ is undefined?