Help with createSelect() using array

zara2355 · September 17, 2022, 3:19pm

Hi all, I was hoping to get some advice on how to use createSelect() a little better. im trying to incorporate a dropdown to use with an autosuggest in my sketch. I sort of have it working, but instead of listing each item on its own line in the dropdown, it lists one item on the first, then two items in the second line (the first item + the second item), three items in the third (first item + second item + third item) and so forth Ex:

HAMMER
HAMMER HANDSAW
HAMMER HANDSAW HUMMER

instead of:
HAMMER
HANDSAW
HUMMER.

The auto suggestion that i currently have works, but only as a list that a person cant click on. I used “split” to list the items and that works great for the non-dropdown autosuggest. I thought this would/should work for the dropdown as well, but no, it doesnt.

Does anyone have any idea how to make this dropdown do what the original autosuggest does and list the items one by one instead of adding each subsequent item to the previous?

Heres my code:

let dia = 0;
let growAmount = 0.5;
let grow = true;

let input1, button, greeting, img, data, sel;

let resultContinuousSearch = "";

let url =
  "https://docs.google.com/spreadsheets/d/e/2PACX-1vRmua9Ue9Uv2olN_0kOvTbAPPBkJ3ckciRbDUs_jUr9eMv43sgdFrzmcluQGd4MQrsiYemarPqLsjVj/pub?gid=0&single=true&output=csv";

///////////////////////////////////////////////////////////////////////////

function preload() {
  data = loadTable(url, "csv", "header");
}

///////////////////////////////////////////////////////////////////////////

function setup() {
  createCanvas(1794, 1000);

  img = loadImage("LMP Map2.png");
  name = null;

  input1 = createInput();
  input1.position(20, 600);

  button = createButton("submit");
  button.position(input1.x + input1.width, 600);
  button.mousePressed(greet);

  greeting = createElement("h2", "Search (Press Esc to clear)");
  greeting.position(20, 550);

  rcs = createElement("rcs");
  rcs.position(20, 620);

  sel = createSelect();
}

///////////////////////////////////////////////////////////////////////////

function draw() {
  background(255);
  image(img, 0, 0);

  if (keyIsPressed) {
    if (keyCode == ENTER || keyCode == RETURN) {
      greet();
    } else if (keyCode == 51) {
      input1.value("screwdrivers"); // test
    } else if (keyCode == 27) {
      input1.value(null);
      name = null;
      dia = 0;
      sel.remove();
      sel = createSelect();
    }
  }

  getData();

  checkInput();
}

///////////////////////////////////////////////////////////////////////////

function checkInput() {
  // NOT an event

  resultContinuousSearch = "";

  if (input1.value().length >= 1) {
    c1 = data.getColumn("TOOL");

    for (let i = 0; i < c1.length; i++) {
      if (contains(c1[i], input1.value())) {
        // console.log(c1[i]);
        let A = split(resultContinuousSearch, ",");
        resultContinuousSearch += c1[i] + "\n";

        let names = resultContinuousSearch;
        var splitString = split(names, ",");
        fill(0, 0, 0);
        textSize(20);
        text(splitString[0], 25, 650);

        sel.option(splitString[0]);

        sel.position(20, 620);
        // print(splitString[0]);
      }
    }
  }
}

///////////////////////////////////////////////////////////////////////////

function contains(s1, s2) {
  for (let i = 0; i < min(s1.length, s2.length); i++) {
    if (s1[i].toUpperCase() != s2[i].toUpperCase()) return false;
  }
  return true;
}

///////////////////////////////////////////////////////////////////////////

function greet() {
  //Changes input1.value to uppercase in console, NEED TO MAKE NOT CASE SENSITIVE
  name = input1.value().toUpperCase();
  string =
    name.charAt(0).toUpperCase() + name.substr(1, name.length).toUpperCase();
  print(string);

  if (name == "") {
    // input1.value(null);
    dia = 0;
  }
}

///////////////////////////////////////////////////////////////////////////

// function anim1() {
//   //Creates the animation for location of item
//   fill(0, 255, 0);
//   ellipse(c, xLoc, dia, dia);

//   if (dia > 50) {
//     grow = false;
//   }
//   if (dia < 0) {
//     grow = true;
//   }

//   if (grow == true) {
//     dia += growAmount;
//   } else {
//     dia -= growAmount;
//   }
// }

///////////////////////////////////////////////////////////////////////////

function getData() {
  for (let i = 0; i < data.getRowCount(); i++) {
    let row = data.getRow(i);
    let c = row.getString("TOOL");
    let l = row.getNum("LOCATION");
    // let xLoc = row.getNum("X Coordinate");
    // let yLoc = row.getNum("Y Coordinate");

    if (l == 1) {
      var xLoc = 500;
      var yLoc = 200;
    }

    if (l == 2) {
      var xLoc = 350;
      var yLoc = 200;
    }

    if (l == 3) {
      var xLoc = 200;
      var yLoc = 500;
    }

    // print(xLoc);
    // noLoop();

    if (name == c) {
      fill(0, 255, 0);
      ellipse(xLoc, yLoc, dia, dia);

      if (dia > 50) {
        grow = false;
      }
      if (dia < 0) {
        grow = true;
      }
      if (grow == true) {
        dia += growAmount;
      } else {
        dia -= growAmount;
      }
    }
  }
}

