How to create icon Dock using processing

PhiLho

Re: How to create icon Dock using processing

1 year ago

"like the mac" is a bit imprecise, for those not having used it...
I have used one a bit in the past, but I don't even recall how the icons behave to make room to the bigger icons. Because I suppose you want a dynamic dock, not a static image...

You have first to load the images, and display them in a row, at the same size. Adding a reflection effect is a bonus, I suppose... Then you need to make the icons to react on mouse over. Not too hard so far, perhaps you can attempt these first steps to get things started, unless you expect somebody to write it for you (can be a fun project, admittedly).
The main difficulty is to make the icons to grow in a nice way (probably using easing), proportionally to the proximity with the mouse, and to make the other icons to make room for the growing ones.

suhit

Re: How to create icon Dock using processing

1 year ago

Hi, phi.lho, like as u said i have loaded the images and displayed in a row and all images are of same size. Now I want to add that dock effect as I move my mouse over the images. What I am trying to do is that as I move mouse over the images in the dock, the image over which mouse goes should pop up like in dock image above. And If i click on seleced image the image should load in display area above the dock ( similar to how to do it apple mac). So far I have archieved to get the images in line( see pic below) and if I click on the image the selected image get displayed the display window above the image dock. Now want to add dock effect on mouse hower over images. As you suggested I am trying easing effect to get enlarge images. Please help if you have any ideas how to get this done.

My image

PhiLho

Re: How to create icon Dock using processing

1 year ago

Good, but also show your code, so we have some starting point... Even if the code is trivial, at least we will use your names, your way of loading images, and so on.

How do the remaining icons behave? They are pushed on the side to leave room for the enlarged ones?

suhit

Re: How to create icon Dock using processing

1 year ago

Below is my code for the project so far. I have loaded the images at perticular distance from each other and also formed the rectacles around them so as to detect there postion(may not be needed i guess fpr dock program). I have one single Image combining all the images above(see display image above) with resolution (8192x568). As the user clicks on the pericular image the selected image will get displayed. The actual logic is the image will shift position based on its position towards left or right(see DisplayImage function in code to get the idea). Now I am trying to click on perticular image show that it should get displayed. So far I have archieved this.

boolean img1 = false, img2 = false, img3 =false, img4 = false, img5 = false, img6 = false, img7 = false, img8 =false;
PImage logo0, logo1, logo2, logo3, logo4, logo5, logo6, logo7;
PImage img;
PImage sky;
PImage logo;
boolean itemSelect = false;
int val = 255, val1;
int var;
float x = -1024;
float y = 0;
float targetX, targetY;
float easing = 0.09;
int rectWidth = 100;
int rectHeight = 568;
int space = 20;
void setup(){
img = loadImage("elevation_content.jpg");
logo0 = loadImage("exotica.png");
logo1 = loadImage("august_house.png");
logo2 = loadImage("celestial.png");
logo3 = loadImage("constellation.png");
logo4 = loadImage("insignia.png");
logo5 = loadImage("jade.png");
logo6 = loadImage("serenity.png");
logo7 = loadImage("zephyr.png");
sky = loadImage("skyblue.jpg");
fontA32 = createFont("Arial", 32);
textFont(fontA32, 32);
size(1024, 768);
frameRate(30);
smooth();
}
void draw(){
background(255);
noTint();
image(sky, 0, 0, 1024, 768);
noTint();
imageMode(CORNER);
image(logo0, 40, 650, 100, 100);
image(logo1, 160, 650, 100, 100);
image(logo2, 280, 650, 100, 100);
image(logo3, 400, 650, 100, 100);
image(logo4, 520, 650, 100, 100);
image(logo5, 640, 650, 100, 100);
image(logo6, 760, 650, 100, 100);
image(logo7, 880, 650, 100, 100);
drawRect();
if (img1 == true) {
displayImage(0);
}
else if (img2 == true) {
displayImage(-1024);
}
else if (img3 == true) {
displayImage(-2048);
}
else if (img4 == true) {
displayImage(-3072);
}
else if (img5 == true) {
displayImage(-4096);
}
else if (img6 == true) {
displayImage(-5120);
}
else if (img7 == true) {
displayImage(-6144);
}
else if (img8 == true) {
displayImage(-7168);
}
}
void drawRect()
{
for (int y=0; y < 1; y++)
{
for (int x=0; x < 8; x++)
{
noFill();
strokeWeight(1);
stroke(0,0,0);
rect(x*(rectWidth + space)+40, 650, 100, 100);
}
}
}
void mouseClicked() {
if(mouseButton == LEFT){
img1 = false;
img2 = false;
img3 = false;
img4 = false;
img5 = false;
img6 = false;
img7 = false;
img8 = true;
}
else if(mouseButton == RIGHT){
img1 = true;
img2 = false;
img3 = false;
img4 = false;
img5 = false;
img6 = false;
img7 = false;
img8 = false;
}
}
void displayImage(int var) {
targetX = var;
targetY = 0;
float dx = targetX-x;
if (abs(dx) > 1) {
x += dx * easing;
}
float dy = targetY-y;
if (abs(dy) > 1) {
y += dy * easing;
}
image(img, x, y);
}
Please tell me how to select image( if I click on the pericular image that image should get displayed in the window above).

