Web Interface To X10 Commander

Forum to discuss X10 Commander iPhone/iPod/iPad/Android client for X10 Devices

Web Interface To X10 Commander

Postby Rocket J Squirrel » Wed Sep 01, 2010 1:20 pm

Version 2.0 of Web X10der, my X10 Control Page, replaces version 1.1.1 released on 1/28/2010.

This is a web page which allows you to access the X10 Commander server from compliant web browsers on computers and web-enabled phones. Copy and paste the code below to a file called webx10der.html. Edit the file as shown in the comments, and you should be able to access your X10 Commander server from any computer.

Changes include:
  • Rewritten to work more gracefully when invoked via HTTP. The original script was designed to work when opened as a local file (i.e., using the file: protocol) in a web browser. Version 2.0 works more smoothly when opened as a remote HTML document (i.e., using the http: protocol).
  • Ability to specify power line or radio frequency control for each device.
  • More customizations available via flags, requiring less editing of the source code to change script behavior.
  • Tested with more browsers. Works with IE 8, Firefox 3, Chrome 5, Safari 5, and mobile Safari for iPhone. Works with desktop version of Opera 10 if the script variable "useAjax" is set to "false". Does not work with Opera Mini due to Mini's higher level of security policy enforcement.
  • Recovers more gracefully from errors.
  • Has a name.
I'd encourage people with compatible phones to use X10 Commander on their phones instead of this script. It's got a nicer UI and offers some security. Plus it shows support for the great software from Melloware. Web X10der was intended for running on computers. But if there's no X10 Commander client for your particular web-enabled phone, then by all means enjoy Web X10der on your phone.


Code: Select all
<html>
<head>
<title>Web X10der</title>
<!-- version 2.0a  9/6/2010 -->
<script type="text/JavaScript" language="JavaScript">
<!--
// XXX: This script is known not to work with the Opera Mini mobile browser.
var version = "2.0";
// Some constants to make the code a little more readable.
var NODIM = 0, DIM = 1, PLC = 0, RF = 1;

// ********************** START EDITING HERE ***************************

// Host name or IP address of the machine running the X10 Commander server
// You MUST edit this.
var server = "192.168.1.2";

// You MUST edit the devices array to match your setup.
//
// Devices array contains 4 entries per device.
// 1. Device address (house code & unit number)
// 2. Device name to display
// 3. Device dimability - NODIM or DIM
// 4. X10 transmission method - PLC (power line) or RF (radio frequency)
var devices = new Array(
    "J4",    "All Lights",           NODIM,  PLC,
    "L5",    "Den Floor Lamp",       DIM,    PLC,
    "L2",    "Downstairs Hall",      DIM,    PLC,
    "L1",    "Foyer, Top of Stairs", DIM,    PLC,
    "L3",    "Garden Room",          DIM,    PLC,
    "K1",    "Kitchen Chandelier",   DIM,    PLC,
    "K3",    "Kitchen Fluorescents", NODIM,  PLC,
    "K5",    "Kitchen Heater",       NODIM,  PLC,
    "K2",    "Kitchen Track Lights", DIM,    PLC,
    "M1",    "TV Room Backlight",    NODIM,  RF,
    "M2",    "TV Room Floodlights",  DIM,    PLC,
    "M3",    "TV Room Floor Lamp",   NODIM,  PLC,
    "O4",    "Outside Back Yard",    DIM,    PLC,
    "O1",    "Outside Front Door",   DIM,    PLC,
    "O2",    "Outside Front Gate",   DIM,    PLC,
    "O3",    "Outside Garden Room",  DIM,    PLC,
    "O5",    "Outside Trash Area",   DIM,    PLC,
    // Devices array ends with a special token so we do not have to worry about
    // that last trailing comma when items get rearranged. Do not change it.
    "END"
);

