From d34793c7dc3624eb9dca54da6da548226638b795 Mon Sep 17 00:00:00 2001 From: bluesaxman Date: Tue, 16 Sep 2025 13:32:54 -0600 Subject: [PATCH] Added ability to add new pecs --- README.md | 5 ++- main.js | 100 ++++++++++++++++++++++++++++++++++++++++++++++-------- 2 files changed, 89 insertions(+), 16 deletions(-) diff --git a/README.md b/README.md index 14a49d4..9887058 100644 --- a/README.md +++ b/README.md @@ -18,6 +18,9 @@ A free open source Picture Exchange Communication System or PECS ### Initial goals - [x] Basic web app UI -- [ ] Add/Remove custom PEC's +- [x] Add custom PEC's +- [ ] Remove custom PEC's +- [ ] Persist data +- [ ] Allow data backup/restore - [x] Multipul PEC boards - [ ] Convert to android app diff --git a/main.js b/main.js index 44d064f..51174d8 100644 --- a/main.js +++ b/main.js @@ -95,7 +95,8 @@ function setPec(pecTemplate=null, targetIndex=null) { targetPec.removeEventListener("click", invokeLibrary); targetPec.innerHTML = ""; targetPec.classList.remove("empty"); - targetPec.appendChild(pecTemplate.DOM); + var freshPec = new pec(pecTemplate.word, pecTemplate.image); + targetPec.appendChild(freshPec.DOM); } function repopBoards (current=0) { @@ -163,13 +164,75 @@ function repopGrid (board=null) { function useThisPec (e) { var sourceID = ((e.currentTarget.getAttribute("id")).split("lPec"))[1]; app.gui.library.root.classList.remove("focused"); - app.gui.library.body.childNodes.entries().forEach(p=>{ - p[1].getAttribute("id") == "lPec"+sourceID ? p[1].style.display = "none" : null; - }); - app.currentBoard.pecs[app.targetPecIndex] = app.library[sourceID]; + app.currentBoard.pecs[app.targetPecIndex] = app.library.splice(sourceID,1)[0]; + repopLibrary(); repopGrid(app.currentBoard); } +function createNewPec () { + var name = app.gui.newpec_name.value; + var image = app.gui.newpec_image.files[0]; + app.library.push(new pec(name, URL.createObjectURL(image))); + repopLibrary(); + app.gui.newpec.root.classList.remove("focused"); +} + +function updatePreview () { + var name = app.gui.newpec_name.value; + var image = app.gui.newpec_image.files[0]; + app.gui.newpec_preview.innerHTML = ""; + app.gui.newpec_preview.removeEventListener("click", createNewPec); + app.gui.newpec_status.innerText = "Create your new pec by naming it and providing an image."; + var correct = 0; + if (["image/png","image/jpeg","image/svg"].includes(image?.type)) { + var imageBox = document.createElement("img"); + imageBox.src = URL.createObjectURL(image); + imageBox.classList.add("pecImage"); + app.gui.newpec_preview.appendChild(imageBox); + correct++; + } + if ("" != name) { + var nameBox = document.createElement("div"); + nameBox.innerText = name; + nameBox.classList.add("pecName"); + app.gui.newpec_preview.appendChild(nameBox); + correct++; + } + if (1 < correct) { + app.gui.newpec_status.innerText = "Click/Tap the preview to save."; + app.gui.newpec_preview.addEventListener("click", createNewPec); + } +} + +function addNewPec (e) { + // clear out any previous values in form. + app.gui.newpec_form.reset(); + updatePreview(); + // make form visible + app.gui.newpec.root.classList.add("focused"); +} + +function repopLibrary () { + // clear library + app.gui.library.body.innerHTML = ""; + // recreate items from app.library + app.library.forEach((p,i)=>{ + var newPec = document.createElement("span"); + newPec.classList.add("libSlot"); + newPec.innerText = p.word; + newPec.id = "lPec"+i; + newPec.addEventListener("click", useThisPec); + app.gui.library.body.appendChild(newPec); + }); + // add new pec button at end of list + var newPec = document.createElement("span"); + newPec.classList.add("libSlot"); + newPec.innerText = " + "; + newPec.id = "lPec"+(app.library.length + 1); + newPec.addEventListener("click", addNewPec); + app.gui.library.body.appendChild(newPec); +} + // Initialize gui window.app = {}; @@ -196,6 +259,10 @@ app.gui.options = new auxillery_dialog("Options"); app.gui.options.body.classList.add("options_body"); app.gui.main.append(app.gui.options.root); app.gui.optionsButton.addEventListener("click", ()=>{ app.gui.options.root.classList.add("focused") }); +// New Pec popup +app.gui.newpec = new auxillery_dialog("Create New Pec"); +app.gui.newpec.body.classList.add("newpec_body"); +app.gui.main.append(app.gui.newpec.root); // pre-populate grid with emptys for (var x = 0; x < 16; x++) { var name = "pec"+x; @@ -216,15 +283,7 @@ repopGrid(app.currentBoard); // Populate Library import { library as library } from './library.js'; app.library = library; -// add more here -app.library.forEach((p,i)=>{ - var newPec = document.createElement("span"); - newPec.classList.add("libSlot"); - newPec.innerText = p.word; - newPec.id = "lPec"+i; - newPec.addEventListener("click", useThisPec); - app.gui.library.body.appendChild(newPec); -}); +repopLibrary(); // Populate Options app.options = {}; @@ -254,4 +313,15 @@ app.gui.options_feedbackTimeout.innerHTML = '