Skip to content

Commit

Permalink
comments added to cocoaine
Browse files Browse the repository at this point in the history
  • Loading branch information
Nicola Giordani committed Jul 13, 2016
1 parent 738aff8 commit cd9b52f
Show file tree
Hide file tree
Showing 4 changed files with 58 additions and 64 deletions.
5 changes: 5 additions & 0 deletions cocoaine/coco.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,6 +24,11 @@ div {
margin: 0 0;
}

table {
width: 100%;
height: 100%;
}

#content {
width: 100%;
height: 100%;
Expand Down
61 changes: 49 additions & 12 deletions cocoaine/coco.js
View file
Original file line number Diff line number Diff line change
@@ -1,8 +1,12 @@
/* global variables for plots updating */
var s;
var i = 0;
var c = [];
var x = 100;

/* useful functions to move svg element (if you want to create/modify/remove
* coco's component using the ui
*/
var move = function(dx,dy) {
this.attr({
transform: this.data('origTransform') + (this.data('origTransform') ? "T" : "t") + [dx, dy]
Expand Down Expand Up @@ -32,6 +36,11 @@ function addComponent()
i++;
}

/*
*
*/


function notimplemented()
{
alert("Not implemented (yet)");
Expand All @@ -41,12 +50,14 @@ var json = null;
var init = true;
var plots_init = true;

var t = [];
t.push([]);
t.push([]);
t.push([]);
t.push([]);

/* plots_samples holds the last 50 samples for each plot */
var plots_samples = [];

/* plots is responsible for drawing and updating the plots
* It is called by ui() when the plot's tab is selected
* The argument 'stats' is a (json) object sent by the the coco's webserver
*/
function plots(stats)
{
var width = $("#tabs-graphs").width() * 0.99;
Expand Down Expand Up @@ -93,16 +104,18 @@ function plots(stats)
}
});

while (plots_samples.length < stats.length)
plots_samples.push([]);
values = [];
for (var i=0; i<stats.length; i++)
{
if (t[i].length >= 50)
if (plots_samples[i].length >= 50)
{
t[i].shift();
t[i].push(stats[i].time_inst);
plots_samples[i].shift();
plots_samples[i].push(stats[i].time_inst);
}else
t[i].push(stats[i].time_inst);
values.push({y: t[i], mode: "lines", name: taskNames[i]});
plots_samples[i].push(stats[i].time_inst);
values.push({y: plots_samples[i], mode: "lines", name: taskNames[i]});
}

plotList.push({
Expand Down Expand Up @@ -139,7 +152,12 @@ function plots(stats)
plots_init = false;
}

/*
* ui() is the main UI's control function.
* ui() schedules itself to be called by the browser every 200ms
*/
function ui() {
// waits for the first json from webserver to be available
if (json == null)
{
window.setTimeout(ui, 100);
Expand All @@ -150,7 +168,10 @@ function ui() {
$("#project_name").text(json.info.project_name);
init = false;
}
// updates log console
$("#console").append("<pre>" + json.log + "</pre>");
// updates ui's content depending on which tab is selected:
// only the currently selected tab is updated to improve performance
if (selectedTab == "#tabs-activities")
{
tableActivitiesAPI.clear();
Expand All @@ -170,12 +191,19 @@ function ui() {
{
plots(json.stats);
}
// asynchronous call to ui() in 200 ms
window.setTimeout(ui, 200);
}

/*
* ui setup (jQuery calls the function once the document is completely loaded)
*
*/
$(function() {
// call 'button()' on all elements of type button
$("button").button();

// add button click handler to each button
bt_tools = $("#bt_tools").click(function(){
$("#panel").dialog("open");
});
Expand All @@ -199,10 +227,12 @@ $(function() {
$("#mod").button({icons: { primary: "ui-icon-gear" }}).click(notimplemented);
$("#xml").button({icons: { primary: "ui-icon-disk" }}).click(notimplemented);

/* load the SVG from */
svg = document.getElementById("svg");
s = Snap(svg);
Snap.load("graph.svg", function(f) {
$.each(f.selectAll("polygon"), function(idx, obj) {
/* add a drag handler to each 'polygon' element in the SVG */
obj.parent().drag();
obj.parent().click(function() {
// $("#component").text(obj.parent().select("text").node.textContent);
Expand All @@ -222,6 +252,8 @@ $(function() {
}, "text");
*/


// setup of the UI's data tables
tableActivities = $("#table-activities").DataTable({
"columns": [
{ "data": "id" },
Expand All @@ -235,7 +267,7 @@ $(function() {
"scrollCollapse": true,
"paging": false
}).on('select', function (e, dt, type, indexes) {

// do something when a row or cell is selected
});
tableActivitiesAPI = $("#table-activities").dataTable().api();

Expand Down Expand Up @@ -284,6 +316,7 @@ $(function() {
}
});

// setup of UI's dialogs
$("#panel").dialog({
autoOpen: false,
width: window.innerWidth * 0.8,
Expand Down Expand Up @@ -328,11 +361,14 @@ $(function() {

if ("WebSocket" in window)
{
// creates the websocket client
// coco's webserver will spontaneously send json data every x milliseconds
ws = new WebSocket("ws://" + document.location.host);
ws.onopen = function() {

};
ws.onmessage = function(evt) {
// parse the json sent by coco's server
json = $.parseJSON(evt.data);
};
ws.onclose = function()
Expand All @@ -343,7 +379,8 @@ $(function() {
{
alert("WebSocket is not supported by your browser :(");
}


// calls ui() once to start the "main loop"
ui();

});
1 change: 1 addition & 0 deletions cocoaine/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,7 @@
<title>CoCo Asynchronous Inspector and Editor</title>
</head>
<body>
<!-- MAIN UI -->
<div id="content">
<div id="toolbar" class="ui-widget-header ui-corner-all">
<span><b>CoCo / Cocoaine</b>: <b id="project_name"></b></span>
Expand Down
55 changes: 3 additions & 52 deletions core/src/web_server.cpp
View file
Original file line number Diff line number Diff line change
Expand Up @@ -52,51 +52,6 @@ class WebServer::WebServerImpl
std::string graph_svg_;
std::mutex log_mutex_;
std::stringstream log_stream_;
/*
struct Stats
{
uint window = 50;
std::unordered_map<std::string, std::deque<double>> samples_;
std::deque<double>& operator[](const std::string& key)
{
return samples_[key];
}
void put(const std::string& key, double v)
{
auto& queue = samples_[key];
if (queue.size() > 0)
queue[0] = v;
else
queue.push_back(v);
}
void add(const std::string& key, double v)
{
auto& queue = samples_[key];
if (queue.size() > window)
{
queue.pop_front();
}
queue.push_back(v);
}
void toJSONArray(Json::Value& node)
{
for (auto& sample : samples_)
{
Json::Value g;
g["name"] = sample.first;
Json::Value& data = g["data"];
for (auto& v : sample.second)
data.append(v);
node.append(g);
}
}
};
Stats stats_;
*/
};

const std::string WebServer::WebServerImpl::SVG_URI = "/graph.svg";
Expand Down Expand Up @@ -237,13 +192,7 @@ std::string WebServer::WebServerImpl::buildJSON()
jtask["time_min"] = format(COCO_MIN_TIME(v.first));
jtask["time_max"] = format(COCO_MAX_TIME(v.first));
stats.append(jtask);
/*
stats_.add("t_" + name, COCO_TIME(v.first));
stats_.put("tm_" + name, tm);
stats_.put("tv_" + name, tv);
*/
}
// stats_.toJSONArray(root["graphs"]);

Json::StreamWriterBuilder builder;
builder["commentStyle"] = "None";
Expand All @@ -265,6 +214,7 @@ void WebServer::WebServerImpl::eventHandler(struct mg_connection* nc, int ev,
struct http_message* hm = (struct http_message*) ev_data;
if (mg_vcmp(&hm->method, "POST") == 0)
{
// handles commands from the web UI
if (mg_vcmp(&hm->uri, "/info") == 0)
{
ws->sendStringHttp(nc, "text/json", ws->buildJSON());
Expand All @@ -290,10 +240,11 @@ void WebServer::WebServerImpl::eventHandler(struct mg_connection* nc, int ev,
}
}
break;
// MG_EV_POLL is generated by mongoose every mg_mgr_poll's polling time
case MG_EV_POLL:
if (nc->flags & MG_F_IS_WEBSOCKET)
{
// TODO do only every x milliseconds, x >= mg_mgr_poll's polling time
// TODO update json only every x milliseconds, x >= mg_mgr_poll's polling time
const auto& json = ws->buildJSON();
mg_send_websocket_frame(nc, WEBSOCKET_OP_TEXT, json.c_str(), json.size());
}
Expand Down

0 comments on commit cd9b52f

Please sign in to comment.