How to make slider in application window?

Good afternoon, when using the examples, I could not implement a slider for the entire scrolling of these applications.
How can I make a slider that scrolls data in a window with an image background, regardless of the size of the window?

I found a suitable example, but it does not fit! So the current text scrolls, not the data in the window.

import controlP5.*;

ControlP5 cp5;
Textarea myTextarea;

void setup() {
  size(700,400);
  cp5 = new ControlP5(this);
  
  myTextarea = cp5.addTextarea("txt")
                  .setPosition(100,100)
                  .setSize(200,200)
                  .setFont(createFont("arial",12))
                  .setLineHeight(14)
                  .setColor(color(128))
                  .setColorBackground(color(255,100))
                  .setColorForeground(color(255,100));
                  ;
  myTextarea.setText("Lorem Ipsum is simply dummy text of the printing and typesetting"
                    +" industry. Lorem Ipsum has been the industry's standard dummy text"
                    +" ever since the 1500s, when an unknown printer took a galley of type"
                    +" and scrambled it to make a type specimen book. It has survived not"
                    +" only five centuries, but also the leap into electronic typesetting,"
                    +" remaining essentially unchanged. It was popularised in the 1960s"
                    +" with the release of Letraset sheets containing Lorem Ipsum passages,"
                    +" and more recently with desktop publishing software like Aldus"
                    +" PageMaker including versions of Lorem Ipsum."
                    );
    
  cp5.addSlider("changeWidth")
     .setRange(100,400)
     .setValue(200)
     .setPosition(100,20)
     .setSize(100,19)
     ;
     
  cp5.addSlider("changeHeight")
     .setRange(100,400)
     .setValue(200)
     .setPosition(100,40)
     .setSize(100,19)
     ;
  
}


void keyPressed() {
  if(key=='r') {
    myTextarea.setText("Lorem ipsum dolor sit amet, consectetur adipiscing elit."
                      +" Quisque sed velit nec eros scelerisque adipiscing vitae eu sem."
                      +" Quisque malesuada interdum lectus. Pellentesque pellentesque molestie"
                      +" vestibulum. Maecenas ultricies, neque at porttitor lacinia, tellus enim"
                      +" suscipit tortor, ut dapibus orci lorem non ipsum. Mauris ut velit velit."
                      +" Fusce at purus in augue semper tincidunt imperdiet sit amet eros."
                      +" Vestibulum nunc diam, fringilla vitae tristique ut, viverra ut felis."
                      +" Proin aliquet turpis ornare leo aliquam dapibus. Integer dui nisi, condimentum"
                      +" ut sagittis non, fringilla vestibulum sapien. Sed ullamcorper libero et massa"
                      +" congue in facilisis mauris lobortis. Fusce cursus risus sit amet leo imperdiet"
                      +" lacinia faucibus turpis tempus. Pellentesque pellentesque augue sed purus varius"
                      +" sed volutpat dui rhoncus. Lorem ipsum dolor sit amet, consectetur adipiscing elit"
                      );
                      
  } else if(key=='c') {
    myTextarea.setColor(0xffffffff);
  }
}
void draw() {
  background(0);
  if(keyPressed && key==' ') {
    myTextarea.scroll((float)mouseX/(float)width);
  }
  if(keyPressed && key=='l') {
    myTextarea.setLineHeight(mouseY);
  }
}

void changeWidth(int theValue) {
  myTextarea.setWidth(theValue);
}

void changeHeight(int theValue) {
  myTextarea.setHeight(theValue);
}

Consider using a Swing component called JScrollPane(). The following demo code will not run until you supply a path to your image. The default Processing window is not used. Swing components are used on a separate EventDispatchThread.

import javax.swing.*;
import java.io.*;
import java.awt.image.BufferedImage;
import javax.imageio.ImageIO;

BufferedImage img;

final int _wndW = 600;
final int _wndH = 600;

void ScrollPaneDemo() {
  JFrame frame = new JFrame();
  frame.setBounds(500, 200, _wndW, _wndH);
  frame.setTitle("Demo");
  try {
    img = ImageIO.read(new File("path/to/your/image"));
  } catch (IOException e) {
    println(e);
  }
  JLabel imgLabel = new JLabel(new ImageIcon(img));
  JScrollPane scrlPane = new JScrollPane(imgLabel);
  frame.add(scrlPane);
  frame.setVisible(true);
  scrlPane.repaint();
}

void setup() {
  surface.setVisible(false); // Don't show default window 
  javax.swing.SwingUtilities.invokeLater(new Runnable() {
    public void run() {
      ScrollPaneDemo(); // Builds components on EventDispatchThread
    }
  }
  );   
}

Thank you, I would like to know if such an example will work on android?

I don’t believe Swing components run on Android; use Android widgets instead.

When I run it, I get an error, I tried to specify the path in different ways but without success! What could be the problem?

Please read the error message; it says it can’t read your input file. You have placed the file in your sketch folder and you didn’t write the entire path to your file. On a Mac it would be something like /Users/yourName/Documents/Processing/yourSketchName/data/yourImage. We’re depending on Java now, not Processing. Processing doesn’t have its own widgets; you have to rely on a third party such as controlP5, G4P, Swing, or AWT, etc.

Very good, And how to make the slider on the right, and not at the bottom?

The sliders only show up when they are needed. You have a wide image which is not very tall. Why would you need a right scrollbar when you can see the entire image height? The scrollPane is smart enough to know that the image.height is less than the window.height so it correctly doesn’t show a vertical scrollbar. Insert a great big image which is a lot larger than your window in both width and height and you should then see both scrollers.

1 Like

img = ImageIO.read(dataFile("test.png"));

dataFile()

1 Like