PhiLho

Re: How to create icon Dock using processing

1 year ago

First advice: I suggest to use arrays! For images and for booleans. Will be more flexible and will avoid repetitive code.
Next, it can be interesting to make a class to wrap each icon.

suhit

Re: How to create icon Dock using processing

1 year ago

LIke you said I have created array of images and booleans. Bellow is the code

boolean [] img = new boolean[8];

PImage [] logo = new PImage[8];

PImage displayImg;

PImage sky;

boolean itemSelect = false;

int val = 255, val1;

int var;

float x = -1024;

float y = 0;

float targetX, targetY;

float easing = 0.09;

int rectWidth = 100;

int rectHeight = 568;

int space = 20;

void setup(){



  displayImg = loadImage("elevation_content.jpg");



  for(int i = 0; i<logo.length; i++){

   logo[i] = loadImage("img"+i+".jpg");

  }



  sky = loadImage("skyblue.jpg");



   size(1024, 768);



  frameRate(30);

  smooth();

}

void draw(){



  background(255);

  noTint();



  image(sky, 0, 0, 1024, 768);

  noTint();

  imageMode(CORNER);

  int j = 0;

  for(int i = 0; i< logo.length; i++){

   image(logo[i], 40+j, 650,100,100);

   j+=120;

  }

drawRect();

if (img[0] == true) {

   displayImage(0);

  }

  else if (img[1] == true) {

   displayImage(-1024);

  }

  else if (img[2] == true) {

   displayImage(-2048);

  }

  else if (img[3] == true) {

   displayImage(-3072);

  }

  else if (img[4] == true) {

   displayImage(-4096);

  }

  else if (img[5] == true) {

   displayImage(-5120);

  }

  else if (img[6] == true) {

   displayImage(-6144);

  }

  else if (img[7] == true) {

   displayImage(-7168);

  }



}



   void drawRect()

  {

   for (int y=0; y < 1; y++)

   {

   for (int x=0; x < 8; x++)

   {

   noFill();

   strokeWeight(1);

   stroke(0,0,0);

   rect(x*(rectWidth + space)+40, 650, 100, 100);

   }

   }

}



void mouseClicked() {

  if(mouseButton == LEFT){



   img[0] = false;

   img[1] = false;

   img[2] = false;

   img[3] = false;

   img[4] = false;

   img[5] = false;

   img[6] = false;

   img[7] = true;

  }



  else if(mouseButton == RIGHT){



   img[0] = true;

   img[1] = false;

   img[2] = false;

   img[3] = false;

   img[4] = false;

   img[5] = false;

   img[6] = false;

   img[7] = false;



  }

}