///////////////////////////////////////////////////////////////////////////

// function mySelectEvent() {
//   let item = sel.value();
//   // background(200);
//   name(item);
// }

Many thanks in advance!

Chrisir · September 17, 2022, 5:03pm

let dia = 0;
let growAmount = 0.5;
let grow = true;

let input1, button, greeting, img, data, sel;

let resultContinuousSearch = "";

let url =
  "https://docs.google.com/spreadsheets/d/e/2PACX-1vRmua9Ue9Uv2olN_0kOvTbAPPBkJ3ckciRbDUs_jUr9eMv43sgdFrzmcluQGd4MQrsiYemarPqLsjVj/pub?gid=0&single=true&output=csv";

///////////////////////////////////////////////////////////////////////////

function preload() {
  data = loadTable(url, "csv", "header");
}

///////////////////////////////////////////////////////////////////////////

function setup() {
  createCanvas(1794, 1000);

  img = loadImage("LMP Map2.png");
  name = null;

  input1 = createInput();
  input1.position(20, 600);

  button = createButton("submit");
  button.position(input1.x + input1.width, 600);
  button.mousePressed(greet);

  greeting = createElement("h2", "Search (Press Esc to clear)");
  greeting.position(20, 550);

  sel = createSelect();
  sel.size(310, 22);
}

///////////////////////////////////////////////////////////////////////////

function draw() {
  background(255);
  image(img, 0, 0);

  if (keyIsPressed) {
    if (keyCode == ENTER || keyCode == RETURN) {
      greet();
    } else if (keyCode == 51) {
      input1.value("screwdrivers"); // test
    } else if (keyCode == 27) {
      input1.value(null);
      name = null;
      dia = 0;
      sel.remove();
      sel = createSelect();
    }
  }

  getData();

  checkInput();
}

///////////////////////////////////////////////////////////////////////////

function checkInput() {
  // NOT an event
  resultContinuousSearch = "";
  sel = createSelect();

  if (input1.value().length >= 1) {
    c1 = data.getColumn("TOOL");

    for (let i = 0; i < c1.length; i++) {
      if (contains(c1[i], input1.value())) {
        sel.option(c1[i]);
        sel.position(20, 620);
        sel.size(310, 22);
      }
    }
  }
}

///////////////////////////////////////////////////////////////////////////

function contains(s1, s2) {
  for (let i = 0; i < min(s1.length, s2.length); i++) {
    if (s1[i].toUpperCase() != s2[i].toUpperCase()) return false;
  }
  return true;
}

///////////////////////////////////////////////////////////////////////////

function greet() {
  //Changes input1.value to uppercase in console, NEED TO MAKE NOT CASE SENSITIVE
  name = input1.value().toUpperCase();
  string =
    name.charAt(0).toUpperCase() + name.substr(1, name.length).toUpperCase();
  print(string);

  if (name == "") {
    // input1.value(null);
    dia = 0;
  }
}

///////////////////////////////////////////////////////////////////////////

// function anim1() {
//   //Creates the animation for location of item
//   fill(0, 255, 0);
//   ellipse(c, xLoc, dia, dia);

//   if (dia > 50) {
//     grow = false;
//   }
//   if (dia < 0) {
//     grow = true;
//   }

//   if (grow == true) {
//     dia += growAmount;
//   } else {
//     dia -= growAmount;
//   }
// }

///////////////////////////////////////////////////////////////////////////

function getData() {
  for (let i = 0; i < data.getRowCount(); i++) {
    let row = data.getRow(i);
    let c = row.getString("TOOL");
    let l = row.getNum("LOCATION");
    // let xLoc = row.getNum("X Coordinate");
    // let yLoc = row.getNum("Y Coordinate");

    if (l == 1) {
      var xLoc = 500;
      var yLoc = 200;
    }

    if (l == 2) {
      var xLoc = 350;
      var yLoc = 200;
    }

    if (l == 3) {
      var xLoc = 200;
      var yLoc = 500;
    }

    // print(xLoc);
    // noLoop();

    if (name == c) {
      fill(0, 255, 0);
      ellipse(xLoc, yLoc, dia, dia);

      if (dia > 50) {
        grow = false;
      }
      if (dia < 0) {
        grow = true;
      }
      if (grow == true) {
        dia += growAmount;
      } else {
        dia -= growAmount;
      }
    }
  }
}

///////////////////////////////////////////////////////////////////////////

// function mySelectEvent() {
//   let item = sel.value();
//   // background(200);
//   name(item);
// }
//

zara2355 · September 18, 2022, 3:06pm

Chrisir, thanks again, really appreciate the help/new code. Ive experimented a bit with it and adjusted it so that when i pres the Esc button, the dropdown disappears which is really important, otherwise the dropdown (and all associated results listed) remains.

Ive taken that new code and have been attempting to then use the dropdown to make a selection for the search bar. I think im close, but what seems to be happening is that when i click on a selection in the dropdown in the hopes that that particular selection would appear in the search bar, i keep getting “undefined” instead of any selections. Im not exactly sure why this is happening? I thought that the function “mySelectEvent()” defined things? Further, it sort of makes sense, to me at least, that in that function, i assign the selected “item” to be used for input1.value().

