How to make slider in application window?

Processing Libraries
1

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?

slider
slider1920×1080 132 KB

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);
}
2

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
    }
  }
  );   
}
3

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

4

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

5

danger
danger1920×1080 180 KB

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?

6

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.

7

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

danger2
danger21920×1080 244 KB

8

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
9

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

dataFile()

1 Like