Bug fixes and updates to Arpeggios experiment

Fix bug related to iOS tapper, allow user to manually adjust metronome tempo, change font size and weight, better support for larger screens
mshook · Feb 22, 2018 · 8297462 · 8297462
1 parent 2d7bb28
commit 8297462
Show file tree

Hide file tree

Showing 6 changed files with 39 additions and 25 deletions.
diff --git a/arpeggios/app/Main.js b/arpeggios/app/Main.js
@@ -18,27 +18,23 @@ require(["domready", "main.scss", "StartAudioContext", "Tone/core/Tone"],
 function(domReady, mainStyle, StartAudioContext, Tone){
 
 	function testiOS(){
-		//send the ready message to the parent
-		var isIOS = /iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream;
+    // send the ready message to the parent
+    var isIOS = /iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream;
+    var isAndroid = /Android/.test(navigator.userAgent) && !window.MSStream;
 
-		//full screen button on iOS
-		if (isIOS){
-			//make a full screen element and put it in front
-			var iOSTapper = document.createElement("div");
-			iOSTapper.id = "iOSTap";
-			iOSTapper.addEventListener("touchstart", function(e){
-				e.preventDefault();
-			});
-			document.body.appendChild(iOSTapper);
-			StartAudioContext.setContext(Tone.context);
-			StartAudioContext.on(iOSTapper);
-			StartAudioContext.onStarted(function(){
-				iOSTapper.remove();
-				window.parent.postMessage('ready','*');
-			});
-		} else {
-			window.parent.postMessage('ready','*');
-		}
+    // full screen button on iOS
+    if (isIOS || isAndroid) {
+      // make a full screen element and put it in front
+      var iOSTapper = document.createElement("div");
+      iOSTapper.id = "iOSTap";
+      document.body.appendChild(iOSTapper);
+      new StartAudioContext(Tone.context, iOSTapper).then(function() {
+        iOSTapper.remove();
+        window.parent.postMessage('ready','*');
+      });
+    } else {
+      window.parent.postMessage('ready','*');
+    }
 	}
 
 	domReady(function(){

diff --git a/arpeggios/app/sound/Metronome.js b/arpeggios/app/sound/Metronome.js
@@ -39,10 +39,9 @@ define(["jquery", "metronome.scss", "jquery-knob", "Tone/core/Transport", "Tone/
 	}).appendTo(metronomeOverlay);
 
 	var metroWheel = $("<input>", {
-		"type" : "range",
 		"value" : 120,
-		"min" : 80,
-		"max" : 200,
+		"data-min" : 60,
+		"data-max" : 200
 	}).appendTo(metroWheelContainer).data("width", "80%");
 
 	var checkBox = $("<div>", {

diff --git a/arpeggios/index.html b/arpeggios/index.html
@@ -6,7 +6,7 @@
 	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
 
 	<meta name="description" content="Arpeggio">
-	<link href='https://fonts.googleapis.com/css?family=Quicksand' rel='stylesheet' type='text/css'>
+	<link href="https://fonts.googleapis.com/css?family=Quicksand:400,700" rel="stylesheet">
 	<script type="text/javascript" src="./build/Main.js"></script>
 
 </head>

diff --git a/arpeggios/style/chord.scss b/arpeggios/style/chord.scss
@@ -48,6 +48,7 @@ $Margin : 10px;
 			pointer-events: none;
 			color: white;
 			font-family: "Quicksand";
+			font-weight: 700;
 			position: absolute;
 			text-align: center;
 			transform: translate(-50%, -50%);
@@ -68,6 +69,10 @@ $Margin : 10px;
 			@include SmallWidth {
 				font-size: 18px;
 			}
+
+			@include LargeWidth {
+				font-size: 2.5em;
+			}
 		}
 
 		#Letters .Minor {
@@ -77,6 +82,10 @@ $Margin : 10px;
 			@include SmallWidth {
 				font-size: 16px;
 			}
+
+			@include LargeWidth {
+				font-size: 2em;
+			}
 		}
 	}
 

diff --git a/arpeggios/style/common.scss b/arpeggios/style/common.scss
@@ -19,6 +19,8 @@ $SmallButtonMargin : 10px;
 $SmallScreen : 360px;
 $SmallScreenHeight : 500px;
 
+$LargeScreen : 1440px;
+
 
 @mixin SmallHeight {
 	@media (max-height: #{$SmallScreenHeight}) {
@@ -30,4 +32,10 @@ $SmallScreenHeight : 500px;
 	@media (max-width: #{$SmallScreen}) {
 		@content;
 	}
+}
+
+@mixin LargeWidth {
+	@media (min-width: #{$LargeScreen}) {
+		@content;
+	}
 }
diff --git a/arpeggios/style/metronome.scss b/arpeggios/style/metronome.scss
@@ -53,7 +53,9 @@
 		top: 50%;
 
 		input {
-			display: none;
+			bottom: 30px;
+			font-size: 18px!important;
+			height: auto !important;
 		}
 
 		@include SmallWidth {