From 43bcd004458d5a55a41df8595e9a365cc06563fe Mon Sep 17 00:00:00 2001 From: chrono Date: Thu, 28 Nov 2013 23:21:00 +0100 Subject: [PATCH] Stripped js from index.html --- public/assets/css/picoreflow.css | 11 + .../assets/js/jquery.bootstrap-growl.min.js | 1 + public/assets/js/picoreflow.js | 283 +++++++++++++----- public/index.html | 193 ++---------- 4 files changed, 252 insertions(+), 236 deletions(-) create mode 100644 public/assets/js/jquery.bootstrap-growl.min.js diff --git a/public/assets/css/picoreflow.css b/public/assets/css/picoreflow.css index 0b70f33..f8d0bb6 100644 --- a/public/assets/css/picoreflow.css +++ b/public/assets/css/picoreflow.css @@ -109,3 +109,14 @@ background: #3F3E3A; margin-top: 4px; } + +.alert { +background-image: -webkit-gradient(linear,left 0,left 100%,from(#d9534f),to(#c12e2a)); +background-image: -webkit-linear-gradient(top,#d9534f 0,#c12e2a 100%); +background-image: -moz-linear-gradient(top,#d9534f 0,#c12e2a 100%); +background-image: linear-gradient(to bottom,#d9534f 0,#c12e2a 100%); +background-repeat: repeat-x; +border-color: #b92c28; +} + + diff --git a/public/assets/js/jquery.bootstrap-growl.min.js b/public/assets/js/jquery.bootstrap-growl.min.js new file mode 100644 index 0000000..09045f6 --- /dev/null +++ b/public/assets/js/jquery.bootstrap-growl.min.js @@ -0,0 +1 @@ +(function(){var t;t=jQuery,t.bootstrapGrowl=function(e,s){var a,o,l;switch(s=t.extend({},t.bootstrapGrowl.default_options,s),a=t("
"),a.attr("class","bootstrap-growl alert"),s.type&&a.addClass("alert-"+s.type),s.allow_dismiss&&a.append('×'),a.append(e),s.top_offset&&(s.offset={from:"top",amount:s.top_offset}),l=s.offset.amount,t(".bootstrap-growl").each(function(){return l=Math.max(l,parseInt(t(this).css(s.offset.from))+t(this).outerHeight()+s.stackup_spacing)}),o={position:"body"===s.ele?"fixed":"absolute",margin:0,"z-index":"9999",display:"none"},o[s.offset.from]=l+"px",a.css(o),"auto"!==s.width&&a.css("width",s.width+"px"),t(s.ele).append(a),s.align){case"center":a.css({left:"50%","margin-left":"-"+a.outerWidth()/2+"px"});break;case"left":a.css("left","20px");break;default:a.css("right","20px")}return a.fadeIn(),s.delay>0&&a.delay(s.delay).fadeOut(function(){return t(this).alert("close")}),a},t.bootstrapGrowl.default_options={ele:"body",type:"info",offset:{from:"top",amount:20},align:"right",width:250,delay:4e3,allow_dismiss:!0,stackup_spacing:10}}).call(this); diff --git a/public/assets/js/picoreflow.js b/public/assets/js/picoreflow.js index 6522b4f..4b8ee1e 100644 --- a/public/assets/js/picoreflow.js +++ b/public/assets/js/picoreflow.js @@ -1,10 +1,19 @@ +var state = "IDLE"; +var graph; +var profiles = []; +var selected_profile = 0; +var selected_profile_name = "leadfree"; +var host = "ws://" + window.location.hostname + ":8080"; +var ws_status = new WebSocket(host+"/status"); +var ws_control = new WebSocket(host+"/control"); +var ws_storage = new WebSocket(host+"/storage"); -function updateProgress(percentage){ +function updateProgress(percentage, eta){ if(state=="RUNNING") { if(percentage > 100) percentage = 100; $('#progressBar').css('width', percentage+'%'); - if(percentage>=5) $('#progressBar').html(parseInt(percentage)+'%'); + if(percentage>9) $('#progressBar').html(parseInt(percentage)+'% - '+ eta); } else { $('#progressBar').css('width', 0+'%'); $('#progressBar').html(''); @@ -18,7 +27,7 @@ function runTask() { "profile": profiles[selected_profile] } - console.log(JSON.stringify(test)); + //console.log(JSON.stringify(test)); ws_control.send(JSON.stringify(test)); graph.series[1].setData([]); @@ -27,7 +36,7 @@ function runTask() { function abortTask() { var test = {"cmd": "STOP"}; - console.log(JSON.stringify(test)); + //console.log(JSON.stringify(test)); ws_control.send(JSON.stringify(test)); } @@ -63,13 +72,34 @@ function leaveEditMode() { function saveProfile() { name = $('#form_profile_name').val(); - console.log('Trying to save profile: ' + name); + //console.log('Trying to save profile: ' + name); var rawdata = graph.series[0].data; var data = []; + var last = -1; for(var i=0; i last) + { + data.push([rawdata[i].x, rawdata[i].y]); + } + else + { + $.bootstrapGrowl(" ERROR 88:
An oven is not a time-machine", { + ele: 'body', // which element to append to + type: 'alert', // (null, 'info', 'error', 'success') + offset: {from: 'top', amount: 250}, // 'top', or 'bottom' + align: 'center', // ('left', 'right', or 'center') + width: 385, // (integer, or 'auto') + delay: 5000, + allow_dismiss: true, + stackup_spacing: 10 // spacing between consecutively stacked growls. + }); + + return false; + } + + last = rawdata[i].x; } var profile = { "type": "profile", "data": data, "name": name } @@ -79,7 +109,7 @@ function saveProfile() { ws_storage.send(put_cmd); - console.log('came to this: ' + put_cmd); + //console.log('came to this: ' + put_cmd); selected_profile_name = name; @@ -89,10 +119,10 @@ function saveProfile() { function update_profile(id) { - console.log('Profile selected:' + profiles[id].name); + //console.log('Profile selected:' + profiles[id].name); selected_profile = id; $('#sel_prof').html(profiles[id].name); - console.log(graph.series); + //console.log(graph.series); graph.series[0].setData(profiles[id].data); } @@ -376,12 +406,13 @@ function getHCOptions() { type: 'line', renderTo: 'graph_container', animation: true, - zoomType: 'x', + //zoomType: 'x', marginTop: 30, marginRight: 30, events: { load: function() { var series = this.series[1]; + eta=0; ws_status.onmessage = function(e) @@ -390,12 +421,31 @@ function getHCOptions() { if(state!="EDIT") { - state = x.state; + state = x.state; + + if(state=="RUNNING") + { + $("#nav_start").hide(); + $("#nav_stop").show(); + series.addPoint([x.runtime, x.temperature], true, false); + + left = parseInt(x.totaltime-x.runtime); + var minutes = Math.floor(left / 60); + var seconds = left - minutes * 60; + eta = minutes+':'+ (seconds < 10 ? "0" : "") + seconds; + + } + else + { + $("#nav_start").show(); + $("#nav_stop").hide(); + } + } $('#state').html(state); - updateProgress(parseFloat(x.runtime)/parseFloat(x.totaltime)*100); + updateProgress(parseFloat(x.runtime)/parseFloat(x.totaltime)*100,eta); $('#act_temp').html(Highcharts.numberFormat(x.temperature, 0) + ' \xB0C'); $('#power').css("background-color", (x.power > 0.5 ? "#75890c" : "#1F1E1A") ); @@ -408,66 +458,8 @@ function getHCOptions() { else { $('#target_temp').html(Highcharts.numberFormat(x.target, 0) + ' \xB0C'); - } - //console.log (e.data); - //console.log('Percent finished:' + perc); - - if(state!="EDIT") - { - - if(state=="RUNNING") - { - $("#nav_start").hide(); - $("#nav_stop").show(); - series.addPoint([x.runtime, x.temperature], true, false); - - left = parseInt(x.totaltime-x.runtime); - var minutes = Math.floor(left / 60); - var seconds = left - minutes * 60; - $('#eta').html(minutes+':'+ (seconds < 10 ? "0" : "") + seconds); - - } - else - { - $("#nav_start").show(); - $("#nav_stop").hide(); } } - - } - - /* - var socket = io.connect('http://10.1.1.110:8080'); - socket.on('sample', function (sample) { - // when a sample arrives we plot it - series.addPoint([sample.x, sample.y], true, false); - $('#act_temp').html(Highcharts.numberFormat(sample.y, 0) + ' \xB0C'); - - - }); - - socket.on('error', function () { - - $(document).trigger("add-alerts", [ - { - 'message': "No communication to control server", - 'priority': 'error' - } - ]); - - - }) - - // Called when the connection to the server is opened. - socket.onopen = function () { - alert("Connection with server open."); - }; - - // Called when the connection to the server is closed. - socket.onclose = function () { - alert("Connection with server closed; Maybe the server wasn't found, it shut down or you're behind a firewall/proxy."); - }; -*/ } }, resetZoomButton: { @@ -480,7 +472,7 @@ function getHCOptions() { plotOptions: { series: { - cursor: 'all-scroll', + cursor: 'move', point: { events: { /* @@ -534,3 +526,152 @@ function getHCOptions() { return (options); } + + + +$(document).ready(function() { + + if(!("WebSocket" in window)){ + $('#chatLog, input, button, #examples').fadeOut("fast"); + $('

