Does anyone know how to make the card cover all the panel?
I would start with one block and add one line at a time until you find the one that is casing the problem…
1 Like
Thanks. It works now
Does anyone know how to fill all the hassio screen with floorplan? Do i have to use CSS?
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/