void displayImage(int var) {

  targetX = var;

  targetY = 0;

  float dx = targetX-x;

  if (abs(dx) > 1) {

   x += dx * easing;

  }

  float dy = targetY-y;

  if (abs(dy) > 1) {

   y += dy * easing;

  }

  image(displayImg, x, y);

}

Now I would like to click on the image and get that image displayed. Could you give me some idea how to do that. I am going to create seperate class to wrapp images as you said.

PhiLho

Re: How to create icon Dock using processing

1 year ago

Once you have arrays, you can use loops:

void mouseClicked() {

for (int i = 0; i < img.length; i++) {
img[i] = false;
}

if(mouseButton == LEFT){

img[7] = true;

}

else if(mouseButton == RIGHT){

img[0] = true;

}

although I am not sure why you do that...
Also, see patterns in numbers. Instead of:

if (img[0] == true) {

displayImage(0);

}

else if (img[1] == true) {

displayImage(-1024);

}

else if (img[2] == true) {

displayImage(-2048);

}

else if (img[3] == true) {

displayImage(-3072);

}

else if (img[4] == true) {

displayImage(-4096);

}

else if (img[5] == true) {

displayImage(-5120);

}

else if (img[6] == true) {

displayImage(-6144);

}

else if (img[7] == true) {

displayImage(-7168);

}
do:

for (int i = 0; i < img.length; i++) {
    if (img[i]) { // No need for == true
      displayImage(-1024 * i);
      break; // Only one is true
    }
}

To check a click on an image, you have to loop on them and check the bounds. There are plenty of examples in the samples and on the forum, and indeed a class can ease the work.

PhiLho

Re: How to create icon Dock using processing

1 year ago

In https://forum.processing.org/topic/arraylist-please-help-me#25080000001311689 I have a simple Brick class, which is just a colored rectangle. You don't need the color but need an image instead.
The little sketch illustrates how to check click on a rectangle, you can get inspiration from this code.

toxmeister

Re: How to create icon Dock using processing

1 year ago

Toxiclibs has a so-called ZoomLensInterpolation strategy, which is perfectly suited for this use case. The demo below uses simple rectangles for the menu items, but these could be easily swapped for PImages...

/**
* Zoomable dock / fisheye menu using toxi.math.ZoomLensInterpolation
* @author Karsten Schmidt
*
* Requires toxiclibs-0020 or newer
* LGPLv2 licensed
*/
import toxi.geom.*;
import toxi.math.*;
int NUM=20;
int W=32;
float MAX_STRENGTH = 0.5;
float SMOOTH_STEP = 0.25;
ZoomLensInterpolation zoomLens=new ZoomLensInterpolation();
List<Rect> items = new ArrayList<Rect>();
void setup() {
size(640, 200);
// create menu items centered horizontally
// instead of Rects you could also use PImages
for (int i=0; i<NUM; i++) {
float x=width/2+(i-NUM*0.5)*W;
float y=height-W;
items.add(new Rect(x, y, W, W));
}
}
void draw() {
background(255);
// update zoom lens state based on mouse position
// the vertical mouse pos is used to enable/disable the lens
boolean isDockActive = mouseY >= height-W;
// set focal point (a normalized number between 0.0 .. 1.0)
zoomLens.setLensPos((float) mouseX / width, SMOOTH_STEP);
// set lens strength based on mouseY (could also be negative for bundling effect)
zoomLens.setLensStrength(isDockActive ? MAX_STRENGTH : 0, SMOOTH_STEP);
// compute mapped mouse position to determine
// which item is currently selected
float mx=zoomLens.interpolate(0,width,(float)mouseX/width);
// draw all menu items and highlight currently selected
for(Rect r : items) {
// for each item we need to compute the left & right edge
float x1=zoomLens.interpolate(0,width,r.x/width);
float x2=zoomLens.interpolate(0,width,(r.x+r.width)/width);
// now we know the current width
float w=x2-x1;
// choose fill color
if (isDockActive && mx>=x1 && mx<x2) {
fill(255,0,0);
} else {
fill(255);
}
// draw item
rect(x1, height-w, w, w);
}
}

Look ma, only 40 lines of code (w/o comments)... ;)

