Speedometer, tachometer and temperature

Processing Coding Questions
1

I only done the fuel gauge coding. but for speedometer in KM/Hr, Tachometer in RPM, Temperature degree celcius with the labeling of C and H. I need to combine speedometer into the fuel gauge in the same circle and work independently. I need to combine tachometer and Temperature into another circle and work independently. I’m still new in learning this processing code and not too sure with the speedometer, tachometer and temperature coding.

PImage img;
int angle3;
void setup()
{
  size(800, 600);
  img = loadImage("fuel.png");
}
void draw()
{
  background(255);
  translate(400, 300);
  image(img, -45, -110, width/8, height/8);
  circle(0, 0, 50);
  fill(0, 0);
  int angle1=180; // start angle in degrees
  int angle2=360; // end angle in degree
  int R=200;
  strokeWeight(5); // thickness
  stroke(0); //arc black
  arc(0, 0, 2*R, 2*R, radians(angle1), radians(angle2));
  fill(0, 0);
  textAlign(CENTER);
  fill(0);
  textSize(48);
  text("E", 225*cos(radians(175)), 225*sin(radians(175)));
  text("1/2", 225*cos(radians(270)), 225*sin(radians(270)));
  text("F", 225*cos(radians(5)), 225*sin(radians(5)));

  rotate(radians(angle3));
  stroke(0);
  strokeWeight(5);
  line(0, 0, 180, 0);
}
void keyPressed() {
  if (key=='a')angle3=angle3+2;
  if (key=='s')angle3=angle3-2;
  if (angle3>360)angle3=360;
  if (angle3<180)angle3=180;
}
2

Hi

Helpful Link

3

Hi,
the video seems helpful but my school won’t allowed me to used pic from the google site of the car dashboard that shown in the video link u gave me.

4

Well done for the work you have done so far, I am very busy and do not have much time to check your work but I think you did not write the if statements correctly. You can try this modifying the if statements to either the first or second codes below

if(key =='a '){angle3=angle3+2; }
or
if(key =='a '){(angle3=angle3+2); }

You didn’t include the curly braces { }

5

Hi,

@Chigoz:

curly brackets are only needed if you want more than one statement to be executed.

@virtualreality:

you can use constrain for this and angle3 should be correct initialized in the beginning (ie. 180 or 360)…

void keyPressed() {
  if (key=='a')
    angle3=constrain(angle3+2,180,360);
  else if (key=='s')
    angle3=constrain(angle3-2,180,360);
}

In general I think you need a bit more an Object-Oriented approach as you want to have several Gauges. All have the same attributes (min/max/current values) but a different way to get displayed.
This is an optimal case to be described as classes.

  • class Gauge
    which holds the several values (min,max,current)
    and maybe the position information of the element

  • and sub-classes (Fuel, Speed, Temperature)
    which handles the different update and display functionality

And the main program only triggers the above Methods for the several Gauges.

Cheers
— mnse

1 Like
6

How to make the speedometer work independently with the fuel gauge if the speed increase and the fuel gradually decrease. For the tachometer also the same function as the speedometer but this time I want the tachometer increase a certain velocity and the the temperature increase indicating the Hot or cold temperature with the degree Celsius number indicating as well plus to make both tachometer and Speedometer to be on digital displays.

7

Hi @virtualreality,

What makes you think they should work independently?
Everything is completely dependent on each other…
i.e. The more the speed increases, the more fuel is consumed and the faster the tank gets empty.
The more revolutions the engine makes, the more the temperature rises and so on.
Everything is absolutely interdependent…
The most important thing that the update methods have to do is to define the rules for each gauge in relation to the current state and pass the information to the appropriate gauge updates, which are then used to display the current state …

Cheers
— mnse

8

How to combine into one big circle with two different types of instrument to code and how to do the digital display code for speedometer and tachometer. What code used for speedometer, tachometer and temperature?

9

Hello @virtualreality :slightly_smiling_face:

A hint to move forward with this.

Break down the problem into smaller parts.

For example, one key to solving this is how to make one object increase while simultaneously another object decreases.
So the concept of incrementing and decrementing will need to be used.

Make a mini-program illustrating this interaction.
A ball shape that moves across the screen. As its x position increases, the ball size decreases. There will be interdependence between position and size.
Next step add a speed component.
Once you understand the concept of the interdependence of components you can then apply this to speed and fuel tank, and then velocity and temperature.

