In our course we are learning prototyping with Arduino Nano BLE 33 Sense. To our physical prototype we are creating a user interface to be run from a computer through Processing. The plan was to upload images we’ve created in Adobe XD, and then in Processing program it to have the same flow as in Adobe XD (with the “buttons” on the images moving you back and forth in the user scenarios).
We were thinking that mousePressed-functions could be coupled with coordinates of the different buttons on the uploaded images, to maneuver through the “slideshow”.
As a beginner I started scouring the internet to find similar things done in tutorials and alike, but since I didn’t find exactly what I was looking for I tried to write the code with inspiration from the things I found, but the results haven’t come through.
So, I guess my question is; Is our group taking the correct approach? Or is there a better way to solve this problem?
I’ve been messing around in a lot of ways since we are still in the beginning of our coding.
The uploading of the images (which are currently placeholders) and the array works, but the mousepressed-function is currently not working. The Pimage can not be converted to an int, so the natural progression through the images is something I haven’t worked out.
The thing I was experimenting with the mouseX and the mouseY was me trying to tell the program to behave in a different way (showing anohter slide) while pressing in that area of the console.
Hi,
Thanks! I didn’t think of creating another integer and use for the array!
I was looking through resources and have watched a lot Daniel Shiffmans youtube-content as well as purchased the Learning Processing-book. I just couldn’t seem to find exactly what I was looking for.
I do still have some issues with the flow of the pictures. And also on how I can program it so that when I press on a certain place in the console a certain image appears instead of another.
But I’ll continue chasing around the internet to see if there’s tutorials!
The Console is the direct window underneath your code. Nothing to press there.
You mean you press an area in the image?
It is easiest when the NEXT button has the same position in all images, then just say slide++;
(check when slide>4)
A PREVIOUS button would be slide--;
(check when slide <4)
You can of course have an image with 3 clickable areas (like in a game, where you are in a castle and you can choose between 3 different doors). Then you want something like
if (mouse...... ) slide =1; // door 1 leads to the basement, cellar
else if (mouse...... ) slide =2; // door 2 leads to the Main Hall
else if (mouse...... ) slide =3; // door 3 leads up the small black stairs
Actually
This would be a bit harder. Especially when
the number of buttons (doors/choices) is different from image to image and
the position of buttons (doors/choices) is different from image to image.
I used mousePressed instead of mouseClicked so i couldn’t click through the images, but that is solved now. So I can click through it from 1-5
Yeah, exactly! So when I press top-left in the image where the image carries a “back”-symbol, it the previous picture should show, and if I press a “continue”-box located in the middle of the image it would show the following image.
Basically the “flow” goes something like this:
From Start you can go down 3 paths. A1 and B1 can only return to start. From C1 you can progress through the images. On each image in the C-branch you can go backwards 1 step or continue forward until you get to C5 where the only way is back to Start.
This is atleast the plan!
From my beginners-perspective I was thinking that perhaps the mouse-coordinates could be of use but I’m not sure!
Thank you, and thank you so much for helping out!!!
I was looking at that earlier, but can I apply that to changing the image that is uploaded? So basically what is visible in the console is only the image?
String slide00 = "250, 250, 100, 100, 400, 100, 400, 400, 100, 400"; //spots of interest
String slide01 = "200, 250, 150, 100, 300, 80"; //spots of interest
int [] data;
int slide = 0;
void setup()
{
size(500, 500);
noStroke();
textSize(24);
}
void draw()
{
background(0);
if (slide == 0)
{
data = int(trim(split(slide00,',')));
//printArray(data);
for(int i = 0; i< data.length; i+=2 )
{
fill(255, 0, 0);
circle(data[i], data[i+1], 50);
if (overCircle(data[i], data[i+1], 50))
{
//println("over");
fill(255);
text("Press \'space bar\' to select!", 50, 50);
if (key == ' ') slide = 1;
}
}
}
if (slide == 1)
{
// Do something
}
key = '0';
}
// https://processing.org/examples/rollover.html
boolean overCircle(int x, int y, int diameter)
{
float disX = x - mouseX;
float disY = y - mouseY;
if(sqrt(sq(disX) + sq(disY)) < diameter/2 )
{
return true;
}
else
{
return false;
}
}
I was inspired this morning and wanted to use Strings for data.
This String data can be read directly from code, from a file or sent by Arduino, etc.
I am just sharing a simple example that began with the Rollover example… I have since updated this (significantly) to be much more useful for some of my future projects.
Is the goal of your slideshow project\homework to write slideshow code or to find suitable solutions for presenting a slideshow with Processing?
The goal is to click around on the images and different stuff should happen. This is how I’ve solved it for now. Chrisir suggested to go for Else if’s instead of ifs, but haven’t done that yet. It works as it’s supposed to for now, and now I’m gonna add the serial-communcation to the arduino
