For embedding SVGs, this site has a nice collection of free icons:
Do a search on some of these to see icons that might be relevant to HA:
- light
- switch
- fan
Any one has any ideas how to get the color changes working?
@sendorm Can you open the Chrome Developer tools (F12) and then reload the page (F5)? Does the Network tab show any errors? Just want to make sure your CSS file is being sent over to the browser, as a first sanity check.
1 Like
And I don’t mind that. It’s fun tweaking code into something you (and hopefully others) can use. And I’m grateful you’re taking the time! :)I’ve never thought of aspect ratio, but now I’ve done some changes so they’re all the same.
I suspect the issue does indeed with scaling of my different files but I haven’t been able to wrap my head around it yet. I’ll do some more testing and revert with any findings.
1 Like
I reverted to the base structure and put a 64x64 rect in my Floorplan-file. Any thoughts on where to look?
This is yielded by inspect on the placeholder:
<rect style="opacity:1;fill:#ffff00;fill-opacity:1;stroke:none;stroke-width:0.63745522;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" id="input_select.floorplan_buttons_ceiling" width="64" height="64" x="112.94154" y="148.93913" inkscape:label="#rect5952"></rect>
And this is the same result from one of the weather-icons and it looks as if it’s scaling?
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="40.10055160522461" height="40.10060119628906" viewbox="0 0 64 64" id="image.input_boolean.floorplan_toggle_ceiling_button" preserveAspectRatio="xMinYMin meet" x="23.978382110595703" y="159.48666381835938">
@ggravlingen That nasty viewbox="0 0 64 64" is hiding in the weather SVG.
Change it to viewBox="0 0 64 64"
Juts capitalize the ‘B’.
Yaaaay! 
That + fixing a n00b-mistake on my end got me back on track. Thanks!
1 Like
This seems to be the official source of amCharts weather icons:
Maybe it’s a better route to take to hide a group of elements (a bar and icons) in the main svg and then have a toggle button to unhide them? The rationale is that I guess I also need to load the id’s of the icons as a part of the main svg?
I LOVE this idea. LOVE IT. Once you have it worked out, please keep sharing your progress. I’m going to steal those ideas.
1 Like
Certaintly, it was you who set me off in this direction!
This is we’re I’m currently at:
I click the sun on the third blue button and set the boolean to true and the three suns appear. This is all good! Next steps to do that I’m trying to wrap my head around:
- I won’t have to click the boolean. Instead the three suns just appear as I click the button.
- The three suns are mapped to scripts/scenes.
What I’ve done so far:
Added this to ha-floorplan.html (need to get rid of the hard coded value). input_boolean.floorplan_toggle_ceiling_button_target is the target area where the suns appear.
if (entityConfig.group.image_template_dynamic) {
imageUrl = this.assemble(entityConfig.group.image_template_dynamic, entityState, entities);
entityId = "input_boolean.floorplan_toggle_ceiling_button_target";
if (entityConfig.imageUrl !== imageUrl) {
entityConfig.imageUrl = imageUrl;
this.loadImage(imageUrl, entityId, (embeddedSvg) => {});
}
}
Added this to floorplan.yaml
- name: Buttons Ceiling
entities:
- input_boolean.floorplan_toggle_ceiling_button
image_template_dynamic: '
var imageName = "";
switch (entity.state) {
case "on":
imageName = "Ceiling";
break;
case "off":
imageName = "Transparent";
break;
}
return "/local/custom_ui/floorplan/buttonbars/" + imageName + ".svg";
'
1 Like
You need to get rid of the boolean idea and show the 3 icons on hover instead based on the CSS. (I think. )
1 Like
Not quite following you here
Update: this (ugly) code puts the button bars where they’re supposed to be and also disables the right one
- name: Buttons Ceiling
entities:
- input_boolean.floorplan_toggle_ceiling_button
image_template_dynamic: '
var imageName = "";
var imageTarget = "ceiling";
switch (entity.state) {
case "on":
imageName = "Ceiling";
break;
case "off":
imageName = "Transparent";
break;
}
return "/local/custom_ui/floorplan/buttonbars/" + imageName + ".svg";
'
- name: Buttons Sonos
entities:
- input_boolean.floorplan_toggle_sonos_button
image_template_dynamic: '
var imageName = "";
var imageTarget = "sonos";
switch (entity.state) {
case "on":
imageName = "Sonos";
break;
case "off":
imageName = "Transparent";
break;
}
return "/local/custom_ui/floorplan/buttonbars/" + imageName + ".svg";
'
if (entityConfig.group.image_template_dynamic) {
imageUrl = this.assemble(entityConfig.group.image_template_dynamic, entityState, entities);
//console.log(entityConfig.group.image_template_dynamic); //gives the default message
if(entityConfig.group.image_template_dynamic.indexOf("Sonos") !== -1){
entityId = "input_boolean.floorplan_toggle_sonos_button_target";
}else {
entityId = "input_boolean.floorplan_toggle_ceiling_button_target";
}
if (entityConfig.imageUrl !== imageUrl) {
entityConfig.imageUrl = imageUrl;
this.loadImage(imageUrl, entityId, (embeddedSvg) => {});
}
}
Since your icons aren’t dynamic, You should be able to use CSS to just hide them and make them re-appear on hover.
I think I am going to have to redo my entire button set up now… thanks!
1 Like
Ah, is that a technique you’re already employing in your current code base?
@ggravlingen Thanks for writing up the tutorial. It’s now on the GitHub repo, and available via the Resources section (towards the bottom of the readme file).
1 Like
HA podcast # 4 is available. Carlo (@CCOSTAN) talks about his adventures in using the floorplan…
2 Likes
I just got this set up and I am loving it. There is one issue I am having and was hoping someone would be able to assist. When I press on the icon to turn a light on, it lights up for half a second and then turns back off again.
I am having this issue with all 3 of my Hue bulbs. I have a GE switch that works fine. It also works fine when I use my PC. I have confirmed I am having this issue with my iphone (both in the HA app and through the browser) and with my fire tablet (both through wallpanel and browser). If I press longer, the toggle works, but then the copy/paste popup appears. I was wondering if there was any way to shorten the timing for how long it needs to be pressed?
1 Like