Oh no, you need a browser that supports WebSockets. How about Google Chrome?

').appendTo('#container'); + }else{ + + +// Status Socket //////////////////////////////// + +ws_status.onopen = function() +{ + console.log("Status Socket has been opened"); +}; + +ws_status.onclose = function() +{ + $.bootstrapGrowl(" ERROR 1:
Status Websocket not available", { + ele: 'body', // which element to append to + type: 'alert', // (null, 'info', 'error', 'success') + offset: {from: 'top', amount: 250}, // 'top', or 'bottom' + align: 'center', // ('left', 'right', or 'center') + width: 385, // (integer, or 'auto') + delay: 5000, + allow_dismiss: true, + stackup_spacing: 10 // spacing between consecutively stacked growls. + }); +}; + + +// Control Socket //////////////////////////////// + + +ws_control.onopen = function() +{ + ws_control.onmessage = function(e) + { + console.log (e.data); + } + + console.log("Control Socket has been opened"); +} + + +// Storage Socket /////////////////////////////// + +ws_storage.onopen = function() +{ + console.log("Storage Socket has been opened"); + + ws_storage.onmessage = function(e) + { + console.log('Storage MSG:' + e.data); + + message = JSON.parse(e.data); + + console.log("Parsed message:" + message); + + if(message.resp) + { + console.log("RESP"); + if(message.resp == "FAIL") + { + console.log("FAIL"); + if (confirm('Overwrite?')) { + //message.cmd="PUT"; + message.force=true; + console.log("Sending: " + JSON.stringify(message)); + ws_storage.send(JSON.stringify(message)); + } else { + //do nothing + } + } + return; + } + //the message is an array of profiles + //FIXME: this should be better, maybe a {"profiles": ...} container? + profiles = message; + //delete old options in select + $('#e2') + .find('option') + .remove() + .end(); + + // fill select with new options from websocket + for (var i=0; i'+profile.name+''); + + if (profile.name == selected_profile_name) + { + console.log('Matchiemazvhie'); + selected_profile = i; + $('#e2').select2('val', i); + update_profile(i); + } + + } + + graph.render(); + + } + + console.log('Requesting stored profiles'); + ws_storage.send('GET'); +} + + + +$("#e2").select2({ + placeholder: "Select Profile", + allowClear: false +}); + + +$("#e2").on("change", function(e) { + update_profile(e.val); +}); + + + +// Apply the theme +var highchartsOptions = Highcharts.setOptions(Highcharts.theme); + + +$(function() { + Highcharts.setOptions({ + global: { + useUTC: false + } + }); + +graph = new Highcharts.Chart(getHCOptions()); + + +}); + + + + } +}); + + + diff --git a/public/index.html b/public/index.html index 68ccd2e..7c7aff0 100644 --- a/public/index.html +++ b/public/index.html @@ -4,14 +4,15 @@ PicoReflow + + - @@ -27,8 +28,9 @@ 25 °C OFF Idle - -   +   +  
@@ -53,10 +55,9 @@ - +
-
@@ -71,169 +72,31 @@ - + - - - - -