diff --git a/index.html b/index.html index db22337..0ef918e 100755 --- a/index.html +++ b/index.html @@ -6,6 +6,7 @@ + @@ -24,35 +25,11 @@ RoboKoding logo
- 1 - - 2 - - 3 - - 4 - - 5 - + robot name +
-
- 1 - 2 - 3 - 4 - 5 - + -
-
-
- - -
- Remote control +
+ GO!
@@ -84,9 +61,9 @@ -
- Start - Stop +
+ Start + Stop
diff --git a/styles.css b/styles.css index 689fe57..a5b14e0 100755 --- a/styles.css +++ b/styles.css @@ -1,15 +1,12 @@ html, body { height: 100%; + font-family: "Orbitron" !important; } body { overflow: hidden; background-color: #fff; font-family: sans-serif; } -/* logo object */ -object.logo { - width: 45%; -} /* the whole interface is in the table */ table.blockly-table { height: 95%; @@ -21,47 +18,25 @@ span.has-error { border-color: #a94442 !important; background-color: #f2dede !important; } -span.addon-no-border { - border-left: 0px !important; - border-right: 0px !important; -} -span.input-group-addon { - padding: 0.5vw 1vw !important; -} -/* form items */ -label.btn-primary { - border-width: 3px !important; -} -input.form-control { - padding: 0.5vw 1vw !important; -} input.has-error { border-color: #a94442 !important; } -/* buttons */ -a.btn-robot-nr, a.btn-robot-add { - font-size: 10vw !important; - border: 3px solid rgba(0, 0, 0, 0.1) !important; +/* robot connect button */ +a.btn-robot-go, a.btn-robot-go:hover { + color: #3768d8; } -a.btn-robot-add { - opacity: 0.5; -} -a.btn-selected { - border-color: #fc3 !important; -} -a.btn-success { +/* start code button */ +a.btn-start { border-width: 3px !important; border-color: #4cae4c !important; background-color: #44CC00 !important; } -a.btn-danger { +/* stop code button */ +a.btn-stop { border-width: 3px !important; border-color: #d43f3a !important; background-color: #b80000 !important; } -a.btn-danger.disabled { - background-color: #ee4d4d !important; -} .btn:hover, .btn.hover { border-width: 3px; border-color: #fc3 !important; @@ -70,18 +45,9 @@ a.btn-danger.disabled { .goog-menuitem-content { font-size: 2em !important; } -/* remote control enabler container */ -div.form-check-label { - font-size: 5vw; -} -/* remote control enabler label container */ -div.remote-label { - font-size: 4vw; - margin-top: 1vw; - font-weight: bold; -} /* start and stop button group */ div.btn-group-control { + width: 100%; z-index: 35; bottom: 0px; position: fixed !important; @@ -115,27 +81,87 @@ div#stream { } /* for mobile and tablet screen */ @media screen and (max-width: 1000px) { + /* logo object */ + object.logo { + width: 100%; + } + /* control panel robot name input */ + div.input-group { + width: 100%; + margin-left: auto; + margin-right: auto; + } + span.input-group-addon { + font-size: 7vw; + padding: 0.5vw 0.5vw !important; + } + input.form-control { + font-size: 7vw; + padding: 0.5vw 0.5vw !important; + } + /* robot connect button */ + div.btn-group-robot { + width: 100%; + } + a.btn-robot-go { + width: 100%; + font-size: 30vw !important; + border: 3px solid rgba(0, 0, 0, 0.1) !important; + } + /* Blockly workspace */ td#blocklyArea { width: 100%; height: 100%; } + /* Blockly code area */ td#blocklyCodeArea { display: none; } + /* ace editor */ div#blocklyCode { display: none; } } /* for desktop screen */ @media screen and (min-width: 768px) { + /* logo object */ + object.logo { + width: 45%; + } + /* control panel robot name input */ + div.input-group { + width: 35%; + margin-left: auto; + margin-right: auto; + } + span.input-group-addon { + font-size: 2vw; + padding: 0.5vw 0.5vw !important; + } + input.form-control { + font-size: 2vw; + padding: 0.5vw 0.5vw !important; + } + /* robot connect button */ + div.btn-group-robot { + width: 35%; + } + a.btn-robot-go { + width: 100%; + font-size: 10vw !important; + border: 3px solid rgba(0, 0, 0, 0.1) !important; + } + /* Blockly workspace */ td#blocklyArea { width: 60%; height: 100%; } + /* Blockly code area */ td#blocklyCodeArea { width: 40%; height: 100%; } + /* ace editor */ div#blocklyCode { width: 100%; height: 100%; diff --git a/sumorobot.js b/sumorobot.js index 7e4551f..89eab84 100755 --- a/sumorobot.js +++ b/sumorobot.js @@ -86,52 +86,24 @@ Sumorobot.prototype.close = function() { this.websocket.close(); }; +/* function to set local storage */ +function getLocalStorageItem(item) { + /* when the local storage doesn't exist, return empty string */ + if (typeof(Storage) === "undefined") return ""; + /* otherwise return item from the local storage*/ + return localStorage.getItem(item); +} + +/* function to set local storage */ +function setLocalStorageItem(item, value) { + /* when local storage doesn't exist, return */ + if (typeof(Storage) === "undefined") return; + /* otherwise set the item to the local storage */ + localStorage.setItem(item, value) +} + window.onload = function() { - /* function to update the control panel */ - function updateControlPanel() { - /* hide all buttons and text fields */ - $(".robot-id, .robot-nr, .btn-robot-nr").hide(); - /* show the first button and text field */ - $(".robot-id:eq(0), .robot-nr:eq(0), .btn-robot-nr:eq(0)").show(); - - /* adjust the buttons and text fields to be in the middle */ - $(".input-group, .btn-group-robot").css("width", "20%"); - $(".input-group, .btn-group-robot").css("margin-left", "40%"); - - /* hide the robot add button */ - $(".btn-robot-add").hide(); - - /* populate robots IDs and buttons */ - for (var i = 0; i < 5; i++) { - var id = getLocalStorageItem("sumorobot.robotID" + i); - if (id) { - $(".robot-id:eq(" + i + ")").val(id); - $(".robot-id:eq(" + i + "), .robot-nr:eq(" + i + "), .btn-robot-nr:eq(" + i + ")").show(); - $(".input-group, .btn-group-robot").css("width", 20 + (i * 20) + "%"); - $(".input-group, .btn-group-robot").css("margin-left", 40 - (i * 10) + "%"); - } else { - /* when no robots yet added */ - if (i != 0) { - /* show the robot add button */ - $(".btn-robot-add").show(); - $(".btn-group-robot").css("width", 20 + (i * 20) + "%"); - $(".input-group, .btn-group-robot").css("margin-left", 40 - (i * 10) + "%"); - /* add click listener to the robot add button */ - $(".btn-robot-add").click(function() { - $(".robot-id:eq(" + i + "), .robot-nr:eq(" + i + "), .btn-robot-nr:eq(" + i + ")").show(); - $(".input-group, .btn-group-robot").css("width", 20 + (i * 20) + "%"); - $(".input-group, .btn-group-robot").css("margin-left", 40 - (i * 10) + "%"); - $(this).hide(); - }); - } - break; - } - } - } - - /* load the control panel */ - updateControlPanel(); - + $("#robot-id").val(getLocalStorageItem("sumorobot.robotId")); /* load ace editor */ pythonEditor = ace.edit("blocklyCode"); /* set the style */ @@ -356,22 +328,6 @@ window.onload = function() { onresize(); Blockly.svgResize(workspace); - /* function to set local storage */ - function getLocalStorageItem(item) { - /* when the local storage doesn't exist, return empty string */ - if (typeof(Storage) === "undefined") return ""; - /* otherwise return item from the local storage*/ - return localStorage.getItem(item); - } - - /* function to set local storage */ - function setLocalStorageItem(item, value) { - /* when local storage doesn't exist, return */ - if (typeof(Storage) === "undefined") return; - /* otherwise set the item to the local storage */ - localStorage.setItem(item, value) - } - /* retrieve the blocks */ var xml = Blockly.Xml.textToDom(getLocalStorageItem("sumorobot.blockly")); /* resume the blocks */ @@ -454,23 +410,7 @@ window.onload = function() { case 40: // down if (remoteControl) sumorobot.send("backward"); break; - case 49: // 1 - $(".btn-robot-nr:eq(0)").click(); - break; - case 50: // 2 - $(".btn-robot-nr:eq(1)").click(); - break; - case 51: // 3 - $(".btn-robot-nr:eq(2)").click(); - break; - case 52: // 4 - $(".btn-robot-nr:eq(3)").click(); - break; - case 53: // 5 - $(".btn-robot-nr:eq(4)").click(); - break; case 67: // c - updateControlPanel(); $("#panel").toggle(); break; case 76: // l @@ -505,10 +445,8 @@ window.onload = function() { } break; case 82: // r - if (remoteControl) - $("#remote-disabled").click(); - else - $("#remote-enabled").click(); + /* toggle remote control */ + remoteControl = !remoteControl; break; case 83: // s $(".btn-stop").addClass("hover"); @@ -536,11 +474,6 @@ window.onload = function() { } }); - /* start button listener */ - $(".btn-close").click(function() { - $("#stream").hide(); - }); - /* start button listener */ $(".btn-start").click(function() { sumostart = true; @@ -562,32 +495,18 @@ window.onload = function() { workspace.highlightBlock(lastHighlighted, false); }); - /* remote control enable listener */ - $("#remote-enabled").click(function() { - remoteControl = true; - }); - - /* remote control disable listener */ - $("#remote-disabled").click(function() { - remoteControl = false; - }); - /* robot number button listener */ - $(".btn-robot-nr").click(function() { + $(".btn-robot-go").click(function() { /* extract and validate the selected robot ID */ - var index = $(".btn-robot-nr").index($(this)); - var robotID = $(".robot-id:eq(" + index + ")").val(); - if (robotID.trim() === "") { - $(".robot-nr:eq(" + index + "), .robot-id:eq(" + index + ")").addClass("has-error"); + var robotId = $("#robot-id").val().trim(); + if (robotId === "" || /^(sumo-[a-f0-9]{6})$/.test(robotId) == false) { + $("#robot-id, #robot-label").addClass("has-error"); return; } else { - $(".robot-nr:eq(" + index + "), .robot-id:eq(" + index + ")").removeClass("has-error"); + $("#robot-id, #robot-label").removeClass("has-error"); } - /* highlight the selected robot button */ - $(".btn-robot-nr").removeClass("btn-selected"); - $(this).addClass("btn-selected"); /* update robot IDs in local storage */ - setLocalStorageItem("sumorobot.robotID" + index, robotID); + setLocalStorageItem("sumorobot.robotId", robotId); /* in case there is a open connection */ if (sumorobot && blockHighlight) { /* close the connections */ @@ -595,9 +514,9 @@ window.onload = function() { blockHighlight.close(); } /* connect to the selected robots WebSocket */ - sumorobot = new Sumorobot("ws://" + robotServer + ":80/p2p/browser/" + robotID + "/"); + sumorobot = new Sumorobot("ws://" + robotServer + ":80/p2p/browser/" + robotId + "/"); /* connect to the other block highlight WebSocket */ - blockHighlight = new WebSocket("ws://" + robotServer + ":80/p2p/browser/" + robotID + "-highlight/"); + blockHighlight = new WebSocket("ws://" + robotServer + ":80/p2p/browser/" + robotId + "-highlight/"); /* when there is a message from the WebSocket */ blockHighlight.onmessage = function(evt) { /* when scope is received */