// Some global flags to customize script behavior.
// You don't have to change them unless you don't like the standard behavior.
//
// Personalize the page heading any way you like by changing myHeading
var myHeading = "X10 Controls for My House";
// Set showServer to false to omit showing the server name or address on page
var showServer = true;
// Set shortButtons to true to omit Dim/Bright percentages from button labels (good for mobile devices)
var shortButtons = false;
// Set percentage to dim BY with Dim buttons. Default of 50 seems good.
// Understand that "DIM 25" means to dim by 25%, not dim to 25%.
var dimPercent = 50;
// Set percentage to brighten TO with Bright buttons. Default of 100 seems good.
// Understand that "BRIGHT 75" means to brighten to 75%, not brighten by 75%.
var brightPercent = 100;
// Set showCodes to true to show device X10 addresses & transmit methods as well as names on page
var showCodes = false;
// Set showStatus to false to disable browser status line updating
var showStatus = true;
// Set showHovertext to false to not show hovertext.
// Some broswers put this in the status line, distractingly, instead of as hovertext.
var showHovertext = true;

// Some global flags to control how the HTTP command is sent.
// Change these if you have problems with the standard configuration.
//
// Set useAjax to false only if it consistently fails.
var useAjax = true;
// Sometimes an exception will be thrown but the command will succeed anyway.
// If this happens all the time, you can change allowFallback and allowErrorAlert
// to false.
var allowFallback = true; // set to false to disable fallback to window.open() if AJAX throws an exception
var allowErrorAlert = true; // set to false if you get error pop-ups and don't want to see them

// If you are running this via the http: protocol, and your HTTP server needs
// a user ID and password for authentication, set them here. Just leave them
// empty unless you get authentication errors or prompts from your HTTP server.
// XXX: this is untested. Kindly report authentication problems to the author.
var serverID = "";
var serverPassword = "";

// Set debug to true to show debug output in a popup window. Not for general use.
var debug = false;

// ********************** STOP EDITING HERE ****************************
// *********************** THIS MEANS YOU! *****************************

// Connect to the X10 Commander server by opening a window.
// The AJAX method should be preferred.
function windowMethod(url, closeIt) {
    if (closeIt) {
        var w = window.open(url, "X10Window",
          "dependent,height=1,width=1,location=no,menubar=no,scrollbars=no,status=no,toolbar=no");
        // Immediately close the window.
        w.close();
    }
    else {
      window.open(url, "X10Window",
        "dependent,height=100,width=700,location=yes,menubar=no,scrollbars=no,status=yes,toolbar=no");
    }
}

// Connect to the X10 Commander server via AJAX.
function ajaxMethod(url) {
    try {
        // Send HTTP HEAD without opening a window.
        var request = new XMLHttpRequest();
        request.open("HEAD", url, true, serverID, serverPassword);
        request.send(null);
    }
    catch (e) {
        // Request threw an exception. This does not necessarily mean it failed.
        var err = e; // bring error into scope so it can be examined in debugger
        if (allowErrorAlert) {
            // Show the error message.
            var errString;
            if (typeof(err) == "string") {
                errString = err;
            }
            else {
                errString = err.toString();
                if (errString == null || errString == "" || errString == "[object Error]")
                    errString = err.name + ": " + err.message;
            }
            if (err.message.match(/Access is denied/))
                // Probably an IE security error.
                errString += "\nMake sure the server " + location.hostname +
                  " is in your local intranet or other trusted zone.";
            else if (err.message.match(/Security violation/))
                // Probably an Opera security error.
                errString +=
                  "\n\nSet \"useAjax\" to \"false\" in the Web X10der script source code \
because it will always fail with your browser (probably Opera).";
            alert(errString);
        }
        if (allowFallback)
            // Revert to using a browser window to send the command.
            windowMethod(url, true);
    }
}

// Turn a device on or off, or brighten or dim it.
function setDevice(deviceNum, state, transmitMethod) {
    // if (debug) alert("setDevice(" + deviceNum + ", " + state + ", " + transmitMethod + ");");
    // Do not change the 8086 or the funny characters in the url string.
    // X10 Commander server requires them as is.
    var url = "http://" + server + ":8086/?x10command=DEVICE~send" +
        transmitMethod + "~\"" + devices[deviceNum] + " " + state + "\"";
    // Kludge: append timestamp to URL to force IE to open it every time.
    // Other browsers don't seem to need this.
    var today = new Date;
    url += "&time=" + today.getTime();
    if (debug)
        // Open a window, leaving it open to show the command sent and the response received.
        windowMethod(url, false);
    else if (useAjax)
        // Use the AJAX method.
        ajaxMethod(url);
    else
        // Use the window.open() method.
        windowMethod(url, true);
    if (showStatus)
        window.status = devices[deviceNum+1] + " set to " + state + " via " +
          transmitMethod.toUpperCase();
}

