Web UI for InControl

  • 1.3K Views
  • Last Post 06 September 2014
hdrider465@gmail.com posted this 14 January 2014

Been playing around a little and have put together a start of PHP web front end for InControl

A screen shot is here

http://sdrv.ms/1eB5eYq

The code is here

http://sdrv.ms/1eB5jLO

You can place this on a PHP server Edit the sc_config.php file to: 1) $host = IP/DNS name of your Incontrol server 2) $port = the WebAPI port of your InControl Server Default is 1178 3) $pass = your InControler Server Password 4) $cols = The number of Columns to show on the screen

This will cycle through all of your devices and create a control for each.

I'm working on the scenes page next and will post any updates.

Enjoy

Jim

Order By: Standard | Newest | Votes
Axial-User posted this 28 January 2014

Good stuff mate. I like it!

moengiant posted this 13 February 2014

Great work Jim. If you want some help I was going to create a php script to show a master layout that you would be able to drill down by floor and room. You would be able to configure floors or rooms by drag and drop the devices for rooms to where you want (in an edit mode) and also show device per room via list on a side menu that would display on a hover. I was thinking that each room would have a name displayed and when you clicked on the name if would open a larger view of the room in greater detail. Also a zoom out button to get back to floor or master view. I might use MySQL to store info like position of devices in order to scale and to determine if a room or floor has been configured or not. This way the gui displays nicely on screens with limited real estate. Edit mode would have position devices, add new floor, add new room, and maybe add new scene. Any who I digress. Nice and thanks!

hdrider465@gmail.com posted this 13 February 2014

Great work Jim. If you want some help I was going to create a php script to show a master layout that you would be able to drill down by floor and room. You would be able to configure floors or rooms by drag and drop the devices for rooms to where you want (in an edit mode) and also show device per room via list on a side menu that would display on a hover. I was thinking that each room would have a name displayed and when you clicked on the name if would open a larger view of the room in greater detail. Also a zoom out button to get back to floor or master view. I might use MySQL to store info like position of devices in order to scale and to determine if a room or floor has been configured or not. This way the gui displays nicely on screens with limited real estate. Edit mode would have position devices, add new floor, add new room, and maybe add new scene. Any who I digress. Nice and thanks!


Absolutely - I tried using an SQLLite db file so that I could apply different sorting to the buttons but ended up switching to MySQL due to alot of file locking so yes use MySQL. I would love to see what you have.

Jim

moengiant posted this 14 February 2014

Ok Jim, I'll keep you posted on my progress. I do have a have a little bit of an issue, although I have a fix/hack. When it comes to different locations, floors or other common areas InControl is not set-up to handle them. So this is what I'm thinking. Name rooms with a naming convention like so BuildingName-FloorName-RoomName. When I poll the rooms I will split on the hyphens. There will be an image associated with each building, floor, and room name.

Once I get it all sorted out and working on a local set-up I also think I have a way to have a remote box (lake house) report its dynamic IP address back to the MySQL database runner on my server at home. This way each building would have an IP address and a user could control any number of local or remote InControl set-ups from one GUI.

Ryan-Scott posted this 14 February 2014

Would you guys be open to the idea of contributing to an open-source version of an official InControl web ui? Initial plans would be to use node.js as the server technology and the express module to handle the routing and html. This would have the benefit of a real-time connection to the server instead of requiring a polling mechanism.

Anyway... thoughts?

hdrider465@gmail.com posted this 14 February 2014

Would you guys be open to the idea of contributing to an open-source version of an official InControl web ui? Initial plans would be to use node.js as the server technology and the express module to handle the routing and html. This would have the benefit of a real-time connection to the server instead of requiring a polling mechanism.

Anyway... thoughts?



Sure

moengiant posted this 15 February 2014

Ryan I'm in.

Ryan-Scott posted this 15 February 2014

Here's the GitHub repository for the InControl Web project. I've got the basic framework laid out in there, including the connection logic. Check out the readme for what works and what doesn't, but at the time of this writing, you could view device status and activate scenes.

If you are interested in contributing, check out the "Fork" guide to get started.

moengiant posted this 16 February 2014

Hello Ryan and Jim,
My set-up:
OS: Windows 8 64bit
Web Server: IIS 8
Other boxes running; I have an XP box running Abyss web server with MySQL.

