Mac Home Automation

XTension has had web integration through X2Web forever. And when I say forever I mean since MacOS Classic forever. While the AppleScript development system of X2Web is versatile and reasonably fast and very capable, it can’t easily do things that we expect in a live updating apps as web page type world. It’s also a pain to install properly and keep running across OS updates as it relies on Apache configuration that can get overwritten or changed. Enter the new web interface, that I’m currently creatively calling “Web Remote”. It no longer requires Apache but runs as an interface in XTension. You assign is a high port to run on and pass that port through your router (or not if you only want it local) and your setup in the computer is done. A lot of configuration can be done on the pages themselves to customize your data display. Here’s an example of the demo page I use to show what it’s capable of:

As of this alpha not everything we had working in X2Web is working, and not everything is easy to configure or properly working, but basic control and monitoring is all there and many nice features for customization and giving yourself a very easy to setup and useful landing page for control. During the alpha and beta periods I will not be restricting access to the program, but it will eventually be a paid plugin. Anyone purchasing X2Web in the last year or from now on will get upgraded at no charge and I may do upgrade pricing for previous users of X2Web.

Web Remote requires an Intel based mac running 10.5 or later. XTension itself still runs on PPC back to 10.4 but the web remote requires newer system support.

To create an instance of WebRemote go to XTension’s preferences window. In the Interface tab click “new interface” and select “Web Remote” select a high port number to run it on (tradition dictates 8080 or something, but anything above 1024 will likely work depending on what else you have installed) click save and enable the interface to start it. In it’s alpha state only a single instance of the interface can be run at a time, when complete you will be able to start as many instances as you wish all with different interfaces. One customized for your laptop, another for your iPhone another for your iPad, another for the touch screen in the kitchen another for the iMac in the den… whatever makes most sense to have available at any place, all running on a separate port.

After enabling the interface you’re done as far as XTension is concerned and you can now connect to the interface in a browser. Since this is all cutting edge web stuff with dynamic content it goes without saying that a modern browser, probably the most recent version, is required for it to operate properly. Connect via the url something like http://IP.Address.of.machine:8080/ or whatever port you selected. Upon connecting you’ll see a pretty much blank page with a menu bar across the top. Click on the “admin” menu and turn on the “require a password for access to this site” and set a password. (or if you never plan to make it accessible from the outside world perhaps you dont want a password)

Click save and return to the main (blank) page. If you’re on a machine that you’ll be using with it regularly you can place a cookie on that machine which will bypass the password authorization. There is no extra security in being forced to log in from the kitchen iMac all the time. Select “Save This Browser Session” you can give it a name “kitchen iMac” or something meaningful and set the cookie. Now this machine will be able to connect without a password. You can clear the cookie from the same screen anytime.

The second menu item it “log” and here you can view the log in realtime. You cannot yet load the older log entries or search through them. At the bottom of this page is the checkbox so you can turn off auto scrolling if you’re trying to look at something as well as a “command line” which is identical to the command line in the XTension app. try typing: write log “this came from the web remote!” and watch it scroll up. (alpha warning: sometimes the encoding chokes on curly quotes that are sometimes inserted here automagically by the browser. This will cause a javascript error, just reload the page to get working again if this happens.)

The next menu item is called “units” and pops up a menu of all the lists you have configured in XTension. You can manage which lists are available here under the admin menu “manage list menu” there are probably only a few that you really want to see and control this way. After selecting a list you’ll have a window much like the one in XTension showing at a glance the status of the unit, the last activity date, the current state label (on/off or a value or a custom description set in the onLabel or offLabel fields in XTension) and buttons to turn each unit on or off. In between them is a button labeled “more” that brings up another window with more controls for the unit. From there you can set in and for parameters (turn on “my office” for 10 * minutes) as well as block and unblock the unit, dim the unit or remove other events that you’ve set via in/for parameters. Click Done to do nothing, or control the unit with a different button.

If you make changes to your unit lists in XTension you will likely have to disable and re-enable the web remote interface in the preferences window to make those changes show up. You can do this from the admin menu of the web remote if you wish via the “reboot webremote” menu item.

