Skip to content

Commit

Permalink
gama listening mode, basically usable, need review to reorganise clas…
Browse files Browse the repository at this point in the history 
…ses and more features
  • Loading branch information
@hqnghi88
hqnghi88 committed Mar 16, 2022
1 parent f4c21f2 commit b89eaca
Show file tree
Hide file tree
Showing 11 changed files with 678 additions and 141 deletions.
334 changes: 334 additions & 0 deletions SimpleGUI.html
View file
@@ -0,0 +1,334 @@
<!doctype html>
<html lang="en">

<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>GAMA Web UI</title>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.13.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="https://jqueryui.com/resources/demos/style.css">
<style>
.dialog_form th {
text-align: left;
}

.dialog_form textarea,
.dialog_form input[type=text] {
width: 320px;
}

#dialog_window_minimized_container {
position: fixed;
bottom: 0px;
left: 0px;
}

.dialog_window_minimized {
float: left;
padding: 5px 10px;
font-size: 12px;
cursor: pointer;
margin-right: 2px;
display: none;
}

.dialog_window_minimized .ui-icon {
display: inline-block !important;
position: relative;
top: 3px;
cursor: pointer;
}

.ui-dialog .ui-dialog-titlebar-minimize {
height: 18px;
width: 19px;
padding: 1px;
position: absolute;
right: 23px;
top: 9px;
}

.ui-dialog .ui-dialog-titlebar-minimize .ui-icon {
display: block;
margin: 1px;
}

.ui-dialog .ui-dialog-titlebar-minimize:hover,
.ui-dialog .ui-dialog-titlebar-minimize:focus {
padding: 0;
}
</style>
<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<script src="https://code.jquery.com/ui/1.13.1/jquery-ui.js"></script>

</head>

<body>

<div id="dialog_window_minimized_container"></div>
<div id="dialog_window_1" class="dialog_window" title="Create a new <code>Dialog</code> Widget">
<h3>Create a new <code>Dialog</code> Widget</h3>
<table class="dialog_form">
<tr>
<th>Widget Title</th>
</tr>
<tr>
<td><input type="text" id="new_window_title" /></td>
</tr>
<tr>
<th>
Widget Content
</th>
</tr>
<tr>
<td>
<textarea id="new_window_content"></textarea>
</td>
</tr>
<tr>
<th>
Widget Buttons
</th>
</tr>
<tr>
<td id="buttonlist">
<input type="checkbox" id="alertbutton" /><label for="alertbutton">ALERT</label>
<input type="checkbox" id="closebutton" /><label for="closebutton">CLOSE</label>
</td>
</tr>
</table>
</div>
<button id="create_button">Create a new Widget</button>
<script>

var _init = $.ui.dialog.prototype._init;
$.ui.dialog.prototype._init = function () {
_init.apply(this, arguments);

var dialog_element = this;
var dialog_id = this.uiDialogTitlebar.next().attr('id');

this.uiDialogTitlebar.append('<a href="#" id="' + dialog_id +
'-minbutton" class="ui-dialog-titlebar-minimize ui-corner-all">' +
'<span class="ui-icon ui-icon-minusthick"></span></a>');

$('#dialog_window_minimized_container').append(
'<div class="dialog_window_minimized ui-widget ui-state-default ui-corner-all" id="' +
dialog_id + '_minimized">' + this.uiDialogTitlebar.find('.ui-dialog-title').text() +
'<span class="ui-icon ui-icon-newwin"></div>');

$('#' + dialog_id + '-minbutton').hover(function () {
$(this).addClass('ui-state-hover');
}, function () {
$(this).removeClass('ui-state-hover');
}).click(function () {
dialog_element.close();
$('#' + dialog_id + '_minimized').show();
});

$('#' + dialog_id + '_minimized').click(function () {
$(this).hide();
dialog_element.open();
});
};

