From f6053bf1937367eaf2db1c4c1a7ba978100f6d85 Mon Sep 17 00:00:00 2001 From: Joseph Coffland Date: Wed, 1 Apr 2020 22:00:48 -0700 Subject: [PATCH] Added "step mode" to Web based jogging, Fixed touch screen Web jogging. --- CHANGELOG.md | 3 + src/js/axis-control.js | 25 ++++++-- src/js/control-view.js | 15 ++++- src/pug/templates/axis-control.pug | 94 ++++++++++++++++++------------ src/pug/templates/control-view.pug | 41 +++++++++---- src/py/bbctrl/FileHandler.py | 3 +- src/stylus/style.styl | 17 ++---- 7 files changed, 129 insertions(+), 69 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 3028df7..3355047 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -2,6 +2,9 @@ Buildbotics CNC Controller Firmware Changelog ============================================= ## v0.4.14 + - Handle file uploads with '#' or '?' in the name. + - Added "step mode" to Web based jogging. + - Fixed touch screen Web jogging. ## v0.4.13 - Support for OMRON MX2 VFD. diff --git a/src/js/axis-control.js b/src/js/axis-control.js index bf21b74..e13c5cf 100644 --- a/src/js/axis-control.js +++ b/src/js/axis-control.js @@ -30,15 +30,32 @@ module.exports = { template: '#axis-control-template', - props: ['axes', 'colors', 'enabled', 'adjust'], + props: ['axes', 'colors', 'enabled', 'adjust', 'step'], methods: { - jog: function (axis, power) { - this.$dispatch('jog', this.axes[axis], power * this.adjust / 100.0) + jog: function (axis, ring, direction) { + var value = direction * this.value(ring); + this.$dispatch(this.step ? 'step' : 'jog', this.axes[axis], value); }, - release: function (axis) {this.$dispatch('jog', this.axes[axis], 0)} + release: function (axis) { + if (!this.step) this.$dispatch('jog', this.axes[axis], 0) + }, + + + value: function (ring) { + var adjust = [0.01, 0.1, 1][this.adjust]; + if (this.step) return adjust * [0.1, 1, 10, 100][ring]; + return adjust * [0.1, 0.25, 0.5, 1][ring]; + }, + + + text: function (ring) { + var value = this.value(ring) * (this.step ? 1 : 100); + value = parseFloat(value.toFixed(3)); + return value + (this.step ? '' : '%'); + } } } diff --git a/src/js/control-view.js b/src/js/control-view.js index ff6fc06..c893650 100644 --- a/src/js/control-view.js +++ b/src/js/control-view.js @@ -27,7 +27,8 @@ 'use strict' -var api = require('./api'); +var api = require('./api'); +var cookie = require('./cookie')('bbctrl-'); function _is_array(x) { @@ -62,7 +63,8 @@ module.exports = { position_msg: {x: false, y: false, z: false, a: false, b: false, c: false}, axis_position: 0, - jog_adjust: 100, + jog_step: cookie.get_bool('jog-step'), + jog_adjust: parseInt(cookie.get('jog-adjust', 2)), deleteGCode: false, tab: 'auto' } @@ -97,7 +99,9 @@ module.exports = { }, - 'state.selected_time': function () {this.load()} + 'state.selected_time': function () {this.load()}, + jog_step: function () {cookie.set_bool('jog-step', this.jog_step)}, + jog_adjust: function () {cookie.set('jog-adjust', this.jog_adjust)} }, @@ -192,6 +196,11 @@ module.exports = { var data = {ts: new Date().getTime()}; data[axis] = power; api.put('jog', data); + }, + + + step: function (axis, value) { + this.send('M70\nG91\nG0' + axis + value + '\nM72'); } }, diff --git a/src/pug/templates/axis-control.pug b/src/pug/templates/axis-control.pug index e41a76c..6246a97 100644 --- a/src/pug/templates/axis-control.pug +++ b/src/pug/templates/axis-control.pug @@ -28,7 +28,7 @@ script#axis-control-template(type="text/x-template") svg(xmlns="http://www.w3.org/2000/svg", xmlns:xlink="http://www.w3.org/1999/xlink", - width="200", height="200") + width="300", height="300") defs lineargradient#red stop(offset="0", stop-color="#d26969") @@ -81,127 +81,145 @@ script#axis-control-template(type="text/x-template") path#arrow(d="M-16,9 0,9 0,17 17,0 0,-17 0,-9 -16,-9 -16,9Z") - g(transform="scale(0.8, 0.8)") + g(transform="scale(1.2, 1.2)") // 100% ring g.ring(fill="#9f9f9f", filter="url(#shadow)") use.button(xlink:href="#pie-1", v-if="enabled[0]", transform="translate(134 121) rotate(-45)", - @mousedown="jog(0, 1)", @mouseup="release(0)") + @mousedown="jog(0, 3, 1)", @mouseup="release(0)", + @touchstart.prevent="jog(0, 3, 1)", @touchend.prevent="release(0)") use.button(xlink:href="#pie-1", v-if="enabled[0]", transform="translate(115 121) rotate(135)", - @mousedown="jog(0, -1)", @mouseup="release(0)") + @mousedown="jog(0, 3, -1)", @mouseup="release(0)", + @touchstart.prevent="jog(0, 3, -1)", @touchend.prevent="release(0)") - g.button(@mousedown="jog(1, 1)", @mouseup="release(1)", - v-if="enabled[1]") + g.button(v-if="enabled[1]", + @mousedown="jog(1, 3, 1)", @mouseup="release(1)", + @touchstart.prevent="jog(1, 3, 1)", @touchend.prevent="release(1)") use.button(xlink:href="#pie-1", transform="translate(124 111) rotate(-135)") - text(x="125", y="24", transform="rotate(22 125 125)") - | {{adjust | fixed 0}}% - text(x="125", y="24", transform="rotate(-22 125 125)") - | {{adjust | fixed 0}}% + text(x="125", y="21", transform="rotate(22 125 125)") {{text(3)}} + text(x="125", y="21", transform="rotate(-22 125 125)") {{text(3)}} use.button(xlink:href="#pie-1", fill="transparent", transform="translate(124 111) rotate(-135)") use.button(xlink:href="#pie-1", v-if="enabled[1]", - transform="translate(124 130) rotate(45)", @mousedown="jog(1, -1)", - @mouseup="release(1)") + transform="translate(124 130) rotate(45)", + @mousedown="jog(1, 3, -1)", @mouseup="release(1)", + @touchstart.prevent="jog(1, 3, -1)", @touchend.prevent="release(1)") // 50% ring g.ring(fill="#c5c5c5", filter="url(#shadow)") use.button(xlink:href="#pie-2", v-if="enabled[0]", transform="translate(134 121) rotate(-45)", - @mousedown="jog(0, 0.5)", @mouseup="release(0)") + @mousedown="jog(0, 2, 1)", @mouseup="release(0)", + @touchstart.prevent="jog(0, 2, 1)", @touchend.prevent="release(0)") use.button(xlink:href="#pie-2", v-if="enabled[0]", transform="translate(115 121) rotate(135)", - @mousedown="jog(0, -0.5)", @mouseup="release(0)") + @mousedown="jog(0, 2, -1)", @mouseup="release(0)", + @touchstart.prevent="jog(0, 2, -1)", @touchend.prevent="release(0)") - g.button(@mousedown="jog(1, 0.5)", @mouseup="release(1)", - v-if="enabled[1]") + g.button(v-if="enabled[1]", + @mousedown="jog(1, 2, 1)", @mouseup="release(1)", + @touchstart.prevent="jog(1, 2, 1)", @touchend.prevent="release(1)") use.button(xlink:href="#pie-2", transform="translate(124 111) rotate(-135)") - text(x="125", y="48") {{0.5 * adjust | fixed 1}}% + text(x="125", y="48") {{text(2)}} use.button(xlink:href="#pie-2", fill="transparent", transform="translate(124 111) rotate(-135)") use.button(xlink:href="#pie-2", v-if="enabled[1]", transform="translate(124 130) rotate(45)", - @mousedown="jog(1, -0.5)", @mouseup="release(1)") + @mousedown="jog(1, 2, -1)", @mouseup="release(1)", + @touchstart.prevent="jog(1, 2, -1)", @touchend.prevent="release(1)") // 25% ring g.ring(fill="#e2e2e2", filter="url(#shadow)") use.button(xlink:href="#pie-3", v-if="enabled[0]", transform="translate(134 121) rotate(-45)", - @mousedown="jog(0, 0.25)", @mouseup="release(0)") + @mousedown="jog(0, 1, 1)", @mouseup="release(0)", + @touchstart.prevent="jog(0, 1, 1)", @touchend.prevent="release(0)") use.button(xlink:href="#pie-3", v-if="enabled[0]", transform="translate(115 121) rotate(135)", - @mousedown="jog(0, -0.25)", @mouseup="release(0)") + @mousedown="jog(0, 1, -1)", @mouseup="release(0)", + @touchstart.prevent="jog(0, 1, -1)", @touchend.prevent="release(0)") - g.button(@mousedown="jog(1, 0.25)", @mouseup="release(1)", - v-if="enabled[1]") + g.button(v-if="enabled[1]", + @mousedown="jog(1, 1, 1)", @mouseup="release(1)", + @touchstart.prevent="jog(1, 1, 1)", @touchend.prevent="release(1)") use.button(xlink:href="#pie-3", transform="translate(124 111) rotate(-135)") - text(x="125", y="73") {{0.25 * adjust | fixed 1}}% + text(x="125", y="69") {{text(1)}} use.button(xlink:href="#pie-3", fill="transparent", transform="translate(124 111) rotate(-135)") use.button(xlink:href="#pie-3", v-if="enabled[1]", transform="translate(124 130) rotate(45)", - @mousedown="jog(1, -0.25)", @mouseup="release(1)") + @mousedown="jog(1, 1, -1)", @mouseup="release(1)", + @touchstart.prevent="jog(1, 1, -1)", @touchend.prevent="release(1)") // 10% ring g.ring(fill="#f7f7f7", filter="url(#shadow)") use.button(xlink:href="#pie-4", v-if="enabled[0]", transform="translate(134 121) rotate(-45)", - @mousedown="jog(0, 0.1)", @mouseup="release(0)") + @mousedown="jog(0, 0, 1)", @mouseup="release(0)", + @touchstart.prevent="jog(0, 0, 1)", @touchend.prevent="release(0)") use.button(xlink:href="#pie-4", v-if="enabled[0]", transform="translate(115 121) rotate(135)", - @mousedown="jog(0, -0.1)", @mouseup="release(0)") + @mousedown="jog(0, 0, -1)", @mouseup="release(0)", + @touchstart.prevent="jog(0, 0, -1)", @touchend.prevent="release(0)") - g.button(@mousedown="jog(1, 0.1)", @mouseup="release(1)", - v-if="enabled[1]") + g.button(v-if="enabled[1]", + @mousedown="jog(1, 0, 1)", @mouseup="release(1)", + @touchstart.prevent="jog(1, 0, 1)", @touchend.prevent="release(1)") use.button(xlink:href="#pie-4", transform="translate(124 111) rotate(-135)") - text(x="125", y="95") {{0.1 * adjust | fixed 1}}% + text(x="125", y="91") {{text(0)}} use.button(xlink:href="#pie-4", fill="transparent", transform="translate(124 111) rotate(-135)") use.button(xlink:href="#pie-4", v-if="enabled[1]", transform="translate(124 130) rotate(45)", - @mousedown="jog(1, -0.1)", @mouseup="release(1)") + @mousedown="jog(1, 0, -1)", @mouseup="release(1)", + @touchstart.prevent="jog(1, 0, -1)", @touchend.prevent="release(1)") // +A - g.button.arrow(@mousedown="jog(0, 1)", @mouseup="release(0)", - transform="translate(230 120)", v-if="enabled[0]") + g.button.arrow(v-if="enabled[0]", transform="translate(230 120)", + @mousedown="jog(0, 3, 1)", @mouseup="release(0)", + @touchstart.prevent="jog(0, 3, 1)", @touchend.prevent="release(0)") use(xlink:href="#arrow", fill="url(#{{colors[0]}}-1)") text(x="-12", y="5", font-size="14", textLength="21") +{{axes[0]}} // -A - g.button.arrow(@mousedown="jog(0, -1)", @mouseup="release(0)", - transform="translate(20 120)", v-if="enabled[0]") + g.button.arrow(v-if="enabled[0]", transform="translate(20 120)", + @mousedown="jog(0, 3, -1)", @mouseup="release(0)", + @touchstart.prevent="jog(0, 3, -1)", @touchend.prevent="release(0)") use(xlink:href="#arrow", fill="url(#{{colors[0]}}-1)", transform="rotate(180)") text(x="-8", y="5", font-size="14", textLength="16") -{{axes[0]}} // +B - g.button.arrow(@mousedown="jog(1, 1)", @mouseup="release(1)", - transform="translate(125, 18)", v-if="enabled[1]") + g.button.arrow(v-if="enabled[1]", transform="translate(125, 18)", + @mousedown="jog(1, 3, 1)", @mouseup="release(1)", + @touchstart.prevent="jog(1, 3, 1)", @touchend.prevent="release(1)") use(xlink:href="#arrow", fill="url(#{{colors[1]}}-1)", transform="rotate(-90)") text(x="-8", y="5", font-size="12", textLength="16") +{{axes[1]}} // -B - g.button.arrow(@mousedown="jog(1, -1)", @mouseup="release(1)", - transform="translate(125, 225)", v-if="enabled[1]") + g.button.arrow(v-if="enabled[1]", transform="translate(125, 225)", + @mousedown="jog(1, 3, -1)", @mouseup="release(1)", + @touchstart.prevent="jog(1, 3, -1)", @touchend.prevent="release(1)") use(xlink:href="#arrow", fill="url(#{{colors[1]}}-1)", transform="rotate(90)") text(x="-7", y="5", font-size="12", textLength="14") -{{axes[1]}} diff --git a/src/pug/templates/control-view.pug b/src/pug/templates/control-view.pug index a2fa810..7aaa7ec 100644 --- a/src/pug/templates/control-view.pug +++ b/src/pug/templates/control-view.pug @@ -299,24 +299,41 @@ script#control-view-template(type="text/x-template") .jog axis-control(axes="XY", :colors="['red', 'green']", :enabled="[x.enabled, y.enabled]", - v-if="x.enabled || y.enabled", :adjust="jog_adjust") + v-if="x.enabled || y.enabled", :adjust="jog_adjust", + :step="jog_step") axis-control(axes="AZ", :colors="['orange', 'blue']", :enabled="[a.enabled, z.enabled]", - v-if="a.enabled || z.enabled", :adjust="jog_adjust") + v-if="a.enabled || z.enabled", :adjust="jog_adjust", + :step="jog_step") axis-control(axes="BC", :colors="['cyan', 'purple']", :enabled="[b.enabled, c.enabled]", - v-if="b.enabled || c.enabled", :adjust="jog_adjust") - - .jog-adjust - | Fine adjust - input(type="range", v-model="jog_adjust", min=1, max=100, step=1) - - center - | Left click the axes above holding down the mouse button to jog the - | machine. - center Jogging speed is set by the ring that is clicked. + v-if="b.enabled || c.enabled", :adjust="jog_adjust", + :step="jog_step") + + .jog-settings + .jog-adjust + | Fine adjust + input(type="range", v-model="jog_adjust", min=0, max=2, step=1, + list="jog-adjust-ticks") + datalist#jog-adjust-ticks + option(value="0") + option(value="1") + option(value="2") + + .jog-mode + | Step mode + input(type="checkbox", v-model="jog_step") + + .jog-instructions(v-if="jog_step") + p Left click the axes above to jog by the specified amount. + + .jog-instructions(v-else) + p. + Left click the axes above holding down the mouse button to jog the + machine. + p Jogging speed is set by the ring that is clicked. section#content4.tab-content console diff --git a/src/py/bbctrl/FileHandler.py b/src/py/bbctrl/FileHandler.py index ec6f228..8fb9d31 100644 --- a/src/py/bbctrl/FileHandler.py +++ b/src/py/bbctrl/FileHandler.py @@ -61,6 +61,7 @@ class FileHandler(bbctrl.APIHandler): def put_ok(self, *args): gcode = self.request.files['gcode'][0] filename = os.path.basename(gcode['filename'].replace('\\', '/')) + filename = filename.replace('#', '-').replace('?', '-') if not os.path.exists(self.get_upload()): os.mkdir(self.get_upload()) @@ -78,7 +79,7 @@ class FileHandler(bbctrl.APIHandler): if not filename: raise HTTPError(400, 'Missing filename') filename = os.path.basename(filename) - with open(self.get_upload(filename), 'r') as f: + with open(self.get_upload(filename).encode('utf8'), 'r') as f: self.write(f.read()) self.get_ctrl().state.select_file(filename) diff --git a/src/stylus/style.styl b/src/stylus/style.styl index ae62368..36e64a2 100644 --- a/src/stylus/style.styl +++ b/src/stylus/style.styl @@ -325,10 +325,6 @@ span.unit .jog svg text - -webkit-user-select none - -khtml-user-select none - -moz-user-select -moz-none - -o-user-select none user-select none font-family Sans font-weight bold @@ -360,7 +356,7 @@ span.unit stroke #e55 text - font-size 10pt + font-size 8pt text-anchor middle .info @@ -537,13 +533,12 @@ span.unit > svg margin 1em - .jog-adjust - text-align center - margin-bottom 1em + .jog-settings + margin-bottom 1em - input - margin 0 0.5em - vertical-align middle + input + margin 0 0.5em + vertical-align middle .path-viewer table -- 2.27.0