I need some help with a Yun demonstration project I am doing. I am using the yun to control a three color LED and measure/report the current thru the LED device.
I have done a similar project with the Uno and an ETHERNET shield. I saw the code get large quickly due to needed have the HTML code stored as string data in the Arduino code. The Yun with its Linux web server allows the HTML code to be kept seperate from Arduino code.
I have been using examples from the Arduino forum, Arduino Scuola and other web sites. However, I have run into a problem with displaying the measured current value on the client web page. I can not get the
values to be displayed in the desired place on web page.
Below is the HTML code that I am using:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>JustGreg's Basic Web Page</title>
<script type="text/javascript" src="zepto.min.js"></script>
<script type="text/javascript">
function ledon()
{
$('#content').load('/arduino/ledon');
//("Command to turn on LED");
}
function ledoff()
{
$('#content').load('/arduino/ledoff');
//("Command to turn off LED");
}
function selectColor()
{
var pickedColor = color.options[color.selectedIndex];
var passColor = "/arduino/" + pickedColor.value;
$('#content').load(passColor);
}
</script>
</head>
<body onload="setInterval(refresh, 2000);">
<h1 Align=Center>JustGreg's Arduino Test Web Server
using Zepto(Jquery) and Java Script</h1>
<h2 Align=Center>This Manlipulates LED devices attached to a Yun</h2>
<p Align=Center>Press a button to do an operation</p>
<p>Simple buttons for control of a single LED</p>
<p Align=Center>
<span id="content"><!-- 0 --></span>
<button onclick="ledon()">LED ON</button>
<button onclick="ledoff()">LED OFF</button>
</p><hr>
<p>Menu Selection type button</p>
<p Align=Center>
<select id="color" name="Select Color" size="1" onclick="selectColor()">
<option value="black">Black</option>
<option value="red">Red</option>
<option value="green">Green</option>
<option value="blue">Blue</option>
<option value="yellow">Yellow</option>
<option value="cyan">Cyan</option>
<option value="magenta">Magenta</option>
<option value="white">White</option>
</select>
</p><HR>
<p>Now to get information from a sensor
<table>
<tr>
<th>The current in milliamperes is </th>
<td id="current">0</td>
</tr>
</table>
</p>
</body>
</html>
Here is the Arduino code that I am using:
/*
webRGB 26 Jan 2015 derived from
A copy of the webRGB.html and a copy of zepto.js, a minimized
version of jQuery need to be placed in /mnt/sda1/arduino/www. If the
IDE sees the Yun then it is possible to do this with IDE when the files
are in sketch directory (see original webLed). To use, open browser to
http://your_yun_name.local/sd/webRGB.html
RGB LED pins are:
3 = redPin, 4 = greenPin, 5 = bluePin for LED in array
The common cathode is thru 100 ohm resistor to GND. This measures current.
The resistor for the red pin is 330 ohms. Green resistor is 510 ohms.The blue
resistor is 270 ohms. The different resistor values compensate for the volt drops
of color LED devices and help to provide the right color balance.
*/
#include <Bridge.h>
#include <YunServer.h>
#include <YunClient.h>
int ledPins[] = {3, 4, 5}; //Red, Green, Blue
const int redPin = 3;
/*LED is common cathode, need +5 for LED ON
Common cathode is the longest lead, second in from case flat
for device supplied with 16MHz kit.
common anode, ON = LOW
*/
const boolean ON = HIGH;
const boolean OFF = LOW;
//array defining LED state for color, these can not be constants.
boolean RED[] = {ON, OFF, OFF};
boolean GREEN[] = {OFF, ON, OFF};
boolean BLUE[] = {OFF, OFF, ON};
boolean YELLOW[] = {ON, ON, OFF};
boolean CYAN[] = {OFF, ON, ON};
boolean MAGENTA[] = {ON, OFF, ON};
boolean WHITE[] = {ON, ON, ON};
boolean BLACK[] = {OFF, OFF, OFF};
// Listen on default port 5555, the webserver on the Yun
// will forward there all the HTTP requests for us.
YunServer server;
String readString;
String command;
String currentVal;
void setup() {
pinMode(ledPins[0], OUTPUT); //pin 3 for red
pinMode(ledPins[1], OUTPUT); //pin 4 for green
pinMode(ledPins[2], OUTPUT); //pinn 5 for blue
// Bridge startup
Bridge.begin();
/* Listen for incoming connection only from localhost
(no one from the external network could connect) */
server.listenOnLocalhost();
server.begin();
}
void loop() {
// Get clients coming from server
YunClient client = server.accept();
// There is a new client?
if (client) {
// read the command
String command = client.readString();
command.trim(); //kill whitespace
//Process command for LedOn or LedOff
if (command == "ledon") {
digitalWrite(redPin, HIGH);
}
else if (command == "ledoff") {
digitalWrite(redPin, LOW);
}
//Now to process the command from string to the boolean color array
if (command == "black")
{
setColor(ledPins, BLACK);
currentVal = currentMeasure();
client.print(currentVal);
}
if (command == "red")
{
setColor(ledPins, RED);
currentVal = currentMeasure();
client.print(currentVal);
}
if (command == "green")
{
setColor(ledPins, GREEN);
currentVal = currentMeasure();
client.print(currentVal);
}
if (command == "blue")
{
setColor(ledPins, BLUE);
currentVal = currentMeasure();
client.print(currentVal);
}
if (command == "yellow")
{
setColor(ledPins, YELLOW);
currentVal = currentMeasure();
client.print(currentVal);
}
if (command == "cyan")
{
setColor(ledPins, CYAN);
currentVal = currentMeasure();
client.print(currentVal);
}
if (command == "magenta")
{
setColor(ledPins, MAGENTA);
currentVal = currentMeasure();
client.print(currentVal);;
}
if (command == "white")
{
setColor(ledPins, WHITE);
currentVal = currentMeasure();
client.print(currentVal);
}
// Close connection and free resources.
client.stop();
}
delay(50); // Poll every 50ms
}
void setColor(int* led, boolean* color)
{
for(int i = 0; i < 3; i++){
digitalWrite(led[i], color[i]);
}
}
String currentMeasure()
{
int rawVal = analogRead(A0);
float milliAmp = rawVal / 20.46;
String tmp = String(milliAmp);
return tmp;
}
Part of my problem is the examples and other reference books I have been using only have a single control and display element in the HTML. In this case, I am using multiple elements. I want to display the measured current using a simple one row table. I have id attribute (current) for the table data cell.
The examples I have seen have a client.print with HTML code to display the sensor value or just print a string containing the value. I have not been able to make this work.
I think the solution is having client.print use the correct HTML that uses the id attribute for and displays the information in the table cell. The other solution is to get the information from the client.print
into a javascript variable and use .getElementsbyName function to set table cell value. The javascript probably needs to run when the page is "refreshed". However, all my effort at this time have only shown my lack of knowledge of HTML and Javascript coding.
Thank in advance for any help on this either by pointing to example or providing code for HTML or Javascript.
Last question, is there a way to donate some money for the operation of the formun? The forum has been very valuable to me in learning about Arduino.
, sort of. Yes, Shapeshifter, I had the url incorrect! Here is the function code to get the data: