Peristaltic Doser - Doser set amount over 24hr period

Makes sense, since that's what you're telling it to do. Any and all data, go to "r1".

Yup, also makes sense. It's the equivalent of the pizza in which everything get's called, since there's nothing separating them.

That's most likely because you're using the then structure incorrectly. It seems as though it takes only one function, and you're trying to have it handle four.

Not sure why you dragged that requestURL into this. It serves no function here. Besides that, it isn't declared properly as a variable (though JS is quite forgiving on that). However, the then function calls a function, and passes it a variable as an argument, which you've now called requestURL. It doesn't care what you've made that to be earlier. Hence, the last two codes are functionally identical.


You need to find the balance between the first and second example. You only want it to show in a certain place (1st example), yet call that from within the same then part (2th example). Earlier, you mentioned:

How could you incorporate that?

hmmā€¦do I need to incorporate an ā€œif, else if, elseā€ into the statement?

Not exactly sure how to incorporate, but I would picture it, in laymenā€™s termsā€¦not codeā€¦

if getRelay = 1
display r1;
else if getRelay equals 2
display r2;
else if getRelay equals 3
display r3;
else getRelay equal 4
display r4;

Yup, makes sense to me :wink:

Maybe you pass the target elementID along with your variable name and then just use that
like

<button type="button" onclick="variableGet('getRelay1','r1')">Relay1</button><br>

Understanding the meaning of parameters and their use might save you some hassle (and if-elses)

I was having a having a hard time getting the if-else statements to work, so I gave @ScruffR recommendation a try. Took me a bit to work out all the details, but in the end the code below is working perfectly.

<html>
  <head>
    <title>Particle Javascript Example</title>
    
    <script type="text/javascript" src="http://cdn.jsdelivr.net/particle-api-js/5/particle.min.js"></script>
  </head>

  <body>
  <br>
    <span id="r1"></span>
    <button type="button" onclick="variableGet('getRelay1', 'r1')">Relay1</button><br>
    <span id="r2"></span>
    <button type="button" onclick="variableGet('getRelay2', 'r2')">Relay2</button><br>
    <span id="r3"></span>
    <button type="button" onclick="variableGet('getRelay3', 'r3')">Relay3</button><br>
    <span id="r4"></span>
    <button type="button" onclick="variableGet('getRelay4', 'r4')">Relay3</button><br>
 
  
    <script>
      var particle = new Particle();
      
      var token;
      var ActualDeviceID = "35002400094734343231xxxx";      

      function variableGet(variableName, r){
        var vrGr = particle.getVariable({ deviceId: ActualDeviceID, name: variableName, auth: token });
        
        vrGr.then(
           function(data) {
            document.getElementById(r).innerHTML = data.body.result;
          }
          );
      }
      particle.login({username: 'xxxx@xxx.net', password: 'xxxxxx'}).then(
        function(data){
          console.log('API call completed on promise resolve: ', data.body.access_token);
          token = data.body.access_token;
        },
        function(err) {
          console.log('API call completed on promise fail: ', err);
        }
      );
    </script>
  </body>
</html>
1 Like

Splendid! That was actually going to be the next proposed step.

For completeness sake, this is the if variant:

function variableGet(variableName){
  var vrGr = particle.getVariable({ deviceId: ActualDeviceID, name: variableName, auth: token });
  
  vrGr.then(
    function(data) {
      if (variableName == "getRelay1"){
        document.getElementById("r1").innerHTML = data.body.result;
      } 
      else if (variableName == "getRelay2"){
        document.getElementById("r2").innerHTML = data.body.result;
      } 
      else if (variableName == "getRelay3"){
        document.getElementById("r3").innerHTML = data.body.result;
      } 
      else if (variableName == "getRelay4"){
        document.getElementById("r4").innerHTML = data.body.result;
      } 
    }
  );
}

Now, the one youā€™ve currently got can be made even easier, without the need for the additional r argument. Youā€™re already passing through a unique identifier in the form of the getRelayX. Itā€™s a bit double to then add rX, isnā€™t it? How could you make that simpler, using what youā€™ve already got? hint: ā€˜span idā€™

1 Like

ahhā€¦I see what I was doing wrong hereā€¦I was trying to do the if-else statements without hard coding the getRelayX identifier. But now it makes senseā€¦

As for the second partā€¦I just want to clarify a few things. With thisā€¦ It's a bit double to then add rX are you referring to the rX parameter added to the html buttons? Are you saying that can be removed from the button parameters?

Yup. You can't 'just' strip it, you'll have to make another small adjustment.

Try to figure out what the things below have in common as far as identifiers go. How could you put that information in one argument (since getRelay1 and r1 are basically indicating the same thing...)?

