diff --git a/editor.html b/editor.html index 0467a936..c6839b1d 100644 --- a/editor.html +++ b/editor.html @@ -1,4 +1,4 @@ - + + // VERSION INFORMATION VERSION = "0.1.0"; + - + + - -
- down - left - right - face up - face down - freefall - 3g - 6g - 8g - shake -
-
- -
- + +
+
+ down + left + right + face up + face down + freefall + 3g + 6g + 8g + shake
- - -
- +
+
+

Temperature: Thermometre Value°C

- + +
+
+ + +
+
+
+
+ + + + +
+
diff --git a/static/css/simulator-ui.css b/static/css/simulator-ui.css new file mode 100644 index 00000000..8af4d594 --- /dev/null +++ b/static/css/simulator-ui.css @@ -0,0 +1,142 @@ +#sim-wrap { + height: 655px; + width: 400px; + background: linear-gradient(90deg, rgba(180, 180, 180, 0) 0%, rgba(180, 180, 180, 0.6) 5%, rgba(180, 180, 180, 0.6) 95%, rgba(180, 180, 180, 0) 100%); + font-family: Courier New, Courier, monospace; +} + +#sim-parameters +{ + height: 350px; + width: 100%; + margin: 0 0 10px; + position: relative; +} + +#sim-parameters > * { display: none; } + +#sim-btns { + position: fixed; + bottom: 145px; left: 10px; + width: 60px; + height: 0; + opacity: 0; +} + +#sim-btns a { + height: 54px; width: 54px; + opacity: 0; + + 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; + position: relative; + z-index: 20; + + border-radius: 5px; + margin: 3px 0; +} + +#sim-btns a .sim-tip { + visibility: hidden; + max-width: 200px; + color: #FFFFFF; + background-color: rgb(34, 11, 165); + text-align: center; + padding: 2px 8px; + border-radius: 4px; + font-family: Arial, Helvetica, sans-serif; + + position: absolute; + top: 0%; left: 110%; + z-index: 99; +} + +#sim-btns a:hover .sim-tip { + visibility: visible; + z-index: 99; +} + +#sim-btns a .sim-tip::after { + content: " "; + position: absolute; + top: 50%; + right: 100%; + margin-top: -5px; + border-width: 5px; + border-style: solid; + border-color: transparent rgb(34, 11, 165) transparent transparent; +} + +#sim-btns-toggle { + height: 40px; width: 40px; + border-radius: 20px; + color: white; + text-align: center; + padding: 10px; + position: fixed; + bottom: 100px; left: 20px; + cursor: pointer; + background-color: rgb(68, 202, 226); + box-sizing: border-box; +} + +.hidden { display: none; } + +/* Thermometer */ +#thermometer +{ + min-height: 100%; min-width: 100%; +} + +#thermometer .value +{ + font-size: 20px; + position: absolute; + left: 10px; + bottom: 50px; +} + +#thermometer .value span +{ + font-weight: 600; + color: rgba(180, 0, 0, 1); +} +/* END Thermometer */ + +/* Pins */ +#pins { + min-height: 100%; min-width: 100%; +} + +label[for="mb_pin_num"] { + margin: 0 4px; + padding: 4px 0; +} + +#pins span +{ + border-radius: 2px; + border-color: blue; + border-top: none; + border-left: none; + border-right: none; +} + +/* END Pins */ + +/* Accelerometer */ +#accelerometer { + min-height: 100%; min-width: 100%; +} diff --git a/static/css/style.css b/static/css/style.css index 5cd5cd83..8ca52d9c 100644 --- a/static/css/style.css +++ b/static/css/style.css @@ -8,6 +8,16 @@ font-size: 22px; } +#sim-iframe { + height: 671px; + width: 380px; + position: absolute; + bottom: 4px; + right: 10px; + z-index: 10; + overflow: visible; +} + #blockly { display: none; min-width: 570px; @@ -275,7 +285,7 @@ body, input { -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; - color: #336699; + color: #3758CE; text-decoration: none; background-image: url("../img/triangle.svg"); background-size: 100%; @@ -307,7 +317,7 @@ body, input { line-height: 4.4rem; padding: .1em; font-family: "Segoe UI Emoji", "Segoe UI Symbol", "Symbola", sans-serif; - color: #336699; + color: #3758CE; background: #FFFFFF; } diff --git a/static/img/triangle.svg b/static/img/triangle.svg index 6a5c45ef..17d5200b 100644 --- a/static/img/triangle.svg +++ b/static/img/triangle.svg @@ -62,7 +62,7 @@ diff --git a/static/js/simulator-ui.js b/static/js/simulator-ui.js new file mode 100644 index 00000000..2319918c --- /dev/null +++ b/static/js/simulator-ui.js @@ -0,0 +1,89 @@ +// JavaScript source code +$(document).ready(function () { + $('#sim-parameters').children().hide(); + + $("#accel-toggle").on('click', function(e) { + $('#sim-parameters').children().hide(); + $('.mb_pin').css('opacity', '0'); + + $('#accelerometer').fadeIn(); + $('#accelerometer').children().fadeIn(); + e.stopPropagation(); + console.log('accel'); + }); + + $('#thermo-toggle').on('click', function(e) { + $('#sim-parameters').children().hide(); + $('.mb_pin').css('opacity', '0'); + + $('#thermometer').fadeIn(); + $('#thermometer').children().fadeIn(); + e.stopPropagation(); + console.log('thermo'); + }); + + $('#pin-toggle').on('click', function(e) { + $('#sim-parameters').children().hide(); + $('.mb_pin').css('opacity', '0'); + + $('#pins').fadeIn(); + $('#pins').children().fadeIn(); + e.stopPropagation(); + console.log('pins'); + }); + + $('#accelerometer-buttons').hide(); + + var sGMHeight = 0; + $('#sim-btns a').each(function() { + sGMHeight += $(this).outerHeight() + 4; + console.log(sGMHeight); + }); + + var simBtnsOpened = false; + + $('#sim-btns-toggle').on('click', function(e) { + e.preventDefault(); + + var simGroup = $('#sim-btns'), + simBtns = $('#sim-btns a'), + tglBtn = $('#sim-btns-toggle'); + + if (simBtnsOpened) { + simGroup.animate({height: '0', opacity: '0'}, 1000); + simBtns.animate({height: '0', opacity: '0'}, 800); + tglBtn.html(''); + + simBtnsOpened = false; + console.log('closed'); + } else { + simGroup.animate({height: sGMHeight + 'px', opacity: '1'}, 1000); + + simBtns.animate({}, 200); + simBtns.animate({height: '54px', opacity: '1'}, 800); + tglBtn.html(''); + + simBtnsOpened = true; + console.log('opened'); + } + + }); + + var thermSlid = $('#thermo-slider'), paramBox = $('div#sim-parameters'); + var answBox = $('.value span'); + + answBox.text(thermSlid.val()); + + thermSlid.on('change', function () { + answBox.text(thermSlid.val()); + }); + + // Adjust style of thermometer for frame + var top = thermSlid.width() / 2; + var right = paramBox.width() / 2; + thermSlid.css({ + 'top': top + 'px', + 'transform': 'rotate(-90deg)', + 'right': -right + 'px' + }); +}); \ No newline at end of file diff --git a/styles.css b/styles.css index 042d2015..777b1391 100644 --- a/styles.css +++ b/styles.css @@ -281,27 +281,7 @@ a.nounderline{ transform: rotate(180deg); } -.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; @@ -328,15 +308,9 @@ a.nounderline{ display: none; } -.buttons { - position: absolute; - bottom: 10px; - right: 320px; -} - div.accelerometer-buttons{ text-transform: capitalize; - width: 275px; + width: 400px; height:100px; color: #336699; text-decoration: none; @@ -351,12 +325,7 @@ div.accelerometer-buttons{ bottom: 100px; } -#microbit#microbit { - position:absolute; - right: 10px; - bottom: 10px; -} - -#sim-iframe { - overflow: hidden; +#output { + float: left; + margin-left: 60px; }