Counter zero left

Good evening everyone. I’m trying to implement a counter via html. I’m having difficulties with the zero on the left, because I need to remove it when the value reaches two digits, that is, it is greater than nine. Thanks in advance for all the help.

int count;
int zeroLeft;

void setup() {
    Particle.variable("IoT", &count, INT);//Variavel para incremento do pino 0 via node ou jQuery
    Particle.variable("IoTleft", &zeroLeft, INT);//Variavel para incremento do pino 0 via node ou jQuery
}

void loop() {
    static uint32_t msLastExec = 0;
    if (millis() - msLastExec < 4000) return; // bail out when nothing to do
    msLastExec = millis();
    count++;
    if(count < 10){
        zeroLeft = 0;
    }
    if(count>19){
        count = 0;
    }
}
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script>

var accessToken = "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxx";
var deviceID = "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx";

$(document).ready(function(){
    setInterval(ajaxCall, 1000);
    function ajaxCall() {
        $.get( "https://api.particle.io/v1/devices/" + localStorage.deviceID + "/IoT?access_token=" + localStorage.accessToken, function(data) {
        $( "#ValueZeroRight" ).html( data.result );
        });
        $.get( "https://api.particle.io/v1/devices/" + localStorage.deviceID + "/IoTleft?access_token=" + localStorage.accessToken, function(data) {
        $( "#ValueZeroLeft" ).html( data.result );
        });
   }
});
</script>
</head>

<body>
  <p>my count:</p>
  <span style="font-size:22px" id="ValueZeroLeft"></span>
  <span style="font-size:22px" id="ValueZeroRight"></span>
</body>
</html>

Just some hints before addressing the actual question
You are using an outdated syntax for your Particle.variable() registration there.
Nowadays it would rather be

    Particle.variable("IoT", count);        //Variavel para incremento do pino 0 via node ou jQuery
    Particle.variable("IoTleft", zeroLeft); //Variavel para incremento do pino 0 via node ou jQuery

Next, you didn’t quite state what your trouble with the zeroLeftvariable is.
Without actually knowing what you need solved it’s also difficult to advise.

However, looking at your code I’d suspect that you find your variable never turn to 1 (true) since your code never sets it that way.
You may want to write something like that to make that happen

  zeroLeft = (count < 10);

This way it will end up as 1 when the condition is satisfied and 0 when not.

On the other hand, by your verbal description of your problem I sense some general misconception.
Could it be that you are hoping for an “empty” IoTleft when you hadn’t set zeroLeft to 0?
If so I’d have to break the “bad news” that an integer variable is not nullable - so it always has some value and hence will never “disappear”.
In case that’s what you were wishing for, you could use a string variable instead - they can contain “non-printable” characters.

But, why would you need a dedicated variable for that when you could easily make the decision whether to display a leading zero on the web page’s side based on the value of count?

1 Like

Good night and thanks for the help. In fact, if you run the source I posted, you will see that a counter is displayed that starts at 1,2,3… and what I want is for the counter to show 01,02,03…that is, keep the zero in the left until two decimal places are reached, it doesn’t matter in html or in C. I managed to add the zero to the left, but when it reaches two decimal places it is 010,011,012 when the truth should be 10,11,12

I do understand that, but you seem to have missed my point that this is to be expected as your IoTleft will always hold some value and since your C code never assigns anything else but 0 to that variable that “some value” will always be 0.

Hence the whole premise of your code is based on a misunderstanding of how integer variables work and will not merely need some “tweaking” but a completely different approach.

For me the logical approach would be to do that on the rendering side (aka web page) as it is a matter of how to display your data and not how to create the data.

However if you really want to have the formatting happen on the data source side you could do it like that

int count = 0;
String formatCount() {
  char txt[16];
  snprintf(txt, sizeof(txt), "%02d", count);
  return txt;
}

void setup() {
  Particle.variable("IoT", formatCount);
}

Hi, I agree with ScruffR 100% however I’ll to put my 5 cent here. From JS/HTML perspective everything is simple, sources for learning are widely available, and you can achieve almost whatever you imagine.

here is really simple example which use concat() method to display 0 on left as long as value is less than 10, then increase to 19 and starts over.

<!DOCTYPE html>
<html>
<body>

<p>The concat() method joins two or more strings.</p>

<p id="demo" style="font-size: 54px;"></p>

<script>

let LessThTen = 0;
let leftZorro = "0";
let result;

setInterval(function() {

if(LessThTen<10){
  result = leftZorro.concat(LessThTen);
  document.getElementById("demo").innerHTML = result;
  console.log("less than ten", result);
}else{
  document.getElementById("demo").innerHTML = LessThTen;
  console.log("more than ten", LessThTen);
}

if(LessThTen>=19){
 LessThTen = -1;
}
LessThTen++;
  
}, 400);




</script>

</body>

</html>

Best,

1 Like

Good afternoon everyone. I found the solution for the topic in question through void *memmove(void *str1, const void *str2, size_t n) I applied it in the code and it worked. Now my counter counts from 0 to 19, keeps the 0 in the count to 9 and in the count from 10 to 19 the zero is suppressed. Thank you all for your help, I look forward to any comments you may have.

int count;//right digit of counter to two decimal places
char str1[8]={" "};//character to be replaced at the beginning of the count from 0 to 9
char str2[8]={"0"};//character that will appear in the count from 0 to 9

void setup() {
    Particle.variable("numRight", &count, INT);//number to be displayed in javaScript on the right(0,1,2,3,4,5,6,7,8,9)
    Particle.variable("numLeft", str1);//character to be displayed in javaScript on the left in the count from 0 to 9 (always will be 0)
}
void loop() {
    static uint32_t msLastExec = 0;
    if (millis() - msLastExec < 4000) return; 
    msLastExec = millis();
    count++;
    if(count>19){//reset the counter
        count = 0;
    }
    if((count >= 0) && (count < 9)){
        strcpy(str1,str2);//copy character 0 to str1 to display counter left
    }
    if(count >= 10){
        memmove(str1, str1+1,strlen(str1));//delete character 0 when count is greater than 9
    }
}

<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script>

var accessToken = "6aeeab010c6398972e29c2b772f95ee49f792ba6";
var deviceID = "320035001047343438323536";

$(document).ready(function(){
    setInterval(ajaxCall, 1000);
    function ajaxCall() {
        $.get( "https://api.particle.io/v1/devices/" + localStorage.deviceID + "/numRight?access_token=" + localStorage.accessToken, function(data) {
        $( "#ValueZeroRight" ).html( data.result );
        });
        $.get( "https://api.particle.io/v1/devices/" + localStorage.deviceID + "/numLeft?access_token=" + localStorage.accessToken, function(data) {
        $( "#ValueZeroLeft" ).html( data.result );
        });
   }
});
</script>
</head>

<body>
  <p>my count:</p>
  <span style="font-size:22px" id="ValueZeroLeft"></span>
  <span style="font-size:22px" id="ValueZeroRight"></span>
</body>
</html>
1 Like