Hi folks,
this is my first how-to I write, maybe it helps somebody in saving efforts a bit…
At first the story.
Recently, I thought by myself that it would be nice to have also my IR controlled devices controllable by HA. I thought I could by pressing one button only setup complete environment, like switching on multiple devices, select right input channels, setting up default views, bring volume to a default level, but beside IR and home cinema eqipment probably also set the lighting in the room to a decent level, activate a scene or whatever.
I bought myself a Broadlink RM4 Mini, didn´t read about the problems having special characters in wifi password (which obviously is the same for the whole company´s product pallete). So as I definitely have special characters in my wifi psk (on purpose for sure), I of course didn´t get it working and had to send it back… 
What century they live in creating such a security gap?
I then thought by myself: hey, the cheap one didn´t work out, so let´s take the quality one. So I bought a Logitech Harmony Hub and this works like a charm. Great product, thanks Logitech!
Also the integration in HA is super easy, just click on the integrations, add Logitech Harmony and the rest is self explanationary.
But then, almost nothing shows up, only one activity I setup for testing purposes in the hub… I though “wtf” first but then read about how to do things in the manual here: Logitech Harmony Hub - Home Assistant
Pretty much everything you need to know you can find on this page already. The integration only brings the activities automatically to HA, but all I needed for my purposes, I figured out, was the SERVICE REMOTE.SEND_COMMAND. Also immediately I opened the conf file of the Harmony Hub to see if all remotes I added to the hub, also HA fetched and now knows about, and also to see if really all keys, I need, are in there. I just kept it open in NotePad++ as a reference…
When thinking a little bit how to best integrate it into HA, some other thoughts passed by:
- the old physical remote, we mostly use for the DVR sattelite receiver, is about to die. Many of the keys (important ones like Play or Pause or even Power) don´t react anymore, we have to live with workarounds since months.
- all of us are used to this remote
- I want to bring my wife using and embracing HA
So I thought it would be best to have this remote in HA - but how can I do this? 
floorplan!
I have set up floorplan some months ago to be able to tap on a room in a 3d picture of my house, to switch on the lights. Intended to use this later any time for a wall panel but never made it there up to now. Still looking nice 
But by this experience, I was aware of what floorplan can do. I thought why not set up another floorplan panel dashboard that doesn´t look like a house but like my old remote? 
First I searched and found a picture of my old remote in Internet. You can easily search for any number on the back of the remote together with the word “remote” and you´ll find probably, I did find mine this way. Here is the picture I found:
I just had to cut it to what I really wanted to see in HA. I thought if it would be vertically without any additional canvas, it would be best fitting to my smartphone display, this turned out to be working quite well afterwards.
I started by creating another dashboard in panel mode:
- badges: []
cards:
- elements:
image: /local/floorplan/IR-Remote_DVR.png
type: picture-elements
icon: 'mdi:remote'
panel: true
path: remote
title: Remote
Of course, I first uploaded the picture to this path mentioned, then already I saw the remote pucture in HA as a seperate dashboard.
Next, I tried with one first key just to see if it works out like desired.
- badges: []
cards:
- elements:
- entity: remote.harmony_hub
image: /local/floorplan/transparent_square.png
style:
border: 5px solid red
border-radius: 20%
height: 3.0%
left: 27.0%
top: 4.0%
width: 23.0%
tap_action:
action: call-service
service: remote.send_command
service_data:
command: PowerToggle
device: 70760740
entity_id: remote.harmony_hub
type: image
image: /local/floorplan/IR-Remote_DVR.png
type: picture-elements
icon: 'mdi:remote'
panel: true
path: remote
title: Remote
So it is really that easy, placing an invisible (transparent) image as entity (type image) over the key and define tap action to call the service “remote.send_command” does the trick!
Short explanation:
image: path to the transparent png file. It doesn´t matter by the way, how big it is - the settings below will resize it. So better pick or create a very small one in respect to the loading times.
border: 5px solid red, I added to see the where it is while aligninig it. We will remove this in the end when we know it works.
border-radius: just to round the edges of the transparent overlay image. You could also do a round or oval key by setting 50 or more percent here or straight edges by setting it to 0%
left and top: position of the (transparent) key. Don´t mix it up, this means the middle, not any corner of the key! You could use fixed pixel values here but think about responsiveness (showing on different sized of smartphone displays!), therefor I set it up with percentage of the image.
height and width: size horizontally and vertically of the key. Same here, you could make it fixed but for responsiveness reasons, also here I did it in percent. This makes not only the image fitting to the screen but also fitting the buttons to the rezizing image, it all keeps aligned well this way. Try it out!
command: find it in the harmony hub conf file (still open in NotePad++)
device: same, find it in the harmony hub conf file (still open in NotePad++)
I gave it a try, and… 
my Receiver switched on and off when pressing the key!
But there is always a but: it was a bit tricky to find the right position and size only for this one key already and I was summing up to 59 keys on this remote! So I definitely didn´t want to frickle all of them the same way! It would have taken days of work!
I thought about how to somehow automatize and manage that and came across the idea why not use Excel to do all the maths and export somehow from there?
Done immediately, started a spreadsheet to bring all together:
Device, Key, top, left, width, height.
These are the resulting fields of need. But how getting them calculated?
I added total image size and height of the picture of the remote and columns for the y and y starting and ending positions of each key. Using any imaging software gave me the coordinates, I used Paint.Net for that as it shows them already in the status line by only placing the cursor cross above the position even if the application is not in focus, so I even didn´t have to switch the windows but only typing the numbers and moving the mouse when having Excel on one display while Paint.Net on the second one. Many figures I just had to copy around as many keys of the same row start and end the same x position and many keys of the same column start and end the same y position. Just some special ones, I additionally had to find other positions.
Then doing formulas for figuring out the middle of the key:
substract left from right of key, devide by 2 and add again to left 
middle of key x. Substract top from bottom of key, divide by 2 and add to top again middle of the key y. But this is still fixed pixel position. So using this now to calculate ho much middle of x is in percentage to the whole x range of the picture and the result then goes to the “left” value for output. Same for y, result goes to “top”.
Somehow all the same procedure for the width and height in percentage. I added rounding function as I didn´t want to mess with 20 digits behind a comma, which can be a result of such calculations.
I can upload pictures only here, so here is a picture of the excel and the formulas for the second row (first one was manually for experimenting and double checking reasons still). Colored light red cells is the output you need (Device and Key you have to fill manually), colored light green ones are the coordinate input fields of the keys to start calculations. All other fields, you don´t have to touch.
Column input/formula
Device manual input from Harmony Hub conf file
Key manual input from Harmony Hub conf file
top =ROUND(N3*100/H3;1)
left =ROUND(M3*100/G3;1)
width =ROUND(O3*100/G3;1)
height =ROUND(P3*100/H3;1)
Xtotal manual input, total X dimension of the picture of the remote
Ytotal manual input, total Y dimension of the picture of the remote
Xleftupper manual input, left border´s x value of the key
Yleftupper manual input, upper border´s y value of the key
Xrightlower manual input, right border´s x value of the key
Yrightlower manual input, lower border´s y value of the key
Xmiddle =ROUND((K3-I3)/2+I3;0)
Ymiddle =ROUND((L3-J3)/2+J3;0)
width =K3-I3
height =L3-J3
Once, the formulas fit, I just had to copy them to all lines. That´s Excel! 
Now how to get the code… I thought by myself: hey, here I have code, which is text, where-in I have to exchange variables. There I have all the data in Excel. Guess what? Word Mailings does the trick!
I put the to be multiplied and adapted section of the code into a Word file:
- entity: remote.harmony_hub image: /local/floorplan/transparent_square.png style: border: 5px solid red border-radius: 20% height: 3.0% left: 27.0% top: 4.0% width: 23.0% tap_action: action: call-service service: remote.send_command service_data: command: PowerToggle device: 70760740 entity_id: remote.harmony_hub type: image
Then I converted the file to be a mailing, selected the existing Excel file as a data source and replaced the fixed values in the given example by the 6 red marked fields I have in Excel.
Now comes the painful finding I had: When activating the preview results, I saw the values… But: it ignored completely the rounding function I added in Excel, it still was showing up multiple digits behind the comma, anyway if in Excel this was shown or not! 
You know how you feel when you thought in advance something to happen and prepared for it (ROUND in Excel) and then it turns out that this didn´t help…
By a short googling I found that I can make Word doing the rounding within the field function… 
What a hack done my Microsoft!
Press Alt+F9 to switch to some kind of a formula editing view. Then you see, that a field, e.g. height, is placed there as “{ MERGEFIELD height }”. I found you have to add a “\# 0” behind the field name to make it rounding to full digits. This worked.
Clicked “Finish & Merge” → “Edit Individual Documents…”, select all records of data, and it opens all of my 59 keys settigns accordingly in a 59 pages long word file. Word? Doesn´t help… Copy all, bring it to a plain text by Notepad++, see it is CODE! Copied it from there again to the dashboard´s configuration file in HA to see if it works.
It worked, next BUT: As the picture is very high but narrow, just going one or 2 pixels wrong makes the position in percentage varying a lot, so the keys didn´t have always the same distance to each other, it looked like I had 5 beers when coding it. So I definitely needed one digit behind the comma to have more accurate positionings. But how? It took me some while, google minutes and testings until “# 0,0” did the trick, so in my example it was to be “{ MERGEFIELD height# 0,0 }”. Alt+F9 to switch back, try again, getting e.g. “3,5%” now.
“Finish & Merge” → “Edit Individual Documents…”, select all records of data, copy all, bring it to a plain text by Notepad++, copy it from there again to the dashboard´s configuration file in HA and see: it doesn´t work, I do not see ANY key anymore. 
What did I change? So changed back to plain numbers, works. Put in a comma number, doesn´t. Thought a bit about it, tried out replacing comma by dot It works!
Doesn´t look convenient in full screen mode on my laptop, sure. But if you narrow the browser window, you already can see how this really works out on a smart phone screen:
I was testing around a lot up to now and everything works mostly. Just found out a little problem with two horizontally quite high buttons (Direct Navigator and Function Menu), they react only when pressing in upper third of them (don´t know why, maybe I figure out still or maybe I´ll ask the developer about it).
But it is yet in testing phase a complete success, as by chance (or accident? depends on position) meanwhile my wife misplaced the original remote, couldn´t find it for a while and then yet used the smartphone and HA app instead
I also added another intuitive button for “power toggle all” and I made re-use of a button which was not in use on the original old remote to add a mute functionality (edited the picture by Paint.Net to match what it does now).
And while writing this article, I quickly removed the red border of the keys and “re-deployed”
So in short again, the How-To:
Prerequisites
- HA up and running (sure)
- floorplan up and running
- Hamony Hub up and running
- Devices you want to control added in Hub (app)
- Integration of Harmony Hub done in HA
- MSOffice handy
Steps to follow:
- Create a panel dashboard
- Find and upload an image of your remote and a little transparent one to HA in floorplan folder
- Set the image of the remote as background picture in the created dashboard
- Create the Excel sheed with all the columns and add the formulas in those which are no input
- Fill in row by row the functionality (columns “Device” and “Key”) you´d like to have as buttons
- Find the coordinates of the buttons in the picture and bring it to the green cells
- Create a word mailing document linked ot the Excel spreadsheet
- Paste the code snippet for one key, adapt look&feel of the desired buttons (e.g. rounding, border)
- Replace the 6 values in code snippet by corresponding mailing list fields from Excel spreadsheet
- Switch view with Alt+F9 to adapt coding of fields to get rounding of values, switch back after using same key combination
- Finish & merge the mailing to “Edit individual documents”
- Copy all to any text or coding tool (e.g. Notepad++)
- Replace all “,” by “.”
- Copy all into the code of the dashboard under “- elements” (take care correct indentation)
Enjoy! 