I installed node on the Win8 machine using the 64bit installer. I also did a global install for the following modules: debug, express, jade, stylus, and ws. I edited the config file and cd'ed into the incontrol-web-master directory, ran node add.js and received an error unable to connect to the server. Looked in the log and no info. When I went to localhost:3000 the page did load but no devices or anything that would be dynamic. My question is this correct way to set-up and is node.js stable on Win8?

Any ideas greatly appreciated.

Ryan-Scott posted this 16 February 2014

Hello Ryan and Jim,
My set-up:
OS: Windows 8 64bit
Web Server: IIS 8
Other boxes running; I have an XP box running Abyss web server with MySQL.

I installed node on the Win8 machine using the 64bit installer. I also did a global install for the following modules: debug, express, jade, stylus, and ws. I edited the config file and cd'ed into the incontrol-web-master directory, ran node add.js and received an error unable to connect to the server. Looked in the log and no info. When I went to localhost:3000 the page did load but no devices or anything that would be dynamic. My question is this correct way to set-up and is node.js stable on Win8?

Any ideas greatly appreciated.


It sounds like you setup node fine since the app is running. I imagine the "unable to connect to server" is a result of the app being unable to connect to your InControl server. Is InControl running on the same Win8 machine? If it's on a different computer, did you edit the config accordingly? Is the InControl computer's firewall off so that you can connect into it? One last thought... you mentioned WinXP - there have been known issues with InControl's server on WinXP, so if it's on WinXP, you may need to move it to a different OS.

moengiant posted this 16 February 2014

Hey Ryan,

Additional info on my set-up.
Both InControl and node are running on Win 8. I added both in and outbound rules in the firewall for node to allow any and all connections. I even tried with firewall turned off. I have InControl running as a service and running the InControl node app from the root C:\ drive with all permissions on the set to full control. The error I'm getting is from line 35 of ichadirectconnect.js. I did a netstat -a -n -o and can see InControl is listening on port 1178 as is in the port in the config file. I have InControl running with no password.

I'm not sure how to trouble shoot the connection problem. Can I Telnet in to InControl? I'm wondering if there are any issues with the ws module and Win 8. I do a little research and keep you posted.

Ryan-Scott posted this 16 February 2014

Hey Ryan,

Additional info on my set-up.
Both InControl and node are running on Win 8. I added both in and outbound rules in the firewall for node to allow any and all connections. I even tried with firewall turned off. I have InControl running as a service and running the InControl node app from the root C:\ drive with all permissions on the set to full control. The error I'm getting is from line 35 of ichadirectconnect.js. I did a netstat -a -n -o and can see InControl is listening on port 1178 as is in the port in the config file. I have InControl running with no password.

I'm not sure how to trouble shoot the connection problem. Can I Telnet in to InControl? I'm wondering if there are any issues with the ws module and Win 8. I do a little research and keep you posted.



Do you see InControl listening on port 8711 as well? There are actually two servers; one is the web api, the other is a socket connection (port 8711). This node app will connect to the socket connection on port 8711.

moengiant posted this 17 February 2014

Hey Ryan this is what I have found:
This is the firewall turned off. The 8711 is not in the list of open ports.

In the Debug log:
2014-02-16 19:16:12,045 [468] DEBUG SuperWebSocket - Listener (0.0.0.0:1178) failed to start

In the err logs for InControl:

2014-02-16 19:16:12,029 [468] ERROR SuperWebSocket - Listener (0.0.0.0:1178) error: An attempt was made to access a socket in a way forbidden by its access permissions
System.Net.Sockets.SocketException (0x80004005): An attempt was made to access a socket in a way forbidden by its access permissions
at System.Net.Sockets.Socket.DoBind(EndPoint endPointSnapshot, SocketAddress socketAddress)
at System.Net.Sockets.Socket.Bind(EndPoint localEP)
at SuperSocket.SocketEngine.TcpAsyncSocketListener.Start(IServerConfig config) in d:\Publish\supersocket-54717b01859f6b7e659564d5e2ff7488adfae03d\SocketEngine\TcpAsyncSocketListener.cs:line 39



List of all open ports:


Active Connections