A couple of theories…1) where i have initialized the createSelect() matters greatly and i am not putting it in the correct place for this to work properly for me. (As you can see, its initialized in Setup. 2) i might be wrong in using the “input1.value()” and instead should use something else (though, i do not know what), 3) I am going about this entirely the wrong way and may wanna hang up the gloves, so to speak, and be content with just deleting the dropdown entirely. (I like this challenge, and from a UX perspective, i think its better than just listing the autosuggest items)

I feel like im on the cusp of understanding, but unfortunately i just dont understand enough about what Im doing. That said, I think, rather, I KNOW this is possible…just look at any google search and their dropdown autosuggestions.

Anyhow, heres the updated sketch:

let dia = 0;
let growAmount = 0.5;
let grow = true;

let input1, button, greeting, img, data, sel;

let resultContinuousSearch = "";

let url =
  "https://docs.google.com/spreadsheets/d/e/2PACX-1vRmua9Ue9Uv2olN_0kOvTbAPPBkJ3ckciRbDUs_jUr9eMv43sgdFrzmcluQGd4MQrsiYemarPqLsjVj/pub?gid=0&single=true&output=csv";

///////////////////////////////////////////////////////////////////////////

function preload() {
  data = loadTable(url, "csv", "header");
}

///////////////////////////////////////////////////////////////////////////

function setup() {
  createCanvas(1794, 1000);

  img = loadImage("LMP Map2.png");
  name = null;

  input1 = createInput();
  input1.position(20, 600);

  button = createButton("submit");
  button.position(input1.x + input1.width, 600);
  button.mousePressed(greet);

  greeting = createElement("h2", "Search (Press Esc to clear)");
  greeting.position(20, 550);

  rcs = createElement("rcs");
  rcs.position(20, 620);

  sel = createSelect();
  sel.size(310, 22);
}

///////////////////////////////////////////////////////////////////////////

function draw() {
  background(255);
  image(img, 0, 0);

  let item = sel.value();

  if (keyIsPressed) {
    if (keyCode == ENTER || keyCode == RETURN) {
      greet();
    } else if (keyCode == 51) {
      input1.value("screwdrivers"); // test
    } else if (keyCode == 27) {
      input1.value(null);
      name = null;
      dia = 0;
      sel.remove();
      sel = createSelect();
      sel.size(310, 22);
    }
  }

  getData();

  checkInput();
}

///////////////////////////////////////////////////////////////////////////

function checkInput() {
  // NOT an event

  resultContinuousSearch = "";

  if (input1.value().length >= 1) {
    c1 = data.getColumn("TOOL");

    for (let i = 0; i < c1.length; i++) {
      if (contains(c1[i], input1.value())) {
        // console.log(c1[i]);
        let A = split(resultContinuousSearch, ",");
        resultContinuousSearch += c1[i] + "\n";

        let names = resultContinuousSearch;
        var splitString = split(names, ",");
        fill(0, 0, 0);
        textSize(20);
        text(splitString[0], 350, 650);

        sel.option(c1[i]);
        sel.position(20, 620);
        sel.changed(mySelectEvent);



        print(sel.value());
      }
    }
  }
}

///////////////////////////////////////////////////////////////////////////

function mySelectEvent() {
  var item = sel.value();
  // background(200);
  input1.value(item);
}

///////////////////////////////////////////////////////////////////////////

function contains(s1, s2) {
  for (let i = 0; i < min(s1.length, s2.length); i++) {
    if (s1[i].toUpperCase() != s2[i].toUpperCase()) return false;
  }
  return true;
}

///////////////////////////////////////////////////////////////////////////

function greet() {
  //Changes input1.value to uppercase in console, NEED TO MAKE NOT CASE SENSITIVE
  name = input1.value().toUpperCase();
  string =
    name.charAt(0).toUpperCase() + name.substr(1, name.length).toUpperCase();
  print(string);

  if (name == "") {
    // input1.value(null);
    dia = 0;
  }
}

///////////////////////////////////////////////////////////////////////////

// function anim1() {
//   //Creates the animation for location of item
//   fill(0, 255, 0);
//   ellipse(c, xLoc, dia, dia);

//   if (dia > 50) {
//     grow = false;
//   }
//   if (dia < 0) {
//     grow = true;
//   }

//   if (grow == true) {
//     dia += growAmount;
//   } else {
//     dia -= growAmount;
//   }
// }

///////////////////////////////////////////////////////////////////////////

function getData() {
  for (let i = 0; i < data.getRowCount(); i++) {
    let row = data.getRow(i);
    let c = row.getString("TOOL");
    let l = row.getNum("LOCATION");
    // let xLoc = row.getNum("X Coordinate");
    // let yLoc = row.getNum("Y Coordinate");

    if (l == 1) {
      var xLoc = 500;
      var yLoc = 200;
    }

    if (l == 2) {
      var xLoc = 350;
      var yLoc = 200;
    }

    if (l == 3) {
      var xLoc = 200;
      var yLoc = 500;
    }

    // print(xLoc);
    // noLoop();

    if (name == c) {
      fill(0, 255, 0);
      ellipse(xLoc, yLoc, dia, dia);

      if (dia > 50) {
        grow = false;
      }
      if (dia < 0) {
        grow = true;
      }
      if (grow == true) {
        dia += growAmount;
      } else {
        dia -= growAmount;
      }
    }
  }
}