http://postspectacular.com | http://toxiclibs.org

suhit

Re: How to create icon Dock using processing

1 year ago

Thank you both, phi.lho and toxmeister for the help and guidance. The above sample code for ZoomLensInterpolation strategy, is really cool. Now I am trying to create two different versions with my code and the toxmeister code.

I know how to add Images but to I am having problem where to locate them as per the code given. Please help me with this. Here is my changed code

List<PImage> images = new ArrayList<PImage>(); // created Arraylist of Images

void setup() {

size(640, 480);

// create menu items centered horizontally

// instead of Rects you could also use PImages

for (int i=0; i<NUM; i++) {

float x=width/2+(i-NUM*0.5)*W;

float y=height-W;

PImage img = loadImage("img"+i+".jpg"); // load img and the path

images.add(img, x, y, W, W)); // add images to ArrayList...this part showing error. Help me.

}

suhit

Re: How to create icon Dock using processing

1 year ago

I have modified the code for the Image in place of rectangles but now I having problem with the x position of Image while computing the left and right edge of each image ( see code below..marked in yello) using for loop. It is showing error when I am using r.x... how to resolve the error ls guide me.

import toxi.geom.*;
import toxi.math.*;
int NUM=8;
int W=100;
float MAX_STRENGTH = 0.5;
float SMOOTH_STEP = 0.25;
ZoomLensInterpolation zoomLens=new ZoomLensInterpolation();
List<PImage> images = new ArrayList<PImage>();
void setup() {
size(640, 480);
// create menu items centered horizontally
// instead of Rects you could also use PImages
for (int i=0; i<NUM; i++) {
float x=width/2+(i-NUM*0.5)*W;
float y=height-W;
PImage img = loadImage("img"+i+".jpg");
images.add(img);
images.get(i);
image(img, x, y, W, W);
}
}
void draw() {
background(0);
// update zoom lens state based on mouse position
// the vertical mouse pos is used to enable/disable the lens
boolean isDockActive = mouseY >= height-W;
// set focal point (a normalized number between 0.0 .. 1.0)
zoomLens.setLensPos((float) mouseX / width, SMOOTH_STEP);
// set lens strength based on mouseY (could also be negative for bundling effect)
zoomLens.setLensStrength(isDockActive ? MAX_STRENGTH : 0, SMOOTH_STEP);
// compute mapped mouse position to determine
// which item is currently selected
float mx=zoomLens.interpolate(0,width,(float)mouseX/width);
// draw all menu items and highlight currently selected
for(PImage r : images) {
// for each item we need to compute the left & right edge
float x1=zoomLens.interpolate(0,width,r.x/width);
float x2=zoomLens.interpolate(0,width,(r.x+r.width)/width);
// now we know the current width
float w=x2-x1;
// choose fill color
if (isDockActive && mx>=x1 && mx<x2) {
fill(0,0,0,150);
} else {
noFill();
}
// draw item
// rect(x1, height-w, w, w);
image(x1, height-w, w, w);
}
}

toxmeister

Re: How to create icon Dock using processing

1 year ago

Sorry, if I wasn't quite clear with that proposed PImage usage. The images of course don't store any position themselves, so you'll need to create a little data type yourself which combines the image + position. I've updated the demo with that below and also updated a the rollover state to something more interesting... I'm also assuming your test icon is 48x48 pixels (changeable).