Proto Local Address Foreign Address State PID
TCP 0.0.0.0:80 0.0.0.0:0 LISTENING 4
TCP 0.0.0.0:135 0.0.0.0:0 LISTENING 852
TCP 0.0.0.0:445 0.0.0.0:0 LISTENING 4
TCP 0.0.0.0:554 0.0.0.0:0 LISTENING 3856
TCP 0.0.0.0:623 0.0.0.0:0 LISTENING 2488
TCP 0.0.0.0:1025 0.0.0.0:0 LISTENING 624
TCP 0.0.0.0:1026 0.0.0.0:0 LISTENING 952
TCP 0.0.0.0:1027 0.0.0.0:0 LISTENING 996
TCP 0.0.0.0:1028 0.0.0.0:0 LISTENING 1172
TCP 0.0.0.0:1029 0.0.0.0:0 LISTENING 688
TCP 0.0.0.0:1033 0.0.0.0:0 LISTENING 680
TCP 0.0.0.0:1178 0.0.0.0:0 LISTENING 4
TCP 0.0.0.0:1620 0.0.0.0:0 LISTENING 560
TCP 0.0.0.0:2869 0.0.0.0:0 LISTENING 4
TCP 0.0.0.0:5357 0.0.0.0:0 LISTENING 4
TCP 0.0.0.0:5677 0.0.0.0:0 LISTENING 4
TCP 0.0.0.0:6543 0.0.0.0:0 LISTENING 4700
TCP 0.0.0.0:6544 0.0.0.0:0 LISTENING 4668
TCP 0.0.0.0:7756 0.0.0.0:0 LISTENING 4
TCP 0.0.0.0:8085 0.0.0.0:0 LISTENING 4840
TCP 0.0.0.0:10243 0.0.0.0:0 LISTENING 4
TCP 0.0.0.0:16992 0.0.0.0:0 LISTENING 2488
TCP 0.0.0.0:17889 0.0.0.0:0 LISTENING 4840
TCP 0.0.0.0:56777 0.0.0.0:0 LISTENING 4
TCP 127.0.0.1:1151 0.0.0.0:0 LISTENING 2564
TCP 127.0.0.1:1269 127.0.0.1:1270 ESTABLISHED 5276
TCP 127.0.0.1:1270 127.0.0.1:1269 ESTABLISHED 5276
TCP 127.0.0.1:1271 127.0.0.1:5939 ESTABLISHED 5276
TCP 127.0.0.1:1327 127.0.0.1:6543 ESTABLISHED 4668
TCP 127.0.0.1:1395 127.0.0.1:6543 ESTABLISHED 2128
TCP 127.0.0.1:5939 0.0.0.0:0 LISTENING 2000
TCP 127.0.0.1:5939 127.0.0.1:1271 ESTABLISHED 2000
TCP 127.0.0.1:6543 127.0.0.1:1327 EST

Ryan-Scott posted this 17 February 2014

In the Debug log:
2014-02-16 19:16:12,045 [468] DEBUG SuperWebSocket - Listener (0.0.0.0:1178) failed to start


In the tools/options/connections, can you make sure that the "Direct Connect Port" isn't set to 1178? If it is, change it to 8711 and see if that gets the socket server started back up. 1178 is already in use by the web api server, so it could be just that they are conflicting with each other.

moengiant posted this 17 February 2014

Hey Ryan,
I change the port in InControl and in the node config file and that worked like a charm. I started the server via node and the page loaded in the browser with devices. JOY! Now I just need to read up on Jade.

I don't know if you read my original post in detail to Jim about having cases with multiple buildings and floors. As in my case my home has 3 floors up, main, and basement. Any thoughts on adding multiple layouts for a building. Also our family has a lake house and would like to be able to monitor it as well from same web page.

For now I will just work on a 1st release that will enable a user to add devices to a floor layout via drag and drop from the list of devices for different rooms and a main layout.

Thanks for the help in getting me started.

Ryan-Scott posted this 17 February 2014

Hey Ryan,
I change the port in InControl and in the node config file and that worked like a charm. I started the server via node and the page loaded in the browser with devices. JOY! Now I just need to read up on Jade.

