Problem writing number on stripes. Drone interface

Processing Coding Questions
1

Hello
I am implementing an interface for my drone and I am blocked in the algorithm that draws the course.
The idea is to make vertical stripes along a landscape rectangle. The long lines are every 50px and they have the curse number every 5 degrees (for example 340, 345,350, 355, 0, 005, 010 …). The short lines are every 10px and do not have the numbers written.
So far I have been able to write the long and short stripes but the numbers above the long stripes do not come out correctly.
The section of the code is inside the draw function of the Heading class.

I’ve been trying for many days but I’m already quite blocked, I would need help.

Thank you!

class Heading {
    PGraphics hg;
    Heading(int xDim, int yDim) {
        hg = createGraphics(xDim, yDim);
        hg.beginDraw();
        hg.noStroke();
        hg.endDraw();
    }
    void draw(float value) {
        hg.beginDraw();
        hg.background(0, 0, 0);
        hg.textAlign(CENTER, CENTER);
        hg.stroke(255, 255, 0);
        hg.fill(255);
        hg.strokeWeight(2);
        hg.strokeCap(SQUARE);

        for (int i = -hg.width; i < hg.width; i++) {
            //Long lines every 50px are 5 degrees (340 345 350 355 360 005 010 , by instante)
            if (int(i+value)%50 == 0) {
                hg.line(hg.width+i, hg.height, hg.width+i, hg.height-20);
                hg.text(int(i+value), hg.width+i, 15); //I think here is my problem...
            }
            //Sort lines every 10px are 1 degrees and they haven't  the number.
            if ((int(i+value)%50 != 0) && (int(i+value)%10 == 0)) {
                hg.line(hg.width+i, hg.height, hg.width+i, hg.height-10);
            }
        }
        hg.stroke(255, 0, 0);
        hg.line(hg.width/2, 0, hg.width/2, hg.height);

        hg.endDraw();
        image(hg, 0, 0);
    }
}


float hdgValue;

Heading head0;
 
void setup() {
    size(600, 400);
    head0 = new Heading(300, 50);
    hdgValue = 0;
}
 
void draw(){
    background(155, 155, 155);
    //heading();//Edited, it is not necesary
    translate(width/4, height/4*3);
    head0.draw(hdgValue);
    translate(-width/4, -height/4*3);
}
void mouseClicked(){
    hdgValue = random(0, 360);
}

/*//Edited, this is not necesary...
void heading(){
    if (mouseX < 150)
        hdgValue = hdgValue +  0.01 *((mouseX - 150));
    if (mouseX > 300)
        hdgValue = hdgValue +  0.01*((mouseX - 300));
      
    if (hdgValue >= 360)
        hdgValue = 0;
    if (hdgValue < 0)
        hdgValue = 360;
}
*/
2

just a short look:
to diagnose must see what your function spits out
pls use a

void heading(){

//..
    println("heading_hdgValue "+nf(hdgValue,1,1));
}

now i would think that the rollover could be reverted:

    if (hdgValue >= 360)
        hdgValue = 0;
    if (hdgValue < 0)
        hdgValue = 360;

to a limiter

    if (hdgValue >= 360)
        hdgValue = 360;
    if (hdgValue < 0)
        hdgValue = 0;

but actually why you mix 0 … 360 with 0 + - ,
that would be -180 … 0 … 180
so the mouse could give a target setpoint by
float sp = map(mouseX,0,width,-180,180);
so the rest might be more easy

3

Hello

I use the heading() function only to simulate the reception of the course value sent to this sketch by the controller of the drone, logically, in the original program it does not exist, I only have the value of the course that the controller sends me and that goes from 0 to 360.
You can eliminate the function heading() and only put a variable that changes from 0 to 360. Adding the debug line that you tell me, you can see how the values ​​that the heading function sends are valid values ​​for a course between 0 and 360.

Thank you!

Any ideas, friends?

4

when i see the numbers on you heading scale jump
it is like from -150 to 200, just after the value ( from function heading )
jumps from 1…n to 360 , by your negative rollover in function heading

2018-12-18_16-56-04_snap
2018-12-18_16-56-04_snap1824×984 162 KB

when i move mouse little bit to the left

2018-12-18_16-58-25_snap
2018-12-18_16-58-25_snap1824×984 165 KB

check on all the numbers i printed for you
( see “value” from heading and whole for loop : i and numbers by text )

same happen again when you show 200, and heading “value” jumps from 360 to 1
scale show -150.

so you can erase the rollover in heading,
or try to deal with it in Heading.draw, but that requires add memory variables

anyhow you could change the create graphics idea so that you not create it
again and again,
make a long one ( 0 … -180 …0 …180 …0 )
in setup and center it where you think your heading.

5

When you say “the text comes out incorrect” what do you mean? Are the numbers wrong? Is the text not centered? Is it the wrong color? Is it too big or too small? Does it appear in the wrong area?

6

Hello,

I mean that the numbers do not correspond to the value that should have, should be for example … 245 350 355 360 005 010 015 … for each long line, instead of another value for example …- 150 -160 -170 … (these values ​​do not correspond exactly with the previous example).
The red centerline is the value of the course the hdgValue variable, I haven’t said it before.

On the other hand

Yes I can see a little jump in the pictures, thank you. I’m not interested in the heading() function, it was only to try to make the example visible by not having the value of the serial.
Instead I will put a random value between 0 and 359 or between 0 and 360, it does not matter, it is not the object of my question. I’m going to edit the code in the original post.

I will try to do something as you say, but “a priori” it does not seem very efficient, I don´t know how to draw the line sin the setup and they appear always in the sketch, I may not understand the suggestion, I’m sorry…