Viewing Program

Program Data

Program thumbnail for "{props.program.title}"

Title	iOS 9 Keyboard - MAJOR UPDATE!
ID	4735260070379520
Created	10 years ago, 1447022229866
Updated	8 years ago, 1486683465844
Code	/*iOS 9 Keyboard (Functional) * By SparklyGem * * Ironically, this currently doesn't work on iOS devices (assuming you use Safari), probably because of https://github.com/Khan/live-editor/issues/426 * * Thanks to Bruce and Aidabaida for helping me make my code more efficient. Thanks to Peter Collingridge for helping me fix a bug. Thanks to all you guys for the votes and awesome comments you gave me! * * Remember I made a program of the iOS 9 keyboard a while ago? (If you don't, this is the link: https://www.khanacademy.org/computer-programming/ios-9-keyboard-functional/4986685719969792) Well now, I added lots more features, including: * * ~ Made predictive keyboard not only predict next word when you type the first letter or two of it, but also predict the next word before you even start typing it (based on the previous word)! * ~ Various tweaks to graphics and program functionality * ~ Made working predictive keyboard! * ~ Added working number and symbol keys * ~ Made the "return" button work * ~ Made how the keys pop up when being pressed look a lot more similar to how it looks on the real iOS 9 keyboard * ~ Edited button() function to support easily making bigger-than-usual buttons * ~ Made some parts of the code more efficient * * @TODO * ~ Add more words to knowledge of program * ~ Emojis... and other keyboards? * ~ Make it so you can hold down key to get variations of letter * ~ "Caps" lock * ~ Make it so you could hold down backspace key instead of having to repeatedly click it / var txt = ""; var CLICK_SOUND = getSound("rpg/hit-thud"); var mode = "letters-uppercase"; var ARIAL = createFont("Arial"); var mouseIsReleased = false; var KEYS = "QWERTYUIOPASDFGHJKLZXCVBNM1234567890-/:;()$&@\".,?!'[]{}#%^+=_\\\|~<>€£¥•"; KEYS = KEYS.split(""); var removedSpace; var button = function(letter, x, y, largeSize) { noStroke(); fill(150, 150, 150); rect(x, y + 2, largeSize ? 34 : 22, 32, 4); stroke(230, 230, 230); fill(245, 245, 245); rect(x, y, largeSize ? 34 : 22, 32, 4); textAlign(CENTER, CENTER); textFont(ARIAL, 20); fill(0, 0, 0); text(letter, largeSize ? x + 17 : x + 11.2, y + 17); if (mouseIsPressed) { if ((largeSize && mouseX > x && mouseX < x + 34 && mouseY > y && mouseY < y + 32) \|\| (mouseX > x && mouseX < x + 22 && mouseY > y && mouseY < y + 32)) { noStroke(); fill(245, 245, 245, 245); rect(x, y, 22, 32, 4); if (letter.toUpperCase() !== "Q" && letter.toUpperCase() !== "P" && letter !== "0" && letter !== "1") { if (largeSize) { rect(x - 6, y - 40, 48, 53, 5, 5, 20, 20); fill(0, 0, 0); textFont(ARIAL, 28); text(letter, x + 17, y - 13); } else { rect(x - 6, y - 40, 34, 53, 5, 5, 20, 20); fill(0, 0, 0); textFont(ARIAL, 28); text(letter, x + 10, y - 13); } } else if (letter.toUpperCase() === "Q" \|\| letter === "1") { rect(x, y - 40, 28, 53, 5, 5, 10, 0); fill(0, 0, 0); textFont(ARIAL, 28); text(letter, x + 12, y - 12); } else { rect(x - 6, y - 40, 28, 53, 5, 5, 0, 10); fill(0, 0, 0); textFont(ARIAL, 28); text(letter, x + 8, y - 12); } } } if (mouseIsReleased && ((largeSize && mouseX > x && mouseX < x + 34 && mouseY > y && mouseY < y + 32) \|\| (mouseX > x && mouseX < x + 22 && mouseY > y && mouseY < y + 32))) { playSound(CLICK_SOUND); txt += letter; if (mode === "letters-uppercase") { mode = "letters-lowercase"; } } }; var shiftButton = function(on) { noStroke(); fill(150, 150, 150); rect(60, 306, 32, 32, 4); if (on) { stroke(230, 230, 230); fill(245, 245, 245); rect(60, 304, 32, 32, 4); noStroke(); fill(0, 0, 0); rect(72, 320, 8, 8, 2); triangle(68, 322, 84, 322, 76, 314); } else { fill(200, 200, 200); rect(60, 304, 32, 32, 4); stroke(0, 0, 0); strokeWeight(1.5); line(73, 326, 77, 326); line(73, 320, 73, 325); line(79, 320, 79, 325); line(72, 320, 69, 320); line(79, 320, 81, 320); line(69, 320, 76, 313); line(76, 313, 83, 320); } if (mouseIsReleased && mouseX > 60 && mouseX < 92 && mouseY > 304 && mouseY < 336) { playSound(CLICK_SOUND); if (mode === "letters-uppercase") { mode = "letters-lowercase"; } else { mode = "letters-uppercase"; } } }; var backspaceButton = function() { noStroke(); fill(150, 150, 150); rect(304, 306, 30, 32, 4); fill(200, 200, 200); if (mouseIsPressed && mouseX > 304 && mouseX < 334 && mouseY > 305 && mouseY < 337) { fill(245, 245, 245); } rect(304, 305, 30, 32, 4); stroke(0, 0, 0); strokeWeight(1.5); noFill(); if (mouseIsPressed && mouseX > 304 && mouseX < 334 && mouseY > 305 && mouseY < 337) { fill(0, 0, 0); } rect(314, 313, 14, 14, 2); triangle(315, 313, 315, 327, 308, 321); stroke(200, 200, 200); if (mouseIsPressed && mouseX > 304 && mouseX < 334 && mouseY > 305 && mouseY < 337) { stroke(0, 0, 0); } strokeWeight(3); line(314, 317, 314, 323); point(316, 316); point(316, 325); stroke(0, 0, 0); if (mouseIsPressed && mouseX > 304 && mouseX < 334 && mouseY > 305 && mouseY < 337) { stroke(245, 245, 245); } strokeWeight(1.5); line(318, 318, 323, 323); line(318, 323, 323, 318); if (mouseIsReleased && mouseX > 304 && mouseX < 334 && mouseY > 305 && mouseY < 337) { playSound(CLICK_SOUND); txt = txt.substr(0, txt.length - 1); } }; var lettersToNumbersButton = function() { noStroke(); fill(150, 150, 150); rect(60, 352, 30, 32, 4); fill(200, 200, 200); rect(60, 351, 30, 32, 4); textAlign(CENTER, CENTER); if (mode === "numbers-symbols" \|\| mode === "symbols") { textFont(ARIAL, 13); fill(0, 0, 0); text("ABC", 75, 367); } else { textFont(ARIAL, 15); fill(0, 0, 0); text("123", 75, 367); } if (mouseIsReleased && mouseX > 60 && mouseX < 90 && mouseY > 351 && mouseY < 383) { playSound(CLICK_SOUND); if (mode === "letters-uppercase" \|\| mode === "letters-lowercase") { mode = "numbers-symbols"; } else { mode = "letters-lowercase"; } } }; var switchKeyboardsButton = function() { noStroke(); fill(150, 150, 150); rect(95, 352, 30, 32, 4); fill(200, 200, 200); rect(95, 351, 30, 32, 4); /stroke(0, 0, 0); strokeWeight(1.2); noFill(); ellipse(110, 366, 16, 16); ellipse(110, 366, 8, 16); line(102, 366, 115, 366); line(110, 358, 110, 372); arc(110, 360, 10, 6, 20, 160); arc(110, 372, 10, 6, -160, -20);/ stroke(0, 0, 0); ellipse(110, 367, 16, 16); fill(0, 0, 0); ellipse(107.5, 364.5, 1.5, 1.5); ellipse(112.5, 364.5, 1.5, 1.5); noFill(); arc(110, 367, 10, 10, 10, 170); strokeWeight(1); line(105, 367, 110, 368); line(110, 368, 115, 367); noStroke(); fill(0, 0, 0); arc(110, 369, 10, 7, 20, 160); fill(200, 200, 200); rect(108, 368, 4, 1.5); }; var speechButton = function() { noStroke(); fill(150, 150, 150); rect(130, 352, 22, 32, 4); stroke(230, 230, 230); fill(245, 245, 245); rect(130, 350, 22, 32, 4); stroke(40, 40, 40); strokeWeight(1.5); rect(138, 358, 5, 10, 4); noFill(); arc(141, 364, 12, 15, 30, 150); line(136, 367, 136, 365); line(146, 367, 146, 365); line(141, 375, 141, 372); line(139, 376, 143, 376); }; var spaceButton = function() { noStroke(); fill(150, 150, 150); rect(158, 352, 107, 32, 4); stroke(230, 230, 230); fill(245, 245, 245); if (mouseIsPressed && mouseX > 158 && mouseX < 265 && mouseY > 350 && mouseY < 382) { noStroke(); fill(200, 200, 200); } rect(158, 350, 107, 32, 4); textFont(ARIAL, 14); fill(0, 0, 0); text("space", 210, 366); if (mouseIsReleased && mouseX > 158 && mouseX < 265 && mouseY > 350 && mouseY < 382) { playSound(CLICK_SOUND); txt += " "; if (mode === "numbers-symbols" \|\| mode === "symbols") { mode = "letters-lowercase"; } } }; var returnButton = function() { noStroke(); fill(150, 150, 150); rect(272, 352, 63, 32, 4); fill(200, 200, 200); if (mouseIsPressed && mouseX > 272 && mouseY > 351 && mouseX < 335 && mouseY < 383) { fill(245, 245, 245); } rect(272, 351, 63, 32, 4); textFont(ARIAL, 14); fill(0, 0, 0); text("return", 304, 366); if (mouseIsReleased && mouseX > 272 && mouseY > 351 && mouseX < 335 && mouseY < 383) { playSound(CLICK_SOUND); if (txt.length > 0) { txt += "\n"; } else { txt += " \n"; } } }; var symbolsKeyboardButton = function() { noStroke(); fill(150, 150, 150); rect(60, 306, 30, 32, 4); fill(200, 200, 200); rect(60, 305, 30, 32, 4); fill(0, 0, 0); if (mode === "numbers-symbols") { textFont(ARIAL, 13); text("#+=", 75, 322); } else { textFont(ARIAL, 15); text("123", 75, 322); } if (mouseIsReleased && mouseX > 60 && mouseX < 90 && mouseY > 305 && mouseY < 337) { playSound(CLICK_SOUND); if (mode === "numbers-symbols") { mode = "symbols"; } else { mode = "numbers-symbols"; } } }; var predictiveKeyboard = function() { fill(210, 210, 210); rect(0, 168, width, 32); stroke(255, 255, 255); strokeWeight(1); line(150, 168, 150, 199); line(240, 168, 240, 199); textAlign(CENTER, CENTER); textFont(ARIAL, 18); var splitIntoLetters = txt.split(""); if (splitIntoLetters[splitIntoLetters.length - 1] === " ") { removedSpace = true; txt = txt.substring(0, txt.length - 1); } var splitIntoWords = txt.split(" "); var lastWord = splitIntoWords[splitIntoWords.length - 1]; if (removedSpace) { txt += " "; removedSpace = false; } var word2Found = false; var word3Found = false; var word1 = function(word) { if (mode === "letters-lowercase" && word !== "I" && word !== "I'm" && word.indexOf("\"") === -1 && splitIntoWords.length > 0) { word = word.toLowerCase(); } fill(255, 255, 255); if (mouseIsPressed && mouseX > 0 && mouseX < 150 && mouseY > 168 && mouseY < 199) { fill(245, 245, 245); rect(0, 168, 150, 32); fill(0, 0, 0); } if (mouseIsReleased && mouseX > 0 && mouseX < 150 && mouseY > 168 && mouseY < 199) { playSound(CLICK_SOUND); //if (word.replace(/"/g, "") === lastWord) { if (word.slice(1, -1) === lastWord) { txt += " "; } else { txt += word + " "; } mode = "letters-lowercase"; } text(word, 105, 184); }, word2 = function(word) { if (mode === "letters-lowercase" && word !== "I" && word !== "I'm" && splitIntoWords.length > 0) { if (lastWord) { if (lastWord.split("")[0] === lastWord.split("")[0].toLowerCase() \|\| splitIntoLetters[splitIntoLetters.length - 1] === " ") { word = word.toLowerCase(); } } } fill(255, 255, 255); if (mouseIsPressed && mouseX > 150 && mouseX < 240 && mouseY > 168 && mouseY < 199) { fill(245, 245, 245); rect(150, 168, 90, 32); fill(0, 0, 0); } if (mouseIsReleased && mouseX > 150 && mouseX < 240 && mouseY > 168 && mouseY < 199) { playSound(CLICK_SOUND); if (splitIntoLetters.length === 0 \|\| splitIntoLetters[splitIntoLetters.length - 1] === " ") { txt += word + " "; mode = "letters-lowercase"; } else { splitIntoWords[splitIntoWords.length - 1] = word + " "; txt = splitIntoWords.join(" "); } } text(word, width/2 - 4, 184); }, word3 = function(word) { if (mode === "letters-lowercase" && word !== "I" && word !== "I'm" && splitIntoWords.length > 0) { if (lastWord) { if (lastWord.split("")[0] === lastWord.split("")[0].toLowerCase() \|\| splitIntoLetters[splitIntoLetters.length - 1] === " ") { word = word.toLowerCase(); } } } fill(255, 255, 255); if (mouseIsPressed && mouseX > 240 && mouseX < width && mouseY > 168 && mouseY < 199) { fill(245, 245, 245); rect(240, 168, width - 240, 32); fill(0, 0, 0); } if (mouseIsReleased && mouseX > 240 && mouseX < width && mouseY > 168 && mouseY < 199) { playSound(CLICK_SOUND); if (splitIntoLetters.length === 0 \|\| splitIntoLetters[splitIntoLetters.length - 1] === " ") { txt += word + " "; mode = "letters-lowercase"; } else { splitIntoWords[splitIntoWords.length - 1] = word + " "; txt = splitIntoWords.join(" "); } } text(word, 285, 184); }; var commonWords = ["The", "Be", "To", "Of", "And", "A", "In", "That", "Have", "I", "It", "For", "Not", "On", "With", "He", "As", "You", "Do", "At", "This", "But", "His", "By", "From", "They", "We", "Say", "Her", "She", "Or", "An", "Will", "My", "One", "All", "Would", "There", "Their", "What", "So", "Up", "Out", "If", "About", "Who", "Get", "Which", "Go", "Me", "When", "Make", "Can", "Like", "Time", "No", "Just", "Him", "Know", "Take", "People", "Into", "Year", "Your", "Good", "Some", "Could", "Them", "See", "Other", "Than", "Then", "Now", "Look", "Only", "Come", "Its", "Over", "Think", "Also", "Back", "After", "Use", "Two", "How", "Our", "Work", "First", "Well", "Way", "Even", "New", "Want", "Because", "Any", "These", "Give", "Day", "Most", "Us", "Person", "Thing", "Man", "World", "Life", "Hand", "Part", "Child", "Eye", "Woman", "Place", "Week", "Case", "Point", "Government", "Company", "Number", "Group", "Problem", "Fact", "Find", "Tell", "Ask", "Seem", "Feel", "Try", "Leave", "Call", "Last", "Long", "Great", "Little", "Own", "Old", "Right", "Big", "High", "Different", "Small", "Large", "Next", "Early", "Young", "Important", "Few", "Public", "Bad", "Same", "Able", "Beneath", "Under", "Above", "More", "State", "May", "Such", "Many", "Must", "Before", "Through", "Where", "Much", "Should", "Down", "Each", "Those", "Too", "Very", "Still", "Nation", "Write", "Become", "Here", "Show", "House", "Both", "Between", "Need", "Mean", "Develop", "Move", "General", "School", "Never", "Another", "Begin", "While", "Turn", "Real", "Might", "Form", "Off", "Since", "Against", "Late", "Home", "Interest", "End", "Open", "Follow", "During", "Present", "Without", "Again", "Hold", "Govern", "Around", "Possible", "Head", "Consider", "Word", "Program", "However", "Lead", "System", "Set", "Order", "Plan", "Run", "Keep", "Face", "Play", "Stand", "Increase", "Course", "Change", "Help", "Line", "Is", "Was", "Are", "Had", "Hot", "Were", "Said", "Has", "Did", "Sound", "Water", "Side", "Been"]; if (splitIntoLetters.length === 0) { word1("I"); word2("The"); word3("I'm"); } else if (splitIntoLetters[splitIntoLetters.length - 1] === " ") { switch (lastWord.toLowerCase()) { case "i": word1("Can"); word2("Have"); word3("Don't"); break; case "the": word1("Government"); word2("Two"); word3("Company"); break; case "i'm": word1("Not"); word2("Going"); word3("A"); break; case "be": word1("A"); word2("The"); word3("On"); break; case "to": word1("Me"); word2("You"); word3("My"); break; case "of": word1("The"); word2("A"); word3("My"); break; case "and": word1("I"); word2("The"); word3("It"); break; case "a": word1("Lot"); word2("Good"); word3("Lot of"); break; case "in": word1("The"); word2("A"); word3("My"); break; case "that": word1("He"); word2("I"); word3("The"); break; case "have": word1("A"); word2("No"); word3("Been"); break; case "it": word1("Is"); word2("Was"); word3("Would"); break; case "for": word1("The"); word2("A"); word3("Me"); break; case "not": word1("Only"); word2("All"); word3("A"); break; case "on": word1("The"); word2("My"); word3("A"); break; case "with": word1("The"); word2("A"); word3("My"); break; case "he": word1("Was"); word2("Had"); word3("Is"); break; case "as": word1("A"); word2("Well"); word3("The"); break; case "you": word1("Can"); word2("Have"); word3("Are"); break; case "do": word1("Not"); word2("It"); word3("Is"); break; case "at": word1("Least"); word2("The"); word3("All"); break; case "this": word1("Is"); word2("Was"); word3("Would"); break; case "but": word1("I"); word2("The"); word3("It"); break; case "his": word1("Country"); word2("Government"); word3("Client"); break; case "by": word1("The"); word2("Now"); word3("A"); break; case "from": word1("The"); word2("Me"); word3("A"); break; case "they": word1("Are"); word2("Were"); word3("Have"); break; case "we": word1("Have"); word2("Are"); word3("Can"); break; case "say": word1("They"); word2("That"); word3("It"); break; case "her": word1("Husband"); word2("Son"); word3("Name"); break; case "she": word1("Was"); word2("Is"); word3("Had"); break; case "or": word1("The"); word2("Not"); word3("I"); break; case "an": word1("Agreement"); word2("Update"); word3("Investigation"); break; case "will": word1("Be"); word2("Make"); word3("Never"); break; case "my": word1("Mom"); word2("Phone"); word3("Dad"); break; case "one": word1("Person"); word2("Of"); word3("Day"); break; case "all": word1("The"); word2("Of"); word3("My"); break; case "would": word1("Be"); word2("Make"); word3("Have"); break; case "there": word1("Is"); word2("Are"); word3("Was"); break; case "their": word1("Own"); word2("Lives"); word3("Homes"); break; case "what": word1("I"); word2("You"); word3("Is"); break; case "so": word1("Much"); word2("I"); word3("Many"); break; case "up": word1("To"); word2("By"); word3("In"); break; case "out": word1("Of"); word2("And"); word3("To"); break; case "if": word1("You"); word2("I"); word3("The"); break; case "about": word1("The"); word2("To"); word3("It"); break; case "who": word1("Is"); word2("Was"); word3("Are"); break; case "get": word1("A"); word2("The"); word3("My"); break; case "which": word1("Is"); word2("Was"); word3("Has"); break; case "go": word1("To"); word2("Back"); word3("On"); break; case "me": word1("To"); word2("I"); word3("That"); break; case "when": word1("I"); word2("You"); word3("The"); break; case "make": word1("A"); word2("It"); word3("The"); break; case "can": word1("Be"); word2("Do"); word3("Get"); break; case "like": word1("The"); word2("That"); word3("To"); break; case "time": word1("For"); word2("To"); word3("And"); break; case "no": word1("More"); word2("Matter"); word3("One"); break; case "just": word1("To"); word2("Because"); word3("As"); break; case "him": word1("To"); word2("That"); word3("He"); break; default: word1("Is"); word2("I"); word3("To"); break; } } else { word1("\"" + lastWord + "\""); var wordsAnalyzed = 0; var endedOffAt; if (lastWord.match(/[(\|)\|[\|\|+\|\\\|?]/) === null) { for (var i = 0; i < commonWords.length; i++) { if (!word2Found) { if (lastWord.toLowerCase() === commonWords[i].substring(0, lastWord.split("").length).toLowerCase()) { word2(commonWords[i]); word2Found = true; endedOffAt = i; commonWords.splice(i, 1); } } else if (!word3Found) { if (lastWord.toLowerCase() === commonWords[i].substring(0, lastWord.split("").length).toLowerCase()) { word3(commonWords[i]); word3Found = true; endedOffAt = i; } } } if (!word2Found \|\| !word3Found) { while (wordsAnalyzed < commonWords.length) { if (!word2Found) { var last = new RegExp(lastWord, "i"); if (commonWords[wordsAnalyzed].match(last) !== null) { word2(commonWords[wordsAnalyzed]); word2Found = true; } } else if (!word3Found) { var last = new RegExp(lastWord, "i"); if (commonWords[wordsAnalyzed].match(last) !== null) { word3(commonWords[wordsAnalyzed]); word3Found = true; } } wordsAnalyzed++; } } } } }; mouseClicked = function() { mouseIsReleased = true; }; draw = function() { background(255, 255, 255); noStroke(); fill(225, 225, 225); rect(0, height/2, width, height/2); if (mode === "letters-uppercase") { predictiveKeyboard(); for (var i = 0; i < 10; i++) { button(KEYS[i], 60 + i 28, 212); } for (var i = 0; i < 9; i++) { button(KEYS[i + 10], 74 + i * 28, 258); } for (var i = 0; i < 7; i++) { button(KEYS[i + 19], 102 + i * 28, 304); } shiftButton(true); backspaceButton(); lettersToNumbersButton(); switchKeyboardsButton(); speechButton(); spaceButton(); returnButton(); } else if (mode === "letters-lowercase") { predictiveKeyboard(); for (var i = 0; i < 10; i++) { button(KEYS[i].toLowerCase(), 60 + i * 28, 212); } for (var i = 0; i < 9; i++) { button(KEYS[i + 10].toLowerCase(), 74 + i * 28, 258); } for (var i = 0; i < 7; i++) { button(KEYS[i + 19].toLowerCase(), 102 + i * 28, 304); } shiftButton(false); backspaceButton(); lettersToNumbersButton(); switchKeyboardsButton(); speechButton(); spaceButton(); returnButton(); } else if (mode === "numbers-symbols") { predictiveKeyboard(); for (var i = 0; i < 10; i++) { button(KEYS[i + 26], 60 + i * 28, 212); } for (var i = 0; i < 10; i++) { button(KEYS[i + 36], 60 + i * 28, 258); } for (var i = 0; i < 5; i++) { button(KEYS[i + 46], 100 + i * 40, 304, true); } backspaceButton(); lettersToNumbersButton(); switchKeyboardsButton(); speechButton(); spaceButton(); returnButton(); symbolsKeyboardButton(); } else if (mode === "symbols") { predictiveKeyboard(); for (var i = 0; i < 10; i++) { button(KEYS[i + 51], 60 + i * 28, 212); } for (var i = 0; i < 10; i++) { button(KEYS[i + 61], 60 + i * 28, 258); } for (var i = 0; i < 5; i++) { button(KEYS[i + 46], 100 + i * 40, 304, true); } backspaceButton(); lettersToNumbersButton(); switchKeyboardsButton(); speechButton(); spaceButton(); returnButton(); symbolsKeyboardButton(); } var blinker = ""; if (millis() % 1000 < 500) { blinker = "\|"; } fill(0, 0, 0); textAlign(LEFT, TOP); textFont(ARIAL, 25); text(txt + blinker, 5, 20, width - 20, 150); mouseIsReleased = false; };
Folds
Fork	false
Key	ag5zfmtoYW4tYWNhZGVteXIXCxIKU2NyYXRjaHBhZBiAgKizmta0CAw
Votes	232
Spin-Offs	24
Type	PJS
Width	400
Height	400
User Flagged	false
Origin Scratchpad	null
Hidden From Hotlist	false
Restricted Posting	false
By Child	false
Author Nick	VolcanicProductions
Author Name	VolcanicProductions
Author ID	kaid_347502553788266607644309
Author Profile Access	COACH

Archive Data

Added	10 months ago, 1739366980177
Updated	10 months ago, 1739366983862
Source Deleted	unknown