The best is to create first the automatically web page of the remote controller.

Then open it in a xml text editor and save it under a different name. This name will then be the name of the new web page.

Take a photo of your remote control. The following uses gimp to edit the picture (similar programs should be able to do the same).

When editing it is good to have a large picture, when done shrink it to fit on a smart phone screen (height about 500pixels with 72 pixels per inch).

In gimp go to filters > web > image map to open the image map editor. Mark every button and link it to the javascript function of the selected button. Don't worry to much about button names and the java script function name, this needs to be fixed later since gimp image map is a bit limited. Important is that you mark all buttons nicely to get the coordinate numbers and put something in the javascript name to associate them to the button commands.When done save it as map file.

In the webpage mark the <svg> to the </svg> tag as xml comment. Then copy at the same place where the svg was the image map file content.

Now check if then javascript calls in the commented svg section match with the ones from the image map section and adopt the image section.

<rect height="50" onmousedown="send_key(&quot;down&quot;,&quot;Acer&quot;,&quot;1&quot;,&quot;8D46091A09080A0809080A080A190A1A0908091A091A0A0809080A08091A091A09080A1A09080A0809080A1A0A070A0809080A08091A091A091A0A08091A0A190A1A09&quot;,0,&quot;0&quot;)" onmouseup="send_key(&quot;up&quot;,&quot;Acer&quot;,&quot;1&quot;,&quot;8D46091A09080A0809080A080A190A1A0908091A091A0A0809080A08091A091A09080A1A09080A0809080A1A0A070A0809080A08091A091A091A0A08091A0A190A1A09&quot;,0,&quot;0&quot;)" rx="5" ry="5" style="fill:white;stroke:black;stroke-width:2" width="100" x="15" y="15"/>
    

The last check is that you copy the image of the remote controller in the same directory as the web page or adjust the path.