// Function to generate the HTML for the page full of buttons.
function generate() {
    var s; // string accumulator
    // Write some text.
    if (myHeading != null && myHeading != "") document.writeln("<h3>" + myHeading + "</h3>");
    if (showServer) document.writeln("<h5>Server: " + server + "</h5>");
    // Write a table, one row per X10 device.
    document.writeln("<table>");
    for (var i = 0; devices[i] != "END"; i += 4) {
        var lcMethod, ucMethod; // lowercase & uppercase transmission methods
        if (devices[i+3] == RF) { lcMethod = "\"rf\""; ucMethod = "RF"; }
        else { lcMethod = "\"plc\""; ucMethod = "PLC"; }
        // Show the device name.
        document.write("<tr><td>" + devices[i+1] + "</td>");
        // Show the device address if user wants to see it.
        if (showCodes)
            document.write("<td>(" + devices[i] + " " + ucMethod + ")</td>");
        // Add Off and On buttons
        s = "<td><button type='button'";
        if (showHovertext) s += " title='" + devices[i] + " OFF " + ucMethod + "'";
        s += " onClick='setDevice(" + i + ", \"OFF\", " + lcMethod +
          ");'>&nbsp;&nbsp;Off&nbsp;&nbsp;</button></td>"
        document.write(s);
        s = "<td><button type='button'";
        if (showHovertext) s += " title='" + devices[i] + " ON " + ucMethod + "'";
        s += " onClick='setDevice(" + i + ", \"ON\", " + lcMethod +
          ");'>&nbsp;&nbsp;On&nbsp;&nbsp;</button></td>"
        document.write(s);
        // If device is dimmable...
        if (devices[i+2] == DIM) {
            // ... add Dim button...
            s = "<td><button type='button'";
            if (showHovertext)
                s += "title='" + devices[i] + " DIM " + dimPercent + " " + ucMethod + "'";
            s += " onClick='setDevice(" + i + ", \"DIM " + dimPercent + "\", " +
              lcMethod + ");'>&nbsp;Dim";
            if (! shortButtons) s += " " + dimPercent + "%";
            s += "&nbsp;</button></td>";
            document.write(s);
            // ... and Bright button
            s = "<td><button type='button'";
            if (showHovertext)
                s += "title='" + devices[i] + " BRIGHT " + brightPercent + " " + ucMethod + "'";
            s += " onClick='setDevice(" + i + ", \"BRIGHT " + brightPercent + "\", " +
              lcMethod + ");'>&nbsp;Bright";
            if (! shortButtons) s += " " + brightPercent + "%";
            s += "&nbsp;</button></td>";
            document.write(s);
        }
        document.writeln("</tr>");
    }
    document.writeln("</table>");
    if (showStatus)
        window.status = "Thanks for using Web X10der v" + version;
}

// -->
</script>
</head>

<body>
<script type="text/JavaScript" language="JavaScript">
<!--
generate();
// -->
</script>
<noscript>
<h3>You must have JavaScript enabled to use this page.</h3>
</noscript>
<!-- vim: set tabstop=4 shiftwidth=4 expandtab lines=44 columns=120: -->
</body>
</html>

Last edited by Rocket J Squirrel on Sat Sep 18, 2010 1:33 am, edited 2 times in total.
User avatar
Rocket J Squirrel
 
Posts: 76
Joined: Wed Jan 06, 2010 3:39 pm
Location: California, USA

Re: New improved web interface to X10 Commander

Postby Melloware » Fri Sep 03, 2010 8:52 pm

I really appreciate the hard work that went into this! I have made this thread a sticky thread so people can always find it.
=-=-=-=-=-=-=-=-=-=-=-=-=-=-
Melloware Inc.
http://www.melloware.com
=-=-=-=-=-=-=-=-=-=-=-=-=-=-
User avatar
Melloware
Site Admin
 
