Processing sketches with Raspberry Pi and PiTFT+ screen (480x320px) - open new screens with taps?

social_jo_jo

Hello, guys.

I am new to the Processing programming and have a "How-to" question after a whole day of reading tutorials.

What I want to achieve is the following:

1. the setup is a Raspberry Pi with a PiTFT+ touchscreen with a resolution of 480x320px; there is no mouse or physical keyboard, only this touchscreen.
2. I have learnt how to divide the canvas so that it can contain different images (e.g. icons, logos etc.. according to the user needs)

3. imagine the welcome screen of the PiTFT looks like this:

   PImage photo;
   PImage photo1;
   PImage logo;
   
   void setup() {
   
     size(480,320);
     photo = loadImage("information.jpg");
     photo1 = loadImage("question.jpg");
     logo = loadImage("logo.png");
   
   fill(0, 0, 0);
   rect(0, 0, 80, 80);
   fill(50, 205, 50);
   rect(80, 0, 320, 320);
   fill(0, 0, 0);
   rect(400, 0, 480, 80);
   
   }
   
   void draw() {
     image(photo, 0, 0);
     image(photo1, 400,0);
     image(logo, 80, 0);
   }
   

4. how can we make a new sketch appear after the user taps the touchscreen on one of the images photo or photo1? The new sketch itself has an image container and two smaller images on the bottom with arrows navigation (left and right). A click on the arrows should change the image appearing on the screen

5. Is such functionality possible? A click on the photo1 should, if possible show the current level of the battery powering the Pi. For the battery status we have a way to read the percentage, it's a question of how to show it with Processing?

Appreciate your help!

koogs

edit the question, highlight the code, hit ctrl-o...

social_jo_jo

@koogs,

I have edited the question. Thank you for the remark. I really appreciate your help with this guys. It is really important for me to know whether the above functionality os within the scope of Processing.

koogs

your requirements are well within the capabilities of processing.

but i wouldn't use a 'new sketch' for the second half of your program, i'd just incorporate the functionality into the existing code as a separate phase and use a flag to switch between them.

social_jo_jo

@koogs,

thank you for your prompt reply.

Could you please explain in short what is meant under "a separate phase"? How can we add an additional phase to be executed to an existing sketch? How will the switch between two phases be triggered?

I will be grateful if you can give me a starting point for those two things so that I can somehow formulate the code.

Thank you very much in advance!

The idea is to have the welcome screen from above with two buttons being the images "photo" & "photo1" - tap on each of the buttons to open a new screen:

A tap on "photo" is actually: - opening a screen with two other buttons which lead to: -> either a further screen with an image slideshow with back/forth navigation arrows changing the image + a back button or: -> a screen which shows the read battery status (is it possible to show with Processing data from the Pi, in our case the battery level - its value is read but how can we connect the Processing with real world data from the Pi?

I have made the canvases for all the screens and placed the images which should function like buttons, I am just wondering how to enable the touch functionality and to present real world data and add links between different screens on tap (event-driven stuff).

Could you please provide some tutorial for this?

Appreciate your help!

koogs

static final int PAGE1 = 1;
static final int PAGE2 = 2;
int flag = PAGE1;

...

void draw() {
  switch (flag) {
    case PAGE1:
      drawPage1();
      break;

    case PAGE2: {
      drawPage2();
      break;

    ...
  }
}

start with flag set to PAGE1

social_jo_jo

@koogs, thank you for your prompt reply.

Where in the code should I put the sketch code for the canvases of each page with their related images? How are the tap on the screen events set as links?

koogs

you can put anything you like in drawPage1(), the code to display anything, the code to check whether mouse clicks are within your buttons, anything. if the mouse clicks are such that you should go onto the next phase then just set flag to the value for that page.

take a big piece of paper, draw all your screens on it, give them all numbers. then draw the paths between those screens... define a value for each screen, write a method for each...

i'm not going to go into how to write the individual pages