Does anyone know how to fill all the hassio screen with floorplan? Do i have to use CSS?
i used padding code…i used svg{ width :… } in css, i used page_width: calc(100% / 1) in the card i am working 2 days on this.
this doesnt work
PLEASE help
See my post four up. Are you using panel: true
thank you …it works now. i dont understand . I started with this code with the view to make the full screen work but it didnt, i used this code from the day one. Maybe the place matters over the "card: [ ] " but you have to write it in the raw configurator.
Where do you place panel: true? On my phone everything works but on my pc the plan is very small.
Never mind. I found it.
In lovelace.yaml directly under
badges[]
panel: true
Hi
I’m hopeing for some help, i’m trying to create a flagpole where the flag turns with the wind direction.
i’m at a loss with the CSS, the following works if i replace the var() with 45deg
any good idear?
‘’’
#flag {
transform-origin: 10px 1400px;
height: 100px; width: 100px;
transform: rotate(var(sensor.wind_angle)deg);
}
‘’’
I am not sure you can have state information in the CSS file. Best I think you can do is have multiple classes (as many as you want) for the various angles and then set the class in ui-lovelace.yaml
For example:
rules:
- class_template: ' var temp = parseFloat(entity.state.replace("°", "")); if (temp < 10) return "temp-low"; else if (temp < 30) return "temp-medium"; else return "temp-high"; '
entities:
- sensor.bom_archerfield_air_temp_c
Hi OzGav
Thanks, it gave me a good idea. The device also have a North, NorthWest and so forth sensor. but now my dame lovelace raw editor is giving me a headach
my css is now something like:
.NE {
transform-origin: 10px 1400px;
height: 100px; width: 100px;
transform: rotate(45deg);
}
in my Lovelace Raw editor i have put in this:
- entities:
- sensor.netatmo_vind_angle
states:
- class: NE
state: 'NE'
- class: N
state: 'N'
But every time i save and close it removes the ’ ’ from the state
Not sure as I edit the YAML manually. Maybe trying changing the name to see if it is a bug with the same name for class and state? Also try using lower case for the class names (I don’t think it should matter but who knows what the raw editor is doing - I used it once but it kept removing my comments)
Is there a way to show the current source or media type from your tv (samsung qled). For now I can see if the tv is on in my floorplan. But I want to see at least the selected source
In my mini mediaplayer card I can see the selected source. So the tv must is able to show this information
Have a look at the attributes. If it is there then you should be able to do something with it.
The attributes show media-title and media-source. But how do you use this to display
The entity name is media_player.samsung_tv_remote
The attributes are:
source_list:
media_title:
source:
friendly_name: Samsung TV Remote
I do two things when the projector is on. I have a flickering triangle shape to simulate the projector and then in the middle of that I have a round icon for the source app.
ui-lovelace.yaml:
- name: Rumpus App Icon
entities:
- sensor.rumpus_app_name
image_template: ' var imageName = ""; switch (entity.state) { case "Hulu": imageName = "icon-hulu"; break; case "Netflix": imageName = "icon-netflix"; break; case "Kodi": imageName = "icon-kodi"; break; case "ABC iview": imageName = "icon-abciview"; break; case "YouTube": imageName = "icon-youtube"; break; case "The CW Network": imageName = "icon-thecw"; break; case "Disney+": imageName = "icon-disney"; break; case "off": imageName = "off"; break; default: imageName = "icon-default"; break; } return "/local/floorplan/images/" + imageName + ".svg?v=2"; '
Configuration.yaml: (I have a couple of sources so if Kodi is playing something show that icon otherwise grab the app name from the Chromecast)
- platform: template
sensors:
rumpus_app_name:
value_template: >
{% if is_state('media_player.kodi', 'playing') %}
kodi
{% elif is_state('media_player.rumpus_tv', 'playing') %}
{{ (state_attr("media_player.rumpus_tv", "app_name")) }}
{% else %}
off
{% endif %}
You could also pull out the title and display that somewhere. You just have to work out what you want to do.
1 Like
Thanks. i’ll give it a try
I get an error
ERROR URIError: /local/floorplan/images/tv/icon-off.png: Error fetching resources at /local/floorplan/lib/floorplan.js?v=1.1.8:1813:20
The images are in this folder so what am I missing
I am not sure. My images are in .../www/floorplan/images Do you want to try moving your icons up one level and try that? Also just want to make sure you know /local = <config directory>/www
Ah also I note you have specified a PNG file. I think they have to be SVG. I tried a bunch of online converters before I found one that worked properly. I think it was this one https://onlineconvertfree.com/convert-format/png-to-svg/
I use png files to give the state of all the person in my family. that works I’ll move the files to see what happens. I will also try making svg files
as svg in the images folder works. thanks
Hi,
if anyone wants to go back to using the custom panel they can try my code:
It’s only custom panel and works fine with 0.116
1 Like
This thread has been relatively quiet, and I got no joy on an issue I posted about it on github. So I assume the issue I’m having with my floorplan svg not showing up on Android chrome after hitting browser refresh must have nothing to do with HA. So this is OT, but I figured I might still ask here in case anyone has ideas on how to fix it.
I was using Petar’s lovelace custom card floorplan for several months without issues. It seems after a recent change to either HA or mobile chrome browser, the floorplan svg disappears after hitting refresh. This is with the latest release of Chrome mobile on my samsung s8. It all works perfectly on my PC (also chrome browser).
I noticed if I go into HA and ‘touch’ the svg file, the mobile browser will indicate that there is an updated version, and ask if I would like to refresh. Refreshing the first time, the svg shows up. However If I hit refresh a second time, the svg will disappear until I go into HA and touch the svg again.
I have tried playing with the versions in the yaml no avail (changing all of the “1.0.14” to “1.0.15” for example). Also the svg won’t show up even once after I clear the browser cache.
It seems to me that the problem is caused by a conflict with js on Chrome mobile. Is there a particular setting in Chrome that might cause this behavior? … or could there be something in my HA config that makes mobile Chrome act this way?
Any help is much appreciated!
I might be seeing the same thing but on my PC. Occasionally my floorplan is blank and refreshing or reloading it does not help. I have three views that use floorplan and I find that if I go and refresh the ones that ARE working then that fixes the ones that aren’t working!