Hi all-
Im hoping someone might be able to help point me in the right direction. Im creating a sketch that acts as an interactive inventory map for the shop that i work in. For example, when a person types in a search term such as “hammers” and either clicks the submit button or presses the enter key on the keyboard, a simple animation plays on the location (a picture of the shop floor layout) of the item in the shop. So far the sketch works really pretty well (i think), however, I want to add suggestions for key search words after the first few letters are typed. So, lets say a user types in the letters “h”, and “a”, a list of all items that begin with those letters would be listed to make it a little easier for people. My sketch uses google sheets for its data and each “location” (i.e. cabinet #1 or table#4, etc.) is arranged in the google sheet in columns. (Not sure if this tidbit of info is relevant or not to anyone trying to help)
I did find one sketch from a google search, unfortunately Im just not skilled enough to take the example i found and use it in my sketch.
Heres my sketch
let dia = 0;
let growAmount = 0.5;
let grow = true;
let input, button, greeting, img, data;
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() {
// create canvas
createCanvas(1794, 600);
img = loadImage("LMP Map2.png");
name = null;
input = createInput();
input.position(20, 600);
button = createButton("submit");
button.position(input.x + input.width, 600);
button.mousePressed(greet);
greeting = createElement("h2", "Search (Press Esc to clear)");
greeting.position(20, 550);
// textAlign(LEFT);
// textSize(50);
}
///////////////////////////////////////////////////////////////////////////
function draw() {
background(255);
image(img, 0, 0);
if (keyIsPressed) {
if (keyCode == ENTER || keyCode == RETURN) {
greet();
} else if (keyCode == 51) {
input.value("screwdrivers"); // test
} else if (keyCode == 27) {
input.value(null);
name = null;
}
}
c1 = data.getColumn("1");
c2 = data.getColumn("2");
c3 = data.getColumn("3");
c4 = data.getColumn("4");
c5 = data.getColumn("5");
c6 = data.getColumn("6");
if (c1.includes(name)) {
anim1();
}
if (c2.includes(name)) {
anim2();
}
// if (c3.includes(name)) {
// anim3();
// }
// if (c4.includes(name)) {
// anim4();
// }
// if (c5.includes(name)) {
// anim5();
// }
// if (c6.includes(name)) {
// anim6();
// }
}
///////////////////////////////////////////////////////////////////////////
function greet() {
//Changes input.value to uppercase in console, NEED TO MAKE NOT CASE SENSITIVE
name = input.value().toUpperCase();
string =
name.charAt(0).toUpperCase() + name.substr(1, name.length).toUpperCase();
print(string);
}
///////////////////////////////////////////////////////////////////////////
// function smallReset() { //THIS MAY NOT NE NECESSARY, SUPPOSED TO BE FOR RESETTING ANIMATION
// //resets animation
// var dia = 0;
// var growAmount = 0;
// var grow = 0;
// }
///////////////////////////////////////////////////////////////////////////
function anim1() {
//Creates the animation for location of item
fill(0, 255, 0);
ellipse(200, 200, dia, dia);
if (dia > 50) {
grow = false;
}
if (dia < 0) {
grow = true;
}
if (grow == true) {
dia += growAmount;
} else {
dia -= growAmount;
}
}
function anim2() {
//Creates the animation for location of item
fill(0, 255, 0);
ellipse(400, 400, dia, dia);
if (dia > 50) {
grow = false;
}
if (dia < 0) {
grow = true;
}
if (grow == true) {
dia += growAmount;
} else {
dia -= growAmount;
}
}
`
Any help is greatly appreciated! Many, many thanks in advance!