I don't know if you read my original post in detail to Jim about having cases with multiple buildings and floors. As in my case my home has 3 floors up, main, and basement. Any thoughts on adding multiple layouts for a building. Also our family has a lake house and would like to be able to monitor it as well from same web page.

For now I will just work on a 1st release that will enable a user to add devices to a floor layout via drag and drop from the list of devices for different rooms and a main layout.

Thanks for the help in getting me started.


Cool, glad it's up and going.

I'll tweak the InControl DB to take into account the multi-floor layout and push out some new code for it.

For your cabin... are you saying instead of going to http://myhouse.net and http://mycabin.net, you'd like to go to just one site and see devices from both locations? Hmm... that'll require two outbound connections... will have to ponder how to get there with the architecture that's there currently.

Re: Jade. This project is the first time I've seen Express or Jade in action. It hasn't been too hard to get up to speed on it... just be careful of spacing when it comes to Jade. The existing layout files use tabs for indentation and Jade won't let us mix tabs + spaces, so be aware of that.

KilloBite posted this 18 March 2014

I am attempting to get this project running and got node installed, the website cloned, and the config file edited but when I go to fire up the website I get this error:

C:\IC>node app.js

module.js:340
throw err;
^
Error: Cannot find module 'debug'
at Function.Module.resolveFilename (module.js:338:15)
at Function.Module.
load (module.js:280:25)
at Module.require (module.js:364:17)
at require (module.js:380:17)
at Object. (C:\IC\nodemodules\express\nodemodules\connect\lib\p
roto.js:15:13)
at Module.compile (module.js:456:26)
at Object.Module.
extensions..js (module.js:474:10)
at Module.load (module.js:356:32)
at Function.Module._load (module.js:312:12)
at Module.require (module.js:364:17)

C:\IC>

Looking through app.js I see that the port is 3000? Is that something I can just change or are there other places that that is called out specifically?

Ryan-Scott posted this 18 March 2014

I am attempting to get this project running and got node installed, the website cloned, and the config file edited but when I go to fire up the website I get this error:

C:\IC>node app.js

module.js:340
throw err;
^
Error: Cannot find module 'debug'
at Function.Module.resolveFilename (module.js:338:15)
at Function.Module.
load (module.js:280:25)
at Module.require (module.js:364:17)
at require (module.js:380:17)
at Object. (C:\IC\nodemodules\express\nodemodules\connect\lib\p
roto.js:15:13)
at Module.compile (module.js:456:26)
at Object.Module.
extensions..js (module.js:474:10)
at Module.load (module.js:356:32)
at Function.Module._load (module.js:312:12)
at Module.require (module.js:364:17)

C:\IC>

Looking through app.js I see that the port is 3000? Is that something I can just change or are there other places that that is called out specifically?


I assume you ran the command 'npm install' ? If so, try 'npm update' as well, then run it again.

Also, you can indeed change the port in that file. I believe that's the only location you need to worry about.

KilloBite posted this 18 March 2014

Thanks Ryan, the update seemed to get the web server started and up and running. Now, my next hurdle is that the devices are not getting enumerated, I can see my logs and I can see and activate my scenes but the devices page is just blank.

I see the call for the devices page hitting the web server, but it does not list any of the devices. Here is what the web server sees:

GET /messages 200 1ms - 38
GET /devices 304 87ms
GET /javascripts/jquery.knob.js 304 9ms
GET /javascripts/bootstrap.min.js 304 4ms
GET /stylesheets/icha-style.css 304 19ms
GET /stylesheets/bootstrap.min.css 304 16ms
GET /stylesheets/bootstrap-theme.min.css 304 17ms
GET /stylesheets/style.css 304 27ms
GET /model/HADevice.js 304 11ms
GET /node_modules/moment/moment.js 304 12ms
GET /javascripts/deviceList.js 304 7ms
GET /messages 200 1ms - 38

Any ideas on why it all seems to be golden except for the device enumeration?

Ryan-Scott posted this 19 March 2014

Thanks Ryan, the update seemed to get the web server started and up and running. Now, my next hurdle is that the devices are not getting enumerated, I can see my logs and I can see and activate my scenes but the devices page is just blank.

I see the call for the devices page hitting the web server, but it does not list any of the devices. Here is what the web server sees:

