top of page

This topic could have several different titles, as the techniques discussed here could be used in so many different ways, but in this solution we'll take a look at triggering the execution of TouchControl buttons on your iOS device from links, buttons, or script on a web page running in a web browser on your PC.


Note: If you want to trigger execution of TouchControl buttons from a web page hosted in a Web View in a TouchControl activity on your iOS device, that is accomplished using the "Interactive Web Views" feature (see Instructions).


What you need:

  1. A web page with some links/buttons/script

  2. A web server to server up the web page

  3. TouchControl & TouchControl Server


1. The web page.
The page containing the links can be as simple or complex as you like. The only requirement is that each link that triggers a TC button needs to generate an HTTP request to TouchControl Server. Here is an example of a link and the associated script it should execute:


The link:
<a href="javascript:buttonRequest('MyButton');">;My Button</a>

The Javascript:
<script>
function buttonRequest(buttonName) {
  if (buttonName.length > 0) {
    xmlHttp = new XMLHttpRequest();
    xmlHttp.open("GET", http://tc-server-ip-address:tc-server-port/touchcontrol/udpserver?data= + buttonName, false);
    xmlHttp.send();
  }
}
</script>


The above link simply calls the supplied JavaScript function, which takes the name of a TC button (in this case "MyButton"), and sends it to TouchControl Server via a Javascript XMLHttpRequest. Just replace tc-server-ip-address with your TC Server's IP address, and replace tc-server-port with the main server port shown on the TC Server settings page. The rest is pretty straightforward Javascript, and that's all that is really needed for the web page. Of course you can style the page any way you'd like, but I'll leave that up to you. The downloadable sample includes a web page with the above elements.


2. The web server.
Add a Web View button to an activity layout, and enter the URL to the web page on your web server in the Web View button configuration, as always. Simple.


3. TouchControl & TouchControl Server.

Of course you need to create an activity with a Web View button that will display the web page, as described above. Also on that activity, you'll need to add all of the buttons that will be triggered by the web page links. Just add the buttons as hot-spots (no image), disable them, and size them small-ish and drag them out of the way.

The last element you'll need in your activity is a Feedback Listener button to listen for the messages sent from the web page links and execute the associated buttons. The message that will be sent to the listener will simply be the button name to execute, so the listener button need only contain the following script:


return '[#]' + _feedback;

This will create the required formatted return string to execute the button referenced in the listener's feedback (which is the message sent from the web page link). Simple.

The Feedback Listener button also needs a host to define where to listen for its messages. In Interface Manager (in TC Server Settings), add a new "Feedback Listener" interface, give it a unique/meaningful name, leave the "Multicast Group" blank, and set the port to 8850 (this port number is important, as you'll see later). Use this interface as the "Host" in the Feedback Listener button's config.


That's it!


So what ties all of this together? Well, that's where TouchControl Server comes in. TC Server contains a simple UDP server process that takes data sent to it via an HTTP request and re-broadcasts it out as a UDP packet on your network. So the link and script in step 1 sends a button name to TC server, which in turn broadcasts the button name onto your network (on port 8850), which is then received by the Feedback Listener on your iOS device, which in turn executes the associated button on your layout. Simple. Really.


A complete, working sample activity is available for download that includes all of the above features, except the Interface Manager entry mentioned above (as those are not included in activity exports - so just create one as described above). Also, after importing the activity into TouchControl Server, locate the "webbuttons.htm" file in the "HTML" folder located under your TouchControl Server data directory (where your TC config files are located - the path can be found on the Settings page in TouchControl Server), and copy it onto a web server to be referenced in step 2 above. This sample activity and associated web pages also demonstrate controlling TouchControl directly from a web page using the "Interactive Web View" feature, discussed here. Note that the sample activity is formatted for full-screen on the iPhone.


One additional point to consider. This solution, as written, requires that TouchControl Server is running at all times on your network to receive the HTTP requests and re-broadcast the UDP packets. If you don't normally have TC Server running and would rather not have to, there is another tool that can be used to perform the same function. Node.js is an open-source platform for easily creating light-weight network applications in Javascript. Using Node.js, you can very easily create a light-weight HTTP server/UDP broadcaster that performs the same functionality provided by TC Server described above. I won't go into a complete explanation of Node.js at this time, but the sample download also includes a "node" directory with a script file that will provide the HTTP/UDP server functionality. Once you have Node.js installed, simply go to a command prompt and enter: node path/udpserver.js (udpserver.js being the script file located in the import .zip file, and path being wherever you extracted it to). This process will need to remain running as long as you want to execute buttons in this manner, just as TC Server would, but this is just a lighter-weight implementation if you prefer. You'll need to edit the script file with some of your network info, and also adjust the script in step 1 accordingly, and the .js file includes some instructions for that as well. If you have any questions on this, feel free to contact me or post a question in the forums.


And one last disclaimer. UDP is, by definition, a non-guaranteed method of sending data across your network. As such, depending on your network at any given moment, you may have instances where you click a link in the web page and you see no activity in TouchControl on your device, and then an additional click performs the desired action. Hopefully this will be few and far between, but something you just need to be aware of.


On first read, this solution may sound a bit complicated, but after you take a look at the sample, give it a try, and see how it works, I think you'll find it's really pretty straightforward, and really shows the versatility and power of TouchControl!


Enjoy!

 

Control TouchControl from a web page 

 

bottom of page