From 04943d6169b9a53d596c294c1fa2f1ab567d09fc Mon Sep 17 00:00:00 2001 From: Silver Kuusik Date: Wed, 20 Dec 2017 01:35:50 +0100 Subject: [PATCH] add Python coding, move live stream to be instead of Python code, update style --- index.html | 13 ++++++------- styles.css | 34 +++++++++++++++++++--------------- sumorobot.js | 52 +++++++++++++++++++++++++++++++++++++++------------- 3 files changed, 64 insertions(+), 35 deletions(-) diff --git a/index.html b/index.html index 4f1c066..b439586 100755 --- a/index.html +++ b/index.html @@ -15,11 +15,7 @@
Disconnected
-
-
- Close -
-
+
RoboKoding logo @@ -55,7 +51,10 @@ - +
+
+ +
@@ -69,7 +68,7 @@ -
+
Start Stop
diff --git a/styles.css b/styles.css index 1a0a90b..019bb65 100755 --- a/styles.css +++ b/styles.css @@ -1,5 +1,4 @@ html, body { - margin: 0; height: 100%; } body { @@ -15,7 +14,7 @@ object { width: 45%; } table { - height: 88%; + height: 95%; width: 100%; } span.has-error { @@ -26,6 +25,9 @@ span.has-error { input.has-error { border-color: #a94442 !important; } +.non-clickable { + pointer-events: none; +} .form-control { padding: 0.5vw 1vw !important; } @@ -36,6 +38,11 @@ input.has-error { .input-group-addon { padding: 0.5vw 1vw !important; } +.btn-group-control { + z-index: 35; + bottom: 0px; + position: fixed !important; +} .btn-robot-nr, .btn-robot-add { font-size: 10vw !important; border: 3px solid rgba(0, 0, 0, 0.1) !important; @@ -71,17 +78,17 @@ input.has-error { .goog-menuitem-content { font-size: 2em !important; } -#bar { +div#bar { right: 0px; z-index: 35; font-size: 2vw; color: #ee4d4d; position: absolute; } -#bar.connected { +div#bar.connected { color: #44CC00; } -#panel { +div#panel { z-index: 35; width: 100%; height: 100%; @@ -89,19 +96,15 @@ input.has-error { text-align: center; background-color: rgba(255, 255, 255, 0.9); } -#stream { - z-index: 35; +div#stream { width: 100%; height: 100%; display: none; - position: absolute; - text-align: center; - background-color: rgba(255, 255, 255, 0.9); } @media screen and (max-width: 1000px) { td#blocklyArea { - width: 99%; - height: 99%; + width: 100%; + height: 100%; } td#blocklyCodeArea { display: none; @@ -113,14 +116,15 @@ input.has-error { @media screen and (min-width: 768px) { td#blocklyArea { width: 60%; - height: 99%; + height: 100%; } td#blocklyCodeArea { width: 40%; - height: 99%; + height: 100%; } textarea#blocklyCode { - width: 99%; + border: none; + width: 100%; height: 100%; font-size: 1.8em; } diff --git a/sumorobot.js b/sumorobot.js index 303c3df..334112d 100755 --- a/sumorobot.js +++ b/sumorobot.js @@ -1,20 +1,24 @@ +/* disable enable hotkeys */ +var hotkeys = true; +/* enable disable remote control */ +var remoteControl = false; /* the server URL */ //var robotServer = "10.42.0.1"; var robotServer = "iot.koodur.com"; -/* enable disable remote control */ -var remoteControl = false; -/* the sumorobot state */ -var sumostart = false; + +/* the sumorobot code */ +var sumocode = ""; /* the sumorobot object */ var sumorobot = null; /* Blockly workspace */ var workspace = null; +/* the sumorobot state */ +var sumostart = false; +/* disable / enable Python code */ +var pythonEnabled = false; + /* last hightlighted block id */ var highlighted = ""; -/* disable enable hotkeys */ -var hotkeys = true; -/* the sumorobot code */ -var sumocode = ""; /* block highlight WebSocket */ var block_highlight = null; @@ -306,8 +310,12 @@ window.onload = function() { /* key down event */ $(document).keydown(function(e) { - /* if the hotkeys are disabled or the focused element is a textarea or text input, don't use hotkeys */ - if (hotkeys == false || $(e.target).is("textarea") || $(e.target).is("[type=text]") || $(e.target).is("[class=blocklyHtmlInput]")) return; + /* if the hotkeys are disabled or the alt key is not pressed, don't use hotkeys */ + if (hotkeys == false || e.altKey == false) return; + + /* prevent typing in textfields */ + e.preventDefault(); + /* select the hotkey */ switch(e.which) { case 32: // space bar @@ -353,6 +361,18 @@ window.onload = function() { break; case 76: // l $("#stream").toggle(); + $("#blocklyCode").toggle(); + break; + case 80: // p + $("#blocklyCode").blur(); + $("#blocklyDiv").toggle(); + $("#blocklyArea").toggle(); + $("#blocklyCode").toggleClass("non-clickable"); + var event = {type: Blockly.Events.CHANGE}; + workspace.fireChangeListener(event); + /* toggle python enabled */ + pythonEnabled = !pythonEnabled; + break; case 82: // r $("#remote-control").click(); break; @@ -370,7 +390,7 @@ window.onload = function() { /* key up event */ $(document).keyup(function(e) { /* if the hotkeys are disabled or the focused element is a textarea or text input, don't use hotkeys */ - if (hotkeys == false || $(e.target).is("textarea") || $(e.target).is("[type=text]") || $(e.target).is("[class=blocklyHtmlInput]")) return; + if (hotkeys == false || e.altKey == false) return; /* remove hover from buttons */ $('.btn').removeClass('hover'); /* if arrow keys */ @@ -387,7 +407,13 @@ window.onload = function() { /* start button listener */ $(".btn-start").click(function() { sumostart = true; - sumorobot.send("start:" + sumocode.replace(/sumorobot./g, "")); + if (pythonEnabled) { + console.log($("#blocklyCode").val().replace(/sumorobot./g, "")); + sumorobot.send("start:" + $("#blocklyCode").val().replace(/sumorobot./g, "")); + } else { + console.log(sumocode.replace(/sumorobot./g, "")); + sumorobot.send("start:" + sumocode.replace(/sumorobot./g, "")); + } }); /* stop button listener */ @@ -434,7 +460,7 @@ window.onload = function() { $("#panel").hide(); }); - $("#stream").prepend(''); + $("#stream").html(''); /* try to close if block bubble canvas */ /*$(document).click(function(e) {