///////////////////////////////////////////////////////////////////////////

Chrisir · September 18, 2022, 9:39pm

is it possible that the table is empty? I don’t get any data in the TOOL column?

zara2355 · September 18, 2022, 10:17pm

Good question, but no, the table isnt empty. In the TOOL column, there should be 12 items, with a handful starting with the letter H

Chrisir · September 19, 2022, 7:03am

Can you please check

I couldn’t load it

zara2355 · September 20, 2022, 12:31am

Ok, so thats interesting and a little weird. Im including a truncated version of the sketch with a print() so that the console should list the data from the table/column for “TOOLS”

Ive commented out the “Get Data” function, as it doesnt have any bearing on the issue at hand 9at least, i dont believe it does).

let dia = 0;
let growAmount = 0.5;
let grow = true;

let input1, button, greeting, img, data, sel;

let resultContinuousSearch = "";


let myBoolean = false;

let url =
  "https://docs.google.com/spreadsheets/d/e/2PACX-1vRmua9Ue9Uv2olN_0kOvTbAPPBkJ3ckciRbDUs_jUr9eMv43sgdFrzmcluQGd4MQrsiYemarPqLsjVj/pub?gid=0&single=true&output=csv";

///////////////////////////////////////////////////////////////////////////

function preload() {
  data = loadTable(url, "csv", "header");
}

///////////////////////////////////////////////////////////////////////////

function setup() {
  createCanvas(1794, 1000);

  img = loadImage("LMP Map2.png");
  name = null;

  input1 = createInput();
  input1.position(20, 600);

  button = createButton("submit");
  button.position(input1.x + input1.width, 600);
  button.mousePressed(greet);

  greeting = createElement("h2", "Search (Press Esc to clear)");
  greeting.position(20, 550);

  rcs = createElement("rcs");
  rcs.position(20, 620);

  sel = createSelect();
  sel.size(310, 22);
    sel.changed(mySelectEvent);
}

///////////////////////////////////////////////////////////////////////////

function draw() {
  background(255);
  image(img, 0, 0);

  let item = sel.value();

  if (keyIsPressed) {
    if (keyCode == ENTER || keyCode == RETURN) {
      greet();
    } else if (keyCode == 51) {
      input1.value("screwdrivers"); // test
    } else if (keyCode == 27) {
      input1.value(null);
      name = null;
      dia = 0;
      sel.remove();
      sel = createSelect();
      sel.size(310, 22);
    }
  }

  // getData();

  checkInput();
  
}

///////////////////////////////////////////////////////////////////////////

function checkInput() {
  // NOT an event

  resultContinuousSearch = "";

  if (input1.value().length >= 1) {
    c1 = data.getColumn("TOOL");

    for (let i = 0; i < c1.length; i++) {
      if (contains(c1[i], input1.value())) {
        // console.log(c1[i]);
        let A = split(resultContinuousSearch, ",");
        resultContinuousSearch += c1[i] + "\n";

        let names = resultContinuousSearch;
        var splitString = split(names, ",");
        fill(0, 0, 0);
        textSize(20);
        text(splitString[0], 50, 650);

        sel.option(c1[i]);
        sel.position(20, 620);
        

       sel.changed(mySelectEvent);
    // let item = sel.value();


        print(c1);
      }
    }
  }
}

///////////////////////////////////////////////////////////////////////////

function mySelectEvent() {
  let item = sel.value();
  // print(item);
  input1.value(item);
}

///////////////////////////////////////////////////////////////////////////

function contains(s1, s2) {
  for (let i = 0; i < min(s1.length, s2.length); i++) {
    if (s1[i].toUpperCase() != s2[i].toUpperCase()) return false;
  }
  return true;
}

///////////////////////////////////////////////////////////////////////////

function greet() {
  //Changes input1.value to uppercase in console, NEED TO MAKE NOT CASE SENSITIVE
  name = input1.value().toUpperCase();
  string =
    name.charAt(0).toUpperCase() + name.substr(1, name.length).toUpperCase();
  print(string);

  if (name == "") {
    // input1.value(null);
    dia = 0;
  }
}

///////////////////////////////////////////////////////////////////////////

Chrisir · September 20, 2022, 7:54pm

let dia = 0;
let growAmount = 0.5;
let grow = true;

let input1, button, greeting, img, data, sel;

let resultContinuousSearch = "";

let url =
  "https://docs.google.com/spreadsheets/d/e/2PACX-1vRmua9Ue9Uv2olN_0kOvTbAPPBkJ3ckciRbDUs_jUr9eMv43sgdFrzmcluQGd4MQrsiYemarPqLsjVj/pub?gid=0&single=true&output=csv";

///////////////////////////////////////////////////////////////////////////

function preload() {
  data = loadTable(url, "csv", "header");
}

///////////////////////////////////////////////////////////////////////////

function setup() {
  createCanvas(1794, 1000);

  img = loadImage("LMP Map2.png");
  name = null;

  input1 = createInput();
  input1.position(20, 600);
  input1.changed(myinputEvent);
  input1.input(myinputEvent);

  button = createButton("submit");
  button.position(input1.x + input1.width, 600);
  button.mousePressed(greet);

  greeting = createElement("h2", "Search (Press Esc to clear)");
  greeting.position(20, 550);

  rcs = createElement("rcs");
  rcs.position(20, 620);

  sel = createSelect();
  sel.size(310, 22);
}

