Hiya,
I will like to find out how to create a scrollable view on a group. I am operating in Java mode, using the Controlp5 library. I wasn’t able to find examples online that helps. Could anyone put up some code stubs, please? The effect I want to achieve is shown in (1) of the attached figure.
Thank you very much,
Ed
Are you using a canvas? You could use a button to translate the y position on mouseDragged. Im away from my computer so ill post code later.
Thanks for getting back.
I am using a group, and attaching widgets to the group. Is it possible to add a event callback triggered by a slider to allow the user to scroll up and down to look at different parts of the group?
prompt_body_gp = prompt_cp5.addGroup("prompt_body_gp")
.setPosition(0,y)
.setSize(body_width, body_height)
.activateEvent(true)
.setBarHeight(0)
.setBackgroundColor(color(0,0,0))
.setLabel("")
.setGroup(prompt_gp)
.addCallback(new CallbackListener() {
public void controlEvent(CallbackEvent event) {
// Is this style of coding possible? If so, how can I define this body? Any help appreciated, thanks!
}
})
;
Textlabel prompt_txt_label = prompt_cp5.addTextlabel("prompt_label")
.setGroup(prompt_body_gp)
.setPosition(top_label_gap,0)
;
prompt_txt_label.setHeight(top_bar_height);
prompt_txt_label.setValue("SETTINGS");
prompt_txt_label.setFont(font);
https://editor.p5js.org/paulgoux/sketches/HWfTV6CLZ
check this sketch out, it might help you, I know this is not strictly written in java, but the concept should be the same. Please note this is a very early prototype. Essentially i create a button class, and create some variables. Here the slider is initialized and then the parameters are defined, although to save time you could just call new, however for the purpose of this sketch I needed to have the slider parameters in setup. You can add an onClick function to your button which will be triggered on certain conditions, mousePressed, mouseIsPressed, mouseClicked or mouseDragged, in mine I have chosen mouseDragged. The button class will contain your draw function, and in my case it contains a mapping function to map the width of the slider to the values you want to update, in this case a range of 0-40.
To use map you call it like this map()
it takes map(a,start,end,start2,end2);
a is the variable which you want to change start is the start of the slider, end is the end of the slider, start2 is the minimum value you want the variable to ever have and end2 is the maximum, the function then takes care of the math.
as for the mechanism to update the value itself, you have a mouse event which checks the mouse is on the slider, and it checks if it pressed down. if it is, I have a this. toggle which activates to 1 and when this is the case I have some code in the mouseDragged function which updates the value accordingly.
Thank you, I will check it out!
Parallax scrolling, viewport, panning:
Kf
If you are using ControlP5, then one approach is to create a SliderList (that gets you the scrollbar) and make it a custom Controller with a PGraphics. Now draw your content based on the state of the slider. Here is a past example from the ControlP5 creatior: