Skip to content

Commit

Permalink
Improve print speed indicators (issue hudbrog#71)
Browse files Browse the repository at this point in the history 
Get rid of the repeating colors and use a gradient instead.
Also sort the speed listings.
Also fix missing initialization of mm^3/sec arrays that caused bogus
values to be displayed.
I bet multiple people have already done something similar in their
forks, but I'd like to see this on http://gcode.ws/.
  • Loading branch information
@DrLex0
DrLex0 committed Feb 16, 2020
1 parent 65807cc commit e58a064
Show file tree
Hide file tree
Showing 4 changed files with 134 additions and 43 deletions.
39 changes: 32 additions & 7 deletions js/Worker.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,8 +13,9 @@
purgeEmptyLayers: true,
analyzeModel: false
};
var max = {x: undefined, y: undefined, z: undefined};
var min = {x: undefined, y: undefined, z: undefined};
// Only print move speeds will be considered in max.speed and min.speed
var max = {x: undefined, y: undefined, z: undefined, speed: undefined, volSpeed: undefined, extrSpeed: undefined};
var min = {x: undefined, y: undefined, z: undefined, speed: undefined, volSpeed: undefined, extrSpeed: undefined};
var modelSize = {x: undefined, y: undefined, z: undefined};
var filamentByLayer = {};
var filamentByExtruder = {};
Expand Down Expand Up @@ -206,8 +207,14 @@

if(cmds[j].extrude&&cmds[j].retract === 0&&x_ok&&y_ok){
// we are extruding
var volPerMM = cmds[j].volPerMM;
volPerMM = parseFloat(volPerMM).toFixed(3);
max.speed = parseFloat(max.speed)>parseFloat(cmds[j].speed) ? parseFloat(max.speed):parseFloat(cmds[j].speed);
min.speed = parseFloat(min.speed)<parseFloat(cmds[j].speed) ? parseFloat(min.speed):parseFloat(cmds[j].speed);

var volPerMM = parseFloat(cmds[j].volPerMM);
max.volSpeed = parseFloat(max.volSpeed)>volPerMM ? parseFloat(max.volSpeed):volPerMM;
min.volSpeed = parseFloat(min.volSpeed)<volPerMM ? parseFloat(min.volSpeed):volPerMM;
volPerMM = volPerMM.toFixed(3);

var volIndex = volSpeeds.indexOf(volPerMM);
if(volIndex === -1){
volSpeeds.push(volPerMM);
Expand All @@ -221,7 +228,10 @@
}

var extrusionSpeed = cmds[j].volPerMM*(cmds[j].speed/60);
extrusionSpeed = parseFloat(extrusionSpeed).toFixed(3);
extrusionSpeed = parseFloat(extrusionSpeed);
max.extrSpeed = parseFloat(max.extrSpeed)>extrusionSpeed ? parseFloat(max.extrSpeed):extrusionSpeed;
min.extrSpeed = parseFloat(min.extrSpeed)<extrusionSpeed ? parseFloat(min.extrSpeed):extrusionSpeed;
extrusionSpeed = extrusionSpeed.toFixed(3);
var volIndex = extrusionSpeeds.indexOf(extrusionSpeed);
if(volIndex === -1){
extrusionSpeeds.push(extrusionSpeed);
Expand All @@ -231,6 +241,11 @@
extrusionSpeedsByLayer[cmds[j].prevZ] = [];
}
if(extrusionSpeedsByLayer[cmds[j].prevZ].indexOf(extrusionSpeed) === -1){
// Array elements will NOT necessarily be set to undefined when
// assigning beyond the current array length, so do it explicitly.
for(var k=extrusionSpeedsByLayer[cmds[j].prevZ].length; k<volIndex; k++) {
extrusionSpeedsByLayer[cmds[j].prevZ].push(undefined);
}
extrusionSpeedsByLayer[cmds[j].prevZ][volIndex] = extrusionSpeed;
}
}
Expand All @@ -248,6 +263,16 @@
modelSize.z = Math.abs(max.z - min.z);
layerHeight = (max.z-min.z)/(layerCnt-1);

if(max.speed == min.speed) {
max.speed = min.speed+1.0;
}
if(max.volSpeed == min.volSpeed) {
max.volSpeed = min.volSpeed+1.0;
}
if(max.extrSpeed == min.extrSpeed) {
max.extrSpeed = min.extrSpeed+1.0;
}

sendAnalyzeDone();
};

