# How to make slider in application window?

**URL:** <https://discourse.processing.org/t/how-to-make-slider-in-application-window/40548>\
**Category:** Libraries\
**Created:** [January 11, 2023, 9:08am UTC](https://discourse.processing.org/t/how-to-make-slider-in-application-window/40548 "2023-01-11T09:08:09Z")\
**Posts on this page:** 9\
**Page:** 1

<div class="post-metadata">

**Author:** ![Vadimkuzmin](https://avatars.discourse-cdn.com/v4/letter/v/6de8d8/32.png) [@Vadimkuzmin](https://discourse.processing.org/u/Vadimkuzmin)\
**Post date:** [January 11, 2023, 9:08am UTC](https://discourse.processing.org/t/how-to-make-slider-in-application-window/40548/1 "2023-01-11T09:08:09Z")

</div>

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](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/3X/d/5/d56b0ba161dc8792d8796ff05ad57fa6f4ac07f8.jpeg)

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

```auto
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);
}

```

---

<div class="post-metadata">

**Author:** ![svan](https://avatars.discourse-cdn.com/v4/letter/s/82dd89/32.png) [@svan](https://discourse.processing.org/u/svan)\
**Post date:** [January 12, 2023, 2:16pm UTC](https://discourse.processing.org/t/how-to-make-slider-in-application-window/40548/2 "2023-01-12T14:16:21Z")

</div>

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.

```auto
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
    }
  }
  );   
}

```

---

<div class="post-metadata">

**Author:** ![Vadimkuzmin](https://avatars.discourse-cdn.com/v4/letter/v/6de8d8/32.png) [@Vadimkuzmin](https://discourse.processing.org/u/Vadimkuzmin)\
**Post date:** [January 13, 2023, 4:23am UTC](https://discourse.processing.org/t/how-to-make-slider-in-application-window/40548/3 "2023-01-13T04:23:48Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![svan](https://avatars.discourse-cdn.com/v4/letter/s/82dd89/32.png) [@svan](https://discourse.processing.org/u/svan)\
**Post date:** [January 13, 2023, 4:43am UTC](https://discourse.processing.org/t/how-to-make-slider-in-application-window/40548/4 "2023-01-13T04:43:55Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Vadimkuzmin](https://avatars.discourse-cdn.com/v4/letter/v/6de8d8/32.png) [@Vadimkuzmin](https://discourse.processing.org/u/Vadimkuzmin)\
**Post date:** [January 13, 2023, 5:46am UTC](https://discourse.processing.org/t/how-to-make-slider-in-application-window/40548/5 "2023-01-13T05:46:23Z")

</div>

![danger](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/3X/6/8/68e1b4b6b91a9f3b96c3d941a43b6db12b432751.png)

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?

---

<div class="post-metadata">

**Author:** ![svan](https://avatars.discourse-cdn.com/v4/letter/s/82dd89/32.png) [@svan](https://discourse.processing.org/u/svan)\
**Post date:** [January 13, 2023, 5:53am UTC](https://discourse.processing.org/t/how-to-make-slider-in-application-window/40548/6 "2023-01-13T05:53:32Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![Vadimkuzmin](https://avatars.discourse-cdn.com/v4/letter/v/6de8d8/32.png) [@Vadimkuzmin](https://discourse.processing.org/u/Vadimkuzmin)\
**Post date:** [January 13, 2023, 6:04am UTC](https://discourse.processing.org/t/how-to-make-slider-in-application-window/40548/7 "2023-01-13T06:04:56Z")

</div>

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

 ![danger2](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/3X/1/0/1071f88681ca9ea34e8791ebd3828e5b5c81c720.jpeg)

---

<div class="post-metadata">

**Author:** ![svan](https://avatars.discourse-cdn.com/v4/letter/s/82dd89/32.png) [@svan](https://discourse.processing.org/u/svan)\
**Post date:** [January 13, 2023, 6:09am UTC](https://discourse.processing.org/t/how-to-make-slider-in-application-window/40548/8 "2023-01-13T06:09:12Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![GoToLoop](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/gotoloop/32/86_2.png) [@GoToLoop](https://discourse.processing.org/u/GoToLoop)\
**Post date:** [January 13, 2023, 6:34am UTC](https://discourse.processing.org/t/how-to-make-slider-in-application-window/40548/9 "2023-01-13T06:34:51Z")

</div>

> [@Vadimkuzmin](#):
>
> , I tried to specify the path in different ways but without success!

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

[**dataFile()**](http://processing.github.io/processing-javadocs/core/processing/core/PApplet.html#dataFile-java.lang.String-)