///////////////////////////////////////////////////////////////////////////

function draw() {
  background(255);
  //  image(img, 0, 0);

  sel.position(20, 620);

  //let item = sel.value();

  if (keyIsPressed) {
    if (keyCode == ENTER || keyCode == RETURN) {
      greet();
    } else if (keyCode == 51) {
      input1.value("screwdrivers"); // test
    } else if (keyCode == 27) {
      input1.value(null);
      name = null;
      dia = 0;
      sel.remove();
      sel = createSelect();
      sel.size(310, 22);
    }
  }

  getData();

  //checkInput();
}

///////////////////////////////////////////////////////////////////////////

function checkInput() {
  // NOT an event

  resultContinuousSearch = "";

  if (input1.value().length >= 1) {
    c1 = data.getColumn("TOOL");

    for (let i = 0; i < c1.length; i++) {
      if (contains(c1[i], input1.value())) {
        // console.log(c1[i]);
        //let A = split(resultContinuousSearch, ",");
        //resultContinuousSearch += c1[i] + "\n";

        let names = resultContinuousSearch;
        var splitString = split(names, ",");
        fill(0, 0, 0);
        textSize(20);
        text(splitString[0], 350, 650);

        sel.option(c1[i], c1[i]);
        sel.position(20, 620);
        sel.changed(mySelectEvent);

        //print(sel.value());
      }
    }
  }
}

///////////////////////////////////////////////////////////////////////////

function mySelectEvent() {
  let item = sel.value();
  // background(200);
  input1.value(item);
}

function myinputEvent() {
  checkInput();
}

///////////////////////////////////////////////////////////////////////////

function contains(s1, s2) {
  for (let i = 0; i < min(s1.length, s2.length); i++) {
    if (s1[i].toUpperCase() != s2[i].toUpperCase()) return false;
  }
  return true;
}

///////////////////////////////////////////////////////////////////////////

function greet() {
  //Changes input1.value to uppercase in console, NEED TO MAKE NOT CASE SENSITIVE
  name = input1.value().toUpperCase();
  string =
    name.charAt(0).toUpperCase() + name.substr(1, name.length).toUpperCase();
  print(string);

  if (name == "") {
    // input1.value(null);
    dia = 0;
  }
}

///////////////////////////////////////////////////////////////////////////

// function anim1() {
//   //Creates the animation for location of item
//   fill(0, 255, 0);
//   ellipse(c, xLoc, dia, dia);

//   if (dia > 50) {
//     grow = false;
//   }
//   if (dia < 0) {
//     grow = true;
//   }

//   if (grow == true) {
//     dia += growAmount;
//   } else {
//     dia -= growAmount;
//   }
// }

///////////////////////////////////////////////////////////////////////////

function getData() {
  for (let i = 0; i < data.getRowCount(); i++) {
    let row = data.getRow(i);
    let c = row.getString("TOOL");
    let l = row.getNum("LOCATION");
    // let xLoc = row.getNum("X Coordinate");
    // let yLoc = row.getNum("Y Coordinate");

    if (l == 1) {
      var xLoc = 500;
      var yLoc = 200;
    }

    if (l == 2) {
      var xLoc = 350;
      var yLoc = 200;
    }

    if (l == 3) {
      var xLoc = 200;
      var yLoc = 500;
    }

    // print(xLoc);
    // noLoop();

    if (name == c) {
      fill(0, 255, 0);
      ellipse(xLoc, yLoc, dia, dia);

      if (dia > 50) {
        grow = false;
      }
      if (dia < 0) {
        grow = true;
      }
      if (grow == true) {
        dia += growAmount;
      } else {
        dia -= growAmount;
      }
    }
  }
}

///////////////////////////////////////////////////////////////////////////

zara2355 · September 21, 2022, 12:24am

Chrisir

Again, WOW!!! So that worked…amazingly.

Ok, so I have a question: why does the snippet work?

sel.option(c1[i], c1[i]);

i would have never in a million years had thought to do that, and I dont understand why it does. Can you explain it? Thank you!!!

Chrisir · September 21, 2022, 3:47am

I found this in the reference for createSelect

Apparently you have to give each line a value additionally to the text. It’s a bit stupid.

Chrisir · September 21, 2022, 10:23pm

2nd new Version below

A proof of concept:

a full new Sketch to enter the x,y for products from your google sheet. This is not for the customer but for you to build the data more easily.
The Sketch loops over the products and asks for the coordinates. You have to enter them via mouse
copy the result from the console and paste in the Google sheet for further use.
copy shop map in folder and adjust image name please
you have to rewrite the console output to match your needs in the table TOOL,LOCATION,X Coordinate,Y Coordinate,5,6

NEW VERSION where the old data are kept AND ONLY the x and y column is changed.
YOU CAN also cursor right click to skip item. This is for the case when you have to edit the data (make a copy of the table before) and only a few products have changed their position. You can skip unchanged products.

2nd new Version below


