Functioning accelerometer button added to simulator

lucasbebell · lucasbebell · commit fd076c6789ee · 2018-05-03T17:08:09.000+01:00
diff --git a/editor.html b/editor.html
@@ -68,7 +68,7 @@
         <link rel="icon" href="static/img/favicon.ico">
     </head>
     <body>
-        <iframe id="sim-iframe" src="about:blank" width="320px" height="257px" frameborder="0" style="position: absolute; bottom: 20px; right: 20px; z-index: 10;"></iframe>
+        <iframe id="sim-iframe" src="about:blank" width="810px" height="310px" frameborder="0" scrolling="no" style="position: absolute; bottom: 20px; right: 20px; z-index: 10;"></iframe>
         <script type="application/javascript">
         <!-- VERSION INFORMATION -->
         VERSION = "0.1.0";
@@ -369,6 +369,7 @@ <h2><i class="fa fa-unlock-alt"></i> <strong>{{ title }}</strong></h2>
     },
 });
         </script>
+
 <xml id="blockly-toolbox" style="display: none">
   <category name="Accelerometer" colour="0">
     <block type="microbit_accelerometer_get_x"></block>
diff --git a/python-main.js b/python-main.js
@@ -763,4 +763,3 @@ function web_editor(config) {
     checkVersion(qs);
     setupButtons();
 };
-
diff --git a/simulator.html b/simulator.html
@@ -11,9 +11,8 @@
     <link rel="stylesheet" href="lib/cm/blackboard.css">
     <link rel="stylesheet" href="styles.css">
     <link href='https://fonts.googleapis.com/css?family=Quicksand' rel='stylesheet' type='text/css'>
-    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
+    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
     <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
-
     <!-- See http://blog.withcode.uk/about/license-and-acknowledgements/ for libraries used-->
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
     <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
@@ -26,22 +25,56 @@
     <script src="lib/skulpt/skulpt.min.js"></script>
     <script src="lib/skulpt/skulpt-stdlib.js"></script>
     <script src="lib/jq/jquery.ui.touch-punch.min.js"></script>
+
+    <script type="text/javascript">
+    $(function() {
+      $("a.accelerometer-toggle").click(function(e) {
+        $('.accelerometer-buttons').toggle();
+        e.stopPropagation();
+      });
+    });
+    $(function(){
+      $('accelerometer-buttons').hide();
+    })
+    </script>
 </head>
 
 <body>
+    <div class="accelerometer-buttons">
+        <span class="mb_help_link mb_gesture">down</span>
+        <span class="mb_help_link mb_gesture">left</span>
+        <span class="mb_help_link mb_gesture">right</span>
+        <span class="mb_help_link mb_gesture">face up</span>
+        <span class="mb_help_link mb_gesture">face down</span>
+        <span class="mb_help_link mb_gesture">freefall</span>
+        <span class="mb_help_link mb_gesture">3g</span>
+        <span class="mb_help_link mb_gesture">6g</span>
+        <span class="mb_help_link mb_gesture">8g</span>
+        <span class="mb_help_link mb_gesture">shake</span>
+    </div>
 
+    <div class="buttons">
+      <a href="#" class="accelerometer-toggle">
+        <div class="status-icon">
+          <i class="fa fa-tachometer" title="accelerometer"></i>
+        </div>
+      </a>
 
+      <a href="#" class="thermometer-toggle">
+        <div class="status-icon">
+          <i class="fa fa-thermometer" title="thermometer"></i>
+        </div>
+      </a>
+    </div>
 
     <div id="output"></div>
 
     <script>
         var toolsVisible = false;
-		// load python IDE
         $(function() {
             PythonIDE.init();
             PythonIDE.runCode("normal");
         });
     </script>
-
 </body>
 </html>
diff --git a/styles.css b/styles.css
@@ -16,14 +16,13 @@ html {
 	border-radius: 10px;
 }
 
-
 .holder {
 	position:relative;
 	width:100%;
 	height: 10px;
 }
 
-#editor { 
+#editor {
 	position: absolute;
 	top: 0;
 	right: 0;