/**
* Zoomable icon dock / fisheye menu using toxi.math.ZoomLensInterpolation
* @author Karsten Schmidt
*
* Requires toxiclibs-0020 or newer
* LGPLv2 licensed
*/
import toxi.geom.*;
import toxi.math.*;
import toxi.math.waves.*;
// number of items
int NUM_ICONS=16;
// uniform/untransformed icon size
int ICON_SIZE=48;
float MAX_STRENGTH = 0.5;
float SMOOTH_STEP = 0.25;
// realises a non-linear interpolation (here: spatial deformation)
// based on a configurable focal point and lens characteristic
ZoomLensInterpolation zoomLens=new ZoomLensInterpolation();
// simple sine wave to create animated rollover state (ala OSX)
// params are: phase, frequency, amp, offset
AbstractWave highlighter = new SineWave(0, 0.125, 0.2, -1.2);
List<ImageRect> items = new ArrayList<ImageRect>();
void setup() {
size(960, 200);
// create menu items centered horizontally
// using ImageRect class below as item container
// for a real menu you'd obviously load a different image per item
// but leaving this exercise to the reader...
PImage img=loadImage("icon-48.png");
for (int i=0; i<NUM_ICONS; i++) {
float x=width / 2 + (i - NUM_ICONS * 0.5) * ICON_SIZE;
float y=height - ICON_SIZE;
items.add(new ImageRect(img, x, y));
}
}
void draw() {
background(255);
// update zoom lens state based on mouse position
// the vertical mouse pos is used to enable/disable the lens
boolean isDockActive = mouseY >= height - ICON_SIZE;
zoomLens.setLensPos((float) mouseX / width, SMOOTH_STEP);
zoomLens.setLensStrength(isDockActive ? MAX_STRENGTH : 0, SMOOTH_STEP);
// compute mapped mouse position to determine
// which item is currently selected
float mx=zoomLens.interpolate(0, width, (float) mouseX / width);
// draw all menu items and highlight currently selected
for (ImageRect r : items) {
// for each item we need to compute the left & right edge
float x1=zoomLens.interpolate(0, width, r.x/width);
float x2=zoomLens.interpolate(0, width, (r.x+ICON_SIZE)/width);
// now we know the current width
float w=x2-x1;
// draw item based on rollover state
if (isDockActive && mx>=x1 && mx<x2) {
image(r.img, x1, height+highlighter.update()*w,w,w);
}
else {
image(r.img, x1, height-w, w, w);
}
}
}
// mini extension of Rect class with associated image
class ImageRect extends Rect {
PImage img;
public ImageRect(PImage img, float x, float y) {
super(x,y,img.width,img.height);
this.img=img;
}
}

Hth!

toxmeister

Re: How to create icon Dock using processing

1 year ago

Not sure why my last reply has been marked as spam? Is it really that bad advice??

http://postspectacular.com | http://toxiclibs.org

PhiLho

Re: Re: How to create icon Dock using processing

1 year ago

Because the Zoho spam detector is, sometime, brain dead... He detected "real men" in your message, where you wrote "real menu"...

Of course, I marked it as "no spam".

Chrisir

Re: How to create icon Dock using processing

1 year ago

why...?

this is hilarious...

a programming environment for real men...

suhit

Re: How to create icon Dock using processing

1 year ago

Thank you guys. It is exactly what I was luking for. Now I want add click effect so that when i select one image it should pop up on display.

suhit

Re: How to create icon Dock using processing

1 year ago

I have added one method in RectImage class which displays the image on mouseClick but there is a problem. As I am moving my mouse over the image the Image is getting displayed in the window. I want to display the image when I click on the image, that image should pop up in window.( I have one 1 big image with resolution 8192 * 768 which consists of 8 icons in combination..like dock) so as I move mouse over image the image shift towards x direction and the appropriate image get displayed but I want it on mouseClick not mouseOver. help me

Here is my code. correct me whenever I am wrong