<span id="r1"></span>
<button type="button" onclick="variableGet('getRelay1', 'r1')">Relay1</button>
function variableGet(variableName, r){...
...
document.getElementById(r).innerHTML...
...

Maybe a long these linesā€¦but this was the thinking.

function variableGet (variableName+span id){
document.getElementById(span id).innerHTML

Not quite.

Both getRelay1 and r1 are basically saying that you need the first relay/span. Now, the getRelay1 is the variable name, so you canā€™t change that easily. There is however something that uses r1 that can be changed easily to getRelay1, thatā€™ll allow you to use that instead of r1, thus removing the need for r1 entirely.

In my last post, try taking r1 out entirely (everywhere), and figure out what youā€™d have to insert/change to still make it work.

you got me on this oneā€¦I know r1 is needed in the document.getElementById(""), without it no info is passed to that string. We still need a parameter or string passed to document.getElementById("") to print the data on the html page.

Correct. And the only argument youā€™re left with is getRelayXā€¦ soā€¦?

I tried thisā€¦but in order to eliminate the need for multiple strings of javascript, donā€™t weed need to declare whats in the parenthesis as a variable? Or am I completely off track hereā€¦

  <span id="getRelay(1)"</span>
  <button type="button" onclick="variableGet('getRelay1')">Relay1</button><br>
      function variableGet(variableName){
        var vrGr = particle.getVariable({ deviceId: ActualDeviceID, name: variableName, auth: token });
        
        vrGr.then(
           function(data) {
            document.getElementById("getRelay(X)").innerHTML = data.body.result;
          }
         );

Starting to look good.

Previously, you had a variable here, which worked:

document.getElementById(r).innerHTML...

I wouldnā€™t know why youā€™d want to change a winning formula :wink:

And this needs to match whatever gets looked for by the bit above:

<span id="getRelay(1)"</span>

Where did you get the brackets from?

Wowā€¦this is really rattling my brain. The span IDā€™s cannot be the same from my understanding.

This doesnā€™t work, nor does putting parenthesis around the 1 of getRelay(1) so some how you have to tell the document string that relay number is variable no?

  <span id="getRelay1"</span>
  <button type="button" onclick="variableGet('getRelay1')">Relay1</button><br>
      function variableGet(variableName){
        var vrGr = particle.getVariable({ deviceId: ActualDeviceID, name: variableName, auth: token });
        
        vrGr.then(
           function(data) {
            document.getElementById(r).innerHTML = data.body.result;
          }
         );
      }

Almost there...
When I said:

I said you had a variable there, I didn't say which one, nor did I say it had to be that exact one.
Seeing as you're no longer inputting r into the function, you can't use it. You've now only got one 'argument' at you disposal. Might want to use that one :wink:

What element is this going to be looking for as it stands now, and what should it be looking for?

document.getElementById(r).innerHTML = data.body.result;

Try writing this out somewhere, where you replace all variables by the values they're being passed, might give you a better view of what's going on:

 <span id="getRelay1"</span>
  <button type="button" onclick="variableGet('getRelay1')">Relay1</button><br>

  function variableGet(variableName){
    var vrGr = particle.getVariable({ deviceId: ActualDeviceID, name: variableName, auth: token });
    
    vrGr.then(
       function(data) {
        document.getElementById(r).innerHTML = data.body.result;
      }
     );
  }

Gotcha! Iā€™m not at home anymore so Iā€™ll look later. I guess I shouldnā€™t take you so literally. Thanks for the help. Iā€™m getting better at understanding things once I see them.

So let me know if this is correct, just in terms of parameters, arguments and variables.
onclick="variableGet('getRelay1')" in this case, getRelay1 is the parameter correct?

function variableGet(variableName) in this case its calling the variable, which is getRelay1, or getRelay2, or getRelay3ā€¦correct?

And it seems the argument as well is getRelay1 and getRelay2, or is the argument just getRelay? Or am I completely wrong.

I did try this code, and I donā€™t get any errors in the console, but I also donā€™t get any results.

      function variableGet(variableName){
        var vrGr = particle.getVariable({ deviceId: ActualDeviceID, name: variableName, auth: token });
        
        vrGr.then(
           function(data) {
            document.getElementById(variableName).innerHTML = data.body.result;
          }
         );
      }

Itā€™s better to see it happening than me explaining it.
To see what comes in through function variableGet(variableName) you can add console.log(variableName) underneath it, which should print the variable to the console. Try some different values in the call to that function, and you should see what goes in/comes out.
Within the ā€˜thenā€™ part you can also add a console.log to see whatā€™s going on.

What does your ā€˜spanā€™ currently look like?

Ah, the console will help.
Heres the span
<span id="getRelay1"</span>