NickEng's Sawstop Grbl interface / coding

Ok, I think I've got it working! I am still getting an error " Please wait for machine to be Idle, before jogging" . I tried adding the if statement you suggested to wait for idle, but it didn't fix it. I am wondering if it has something to do with my button click then "clicking" the main jog button and mimicking a second click and causing the error message to appear. It seems to get hung up sometimes in the jogging state and keeps going when it shouldn't.

Another cool feature I have thought of is a "cut list" So, the idea is you upload/type/paste/ multiple cuts (cabinet maker) there is a next button. You make a cut, press next, it goes to the next size board that is needed to be cut, make cut, click next. You wouldn't have to manually put each cut in. Much more efficient.... If you designed the cabinets in a program, you could then just take your cut list, upload it to the macro (some how) and would be ready to go!

That was just a thought for the future....

Here is code for now....

var continuousJogRunning = false;
var safeToUpdateSliders = true;
var jogRateX = 4000
var jogRateY = 4000
var jogRateZ = 2000

// Add some CSS classes
$("<style type='text/css'>.myXpBtn {width: 160px;} .keypadBtn {width: 45px; height: 300px;} .sawStopKeypadBtn {width:130px;} .jogKeypadBtn {width:50px;}.sawStopActionBtn {width: 580px; } </style>").appendTo("head");

// variables placeholder
window.sawStopValue = 0.0;
window.sawStopFractionValue = 0;
window.currentPositionValue ;
window.currentFractionValue = 0;

// Update the UI <span> fields to display value
window.updateSawStopValueUI = setInterval(function() {
$("#sawStopValue").html(sawStopValue.toFixed(0));
$("#currentPosition").html((laststatus.machine.position.work.x / 25.4).toFixed(3));
if(currentFractionValue.length > 1){
$("#currentFraction").html("&nbsp;and&nbsp;" + currentFractionValue);
} else {
$("#currentFraction").html("");
}

if (sawStopFractionValue.length > 1) {
$("#sawStopFraction").html("&nbsp;and&nbsp;" + sawStopFractionValue);
} else {
$("#sawStopFraction").html("");
}
}, 50);

window.updateLastStatus = setInterval(function(){
currentPositionValue = laststatus.machine.position.work.x / 25.4;
}, 47);

// keypad button
window.sawStopBtn = function(val) {
var currentValue = sawStopValue.toString();
currentValue += val;
sawStopValue = parseInt(currentValue);
}

window.currentPosition = function(val){

}

// fraction button
window.sawStopFraction = function(val) {
sawStopFractionValue = val;
}

window.currentFraction = function(val) {
currentFractionValue = val;
}

// backspace button
window.sawStopBackSpace = function() {
var sawStopcurrentValue = sawStopValue.toString();
var sawStopNewValue = sawStopcurrentValue.slice(0, -1);
if (sawStopNewValue.length == 0) {
sawStopNewValue = "0";
}
sawStopValue = parseInt(sawStopNewValue);
}
window.farLeft = function() {
sendGcode("m9");
sendGcode("G4P0.5");
sendGcode("$J=G90 G20 X 96" + " F10000");
}

window.goHome = function() {
sendGcode("m9");
sendGcode("G4P0.5");
sendGcode("$H");
}

window.sawStopMoveTo = function() {
// Calculate Decimals from fractions
if (sawStopFractionValue.length > 1) {
var sawStopFractionSplit = sawStopFractionValue.split("/");
var sawStopDecimals =
parseInt(sawStopFractionSplit[0], 10) /
parseInt(sawStopFractionSplit[1], 10);
var decimalSawStopFractionValue = eval(sawStopFractionValue);
} else {
var decimalSawStopFractionValue = 0;
}
// add decimals to integers
var sawStopFinalPosition = sawStopValue + decimalSawStopFractionValue;

// Send move command to Grbl
sendGcode("m9"); //unlock pnuematic cylinder
sendGcode("G4P0.2");
sendGcode("G90 G20 G0X" + sawStopFinalPosition + " F10000 " + "\n M8"); // move to position

currentFractionValue = sawStopFractionValue; // save fraction value to display current position
sawStopValue = 0; //reset value to prepare for next entered distance
sawStopFractionValue = 0; //reset fraction value to prepare for next entered distance

}

$(function(){
$('#jogTypeContinuous').prop('checked', true)
allowContinuousJog = true;

$('#myXp').on('touchstart mousedown', function(){
sendGcode("m9");//unlock
$('.xP').mousedown();
})

$('#myXp').on('touchstart mouseup', function(){
$('.xP').mouseup();
sendGcode("m8");//lock
})

});

$(function(){
$('#jogTypeContinuous').prop('checked', true)
allowContinuousJog = true;

$('#myXm').on('touchstart mousedown', function(){
sendGcode("m9"); //unlock pnuematic cylinder
$('.xM').mousedown();
//$('.xP').click();
})

$('#myXm').on('touchstart mouseup', function(){
$('.xM').mouseup();
sendGcode("m8");//lock
})

});

