Button Panel 2

// An array of buttons 

var buttons = new Array(6);  // Six buttons, but you can have more (or fewer)

var buttname = ['PRINT','SAVE','LOAD','FIND','MOVE','DELETE'];  // The names of your buttons

var buttname2 = ['PRINT2','SAVE2','LOAD2','FIND2','MOVE2','DELETE2'];  // The names of your buttons

var action = [printer, saver, loader, finder, mover, deleter];  // The names of the functions they trigger

var lshift = 0;

var tshift = 0;

var a = 'a';

var b = 'b';

var c = 'c';

var d = 'd';

​

// A design choice - uncomment the effect you want and comment out the one you don't want

​

// the next two lines set the text color to white and vary only the background colors

var colors = ["#ffffff", "#ffffff", "#ffffff", "#ffffff", "#ffffff", "#ffffff"]; // The foreground text colors

var bgcolors2 = ["#ff8888", "#FFbb77", "#88dd88", "#88dddd", "#aaaaff", "#ff88ff"]; // The background text colors

var bgcolors = ["#ff0000", "#FF9900", "#00dd00", "#00cccc", "#8080ff", "#ff00ff"]; // The background text colors  

var bgcolors3 = ["#cc0000", "#cc7700", "#00bb00", "#00aaaa", "#6060cc", "#cc00cc"]; // The background text colors 

​

// the next two lines set the background color to light grey and vary only the text colors

//var colors = ["#ff0000", "#ff9900", "#00dd00", "#00cccc", "#8080ff", "#ff00ff"]; // The foreground text colors

//var bgcolors = ["#eeeeee", "#eeeeee", "#eeeeee", "#eeeeee", "#eeeeee", "#eeeeee"]; // The background text colors

​

var hidden = 0;

var lpos = 540; // horizontal position of panel left top corner

var tpos = 335; // vertical position of panel left top corner

​

function preload(){

  img = loadImage('IMG_3660.JPG'); // Used as a background

  img2 = loadImage('IMG_4960.JPG'); // Used only to create a thumbnail  

}

function setup() {

  createCanvas(1112, 834);

  noStroke();

  // this is a special deactivated button that provides a backdrop for the other buttons

  // it has been made partially transparent by the 'aa' characters in its color definition

  backbutt = createButton("")

  backbutt.position(lpos, tpos);

  backbutt.size(120, 290);

  backbutt.style("background-color", '#eeeeeeaa'); // optional

  backbutt.style('border-radius', '12px');  

  backbutt.attribute('disabled','true');

  // These buttons hide and show the panel

  hidebutt = createButton("HIDE")

  hidebutt.position(lpos + 20, tpos + 10);

  hidebutt.style("font-size", 14+"px");

  hidebutt.size(80, 30);

  hidebutt.mousePressed(hider);

  hidebutt2 = createButton("SHOW")

  hidebutt2.position(lpos + 20, tpos + 10);

  hidebutt2.style("font-size", 14+"px");

  hidebutt2.size(80, 30);

  hidebutt2.mousePressed(hider);

  hidebutt2.hide();

  // Loops to create and evenly space out the buttons

  for (var i = 0; i < buttons.length; i++) {

    buttons[i] = createButton(buttname[i])

    buttons[i+a] = createButton("")

    buttons[i+b] = createButton("")

    buttons[i+c] = createButton("")

    buttons[i+d] = createButton("")

  }

  for (var i = 0; i < buttons.length; i++) {

    // top edge

    buttons[i+a].position(lpos + 10, tpos + 46 +40*i);

    buttons[i+a].style("color", bgcolors2[i]);

    buttons[i+a].size(100, 4);

    buttons[i+a].style("background-color", bgcolors2[i]); // optional

    buttons[i+a].style("border-color", bgcolors2[i]);

    buttons[i+a].style('border-size', '0px'); 

    buttons[i+a].mousePressed(action[i]);

    // bottom edge

    buttons[i+b].position(lpos + 10, tpos + 77 +40*i);

    buttons[i+b].style("color", bgcolors3[i]);

    buttons[i+b].size(100, 4);

    buttons[i+b].style("background-color", bgcolors3[i]); // optional

    buttons[i+b].style("border-color", bgcolors3[i]);

    buttons[i+b].style('border-size', '0px'); 

    buttons[i+b].mousePressed(action[i]);

    // right edge

    buttons[i+d].position(lpos + 106, tpos + 48 +40*i);

    buttons[i+d].style("color", bgcolors3[i]);

    buttons[i+d].size(4, 33);

    buttons[i+d].style("background-color", bgcolors3[i]); // optional

    buttons[i+d].style("padding", "0px 0");

    buttons[i+d].style("border-color", bgcolors3[i]);

    buttons[i+d].style('border-size', '0px'); 

    buttons[i+d].mousePressed(action[i]);

    // left edge

    buttons[i+c].position(lpos + 10, tpos + 46 +40*i);

    buttons[i+c].style("color", bgcolors2[i]);

    buttons[i+c].size(4, 33);

    buttons[i+c].style("background-color", bgcolors2[i]); // optional

    buttons[i+c].style("padding", "0px 0");

    buttons[i+c].style("border-color", bgcolors2[i]);

    buttons[i+c].style('border-size', '0px'); 

    buttons[i+c].mousePressed(action[i]);

    // main button

    buttons[i].position(lpos + 10, tpos + 46 +40*i);

    buttons[i].style("color", colors[i]);

    buttons[i].size(100, 35);

    buttons[i].style("border", "0px");

    buttons[i].style("background-color", bgcolors[i]); // optional

    buttons[i].style("font-size", 20+"px");

    buttons[i].mousePressed(action[i]);

  }

  textSize(20);

  image(img, 0, 0, width,height); // used as a background

}

​

function draw() {

  fill(255);

  image(img2, 65, 0, width-120, height-100); // used for a thumbnail

}

​

function saver(){

  text('saver', lpos + 140, tpos + 108);

  save("img_" + month() + '-' + day() + '_' + hour() + '-' + minute() + '-' + second() + ".jpg");

}

​

function printer(y){

  text('printer', lpos + 140, tpos + 68);

}

​

function loader(){

  text('loader', lpos + 140, tpos + 148);

}

​

function finder(){

  text('finder', lpos + 140, tpos + 188);

}

​

function mover(){

  text('mover', lpos + 140, tpos + 228);

}

​

function deleter(){ 

  text('deleter', lpos + 140, tpos + 268);

}

​

function hider(){

  hidden = 1 - hidden;

  if (hidden == 1){

    for (var i = 0; i < buttons.length; i++) {

      buttons[i].hide()

      buttons[i+a].hide()

      buttons[i+b].hide()

      buttons[i+c].hide()

      buttons[i+d].hide()

    }

    backbutt.hide()

    hidebutt.hide();

    hidebutt2.show();

  }else{

    for (var i = 0; i < buttons.length; i++) {

      buttons[i].show()

      buttons[i+a].show()

      buttons[i+b].show()   

      buttons[i+c].show()

      buttons[i+d].show()

    }

    backbutt.show()

    hidebutt.show();

    hidebutt2.hide();

  }

}

​

​