Creating basically a slideshow but a bit different

Hi,

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?

Thanks in advance!

Kind regards,
Joey

Please show your code and tell us what it doesn’t do
what you want

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.

PImage[] slides = new PImage [5];
PImage welc;
PImage home;
PImage friend;
PImage smallT;
PImage dnd;



void setup () {
  size (1080, 800);
  slides[0] = loadImage("welcome.jpg");
  slides[1] = loadImage("home.jpg");
  slides[2] = loadImage("findfriend.jpg");
  slides[3] = loadImage("smalltalk.jpg");
  slides[4] = loadImage("donot.jpg");
 
}

void draw() {
  background (0);
  image(slides[0], 0, 0);
  
  }

void mousePressed() {
  if ((mouseX, 100, mouseX, 80) && (100, mouseY, 100, mouseY)) {
    slides[0] = slides[4];
  }
  else {
    slides[0]++
}
}

You did this:

Try this:

int slide;

void draw() {
  background (0);
  image(slides[slide], 0, 0);
  }

And change slide with mouse, keyboard or over time with frameCount() or millis().

The Processing website has resources (tutorials, references, examples) for you to peruse:
processing.org

:)

Hi,
Thanks! I didn’t think of creating another integer and use for the array! :slight_smile:

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!

1 Like

which issues are these…? Elaborate.

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.

Please ask again when you need this.

Hey and welcome to the forum!

Great to have you here!

Warm regards,

Chrisir

One example (there are others) I found in the GUI examples:
Rollover / Examples / Processing.org

:)

here is another, very complex example where you can define Hotspots on pages.

A Hotspot is a clickable area that can lead to another page

You can have several pages and each can have several Hotspots in different locations.

see Presentation in processing? Is my idea doable? - #4 by Chrisir

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 :slight_smile:

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:
scuffedFlowchart

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! :sweat:

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!!! :smiley:

Kind regards,
Joey

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?

Holy moly, thats a beauty!! :open_mouth:

I will have to take some time to understand the code!

And thanks for sharing!

I just posted a simplified code in the other thread

1 Like

I was provided you with one piece of the puzzle.

Your original code did not work and had errors; this suggests that you need to take this in steps.

There is also the Coding Train on YouTube.

I encourage you to take on the challenge of writing this code on your own from the building blocks available to you.

:)

1 Like

@JoeyS,

Something I wrote quickly this morning:

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?

:)

1 Like

Looks cool! :smiley:

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 :slight_smile:

Thanks for the help! :smiley:



PImage[] slides = new PImage [8];
int slide=0; 

// --------------------------------------------------------------------------------------

void setup () {
  size (414, 736);

  // load 
  slides[0] = loadImage("start.jpg");
  slides[1] = loadImage("redgoal.jpg");
  slides[2] = loadImage("yellowgoal.jpg");
  slides[3] = loadImage("greenstart.jpg");
  slides[4] = loadImage("greenlist.jpg");
  slides[5] = loadImage("greenconnect.jpg");
  slides[6] = loadImage("greenmap.jpg");
  slides[7] = loadImage("greengoal.jpg");

} // func 

void draw() {
  background (0);
  image(slides[slide], 0, 0);

} // func 

// --------------------------------------------------------------------------------------

void mouseClicked() {
  if (mouseX > 300  && 
    mouseY > 10 &&  
    mouseX < 400  && 
    mouseY < 50 ) {   
  slide = 0;
  // the home button
  }
  if (slide == 3 && 
    mouseX > 5  && 
    mouseY > 10 &&  
    mouseX < 70  && 
    mouseY < 70 ) {   
  slide = 0;
  // the back button in start of green mode
  }
  if (slide == 2 && 
    mouseX > 5  && 
    mouseY > 10 &&  
    mouseX < 70  && 
    mouseY < 70 ) {   
  slide = 0;
  //the back button in yellow mode
  }
  if (slide == 1 && 
    mouseX > 5  && 
    mouseY > 10 &&  
    mouseX < 70  && 
    mouseY < 70 ) {   
  slide = 0;
  //the backbutton in red mode
  }
  if (slide == 0 && 
    mouseX > 50  && 
    mouseY > 300 &&  
    mouseX < 350  && 
    mouseY < 370 ) {
      slide = 2;  
   // the yellow mode-button
    }
  if (slide == 0 && 
    mouseX > 50  && 
    mouseY > 380 &&  
    mouseX < 350  && 
    mouseY < 450 ) {  
  slide = 1;
  // the red mode-button
  }
  if (slide == 0 && 
    mouseX > 50  && 
    mouseY > 210 &&  
    mouseX < 350  && 
    mouseY < 280 ) {   
  slide = 3;
  // green mode start-button
  }
   if (slide == 3 && 
    mouseX > 50  && 
    mouseY > 500 &&  
    mouseX < 350  && 
    mouseY < 600 ) {   
  slide = 4;
  // connect button
  }
    if (slide >= 3 && 
    mouseX > 5  && 
    mouseY > 10 &&  
    mouseX < 70  && 
    mouseY < 70 ) {   
  slide--;
  //the backbutton in green mode
  }
    if (slide == 4 && 
    mouseX > 290  && 
    mouseY > 260 &&  
    mouseX < 400  && 
    mouseY < 320 ) {   
  slide = 5;
  // Albie more-button
  }
    if (slide == 5 && 
    mouseX > 50  && 
    mouseY > 520 &&  
    mouseX < 370  && 
    mouseY < 570 ) {   
  slide = 6;
  // Albie-connect button -> Map
  }
}

//void digital.read
// if (slide == 6 && digital read thing
// slide == 7
1 Like