the next menu it called scripts, and at startup it will popup a list of all your global scripts. You probably dont want all your scripts to show up here. You can manage this menu in the same way as the list menu under the admin menu “Manage Script Menu”

Video streams from IP cameras connected to VideoPitcher are available here. The menu is configurable again in the admin menu. You will be presented with a page with a full sized video display to which you can add more dynamic controls for specific remote control and monitoring with video. The technique for adding and configuring dynamic controls is the same here as on other dynamic pages and will be explained below. Here is an example of what you can do:

The next menu item will load a list of units in the form of a motion report. This section is unfinished but will display a report of the current day more or less. The lists offered in the menu are configurable from the admin menu same as the other menus previously discussed.

After the motion report you can create 6 more pages of dynamically named content for specific uses. These custom pages are created from the admin menu by selecting “add custom page” you’ll be prompted for a name for the page to display in the menu bar and then you’ll get another empty page to which you can add controls.

The real power of the system is that it lets you create custom layouts of controls and displays. The controls can be placed either individually onto the page, or you can create a “grouping rectangle” control and place more controls inside of it (but dont nest grouping rectangles at this time) Grouping and moving of controls is currently rather rudimentary so I recommend that you mostly place them inside grouping rectangles for ease of re-arranging. There is currently no way to move a control already setup onto or out of a grouping rectangle or to or from a different dynamic page.

Return to the “main” tab which is your entry point into the system and we’ll build some controls from there. This is a custom dynamic page that is always available and cannot be deleted.

Select the admin menu again and select the first menu item to “add control”. The “Create a New Control” dialog will appear. You can move this around so as to better see whats behind it if necessary. If you wish to add a control to a grouping rectangle instead of the admin menu you control-click on the rectangle and choose new control from the contextual menu. Select “grouping rectangle” which is the first control in the popup of available control types.

   alpha note: 
    it is sometimes hard to get the control-click to bring up the controls contextual menu as opposed to the system one. 
    If it’s not working for you try clicking just inside the border of the control or on the text header of the control.
    
    controls are always created at the same default offset, either on the page itself or inside a grouping rectangle
    you may need to move your edit windows around to see them and if your gropuing rectangle is very small it may not 
    be visible until you expand it or move the control up and to the left.

Control-click on the control you wish to edit or move, or in the case of a grouping rectangle the one you may wish to add more controls to. As noted above in this alpha it’s sometimes hard to hit the sweet spot where it will popup the menu. Once you select edit the edit window will appear with buttons for moving the control around as well as re-sizing it. You can also use your arrow keys to move the control around. Hold down the shift key to move a larger amount of space with each click or button press, hold the option key down to resize while using the arrow keys.

Give your grouping rectangle a title and position it somewhere useful and now we’re going to add another control to it. Control-click on the grouping rectangle and select “add controls” The same window with the control type popup will display but this time any control you create will go into the grouping rectangle. Create a small unit value display and experiment with moving it around. try changing the unit status in XTension and watch the web interface update to show the new status in realtime.

There is currently no way to automatically line up controls or select and move more than one at a time except if they are inside a grouping rectangle.

   alpha note: it is sometimes impossible to get things lined up perfectly after editing and not all 
   changes are reflected right away. This is a bug and will get sorted out but if you find that you 
   simply can’t make things stick where you want them click save in the edit dialog and reload the page. 
   This gets everything setup again from scratch and you should be able to continue to edit from there.
   
   also your changes are not saved until you close the edit dialog. So be sure to close that window before
   reloading the page to force any updates to reload.

This is a very useful display for unit status or value. You can give it a short descriptive title that better fits on the webpage than the unit name or you can use the unit name default. Select the unit you wish it to reflect from the popup and the default color scheme. Right now the colors are limited to none, on/off (red/green as in XTension) and temperature backgrounds. These are currently only working for F temperature values in the alpha. The value is displayed in the same way that it would be in XTension. If it’s a discreet (non-dimmable) unit then the default messages are “on” and “off” but you can use the on label and off label fields in the unit in XTension to change it to “open” and “closed” or “heat” and “cool” or “occupied” and “vacant” or whatever makes sense to you and those labels will display instead of the value. If no labels are specified in XTension and it’s a dimmable unit then the value will be displayed along with any suffix that you have assigned. So after a temperature you may with to make the suffix “˚F” so that it will display as in “72.4˚F”

