Virtual Remote UI

I think it would be neat to have a virtual remote UI that you can map switches/scripts to the buttons.

On/Off Play/Pause etc. In a shape that resembles a normal remote.

I am using a Broadlink ir blaster and have the standard buttons mapped to switches, and it works, but the switch ui (lightning bolts) isn’t really very applicable to remote buttons (volume up down doesn’t have a state etc.)

Maybe there is a better control to map these to?

Thanks!!!

1 Like

I’m wanting this too. Currently i use an input select for channels, but it’s not great and have scripts for things like volume which means it’s just an activate button rather than an on off command.

Have toyed with a custom panel, but haven’t got the Dev environment properly setup for that yet.

Is there a solution for virtual remote on HA?

I don’t think there is an official remote feature, but you could use floorplan (Floorplan for Home Assistant) to build a remote of your choice.

Can you show me how? On same exaple?

If you follow the steps to get floorplan going on your home-assistant it should make a lot more sense to you. The installation instructions are very thorough

another option is HADashboard. (appdaemon)

I have problem with this step:

Then, add the following to get Home Assistant to display this new virtual entity using the floorplan custom state card:

homeassistant:
customize:
binary_sensor.floorplan:
custom_ui_state_card: state-card-floorplan
config: !include floorplan.yaml

I get error that file floorplan.yaml is missing?

did you download the files required for floorplan or are you just randomly adding in configuration?

I added those files from repo:

www/custom_ui/floorplan/ha-floorplan.html
www/custom_ui/floorplan/floorplan.svg
www/custom_ui/floorplan/floorplan.css
www/custom_ui/floorplan/lib/jquery-3.2.1.min.js
www/custom_ui/floorplan/lib/moment.min.js
www/custom_ui/floorplan/lib/svg-pan-zoom.min.js

but did you look at the other files?

Yes. But when I add this file I get this error:

Testing configuration at /config
Fatal error while loading config: ‘packages’
Failed config
General Errors:
- ‘packages’

there is nothing in that file that says anything about packages?

perhaps you should take these questions over to the floorplan forum section and read there.

You have a misconfiguration because you are missing something and need to work out how to add these missing pieces.

I followed this instructions and nowhere is saying that I must put in floorplan.yaml?

Usage:
To get started, copy the following files from this repo to your Home Assistant directory:

www/custom_ui/floorplan/ha-floorplan.html
www/custom_ui/floorplan/floorplan.svg
www/custom_ui/floorplan/floorplan.css
www/custom_ui/floorplan/lib/jquery-3.2.1.min.js
www/custom_ui/floorplan/lib/moment.min.js
www/custom_ui/floorplan/lib/svg-pan-zoom.min.js

Although a sample floorplan SVG file is included in this repo, you will want to create your own. See the appendix for more information.

You then have two options for how you want to the floorplan to appear in Home Assistant:

custom state card
custom panel

Of course, you can choose to have it displayed in both places. If you have several floorplans to display (i.e. different levels of a house), that is supported too.

Option 1: Floorplan custom state card
image

To display the floorplan as a custom state card, copy the following file from this repo to your Home Assistant directory:

www/custom_ui/state-card-floorplan.html

To allow the above file to be served by Home Assistant, add it to the frontend section of your Home Assistant configuration:

frontend:
extra_html_url:
- /local/custom_ui/state-card-floorplan.html

Since Home Assistant requires a single entity to be used as the target for a state card, create a virtual entity to represent the overall floorplan. You can choose any type of entity for this, such as the MQTT binary sensor. Add the following to your Home Assistant configuration:

binary_sensor:

  • platform: mqtt
    state_topic: dummy/floorplan/sensor
    name: Floorplan

Then, add the following to get Home Assistant to display this new virtual entity using the floorplan custom state card:

homeassistant:
customize:
binary_sensor.floorplan:
custom_ui_state_card: state-card-floorplan
config: !include floorplan.yaml

No error only if I remove this:

config: !include floorplan.yaml

You need to learn how to use <> code formatting and quotes.

You are expected to follow his configuration.yaml and understand what you are doing and what to add. It is an assumption that you can work it out. There is also a LOT of information in the floorplan thread over in the Floorplan subforum, which I suggested you move this conversation to. (@Tinkerer can we get this split since it has nothing to do with the OP?) .

Here is the answer since you appear to not understand the layout of how floorplan works:

YOU NEED A FLOORPLAN.YAML (OR NAMED WHATEVER YOU LIKE) TO USE IT.

That file is the definition file for literally everything on the floorplan…

FROM THE GITHUB PAGE:

Whether your floorplan is being displayed as a custom state card or as a custom panel, the same configuration file floorplan.yaml is used. This is where you tell Home Assistant which entities you want to display on your floorplan.

The example floorplan.yaml included in this repo shows how to add various entities to your floorplan and style their appearance based on their states.

Thanks for info.

I figured out:

It looks like that file floorplan.yamal must be under /config/ folder.

Because i add costumize in different folder:

customize: !include_dir_merge_named customize/

I get error:

Testing configuration at /config
Fatal error while loading config: 'packages’
Failed config
General Errors:
- ‘packages’

Because of error I changed configuration from this:

binary_sensor.floorplan:
  custom_ui_state_card: state-card-floorplan
  config: !include floorplan.yaml

to this:

binary_sensor.floorplan:
  custom_ui_state_card: state-card-floorplan
  config: !include /config/floorplan.yaml

Just in case if someone have the same error :slight_smile:

See here, how I did it :wink: