button positioning and effects

5 years ago · 9a033c1431
3 changed files with 53 additions and 9 deletions
--- a/voicegardens/static/styles.css
+++ b/voicegardens/static/styles.css
@ -10,6 +10,17 @@ canvas {
  display: block;
 }

-img {
-  width: 2%;
+img.button {
+  width: 4%;
+}
+
+.about {
+  width: 3% !important;
+  position:fixed;
+  top:260px;
+  left:20px;
+}
+
+.about:hover {
+  top:262px;
 }
--- a/voicegardens/static/voicegardens.js
+++ b/voicegardens/static/voicegardens.js
@ -29,8 +29,8 @@ var newSoundJustRecorded = false;
 // All user clickable buttons
 var recordButton;
 var stopButton;
-var chorusButton;
 var leafButton;
+var aboutButton;

 // Time-out used to stop a recording in case the user forgets to stop it
 // themselves. It also gurantees to turn off the mic in case of some unknown
@ -110,6 +110,31 @@ function sendToArchive() {
  });
 }

+function record_enlarge() {
+  recordButton.position(22, 22);
+}
+
+function record_minimise() {
+  recordButton.position(20, 20);
+}
+
+function stop_enlarge() {
+  stopButton.position(22, 102);
+}
+
+function stop_minimise() {
+  stopButton.position(20, 100);
+}
+
+function leaf_enlarge() {
+  leafButton.position(22, 182);
+}
+
+function leaf_minimise() {
+  leafButton.position(20, 180);
+}
+
+
 function setupRecording() {
  /**
   * Setup logic for sound recording.
@ -123,18 +148,25 @@ function setupRecording() {
  recording = new p5.SoundFile();

  recordButton = createImg("../static/images/RECORD-COLOR.png");
-  recordButton.position(10, 5);
+  recordButton.position(20, 20);
  recordButton.mousePressed(record);
+  recordButton.class("button");
+  recordButton.mouseOver(record_enlarge);
+  recordButton.mouseOut(record_minimise);

  stopButton = createImg("../static/images/STOP-BW.png");
-  stopButton.position(10, 40);
+  stopButton.position(20, 100);
  stopButton.mousePressed(stop);
-
-  chorusButton = createImg("../static/images/CHORUS-BW.png");
-  chorusButton.position(10, 110);
+  stopButton.class("button");
+  stopButton.mouseOver(stop_enlarge);
+  stopButton.mouseOut(stop_minimise);

  leafButton = createImg("../static/images/GARDEN-BW.png");
-  leafButton.position(10, 140);
+  leafButton.position(20, 180);
+  leafButton.class("button");
+  leafButton.mouseOver(leaf_enlarge);
+  leafButton.mouseOut(leaf_minimise);
+
 }

 class GeneratedShape {
--- a/voicegardens/templates/index.html
+++ b/voicegardens/templates/index.html
@ -12,6 +12,7 @@
    />
  </head>
  <body>
+    <a href="../templates/about.html"><img src="../static/images/ABOUT-BW.png" class="button about"></a>
    <script src="/static/p5js/p5.min.js" charset="utf-8"></script>
    <script src="/static/p5js/p5.sound.min.js" charset="utf-8"></script>
    <script src="/static/p5js/p5.collide2d.min.js" charset="utf-8"></script>