Skip to content

Commit 434dce8

Browse files
petervanderwaltpetervanderwalt
committed
v1.0.384 - new Grbl Settings
1 parent d3cf9e8 commit 434dce8

File tree

2 files changed

+141
-68
lines changed

2 files changed

+141
-68
lines changed

‎app/css/themes/dark.css‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -98,7 +98,7 @@ body.theme_dark, .theme_dark div.window, .theme_dark .card {
9898
}
9999

100100
.theme_dark .dropdown-toggle:not(.success) {
101-
border: 1px solid #555;
101+
border: 1px solid #333;
102102
}
103103

104104
.theme_dark .dropdown-toggle::before {

‎app/js/grbl-settings.js‎

Lines changed: 140 additions & 67 deletions
Original file line numberDiff line numberDiff line change
@@ -131,14 +131,30 @@ function grblSettings(data) {
131131
}
132132
}
133133

134+
function showBasicSettings() {
135+
$("#grbl-settings-basic").show();
136+
$("#grbl-settings-advanced").hide();
137+
}
138+
139+
function showAdvSettings() {
140+
$("#grbl-settings-basic").hide();
141+
$("#grbl-settings-advanced").show();
142+
}
143+
134144
function grblPopulate() {
135145
if (!isJogWidget) {
136146
$('#grblconfig').show();
137147
$('#grblconfig').empty();
138148
var template = `
139149
<form id="grblSettingsTable">
140150
141-
<div id="grblProfileSection">
151+
<ul data-role="tabs" data-expand="true" class="mb-2">
152+
<li onclick="showBasicSettings()"><a href="#"><small><i class="fas fa-fw fa-cog mr-1 fg-darkGreen"></i>Basic Settings</a></small></li>
153+
<li onclick="showAdvSettings()"><a href="#"><small><i class="fas fa-fw fa-cogs mr-1 fg-darkRed"></i>Advanced Settings</a></small></li>
154+
</ul>
155+
156+
157+
<div id="grbl-settings-basic">
142158
<ul class="step-list mb-3">
143159
<li>
144160
<h6>Select your Machine<br><small>Tell us what machine you have?</small></h6>
@@ -285,70 +301,69 @@ function grblPopulate() {
285301
</li>
286302
287303
<li>
288-
<h6>Advanced Settings<br><small>If you have any custom requirements,
289-
please customise the settings in the Advanced Settings section</small></h6>
290-
291-
<button class="button" id="collapse_toggle_2">Show Advanced Settings</button>
292-
<div class="pos-relative">
293-
<div data-role="collapse" data-toggle-element="#collapse_toggle_2"
294-
data-collapsed="true">
295-
<div id="grblSettingsTableView"
296-
style="overflow-y: scroll; height: calc(100vh - 510px); max-height: calc(100vh - 460px);">
297-
<table data-role="table"
298-
data-table-search-title="Search for Parameters by Name or $-Key"
299-
data-search-fields="Key, Parameter"
300-
data-on-draw="setup_settings_table"
301-
data-on-table-create="setup_settings_table"
302-
data-cell-wrapper="false"
303-
class="table compact striped row-hover row-border"
304-
data-show-rows-steps="false" data-rows="200"
305-
data-show-pagination="false" data-show-table-info="true"
306-
data-show-search="true">
307-
<thead>
308-
<tr>
309-
<th style="text-align: left;">Key</th>
310-
<th style="text-align: left;">Parameter</th>
311-
<th style="width: 250px; min-width: 240px !important;">Value</th>
312-
<th style="width: 110px; min-width: 110px !important;">Utility</th>
313-
</tr>
314-
</thead>
315-
<tbody>`
304+
<h6>Finished<br><small>Remember to "Save to Firmware" and Reset when Prompted. <br>If you have any custom requirements,
305+
please customise the settings in the Advanced Settings section above</small></h6>
306+
</li>
307+
308+
309+
</ul>
310+
</div>
311+
<div id="grbl-settings-advanced" style="display: none; overflow-y: scroll; max-height: calc(100vh - 300px);">
312+
<div id="grblSettingsTableView">
313+
<table data-role="table"
314+
data-table-search-title="Search for Parameters by Name or $-Key"
315+
data-search-fields="Key, Parameter"
316+
data-on-draw="setup_settings_table"
317+
data-on-table-create="setup_settings_table"
318+
data-cell-wrapper="false"
319+
class="table compact striped row-hover row-border"
320+
data-show-rows-steps="false" data-rows="200"
321+
data-show-pagination="false" data-show-table-info="true"
322+
data-show-search="true">
323+
<thead>
324+
<tr>
325+
<th style="text-align: left;">Key</th>
326+
<th style="text-align: left;">Parameter</th>
327+
<th style="width: 250px; min-width: 240px !important;">Value</th>
328+
<th style="width: 110px; min-width: 110px !important;">Utility</th>
329+
</tr>
330+
</thead>
331+
<tbody>`
316332

317333
for (key in grblParams) {
318334
var key2 = key.split('=')[0].substr(1);
319335
//console.log(key2)
320336
if (grblSettingsTemplate2[key2] !== undefined) {
321337
//template += grblSettingsTemplate2[key2].template;
322338
template += `<tr id="grblSettingsRow` + key2 + `"
323-
title="` + grblSettingsTemplate2[key2].description + `">
324-
<td>` + grblSettingsTemplate2[key2].key + `</td>
325-
<td>` + grblSettingsTemplate2[key2].title + `</td>
326-
<td>` + grblSettingsTemplate2[key2].template + `</td>
327-
<td>` + grblSettingsTemplate2[key2].utils + `</td>
328-
</tr>`
339+
title="` + grblSettingsTemplate2[key2].description + `">
340+
<td>` + grblSettingsTemplate2[key2].key + `</td>
341+
<td>` + grblSettingsTemplate2[key2].title + `</td>
342+
<td>` + grblSettingsTemplate2[key2].template + `</td>
343+
<td>` + grblSettingsTemplate2[key2].utils + `</td>
344+
</tr>`
329345
} else {
330346
template += `
331-
<tr>
332-
<td>` + key + `</td>
333-
<td><span class="tally alert">` + key + `</span></td>
334-
<td><input data-role="input" data-clear-button="false"
335-
data-append="?" type="text"
336-
value="` + grblParams[key] + `"
337-
id="val-` + key2 + `-input"></td>
338-
<td></td>
339-
</tr>
340-
`
347+
<tr>
348+
<td>` + key + `</td>
349+
<td><span class="tally alert">` + key + `</span></td>
350+
<td><input data-role="input" data-clear-button="false"
351+
data-append="?" type="text"
352+
value="` + grblParams[key] + `"
353+
id="val-` + key2 + `-input"></td>
354+
<td></td>
355+
</tr>
356+
`
341357
}
342358
}
343359

344360
template += `</tbody>
345-
</table>
346-
</div> <!-- End of grblSettingsTableView --> </div>
347-
</div>
348-
</li>
361+
</table>
362+
</div> <!-- End of grblSettingsTableView -->
349363
</div>
350-
<!-- End of grblProfileSection -->
351-
</form>
364+
</div>
365+
</nav>
366+
</form>
352367
`
353368
$('#grblconfig').append(template)
354369

@@ -398,43 +413,100 @@ function grblPopulate() {
398413

399414
}
400415

416+
// function checkifchanged() {
417+
// var hasChanged = false;
418+
// for (var key in grblParams) {
419+
// if (grblParams.hasOwnProperty(key)) {
420+
// var j = key.substring(1)
421+
// var newVal = $("#val-" + j + "-input").val();
422+
//
423+
// if (newVal !== undefined) {
424+
// // Only send values that changed
425+
// if (newVal != grblParams[key]) {
426+
// hasChanged = true;
427+
// console.log("changed: " + key)
428+
// console.log("old: " + grblParams[key])
429+
// console.log("new: " + newVal)
430+
// if (!$("#val-" + j + "-input").parent().is('td')) {
431+
// $("#val-" + j + "-input").parent().addClass('alert')
432+
// } else if ($("#val-" + j + "-input").is('select')) {
433+
// $("#val-" + j + "-input").addClass('alert')
434+
// } else if (j == 3) { // axes
435+
// $('#xdirinvert').parent().children('.check').addClass('bd-red')
436+
// $('#ydirinvert').parent().children('.check').addClass('bd-red')
437+
// $('#zdirinvert').parent().children('.check').addClass('bd-red')
438+
// }
439+
// } else {
440+
// if (!$("#val-" + j + "-input").parent().is('td')) {
441+
// $("#val-" + j + "-input").parent().removeClass('alert')
442+
// } else if ($("#val-" + j + "-input").is('select')) {
443+
// $("#val-" + j + "-input").removeClass('alert')
444+
// } else if (j == 3) {
445+
// $('#xdirinvert').parent().children('.check').removeClass('bd-red')
446+
// $('#ydirinvert').parent().children('.check').removeClass('bd-red')
447+
// $('#zdirinvert').parent().children('.check').removeClass('bd-red')
448+
// }
449+
// }
450+
// }
451+
// }
452+
// }
453+
// if (hasChanged) {
454+
// $('#grblSettingsBadge').fadeIn('slow');
455+
// $('#saveBtn').attr('disabled', false).removeClass('disabled');
456+
// $('#saveBtnIcon').removeClass('fg-gray').addClass('fg-grayBlue');
457+
// } else {
458+
// $('#grblSettingsBadge').fadeOut('slow');
459+
// $('#saveBtn').attr('disabled', true).addClass('disabled');
460+
// $('#saveBtnIcon').removeClass('fg-grayBlue').addClass('fg-gray');
461+
// }
462+
// }
463+
401464
function checkifchanged() {
402465
var hasChanged = false;
466+
403467
for (var key in grblParams) {
404468
if (grblParams.hasOwnProperty(key)) {
405-
var j = key.substring(1)
469+
var j = key.substring(1);
406470
var newVal = $("#val-" + j + "-input").val();
407471

408472
if (newVal !== undefined) {
409-
// Only send values that changed
410-
if (newVal != grblParams[key]) {
473+
// Determine if the value should be compared as text or number
474+
var oldVal = grblParams[key];
475+
var compareAsNumber = !isNaN(parseFloat(oldVal)) && !isNaN(parseFloat(newVal));
476+
477+
// Perform appropriate comparison
478+
if ((compareAsNumber && parseFloat(newVal) !== parseFloat(oldVal)) ||
479+
(!compareAsNumber && newVal !== oldVal)) {
411480
hasChanged = true;
412-
console.log("changed: " + key)
413-
console.log("old: " + grblParams[key])
414-
console.log("new: " + newVal)
481+
482+
console.log("changed: " + key);
483+
console.log("old: " + oldVal);
484+
console.log("new: " + newVal);
485+
415486
if (!$("#val-" + j + "-input").parent().is('td')) {
416-
$("#val-" + j + "-input").parent().addClass('alert')
487+
$("#val-" + j + "-input").parent().addClass('alert');
417488
} else if ($("#val-" + j + "-input").is('select')) {
418-
$("#val-" + j + "-input").addClass('alert')
489+
$("#val-" + j + "-input").addClass('alert');
419490
} else if (j == 3) { // axes
420-
$('#xdirinvert').parent().children('.check').addClass('bd-red')
421-
$('#ydirinvert').parent().children('.check').addClass('bd-red')
422-
$('#zdirinvert').parent().children('.check').addClass('bd-red')
491+
$('#xdirinvert').parent().children('.check').addClass('bd-red');
492+
$('#ydirinvert').parent().children('.check').addClass('bd-red');
493+
$('#zdirinvert').parent().children('.check').addClass('bd-red');
423494
}
424495
} else {
425496
if (!$("#val-" + j + "-input").parent().is('td')) {
426-
$("#val-" + j + "-input").parent().removeClass('alert')
497+
$("#val-" + j + "-input").parent().removeClass('alert');
427498
} else if ($("#val-" + j + "-input").is('select')) {
428-
$("#val-" + j + "-input").removeClass('alert')
499+
$("#val-" + j + "-input").removeClass('alert');
429500
} else if (j == 3) {
430-
$('#xdirinvert').parent().children('.check').removeClass('bd-red')
431-
$('#ydirinvert').parent().children('.check').removeClass('bd-red')
432-
$('#zdirinvert').parent().children('.check').removeClass('bd-red')
501+
$('#xdirinvert').parent().children('.check').removeClass('bd-red');
502+
$('#ydirinvert').parent().children('.check').removeClass('bd-red');
503+
$('#zdirinvert').parent().children('.check').removeClass('bd-red');
433504
}
434505
}
435506
}
436507
}
437508
}
509+
438510
if (hasChanged) {
439511
$('#grblSettingsBadge').fadeIn('slow');
440512
$('#saveBtn').attr('disabled', false).removeClass('disabled');
@@ -446,6 +518,7 @@ function checkifchanged() {
446518
}
447519
}
448520

521+
449522
function grblSaveSettings() {
450523
var toSaveCommands = [];
451524
var saveProgressBar = $("#grblSaveProgress").data("progress");

0 commit comments

Comments
 (0)