Need help getting value from html slider on yun to arduino value

Question

My setup: arduino leonardo + yun shield

What I'm trying to accomplish: Display a temperature via one-wire on html served by yun. Allow user to set goal temperature via slider bar on yun html page and have that set the value of a variable in the function "goaltemp".

Here is my html:

    <!DOCTYPE html>
<html>
    <head>
        <title>AngularJS / Arduino</title>
        <meta name="viewport" content="width=device-width">

        <script type="text/javascript" src="zepto.min.js"></script>
        <script type="text/javascript">
        function refresh() {
            $('#content').load('/arduino/temperature');
        }
        var value;
        function sendVal() {
            $.get('/arduino/goaltemp' + value, function(){
                    }
                );
            }
            function updateVal(val) {
            value = val;
            $("#val").text(value);
            sendVal();
            }
        </script>

    </head>
    <body onload="setInterval(refresh, 2000);">
      <span id="content">0</span>
      <p>Goal Temperature:
      <input type="range" min="0" max="230" onchange="updateVal(this.value);">
      <p id="val">0</p>
      </p>


    </body>
</html>

Here is my arduino sketch:

#include <Bridge.h>
#include <YunServer.h>
#include <YunClient.h>

#include <SevSeg.h>
#include <OneWire.h>
#include <DallasTemperature.h>
//*****Temp Read
  //code from http://milesburton.com/Main_Page?title=Dallas_Temperature_Control_Library
  //Orange Stripe is PWR: 3-5V, 
  //White Stripe is GND
  //Blue Stripe is data.

  // Data wire is plugged into pin 2 on the Arduino
#define ONE_WIRE_BUS 2
  // Setup a oneWire instance to communicate with any OneWire devices (not just Maxim/Dallas temperature ICs)
  OneWire oneWire(ONE_WIRE_BUS);
  //Powerswitch Tail
  const int powerPin = A0;
  boolean powerOn = false;
  // Pass our oneWire reference to Dallas Temperature. 
  DallasTemperature sensors(&oneWire);

// Listen on default port 5555, the webserver on the Yún
// will forward there all the HTTP requests for us.
YunServer server;
String startString;
long hits = 0;

void setup() {
  //Serial.begin(9600);

  // Bridge startup
  Bridge.begin();

  // Listen for incoming connection only from localhost
  // no one from the external network could connect
  server.listenOnLocalhost();
  server.begin();

  // get the time that this sketch started:
  Process startTime;
  startTime.runShellCommand("date");
  while (startTime.available()) {
    char c = startTime.read();
    startString += c;
  }
}

void loop() {
  int temp = (sensors.getTempFByIndex(0));
  sensors.requestTemperatures(); // Send the command to get temperatures

  // 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
    Serial.println(command);
    // is "temperature" command?
    if (command == "temperature") {
      // get the time from the server:
      Process time;
      time.runShellCommand("date");
      String timeString = "";     
      while (time.available()) {
        char c = time.read();
        timeString += c;
      }
      Serial.println(timeString);
      int sensorValue = analogRead(A1);
      // convert the reading to millivolts:
      // convert the millivolts to temperature celsius:
      // print the temperature:
      //client.print("Current time on the Y&uacute;n: ");
      //client.println(timeString);
      client.print("<br>Current temperature: ");
      client.print(temp);
      client.print(" &deg;F");
      //client.print("<br>This sketch has been running since ");
      //client.print(startString);
      client.print("<br>Hits so far: ");
      client.print(hits);
    }
      if (command == "goaltemp") {
      int value = client.parseInt();
      client.print("<br>The Goal Temperature is ");
      client.print(value);
      client.print(" &deg;F");
      }

    // Close connection and free resources.
    client.stop();
    hits++;
  }

  delay(50); // Poll every 50ms
}

The temperature reporting currently works great. I cannot, however, figure out how to pass the value of the slider in my html to arduino. Any advice or help would be greatly appreciated!

score 0 · Answer 1 · answered Jan 03 '16 at 01:39

Have you checked out the example code and documentation here: https://www.arduino.cc/en/Guide/ArduinoYun#toc20? The sample code there covers what you are attempting to do.

Specifically, pay attention to how the code author breaks down the processing of the URL arguments using different functions as so:

void process(YunClient client) {
  String command = client.readStringUntil('/');

  if (command == "digital") {
    digitalCommand(client);
  }
  if (command == "analog") {
    analogCommand(client);
  }
  if (command == "mode") {
    modeCommand(client);
  }
}

In each processing function, you can simply do a client.readStringUntil('/') to parse down the tree. Eventually, you will get your goaltemp value.

Hint, you may want to format your URL as /arduino/goaltemp/20 - that will make parsing easier.

Good luck!

Need help getting value from html slider on yun to arduino value

1 Answers1