cancel
Showing results for 
Search instead for 
Did you mean: 

Remote javascript application monitoring with STM32F746-DISCO

ferdlf
Associate III

Hi, I'd like to use a code from javascript in the STM32F746 DISCO. It's a radar that receives data from an ultrasonic sensor. The code for the radar was made using processing and I want to show it in the STM screen but I got no idea.
Here is the code from javascript and a view of the radar.

ferdlf_0-1708797080051.png

import processing.serial.*; // imports library for serial communication
import java.awt.event.KeyEvent; // imports library for reading the data from the serial port
import java.io.IOException;
Serial myPort; // defines Object Serial
// defubes variables
String angle="";
String distance="";
String data="";
String noObject;
float pixsDistance;
int iAngle, iDistance;
int index1=0;
int index2=0;
PFont orcFont;
void setup() {

size (1200, 700); // ***CHANGE THIS TO YOUR SCREEN RESOLUTION***
smooth();
myPort = new Serial(this,"COM3", 9600); // starts the serial communication
myPort.bufferUntil('.'); // reads the data from the serial port up to the character '.'. So actually it reads this: angle,distance.
}
void draw() {

fill(98,245,31);
// simulating motion blur and slow fade of the moving line
noStroke();
fill(0,4);
rect(0, 0, width, height-height*0.065);

fill(98,245,31); // green color
// calls the functions for drawing the radar
drawRadar();
drawLine();
drawObject();
drawText();
}
void serialEvent (Serial myPort) { // starts reading data from the Serial Port
// reads the data from the Serial Port up to the character '.' and puts it into the String variable "data".
data = myPort.readStringUntil('.');
data = data.substring(0,data.length()-1);

index1 = data.indexOf(","); // find the character ',' and puts it into the variable "index1"
angle= data.substring(0, index1); // read the data from position "0" to position of the variable index1 or thats the value of the angle the Arduino Board sent into the Serial Port
distance= data.substring(index1+1, data.length()); // read the data from position "index1" to the end of the data pr thats the value of the distance

// converts the String variables into Integer
iDistance = int(angle);
iAngle = int(distance);

//println(data);
}
void drawRadar() {
pushMatrix();
translate(width/2,height-height*0.074); // moves the starting coordinats to new location
noFill();
strokeWeight(2);
stroke(98,245,31);
// draws the arc lines
arc(0,0,(width-width*0.0625),(width-width*0.0625),PI,TWO_PI);
arc(0,0,(width-width*0.27),(width-width*0.27),PI,TWO_PI);
arc(0,0,(width-width*0.479),(width-width*0.479),PI,TWO_PI);
arc(0,0,(width-width*0.687),(width-width*0.687),PI,TWO_PI);
// draws the angle lines
line(-width/2,0,width/2,0);
line(0,0,(-width/2)*cos(radians(30)),(-width/2)*sin(radians(30)));
line(0,0,(-width/2)*cos(radians(60)),(-width/2)*sin(radians(60)));
line(0,0,(-width/2)*cos(radians(90)),(-width/2)*sin(radians(90)));
line(0,0,(-width/2)*cos(radians(120)),(-width/2)*sin(radians(120)));
line(0,0,(-width/2)*cos(radians(150)),(-width/2)*sin(radians(150)));
line((-width/2)*cos(radians(30)),0,width/2,0);
popMatrix();
}
void drawObject() {
pushMatrix();
translate(width/2,height-height*0.074); // moves the starting coordinats to new location
strokeWeight(9);
stroke(255,10,10); // red color
pixsDistance = iDistance*((height-height*0.1666)*0.025); // covers the distance from the sensor from cm to pixels
// limiting the range to 40 cms
if(iDistance<40){
// draws the object according to the angle and the distance
line(pixsDistance*cos(radians(iAngle)),-pixsDistance*sin(radians(iAngle)),(width-width*0.505)*cos(radians(iAngle)),-(width-width*0.505)*sin(radians(iAngle)));
}
popMatrix();
}
void drawLine() {
pushMatrix();
strokeWeight(9);
stroke(30,250,60);
translate(width/2,height-height*0.074); // moves the starting coordinats to new location
line(0,0,(height-height*0.12)*cos(radians(iAngle)),-(height-height*0.12)*sin(radians(iAngle))); // draws the line according to the angle
popMatrix();
}
void drawText() { // draws the texts on the screen

pushMatrix();
if(iDistance>40) {
noObject = "Out of Range";
}
else {
noObject = "In Range";
}
fill(0,0,0);
noStroke();
rect(0, height-height*0.0648, width, height);
fill(98,245,31);
textSize(25);

text("10cm",width-width*0.3854,height-height*0.0833);
text("20cm",width-width*0.281,height-height*0.0833);
text("30cm",width-width*0.177,height-height*0.0833);
text("40cm",width-width*0.0729,height-height*0.0833);
textSize(40);
text("RADAR G3 2022", width-width*0.875, height-height*0.0277);
text("Ángulo: " + iAngle +" °", width-width*0.48, height-height*0.0277);
text("Dist:", width-width*0.26, height-height*0.0277);
if(iDistance<40) {
text(" " + iDistance +" cm", width-width*0.225, height-height*0.0277);
}
textSize(25);
fill(98,245,60);
translate((width-width*0.4994)+width/2*cos(radians(30)),(height-height*0.0907)-width/2*sin(radians(30)));
rotate(-radians(-60));
text("30°",0,0);
resetMatrix();
translate((width-width*0.503)+width/2*cos(radians(60)),(height-height*0.0888)-width/2*sin(radians(60)));
rotate(-radians(-30));
text("60°",0,0);
resetMatrix();
translate((width-width*0.507)+width/2*cos(radians(90)),(height-height*0.0833)-width/2*sin(radians(90)));
rotate(radians(0));
text("90°",0,0);
resetMatrix();
translate(width-width*0.513+width/2*cos(radians(120)),(height-height*0.07129)-width/2*sin(radians(120)));
rotate(radians(-30));
text("120°",0,0);
resetMatrix();
translate((width-width*0.5104)+width/2*cos(radians(150)),(height-height*0.0574)-width/2*sin(radians(150)));
rotate(radians(-60));
text("150°",0,0);
popMatrix();
}
1 ACCEPTED SOLUTION

