.pde

//This is a touchscreen Fort Maps overlay interactive for the Pensacola Museum of History.
//The maps show successive fort constructions through Spanish and British colonization.

//Define Map Layers
PImage MapBase;
PImage Fort1764;
PImage Dumford1768;
PImage Dumford1778;
PImage Pintado1813;
PImage MapDot;
PImage MapKey;
//Define font for brand cohesion
PFont GothamMed;
//Button size
float bsize = 100;
//Variable for Map Show-Hide buttons
boolean map1764 = true;
boolean map1768 = true;
boolean map1778 = true;
boolean map1813 = true;
//Define array for Map Buttons
ArrayList<ToggleButton> buttons = new ArrayList<ToggleButton>();

void setup(){
//Load transparent PNG Map Layers  
  MapBase = loadImage("MapBase.png");
  Fort1764 = loadImage("Fort1764.png");
  Dumford1768 = loadImage("Dumford1768.png");
  Dumford1778 = loadImage("Dumford1778.png");
  Pintado1813 = loadImage("Pintado1813.png");
  MapDot = loadImage("MapDot.png");
  MapKey = loadImage("MapKey.png");
//List Button Array Entries
  buttons.add(new ToggleButton(1770, 50, bsize, bsize, "1764", true));
  buttons.add(new ToggleButton(1770, 331, bsize, bsize, "1768", true));
  buttons.add(new ToggleButton(1770, 607, bsize, bsize, "1778", true));
  buttons.add(new ToggleButton(1770, 885, bsize, bsize, "1813", true));
//Load Image of brand font  
  GothamMed = loadFont("Gotham-Medium-20.vlw");
//Define screen size  
  size(1920,1080);
//An attempt to speed up responsiveness by slowing down cycles  
  frameRate(10);}

void draw(){
//Map Base and Key loaded each cycle  
image (MapBase, 0, 0);
image (MapKey, 0, 0);

//Display Maps if corresponding button is TRUE
   for (ToggleButton b : buttons) {
   b.display();}
   if (buttons.get(0).state) {
   image (Fort1764, 0, 0);}
   if (buttons.get(1).state) {
   image (Dumford1768, 0, 0);}
   if (buttons.get(2).state) {
   image (Dumford1778, 0, 0);}
   if (buttons.get(3).state) {
   image (Pintado1813, 0, 0);}

//Display "You Are Here" Map Dot on top
image (MapDot, 0, 0);}

//Touchscreen reads button "press" as a mouse click
void mousePressed() {

//When Mouse Pressed,   
  for (ToggleButton b : buttons) {
    b.click(mouseX, mouseY);}}
//Defines Class, 
class ToggleButton {
//Define local variables
  float x, y, w, h;
  String label;
  boolean state; // true = ON, false = OFF
//Use Array to populate local variables for buttons
  ToggleButton(float x, float y, float w, float h, String label, boolean startState) {
    this.x = x;
    this.y = y;
    this.w = w;
    this.h = h;
    this.label = label;
    this.state = startState;}
//Display each button with following style
  void display() {
    stroke(100);
    strokeWeight(4);
//Argument inside of parameters for query state of button, then (TRUE:FALSE) formatting inlcuded
    fill(state ? color(255, 255, 255, 0) : color(150)); 
    rect(x, y, w, h, 6);
    fill(255);
    textAlign(CENTER, CENTER);
    textFont(GothamMed, 24);
    text(state ? "HIDE" : "SHOW", x + w/2, y + h/2);}

//Function calls MouseX and MouseY from above when mousePressed, on Line 67/68
//Runs for each toggle button, and if click is on "this" button from list, toggles state
  void click(float mx, float my) {
    if (mx > x && mx < x+w && my > y && my < y+h)
    {state = !state;}
  }
}