Posts: 11017
Joined: Thu Dec 01, 2005 10:24 pm
Location: Philadelphia, Pennsylvania USA

Re: Web Interface To X10 Commander

Postby Rocket J Squirrel » Sat Sep 04, 2010 8:33 pm

Trouble is, it doesn't have a catchy name. Not that a simple JavaScript deserves one. But I was thinking about "Web X10der". Get it? Is it already taken?
User avatar
Rocket J Squirrel
 
Posts: 76
Joined: Wed Jan 06, 2010 3:39 pm
Location: California, USA

Re: Web Interface To X10 Commander

Postby Melloware » Sun Sep 05, 2010 8:29 pm

Rocket J Squirrel wrote:Trouble is, it doesn't have a catchy name. Not that a simple JavaScript deserves one. But I was thinking about "Web X10der". Get it? Is it already taken?


Not bad! Let me know if you want me to change the title of this thread.
=-=-=-=-=-=-=-=-=-=-=-=-=-=-
Melloware Inc.
http://www.melloware.com
=-=-=-=-=-=-=-=-=-=-=-=-=-=-
User avatar
Melloware
Site Admin
 
Posts: 11017
Joined: Thu Dec 01, 2005 10:24 pm
Location: Philadelphia, Pennsylvania USA

Re: Web Interface To X10 Commander

Postby Rocket J Squirrel » Mon Sep 06, 2010 8:29 pm

No need; I edited the content. I think the title is descriptive and fine as is.
User avatar
Rocket J Squirrel
 
Posts: 76
Joined: Wed Jan 06, 2010 3:39 pm
Location: California, USA

Re: Web Interface To X10 Commander

Postby calldrin » Sat Sep 18, 2010 10:10 am

Thanks for all your hard work :-)
I'm a real newbie and have a stupid question :(
How do I get it run from my iPhone?
It works fine when I run it locally.
What address do I type in my Safari browser to get it to run?

Please give me example as I have no experience using "html" code etc.

Thanks in advance.

Chuck
calldrin
 
Posts: 12
Joined: Sat Aug 28, 2010 3:14 pm

Re: Web Interface To X10 Commander

Postby Rocket J Squirrel » Sat Sep 18, 2010 12:12 pm

calldrin wrote:Thanks for all your hard work :-)
I'm a real newbie and have a stupid question :(
How do I get it run from my iPhone?
It works fine when I run it locally.
What address do I type in my Safari browser to get it to run?

Please give me example as I have no experience using "html" code etc.

Thanks in advance.

Chuck


First, you'll need to set up a web server on the same computer which runs your X10 Commander server. The free Apache server works fine for this. But there's a learning curve. Once you have Apache running and ports 80 and 8086 forwarded through your router, just make sure you're using external host name/address for the server, not the local network address.
User avatar
Rocket J Squirrel
 
Posts: 76
Joined: Wed Jan 06, 2010 3:39 pm
Location: California, USA

Re: Web Interface To X10 Commander

Postby calldrin » Sat Sep 18, 2010 1:58 pm

Rocket J Squirrel wrote:
calldrin wrote:Thanks for all your hard work :-)
I'm a real newbie and have a stupid question :(
How do I get it run from my iPhone?
It works fine when I run it locally.
What address do I type in my Safari browser to get it to run?

Please give me example as I have no experience using "html" code etc.

Thanks in advance.

Chuck


First, you'll need to set up a web server on the same computer which runs your X10 Commander server. The free Apache server works fine for this. But there's a learning curve. Once you have Apache running and ports 80 and 8086 forwarded through your router, just make sure you're using external host name/address for the server, not the local network address.


Thanks for the information .. but it mostly "greek" to me. I have heard of Apache but don't know where to get it.. but I do know how to do port forwarding :) Maybe I can get my son or g-son to help this 72 yr. old codger ;)
I'm having fun using it locally but..... now to out to "real" world!

Chuck
calldrin
 
Posts: 12
Joined: Sat Aug 28, 2010 3:14 pm

Re: Web Interface To X10 Commander

Postby Rocket J Squirrel » Sat Sep 18, 2010 3:43 pm

It would be simpler and easier to use the X10 Commander client on your iPhone.
User avatar
Rocket J Squirrel
 