function resetJogModeAfterProbe() {
if (localStorage.getItem('continuousJog')) {
if (JSON.parse(localStorage.getItem('continuousJog')) == true) {
$('#jogTypeContinuous').prop('checked', true)
allowContinuousJog = true;
$('.distbtn').hide()
} else {
$('#jogTypeContinuous').prop('checked', false)
allowContinuousJog = false;
$('.distbtn').show();
}
}
$('#confirmNewProbeBtn').removeClass("disabled")
}



// Create the User Interface
Metro.dialog.create({
title: "Saw Stop Macro",
width: 'auto',
content: `
<span class="display1">Enter Distance:&nbsp;</span>
<span class="display3" id="sawStopValue">0</span>
<span class="display3" id="sawStopFraction"></span>
<span class="display1">&nbsp;inch</span>
<span class="display2">&nbsp;&nbsp;&nbsp;</span>
<span class="display1">&nbsp;Current Location:&nbsp;</span>
<span class="display3" id="currentPosition"></span>


<table class="table compact">
<td>
<table>
<tr>
<td><button class="button outline xlarge m-0 sawStopKeypadBtn" onclick="sawStopBtn(1);">1</button></td>
<span class="fa-layers fa-fw">
<td><button class="button outline xlarge m-0 sawStopKeypadBtn" onclick="sawStopBtn(2);">2</button></td>
<span class="fa-layers fa-fw">
<td><button class="button outline xlarge m-0 sawStopKeypadBtn" onclick="sawStopBtn(3);">3</button></td>
<span class="fa-layers fa-fw">
<td></td>
<td><button class="button outline xlarge m-0 sawStopKeypadBtn" onclick="sawStopFraction('1/16');">1/16</button></td>
<span class="fa-layers fa-fw">
<td><button class="button outline xlarge m-0 sawStopKeypadBtn" onclick="sawStopFraction('1/8');">1/8</button></td>
<span class="fa-layers fa-fw">
<td><button class="button outline xlarge m-0 sawStopKeypadBtn" onclick="sawStopFraction('3/16');">3/16</button></td>
<span class="fa-layers fa-fw">
<td><button class="button outline xlarge m-0 sawStopKeypadBtn" onclick="sawStopFraction('1/4');">1/4</button></td>
<span class="fa-layers fa-fw">
</tr>
<tr>
<td><button class="button outline xlarge m-0 sawStopKeypadBtn" onclick="sawStopBtn(4);">4</button></td>
<span class="fa-layers fa-fw">
<td><button class="button outline xlarge m-0 sawStopKeypadBtn" onclick="sawStopBtn(5);">5</button></td>
<span class="fa-layers fa-fw">
<td><button class="button outline xlarge m-0 sawStopKeypadBtn" onclick="sawStopBtn(6);">6</button></td>
<span class="fa-layers fa-fw">
<td><button class="button alert x large rounded outline m-0 " id="myXm" style="width: 160px;" data-role="ripple" data-ripple-color="#e21b1b"><i class="fas fa-arrow-right "></i>JOG RIGHT</button></td>

<td><button class="button outline xlarge m-0 sawStopKeypadBtn" onclick="sawStopFraction('5/16');">5/16</button></td>
<span class="fa-layers fa-fw">
<td><button class="button outline xlarge m-0 sawStopKeypadBtn" onclick="sawStopFraction('3/8');">3/8</button></td>
<span class="fa-layers fa-fw">
<td><button class="button outline xlarge m-0 sawStopKeypadBtn" onclick="sawStopFraction('7/16');">7/16</button></td>
<span class="fa-layers fa-fw">
<td><button class="button outline xlarge m-0 sawStopKeypadBtn" onclick="sawStopFraction('1/2');">1/2</button></td>
<span class="fa-layers fa-fw">
</tr>
<tr>
<td><button class="button outline xlarge m-0 sawStopKeypadBtn" onclick="sawStopBtn(7);">7</button></td>
<span class="fa-layers fa-fw">
<td><button class="button outline xlarge m-0 sawStopKeypadBtn" onclick="sawStopBtn(8);">8</button></td>
<span class="fa-layers fa-fw">
<td><button class="button outline xlarge m-0 sawStopKeypadBtn" onclick="sawStopBtn(9);">9</button></td>
<span class="fa-layers fa-fw">
<td><button class="button alert x large rounded m-0 " id="myXp" style="width: 160px;" data-role="ripple" data-ripple-color="#5de21b"><i class="fas fa-arrow-left "></i>JOG LEFT</button></td>
<span class="fa-layers fa-fw">
<td><button class="button outline xlarge m-0 sawStopKeypadBtn" onclick="sawStopFraction('9/16');">9/16</button></td>
<span class="fa-layers fa-fw">
<td><button class="button outline xlarge m-0 sawStopKeypadBtn" onclick="sawStopFraction('5/8');">5/8</button></td>
<span class="fa-layers fa-fw">
<td><button class="button outline xlarge m-0 sawStopKeypadBtn" onclick="sawStopFraction('11/16');">11/16</button></td>
<span class="fa-layers fa-fw">
<td><button class="button outline xlarge m-0 sawStopKeypadBtn" onclick="sawStopFraction('3/4');">3/4</button></td>
<span class="fa-layers fa-fw">
</tr>
<tr>
<td><button class="button outline xlarge m-0 sawStopKeypadBtn" onclick="farLeft();">FAR LEFT</button></td>
<span class="fa-layers fa-fw">
<td><button class="button outline xlarge m-0 sawStopKeypadBtn" onclick="sawStopBtn(0);">0</button></td>
<span class="fa-layers fa-fw">
<td><button class="button outline xlarge m-0 sawStopKeypadBtn" onclick="sawStopBackSpace();"><i class="fas fa-arrow-left"></i></button></td>
<span class="fa-layers fa-fw">
<td></td>
<td><button class="button outline xlarge m-0 sawStopKeypadBtn" onclick="sawStopFraction('13/16');">13/16</button></td>
<span class="fa-layers fa-fw">
<td><button class="button outline xlarge m-0 sawStopKeypadBtn" onclick="sawStopFraction('7/8');">7/8</button></td>
<span class="fa-layers fa-fw">
<td><button class="button outline xlarge m-0 sawStopKeypadBtn" onclick="sawStopFraction('15/16');">15/16</button></td>
<span class="fa-layers fa-fw">
<td><button class="button outline xlarge m-0 sawStopKeypadBtn" onclick="goHome();">HOME</button></td>
<span class="fa-layers fa-fw">

</tr>
</table>
<table>

<td><button class="button outline large m-0 sawStopActionBtn alert" onclick="sawStopValue=0; sawStopFractionValue=0;">CLEAR</button></td>
<span class="fa-layers fa-fw">
<td><button class="button outline large m-0 sawStopActionBtn success" onclick="sawStopMoveTo();">MOVE TO</button></td>
<span class="fa-layers fa-fw">
</table>


`,
actions: [{
caption: "Exit Macro",
cls: "js-dialog-close alert",
onclick: function() {
window.updateSawStopValueUI = clearInterval (function(){})
window.updateLastStatus = clearInterval (function(){})
resetJogModeAfterProbe()
printLog("Saw Stop Macro Exited")
}
}]
});

