varia
/
voicegardens
14
0
Fork 0
Code Issues Releases Activity
Browse Source

button positioning and effects

main
Cristina Cochior 5 years ago
parent
6a2a1e7789
commit
9a033c1431
3 changed files with 53 additions and 9 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 15
      voicegardens/static/styles.css
  2. 46
      voicegardens/static/voicegardens.js
  3. 1
      voicegardens/templates/index.html

15
voicegardens/static/styles.css
View File

@ -10,6 +10,17 @@ canvas {
display: block; display: block;
} }
img { img.button {
width: 2%; width: 4%;
}
.about {
width: 3% !important;
position:fixed;
top:260px;
left:20px;
}
.about:hover {
top:262px;
} }

46
voicegardens/static/voicegardens.js
View File

@ -29,8 +29,8 @@ var newSoundJustRecorded = false;
// All user clickable buttons // All user clickable buttons
var recordButton; var recordButton;
var stopButton; var stopButton;
var chorusButton;
var leafButton; var leafButton;
var aboutButton;
// Time-out used to stop a recording in case the user forgets to stop it // 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 // 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() { function setupRecording() {
/** /**
* Setup logic for sound recording. * Setup logic for sound recording.
@ -123,18 +148,25 @@ function setupRecording() {
recording = new p5.SoundFile(); recording = new p5.SoundFile();
recordButton = createImg("../static/images/RECORD-COLOR.png"); recordButton = createImg("../static/images/RECORD-COLOR.png");
recordButton.position(10, 5); recordButton.position(20, 20);
recordButton.mousePressed(record); recordButton.mousePressed(record);
recordButton.class("button");
recordButton.mouseOver(record_enlarge);
recordButton.mouseOut(record_minimise);
stopButton = createImg("../static/images/STOP-BW.png"); stopButton = createImg("../static/images/STOP-BW.png");
stopButton.position(10, 40); stopButton.position(20, 100);
stopButton.mousePressed(stop); stopButton.mousePressed(stop);
stopButton.class("button");
chorusButton = createImg("../static/images/CHORUS-BW.png"); stopButton.mouseOver(stop_enlarge);
chorusButton.position(10, 110); stopButton.mouseOut(stop_minimise);
leafButton = createImg("../static/images/GARDEN-BW.png"); 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 { class GeneratedShape {

1
voicegardens/templates/index.html
View File

@ -12,6 +12,7 @@
/> />
</head> </head>
<body> <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.min.js" charset="utf-8"></script>
<script src="/static/p5js/p5.sound.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> <script src="/static/p5js/p5.collide2d.min.js" charset="utf-8"></script>

Write Preview
Loading…
Cancel
Save