add Python coding, move live stream to be instead of Python code, update style
This commit is contained in:
Silver Kuusik
parent
f9dce03f27
commit
04943d6169
13
index.html
13
index.html
|
|
@ -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
34
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;
|
||||
}
|
||||
|
|
|
|||
52
sumorobot.js
52
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('<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) {
|
||||
|
|
|
|||
Loading…
Reference in New Issue