import toxi.geom.*;
import toxi.math.*;
import toxi.math.waves.*;
// number of items
int NUM_ICONS=8;
// uniform/untransformed icon size
int ICON_SIZE=128;
float MAX_STRENGTH = 0.5;
float SMOOTH_STEP = 0.25;
// realises a non-linear interpolation (here: spatial deformation)
// based on a configurable focal point and lens characteristic
ZoomLensInterpolation zoomLens=new ZoomLensInterpolation();
// simple sine wave to create animated rollover state (ala OSX)
// params are: phase, frequency, amp, offset
AbstractWave highlighter = new SineWave(0, 0.125, 0.2, -1.2);
List<ImageRect> items = new ArrayList<ImageRect>();
boolean isDockActive;
float mx;
boolean [] b = new boolean[8];
PImage displayImg;
void setup() {
size(1024, 768);
displayImg = loadImage("elevation_content.jpg");
// create menu items centered horizontally
// using ImageRect class below as item container
// for a real menu you'd obviously load a different image per item
// but leaving this exercise to the reader...
for (int i=0; i<NUM_ICONS; i++) {
PImage img=loadImage("img"+i+".jpg");
float x= width/2 + (i - NUM_ICONS * 0.5) * ICON_SIZE;
float y= height - ICON_SIZE;
items.add(new ImageRect(img, x, y));
}
}
void draw() {
background(0);
// update zoom lens state based on mouse position
// the vertical mouse pos is used to enable/disable the lens
isDockActive = mouseY >= height - ICON_SIZE;
zoomLens.setLensPos((float) mouseX / width, SMOOTH_STEP);
zoomLens.setLensStrength(isDockActive ? MAX_STRENGTH : 0, SMOOTH_STEP);
// compute mapped mouse position to determine
// which item is currently selected
mx=zoomLens.interpolate(0, width, (float) mouseX / width);
// draw all menu items and highlight currently selected
// for (ImageRect r : items) {
for (int i = 0; i< items.size(); i++) {
ImageRect r = (ImageRect) items.get(i);
float x1=zoomLens.interpolate(0, width, r.x/width);
float x2=zoomLens.interpolate(0, width, (r.x+ICON_SIZE)/width);
// now we know the current width
float w=x2-x1;
// draw item based on rollover state
if (isDockActive && mx>=x1 && mx<x2) {
r.displayImage(-1024 * i);
image(r.img, x1, height+highlighter.update()*w, w, w);
}
else {
//image(r.img, x1, height-w, w, w);
r.draw(r.img, x1, height-w, w, w);
}
}
}
void mouseReleased() {
for (int i = 0; i< items.size(); i++) {
ImageRect irect = (ImageRect)items.get(i);
if (irect.isOver()) {
b[i] = true;
}
}
}
// Here is my ImageRect class which is mini extension of Rect class with associated image
int marginX = 0;
int marginY = 640;
float easing = 0.09;
float targetX, targetY;
float px = -1024;
float py = 0;
// mini extension of Rect class with associated image
class ImageRect extends Rect {
float sizeX = 128;
float sizeY = 128;
float PosX, PosY;
PImage img;
public ImageRect(PImage img, float x, float y) {
super(x, y, img.width, img.height);
PosX = x;
PosY = y;
this.img=img;
}
public void draw(PImage img, float x1, float h, float w, float w1) {
image(img, x1, h, w, w1);
}
public int getX() {
float resX;
resX = marginX + (sizeX) * (PosX-1);
return (int)resX;
}
public int getY() {
float resY;
resY = marginY + (sizeY) * (PosY-1);
return (int) resY;
}
public boolean isOver() {
float x = getX();
float y = getY();
return mouseX>=x && mouseX < x+sizeX && mouseY >= y && mouseY < y+sizeY;
}
public void displayImage(int var) {
targetX = var;
targetY = 0;
float dx = targetX-px;
if (abs(dx) > 1) {
px += dx * easing;
}
float dy = targetY-py;
if (abs(dy) > 1) {
py += dy * easing;
}
image(displayImg, px, py);
}
}

suhit

Re: How to create icon Dock using processing

1 year ago

why this is reported as spam????

PhiLho

Re: Re: How to create icon Dock using processing

1 year ago

See above messages, remove "real menu" from the comments...