Expand Down Expand Up @@ -521,8 +546,8 @@
firstReport = undefined;
z_heights = {};
model = [];
max = {x: undefined, y: undefined, z: undefined};
min = {x: undefined, y: undefined, z: undefined};
max = {x: undefined, y: undefined, z: undefined, speed: undefined, volSpeed: undefined, extrSpeed: undefined};
min = {x: undefined, y: undefined, z: undefined, speed: undefined, volSpeed: undefined, extrSpeed: undefined};
modelSize = {x: undefined, y: undefined, z: undefined};
filamentByLayer = {};
filamentByExtruder = {};
Expand Down
4 changes: 2 additions & 2 deletions js/gCodeReader.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,8 +9,8 @@ GCODE.gCodeReader = (function(){
var gcode, lines;
var z_heights = {};
var model = [];
var max = {x: undefined, y: undefined, z: undefined};
var min = {x: undefined, y: undefined, z: undefined};
var max = {x: undefined, y: undefined, z: undefined, speed: undefined, volSpeed: undefined, extrSpeed: undefined};
var min = {x: undefined, y: undefined, z: undefined, speed: undefined, volSpeed: undefined, extrSpeed: undefined};
var modelSize = {x: undefined, y: undefined, z: undefined};
var filamentByLayer = {};
var filamentByExtruder = {};
Expand Down
51 changes: 47 additions & 4 deletions js/renderer.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -32,6 +32,7 @@ GCODE.renderer = (function(){
// colorLine: ["#000000", "#aabb88", "#ffe7a0", "#6e7700", "#331a00", "#44ba97", "#08262f", "#db0e00", "#ff9977"],
colorLine: ["#000000", "#45c7ba", "#a9533a", "#ff44cc", "#dd1177", "#eeee22", "#ffbb55", "#ff5511", "#777788", "#ff0000", "#ffff00"],
colorLineLen: 9,
gradientColors: [[110,64,110], [0,0,255], [0,255,255], [0,170,0], [232,232,0], [170,0,0], [255,0,255]],
colorMove: "#00ff00",
colorRetract: "#ff0000",
colorRestart: "#0000ff",
Expand All @@ -54,7 +55,36 @@ GCODE.renderer = (function(){
var volSpeedsByLayer = {};
var extrusionSpeeds = [];
var extrusionSpeedsByLayer = {};
var max = {};
var min = {};

var rgbToColor = function(r, g, b) {
var rString = Math.round(r).toString(16);
var gString = Math.round(g).toString(16);
var bString = Math.round(b).toString(16);
if(rString.length < 2) { rString = '0' + rString; }
if(gString.length < 2) { gString = '0' + gString; }
if(bString.length < 2) { bString = '0' + bString; }
return '#' + rString + gString + bString;
}

var gradientColor = function(scale) {
// There's still a rounding error somewhere, hence the .1.
// I leave it to some diligent programmer to find and fix this.
if(scale < -0.1 || scale > 1.1) {
return "#000000";
}
if(scale > 1) { scale=1; }
else if(scale < 0) { scale=0; }
var numSegments = renderOptions['gradientColors'].length;
var leftIndex = Math.floor(scale*(numSegments-1));
var mix = scale*(numSegments-1) - leftIndex;
var leftColor = renderOptions['gradientColors'][leftIndex];
var rightColor = renderOptions['gradientColors'][Math.ceil(scale*(numSegments-1))];
return rgbToColor(leftColor[0]*(1.0-mix)+rightColor[0]*mix,
leftColor[1]*(1.0-mix)+rightColor[1]*mix,
leftColor[2]*(1.0-mix)+rightColor[2]*mix);
}

var reRender = function(){
var gCodeOpts = GCODE.gCodeReader.getOptions();
Expand Down Expand Up @@ -214,7 +244,7 @@ GCODE.renderer = (function(){
};

var drawLayer = function(layerNum, fromProgress, toProgress, isNextLayer){
var i, speedIndex= 0, prevZ = 0;
var i, speedIndex= 0, prevZ = 0, speedScale = 0;
isNextLayer = typeof isNextLayer !== 'undefined' ? isNextLayer : false;
if(!isNextLayer){
layerNumStore=layerNum;
Expand Down Expand Up @@ -280,12 +310,17 @@ GCODE.renderer = (function(){
// if(speedsByLayer['extrude'][prevZ]){
if(renderOptions['speedDisplayType'] === displayType.speed){
speedIndex = speeds['extrude'].indexOf(cmds[i].speed);
speedScale = (cmds[i].speed - min.speed)/(max.speed-min.speed);
}else if(renderOptions['speedDisplayType'] === displayType.expermm){
speedIndex = volSpeeds.indexOf(cmds[i].volPerMM);
speedScale = (cmds[i].volPerMM - min.volSpeed)/(max.volSpeed-min.volSpeed);
}else if(renderOptions['speedDisplayType'] === displayType.volpersec){
speedIndex = extrusionSpeeds.indexOf((cmds[i].volPerMM*cmds[i].speed/60).toFixed(3));
var volpersec = (cmds[i].volPerMM*cmds[i].speed/60).toFixed(3);
speedIndex = extrusionSpeeds.indexOf(volpersec);
speedScale = (volpersec - min.extrSpeed)/(max.extrSpeed-min.extrSpeed);
}else{
speedIndex=0;
speedIndex = 0;
speedScale = -1;
}
// speedIndex = GCODE.ui.ArrayIndexOf(speedsByLayer['extrude'][prevZ], function(obj) {return obj.speed === cmds[i].speed;});
// } else {
Expand Down Expand Up @@ -348,7 +383,10 @@ GCODE.renderer = (function(){
}
else if(cmds[i].extrude){
if(cmds[i].retract==0){
if(speedIndex>=0){
if(speedScale>=0) {
ctx.strokeStyle = gradientColor(speedScale);
}
else if(speedIndex>=0){
ctx.strokeStyle = renderOptions["colorLine"][speedIndex];
}else if(speedIndex===-1){
var val = parseInt(cmds[i].errLevelB).toString(16);
Expand Down Expand Up @@ -475,6 +513,8 @@ GCODE.renderer = (function(){
volSpeedsByLayer = mdlInfo.volSpeedsByLayer;
extrusionSpeeds = mdlInfo.extrusionSpeeds;
extrusionSpeedsByLayer = mdlInfo.extrusionSpeedsByLayer;
max = mdlInfo.max;
min = mdlInfo.min;
// console.log(speeds);
// console.log(mdlInfo.min.x + ' ' + mdlInfo.modelSize.x);
offsetModelX = (gridSizeX/2-(mdlInfo.min.x+mdlInfo.modelSize.x/2))*zoomFactor;
Expand All @@ -499,6 +539,9 @@ GCODE.renderer = (function(){
if(cmds[i].prevZ!==undefined)return cmds[i].prevZ;
}
return '-1';
},
getGradientColor: function(scale){
return gradientColor(scale);
}

}
Expand Down
83 changes: 53 additions & 30 deletions js/ui.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -39,35 +39,47 @@ GCODE.ui = (function(){
var prepareSpeedsInfo = function(layerNum){
var z = GCODE.renderer.getZ(layerNum);
var layerSpeeds = GCODE.gCodeReader.getModelInfo().speedsByLayer;
var max = GCODE.gCodeReader.getModelInfo().max;
var min = GCODE.gCodeReader.getModelInfo().min;
var renderOptions = GCODE.renderer.getOptions();
var colors = renderOptions["colorLine"];
var colorLen = renderOptions['colorLineLen'];
var speedIndex = 0;
var output = [];
var sortMe = {};
var sortKeys = [];
var i;
var spd;
var scale;

output.push("Extrude speeds:");
for(i=0;i<layerSpeeds['extrude'][z].length;i++){
if(typeof(layerSpeeds['extrude'][z][i])==='undefined'){continue;}
speedIndex = i;
if(speedIndex > colorLen -1){speedIndex = speedIndex % (colorLen-1);}
output.push("<div id='colorBox"+i+"' class='colorBox' style='background-color: "+colors[speedIndex] + "'></div> = " + (parseFloat(layerSpeeds['extrude'][z][i])/60).toFixed(2)+"mm/s");
spd = parseFloat(layerSpeeds['extrude'][z][i]);
scale = (spd - min.speed)/(max.speed-min.speed);
spd = (spd/60).toFixed(2);
sortMe[spd] = "<div id='colorBox"+i+"' class='colorBox' style='background-color: "+ GCODE.renderer.getGradientColor(scale) + "'></div> = " + spd+"mm/s";
}
sortKeys = Object.keys(sortMe).sort((a, b) => b - a);
for(i=0;i<sortKeys.length;i++) {
output.push(sortMe[sortKeys[i]]);
}

if(typeof(layerSpeeds['move'][z]) !== 'undefined'){
output.push("Move speeds:");
for(i=0;i<layerSpeeds['move'][z].length;i++){
if(typeof(layerSpeeds['move'][z][i])==='undefined'){continue;}
speedIndex = i;
if(speedIndex > colorLen -1){speedIndex = speedIndex % (colorLen-1);}
output.push("<div id='colorBox"+i+"' class='colorBox' style='background-color: "+renderOptions['colorMove'] + "'></div> = " + (parseFloat(layerSpeeds['move'][z][i])/60).toFixed(2)+"mm/s");
spd = (parseFloat(layerSpeeds['move'][z][i])/60).toFixed(2);
sortMe[spd] = "<div id='colorBox"+i+"' class='colorBox' style='background-color: "+renderOptions['colorMove'] + "'></div> = " + spd+"mm/s";
}
}
sortKeys = Object.keys(sortMe).sort((a, b) => b - a);
for(i=0;i<sortKeys.length;i++) {
output.push(sortMe[sortKeys[i]]);
}

if(typeof(layerSpeeds['retract'][z]) !== 'undefined'){
output.push("Retract speeds:");
for(i=0;i<layerSpeeds['retract'][z].length;i++){
if(typeof(layerSpeeds['retract'][z][i])==='undefined'){continue;}
speedIndex = i;
if(speedIndex > colorLen -1){speedIndex = speedIndex % (colorLen-1);}
output.push("<span style='color: " + renderOptions['colorRetract'] +"'>&#9679;</span> <span style='color: " + renderOptions['colorRestart'] +"'>&#9679;</span> = " +(parseFloat(layerSpeeds['retract'][z][i])/60).toFixed(2)+"mm/s");
}
}
Expand All @@ -78,19 +90,26 @@ GCODE.ui = (function(){
var prepareExPerMMInfo = function(layerNum){
var z = GCODE.renderer.getZ(layerNum);
var layerSpeeds = GCODE.gCodeReader.getModelInfo().volSpeedsByLayer;
var renderOptions = GCODE.renderer.getOptions();
var colors = renderOptions["colorLine"];
var colorLen = renderOptions['colorLineLen'];
var speedIndex = 0;
var max = GCODE.gCodeReader.getModelInfo().max;
var min = GCODE.gCodeReader.getModelInfo().min;
var output = [];
var sortMe = {};
var sortKeys = [];
var i;
var spd;
var scale;

output.push("Extrude speeds in extrusion mm per move mm:");
for(i=0;i<layerSpeeds[z].length;i++){
if(typeof(layerSpeeds[z][i])==='undefined'){continue;}
speedIndex = i;
if(speedIndex > colorLen -1){speedIndex = speedIndex % (colorLen-1);}
output.push("<div id='colorBox"+i+"' class='colorBox' style='background-color: "+colors[speedIndex] + "'></div> = " + (parseFloat(layerSpeeds[z][i])).toFixed(3)+"mm/mm");
spd = parseFloat(layerSpeeds[z][i]);
scale = (spd - min.volSpeed)/(max.volSpeed-min.volSpeed);
spd = spd.toFixed(3);
sortMe[spd] = "<div id='colorBox"+i+"' class='colorBox' style='background-color: "+ GCODE.renderer.getGradientColor(scale) + "'></div> = " + spd+"mm/mm";
}
sortKeys = Object.keys(sortMe).sort((a, b) => b - a);
for(i=0;i<sortKeys.length;i++) {
output.push(sortMe[sortKeys[i]]);
}

return output;
Expand All @@ -99,27 +118,31 @@ GCODE.ui = (function(){
var prepareVolPerSecInfo = function(layerNum){
var z = GCODE.renderer.getZ(layerNum);
var layerSpeeds = GCODE.gCodeReader.getModelInfo().extrusionSpeedsByLayer;
var renderOptions = GCODE.renderer.getOptions();
var max = GCODE.gCodeReader.getModelInfo().max;
var min = GCODE.gCodeReader.getModelInfo().min;
var gCodeOptions = GCODE.gCodeReader.getOptions();
var colors = renderOptions["colorLine"];
var colorLen = renderOptions['colorLineLen'];
var speedIndex = 0;
var output = [];
var sortMe = {};
var sortKeys = [];
var i;
var spd;
var spd;
var scale

output.push("Extrude speeds in mm^3/sec:");
for(i=0;i<layerSpeeds[z].length;i++){
if(typeof(layerSpeeds[z][i])==='undefined'){continue;}
speedIndex = i;
if(speedIndex > colorLen -1){speedIndex = speedIndex % (colorLen-1);}

spd = parseFloat(layerSpeeds[z][i]);
if(!gCodeOptions.volumetricE) {
spd *= Math.PI * Math.pow(gCodeOptions.filamentDia / 2, 2);
}

output.push("<div id='colorBox"+i+"' class='colorBox' style='background-color: "+colors[speedIndex] + "'></div> = " + spd.toFixed(3) +"mm^3/sec");
spd = parseFloat(layerSpeeds[z][i]);
scale = (spd - min.extrSpeed)/(max.extrSpeed-min.extrSpeed);
if(!gCodeOptions.volumetricE) {
spd *= Math.PI * Math.pow(gCodeOptions.filamentDia / 2, 2);
}
spd = spd.toFixed(1);
sortMe[spd] = "<div id='colorBox"+i+"' class='colorBox' style='background-color: " + GCODE.renderer.getGradientColor(scale) + "'></div> = " + spd +"mm^3/sec";
}
sortKeys = Object.keys(sortMe).sort((a, b) => b - a);
for(i=0;i<sortKeys.length;i++) {
output.push(sortMe[sortKeys[i]]);
}

return output;
Expand Down

0 comments on commit e58a064

Please sign in to comment.