From 6b35a3eb47476a627b881bcfe05bff7161af6c59 Mon Sep 17 00:00:00 2001 From: Danielv123 Date: Tue, 11 Oct 2016 09:30:34 +0200 Subject: [PATCH 1/2] MasterGUI navigation added --- static/index.html | 4 ++-- static/main.js | 25 ++++++++++++++++++++++--- 2 files changed, 24 insertions(+), 5 deletions(-) diff --git a/static/index.html b/static/index.html index ae504e47..30c1d4b9 100644 --- a/static/index.html +++ b/static/index.html @@ -14,10 +14,10 @@ -
+ -
+
diff --git a/static/main.js b/static/main.js index 21f4256c..8d7cecc1 100644 --- a/static/main.js +++ b/static/main.js @@ -3,7 +3,7 @@ contents = { "iron-plate":100, "copper-plate":7312, } - +// nice functions function djb2(str){ var hash = 5381; for (var i = 0; i < str.length; i++) { @@ -20,6 +20,7 @@ function hashColor(str) { return "#" + ("0" + r.toString(16)).substr(-2) + ("0" + g.toString(16)).substr(-2) + ("0" + b.toString(16)).substr(-2); } +// function to draw data we recieve from ajax requests function drawcontents(data) { keys = Object.keys(data); result = ""; @@ -30,6 +31,25 @@ function drawcontents(data) { document.getElementById("contents").innerHTML = result; } +// handle the navigation buttons +function display(page) { + var pages = document.querySelector("#body").childNodes; + for(i=0;i Date: Thu, 13 Oct 2016 13:23:54 +0200 Subject: [PATCH 2/2] MasterGUI basic production chart Work on #8 --- static/index.html | 1 + static/main.js | 84 ++++++++++++++++++++++++++++++++++++++++++++--- 2 files changed, 80 insertions(+), 5 deletions(-) diff --git a/static/index.html b/static/index.html index 30c1d4b9..c734eedf 100644 --- a/static/index.html +++ b/static/index.html @@ -33,6 +33,7 @@
+ \ No newline at end of file diff --git a/static/main.js b/static/main.js index 8d7cecc1..ed6b580e 100644 --- a/static/main.js +++ b/static/main.js @@ -46,10 +46,85 @@ function display(page) { // Function to redraw charts in case they bug out function drawcharts() { + // create chart of items in master storage ctx = document.querySelector("#contentGraph").getContext('2d'); PieChart = new Chart(ctx); + + // production chart + // https://codepen.io/statuswoe/pen/hyldD + var count = 20; + var data = { + labels : ["1","2","3","4","5", "6", "7", "8", "9", "10", "11", "12", "13", "14", "15", "16", "17", "18", "19", "20"], + datasets : [ + { + fillColor : "rgba(220,220,220,0.5)", + strokeColor : "rgba(220,220,220,1)", + pointColor : "rgba(220,220,220,1)", + pointStrokeColor : "#fff", + title:"one", + data : [1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1] + }, + { + fillColor : "rgba(151,187,205,0.5)", + strokeColor : "rgba(151,187,205,1)", + pointColor : "rgba(151,187,205,1)", + pointStrokeColor : "#fff", + title:"two", + data : [1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1] + } + ] + } + // this is ugly, don't judge me + var updateData = function(oldData){ + //console.log(piedata) + var labels = oldData["labels"]; + var dataSetA = oldData["datasets"][0]["data"]; + var dataSetB = oldData["datasets"][1]["data"]; + + labels.shift(); + count++; + labels.push(count.toString()); + // this is where we generate new data + var newDataA = piedata[0].value - piedataOld[0].value; + var newDataB = piedata[1].value - piedataOld[1].value; + dataSetA.push(newDataA); + dataSetB.push(newDataB); + dataSetA.shift(); + dataSetB.shift(); + }; + + // Not sure why the scaleOverride isn't working... + var optionsNoAnimation = { + animation : false, + //Boolean - If we want to override with a hard coded scale + scaleOverride : true, + //** Required if scaleOverride is true ** + //Number - The number of steps in a hard coded scale + scaleSteps : 20, + //Number - The value jump in the hard coded scale + scaleStepWidth : 10, + //Number - The scale starting value + scaleStartValue : 0 + } + + //Get the context of the canvas element we want to select + var ctx = document.getElementById("productionChart").getContext("2d"); + var optionsNoAnimation = {animation : false} + productionChart = new Chart(ctx); + productionChart.Line(data, optionsNoAnimation); + + setInterval(function(){ + updateData(data); + productionChart.Line(data, optionsNoAnimation); + },1000); } +// setTimeout is used to put this processing in the back of the queue, after the HTML canvas is done +setTimeout(function(){ + drawcharts(); +},10) + +var piedata = false; setInterval(function() { var xmlhttp = new XMLHttpRequest(); xmlhttp.onreadystatechange = function() { @@ -57,6 +132,10 @@ setInterval(function() { data = JSON.parse(xmlhttp.responseText); drawcontents(data); // render our piechart with up to date information + // items-in-network-chart + if(piedata) { + piedataOld = piedata; + } piedata = []; for(i=0;i