Skip to content

Graphing improvements #1045

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
zfi merged 4 commits into from
May 13, 2017
Merged

Graphing improvements #1045

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
260d877
disable show graph button in s3 type
May 13, 2017
559cf54
add live values to graph labels
May 13, 2017
4c42275
add CSV download button and functions
May 13, 2017
1be6cd6
Round timestamp in CSV export
May 13, 2017
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion src/main/webapp/WEB-INF/includes/pageparts/editor-menu.jsp
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -51,7 +51,7 @@
<a onclick="serial_console()" data-toggle="tooltip" title="Open Serial Terminal" data-placement="bottom" class="btn btn-primary btn-circle"><svg xmlns="http://www.w3.org/2000/svg" width="14" height="15"><rect x="1" y="1" width="12" height="13" rx="1" ry="1" style="stroke:#fff;stroke-width:2;fill:none;"/><path d="M3,4.5 L10,4.5 M3,6.5 L6,6.5 M3,8.5 L8,8.5" style="stroke:#fff;stroke-width:1;fill:none;"/></svg></a>
<c:choose>
<c:when test="${experimental == true}">
<a onclick="graphing_console()" data-toggle="tooltip" title="Open Graphing Output" data-placement="bottom" class="btn btn-primary btn-circle"><svg xmlns="http://www.w3.org/2000/svg" width="13" height="14">
<a onclick="graphing_console()" data-toggle="tooltip" title="Open Graphing Output" data-placement="bottom" class="btn btn-primary btn-circle" id="open-graph-output"><svg xmlns="http://www.w3.org/2000/svg" width="13" height="14">
<path d="M.5,0 L.5,13.5 L12.5,13.5 M3.5,0 L3.5,13.5 M6.5,0 L6.5,13.5 M9.5,0 L9.5,13.5 M12.5,0 L12.5,13.5 M.5,3.5 L12.5,3.5 M.5,7 L12.5,7 M.5,10.5 L12.5,10.5 M.5,.5 L12.5,.5" style="stroke:rgba(255,255,255,.6);stroke-width:1;fill:none;"/>
<path d="M0,13 L6,5 L9,8 L14,2" style="stroke:#fff;stroke-width:2;fill:none;"/>
</svg></a>
Expand Down
61 changes: 54 additions & 7 deletions src/main/webapp/cdn/blocklyc.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,6 +27,7 @@ var graph_time_multiplier = 0;
var graph_interval_id = null;
var fullCycleTime = 4294967296 / 80000000;
var graph_labels = null;
var graph_csv_data = new Array;

