Skip to content

Commit e58a064

Browse files
DrLex0DrLex0
committed
Improve print speed indicators (issue hudbrog#71)
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/.
1 parent 65807cc commit e58a064

File tree

4 files changed

+134
-43
lines changed

4 files changed

+134
-43
lines changed

‎js/Worker.js

+32-7
Original file line numberDiff line numberDiff line change
@@ -13,8 +13,9 @@
1313
purgeEmptyLayers: true,
1414
analyzeModel: false
1515
};
16-
var max = {x: undefined, y: undefined, z: undefined};
17-
var min = {x: undefined, y: undefined, z: undefined};
16+
// Only print move speeds will be considered in max.speed and min.speed
17+
var max = {x: undefined, y: undefined, z: undefined, speed: undefined, volSpeed: undefined, extrSpeed: undefined};
18+
var min = {x: undefined, y: undefined, z: undefined, speed: undefined, volSpeed: undefined, extrSpeed: undefined};
1819
var modelSize = {x: undefined, y: undefined, z: undefined};
1920
var filamentByLayer = {};
2021
var filamentByExtruder = {};
@@ -206,8 +207,14 @@
206207

207208
if(cmds[j].extrude&&cmds[j].retract === 0&&x_ok&&y_ok){
208209
// we are extruding
209-
var volPerMM = cmds[j].volPerMM;
210-
volPerMM = parseFloat(volPerMM).toFixed(3);
210+
max.speed = parseFloat(max.speed)>parseFloat(cmds[j].speed) ? parseFloat(max.speed):parseFloat(cmds[j].speed);
211+
min.speed = parseFloat(min.speed)<parseFloat(cmds[j].speed) ? parseFloat(min.speed):parseFloat(cmds[j].speed);
212+
213+
var volPerMM = parseFloat(cmds[j].volPerMM);
214+
max.volSpeed = parseFloat(max.volSpeed)>volPerMM ? parseFloat(max.volSpeed):volPerMM;
215+
min.volSpeed = parseFloat(min.volSpeed)<volPerMM ? parseFloat(min.volSpeed):volPerMM;
216+
volPerMM = volPerMM.toFixed(3);
217+
211218
var volIndex = volSpeeds.indexOf(volPerMM);
212219
if(volIndex === -1){
213220
volSpeeds.push(volPerMM);
@@ -221,7 +228,10 @@
221228
}
222229

223230
var extrusionSpeed = cmds[j].volPerMM*(cmds[j].speed/60);
224-
extrusionSpeed = parseFloat(extrusionSpeed).toFixed(3);
231+
extrusionSpeed = parseFloat(extrusionSpeed);
232+
max.extrSpeed = parseFloat(max.extrSpeed)>extrusionSpeed ? parseFloat(max.extrSpeed):extrusionSpeed;
233+
min.extrSpeed = parseFloat(min.extrSpeed)<extrusionSpeed ? parseFloat(min.extrSpeed):extrusionSpeed;
234+
extrusionSpeed = extrusionSpeed.toFixed(3);
225235
var volIndex = extrusionSpeeds.indexOf(extrusionSpeed);
226236
if(volIndex === -1){
227237
extrusionSpeeds.push(extrusionSpeed);
@@ -231,6 +241,11 @@
231241
extrusionSpeedsByLayer[cmds[j].prevZ] = [];
232242
}
233243
if(extrusionSpeedsByLayer[cmds[j].prevZ].indexOf(extrusionSpeed) === -1){
244+
// Array elements will NOT necessarily be set to undefined when
245+
// assigning beyond the current array length, so do it explicitly.
246+
for(var k=extrusionSpeedsByLayer[cmds[j].prevZ].length; k<volIndex; k++) {
247+
extrusionSpeedsByLayer[cmds[j].prevZ].push(undefined);
248+
}
234249
extrusionSpeedsByLayer[cmds[j].prevZ][volIndex] = extrusionSpeed;
235250
}
236251
}
@@ -248,6 +263,16 @@
248263
modelSize.z = Math.abs(max.z - min.z);
249264
layerHeight = (max.z-min.z)/(layerCnt-1);
250265

266+
if(max.speed == min.speed) {
267+
max.speed = min.speed+1.0;
268+
}
269+
if(max.volSpeed == min.volSpeed) {
270+
max.volSpeed = min.volSpeed+1.0;
271+
}
272+
if(max.extrSpeed == min.extrSpeed) {
273+
max.extrSpeed = min.extrSpeed+1.0;
274+
}
275+
251276
sendAnalyzeDone();
252277
};
253278

