k-space/sumorobot-web
11
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
Download Patch File Download Diff File Expand all files Collapse all files

13
index.html
View File

@@ -15,11 +15,7 @@
</head>
<body>
<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">
<object type="image/svg+xml" data="logo.svg">
RoboKoding logo
@@ -55,7 +51,10 @@
<table>
<tr>
<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>
</table>
@@ -69,7 +68,7 @@
<block type="sumorobot_line"></block>
</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-danger btn-stop">Stop</a>
</div>

34
styles.css
View File

@@ -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;
}

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 */
//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('<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 */
/*$(document).click(function(e) {