var console_header_arrived = false;
var console_header = null;
Expand Down Expand Up @@ -581,16 +582,21 @@ function graph_new_data(stream) {
} else {
graph_temp_data[row].unshift(ts + graph_time_multiplier -
graph_timestamp_start + graph_timestamp_restart);
for (j = 2; j < graph_temp_data[row].length; j++) {
var graph_csv_temp = (Math.round(graph_temp_data[row][0] * 10000) / 10000) + ',';
for (var j = 2; j < graph_temp_data[row].length; j++) {
graph_csv_temp += graph_temp_data[row][j] + ',';
graph_data.series[j - 2].push({
x: graph_temp_data[row][0],
y: graph_temp_data[row][j] || null
});
if (graph_temp_data[row][0] > graph_options.sampleTotal)
graph_data.series[j - 2].shift();
}
graph_csv_data.push(graph_csv_temp.slice(0, -1).split(','));
}



/*
var read_serial_to_div = '';
for (var l = 0; l < graph_temp_data[row].length; l++)
Expand All @@ -616,6 +622,8 @@ function graph_reset() {
graph_interval_id = null;
graph_temp_data = null;
graph_temp_data = new Array;
graph_csv_data = null;
graph_csv_data = new Array;
graph_data = {
series: [// add more here for more possible lines...
[],
Expand Down Expand Up @@ -697,19 +705,58 @@ function downloadGraph() {
});
}

function downloadCSV() {
utils.prompt("Download Graph data as CSV - Filename:", 'graph_data' + idProject, function (value) {
if (value) {

// put all of the pieces together into a downloadable file
var saveData = (function () {
var a = document.createElement("a");
document.body.appendChild(a);
a.style = "display: none";
return function (data, fileName) {
var blob = new Blob([data], {type: "octet/stream"});
var url = window.URL.createObjectURL(blob);
a.href = url;
a.download = fileName;
a.click();
window.URL.revokeObjectURL(url);
};
}());
var graph_csv_temp = graph_csv_data.join('\n');
var idx1 = graph_csv_temp.indexOf('\n') + 1;
var idx2 = graph_csv_temp.indexOf('\n', idx1 + 1);
saveData(graph_csv_temp.substring(0, idx1) + graph_csv_temp.substring(idx2 + 1, graph_csv_temp.length - 1), value + '.csv');
}
});
}

function graph_new_labels() {
var graph_csv_temp = '';
var labelsvg = '<svg width="60" height="300">';
graph_csv_temp += '"time",';
for (var t = 0; t < graph_labels.length; t++) {
labelsvg += '<g id="labelgroup' + (t+1) + '" transform="translate(0,' + (t*25+35) + ')">';
labelsvg += '<path id="label' + (t+1) + '" class="ct-marker-' + (t+1);
labelsvg += '" d="M0,6 L5,0 58,0 59,1 60,2 60,10 59,11 58,12 5,12 Z"/>';
labelsvg += '<text id="label' + (t+1) + 'text" x="6" y="10" style="font-family:';
labelsvg += 'Arial;font-size: 10px;fill:#fff; font-weight:bold;">' + graph_labels[t] + '</text></g>';
labelsvg += '<g id="labelgroup' + (t + 1) + '" transform="translate(0,' + (t * 30 + 25) + ')">';
labelsvg += '<rect x="0" y = "0" width="60" height="26" rx="3" ry="3" id="label' + (t + 1) + '" ';
labelsvg += 'style="stroke:1px;stroke-color:blue;" class="ct-marker-' + (t + 1) + '"/><rect x="3" y = "12"';
labelsvg += 'width="54" height="11" rx="3" ry="3" id="value' + (t + 1) + 'bkg" style="fill:rgba';
labelsvg += '(255,255,255,.7);stroke:none;"/><text id="label' + (t + 1) + 'text" x="3" ';
labelsvg += 'y="9" style="font-family:Arial;font-size: 9px;fill:#fff;font-weight:bold;">' + graph_labels[t];
labelsvg += '</text><text id="gValue' + (t + 1) + '" x="5" y="21" style="align:right;';
labelsvg += 'font-family:Arial;font-size: 10px;fill:#000;"></text></g>';
graph_csv_temp += '"' + graph_labels[t].replace(/"/g, '_') + '",';
}
labelsvg += '</svg>';
graph_csv_data.push(graph_csv_temp.slice(0, -1));
$('#serial_graphing_labels').html(labelsvg);
}

function graph_update_labels() {

var row = graph_temp_data.length - 1;
if (graph_temp_data[row]) {
var col = graph_temp_data[row].length;
for (var w = 2; w < col; w++) {
document.getElementById('gValue' + (w - 1).toString(10)).textContent = graph_temp_data[row][w];
}
}
}
2 changes: 2 additions & 0 deletions src/main/webapp/cdn/editor.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -144,9 +144,11 @@ loadProject = function () {
}
if (projectData['board'] === 's3' && type === 'PROPC') {
$('#load-ram-button').addClass('hidden');
$('#open-graph-output').addClass('hidden');
document.getElementById('client-available').innerHTML = document.getElementById('client-available-short').innerHTML;
} else {
$('#load-ram-button').removeClass('hidden');
$('#open-graph-output').removeClass('hidden');
document.getElementById('client-available').innerHTML = document.getElementById('client-available-long').innerHTML;
}
};
Expand Down
5 changes: 3 additions & 2 deletions src/main/webapp/editor/blocklyc.jsp
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -149,8 +149,9 @@
</table>
</div>
<div class="modal-footer clearfix">
<button type="button" id="btn-graph-play" class="btn btn-primary btn-circle pull-left" onclick="graph_play();"><i class="glyphicon glyphicon-pause"></i></button>&nbsp;
<button type="button" id="btn-graph-snapshot" class="btn btn-success btn-circle pull-left" onclick="downloadGraph();"><i class="glyphicon glyphicon-camera"></i></button>
<button type="button" id="btn-graph-play" data-toggle="tooltip" title="Pause/Resume the graph" data-placement="bottom" class="btn btn-primary btn-circle pull-left" onclick="graph_play();"><i class="glyphicon glyphicon-pause"></i></button>&nbsp;
<button type="button" id="btn-graph-snapshot" data-toggle="tooltip" title="Download a snapshot of the graph" data-placement="bottom" class="btn btn-success btn-circle pull-left" onclick="downloadGraph();"><i class="glyphicon glyphicon-camera"></i></button>&nbsp;
<button type="button" id="btn-graph-csv" data-toggle="tooltip" title="Download graph data as CSV" data-placement="bottom" class="btn btn-success btn-circle pull-left" onclick="downloadCSV();"><i class="glyphicon glyphicon-file"></i></button>
<button type="button" class="btn btn-default" data-dismiss="modal"><fmt:message key="editor.button.close" /></button>
</div>
</div><!-- /.modal-content -->
Expand Down