k-space/sumorobot-web
10
0
Fork 0
forked from marva/sumorobot-web
Code Issues Pull Requests Projects Wiki Activity

add Python coding, move live stream to be instead of Python code, update style

Browse Source
This commit is contained in:
Silver Kuusik 2017-12-20 01:35:50 +01:00
parent f9dce03f27
commit 04943d6169
3 changed files with 64 additions and 35 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
index.html
View File

@ -15,11 +15,7 @@
</head> </head>
<body> <body>
<div id="bar">Disconnected<span id="battery"></span></div> <div id="bar">Disconnected<span id="battery"></span></div>
<div id="stream">
<div class="btn-group btn-group-justified">
<a href="#" class="btn btn-lg btn-danger btn-close">Close</a>
</div>
</div>
<div id="panel"> <div id="panel">
<object type="image/svg+xml" data="logo.svg"> <object type="image/svg+xml" data="logo.svg">
RoboKoding logo RoboKoding logo
@ -55,7 +51,10 @@
<table> <table>
<tr> <tr>
<td id="blocklyArea"></td> <td id="blocklyArea"></td>
<td id="blocklyCodeArea"><textarea id="blocklyCode" readonly></textarea></td> <td id="blocklyCodeArea">
<div id="stream"></div>
<textarea id="blocklyCode" class="non-clickable"></textarea>
</td>
</tr> </tr>
</table> </table>
@ -69,7 +68,7 @@
<block type="sumorobot_line"></block> <block type="sumorobot_line"></block>
</xml> </xml>
<div class="btn-group btn-group-justified"> <div class="btn-group btn-group-justified btn-group-control">
<a href="#" class="btn btn-lg btn-success btn-start">Start</a> <a href="#" class="btn btn-lg btn-success btn-start">Start</a>
<a href="#" class="btn btn-lg btn-danger btn-stop">Stop</a> <a href="#" class="btn btn-lg btn-danger btn-stop">Stop</a>
</div> </div>

34
styles.css
View File

@ -1,5 +1,4 @@
html, body { html, body {
margin: 0;
height: 100%; height: 100%;
} }
body { body {
@ -15,7 +14,7 @@ object {
width: 45%; width: 45%;
} }
table { table {
height: 88%; height: 95%;
width: 100%; width: 100%;
} }
span.has-error { span.has-error {
@ -26,6 +25,9 @@ span.has-error {
input.has-error { input.has-error {
border-color: #a94442 !important; border-color: #a94442 !important;
} }
.non-clickable {
pointer-events: none;
}
.form-control { .form-control {
padding: 0.5vw 1vw !important; padding: 0.5vw 1vw !important;
} }
@ -36,6 +38,11 @@ input.has-error {
.input-group-addon { .input-group-addon {
padding: 0.5vw 1vw !important; padding: 0.5vw 1vw !important;
} }
.btn-group-control {
z-index: 35;
bottom: 0px;
position: fixed !important;
}
.btn-robot-nr, .btn-robot-add { .btn-robot-nr, .btn-robot-add {
font-size: 10vw !important; font-size: 10vw !important;
border: 3px solid rgba(0, 0, 0, 0.1) !important; border: 3px solid rgba(0, 0, 0, 0.1) !important;
@ -71,17 +78,17 @@ input.has-error {
.goog-menuitem-content { .goog-menuitem-content {
font-size: 2em !important; font-size: 2em !important;
} }
#bar { div#bar {
right: 0px; right: 0px;
z-index: 35; z-index: 35;
font-size: 2vw; font-size: 2vw;
color: #ee4d4d; color: #ee4d4d;
position: absolute; position: absolute;
} }
#bar.connected { div#bar.connected {
color: #44CC00; color: #44CC00;
} }
#panel { div#panel {
z-index: 35; z-index: 35;
width: 100%; width: 100%;
height: 100%; height: 100%;
@ -89,19 +96,15 @@ input.has-error {
text-align: center; text-align: center;
background-color: rgba(255, 255, 255, 0.9); background-color: rgba(255, 255, 255, 0.9);
} }
#stream { div#stream {
z-index: 35;
width: 100%; width: 100%;
height: 100%; height: 100%;
display: none; display: none;
position: absolute;
text-align: center;
background-color: rgba(255, 255, 255, 0.9);
} }
@media screen and (max-width: 1000px) { @media screen and (max-width: 1000px) {
td#blocklyArea { td#blocklyArea {
width: 99%; width: 100%;
height: 99%; height: 100%;
} }
td#blocklyCodeArea { td#blocklyCodeArea {
display: none; display: none;
@ -113,14 +116,15 @@ input.has-error {
@media screen and (min-width: 768px) { @media screen and (min-width: 768px) {
td#blocklyArea { td#blocklyArea {
width: 60%; width: 60%;
height: 99%; height: 100%;
} }
td#blocklyCodeArea { td#blocklyCodeArea {
width: 40%; width: 40%;
height: 99%; height: 100%;
} }
textarea#blocklyCode { textarea#blocklyCode {
width: 99%; border: none;
width: 100%;
height: 100%; height: 100%;
font-size: 1.8em; font-size: 1.8em;
} }

