Differences

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

--- yiler-interactivve-buttons-test [2023/01/29 20:28] – yiler.huang
+++ yiler-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 =====
@@ Line 6: / Line 10: @@
     <title>Interactive buttons test</title>
     <style>
-    html{
-background-color:#262626;}
  .buttons{
       width: auto;
@@ Line 296: / Line 298: @@
 let descriptions = {
-    destressingDescription: destressingCanvas.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(19, 272).font({
+    destressingDescription: destressingCanvas.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(19, 268).font({
         family: 'arial',
         size: 20
     }).opacity(0),
-    elderlyDescription: elderlyCanvas.text("Another service that we are trying \nto provide this semester is a \nbiographical introduction of our \npartners at the Taipei Datong Elderly \nDaycare Center. These individuals \nwelcomed us and graciously shared \nstories from their lives, teaching us both \nabout what society was like in the \npast and also about some details of their \ncurrent activities and daily pursuits.").move(19, 272).font({
+    elderlyDescription: elderlyCanvas.text("Another service that we are trying \nto provide this semester is a \nbiographical introduction of our \npartners at the Taipei Datong Elderly \nDaycare Center. These individuals \nwelcomed us and graciously shared \nstories from their lives, teaching us both \nabout what society was like in the \npast and also about some details of their \ncurrent activities and daily pursuits.").move(19, 268).font({
         family: 'arial',
         size: 20
     }).opacity(0),
-    microDescription: microCanvas.text("We wanted to learn how to add unique \nphysical control to our stress-relieving \nimages. To accomplish this, we studied \nhow to build and program circuits which \ninvolve microcontrollers, particularly the \nArduino Uno microcontroller.").move(20, 272).font({
+    microDescription: microCanvas.text("We wanted to learn how to add unique \nphysical control to our stress-relieving \nimages. To accomplish this, we studied \nhow to build and program circuits which \ninvolve microcontrollers, particularly the \nArduino Uno microcontroller.").move(20, 268).font({
         family: 'arial',
         size: 20
     }).opacity(0),
-    simulationDescription: simulationCanvas.text("A super big thanks to all our friends at \nthe Center for Innovation Taipei who \ntook valuable time from their busy \nworking schedules to help us out with \nour crazy simulations. Not only were \nthey required to wear our elderly \nsimulation suit, they had to undertake a \nseries of difficult tasks.").move(19, 272).font({
+    simulationDescription: simulationCanvas.text("A super big thanks to all our friends at \nthe Center for Innovation Taipei who \ntook valuable time from their busy \nworking schedules to help us out with \nour crazy simulations. Not only were \nthey required to wear our elderly \nsimulation suit, they had to undertake a \nseries of difficult tasks.").move(19, 268).font({
         family: 'arial',
         size: 20
     }).opacity(0),
-    hydraDescription: hydraCanvas.text("Hydra is an image processing \nsoftware that we utilized this semester to \ncreate some interesting visual effects, \nlater utilizing it in the design of our \nde-stressing images for our elderly \nfriends.").move(19, 272).font({
+    hydraDescription: hydraCanvas.text("Hydra is an image processing \nsoftware that we utilized this semester to \ncreate some interesting visual effects, \nlater utilizing it in the design of our \nde-stressing images for our elderly \nfriends.").move(19, 268).font({
         family: 'arial',
         size: 20
     }).opacity(0),
-    visualDescriptions: visualCanvas.text("One of the services the students \ndesigned this semester was visual art \nthat could help with the alleviation of \nstress. An early step in this learning \nprocess involved the students \nexploring their own reactions to \ncertain visual stimulus, with input \ncoming from work from \nprofessional artists in the art field.").move(19, 272).font({
+    visualDescriptions: visualCanvas.text("One of the services the students \ndesigned this semester was visual art \nthat could help with the alleviation of \nstress. An early step in this learning \nprocess involved the students \nexploring their own reactions to \ncertain visual stimulus, with input \ncoming from work from \nprofessional artists in the art field.").move(19, 268).font({
         family: 'arial',
         size: 20,
     }).opacity(0),
-    studentsDescription: studentsCanvas.text("This education program currently \ninvolves a small group of students. Each \nis unique and talented in their own way, \nwith different strengths and \ncontributions to our team.").move(19, 272).font({
+    studentsDescription: studentsCanvas.text("This education program currently \ninvolves a small group of students. Each \nis unique and talented in their own way, \nwith different strengths and \ncontributions to our team.").move(19, 268).font({
         family: 'arial',
         size: 20
     }).opacity(0),
-    impressionDescription: impressionCanvas.text("Among the main topics of this \nsemester's work was that of aging \nsociety and its elderly members. If we \nare to attempt to devise ideas to \nfacilitate an easier life experience for \nthese treasured members of our \ncommunity, we will need to start by \nconsidering their current role in the \nsocial group and how others perceive \nthem.").move(19, 272).font({
+    impressionDescription: impressionCanvas.text("Among the main topics of this \nsemester's work was that of aging \nsociety and its elderly members. If we \nare to attempt to devise ideas to \nfacilitate an easier life experience for \nthese treasured members of our \ncommunity, we will need to start by \nconsidering their current role in the \nsocial group and how others perceive \nthem.").move(19, 268).font({
         family: 'arial',
         size: 20
@@ Line 332: / Line 334: @@
 let titles = {
-    destressingTitle: destressingCanvas.text("Destressing Images").move(168, 329.5).font({
+    destressingTitle: destressingCanvas.text("Destressing Images").move(168, 321.5).font({
         family: 'arial',
         size: 19.5
     }),
-    elderlyTitle: elderlyCanvas.text("Elderly Biography").move(188, 329.5).font({
+    elderlyTitle: elderlyCanvas.text("Elderly Biography").move(188, 321.5).font({
         family: 'arial',
         size: 19.5
     }),
-    microTitle: microCanvas.text("Micro-controllers \nand Hydra").move(196.5, 311).font({
+    microTitle: microCanvas.text("Micro-controllers \nand Hydra").move(196.5, 302).font({
         family: 'arial',
         size: 19.5,
         leading: '1em'
     }),
-    simulationTitle: simulationCanvas.text("Elderly Simulation").move(184, 330).font({
+    simulationTitle: simulationCanvas.text("Elderly Simulation").move(184, 322).font({
         size: 19.5,
         family: 'arial',
     }),
-    hydraTitle: hydraCanvas.text("Educating the Public \nAbout Hydra").move(161, 311).font({
+    hydraTitle: hydraCanvas.text("Educating the Public \nAbout Hydra").move(161, 302).font({
         family: 'arial',
         size: 19.5,
         leading: "1em"
     }),
-    visualTitle: visualCanvas.text("Perceptions \nof Visual Cues").move(215, 311).font({
+    visualTitle: visualCanvas.text("Perceptions \nof Visual Cues").move(215, 302).font({
         family: 'arial',
         size: 19.5,
         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',
         size: 19.5
     }),
-    impressionTitle: impressionCanvas.text("Image of the Elderly").move(168, 329).font({
+    impressionTitle: impressionCanvas.text("Image of the Elderly").move(168, 321).font({
         family: 'arial',
         size: 19.5
@@ Line 441: / Line 443: @@
 //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)
-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)
-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)
-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)
-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)
-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)
-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)
-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)
-makeButton(impressionCanvas, impressionButtonObject)
+makeButton(impressionCanvas, impressionButtonObject, "https://renickbell.net/ed/2022service/doku.php?id=elderly-report")
@@ Line 473: / Line 475: @@
 }
-function makeButton(svgCanvas, buttonObject) {
+function makeButton(svgCanvas, buttonObject, url) {
     let titleRunner;
     let textBoxRunner;
@@ Line 542: / Line 544: @@
     });
     hitBox.on("click", function() {
-        window.location.href = "http://stackoverflow.com";
+        window.location.href = url;
     });
@@ Line 552: / 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")
@@ Line 648: / Line 563: @@
 let br = document.createElement("br")
-document.getElementById("some_buttons_here").appendChild(br)
+let whereButtonsGo = document.getElementById("some_buttons_here")
+whereButtonsGo.appendChild(br)
-buttonsArray.forEach(i => document.getElementById("some_buttons_here").appendChild(i))
+buttonsArray.forEach(i => whereButtonsGo.appendChild(i))