@@ -521,8 +546,8 @@
521546
firstReport = undefined;
522547
z_heights = {};
523548
model = [];
524-
max = {x: undefined, y: undefined, z: undefined};
525-
min = {x: undefined, y: undefined, z: undefined};
549+
max = {x: undefined, y: undefined, z: undefined, speed: undefined, volSpeed: undefined, extrSpeed: undefined};
550+
min = {x: undefined, y: undefined, z: undefined, speed: undefined, volSpeed: undefined, extrSpeed: undefined};
526551
modelSize = {x: undefined, y: undefined, z: undefined};
527552
filamentByLayer = {};
528553
filamentByExtruder = {};

‎js/gCodeReader.js

+2-2
Original file line numberDiff line numberDiff line change
@@ -9,8 +9,8 @@ GCODE.gCodeReader = (function(){
99
var gcode, lines;
1010
var z_heights = {};
1111
var model = [];
12-
var max = {x: undefined, y: undefined, z: undefined};
13-
var min = {x: undefined, y: undefined, z: undefined};
12+
var max = {x: undefined, y: undefined, z: undefined, speed: undefined, volSpeed: undefined, extrSpeed: undefined};
13+
var min = {x: undefined, y: undefined, z: undefined, speed: undefined, volSpeed: undefined, extrSpeed: undefined};
1414
var modelSize = {x: undefined, y: undefined, z: undefined};
1515
var filamentByLayer = {};
1616
var filamentByExtruder = {};

‎js/renderer.js

+47-4
Original file line numberDiff line numberDiff line change
@@ -32,6 +32,7 @@ GCODE.renderer = (function(){
3232
// colorLine: ["#000000", "#aabb88", "#ffe7a0", "#6e7700", "#331a00", "#44ba97", "#08262f", "#db0e00", "#ff9977"],
3333
colorLine: ["#000000", "#45c7ba", "#a9533a", "#ff44cc", "#dd1177", "#eeee22", "#ffbb55", "#ff5511", "#777788", "#ff0000", "#ffff00"],
3434
colorLineLen: 9,
35+
gradientColors: [[110,64,110], [0,0,255], [0,255,255], [0,170,0], [232,232,0], [170,0,0], [255,0,255]],
3536
colorMove: "#00ff00",
3637
colorRetract: "#ff0000",
3738
colorRestart: "#0000ff",
@@ -54,7 +55,36 @@ GCODE.renderer = (function(){
5455
var volSpeedsByLayer = {};
5556
var extrusionSpeeds = [];
5657
var extrusionSpeedsByLayer = {};
58+
var max = {};
59+
var min = {};
60+
61+
var rgbToColor = function(r, g, b) {
62+
var rString = Math.round(r).toString(16);
63+
var gString = Math.round(g).toString(16);
64+
var bString = Math.round(b).toString(16);
65+
if(rString.length < 2) { rString = '0' + rString; }
66+
if(gString.length < 2) { gString = '0' + gString; }
67+
if(bString.length < 2) { bString = '0' + bString; }
68+
return '#' + rString + gString + bString;
69+
}
5770

71+
var gradientColor = function(scale) {
72+
// There's still a rounding error somewhere, hence the .1.
73+
// I leave it to some diligent programmer to find and fix this.
74+
if(scale < -0.1 || scale > 1.1) {
75+
return "#000000";
76+
}
77+
if(scale > 1) { scale=1; }
78+
else if(scale < 0) { scale=0; }
79+
var numSegments = renderOptions['gradientColors'].length;
80+
var leftIndex = Math.floor(scale*(numSegments-1));
81+
var mix = scale*(numSegments-1) - leftIndex;
82+
var leftColor = renderOptions['gradientColors'][leftIndex];
83+
var rightColor = renderOptions['gradientColors'][Math.ceil(scale*(numSegments-1))];
84+
return rgbToColor(leftColor[0]*(1.0-mix)+rightColor[0]*mix,
85+
leftColor[1]*(1.0-mix)+rightColor[1]*mix,
86+
leftColor[2]*(1.0-mix)+rightColor[2]*mix);
87+
}
5888

5989
var reRender = function(){
6090
var gCodeOpts = GCODE.gCodeReader.getOptions();
@@ -214,7 +244,7 @@ GCODE.renderer = (function(){
214244
};
215245

216246
var drawLayer = function(layerNum, fromProgress, toProgress, isNextLayer){
217-
var i, speedIndex= 0, prevZ = 0;
247+
var i, speedIndex= 0, prevZ = 0, speedScale = 0;
218248
isNextLayer = typeof isNextLayer !== 'undefined' ? isNextLayer : false;
219249
if(!isNextLayer){
220250
layerNumStore=layerNum;
@@ -280,12 +310,17 @@ GCODE.renderer = (function(){
280310
// if(speedsByLayer['extrude'][prevZ]){
281311
if(renderOptions['speedDisplayType'] === displayType.speed){
282312
speedIndex = speeds['extrude'].indexOf(cmds[i].speed);
313+
speedScale = (cmds[i].speed - min.speed)/(max.speed-min.speed);
283314
}else if(renderOptions['speedDisplayType'] === displayType.expermm){
284315
speedIndex = volSpeeds.indexOf(cmds[i].volPerMM);
316+
speedScale = (cmds[i].volPerMM - min.volSpeed)/(max.volSpeed-min.volSpeed);
285317
}else if(renderOptions['speedDisplayType'] === displayType.volpersec){
286-
speedIndex = extrusionSpeeds.indexOf((cmds[i].volPerMM*cmds[i].speed/60).toFixed(3));
318+
var volpersec = (cmds[i].volPerMM*cmds[i].speed/60).toFixed(3);
319+
speedIndex = extrusionSpeeds.indexOf(volpersec);
320+
speedScale = (volpersec - min.extrSpeed)/(max.extrSpeed-min.extrSpeed);
287321
}else{
288-
speedIndex=0;
322+
speedIndex = 0;
323+
speedScale = -1;
289324
}
290325
// speedIndex = GCODE.ui.ArrayIndexOf(speedsByLayer['extrude'][prevZ], function(obj) {return obj.speed === cmds[i].speed;});
291326
// } else {
@@ -348,7 +383,10 @@ GCODE.renderer = (function(){
348383
}
349384
else if(cmds[i].extrude){
350385
if(cmds[i].retract==0){
351-
if(speedIndex>=0){
386+
if(speedScale>=0) {
387+
ctx.strokeStyle = gradientColor(speedScale);
388+
}
389+
else if(speedIndex>=0){
352390
ctx.strokeStyle = renderOptions["colorLine"][speedIndex];
353391
}else if(speedIndex===-1){
354392
var val = parseInt(cmds[i].errLevelB).toString(16);
@@ -475,6 +513,8 @@ GCODE.renderer = (function(){
475513
volSpeedsByLayer = mdlInfo.volSpeedsByLayer;
476514
extrusionSpeeds = mdlInfo.extrusionSpeeds;
477515
extrusionSpeedsByLayer = mdlInfo.extrusionSpeedsByLayer;
516+
max = mdlInfo.max;
517+
min = mdlInfo.min;
478518
// console.log(speeds);
479519
// console.log(mdlInfo.min.x + ' ' + mdlInfo.modelSize.x);
480520
offsetModelX = (gridSizeX/2-(mdlInfo.min.x+mdlInfo.modelSize.x/2))*zoomFactor;
@@ -499,6 +539,9 @@ GCODE.renderer = (function(){
499539
if(cmds[i].prevZ!==undefined)return cmds[i].prevZ;
500540
}
501541
return '-1';
542+
},
543+
getGradientColor: function(scale){
544+
return gradientColor(scale);
502545
}
503546

504547
}

‎js/ui.js

+53-30
Original file line numberDiff line numberDiff line change
@@ -39,35 +39,47 @@ GCODE.ui = (function(){
3939
var prepareSpeedsInfo = function(layerNum){
4040
var z = GCODE.renderer.getZ(layerNum);
4141
var layerSpeeds = GCODE.gCodeReader.getModelInfo().speedsByLayer;
42+
var max = GCODE.gCodeReader.getModelInfo().max;
43+
var min = GCODE.gCodeReader.getModelInfo().min;
4244
var renderOptions = GCODE.renderer.getOptions();
43-
var colors = renderOptions["colorLine"];
44-
var colorLen = renderOptions['colorLineLen'];
4545
var speedIndex = 0;
4646
var output = [];
47+
var sortMe = {};
48+
var sortKeys = [];
4749
var i;
50+
var spd;
51+
var scale;
4852

4953
output.push("Extrude speeds:");
5054
for(i=0;i<layerSpeeds['extrude'][z].length;i++){
5155
if(typeof(layerSpeeds['extrude'][z][i])==='undefined'){continue;}
52-
speedIndex = i;
53-
if(speedIndex > colorLen -1){speedIndex = speedIndex % (colorLen-1);}
54-
output.push("<div id='colorBox"+i+"' class='colorBox' style='background-color: "+colors[speedIndex] + "'></div> = " + (parseFloat(layerSpeeds['extrude'][z][i])/60).toFixed(2)+"mm/s");
56+
spd = parseFloat(layerSpeeds['extrude'][z][i]);
57+
scale = (spd - min.speed)/(max.speed-min.speed);
58+
spd = (spd/60).toFixed(2);
59+
sortMe[spd] = "<div id='colorBox"+i+"' class='colorBox' style='background-color: "+ GCODE.renderer.getGradientColor(scale) + "'></div> = " + spd+"mm/s";
5560
}
61+
sortKeys = Object.keys(sortMe).sort((a, b) => b - a);
62+
for(i=0;i<sortKeys.length;i++) {
63+
output.push(sortMe[sortKeys[i]]);
64+
}
65+
5666
if(typeof(layerSpeeds['move'][z]) !== 'undefined'){
5767
output.push("Move speeds:");
5868
for(i=0;i<layerSpeeds['move'][z].length;i++){
5969
if(typeof(layerSpeeds['move'][z][i])==='undefined'){continue;}
60-
speedIndex = i;
61-
if(speedIndex > colorLen -1){speedIndex = speedIndex % (colorLen-1);}
62-
output.push("<div id='colorBox"+i+"' class='colorBox' style='background-color: "+renderOptions['colorMove'] + "'></div> = " + (parseFloat(layerSpeeds['move'][z][i])/60).toFixed(2)+"mm/s");
70+
spd = (parseFloat(layerSpeeds['move'][z][i])/60).toFixed(2);
71+
sortMe[spd] = "<div id='colorBox"+i+"' class='colorBox' style='background-color: "+renderOptions['colorMove'] + "'></div> = " + spd+"mm/s";
6372
}
6473
}
74+
sortKeys = Object.keys(sortMe).sort((a, b) => b - a);
75+
for(i=0;i<sortKeys.length;i++) {
76+
output.push(sortMe[sortKeys[i]]);
77+
}
78+
6579
if(typeof(layerSpeeds['retract'][z]) !== 'undefined'){
6680
output.push("Retract speeds:");
6781
for(i=0;i<layerSpeeds['retract'][z].length;i++){
6882
if(typeof(layerSpeeds['retract'][z][i])==='undefined'){continue;}
69-
speedIndex = i;
70-
if(speedIndex > colorLen -1){speedIndex = speedIndex % (colorLen-1);}
7183
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");
7284
}
7385
}
@@ -78,19 +90,26 @@ GCODE.ui = (function(){
7890
var prepareExPerMMInfo = function(layerNum){
7991
var z = GCODE.renderer.getZ(layerNum);
8092
var layerSpeeds = GCODE.gCodeReader.getModelInfo().volSpeedsByLayer;
81-
var renderOptions = GCODE.renderer.getOptions();
82-
var colors = renderOptions["colorLine"];
83-
var colorLen = renderOptions['colorLineLen'];
84-
var speedIndex = 0;
93+
var max = GCODE.gCodeReader.getModelInfo().max;
94+
var min = GCODE.gCodeReader.getModelInfo().min;
8595
var output = [];
96+
var sortMe = {};
97+
var sortKeys = [];
8698
var i;
99+
var spd;
100+
var scale;
87101

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

96115
return output;
@@ -99,27 +118,31 @@ GCODE.ui = (function(){
99118
var prepareVolPerSecInfo = function(layerNum){
100119
var z = GCODE.renderer.getZ(layerNum);
101120
var layerSpeeds = GCODE.gCodeReader.getModelInfo().extrusionSpeedsByLayer;
102-
var renderOptions = GCODE.renderer.getOptions();
121+
var max = GCODE.gCodeReader.getModelInfo().max;
122+
var min = GCODE.gCodeReader.getModelInfo().min;
103123
var gCodeOptions = GCODE.gCodeReader.getOptions();
104-
var colors = renderOptions["colorLine"];
105-
var colorLen = renderOptions['colorLineLen'];
106-
var speedIndex = 0;
107124
var output = [];
125+
var sortMe = {};
126+
var sortKeys = [];
108127
var i;
109-
var spd;
128+
var spd;
129+
var scale
110130

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

117-
spd = parseFloat(layerSpeeds[z][i]);
118-
if(!gCodeOptions.volumetricE) {
119-
spd *= Math.PI * Math.pow(gCodeOptions.filamentDia / 2, 2);
120-
}
121-
122-
output.push("<div id='colorBox"+i+"' class='colorBox' style='background-color: "+colors[speedIndex] + "'></div> = " + spd.toFixed(3) +"mm^3/sec");
135+
spd = parseFloat(layerSpeeds[z][i]);
136+
scale = (spd - min.extrSpeed)/(max.extrSpeed-min.extrSpeed);
137+
if(!gCodeOptions.volumetricE) {
138+
spd *= Math.PI * Math.pow(gCodeOptions.filamentDia / 2, 2);
139+
}
140+
spd = spd.toFixed(1);
141+
sortMe[spd] = "<div id='colorBox"+i+"' class='colorBox' style='background-color: " + GCODE.renderer.getGradientColor(scale) + "'></div> = " + spd +"mm^3/sec";
142+
}
143+
sortKeys = Object.keys(sortMe).sort((a, b) => b - a);
144+
for(i=0;i<sortKeys.length;i++) {
145+
output.push(sortMe[sortKeys[i]]);
123146
}
124147

125148
return output;

0 commit comments

Comments
 (0)