Sending javascript Functions - Newbie

Discussion in 'Programmer's Corner' started by james211, Mar 27, 2016.

  1. james211

    Thread Starter Member

    May 29, 2012
    210
    2
    Hello,

    So with the help of some kind folks I was able to build the coding behind a project I've been wanting to do for some time. The project is a four channel, expandable, programmable doser for aquariums based on the particle platform (particle.io). I've been able to program manual on/off functions, calibration functions and programming that allows the user to set the total dose, and how often it should dose over a 24hr period.

    Now comes the part where I need some more help...I've hit a wall on the second part of the programming, a webpage that uses javascript. I've been able to lay the webpage out, and I was able to get a function working that pulls the current settings, but I can't seem to get any of the functions working for the buttons.

    Please let me know if you can help me work through this.

    Here is the particle build code, and below that is the HTML code that I started.

    Code (C):
    1. typedef struct {
    2.     int onTime;
    3.     int offTime;
    4.     float totalDose;
    5.     float doseRate; // mL/min
    6.     int connectedPin;
    7.     int calibrationEnd = 90000; // a vaule greater than "now" can ever be
    8. } Channel;
    9.  
    10. void updateChannel(Channel c);
    11. float now;
    12. char getRelay1[75];
    13. char getRelay2[75];
    14. char getRelay3[75];
    15. char getRelay4[75];
    16.  
    17. Channel channels[4];
    18.  
    19.  
    20. void setup() {
    21.     channels[0].connectedPin = D0;
    22.     channels[1].connectedPin = D1;
    23.     channels[2].connectedPin = D2;
    24.     channels[3].connectedPin = D3;
    25.     pinMode(D0,OUTPUT);
    26.     pinMode(D1,OUTPUT);
    27.     pinMode(D2,OUTPUT);
    28.     pinMode(D3,OUTPUT);
    29.     Serial.begin(9600);
    30.     Time.zone(-4);
    31.     delay(3000);
    32.     Particle.function("setupChannel", setupChannel);
    33.     Particle.function("calibrate",calibrate);
    34.     Particle.function("manual",manual);
    35.     Particle.variable("getRelay1", getRelay1);
    36.     Particle.variable("getRelay2", getRelay2);
    37.     Particle.variable("getRelay3", getRelay3);
    38.     Particle.variable("getRelay4", getRelay4);
    39.    }
    40.  
    41.  
    42. void loop() {
    43.     now = Time.hour() * 3600 + Time.minute() * 60 + Time.second();
    44.     Serial.println(now);
    45.     for (int i=0;i<4;i++) {
    46.         updateChannel(i);
    47.     }
    48.  
    49.  
    50.     delay(5000);
    51. }
    52.  
    53.  
    54.  
    55. void updateChannel(int index) {
    56.     Channel *c = &channels[index];
    57.     if (c->onTime <= now && c->totalDose > 0) {
    58.         digitalWrite(c->connectedPin, HIGH);
    59.         Serial.printlnf("Fired Relay %d", index);
    60.         c->onTime += 7200;
    61.     }
    62.  
    63.     if (c->offTime <= now && c->totalDose > 0) {
    64.         digitalWrite(c->connectedPin, LOW);
    65.         Serial.printlnf("Turned off Relay %d", index);
    66.         c->offTime += 7200;
    67.     }
    68.  
    69.         if (c->calibrationEnd <= now) {
    70.         digitalWrite(c->connectedPin, LOW);
    71.         c->calibrationEnd = 90000;
    72.     }
    73. }
    74.  
    75.  
    76. int setupChannel(String cmd) { // cmd syntax: "channel#,startTime,doseRate, dose" (startTime is sent as hour*3600 + minute*60 + second)
    77.     Serial.println(cmd);
    78.     char *rmdr;
    79.     char *stringArgs = (char*)cmd.c_str();
    80.     int index = atoi(strtok_r(stringArgs, ",", &rmdr));
    81.     Channel* c = &channels[index];
    82.     c->onTime = atof(strtok_r(NULL, ",", &rmdr));
    83.     c->doseRate = atof(strtok_r(NULL, ",", &rmdr));
    84.     c->totalDose = atof(rmdr);
    85.     float dosePerActuation = c->totalDose/12;
    86.     float durationPerActuation = (dosePerActuation/c->doseRate) * 60; // assuming doseRate is in volume/minute
    87.     c->offTime = c->onTime + durationPerActuation;
    88.  
    89.     Serial.printlnf("channel#: %d, onTime: %d, doseRate: %f, totalDose: %f", index, c->onTime, c->doseRate, c->totalDose);
    90. char *str;
    91.     switch (index) {
    92.         case 0:
    93.             str = getRelay1;
    94.             break;
    95.         case 1:
    96.             str = getRelay2;
    97.             break;
    98.         case 2:
    99.             str = getRelay3;
    100.             break;
    101.         case 3:
    102.             str = getRelay4;
    103.             break;
    104.     }
    105.     sprintf(str, "onTime: %d, doseRate: %.1f, totalDose: %.1f", c->onTime, c->doseRate, c->totalDose);
    106.     return 1;
    107. }
    108.     int calibrate(String cmd) {
    109.     char *rmdr;
    110.     char *stringArgs = (char*)cmd.c_str();
    111.     int index = atoi(strtok_r(stringArgs, ",", &rmdr));
    112.     Channel* c = &channels[index];
    113.  
    114.     if (strcmp(rmdr, "on") == 0) {
    115.         digitalWrite(c->connectedPin,HIGH);
    116.         c->calibrationEnd =  Time.hour() * 3600 + Time.minute() * 60 + Time.second() + 60;
    117.         return 1;
    118.     }
    119.     else if (strcmp(rmdr, "off") == 0) {
    120.         digitalWrite(c->connectedPin,LOW);
    121.         return 0;
    122.     }
    123.     else {
    124.         return -1;
    125.     }
    126. }
    127.     int manual(String cmd) {
    128.     char *rmdr;
    129.     char *stringArgs = (char*)cmd.c_str();
    130.     int index = atoi(strtok_r(stringArgs, ",", &rmdr));
    131.     Channel* c = &channels[index];
    132.  
    133.     if (strcmp(rmdr, "on") == 0) {
    134.         digitalWrite(c->connectedPin,HIGH);
    135.         return 1;
    136.     }
    137.     else if (strcmp(rmdr, "off") == 0) {
    138.         digitalWrite(c->connectedPin,LOW);
    139.         return 0;
    140.     }
    141.     else {
    142.         return -1;
    143.     }
    144. }

    HTML:
    1.     <!DOCTYPE HTML>
    2.     <html>
    3.       <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript" charset="utf-8">  </script>
    4.     <body>
    5.     <p> <b>4 Channel Doser</b>
    6.  
    7.       <p>Doses Over 24hr Period:
    8.          <select id="totalDose"></select>
    9.          </p>
    10.  
    11.       <p>Pump 1: Current setting <span id="relay1">unknown</span>
    12.         <button id="getR1" onclick="getRelay(1)">Refresh</button>
    13.         &nbsp;&nbsp;&nbsp;&nbsp;New setting
    14.         <select id="relay1hours">
    15.         </select> :
    16.         <select id="relay1minutes">
    17.         </select>
    18.         </p>
    19.  
    20.       <p>Pump 2: Current setting <span id="relay2">unknown</span>
    21.         <button id="getR2" onclick="getRelay(2)">Refresh</button>
    22.         &nbsp;&nbsp;&nbsp;&nbsp;New setting
    23.         <select id="relay2hours">
    24.         </select> :
    25.         <select id="relay2minutes">
    26.         </select>
    27.         </p>
    28.  
    29.       <p>Pump 3: Current setting <span id="relay3">unknown</span>
    30.         <button id="getR3" onclick="getRelay(3)">Refresh</button>
    31.         &nbsp;&nbsp;&nbsp;&nbsp;New setting
    32.         <select id="relay3hours">
    33.         </select> :
    34.         <select id="relay3minutes">
    35.         </select>
    36.         </p>
    37.  
    38.       <p>Pump 4: Current setting <span id="relay4">unknown</span>
    39.         <button id="getR4" onclick="getRelay(4)">Refresh</button>
    40.         &nbsp;&nbsp;&nbsp;&nbsp;New setting
    41.         <select id="relay4hours">
    42.         </select> :
    43.         <select id="relay4minutes">
    44.         </select>
    45.         </p>
    46.      
    47.         <p> <b>Calibration</b>
    48.         <br><br>
    49.         Each pump will run for 60 seconds.  Enter measured amount, divide by 60 and click set.
    50.         </p>
    51.      
    52.         <p><button id="calibrate1"  onclick="calibration(0,1)">Pump 1</button>
    53.         &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Dose Rate
    54.         <input type="text" id="doseRate(1)" value="1.26">  mL/min
    55.         <button id="setR1" onclick="setRelay(1)">Set</button>
    56.         </p>
    57.      
    58.         <p><button id="calibrate2"  onclick="calibration(1,1)">Pump 2</button>
    59.         &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Dose Rate
    60.         <input type="text" id="doseRate(2)" value="1.26">  mL/min
    61.         <button id="setR2" onclick="setRelay(2)">Set</button>
    62.         </p>
    63.      
    64.         <p><button id="calibrate3"  onclick="calibration(2,1)">Pump 3</button>
    65.         &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Dose Rate
    66.         <input type="text" id="doseRate(3)" value="1.26">  mL/min
    67.         <button id="setR3" onclick="setRelay(3)">Set</button>
    68.         </p>
    69.      
    70.         <p><button id="calibrate4"  onclick="calibration(3,1)">Pump 4</button>
    71.         &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Dose Rate
    72.         <input type="text" id="doseRate(4)" value="1.26">  mL/min
    73.         <button id="setR4" onclick="setRelay(4)">Set</button>
    74.         </p>
    75.      
    76.         <p> <b>Manual ON/OFF</b>
    77.         </p>
    78.         <p>Pump 1:&nbsp;&nbsp;&nbsp;
    79.         <button id="pump1onbutton"  onclick="manual(0,1)">ON</button>
    80.         <button id="pump1offbutton"  onclick="manual(0,0)">OFF</button>
    81.         </p>
    82.      
    83.         <p>Pump 2:&nbsp;&nbsp;&nbsp;
    84.         <button id="pump2onbutton"  onclick="manual(1,1)">ON</button>
    85.         <button id="pump2offbutton"  onclick="manual(1,0)">OFF</button>
    86.         </p>
    87.      
    88.         <p>Pump 3:&nbsp;&nbsp;&nbsp;
    89.         <button id="pump3onbutton"  onclick="manual(2,1)">ON</button>
    90.         <button id="pump3offbutton"  onclick="manual(2,0)">OFF</button>
    91.         </p>
    92.      
    93.         <p>Pump 4:&nbsp;&nbsp;&nbsp;
    94.         <button id="pump4onbutton"  onclick="manual(3,1)">ON</button>
    95.         <button id="pump4offbutton"  onclick="manual(3,0)">OFF</button>
    96.  
    97.         <script type="text/javascript">
    98.      
    99.         var select = '';
    100.         for (i=1;i<=24;i++){
    101.            select += '<option val=' + i + '>' + i + '</option>';
    102.         }
    103.         $('#totalDose').html(select);
    104.  
    105.         for(i=0;i<24;i++) {
    106.                  for(relay=1;relay<5;relay++) {
    107.                               var rh = document.getElementById("relay"+relay.toString()+"hours");
    108.                               var opt = document.createElement("OPTION");
    109.                               opt.setAttribute("value", i.toString() );
    110.                               var nd  = document.createTextNode(i.toString());
    111.                               opt.appendChild(nd);
    112.                               rh.appendChild(opt);
    113.                               }
    114.                  }
    115.  
    116.        for(i=0;i<60;i++) {
    117.                  for(relay=1;relay<5;relay++) {
    118.                               var rm = document.getElementById("relay"+relay.toString()+"minutes");
    119.                               var opt = document.createElement("OPTION");
    120.                               opt.setAttribute("value", i.toString() );
    121.                               var nd  = document.createTextNode(i.toString());
    122.                               opt.appendChild(nd);
    123.                               rm.appendChild(opt);
    124.                               }
    125.                  }
    126.  
    127.          var deviceID    = "xxxx";
    128.          var accessToken = "xxxx";
    129.          var setFunc = "setRelay";
    130.          var getFunc = "getRelay";
    131.  
    132.          function getRelay(relay) {
    133.             requestURL = "https://api.particle.io/v1/devices/" + deviceID + "/" + getFunc + relay.toString() + "/?access_token=" + accessToken;
    134.                 $.getJSON(requestURL, function(json) {
    135.                     document.getElementById("relay"+relay.toString() ).innerHTML = json.result;
    136.                     });
    137.          }
    138.  
    139.          function setupChannel(relay) {
    140.            var newValue = document.getElementById("relay"+relay+"hours").value   + ":" +
    141.                           document.getElementById("relay"+relay+"minutes").value + ":" +
    142.                                                                             "00" + "*" +
    143.                           document.getElementById("relay"+relay+"duration").value;
    144.        var requestURL = "https://api.particle.io/v1/devices/" +deviceID + "/" + setFunc + relay + "/";
    145.            $.post( requestURL, { params: newValue, access_token: accessToken });
    146.          }
    147.                var setFunc = "manual()";
    148.  
    149.          function manual() {
    150.            if (newValue==1) {
    151.               paramStr = paramStr + ",HIGH";
    152.            } else {
    153.              paramStr = paramStr + ",LOW";
    154.            }
    155.        var requestURL = "https://api.particle.io/v1/devices/" +deviceID + "/" + setFunc + "/";
    156.            $.post( requestURL, { params: paramStr, access_token: accessToken });
    157.          }
    158.  
    159.        </script>
    160.         </p>
    161.     </p>
    162.     </body>
    163.     </html>
    Moderators note: used code tags for C in first code block
     
    Last edited by a moderator: Mar 28, 2016
  2. DickCappels

    Moderator

    Aug 21, 2008
    2,651
    632
    [bump]
     
Loading...