diff --git a/index.html b/index.html index e70e7a4..6c9ad20 100755 --- a/index.html +++ b/index.html @@ -15,10 +15,10 @@ -
Disconnected
+
Disconnected
- +
@@ -46,16 +46,15 @@ -
Remote control - - +
diff --git a/styles.css b/styles.css index d85bdeb..779a160 100755 --- a/styles.css +++ b/styles.css @@ -6,96 +6,101 @@ body { background-color: #fff; font-family: sans-serif; } -h1 { - font-size: 140%; - font-weight: normal; -} -object { +/* logo object */ +object.logo { width: 45%; } -table { +/* the whole interface is in the table */ +table.blockly-table { height: 95%; width: 100%; } +/* non clickable input forms */ +.non-clickable { + pointer-events: none; +} +/* spans */ span.has-error { color: #a94442 !important; border-color: #a94442 !important; background-color: #f2dede !important; } -input.has-error { - border-color: #a94442 !important; -} -.non-clickable { - pointer-events: none; -} -.form-control { - padding: 0.5vw 1vw !important; -} -.addon-no-border { +span.addon-no-border { border-left: 0px !important; border-right: 0px !important; } -.input-group-addon { +span.input-group-addon { padding: 0.5vw 1vw !important; } -div.remote-label { - font-size: 4vw; - margin-top: 1vw; - font-weight: bold; +/* form items */ +label.btn-primary { + border-width: 3px !important; } -.btn-group-control { - z-index: 34; - bottom: 0px; - position: fixed !important; +input.form-control { + padding: 0.5vw 1vw !important; } -.btn-robot-nr, .btn-robot-add { +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; } -.btn-robot-add { +a.btn-robot-add { opacity: 0.5; } -.btn-selected { +a.btn-selected { border-color: #fc3 !important; } -.btn-success { +a.btn-success { border-width: 3px !important; background-color: #44CC00 !important; } -.btn-primary { - border-width: 3px !important; -} -.btn-danger { +a.btn-danger { border-width: 3px !important; background-color: #b80000 !important; } -.btn-danger.disabled { +a.btn-danger.disabled { background-color: #ee4d4d !important; } .btn:hover, .btn.hover { border-width: 3px; border-color: #fc3 !important; } -.big-checkbox { - width: 5vw; - height: 5vw; -} -.form-check-label { - font-size: 5vw; -} +/* google blockly modifications */ .goog-menuitem-content { font-size: 2em !important; } -div#bar { - right: 0px; +/* 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 { z-index: 34; + bottom: 0px; + position: fixed !important; +} +/* the battery div */ +div#battery { + z-index: 34; + right: 0.5vw; font-size: 2vw; color: #ee4d4d; position: absolute; } -div#bar.connected { +/* the battery div connected status */ +div#battery.connected { color: #44CC00; } +/* the control panel */ div#panel { z-index: 35; width: 100%; @@ -104,11 +109,13 @@ div#panel { text-align: center; background-color: rgba(255, 255, 255, 0.9); } +/* the live stream div */ div#stream { width: 100%; height: 100%; display: none; } +/* for mobile and tablet screen */ @media screen and (max-width: 1000px) { td#blocklyArea { width: 100%; @@ -121,6 +128,7 @@ div#stream { display: none; } } +/* for desktop screen */ @media screen and (min-width: 768px) { td#blocklyArea { width: 60%; diff --git a/sumorobot.js b/sumorobot.js index 35cfb34..b849d95 100755 --- a/sumorobot.js +++ b/sumorobot.js @@ -2,7 +2,7 @@ var hotkeys = true; /* enable disable remote control */ var remoteControl = false; -/* the server URL */ +/* the local/remote server URL */ //var robotServer = "10.42.0.1"; var robotServer = "iot.koodur.com"; @@ -59,10 +59,8 @@ Sumorobot.prototype.connect = function() { var data = evt.data.replace(/'/g, '"').toLowerCase(); console.log(data); var battery = JSON.parse(data)["battery_voltage"]; - battery = Math.round((((battery - 3.0) * 100) / (4.2 - 3.0))); - $("#battery").html(battery + "%"); - //$("#bar").html("Battery"); - $("#bar").addClass("connected"); + $("#battery").html(battery + "V"); + $("#battery").addClass("connected"); }; /* when there is an WebSocket error */ this.websocket.onerror = function(err) { @@ -411,10 +409,8 @@ window.onload = function() { $(".btn-start").click(function() { sumostart = true; 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, "")); } });