:nerd_face:

4 Likes
10

Hi @virtualreality,

I think that is exactly the task to work this out in this homework and I doubt very much that the point is to have someone do it for you. I have given you some suggestions, so try to use the information and get an implementation.
Maybe best way to start would be that you draw it all up and try to create rules what has to be done how …

  • Draw Board containing several Gauges (positioning picture)
  • Tachometer (increases/decreases by speed)
  • Fuel (gets empty on driving, the faster the more)
  • And so on …

Cheers
— mnse

4 Likes
11

Okay. But I’m still learning how to code so I’m not really too sure about incrementing and decrementing. My homework due in two weeks time so I’m not too sure if I have time learning that.

12

Sounds like you better get started. :upside_down_face:

But seriously, here is an excellent introduction to incrementing by Dan Shiffman on the Coding Train (then apply the same concept to the opposite ie decrementing):

Given the code you shared above, I’m confident you can do this.

:nerd_face:

2 Likes
13

Hi @virtualreality,

I believe in you and if you really want there is sooo much you can achieve having two weeks time, so …

Believe in yourself!

Have you started doing this …

Cheers
— mnse

2 Likes
14

Hello @virtualreality ,

This is a hint only! There are several ways to approach this and this is just one.

Example showing transformations:

void setup()
  {
  size(1600, 600);
  }

void draw()
  {
  background(255);

  push();
  translate(width/4, height/2);
  noFill();
  stroke(0, 255, 0);
  circle(0, 0, 550);
  translate(0, 200);
  scale(0.5);
  guage1(); // Fuel
  pop();
  
  push();
  translate(width/4, height/2);
  guage2(); // Speed
  pop();
  
  push();
  translate(3*width/4, height/2);
  noFill();
  stroke(255, 0, 0);
  circle(0, 0, 550);
  // Another gauge
  pop();  
  }

void keyPressed()
  {
  // Keyboard control 
  }

void guage1()
  {
  // Gauge 1 code
  }
  
void guage2()
  {
  // Gauge 2 code
  }

I took the gauge code from draw() and put it into a function gauge1() and called that function from draw().

I made a copy of gauge1() and renamed it to gauge2().

You will have to change and add some variables.
You wanted them to be independent so focus on that for now.

You will have to look up the references for:

  • push()
  • translate()
  • scale()
  • pop()

Find a tutorial on 2D transformations that suits you.

A digital display is just text. Find a nice font for this.

There are resources here (tutorials, references and examples):

For a digital display choose a nice digital font:

Along with:

I was a student once and worked very hard at my studies… it was not always easy but I persevered and came out better for it.
You are not just doing homework but learning to learn for a lifetime… you will never stop learning.
Focus on completing your assignment.

image

I suggest you save working versions (number them) as you progress towards your final version.

image
image1602×639 51.2 KB

Almost on empty! Time to fuel up.

:)

3 Likes
15

What does the gauge function do if u called from the draw function?

16

Example here:

:)

17

I still don’t get it on how to do tht

18

how did u do this. i still can’t figure this out
image

19

I provided an example for to consider.

Try it with:

void guage1()
  {
  fill(255, 0, 0);
  rectMode(CENTER);
  square(0, 0, 100);
  }
  
void guage2()
  {
  fill(0, 255, 0);
  rectMode(CENTER);
  square(0, 0, 100);
  }

:)

20

how do i make my screen size smaller and how do i combine the fuel gauge with speedometer and temperature with tachometer. plus how do i make them work independently with each other and how to add auto door to simulate in the car dashboard?