@@ -46,7 +45,7 @@ html {
 }
 
 #footer:hover {
-	background-color: rgba(0,255,0,0.5); 
+	background-color: rgba(0,255,0,0.5);
 }
 
 .toolButton {
@@ -84,13 +83,14 @@ html {
 	background-color: rgba(200,200,200,0.5);
 	text-align: center;
 	z-index: 500;
-	
 	font-size: 2em;
 	padding: 3px;
 }
+
 #recover{
-width: 80%;	
+width: 80%;
 }
+
 .recover_date {
 	background-color: #000;
 	margin: 10px;
@@ -170,7 +170,6 @@ button {
 	padding: 10px;
 	border-radius: 10px;
 	background-color: rgba(0,0,200,0.5);
-	
 }
 
 .hiddenButtonPanel {
@@ -225,14 +224,16 @@ button {
 #watch tr:hover {
 	font-size: 2em;
 }
+
 #watch td:hover {
 	background-color: #FF0;
 }
+
 a.nounderline{
   color:inherit;
   text-decoration: none;
  }
- 
+
  a{
 	 color: #000;
 	 background-color: #FFF;
@@ -241,44 +242,121 @@ a.nounderline{
  pre{
 	 white-space: pre-wrap;
  }
- 
+
  #file_tabs {
 	 position:absolute;
 	 top: -20px;
-	 
  }
- 
+
  .file_tab {
 	 background-color: #E8E8E8;
 	 border-radius: 10px 10px 0px 0px;
 	 padding: 10px;
 	 height: 20px;
 	 margin: 2px;
  }
- 
+
  .file_tab:hover {
 	 background-color: #FF0;
  }
- 
+
  .file_tab_selected {
 	 font-weight: bold;
 	 background-color: #FF9;
  }
+
  .slider {
 	 margin: 20px 50px 20px 50px;
  }
- 
+
  .btn_file_settings{
 	 width:20px;
 	 height:20px;
 	 position:relative;
 	 margin: -25px 10px -5px 0px;
 	 transition: all 1s;
  }
+
  .btn_file_settings:hover {
-	transform: rotate(180deg); 
+	 transform: rotate(180deg);
  }
- 
- .debug_expand {
-	 height:1em;
- }
+
+.buttons a {
+  width: 54px;
+	height:54px;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  color: #336699;
+  text-decoration: none;
+  background-image: url('/static/img/triangle.svg');
+  background-size: 100%;
+  background-repeat: no-repeat;
+  text-align: center;
+  padding: 0px;
+	margin-left: 0px;
+	border-color: #000000;
+	border-style: solid;
+	border-width: thin;
+}
+
+.status-icon {
+	 width: 2rem;
+	 height: 2rem;
+	 border: 6px solid #FFCC33;
+	 border-radius: 50%;
+	 margin: .4rem;
+	 text-align: center;
+	 font-size: 1.3rem;
+	 line-height: 2.1rem;
+	 padding: .1em;
+	 font-family: "Segoe UI Emoji", "Segoe UI Symbol", "Symbola", sans-serif;
+	 color: #336699;
+	 background: #FFFFFF;
+}
+
+#hidden {
+	width:300px;
+	height:100px;
+	border:solid 2px #ddd;
+}
+
+.accelerometer-buttons {
+	display: none;
+}
+
+.buttons {
+	position: absolute;
+	bottom: 10px;
+	right: 320px;
+}
+
+div.accelerometer-buttons{
+	text-transform: capitalize;
+	width: 275px;
+	height:100px;
+	color: #336699;
+	text-decoration: none;
+	background-size: 100%;
+	background-repeat: no-repeat;
+	text-align: center;
+	border-color: #000000;
+	border-style: solid;
+	border-width: thin;
+	position:absolute;
+	right: 400px;
+	bottom: 100px;
+}
+
+#microbit#microbit {
+		position:absolute;
+		right: 10px;
+		bottom: 10px;
+}
+
+#sim-iframe {
+	overflow: hidden;
+}