$(document).ready(function () {
$('#create_button').button().click(function () {
var create_dialog = $('#dialog_window_1');
var create_button = $(this);
if (create_dialog.dialog('isOpen')) {
create_button.button('option', 'label', 'Create a new Widget');
create_dialog.dialog('close');
} else {
create_button.button('option', 'label', 'Close Widget');
create_dialog.dialog('open');
}
});

$('#dialog_window_1').dialog({
width: 'auto',
height: 'auto',
autoOpen: false,
buttons: [
{
text: 'Create',
click: create1
}
]
});
$('#buttonlist').buttonset();
});
function create1() {
var div_count = $('.dialog_window').length + 1;
var div_id = 'dialog_window_' + div_count;
var div_title = $('#new_window_title').val();
var div_content = $('#new_window_content').val();
var buttons = new Array();
if ($('#alertbutton').is(':checked')) {
buttons.push({
text: 'ALERT',
click: function () {
alert('ALERTING from Dialog Widnow: ' + div_title);
}
});
}

if ($('#closebutton').is(':checked')) {
buttons.push({
text: 'CLOSE',
click: function () {
$('#' + div_id).dialog('close');
}
});
}

$('body').append('<div class="dialog_window" id="' + div_id + '">' + div_content + '</div>');

var dialog = $('#' + div_id).dialog({
width: 'auto',
height: 'auto',
title: div_title,
autoOpen: true,
buttons: buttons
});
}
$.fn.scrollBottom = function () {
return $(this).scrollTop($(this)[0].scrollHeight);
};
initDefaultWidget();
function initDefaultWidget() {
$('#new_window_title').val("Controller");
$('#new_window_content').val('Socket <input type="button" value="Open" onclick="connect()"> <input type="button" value="Close" onclick="disconnect()"> <table><tr><td> Model:</td><td> <input type="text" id="gaml_path" value="C:\\GAMA\\headless\\samples\\predatorPrey\\predatorPrey.gaml"></td></tr> <tr><td> Experiment:</td><td> <input type="text" id="exp_name" value="prey_predatorExp"></td></tr> <tr><td colspan=2> <input type="button" value="Load"> <input type="button" value="Compile" onclick="compile()"> <input type="button" value="Launch"></td></tr> <tr><td colspan=2> <input type="button" value="Play" onclick="run()"> <input type="button" value="Pause"> <input type="button" value="Stop"></td></tr> </table><div id="errors"></div>');
create1();
$('#' + 'dialog_window_2').parent().css({ left: 8, top: 50 });


$('#new_window_title').val("Display2"); $('#new_window_content').val('<img id="image_out0"></img>');
create1();
$('#' + 'dialog_window_3').parent().css({ left: 400, top: 50 });



$('#new_window_title').val("Console"); $('#new_window_content').val('<textarea rows="24" cols="36" id="console"></textarea>');
create1();
$('#' + 'dialog_window_4').parent().css({ left: 8, top: 280 });




$('#new_window_title').val("Display3"); $('#new_window_content').val('<img id="image_out1"></img>');
create1();
$('#' + 'dialog_window_5').parent().css({ left: 400, top: 280 });


$('#new_window_title').val('');
$('#new_window_content').val('');
}
var socket;
function connect() {
if (!socket) {
socket = new WebSocket("ws://localhost:6868/launch");
socket.binaryType = "arraybuffer";
socket.addEventListener('open', (event) => {
$('#errors').text('Socket connected!');
});

}
}
function disconnect() {
$('#errors').text('Socket closed!');
if (socket) {
clearInterval(interval_id);

socket.close();
socket = null;
}
}
// send message from the form
var exp_compiled;
var exp_id = 0;
function compile() {
//setInterval(function(){
// socket.send(""); }, 100);
if (socket && socket.readyState === 1) {
socket.binaryType = 'string';
socket.send("compile@" + $('#gaml_path').val() + "@" + $('#exp_name').val());
socket.onmessage = function (event) {
exp_compiled = event.data;
console.log(exp_compiled);
}
} else { $('#errors').text("Socket is not ready!"); }

// message received - show the message in div#messages
return false;
};
var interval_id;
// send message from the form
function run() {
//setInterval(function(){
// socket.send(""); }, 100);
if (socket && socket.readyState === 1) {
socket.binaryType = "arraybuffer";
// socket.send(exp_compiled);
socket.send("run@" + $('#gaml_path').val() + "@" + $('#exp_name').val());
// var sk = new WebSocket("ws://localhost:6868/output");
// sk.binaryType = "arraybuffer";
// sk.addEventListener('open', (event) => {

// interval_id = setInterval(
// function () {
// sk.send("output@" + exp_id + "@main_display");
// }, 1000);
// });
// sk.onmessage = function (event) {
// let message = event.data;
// if (typeof event.data == "object") {
// var bytes = new Uint8Array(event.data);
// var data = "";
// var len = bytes.byteLength;
// for (var i = 0; i < len; ++i) {
// data += String.fromCharCode(bytes[i]);
// }
// var img = document.getElementById("image_out");
// img.src = "data:image/png;base64," + window.btoa(data);

// }
// }
socket.onmessage = function (event) {
let message = event.data;
// console.log(message);
// $('#console').append(message+"\n");//.scrollBottom();

if (typeof event.data == "object") {

var bytes = new Uint8Array(event.data);
var data = "";
var len = bytes.byteLength;
for (var i = 0; i < len - 1; ++i) {
data += String.fromCharCode(bytes[i]);
}
// console.log(bytes[len - 1]);
var img = document.getElementById("image_out"+bytes[len - 1]);
img.src = "data:image/png;base64," + window.btoa(data);


} else {
if (message.startsWith("exp@")) {
exp_id = message.substring(4);
}
$('#console').append(message + "\n");
}
}
} else { $('#errors').text("Socket is not ready!"); }

// message received - show the message in div#messages
return false;
};




</script>
</body>

</html>

0 comments on commit b89eaca

Please sign in to comment.