PImage img,img2;
int R1=250, R2=200, R3 =150, R4 = 150, R5=130;
int angle1=0, angle2=0, angle3=180,angle4=360,angle5=180,angle6=180;
int zero_offset=130;
void setup()
{
  size(1500, 1000);
  background(0);
  img = loadImage("fuel.png");
  img2 = loadImage("temperature.png");
}
void draw()
{
  
  pushMatrix();
  translate(450,300);
  fill(0);
  strokeWeight(5);
  stroke(47,212,199);
  circle(0,0, 2*R1); //circle 1
  
  for(int x=0; x<280; x=x+20)
  {
    if (x % 20 == 0)
    {
      float radi = radians(x+zero_offset);
      line(cos(radi)*R1, sin(radi)*R1, cos(radi)*R1*0.9, sin(radi)*R1*0.9);
    }
  }
  
fill(0); 
strokeWeight(2);
noStroke();  
circle(0,0,2*R2);      
fill(255); 
textAlign(CENTER,CENTER);  
textSize(24); 
int t=0;  
for(int i=0; i<280; i=i+20)
{  
if (i % 20 == 0) 
{
float radi = radians(i+zero_offset);
text(t,cos(radi)*(R2),sin(radi)*(R2));
t=t+10;
}
} 
textAlign(CENTER); //km/h
textSize(30);
fill(48,213,240);
text("km/h",10,-80);

fill(255); // Circle in middle
strokeWeight(5); 
stroke(48,213,240);
rotate (radians(angle1+zero_offset));
line(0,0,180,0);
line(180,0,170,10);
line(180,0,170,-10);
strokeWeight(10);
circle(0,0,30);
popMatrix();


pushMatrix(); //Circle 2
translate(1050, 300);
fill(0); 
strokeWeight(5); 
stroke(48,213,200);
circle(0, 0, 2*R1);
for (int x=0; x<280; x=x+20) {
if (x % 20 == 0) {  
float radi = radians(x+zero_offset);
line(cos(radi)*R1, sin(radi)*R1, cos(radi)*R1*0.9, sin(radi)*R1*0.9);
if (x >180)
{
  stroke(255,0,0);
}
}
}
fill(0); 
strokeWeight(1);
noStroke();  
circle(0,0,2*R2);      
fill(255); 
textAlign(CENTER,CENTER);  
textSize(24); 
int t1=0;  
for(int i=0; i<280; i=i+20)
{  
if (i % 20 == 0) 
{
float radi = radians(i+zero_offset);  
text((t1/10),cos(radi)*(R2),sin(radi)*(R2));
t1=t1+10;  
if (t1 > 100)
{
  fill(255,0,0);
}
}
} 

textAlign(CENTER); //km/h
textSize(30);
fill(48,213,240);
text("x1000 RPM",10,-80);

fill(48,213,240);
strokeWeight(5); 
stroke(48,213,240);
rotate (radians(angle2+zero_offset));
line(180,0,170,10);
line(0,0,180,0);
line(180,0,170,-10);
fill(255);
strokeWeight(10);
circle(0,0,30);
popMatrix();


pushMatrix(); //Fuel Gauge
translate(250,700);
fill(0); 
strokeWeight(5); 
stroke(48,213,200);
circle(0, 0, 2*R3);
image(img, -45, 40, width/15, height/12);
arc(0, 0, 2*R5, 2*R5, radians(angle3), radians(angle4));
fill(0,0);
textAlign(CENTER);
textSize(20);
fill(255,0,0);
text("E", 225*cos(radians(240)), 225*sin(radians(175)));
fill(255,255,0);
text("1/2", 225*cos(radians(270)), 225*sin(radians(210)));
fill(0,255,0);
text("F", 225*cos(radians(60)), 225*sin(radians(5)));
rotate(radians(angle5));
stroke(48,213,240);
strokeWeight(5);
line(0,0,100,0);
popMatrix();


pushMatrix(); //Temperature
translate(1250,700);
fill(0); 
strokeWeight(5); 
stroke(48,213,200);
circle(0, 0, 2*R3);
image(img2, -45, 40, width/16, height/14);
arc(0, 0, 2*R5, 2*R5, radians(angle3), radians(angle4));
textAlign(CENTER);
textSize(20);
fill(48,213,240);
text("C", 225*cos(radians(240)), 225*sin(radians(175)));
fill(255,0,0);
text("H", 225*cos(radians(60)), 225*sin(radians(5)));
rotate(radians(angle6));
stroke(48,213,240);
strokeWeight(5);
line(0,0,100,0);
popMatrix();
}
void keyPressed() {
  if (key=='a')angle5=angle5+10;
  if(angle5>360) angle5=360;
  if (key=='s')angle1=angle1+20;
  if(angle1>260) angle1=260;
  if(key=='d') angle2=angle2+10;
  if(angle2>260)angle2=260;
  if(key=='f') angle6=angle6+20;
  if(angle6>360) angle6=360;
}