Floorplan for Remote Control

Third party integrations Floorplan
1

Dear all,

I try to use the fantastic floorplan function for a representation of an remote control, for control tv ecc…
Here is the screenshot:

Cattura
Cattura914×788 28.6 KB

I have some question for solve a couple of doubts.

  • Can I rename the floorplan in remote, I mean all the files? In this way I can have the house floorplan and the remote in the same HA system?

  • Can I unlink the floorplan from the css file to avoid the red error you can see in the image?

Thanks in advice for your advice.

2

Yep I did exactly the same for my remotes :), they are in a separate remotes floorplan with their own svgs and css files :slight_smile: You do have to rename some files and I changed the floorplan to remote in some of the files as well since they reference floorplan.

3

Thanks keithh666,
If I don’t want to use a css files, because it doe metter for a Simple remore, what I have to change?
You can see at the top of the remore the Error ladina stylesheet in red, haw I can avoid this error message?
For the reame problem I try to rename a svg file and after that search the other file who need modification.

4

Ok, actually it does matter about the css file as you need some feedback when a button is clicked.

So here is what I have done…

The directory structure is the same as for floorplan… my remote is called sstvremote (for Samsung TV Remote)

Under config dir I have
sstvremoteplan.yaml -
at the top of the file I’ve given it a name: SSTVRemote
and told it where to find the image (svg file) and stylesheet (css file)
name: SSTVRemote
image: /local/custom_ui/sstvremote/sstvremote.svg
stylesheet: /local/custom_ui/sstvremote/sstvremote.css

Under www\custom_ui I have
state-card-sstvremote.html
find and replace floorplan with sstvremote - mine is only 22 lines long as it’s a very old file.

Under www\custom_ui\sstvremote I have
ha-sstvremote.html
find and replace floorplan with sstvremote
sstvremote.svg
sstvremote.css
which contains …

vg, svg * {
  vector-effect: non-scaling-stroke !important;
  pointer-events: all !important;
}

.entity:hover {
  stroke: #03A9F4 !important;
  stroke-width: 1px !important;
  stroke-opacity: 1 !important;
}


.pressbutton {
  stroke: #8F0000 !important;
  stroke-width: 1px !important;
  stroke-opacity: 1 !important;
}

.releasebutton {
  stroke: #000000 !important;
  stroke-width: 1px !important;
  stroke-opacity: 0.2 !important;
}

That’s it really :slight_smile:

3 Likes
5

Yeeh, thank you so much keithh666!! Now it works perfectly!!

6

If you have many more keys you could use this How-To I wrote about how I did that :wink:

1 Like