diff --git a/voicegardens/static/styles.css b/voicegardens/static/styles.css
index 5a77552..7f1332f 100644
--- 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;
}
diff --git a/voicegardens/static/voicegardens.js b/voicegardens/static/voicegardens.js
index d24d077..12a918c 100644
--- 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 {
diff --git a/voicegardens/templates/index.html b/voicegardens/templates/index.html
index 3f4b6f7..8aeda3c 100644
--- a/voicegardens/templates/index.html
+++ b/voicegardens/templates/index.html
@@ -12,6 +12,7 @@
/>
+ 