GET /messages 200 1ms - 38
GET /devices 304 87ms
GET /javascripts/jquery.knob.js 304 9ms
GET /javascripts/bootstrap.min.js 304 4ms
GET /stylesheets/icha-style.css 304 19ms
GET /stylesheets/bootstrap.min.css 304 16ms
GET /stylesheets/bootstrap-theme.min.css 304 17ms
GET /stylesheets/style.css 304 27ms
GET /model/HADevice.js 304 11ms
GET /node_modules/moment/moment.js 304 12ms
GET /javascripts/deviceList.js 304 7ms
GET /messages 200 1ms - 38

Any ideas on why it all seems to be golden except for the device enumeration?


Do you see this when it first connects:


InControl web server listening on port 3000
Connected to server!


That second line is the connection to your InControl server.

Do you see any javascript errors in your browser?

KilloBite posted this 19 March 2014

Here is what I see when I first start the server (password changed to protect the innocent):

C:\IC>node app.js
InControl web server listening on port 3000
Connected to server!
Message sent { password: 'password',
commandData: {},
commandType: 'getDevices' }
Message sent { password: 'password',
commandData: {},
commandType: 'getScenes' }
Message sent { password: 'password',
commandData: {},
commandType: 'getEvents' }
Message sent { password: 'password',
commandData: {},
commandType: 'getRooms' }
GET /messages 200 0ms - 38
Unprocessed command null
GET /messages 200 0ms - 38

No, I don't see any javascript errors in the browser and I tried both Explorer and Chrome local and remote.

From what I can tell it is returning data from the getScenes and the getEvents commandType but the getDevices seem to be a nogo.

Ryan-Scott posted this 19 March 2014

Here is what I see when I first start the server (password changed to protect the innocent):

C:\IC>node app.js
InControl web server listening on port 3000
Connected to server!
Message sent { password: 'password',
commandData: {},
commandType: 'getDevices' }
Message sent { password: 'password',
commandData: {},
commandType: 'getScenes' }
Message sent { password: 'password',
commandData: {},
commandType: 'getEvents' }
Message sent { password: 'password',
commandData: {},
commandType: 'getRooms' }
GET /messages 200 0ms - 38
Unprocessed command null
GET /messages 200 0ms - 38

No, I don't see any javascript errors in the browser and I tried both Explorer and Chrome local and remote.

From what I can tell it is returning data from the getScenes and the getEvents commandType but the getDevices seem to be a nogo.


Are you on the latest version of InControl?

Could you go add some logging to the icha_client.js file - the processMessage method would be a good spot. Maybe do something like this: console.log("Message", jsonMessage);

If you are getting devices, you'll see the spammed to your console.

KilloBite posted this 19 March 2014

I am using version 3.92.5162.30506

Here is what I see after I add the console.log command:

C:\IC>node app.js
InControl web server listening on port 3000
Connected to server!
Message sent { password: 'password',
commandData: {},
commandType: 'getDevices' }
Message sent { password: 'password',
commandData: {},
commandType: 'getScenes' }
Message sent { password: 'password',
commandData: {},
commandType: 'getEvents' }
Message sent { password: 'password',
commandData: {},
commandType: 'getRooms' }
GET /messages 200 0ms - 38
TestMessage { '$type': 'MLS.HA.DeviceController.Common.HaCommand, MLS.HA.DeviceC
ontroller.Common',
commandType: 'device',
commandData:
{ '$type': 'System.Collections.Generic.Dictionary2[[System.String, mscorlib]<br>,[System.Object, mscorlib]], mscorlib',<br> devices:<br> [ [Object],<br> [Object],<br> [Object],<br> [Object],<br> [Object],<br> [Object],<br> [Object],<br> [Object],<br> [Object],<br> [Object] ] },<br> password: null,<br> serverMessage: '' }<br>TestMessage { '$type': 'MLS.HA.DeviceController.Common.HaCommand, MLS.HA.DeviceC<br>ontroller.Common',<br> commandType: 'scenes',<br> commandData:<br> { '$type': 'System.Collections.Generic.Dictionary2[[System.String, mscorlib]
,[System.Object, mscorlib]], mscorlib',
scenes: [ [Object] ] },
password: null,
serverMessage: '' }
TestMessage { '$type': 'MLS.HA.DeviceController.Common.HaCommand, MLS.HA.DeviceC
ontroller.Common',
commandType: 'events',
commandData:
{ '$type': 'System.Collections.Generic.Dictionary`2[[System.String, mscorlib]
,[System.Object, mscorlib]], mscorlib',
events:
[ [Object],
[Object],
[Object],
[Object],
[Object],
[Object],
[Object],
[Object],
[Object],
[Object] ] },
password: null,
serverMessage: '' }
TestMessage { '$type': 'MLS.HA.DeviceController.Common.HaCommand, MLS.HA.DeviceC
ontroller.Common',
commandType: null,
commandData: null,
password: null,
serverMessage: '' }
Unprocessed command null
GET /messages 200 0ms - 38
GET /messages 200 0ms - 38

