Universal Remote Control

Part III: HMI

Creating the web interface to be used as a web app was fairly trivial – but nothing goes without a few challenges.

• All icons I used were from FontAwesome – I have been using these icons for years and they have only gotten better.
• There was no need to get into advanced coding and packaging options – webpack, typescript, etc.
• I used basic HTML, Javascript, and CSS

iOS: In order to get the site to work as a web app (i.e. full screen, etc) insert the below code and then add it to your homescreen.

<meta name="apple-mobile-web-app-capable" content="yes">

The problem with doing this is that each time you open the link – it reloads the site. This is a known issue within iOS Safari. A reload each time the app is opened was a non-starter for my wife, who likes perusing other apps while watching tv.

The work around that I used was two part: 1) Store the status of each device on the server as described in Part I: Server; 2) Based on how the user selects an activity to determine what commands are passed to the server. When the KEY_POWER command is sent to the server, the following occurs on the server:

if(cmd.equals("KEY_POWER")){
    switch(key){
    case "Projector":
        Main.ProjectorStatus = (Main.ProjectorStatus) ? false : true;
        break;
    case "Receiver":
        Main.ReceiverStatus = (Main.ReceiverStatus) ? false : true;
        break;
    case "XBOX":
        Main.XboxStatus = (Main.XboxStatus) ? false : true;
        break;
    case "Cox":
        Main.CoxStatus = (Main.CoxStatus) ? false : true;
        break;
    default:
        break;
}

function fireMacro(macro, bOn=true, bChangeActivity=false){
    $(".indicator").removeClass("btn-success");

    if(bOn) $("." + macro + "-indicator").addClass("btn-success");

    var cmds = "";

    $.each(arrMacros[macro], function(index, val) {
        if(bChangeActivity){
            if((val[0]=="Receiver" && val[1]=="KEY_POWER") ||
                (val[0]=="Projector" && val[1]=="KEY_POWER")){
                    return;
            }
            cmds += val[0] + ":" + val[1] + ";";
        }
        else{
            cmds += val[0] + ":" + val[1] + ";";
        }
    });

    currActivity = (bOn) ? macro : "";
    
    $.ajax({
        type: 'POST',
        url: 'IR',
        data: {
            mac: currActivity,
            commands: cmds
        },
        success: function (result) {
            showActivity(currActivity);
            if(!bOn) $(".button-power").hide();
        },
        error: function (result) {
            console.log(result);
        }
    });
}

  "macros": {
    "watchTV": [
      ["Projector", "KEY_POWER"],
      ["Receiver", "KEY_POWER"],
      ["Cox", "KEY_POWER"],
      ["delay", 500],
      ["Receiver", "KEY_CBL"]
    ],
    "watchTV-off": [
      ["Projector", "KEY_POWER"],
      ["Receiver", "KEY_POWER"]
    ]
  }