Differences

This shows you the differences between two versions of the page.

Link to this comparison view

Both sides previous revision Previous revision
Next revision		 Previous revision
yiler-interactivve-buttons-test [2023/01/29 19:22] – yiler.huangyiler-interactivve-buttons-test [2023/01/29 21:07] (current) – yiler.huang
Line 1: Line 1:
 +These are the buttons I made for the home page, the interaction only works on computers.
 +
 +Try hovwering your cursor around the buttons and see what happens.
 +
 ===== Some buttons here ===== ===== Some buttons here =====
  
Line 6: Line 10:
     <title>Interactive buttons test</title>     <title>Interactive buttons test</title>
     <style>     <style>
-    html{ 
-background-color:#262626;} 
  .buttons{  .buttons{
       width: auto;       width: auto;
Line 329: Line 331:
     }).opacity(0)     }).opacity(0)
 } }
 +
  
 let titles = { let titles = {
-    destressingTitle: destressingCanvas.text("Destressing Images").move(168, 325.5).font({+    destressingTitle: destressingCanvas.text("Destressing Images").move(168, 321.5).font({
         family: 'arial',         family: 'arial',
         size: 19.5         size: 19.5
     }),     }),
-    elderlyTitle: elderlyCanvas.text("Elderly Biography").move(188, 325.5).font({+    elderlyTitle: elderlyCanvas.text("Elderly Biography").move(188, 321.5).font({
         family: 'arial',         family: 'arial',
         size: 19.5         size: 19.5
     }),     }),
-    microTitle: microCanvas.text("Micro-controllers \nand Hydra").move(196.5, 307).font({+    microTitle: microCanvas.text("Micro-controllers \nand Hydra").move(196.5, 302).font({
         family: 'arial',         family: 'arial',
         size: 19.5,         size: 19.5,
         leading: '1em'         leading: '1em'
     }),     }),
-    simulationTitle: simulationCanvas.text("Elderly Simulation").move(184, 326).font({+    simulationTitle: simulationCanvas.text("Elderly Simulation").move(184, 322).font({
         size: 19.5,         size: 19.5,
         family: 'arial',         family: 'arial',
     }),     }),
-    hydraTitle: hydraCanvas.text("Educating the Public \nAbout Hydra").move(161, 307).font({+    hydraTitle: hydraCanvas.text("Educating the Public \nAbout Hydra").move(161, 302).font({
         family: 'arial',         family: 'arial',
         size: 19.5,         size: 19.5,
         leading: "1em"         leading: "1em"
     }),     }),
-    visualTitle: visualCanvas.text("Perceptions \nof Visual Cues").move(215, 307).font({+    visualTitle: visualCanvas.text("Perceptions \nof Visual Cues").move(215, 302).font({
         family: 'arial',         family: 'arial',
         size: 19.5,         size: 19.5,
         leading: "1em"         leading: "1em"
     }),     }),
-    studentsTitle: studentsCanvas.text("About our Students").move(173.5, 326).font({+    studentsTitle: studentsCanvas.text("About our Students").move(173.5, 322).font({
         family: 'arial',         family: 'arial',
         size: 19.5         size: 19.5
     }),     }),
-    impressionTitle: impressionCanvas.text("Image of the Elderly").move(168, 325).font({+    impressionTitle: impressionCanvas.text("Image of the Elderly").move(168, 321).font({
         family: 'arial',         family: 'arial',
         size: 19.5         size: 19.5
Line 440: Line 443:
 //last four numbers: title shift x, title shift y,  description shift y //last four numbers: title shift x, title shift y,  description shift y
 let destressingButtonObject = new Button("destressingButton", descriptions.destressingDescription, titles.destressingTitle, destressingSvgs, destressingSvgsObj, titleShifts.destressing.x, titleShifts.destressing.y, descriptionShifts.oneLine) let destressingButtonObject = new Button("destressingButton", descriptions.destressingDescription, titles.destressingTitle, destressingSvgs, destressingSvgsObj, titleShifts.destressing.x, titleShifts.destressing.y, descriptionShifts.oneLine)
-makeButton(destressingCanvas, destressingButtonObject)+makeButton(destressingCanvas, destressingButtonObject, "https://renickbell.net/ed/2022service/doku.php?id=destressing-images")
  
 let elderlyButtonObject = new Button("elderlyButton", descriptions.elderlyDescription, titles.elderlyTitle, elderlySvgs, elderlySvgsObj, titleShifts.elderly.x, titleShifts.elderly.y, descriptionShifts.oneLine) let elderlyButtonObject = new Button("elderlyButton", descriptions.elderlyDescription, titles.elderlyTitle, elderlySvgs, elderlySvgsObj, titleShifts.elderly.x, titleShifts.elderly.y, descriptionShifts.oneLine)
-makeButton(elderlyCanvas, elderlyButtonObject)+makeButton(elderlyCanvas, elderlyButtonObject, "https://renickbell.net/ed/2022service/doku.php?id=elderly-biography")
  
 let microButtonObject = new Button("microButton", descriptions.microDescription, titles.microTitle, microSvgs, microSvgsObj, titleShifts.micro.x, titleShifts.micro.y, descriptionShifts.twoLines) let microButtonObject = new Button("microButton", descriptions.microDescription, titles.microTitle, microSvgs, microSvgsObj, titleShifts.micro.x, titleShifts.micro.y, descriptionShifts.twoLines)
-makeButton(microCanvas, microButtonObject)+makeButton(microCanvas, microButtonObject, "https://renickbell.net/ed/2022service/doku.php?id=arduino")
  
 let hydraButtonObject = new Button("hydraButton", descriptions.hydraDescription, titles.hydraTitle, hydraSvgs, hydraSvgsObj, titleShifts.hydra.x, titleShifts.hydra.y, descriptionShifts.twoLines) let hydraButtonObject = new Button("hydraButton", descriptions.hydraDescription, titles.hydraTitle, hydraSvgs, hydraSvgsObj, titleShifts.hydra.x, titleShifts.hydra.y, descriptionShifts.twoLines)
-makeButton(hydraCanvas, hydraButtonObject)+makeButton(hydraCanvas, hydraButtonObject, "https://renickbell.net/ed/2022service/doku.php?id=social-innovation-center-sharing")
  
 let visualButtonObject = new Button("visualButton", descriptions.visualDescriptions, titles.visualTitle, visualSvgs, visualSvgsObj, titleShifts.visual.x, titleShifts.visual.y, descriptionShifts.twoLines) let visualButtonObject = new Button("visualButton", descriptions.visualDescriptions, titles.visualTitle, visualSvgs, visualSvgsObj, titleShifts.visual.x, titleShifts.visual.y, descriptionShifts.twoLines)
-makeButton(visualCanvas, visualButtonObject)+makeButton(visualCanvas, visualButtonObject, "https://renickbell.net/ed/2022service/doku.php?id=art-museum")
  
 let simulationButtonObject = new Button("simulationButton", descriptions.simulationDescription, titles.simulationTitle, simulationSvgs, simulationSvgsObj, titleShifts.simulation.x, titleShifts.simulation.y, descriptionShifts.oneLine) let simulationButtonObject = new Button("simulationButton", descriptions.simulationDescription, titles.simulationTitle, simulationSvgs, simulationSvgsObj, titleShifts.simulation.x, titleShifts.simulation.y, descriptionShifts.oneLine)
-makeButton(simulationCanvas, simulationButtonObject)+makeButton(simulationCanvas, simulationButtonObject, "https://renickbell.net/ed/2022service/doku.php?id=elderly-simulation-map")
  
 let studentsButtonObject = new Button("studentsButton", descriptions.studentsDescription, titles.studentsTitle, studentsSvgs, studentsSvgsObj, titleShifts.students.x, titleShifts.students.y, descriptionShifts.oneLine) let studentsButtonObject = new Button("studentsButton", descriptions.studentsDescription, titles.studentsTitle, studentsSvgs, studentsSvgsObj, titleShifts.students.x, titleShifts.students.y, descriptionShifts.oneLine)
-makeButton(studentsCanvas, studentsButtonObject)+makeButton(studentsCanvas, studentsButtonObject, "https://renickbell.net/ed/2022service/doku.php?id=about-students")
  
 let impressionButtonObject = new Button("impressionButton", descriptions.impressionDescription, titles.impressionTitle, impressionSvgs, impressionSvgsObj, titleShifts.impression.x, titleShifts.impression.y, descriptionShifts.oneLine) let impressionButtonObject = new Button("impressionButton", descriptions.impressionDescription, titles.impressionTitle, impressionSvgs, impressionSvgsObj, titleShifts.impression.x, titleShifts.impression.y, descriptionShifts.oneLine)
-makeButton(impressionCanvas, impressionButtonObject)+makeButton(impressionCanvas, impressionButtonObject, "https://renickbell.net/ed/2022service/doku.php?id=elderly-report")
  
  
Line 472: Line 475:
 } }
  
-function makeButton(svgCanvas, buttonObject) {+function makeButton(svgCanvas, buttonObject, url) {
     let titleRunner;     let titleRunner;
     let textBoxRunner;     let textBoxRunner;
Line 541: Line 544:
     });     });
     hitBox.on("click", function() {     hitBox.on("click", function() {
-        window.location.href = "http://stackoverflow.com";+        window.location.href = url;
     });     });
  
Line 551: Line 554:
 }; };
  