hovering over the display will bring up a “tool tip” containing the last activity date of the unit.

The toggle switch control is a simple remote control for a unit or a group. It has only 2 settings the title and the unit to which it is attached. Click on the grey toggle in the middle to toggle the unit on and off. Hovering over the control will show the last activity. The default labels are ON and OFF but if you have the onLabel and offLabel properties for the unit set those will be used instead. Be careful as there isn’t a lot of room inside the toggle switch for large labels.

The title you give the control is also a link that will bring up the same detailed control window that you could get by clicking the “more” link on the unit control list page.

This is one of the controls where re-sizing makes things a little bit goofy. After you have it where you want it reload the page to let it re-render itself and get it’s offsets cleaned up if it looks like the switch isn’t centered.

This is the control that lets you create customized displays via inserting bits of simple HTML code. The Recent Activity as well as the weather report in the above example were created this way and I’ll upload the scripts for those shortly.

You create a pseudo unit and through scripts or events or something you place html code into the description of that unit. It will be loaded inside this iFrame in the browser and rendered. If you change the description of the unit the control will be automatically reloaded to display the new data.

This is a way to display more dynamic text than you could otherwise, no html encoding is supported. You create a pseudo unit and the units description is just displayed in this control as text. You can control the size and color of the text and if it will be centered or rendered like a paragraph. That is how I created the Server Time control in the example above. My XTension’s idle script which runs every minute just updates the description of a pseudo with the current time string. Any changes to the description of the unit will cause the control on any open web page to be updated in real time.

This displays a slowly updated thumbnail from any VideoPitcher video stream. You can then click on this to go directly to the dynamic page for that video stream to view it fullsize and use any controls you’ve created around it.

   alpha note: there seems to be a bug here that the edit page doesn’t automatically come up after 
   you create one but it sticks on the new control dialog. Control click on the thumbnail again and
   select “edit” to force it to appear.

it has a title like everything else, a popup to select the video stream you wish to display and a field to configure how often you want it updated when you’re viewing the page. You could set this to 1 second and get a pretty good live video feed in the main window, but I recommend 3 seconds or more to keep it updated but not waste a lot of bandwidth.

A button to run a global script. It has 3 parameters, the title on the button, the script it should run and whether or not you’d like it to popup an are you sure dialog before running the script.

The next control “full sized video” is included in the list in error. You cannot create a full sized video display dynamically they are provided by default on the video pages (but you can add thumbnail displays from other video sources onto a full sized display page)

This is the control I used to create the disk space remaining display on the demo page above (in connection with the UPS plugin to read that data into a unit for me) it could be used to create a thermostat like display or the space remaining or anything else. The controls for setting bakground color based on thresholds is not reliable yet.

This is a full sized full featured thermostat control. You select from a large list of units for each of the various functions. The furnace status unit must show 0 for off, 1 for heat and 2 for AC, if your thermostat setup doesn’t provide this you’ll have to do so via pseudos and scripts from the various other units that it uses to display it’s status.

   alpha note: the cool setpoint set buttons aren’t working and the heat setpoint ones send the change with each 
   click rather than waiting for you to reach the desired temp. So click and wait for the reading to reflect your
   change before clicking again or odd things happen. This will all get cleaned up.

Provides for an interface for moving and presetting an X10 ninja mount camera mount. This requires that you have a transmitter capable of sending the ninja commands to it like an CM15 and that you have setup a unit that points to it. More camera control controls are in the works, first for the newer X10 remote controlled cameras and then anything else that anybody can point me to instructions to work with.

This displays the last hours with of motion report for the selected unit, if you have XTdb installed. You can see 4 of them in the demo page above. The only settings are the title and the unit from which to display data.

displays a live updating graph from your XTdb install. Select the graph from the list and make any sizing changes to make it look usable.

   alpha note: this is another of the controls that doesn’t resize properly yet and wont display the 
   graph until after you close the edit window and reload the page. Do your best to get it where you want it and then reload the page.

The framework that this is built in will someday support a native SSL connection, but for the moment that waits in beta stage unreadyness so until then you can create a secure connection to this, and the older X2Web system via my ssl passthrough server