Accepted Solutions
GaetanGodart
ST Employee

Hello @ferdlf ,

 

That looks like a fun project to do!

 

You did not ask a question, I assume you want to know how to start using TouchGFX to be able to display your radar on a screen.
Unfortunately it is not possible to run JS code on embedded systems (ex: microcontroller) but it is very easy to do it using TouchGFX.

I quickly put together a copy of your radar (without the sensor that I don't have).
I used the same board that you own so you can flash this project directly from Designer to see it on your screen.

If you are new to TouchGFX make sure to look at our documentation :

 

For your project I think you will need to look at :

  • the MVP model to be able to fetch the data of your sensor
  • how to use wildcards to display variables (see my example)
  • how to drag a line (see my example)
  • how to use the handleTickEvent function that is called 60 times per second (see my example)

 

Regards,

Gaetan Godart
Software engineer at ST (TouchGFX)

View solution in original post

6 REPLIES 6
Andrew Neil
Evangelist

Please use this button to properly post source code:

AndrewNeil_0-1708798436840.png

 

GaetanGodart
ST Employee

Hello @ferdlf ,

 

That looks like a fun project to do!

 

You did not ask a question, I assume you want to know how to start using TouchGFX to be able to display your radar on a screen.
Unfortunately it is not possible to run JS code on embedded systems (ex: microcontroller) but it is very easy to do it using TouchGFX.

I quickly put together a copy of your radar (without the sensor that I don't have).
I used the same board that you own so you can flash this project directly from Designer to see it on your screen.

If you are new to TouchGFX make sure to look at our documentation :

 

For your project I think you will need to look at :

  • the MVP model to be able to fetch the data of your sensor
  • how to use wildcards to display variables (see my example)
  • how to drag a line (see my example)
  • how to use the handleTickEvent function that is called 60 times per second (see my example)

 

Regards,

Gaetan Godart
Software engineer at ST (TouchGFX)

I really appreciate it man, I can't believe you took your time to do this project. Thank you so much!!

No problem @ferdlf 

 

But I did not do everything, I just created the background, displayed a line moving from 0° to 180° then back to 0° infinitely and also displayed the current angle of that moving line.

If the answer fixed your issue, could you select it as best answer so that I can close this thread?

 

Regards,

Gaetan Godart
Software engineer at ST (TouchGFX)

What you did was a big first step and now I'm doing the radar code with a STM32F4 communicating it with the STM32F746 by USART. 
BTW, how do I select your answer as best answer? I already select your previous answer as a solution, I thought that was it.

GaetanGodart
ST Employee

I am glad you found my solution helpful.

You have indeed already selected my answer as best answer which is enough. I have closed the thread now.

 

Regards,

Gaetan Godart
Software engineer at ST (TouchGFX)