52
sumorobot.js
View File

@ -1,20 +1,24 @@
/* disable enable hotkeys */
var hotkeys = true;
/* enable disable remote control */
var remoteControl = false;
/* the server URL */ /* the server URL */
//var robotServer = "10.42.0.1"; //var robotServer = "10.42.0.1";
var robotServer = "iot.koodur.com"; var robotServer = "iot.koodur.com";
/* enable disable remote control */
var remoteControl = false; /* the sumorobot code */
/* the sumorobot state */ var sumocode = "";
var sumostart = false;
/* the sumorobot object */ /* the sumorobot object */
var sumorobot = null; var sumorobot = null;
/* Blockly workspace */ /* Blockly workspace */
var workspace = null; var workspace = null;
/* the sumorobot state */
var sumostart = false;
/* disable / enable Python code */
var pythonEnabled = false;
/* last hightlighted block id */ /* last hightlighted block id */
var highlighted = ""; var highlighted = "";
/* disable enable hotkeys */
var hotkeys = true;
/* the sumorobot code */
var sumocode = "";
/* block highlight WebSocket */ /* block highlight WebSocket */
var block_highlight = null; var block_highlight = null;
@ -306,8 +310,12 @@ window.onload = function() {
/* key down event */ /* key down event */
$(document).keydown(function(e) { $(document).keydown(function(e) {
/* if the hotkeys are disabled or the focused element is a textarea or text input, don't use hotkeys */ /* if the hotkeys are disabled or the alt key is not pressed, 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;
/* prevent typing in textfields */
e.preventDefault();
/* select the hotkey */ /* select the hotkey */
switch(e.which) { switch(e.which) {
case 32: // space bar case 32: // space bar
@ -353,6 +361,18 @@ window.onload = function() {
break; break;
case 76: // l case 76: // l
$("#stream").toggle(); $("#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 case 82: // r
$("#remote-control").click(); $("#remote-control").click();
break; break;
@ -370,7 +390,7 @@ window.onload = function() {
/* key up event */ /* key up event */
$(document).keyup(function(e) { $(document).keyup(function(e) {
/* if the hotkeys are disabled or the focused element is a textarea or text input, don't use hotkeys */ /* 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 */ /* remove hover from buttons */
$('.btn').removeClass('hover'); $('.btn').removeClass('hover');
/* if arrow keys */ /* if arrow keys */
@ -387,7 +407,13 @@ window.onload = function() {
/* start button listener */ /* start button listener */
$(".btn-start").click(function() { $(".btn-start").click(function() {
sumostart = true; 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 */ /* stop button listener */
@ -434,7 +460,7 @@ window.onload = function() {
$("#panel").hide(); $("#panel").hide();
}); });
$("#stream").prepend('<iframe width="100%" height="91%" allowfullscreen="true" src="https://mixer.com/embed/player/14551694"></iframe>'); $("#stream").html('<iframe width="100%" height="100%" allowfullscreen="true" src="https://mixer.com/embed/player/14551694"></iframe>');
/* try to close if block bubble canvas */ /* try to close if block bubble canvas */
/*$(document).click(function(e) { /*$(document).click(function(e) {