-function activateDestressingButton() { 
-    let titleRunner; 
-    let textBoxRunner; 
-    let backgroundRunner; 
-    let descriptionRunner; 
-    destressingGroup = destressingButton.group() 
-    let title = destressingButton.text("Destressing Images").move(destressingSvgsObj.textbox.x() + 1.8, destressingSvgsObj.textbox.y() - 5.7).font({ 
-        family: 'arial', 
-        size: 19.5 
-    }) 
-    let description = destressingButton.text("Recognizing that everyone is stressed \nout, students designed and programmed \ninteractive digital images to reduce \nstress. To accomplish this, they used \nseveral JavaScript programming \nlibraries and physical computing.").move(6, 268).font({ 
-        family: 'arial', 
-        size: 20 
-    }).opacity(0); 
-    //make the white box invisible 
-    destressingSvgsObj.background.opacity(0); 
-    //add them into a group so it is easier to move them together 
-    destressingSvgs.forEach(e => { 
-        destressingGroup.add(e) 
-        destressingGroup.add(title) 
-        destressingGroup.add(description) 
-    }); 
-    destressingGroup.size(buttonSize, buttonSize) 
-    destressingGroup.move(0, 0) 
-    destressingGroup.id = "destressingGroup" 
-    destressingGroup.node.id = "destressing" 
-    console.log(destressingGroup.node) 
-    let hitBox = destressingButton.rect(destressingGroup.width(), destressingGroup.height()).move(destressingGroup.x(), destressingGroup.y()).fill("#ffffff").opacity(0); 
-    destressingGroup.add(hitBox) 
-    let overAnimaton = true; 
-    let outAnimation = false; 
  
-    //title position 
-    let titleP = { 
-        x: title.x(), 
-        y: title.y() 
-    }; 
-    //description posisiton 
-    let descriptionP = { 
-        x: description.x(), 
-        y: description.y() 
-    }; 
-    hitBox.on("mouseover", function() { 
-        changeCursor("pointer") 
-        if (overAnimaton) { 
-            //console.log("over") 
-            backgroundRunner = destressingSvgsObj.background.animate(animationDuration).opacity(0.8) 
-            textBoxRunner = destressingSvgsObj.textbox.animate(animationDuration).opacity(0) 
-            titleRunner = title.animate(animationDuration).dmove(-39.5, -80).font({ 
-                size: 10 
-            }) 
-            descriptionRunner = description.animate(animationDuration).opacity(1).dmove(0, -45); 
-            outAnimation = true; 
-        } 
-        //animationTimer = setTimeout(() => {}, 0) 
-    }) 
-    hitBox.on("mouseout", function() { 
-        changeCursor("default") 
-        if (outAnimation) { 
-            //console.log("out") 
-            backgroundRunner = destressingSvgsObj.background.animate(animationDuration).opacity(0) 
-            textBoxRunner = destressingSvgsObj.textbox.animate(animationDuration).opacity(1) 
-            titleRunner = title.animate(animationDuration).move(titleP.x, titleP.y).font({ 
-                size: 5 
-            }) 
-            descriptionRunner = description.animate(animationDuration).opacity(0).move(descriptionP.x, descriptionP.y) 
-            overAnimaton = false 
-            outAnimation = false 
-            let setOverAnimationToTrue = setTimeout(function() { 
-                overAnimaton = true 
-            }, 250) 
-        } 
-        //clearTimeout(animationTimer) 
-    }); 
-    hitBox.on("click", function() { 
-        window.location.href = "http://stackoverflow.com"; 
-    }); 
  
-    //readFile function by: https://javascript.info/file 
- 
-    // Code based on: Kirill Shumilov  https://jsfiddle.net/brusher/tgddv9pw/ 
- 
-    // Everything should be ungrouped. And on the same layer. Object to path. 
-} 
- 
-//------------------------------------------------------------------------------ 
-// 
- 
-//activateDestressingButton() 
  
 let buttonsCollection = document.getElementsByClassName("buttons")  let buttonsCollection = document.getElementsByClassName("buttons") 
Line 647: Line 563:
 let br = document.createElement("br") let br = document.createElement("br")
  
-buttonsArray.forEach(i => document.getElementById("some_buttons_here").appendChild(i))+let whereButtonsGo = document.getElementById("some_buttons_here") 
 + 
 +whereButtonsGo.appendChild(br) 
 + 
 +buttonsArray.forEach(i => whereButtonsGo.appendChild(i))
  
  
  • yiler-interactivve-buttons-test.1675048943.txt.gz
  • Last modified: 2023/01/29 19:22
  • by yiler.huang