String url =
  "https://docs.google.com/spreadsheets/d/e/2PACX-1vRmua9Ue9Uv2olN_0kOvTbAPPBkJ3ckciRbDUs_jUr9eMv43sgdFrzmcluQGd4MQrsiYemarPqLsjVj/pub?gid=0&single=true&output=csv";

PImage img; 

int state = 0; 

String[] fullFileText; 
int lineNumber =1;
String[] componentsOfLine; 

ArrayList<Product> list = new ArrayList();  

String error = ""; 
String skipped = "";

// -----------------------------------------------------------------------------

void setup() {
  // init
  size(1870, 800);

  img = loadImage("LMP Map2.jpg");
  fullFileText = loadStrings (url);

  for (String s1 : fullFileText) {
    println(s1);
  }
  println("------------------------");
  println(fullFileText[0]);
} // func 

void draw() { 
  background(111);

  switch (state) {

  case 0:
    showImageAndProducts(); 

    componentsOfLine = split(fullFileText[lineNumber], ",");

    // footer 
    fill(255); 
    text(mouseX+","+mouseY
      +" - Please enter POS for TOOL: "
      +componentsOfLine[0], 
      30, height-33);

    // Error Msg 
    fill(255, 0, 0);
    textSize(32); 
    text (error, 
      width/2-111, height-99);
    textSize(12);
    break;

  case 1: 
    showImageAndProducts();
    fill(255); 
    text("Done", 
      30, height-33);
    // "Done" 
    fill(0, 255, 0);
    textSize(92); 
    text ("Done", width/2, height-99);
    textSize(12);
    break;
  }//switch
}//func 

// -------------------------------------------------------------------
// Misc 

void showImageAndProducts() {
  image(img, 0, 0);
  for (Product prod : list) {
    prod.display();
  }
}

// -------------------------------------------------------------------
// Inputs 

void keyPressed() {


  switch (state) {

  case 0:
    if (key==ESC) {
      key=0; // kill ESC
    } else if (keyCode == RIGHT) {
      // Cursor right 
      println (fullFileText[lineNumber]);
      skipped+=fullFileText[lineNumber]+"\n"; 
      lineNumber++;
      if (lineNumber>=fullFileText.length) {
        lineNumber=0; 
        state = 1;
        println("Done");
        println("skipped: "
          +"\n"
          +skipped );
      }
    }
    break;
  }

  key=0; // kill ESC
}

void mousePressed () {

  switch (state) {

  case 0:
    if (mouseX>img.width||
      mouseY>img.height) {
      error = "Mouse outside image"; 
      return;
    }

    // reset 
    error=""; 

    String a1 = componentsOfLine[0]
      +"," 
      +componentsOfLine[1]
      +"," 
      +mouseX
      +","
      +mouseY
      +","
      + componentsOfLine[4]
      +","
      + componentsOfLine[5]
      +","
      + componentsOfLine[6]
      ;
    println(a1);

    list.add(new Product(componentsOfLine[0], new PVector(mouseX, mouseY))); 
    lineNumber++;
    if (lineNumber>=fullFileText.length) {
      lineNumber=0; 
      state = 1;
      println("Done");
      println("skipped: "
        +"\n"
        +skipped );
    }
    break;

  case 1: 
    // ignore 
    break;
  }
}

//===================================================================

class Product {

  String name;
  PVector pv; 

  //constr 
  Product(String name_, PVector pv_) {
    name = name_;
    pv=pv_.copy();
  }//constr 

  void display() {
    fill(255, 0, 0); // RED 
    ellipse (pv.x, pv.y, 6, 6);

    text (name, 
      pv.x+8, pv.y);
  }//method
} //class
//

NEW VERSION: ADD new products on the fly



String url =
  "https://docs.google.com/spreadsheets/d/e/2PACX-1vRmua9Ue9Uv2olN_0kOvTbAPPBkJ3ckciRbDUs_jUr9eMv43sgdFrzmcluQGd4MQrsiYemarPqLsjVj/pub?gid=0&single=true&output=csv";

PImage img; 

int state = 0; 

String[] fullFileText; 
int lineNumber =1;
String[] componentsOfLine; 

ArrayList<Product> list = new ArrayList();  

String error = ""; 
String skipped = "";

String input=""; 

boolean showCursorAsLine ; 

// -----------------------------------------------------------------------------

void setup() {
  // init
  size(1820, 800);

  img = loadImage("LMP Map2.jpg");
  fullFileText = loadStrings (url);

  for (String s1 : fullFileText) {
    println(s1);
  }
  println("------------------------");
  println(fullFileText[0]);
} // func 

void draw() { 
  background(111);

  switch (state) {

  case 0:
    showImageAndProducts(); 

    componentsOfLine = split(fullFileText[lineNumber], ",");

    // footer 
    fill(255); 
    text(mouseX+","+mouseY
      +" - Please enter POS for TOOL: "
      +componentsOfLine[0], 
      30, height-33);
    text (input
      +blinkingCursor()
      +"   <- Enter new Product and submit it with mouse click to its position - OR : ", 
      30, height-63);

    // Error Msg 
    fill(255, 0, 0);
    textSize(32); 
    text (error, 
      width/2-111, height-99);
    textSize(12);
    break;

  case 1: 
    showImageAndProducts();
    fill(255); 
    text("Done", 
      30, height-33);
    // "Done" 
    fill(0, 255, 0);
    textSize(92); 
    text ("Done", width/2, height-99);
    textSize(12);
    break;
  }//switch
}//func 

