Host end software - HTML?

Hardware Arduino Yún
1

Okay, I have my Yun code working using the Bridge to communicate with my host PC that will control the network of Yun's.

Now I need to write a webpage to control my Yuns. In a nutshell, I need a page with a group of button Icons that when clicked on will issue URL style commands to the Yuns, and process the Yun response when it returns. In other words, when I click an icon on the page it should send a command such as http://www.StationTwoA.local/arduino/digital/11/1 and then it should wait a period of time to see that it gets a response like 2A D11 = 1 back so the host PC knows that Station Two A received the command and acted on it within a set period. If it doesn't, the host sets a warning flag, if it does get the response it sets an Icon flashing to indicate that the light was turned on.

I also need to poll the Yun's once every few minutes to ask for the battery voltage, and if it's low to alert the operator.

And, to complicate things, I need to be able to issue several URL commands with one click, and process those several responses back.

Any idea what software I should use to build that page? It doesn't seem like HTML is going to be powerful enough.

Thanks,

Dean

2

Awesome! Something I know a little about.

I'd advise you to look at jQuery or zepto - I've built a webpage similar to what you describe (buttons to send commands, real-time data through periodic polling). To be fair, they are only libraries of Javascript - which usually sits within HTML. BUT - at least for one Yun, they work. Here's some of the jQuery code I have on my website:

 <script type="text/javascript">
	  var variabley = 'nope'; //holds the value of the response from the Arduino
	  var string13true = "Pin D13 set to 0";
	  var string13false = "Pin D13 set to 1";
	   	function refresh() { //refresh is called every 2000 millis as set in HTML
		$('#content').load('/arduino/digital/13', function(results) { //gets the status of 13 from the local arduino
		variabley = results; //stores the value of the response
		});
		
		if ((variabley.trim()) == string13false) //if reponse == "pin d13 set to 1"
		{
			$("#status_indicator").attr("src", "images/yellow_button.jpg"); //then change the value of the image to the on image
		}
		else if ((variabley.trim()) == string13true) //if not
		{
			$("#status_indicator").attr("src", "images/grey_button.jpg"); //change the value to the off image
		}
		}
</script>

The above code stipulates a button that is yellow if my LED is on, and is grey if my LED is off. You could easily change the functionality to refer to the status of your battery.

Here's the jQuery I use to manage my buttons:

$(document).ready(function() { //when the HTML is loaded

  $("#13on").click(function() { //if the button for 13on is clicked
    $.get('/arduino/digital/13/1', function(){}); //send the command 'LED 13 on' to the arduino
	  });

  $("#13off").click(function(){ //same as above but with 13off button 
	$.get('/arduino/digital/13/0', function(){}); //same as above but command is 'LED off'
	});
});

And that's the code to get your buttons working.

You can certainly copy/paste this code, but I had to hack and slash it out of the rest, so I'm not sure if it works perfectly right now.

If you want to build a webpage, I'd recommend going through all of the free classes on jQuery and HTML (maybe CSS too) on w3schools. Just google w3schools HTML, w3schools jQuery, w3schools CSS.

Best of luck! - The only issue with this approach is that I'm not sure how it would work out getting the webpage to talk to multiple Yun. Your best bet would probably be to have each Yun host its own webpage, and then use JSON or something akin to talk between the webpages and a mother webpage. IDK though, cross-site scripting issues can be difficult to tackle.

Let me know if there's any questions I can answer - I went through the whole process of figuring it out myself and I know how frustrating it can be.

Happy programming,
kiobod

3

Thank you Kiobod! I will look into those website tutorials.

Dean