Anyone have a webview for TV remotes?

I just finished moving from Harmony to LIRC and finally added a bunch more buttons into the sitemap. Using OpenHAB sitemap buttons for a TV remote is not as pretty or easy as a picture of a remote would be. I think a webview item would be fine for that. Does anyone happen to have or know where I could find some web code for a TV remote? I could slowly design my own if not. I imagine this is a relatively common idea, but I didn’t see anything with a quick search. Thanks!

I got it. It was pretty simple to make custom. I used Gimp to create an image map, and some java script for the API calls.

<html class="ui-icons-enabled mdl-js"><head><meta http-equiv="Content-Type" content="text/html; charset=windows-1252"><script>
    var openHABAddress = "my.openhab.instance.local"
    var openHABItem = "SonyTVRemote"

    function httpPost(theUrl, theValue)
        var xmlHttp = new XMLHttpRequest();"POST", theUrl, true);
        xmlHttp.setRequestHeader("Content-type", "text/plain");
        xmlHttp.setRequestHeader("Accept", "application/json");
	function sendValue(theValue)
        url = "https://" + openHABAddress + "/rest/items/" + openHABItem;
        httpPost(url, theValue)

<img src="rmyd014.jpg" width="214" height="1159" border="0" usemap="#map" />

<map name="map">
<!-- #$-:Image map file created by GIMP Image Map plug-in -->
<!-- #$-:GIMP Image Map plug-in by Maurits Rijk -->
<area shape="rect" coords="77,313,129,364" href="javascript:sendValue('KEY_OK')" />
<area shape="rect" coords="0,11,74,84" href="javascript:sendValue('KEY_DISPLAY')" />
<area shape="rect" coords="79,13,139,84" href="javascript:sendValue('KEY_SLEEP')" />
<area shape="rect" coords="142,18,209,85" href="javascript:sendValue('KEY_POWER_TOG')" />
<area shape="rect" coords="82,260,131,309" href="javascript:sendValue('KEY_UP')" />
<area shape="rect" coords="131,319,185,370" href="javascript:sendValue('KEY_RIGHT')" />
<area shape="rect" coords="84,367,131,415" href="javascript:sendValue('KEY_DOWN')" />
<area shape="rect" coords="27,311,71,367" href="javascript:sendValue('KEY_LEFT')" />
<area shape="circle" coords="37,563,29" href="javascript:sendValue('KEY_1')" />
<area shape="circle" coords="102,565,27" href="javascript:sendValue('KEY_2')" />
<area shape="circle" coords="168,565,28" href="javascript:sendValue('KEY_3')" />
<area shape="circle" coords="37,629,27" href="javascript:sendValue('KEY_4')" />
<area shape="circle" coords="102,629,27" href="javascript:sendValue('KEY_5')" />
<area shape="circle" coords="166,630,27" href="javascript:sendValue('KEY_6')" />
<area shape="circle" coords="39,696,26" href="javascript:sendValue('KEY_7')" />
<area shape="circle" coords="102,695,27" href="javascript:sendValue('KEY_8')" />
<area shape="circle" coords="166,694,26" href="javascript:sendValue('KEY_9')" />
<area shape="rect" coords="55,444,152,473" href="javascript:sendValue('KEY_MENU')" />
<area shape="rect" coords="34,816,83,873" href="javascript:sendValue('KEY_VOLUMEUP')" />
<area shape="rect" coords="35,874,84,931" href="javascript:sendValue('KEY_VOLUMEDOWN')" />
<area shape="rect" coords="124,815,170,875" href="javascript:sendValue('KEY_CHANNELUP')" />
<area shape="rect" coords="122,876,171,935" href="javascript:sendValue('KEY_CHANNELDOWN')" />
<area shape="circle" coords="56,982,19" href="javascript:sendValue('KEY_MUTE')" />
<area shape="circle" coords="103,760,27" href="javascript:sendValue('KEY_0')" />
<area shape="circle" coords="168,760,26" href="javascript:sendValue('KEY_ENTER')" />
<area shape="rect" coords="151,505,193,524" href="javascript:sendValue('KEY_JUMP')" />
<area shape="circle" coords="182,261,17" href="javascript:sendValue('KEY_INPUT')" />


Looks like this on my OpenHAB sitemap just using a pic of the remote:

1 Like

I’m not the master of graphical design so I used a generic HABpanel layout, but I has the advantage that HABpanel allowa you to send directl commands to an item. SonI just have one item Key and then use a rule to process the different buttons (as I understand you are using one item per key). In addition you should utilize the full screen size also with the option to add apecific channels etc.
You could also include a status display.

1 Like