Help in Rotate Image in JAVA2D

please format code with </> button * homework policy * asking questions
<!-

I have issues rotating image. I need help please.
I wish to implement Flow Rate Meter. See the attached code.
I have seen examples, but most try to rotate the image at the centre.
Mind require to rotate the image “needle” from an angle (edge).

import processing.awt.;
import javafx.scene.canvas.Canvas;
import javafx.application.Platform;
import processing.serial.
;
import javax.swing.JOptionPane.;
import javax.swing.
;

static float XtranFL1=270;
static float YtranFL1=269;

color c_background =color(111,111,111);
color c_lightgrey =color(120,111,12);
//========================================================================================
// Serial Communication
//========================================================================================
Serial comport = null; // the serial port
String PORTS; // list of serial ports
int idxPort = 0; // currently selected serial port
int TportsList = 0; // number of serial ports in the list
String alertMsg; // Holder of error report

float tFL1;

PImage FL1needle;
PImage FL1meter;
boolean udata=false;
boolean PORT=false;

tButton CONN_PORT =new tButton(12, 400, 120, 20, 3, “Connected”);
tButton DISCONN_PORT =new tButton(12, 450, 120, 20, 3, “Disconnected”);
float needleX=250;
float needleY=100;

float meterX=10;
float meterY=10;

void setup()
{
size(600, 600);
frameRate(200);
smooth();

CONN_PORT.drawButton(“Connect”, color(255,0,120));
DISCONN_PORT.drawButton(“Discconnect”, color(255,0,120));

FL1meter =loadImage(“meter.png”);
FL1needle=loadImage(“images.png”);
udata=true;
}

//============================================================================================
// Loop forever
//============================================================================================
void draw()
{
background(c_background);
if(udata) UIupdate();
CONN_PORT.drawButton((PORT)? “Connected”: “Connect”, (PORT)? color(0,255,0): color(255,0,0));
DISCONN_PORT.drawButton((!PORT)? “Disconnected”: “Disconnect”, (PORT)? color(0,255,0): color(255,0,0));
}

void UIupdate()
{
background(255);
image(FL1meter, meterX, meterY);
line(0, needleY+118, width, needleY+118); //Horizontal line
line(needleX, 0, needleX, height); //Vertical line
//float reading=map(tFL1, 0, 5, 0, 110);
pushMatrix();
imageMode(CORNER);
translate(needleX, needleY);
//rotate(((HALF_PI)-40)+reading);
image(FL1needle, 0, 0);
//translate(-XtranFL1, -YtranFL1);
popMatrix();
}

void mousePressed()
{
if(CONN_PORT.Sbutton())
{
Connect();
}
if(DISCONN_PORT.Sbutton())
{
Disconnect();
PORT =false;
}
}

//============================================================================================
// Serial Event: get triggered when data arrived from serial port
//============================================================================================
void serialEvent(Serial myPort)
{
try
{
String inData =myPort.readStringUntil(‘}’);
if(inData==null) return;

inData =trim(inData);
if(inData.length()==0) return;

String [] dataList=split(inData, ':');
udata=false;
tFL1 =float(dataList[1]);
println(inData);
udata=true;

} catch (Exception e) { alertMessage(“Error Reading data:”+ e); }
}

void alertMessage(String msg)
{
JOptionPane.showMessageDialog(frame, msg);
}

void Connect()
{
if(comport ==null)
{
try
{
TportsList = Serial.list().length;
if(TportsList != 0)
{
PORTS = (String) JOptionPane.showInputDialog(null,
“Select COM Port”,
"PORTS “,
JOptionPane.QUESTION_MESSAGE,
null,
Serial.list(),
Serial.list()[0]);
comport = new Serial(this, PORTS, 115200);
comport.readBytesUntil(‘}’);
if(comport!=null )PORT=true;
}else { PORT=false; alertMsg=“Please connect USB Cable”;}
}catch (Exception e) { PORT=false; alertMsg=“PORT: " +PORTS+” is not available or busy”;}
}
}

void Disconnect()
{
if(PORT)
{
comport.stop();
comport.clear();
comport=null;
PORT=false;
}
}

class tButton
{
float Txpos=0, ypos=0, wBTTN=0, hBTTN=0;
String label; boolean status=false;
PFont msgFont; int fsize=12, Bcorners;

tButton(float xtxt, float ytxt, float wtxt, float htxt, int corner, String tlabel)
{
Txpos = xtxt;
ypos = ytxt;
wBTTN = wtxt;
hBTTN = htxt;
label = tlabel;
Bcorners=corner;
}

void drawButton(String str, color bcolor)
{
fill(c_background);
rect(Txpos, ypos, wBTTN, hBTTN);
stroke(bcolor);
noFill();
rect(Txpos, ypos, wBTTN, hBTTN);
textAlign(LEFT);
fill(c_lightgrey);
textSize(12);
text(str, Txpos+5, ypos+20, wBTTN, hBTTN);
}

boolean Sbutton()
{
if((mouseX > Txpos && mouseX < (Txpos+wBTTN))&&(mouseY >=ypos && (mouseY<= (ypos+hBTTN))))
{
return (true);
} return (false);
}
}

Hello,

Please read:

We do not need to see your entire project.
Can you isolate the problem and provide a small example of only that code?
We should be able to run the small example of code.
Please format code that is posted to the forum.

All of the above helps us help you.

This is tagged as homework so it would be prudent not to post your entire academic work.
https://discourse.processing.org/faq#homework

:)

Sorry for posting the code.
That is just a segment of my processing project. The aspect of the project that is giving me issue is what i posted.

What i need to do, create a meter (gauge) for flow rate using scaled image and needle pointer.
I have two images which have been loaded using (loadImage), i then use “image” to draw the image.
I have fair understanding of how to use “translate” function.
How rotate the needle about an edge has been the issue.
Most of the example utilises the centre of the image.
What i have achieved, the needle keeps jumping randomly.
Just look at the aspect of translation an advice.
I accept challenge but still will ask where it seem dark for understanding.
Thanks for your helping hand.

Hello,

I used this image because it was offset:
https://www.pngall.com/wp-content/uploads/6/Vector-Tribal-Arrow-PNG-Image-HD.png

Code to peruse:

  push(); 
  rotate(frameCount*TAU/360);
  noFill();
  translate(0, -25); // Estimated (visually) that it was about 1/4 of height
  rect(0, 0, 200, 100); // To see image size
  image(img, 0, 0);
  pop();

test.mov

:)

hi glv,
I got the problem solved.
and needle (pointer) of the meter now turns beautifully well.

Your reference code helped.
I saw what i was doing wrong which made the needle (pointer) to rotate at random position.
It was a case of image(needle, 0, 0);
After translating to the new axis and rotating. I need to draw the image of the needle(pointer) by adjusting to image(needle, -23, 21);

Thanks to all who gave advice.

1 Like