Hi there dear enthusiasts,
I have been trying to write a program which has a carousel in it which shows some graphs in it ( similar to android apps). I was wondering if there are any libraries out there that already offer the carousel object and allow you to put your graph, image or whatever object you might be working with in it and be able to slide it like a carousel. Something like what has been depicted in the following link:
https://kivy.org/docs/api-kivy.uix.carousel.html
thanks 
Look at this example :
I think that you have to hardcode it in processing but maybe there’s some GUI libraries that can do it for you :
Have a nce day
Thanks for the reply josephh.
I thought I would probably have to hardcode it, but I was hopping someone would know a library of a function that has already done it and could save me some time if possible.
In that link that I had included for Kivy module in Python, someone has already done that and we can just utilise it in a GUI. Also the carousel implementation looks a lot like the ones you find in android apps and is pretty neat.
That first link seems pretty nice though and I had already seen it, but it is not exactly what I was after.
Maybe there’s a way to install it on Processing Python
Unfortunately it is not possible as far as I know. Because the python mode in Processing, similar to other Jython interpreters, can only handle and allow for purely python based modules. This means that all C-based python modules like numpy or other ones which rely on cython like Kivy, cannot be implemented in processing python mode.
Oh yeah you’re right
@jimbojohn Have you check the Horizontal ScrollViewer? I believe that will give you a similar effect. You will slide freely between cells/pictures, not like the carousel that stop at the center of each picture. I believe you should be able to change the touch gesture so you make the slide stop at the center of the picture. I suggest you do a search of carousel for Android. If you find a code of interest, posted here and I might give it a try and tried to get a demo working in Processing Android.
Kf
click mouse to go to next screen
you mustn’t use background() at the begin of a state but use fill(.....); rect(0,0,width,height); I think
Chrisir 
// carousel with a transition between the screens (states)
//
// states
final int stateGame = 0; // consts
final int statePause = 1;
final int stateC = 2;
int state = stateGame; // current
// for transition
int statePrevious=stateGame;
boolean transitionFlag=false;
float transitionAmt=0; // for lerp
// -------------------------------------------------
void setup() {
// init (runs only once)
size(800, 600);
} // func
void draw() {
// runs on and on
if (transitionFlag) {
// show the transition
manageTransition();
}//if
else {
// show the screen (transition is over)
showState(state);
text("press mouse to go on ", 120, 16);
//
}//else
//
} // func
// functions for states - called from draw() -------------------------------
void manageTransition() {
float xprevious=0, xcurrent=0;
xprevious = lerp( 0, -width, transitionAmt);
xcurrent = lerp( width, 0, transitionAmt);
pushMatrix();
translate(xprevious, 0);
showState(statePrevious);
popMatrix();
pushMatrix();
translate(xcurrent, 0);
showState(state);
popMatrix();
//
transitionAmt+=0.025; // for lerp
// Is the transition finished?
if (transitionAmt>=1) {
// yes, reset
transitionAmt=0;
transitionFlag=false;
}
}
void showState(int state) {
switch (state) {
case stateGame:
// Game
handleStateGame();
break;
case statePause:
// Pause
handleStatePause();
break;
case stateC:
// Pause
handleStateC();
break;
default:
// error
println("Error number 939; unknown state : "
+ state
+ ".");
exit();
break;
} // switch
}//func
void handleStateGame() {
// Game
fill(11);
rect(0, 0, width, height);
fill(244, 3, 3); // red
//
noStroke();
fill(255, 2, 2) ;
rect(100, 100, 100, 100);
fill(255, 2, 255) ;
// rect(300, 100, 100, 100);
} // func
void handleStatePause() {
// Pause
fill(255);
rect(0, 0, width, height);
fill(244, 3, 3); // red
text ("Pause.... "
+ " ... ", 210, 313);
} // func
void handleStateC() {
//
fill(255);
rect(0, 0, width, height);
fill(0);
text("state C", 111, 122);
}
// ----------------------------------------
// keyboard input
void keyPressed() {
switch (state) {
case stateGame:
// Game
keyPressedForStateGame();
break;
case statePause:
// Pause
keyPressedForStatePause();
break;
case stateC:
//
//
break;
default:
// error
println("Error number 1039; unknown state : "
+ state
+ ".");
exit();
break;
} // switch
} // func
// ----
void keyPressedForStateGame() {
state++;
} // func
void keyPressedForStatePause() {
if (key == CODED)
{
if (keyCode == UP) {
//
} else if (keyCode == DOWN) {
// none
}
if (keyCode == LEFT) {
//
} else if (keyCode == RIGHT) {
//
} else {
// do nothing
} // else
} // if (key == CODED) {
else
{
// not CODED ----------------------
if (key == 'p') {
//
state = stateGame;
} else {
// do nothing
} // else
} // else not CODED
} // func
// -------------------------------------------------------
// Mouse input
void mousePressed() {
//
statePrevious=state;
transitionFlag=true;
transitionAmt=0; // for lerp
switch (state) {
case stateGame:
// Game
mousePressedForStateGame();
break;
case statePause:
// Pause
mousePressedForStatePause();
break;
case stateC:
// C
mousePressedForStateC();
break;
default:
// error
println("Error number 1139; unknown state : "
+ state
+ ".");
exit();
break;
} // switch
//
} // func
void mousePressedForStateGame() {
//
state++;
//
} // func
void mousePressedForStatePause() {
//
state++;
} // func
void mousePressedForStateC() {
//
state=0;
} // func
// =========================================
@Chrisir That is beautiful!! What a legend!!! You ended up finding me on this forum too after all haha
@kfrajer Oh also I will post here what I will come up with for the android project that I am doing so anyone can use it in android mode or whatever and it can be added to a GUI library for android hopefully.
Cheers!!!
I have been working on developing the code on and off and I have something but its not really ideal unfortunately.
I have a class called object which pretty much allows me to define and display the cells of a carousel (full screen coloured rectangles at the moment). I am using the mouse as the finger for dragging the cells around.
It is still rather lacking and I am stuck on the interaction and transitions between the carousel cells still, let alone properly making it object oriented and dynamically robust.
It is not really working properly and I was hoping that someone could have look and play with it to get it working.
float bx;
float by;
float obj_width;
float obj_height;
float easing = 0.05;
object rect_01;
object rect_02;
object rect_03;
// -------------------------------------------------
void setup() {
// init (runs only once)
size(800, 600);
bx = width/2.0;
by = height/2.0;
obj_width = 100;
obj_height = 100;
rect_01 = new object(bx,by,width,height,color(0,255,0));
rect_02 = new object(-rect_01.pos_x,by,width,height,color(0,0,255));
rect_03 = new object(3*rect_01.pos_x,by,width,height,color(255,0,0));
//object[] rects = { rect_01, rect_02, rect_03};
} // func
void draw() {
background(255);
rect_01.display();
rect_02.display();
rect_03.display();
//float targetX = mouseX;
//float dx = targetX - x;
//x += dx * easing;
if (rect_01.locked == false || rect_02.locked == false || rect_03.locked == false){
rect_01.pos_x += (bx - rect_01.pos_x)*easing;
rect_02.pos_x += (-rect_01.pos_x - rect_02.pos_x)*easing;
rect_03.pos_x += (3*rect_01.pos_x - rect_03.pos_x)*easing;
}
}
void mousePressed(){
rect_01.mousePressed();
rect_02.mousePressed();
rect_03.mousePressed();
rect_01.bdifx = mouseX-rect_01.pos_x;
rect_02.bdifx = mouseX-rect_02.pos_x;
rect_03.bdifx = mouseX-rect_03.pos_x;
}
void mouseDragged() {
if(rect_01.locked || rect_02.locked || rect_03.locked) {
rect_01.pos_x = mouseX-rect_01.bdifx;
rect_02.pos_x = mouseX-rect_02.bdifx;
rect_03.pos_x = mouseX-rect_03.bdifx;
}
}
void mouseReleased() {
rect_01.mouseReleased();
rect_02.mouseReleased();
rect_03.mouseReleased();
}
class object{
float pos_x;
float pos_y;
float size_x;
float size_y;
boolean bover = false;
boolean locked = false;
float bdifx = 0.0;
float bdify = 0.0;
color c = 0;
// The Constructor is defined with arguments.
object(float temp_pos_x, float temp_pos_y, float temp_size_x, float temp_size_y, color c_temp) {
pos_x = temp_pos_x;
pos_y = temp_pos_y;
size_x = temp_size_x;
size_y = temp_size_y;
c = c_temp;
}
void display() {
stroke(0);
fill(c);
rectMode(CENTER);
if(abs(pos_x-width/2)<=300){
pos_x = width/2;
}
rect(pos_x,pos_y,size_x,size_y);
}
void mousePressed() {
if (mouseX > pos_x - size_x/2 && mouseX < pos_x + size_x/2 &&
mouseY > pos_y - size_y/2 && mouseY < pos_y + size_y/2) {
locked = true;
} else {
locked = false;
}
//bdifx = mouseX-pos_x;
}
void mouseDragged() {
if(locked) {
pos_x = mouseX-bdifx;
}
}
void mouseReleased() {
locked = false;
}
}
I am not sure what you are trying to accomplish.
From your first post (and my sketch) I assumed you want to have a smooth transition between screens / states.
Now you use the mouse to rotate the carousel. So it’s more a slide show for images that you have in mind? Like a cover flow?
object is actually a silly name for a class. Is it one screen within the carousel?
In my sketch it was click and rotate and stop at next slide. In your Sketch it‘s more complicate.
Maybe I can look at it tomorrow
What I would like to accomplish is a carousel like the ones you see in smart phones. You have a frame or an object which could contain an image, graph or icons etc and you would use your finger to flick left or right between the slides or cells of the carousel. Of course getting the transitioning between the slides done is a part of it. @kfrajer 's description is the type of carousel I am talking about I believe.
I totally agree. My apologies. I forgot to change it.
But effectively what I am thinking is to have a carousel object which allows you to set dimensions, padding between carousel cells, objects of interest (i.e. images, graphs etc) and things like that to it. My first step of accomplishing this was to just use fullscreen rectangles to simulate the cells or slides of the carousel and use the mouse as the finger touch that flicks between the slides and get the transition right.
Carousel examples:
that looks very nice:
download and add 10 images and boom!
Wow! That’s exactly what I was after. Thanks a heaps!!!
Glad you like it -