// -------------------------------------------------------------------
// Misc 

void showImageAndProducts() {
  image(img, 0, 0);
  for (Product prod : list) {
    prod.display();
  }
}

String blinkingCursor() {

  if ((frameCount%11) == 0) {
    showCursorAsLine= ! showCursorAsLine;
  }

  if (showCursorAsLine) 
    return("|");  
  else 
  return("  ");
} // func 

// -------------------------------------------------------------------
// Inputs 

void keyPressed() {


  switch (state) {

  case 0:
    if (key==ESC) {
      key=0; // kill ESC
    } else if (keyCode == RIGHT) {
      // Cursor right 
      println (fullFileText[lineNumber]);
      skipped+=fullFileText[lineNumber]+"\n"; 
      lineNumber++;
      if (lineNumber>=fullFileText.length) {
        lineNumber=0; 
        state = 1;
        println("Done");
        println("skipped: "
          +"\n"
          +skipped );
      }
    } else if ((key!=CODED) && key >= 32) {
      input+=key;
    }
    break;
  }

  key=0; // kill ESC
}

void mousePressed () {

  switch (state) {

  case 0:
    if (mouseX>img.width||
      mouseY>img.height) {
      error = "Mouse outside image"; 
      return;
    }
    // reset 
    error=""; 

    if (input.equals("") ) {
      // OLD prod 
      String a1 = componentsOfLine[0]
        +"," 
        +componentsOfLine[1]
        +"," 
        +mouseX
        +","
        +mouseY
        +","
        + componentsOfLine[4]
        +","
        + componentsOfLine[5]
        +","
        + componentsOfLine[6]
        ;
      println(a1);

      list.add(new Product(componentsOfLine[0], new PVector(mouseX, mouseY))); 
      lineNumber++;
      if (lineNumber>=fullFileText.length) {
        lineNumber=0; 
        state = 1;
        println("Done");
        println("skipped: "
          +"\n"
          +skipped );
      }
    } else {
      // NEW prod 
      String a1 = input
        +"," 
        +"?"
        +"," 
        +mouseX
        +","
        +mouseY
        +","
        + ""
        +","
        + ""
        +","
        + ""   ;
      // reset
      list.add(new Product(input, new PVector(mouseX, mouseY))); 

      input=""; 
      println(a1);
    }
    break;

  case 1: 
    // ignore 
    break;
  }
}

//===================================================================

class Product {

  String name;
  PVector pv; 

  //constr 
  Product(String name_, PVector pv_) {
    name = name_;
    pv=pv_.copy();
  }//constr 

  void display() {
    fill(255, 0, 0); // RED 
    ellipse (pv.x, pv.y, 6, 6);

    text (name, 
      pv.x+8, pv.y);
  }//method
} //class
//

zara2355 · September 22, 2022, 12:10am

Chrisir

Right. I took another look at the reference after seeing your post and it finally clicked why that snippet works (as opposed to only using sel.option(c1[i])

Also, thank you for the two updated versions! Although I think they may be for Processing and not p5.js? The functionality you mention in the notes sounds very interesting! I think as i iterate, these are things that might well be a good challenge for me.

I do have a few more questions about the dropdown, if youre open to it?

Ideally, I was hoping to figure out how to get rid of the dropdown when the Esc button is pushed. And well, i kind of did figure it out. However, it only works when i place the sel = createSelect(); in the Setup. However, when i do put that snippet in Setup, the dropdown doesnt update. That is, if I type the letter “H”, it gives all results starting with “H”, but if i were to say, type “HA” it should only give results that begin with “HA” (ex: HAMMER, HANDSAW). But what happens is that when the snippet is in Setup and “HA” is typed, it still lists all results starting with “H” (ex: HAMMER, HANDSAW, HOW, HUMMER, etc etc). Now, the good thing about this, is when the Esc button is pressed, the snippet sel.remove(); works to remove the dropdown. (If the user begins typing again, the dropdown re-appears)

On the other hand, when i place sel = createSelect(); in the function titled function checkInput(), the dropdown does parse correctly, but does NOT disappear when I press Esc button, not matter where i put sel = createSelect();.

So What i get is either 1) the ability to remove the dropdown but not have proper parsing, or 2) proper parsing but the dropdown never disappears.

I hope this makes sense, and heres the sketch to (hopefully) illustrate this:

let dia = 0;
let growAmount = 0.5;
let grow = true;

let input1, button, greeting, img, data, sel;

let resultContinuousSearch = "";

let myBoolean = false;

let url =
  "https://docs.google.com/spreadsheets/d/e/2PACX-1vRmua9Ue9Uv2olN_0kOvTbAPPBkJ3ckciRbDUs_jUr9eMv43sgdFrzmcluQGd4MQrsiYemarPqLsjVj/pub?gid=0&single=true&output=csv";

///////////////////////////////////////////////////////////////////////////

function preload() {
  data = loadTable(url, "csv", "header");
}

///////////////////////////////////////////////////////////////////////////