Thanks!

 

This sounds complicated…I assume I need to put an input box somewhere in the macro using <input> Id= and get the “input” value that is typed in by getElementById(). save the data retrieved to a string variable. Use js split function to convert string variable to an array? And I’m really lost with the “iterate the array looking at the values at index”.

I don’t know that any of that is right…

thanks!

 

@Peter Van Der Walt well I appreciate all of the help! It has been really neat playing around with all of it. I had some time this morning, and I think I got the basics of the "Cut list" worked out following your advice. I am sure there are much better ways to do it than I did, but it appears to work. It could still use some styling and rearranging, but I think it is functional. I am going to paste below in case anyone else finds it useful. The cut list could almost be beneficial in a macro on its own. There are still other things I keep thinking of to add, but I think that will probably always happen! Again, I am very appreciative of all the help!

Thanks!

 

I am still playing around with this, and I am having difficulty with the flickering of old variable data if I close the macro and open it back up. I cleared this up earlier with a clearInterval at onclick of the end macro button press. However, the intervals I added (display currentCut and NextCut for the cut list) they are in the same setInterval function as was with the original code.

I think, I am changing the html variable with jquery like this:

if(nextCut > 1){
$("#displayCut").html("Next Cut: " + nextCut); //displayCut is used to know what to display in the metro.create.dialogue below the variable nextCut is what's actually displayed
}
else{
$("#displayCut").html("");
}
if(currentCut > 1){
$("#displayCurrentCut").html("Current Cut: " + currentCut);
}
else{
$("#displayCurrentCut").html("");
}

I am displaying it in the Metro.dialog.create UI with by calling it within a span.

It works great until I exit the macro and reopen it. Then I am getting a flicker that is displaying old data. I have the clearInterval Function being called when the macro is exited.

I know you are busy, and may not be able to help, but is there a forum somewhere to ask these types of coding questions?

Thanks!

 

That worked..... that simple, I've been struggling with it for an hour and couldn't figure it out. I am going to attempt to add a quantity to the input data box and split it twice to get the correct data. There may be a better idea, but the idea is to split the input data by separator "," and save to a variable. Take that variable and then separate it with a whitespace separator. So example, If I input (28 2, 36 1, 32.5 3) I would separate 28 2 as the first variable and separate again with (" ") this would tell me the quantity (2) needed for that length board (28"). Maybe a better way?

Thanks!

 

I haven’t checked it out, but I will.
I don’t really know how or if I am going to handle fractions. My thought was to handle them similarly to the way you did with the button presses. Maybe enter them like this:

23-5/8 2. Where the 23 will be split from the 5/8 with the “-“ and then do the math and combine them back together. Let the white space separate the quantity.
I really need to look at how programs spit out there cut list. It would be nice to be able to copy and paste the cut list in to the input box, but that may not be possible.