Creating a mobile remote with VC's Simple Web Server (TCP plugin)

[nime5ter]

***2017 UPDATE***

As of VC Version 2.2.3.4, a sample web remote is packaged with the program. You do not need to download the scripts in this thread.

When you enable the TCP Plugin's web server and click "Launch in browser" you will see a link for:
Advanced web remote with javascript - VoxRemote example

Click on that link to test the example. To customize the remote, look for the voxremote.html, styles.css, and vc-link.js files in your [VC]\plugins\TCP\html folder. Be sure to create a backup copies before editing.

***

On another thread we've been discussing various ways to interact with VC from a mobile device.

James mentions that one versatile option (which requires no other apps) is to use the TCP plugin's simple web server and create your own customized web page. You can basically create your own remote control and put a shortcut on your phone's home screen for easy access.

For anyone who is interested in this solution but who would like help getting started, I posted a mobile-friendly example html page that you are welcome to download and customize to your own needs.

The full post with some instructions: http://voxcommando.com/forum/index.php?topic=2307.msg20038#msg20038

The javascript in the html attachment includes some explanatory commenting, but not a lot, so if you'd like more details or clarification feel free to ask.

The script makes use of VoxCommando's API to communicate with VC (executing specific actions in VC and asking for information from VC): http://voxcommando.com/mediawiki/index.php?title=API_Application_Programming_Interface

[Dave]

Hi nime5ter, thanks for this great example!

I guess I have to learn JavaScript now

If anyone is interested, I made some slightly changes to the script, so that now the sliders will poll the volume data automatically every second. You can change the time between two polls easily with the variable "pollTime" in line 11.

So if you use more than one device to remote control VC the sliders will automatically adjust to the right volume without clicking the label. The same can of course be done with the toggle switches.

I'm not sure if this is the best way to handle a multi device scenario, since it will flood the VC history especially if you use allways-on devices like a wall mounted tablet. Is there a way to "push" data from VC to the website?

[Kalle]

Hi Dave,

will this help? 
https://en.wikipedia.org/wiki/Hypertext_Transfer_Protocol#Request_methods

http://voxcommando.com/mediawiki/index.php?title=Actions#Post

[jitterjames]

If anyone is interested, I made some slightly changes to the script, so that now the sliders will poll the volume data automatically every second. You can change the time between two polls easily with the variable "pollTime" in line 11.

I don't recommend you do that if you still want to use VoxCommando for other things, like voice commands.

[Dave]

Yes I was afraid it could affect the functionality of VC, at least with this high pooling rate. 

Is there any other way to display always up to date values?

@Kalle: I don't see a way to use this, but I'm not experienced with JavaScript and all those web based stuff, so I could be wrong...

[jitterjames]

I'm not sure if this is the best way to handle a multi device scenario, since it will flood the VC history especially if you use allways-on devices like a wall mounted tablet. Is there a way to "push" data from VC to the website?

Probably you could have VC write to a file and the Javascript could poll the file, but first VC would need to know that a value had changed in order to update the file.  If VC is not the one changing it then it can only know by polling, which brings us back to our original problem.  Anyone trying to completely replace a web UI-based home automation system using this technique is probably going down the wrong path.  We are pushing some simple tools beyond what they were designed to do.

But honestly, do you really need to have your sliders always up-to-date once per second?  I think not.  Most of the time you would want to set them and then they will be at the correct value because you set them.  Nime5ter's solution for reading the values seemed good to me for when you want to check the current value. 

If you are going to poll them, I would do it once per minute at the most, but if you have 6 sliders we are back down to approximately 10 seconds...  It is not just the history window that is the issue, VC can only do one command at a time (generally speaking), and any other commands generated by events or voice commands will have to wait until the polling command is finished before they can execute.  This by itself might not be a problem, but when you combine it with all the other crazy things people are doing you are bound to run into problems.

[nime5ter]

You can, however, have the page automatically check for the volume values when it first loads.

That way your volume level bars will show the current volume when you first launch the page without having to click (and any time you refresh the page).

[Dave]

Thanks for the explanation!
Writing to and reading from an external file sounds good for my needs, now I only need to find out how to do it

But honestly, do you really need to have your sliders always up-to-date once per second?  I think not.  Most of the time you would want to set them and then they will be at the correct value because you set them.  Nime5ter's solution for reading the values seemed good to me for when you want to check the current value. 

OK, maybe not once a second. In my scenario I'm using three smartphones and a tablet to control VC. One phone is only used as remote/microphone and has the page always loaded. Therefore it would be nice to have up to date values on all devices. But of course it is not needed, I was just curious what could be done with VCs webserver.

[Haddood]

I agree with James .... Too much pooling is a killer ... To achieve what you want apps are suited better than web pages ... Those apps should hAve servers (tcp, udp) so things can be changed by event rather manually pooling values ... So things should work like this:
App tell VC to do something ... VC do it ... Then broadcast message (probably udp) then all apps update value ...

For webpage ... I think nime5ter suggestion is perfect ... Update on load .... In fact I was searching on how to do it with the jQuery... As I never used it before

[nime5ter]

https://learn.jquery.com/using-jquery-core/document-ready/

[nime5ter]

For those who prefer a darker theme, this is a variation on the original script I posted. This is a standard jquery mobile theme, I didn't do anything with it. You can also obviously create your own custom theme.

The attached revised vox_remote.html file uses this standard "theme b".

I've also added a function so that when you first load the page it checks the current volume levels and displays those.

After that, the displayed levels are only updated if you click on the labels as per the original script. (As Dave demonstrates above, the other way to do this is with polling, but for my purposes this is overkill.)