function setup() {
  createCanvas(1794, 1000);

  img = loadImage("LMP Map2.png");
  name = null;

  input1 = createInput();
  input1.position(20, 600);

  button = createButton("submit");
  button.position(input1.x + input1.width, 600);
  button.mousePressed(greet);

  greeting = createElement("h2", "Search (Press Esc to clear)");
  greeting.position(20, 550);

  rcs = createElement("rcs");
  rcs.position(20, 620);

  // sel = createSelect();
  // sel.size(310, 22);
}

///////////////////////////////////////////////////////////////////////////

function draw() {
  background(255);
  image(img, 0, 0);

  // let item = sel.value();

  if (keyIsPressed) {
    if (keyCode == ENTER || keyCode == RETURN) {
      greet();
    } else if (keyCode == 51) {
      input1.value("screwdrivers"); // test
    } else if (keyCode == 27) {
      input1.value(null);
      name = null;
      dia = 0;
      sel.remove();
      // sel = createSelect();

      
    }
  }

  // keyPressed();
  
  getData();

  checkInput();
  

}

///////////////////////////////////////////////////////////////////////////

function checkInput() {
  // NOT an event

  sel = createSelect();
  sel.size(310, 22);

  keyPressed();
  resultContinuousSearch = "";
 if (input1.value().length >= 1) {
    c1 = data.getColumn("TOOL");

    for (let i = 0; i < c1.length; i++) {
      if (contains(c1[i], input1.value())) {
        // console.log(c1[i]);
        let A = split(resultContinuousSearch, ",");
        resultContinuousSearch += c1[i] + "\n";

        let names = resultContinuousSearch;
        var splitString = split(names, ",");
        fill(0, 0, 0);
        textSize(20);
        text(splitString[0], 350, 650);

        sel.option(c1[i], c1[i]);
        // sel.option("")
        sel.position(20, 620);
        sel.changed(mySelectEvent);

   

    
        // print(c1);
      }
 
    }
         
  }
  

}


///////////////////////////////////////////////////////////////////////////

function keyPressed() {
  if (keyIsPressed) {
    if (keyCode == ENTER || keyCode == RETURN) {
      greet();
    } else if (keyCode == 51) {
      input1.value("screwdrivers"); // test
    } else if (keyCode == 27) {
      input1.value(null);
      name = null;
      dia = 0;
      sel.remove();
      // sel = createSelect();

      
    }
  }
}

///////////////////////////////////////////////////////////////////////////

function mySelectEvent() {
  let item = sel.value();
  // print(item);
  input1.value(item);
}

///////////////////////////////////////////////////////////////////////////

function contains(s1, s2) {
  for (let i = 0; i < min(s1.length, s2.length); i++) {
    if (s1[i].toUpperCase() != s2[i].toUpperCase()) return false;
  }
  return true;
}

///////////////////////////////////////////////////////////////////////////

function greet() {
  //Changes input1.value to uppercase in console, NEED TO MAKE NOT CASE SENSITIVE
  name = input1.value().toUpperCase();
  string =
    name.charAt(0).toUpperCase() + name.substr(1, name.length).toUpperCase();
  print(string);

  if (name == "") {
    // input1.value(null);
    dia = 0;
  }
}

///////////////////////////////////////////////////////////////////////////

// function anim1() {
//   //Creates the animation for location of item
//   fill(0, 255, 0);
//   ellipse(c, xLoc, dia, dia);

//   if (dia > 50) {
//     grow = false;
//   }
//   if (dia < 0) {
//     grow = true;
//   }

//   if (grow == true) {
//     dia += growAmount;
//   } else {
//     dia -= growAmount;
//   }
// }

///////////////////////////////////////////////////////////////////////////

function getData() {
  for (let i = 0; i < data.getRowCount(); i++) {
    let row = data.getRow(i);
    let c = row.getString("TOOL");
    let l = row.getNum("LOCATION");
    // let xLoc = row.getNum("X Coordinate");
    // let yLoc = row.getNum("Y Coordinate");

    if (l == 1) {
      var xLoc = 500;
      var yLoc = 200;
    }

    if (l == 2) {
      var xLoc = 350;
      var yLoc = 200;
    }

    if (l == 3) {
      var xLoc = 200;
      var yLoc = 500;
    }

    // print(xLoc);
    // noLoop();

    if (name == c) {
      fill(0, 255, 0);
      ellipse(xLoc, yLoc, dia, dia);

      if (dia > 50) {
        grow = false;
      }
      if (dia < 0) {
        grow = true;
      }
      if (grow == true) {
        dia += growAmount;
      } else {
        dia -= growAmount;
      }
    }
  }
}

///////////////////////////////////////////////////////////////////////////

Chrisir · September 22, 2022, 6:49am

Correct. I don’t know a thing about p5.js.

I don’t know about the Escape thing.
I am unhappy with the input field in the first place and asked a question about it already.

Topic		Replies	Views
Clickable dropdown menu Coding Questions	2	612	February 11, 2020
Help with adding autocomplete to a sketch Coding Questions	13	511	September 14, 2022
Array has error every other object Coding Questions	6	294	January 19, 2021
Scrollablelist set Item selected from code Libraries	9	1763	October 8, 2018
Is there a better way to write this piece of code? Beginners	8	363	August 30, 2021

Help with createSelect() using array

Related topics