Posts: 76
Joined: Wed Jan 06, 2010 3:39 pm
Location: California, USA

Re: Web Interface To X10 Commander

Postby Melloware » Wed Oct 27, 2010 2:34 pm

I have added webx10der.html to the new X10 Commander installer on our downloads page.
=-=-=-=-=-=-=-=-=-=-=-=-=-=-
Melloware Inc.
http://www.melloware.com
=-=-=-=-=-=-=-=-=-=-=-=-=-=-
User avatar
Melloware
Site Admin
 
Posts: 11017
Joined: Thu Dec 01, 2005 10:24 pm
Location: Philadelphia, Pennsylvania USA

Re: Web Interface To X10 Commander

Postby Rocket J Squirrel » Thu Nov 18, 2010 12:38 pm

Melloware wrote:I have added webx10der.html to the new X10 Commander installer on our downloads page.

Let me know if you get any bug reports or other feedback. I'm willing to maintain & enhance it.
User avatar
Rocket J Squirrel
 
Posts: 76
Joined: Wed Jan 06, 2010 3:39 pm
Location: California, USA

Re: Web Interface To X10 Commander

Postby Melloware » Thu Nov 18, 2010 1:29 pm

Rocket J Squirrel wrote:
Melloware wrote:I have added webx10der.html to the new X10 Commander installer on our downloads page.

Let me know if you get any bug reports or other feedback. I'm willing to maintain & enhance it.


Definitely. I will start creating bug tickets if anyone reports any issue and forward the ticket to you. My goal for 2010 was to do a better job of internal bug tracking!
=-=-=-=-=-=-=-=-=-=-=-=-=-=-
Melloware Inc.
http://www.melloware.com
=-=-=-=-=-=-=-=-=-=-=-=-=-=-
User avatar
Melloware
Site Admin
 
Posts: 11017
Joined: Thu Dec 01, 2005 10:24 pm
Location: Philadelphia, Pennsylvania USA

Re: Web Interface To X10 Commander

Postby ClappTrapp » Sat Dec 18, 2010 11:28 pm

I have looked all through the forums , but I can't find a succinct answer to the question of Web Access.

I am using the X10 commander, on an MAC Ipad, to control lighting with the CM15, 10 Modules working perfectly when on my LAN using the internal IP address.

I want however to control the lighting over the internet. from a remote location. (I have ip cameras that let me see, over the internet), but I cannot figure out how to address the X10 Commander program from outside the LAN..
Do I need a http:// script of some sort ?

I have looked at Web X10der... Do I really need all that code?

My Panasonic ip cameras give me both internal and external addresses.
Thanks so much for any help
ClappTrapp
ClappTrapp
 
Posts: 2
Joined: Sat Dec 18, 2010 10:52 pm

Re: Web Interface To X10 Commander

Postby Melloware » Sun Dec 19, 2010 1:05 am

ClappTrapp, apparently you looked everywhere but right here: http://forum.melloware.com/viewtopic.php?f=13&t=7070

That link clearly explains how to access X10 Commander from the Internet anywhere outside your home.
=-=-=-=-=-=-=-=-=-=-=-=-=-=-
Melloware Inc.
http://www.melloware.com
=-=-=-=-=-=-=-=-=-=-=-=-=-=-
User avatar
Melloware
Site Admin
 
Posts: 11017
Joined: Thu Dec 01, 2005 10:24 pm
Location: Philadelphia, Pennsylvania USA

Re: Web Interface To X10 Commander

Postby ClappTrapp » Wed Dec 22, 2010 1:19 pm

What do they say... Too much information? I studied the diagram you suggested, printed it out and studied it again, became more confused and went to bed.
Got up the next morning and got a free account with Dyndns, 2 clicks to activate, pasted in the (myname.dyndns-free.com) to the X10 Melloware app on my Ipad and Voila... CONNECTED!
It connected and even confirmed my external IP address on the X10 Ipad app screen so that I knew that I was not just connected to my own LAN. Great Thank you!
clapptrapp
ClappTrapp
 
Posts: 2
Joined: Sat Dec 18, 2010 10:52 pm

Next

Return to X10 Commander

Who is online

Users browsing this forum: No registered users and 1 guest

cron