KilloBite posted this 19 March 2014

I just added a console.log into the parseDevices function and it enumerates each device in the console just fine.

Now it seems that it's in the web display code somewhere? The weird thing is that after I got Endide Studio up and running I can now see the devices when using Chrome local to the server, but IE local and any browser (including chrome) remotely do not see anything in devices. Watching the console during the device page call I see it act differently using the local Chrome vs everything else. I did some testing with the browser security features but did not come up with anything conclusive. Here is what I see on the console when calling the devices page:

Local Chrome:
GET /messages 200 3ms - 38
GET /messages 200 1ms - 38
GET /devices 304 518ms
GET /messages 200 0ms - 38
GET /javascripts/bootstrap.min.js 304 6ms
GET /javascripts/jquery.knob.js 304 7ms
GET /stylesheets/icha-style.css 304 15ms
GET /stylesheets/bootstrap.min.css 304 18ms
GET /stylesheets/bootstrap-theme.min.css 304 19ms
GET /javascripts/deviceList.js 304 38ms
GET /model/HADevice.js 304 150ms
GET /nodemodules/moment/moment.js 304 150ms
GET /stylesheets/style.css 200 183ms - 0
Connection!
message received { command: 'getDevices' }
message getDevices received
GET /images/icon
listswitchoff.png 304 7ms
GET /images/iconlistalarmoff.png 304 8ms
GET /images/icon
listcontactoff.png 304 8ms
GET /images/iconlistalarmon.png 304 1ms
GET /messages 200 0ms - 38
GET /messages 200 0ms - 38

Here is what I see from any other browser instance:
GET /messages 200 0ms - 38
GET /messages 200 1ms - 38
GET /devices 200 90ms - 3.3kb
GET /javascripts/bootstrap.min.js 304 4ms
GET /javascripts/jquery.knob.js 304 5ms
GET /stylesheets/icha-style.css 304 12ms
GET /stylesheets/bootstrap.min.css 304 14ms
GET /stylesheets/bootstrap-theme.min.css 304 19ms
GET /stylesheets/style.css 304 24ms
GET /node
modules/moment/moment.js 304 12ms
GET /model/HADevice.js 304 15ms
GET /javascripts/deviceList.js 200 63ms - 6.65kb
GET /messages 200 1ms - 38
GET /messages 200 0ms - 38
GET /messages 200 0ms - 38

Ryan-Scott posted this 20 March 2014

I just added a console.log into the parseDevices function and it enumerates each device in the console just fine.

Now it seems that it's in the web display code somewhere? The weird thing is that after I got Endide Studio up and running I can now see the devices when using Chrome local to the server, but IE local and any browser (including chrome) remotely do not see anything in devices. Watching the console during the device page call I see it act differently using the local Chrome vs everything else. I did some testing with the browser security features but did not come up with anything conclusive. Here is what I see on the console when calling the devices page:


I made a tweak to allow it to work remotely. I checked mine in IE and Chrome both from a non-local box and got device. I committed an update back to Git that you should pull.

MadSci posted this 27 April 2014

What is the status of this? Is it usable for Scene Activation and device status? I'm looking to see what options there are for interacting with InControl from a Windows Tablet.

Ryan, do you know that there is an "InControl" named App on Windows Store for Homeseer?

monkey-magic posted this 06 September 2014

Just got this running but quick questions: Can I only activate scenes, not toggle devices from the devices tab?

Thanks Josh

Close