From b9f7423a267d275497cf7b324aff8292cb32a6d2 Mon Sep 17 00:00:00 2001 From: Joseph Coffland Date: Sat, 23 Jun 2018 17:50:20 -0700 Subject: [PATCH] Added configuration option to show metric or imperial units in browser. #74 --- src/jade/index.jade | 4 ++ src/jade/templates/control-view.jade | 25 ++++++----- src/jade/templates/motor-view.jade | 10 +++-- src/jade/templates/templated-input.jade | 24 +++++----- src/js/app.js | 10 ++++- src/js/control-view.js | 3 ++ src/js/main.js | 1 + src/js/motor-view.js | 8 +++- src/js/templated-input.js | 34 +++++++++++++++ src/js/unit-value.js | 58 +++++++++++++++++++++++++ src/resources/config-template.json | 27 ++++++++++++ src/stylus/style.styl | 7 ++- 12 files changed, 182 insertions(+), 29 deletions(-) create mode 100644 src/js/unit-value.js diff --git a/src/jade/index.jade b/src/jade/index.jade index 633687d..b7b1099 100644 --- a/src/jade/index.jade +++ b/src/jade/index.jade @@ -60,6 +60,10 @@ html(lang="en") button.save.pure-button.button-success(:disabled="!modified", @click="save") Save + select.units(v-model="config.settings.units", @change="modified = true") + option(value="METRIC") Metric + option(value="IMPERIAL") Imperial + .pure-menu ul.pure-menu-list li.pure-menu-heading diff --git a/src/jade/templates/control-view.jade b/src/jade/templates/control-view.jade index 1eca81d..fd4a840 100644 --- a/src/jade/templates/control-view.jade +++ b/src/jade/templates/control-view.jade @@ -46,9 +46,10 @@ script#control-view-template(type="text/x-template") v-if="enabled('#{axis}')") th.name #{axis} td.position - | {{(state.#{axis}p + get_offset('#{axis}')) || 0 | fixed 3}} - td.absolute {{state.#{axis}p || 0 | fixed 3}} - td.offset {{get_offset('#{axis}') | fixed 3}} + unit-value(:value="state.#{axis}p + get_offset('#{axis}')", + precision="3") + td.absolute: unit-value(:value="state.#{axis}p", precision="3") + td.offset: unit-value(:value="get_offset('#{axis}')", precision="3") th.actions button.pure-button(:disabled="!is_ready", title="Set {{'#{axis}' | upper}} axis position.", @@ -118,24 +119,28 @@ script#control-view-template(type="text/x-template") th Message td.reason(:class="{attention: highlight_reason}") {{reason}} td - tr + tr(title="Currently active machine units") th Units td {{state.imperial ? 'IMPERIAL' : 'METRIC'}} td tr th Feed - td {{state.feed || 0 | fixed 0}} - td mm/min + td: unit-value(:value="state.feed", precision="2", unit="", iunit="") + td {{metric ? 'mm/min' : 'IPM'}} tr th Speed - td {{state.speed || 0 | fixed 0}} ({{state.s || 0 | fixed 0}}) + td + | {{state.speed || 0 | fixed 0}} + span(v-if="!isNaN(state.s)") ({{state.s | fixed 0}}) td RPM table.info - tr + tr( + title="Current velocity in {{metric ? 'meters' : 'inches'}} per minute") th Velocity - td {{state.v || 0 | fixed 2}} - td m/min + td: unit-value(:value="state.v", precision="2", unit="", iunit="", + scale="0.0254") + td {{metric ? 'm/min' : 'IPM'}} tr th Line td {{0 <= state.line ? state.line : '-'}} diff --git a/src/jade/templates/motor-view.jade b/src/jade/templates/motor-view.jade index 09b7252..e1440b4 100644 --- a/src/jade/templates/motor-view.jade +++ b/src/jade/templates/motor-view.jade @@ -39,14 +39,18 @@ script#motor-view-template(type="text/x-template") label.extra(v-if="$key == 'max-velocity'", slot="extra", title="Revolutions Per Minute") ({{rpm | fixed 0}} RPM) - label.extra(v-if="$key == 'max-accel'", slot="extra", + label.extra(v-if="$key == 'max-accel' && metric", slot="extra", title="G-force") ({{gForce | fixed 3}} g) - label.extra(v-if="$key == 'max-jerk'", slot="extra", + label.extra(v-if="$key == 'max-jerk' && metric", slot="extra", title="G-force per minute") ({{gForcePerMin | fixed 2}} g/min) label.extra(v-if="$key == 'step-angle'", slot="extra", title="Steps per revolution") ({{stepsPerRev | fixed 0}} steps/rev) - label.extra(v-if="$key == 'travel-per-rev'", slot="extra", + label.extra(v-if="$key == 'travel-per-rev' && metric", slot="extra", title="Micrometers per step") ({{umPerStep | fixed 1}} µm/step) + + label.extra(v-if="$key == 'travel-per-rev' && !metric", slot="extra", + title="Thousandths of an inch per step") + | ({{milPerStep | fixed 2}} mil/step) diff --git a/src/jade/templates/templated-input.jade b/src/jade/templates/templated-input.jade index a264f42..0e456ac 100644 --- a/src/jade/templates/templated-input.jade +++ b/src/jade/templates/templated-input.jade @@ -30,32 +30,32 @@ script#templated-input-template(type="text/x-template") title="Default {{template.default}} {{template.unit || ''}}") label(:for="name") {{name}} - select(v-if="template.type == 'enum' || template.values", v-model="model", + select(v-if="template.type == 'enum' || template.values", v-model="view", :name="name", @change="change") option(v-for="opt in template.values", :value="opt") {{opt}} - input(v-if="template.type == 'bool'", type="checkbox", - v-model="model", :name="name", @change="change") + input(v-if="template.type == 'bool'", type="checkbox", v-model="view", + :name="name", @change="change") - input(v-if="template.type == 'float'", v-model="model", number, + input(v-if="template.type == 'float'", v-model="view", number, :min="template.min", :max="template.max", :step="template.step || 'any'", type="number", :name="name", @change="change") - input(v-if="template.type == 'int' && !template.values", v-model="model", + input(v-if="template.type == 'int' && !template.values", v-model="view", number, :min="template.min", :max="template.max", type="number", :name="name", @change="change") - input(v-if="template.type == 'string'", v-model="model", - type="text", :name="name", @change="change") - - textarea(v-if="template.type == 'text'", v-model="model", + input(v-if="template.type == 'string'", v-model="view", type="text", :name="name", @change="change") + textarea(v-if="template.type == 'text'", v-model="view", :name="name", + @change="change") + span.range(v-if="template.type == 'percent'") - input(type="range", v-model="model", :name="name", number, min="0", + input(type="range", v-model="view", :name="name", number, min="0", max="100", step="1", @change="change") - | {{model}} + | {{view}} - label.units {{template.unit}} + label.units {{units}} slot(name="extra") diff --git a/src/js/app.js b/src/js/app.js index a66b99f..76f9f61 100644 --- a/src/js/app.js +++ b/src/js/app.js @@ -86,7 +86,11 @@ module.exports = new Vue({ index: -1, modified: false, template: {motors: {template: {}}}, - config: {motors: [{}, {}, {}, {}], version: ''}, + config: { + settings: {units: 'METRIC'}, + motors: [{}, {}, {}, {}], + version: '' + }, state: {}, messages: [], errorTimeout: 30, @@ -128,6 +132,7 @@ module.exports = new Vue({ 'config-changed': function () {this.modified = true;}, 'hostname-changed': function (hostname) {this.hostname = hostname}, + send: function (msg) { if (this.status == 'connected') { console.debug('>', msg); @@ -201,6 +206,9 @@ module.exports = new Vue({ methods: { + metric: function () {return this.config.settings.units != 'IMPERIAL'}, + + block_error_dialog: function () { this.errorTimeoutStart = Date.now(); this.errorShow = false; diff --git a/src/js/control-view.js b/src/js/control-view.js index eb32f22..6ff21a3 100644 --- a/src/js/control-view.js +++ b/src/js/control-view.js @@ -82,6 +82,9 @@ module.exports = { computed: { + metric: function () {return this.$root.metric()}, + + mach_state: function () { var cycle = this.state.cycle; var state = this.state.xx; diff --git a/src/js/main.js b/src/js/main.js index db409fe..2a65204 100644 --- a/src/js/main.js +++ b/src/js/main.js @@ -38,6 +38,7 @@ $(function() { Vue.component('message', require('./message')); Vue.component('indicators', require('./indicators')); Vue.component('console', require('./console')); + Vue.component('unit-value', require('./unit-value')); Vue.filter('percent', function (value, precision) { if (typeof precision == 'undefined') precision = 2; diff --git a/src/js/motor-view.js b/src/js/motor-view.js index 51627aa..9e40975 100644 --- a/src/js/motor-view.js +++ b/src/js/motor-view.js @@ -34,6 +34,9 @@ module.exports = { computed: { + metric: function () {return this.$root.metric()}, + + is_slave: function () { for (var i = 0; i < this.index; i++) if (this.motor.axis == this.config.motors[i].axis) @@ -58,7 +61,10 @@ module.exports = { umPerStep: function () { return this.motor['travel-per-rev'] * this.motor['step-angle'] / 0.36 - } + }, + + + milPerStep: function () {return this.umPerStep / 25.4} }, diff --git a/src/js/templated-input.js b/src/js/templated-input.js index db0ce8c..7509806 100644 --- a/src/js/templated-input.js +++ b/src/js/templated-input.js @@ -34,8 +34,42 @@ module.exports = { props: ['name', 'model', 'template'], + data: function () {return {view: ''}}, + + + computed: { + metric: function () {return this.$root.metric()}, + + + units: function () { + return (this.metric || !this.template.iunit) ? + this.template.unit : this.template.iunit; + } + }, + + + watch: { + metric: function () {this.set_view()}, + model: function () {this.set_view()} + }, + + + ready: function () {this.set_view()}, + + methods: { + set_view: function () { + if (this.template.scale && !this.metric) + this.view = (this.model / this.template.scale).toFixed(2); + else this.view = this.model; + }, + + change: function () { + if (this.template.scale && !this.metric) + this.model = 1 * (this.view * this.template.scale).toFixed(3); + else this.model = this.view; + this.$dispatch('input-changed'); } } diff --git a/src/js/unit-value.js b/src/js/unit-value.js new file mode 100644 index 0000000..a84a61c --- /dev/null +++ b/src/js/unit-value.js @@ -0,0 +1,58 @@ +/******************************************************************************\ + + This file is part of the Buildbotics firmware. + + Copyright (c) 2015 - 2018, Buildbotics LLC + All rights reserved. + + This file ("the software") is free software: you can redistribute it + and/or modify it under the terms of the GNU General Public License, + version 2 as published by the Free Software Foundation. You should + have received a copy of the GNU General Public License, version 2 + along with the software. If not, see . + + The software is distributed in the hope that it will be useful, but + WITHOUT ANY WARRANTY; without even the implied warranty of + MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU + Lesser General Public License for more details. + + You should have received a copy of the GNU Lesser General Public + License along with the software. If not, see + . + + For information regarding this software email: + "Joseph Coffland" + +\******************************************************************************/ + +'use strict' + + +module.exports = { + replace: true, + template: '{{text}}{{metric ? unit : iunit}}', + props: ['value', 'precision', 'unit', 'iunit', 'scale'], + + + computed: { + metric: function () {return this.$root.metric()}, + + + text: function () { + var value = this.value; + if (typeof value == 'undefined') return ''; + + if (!this.metric) value /= this.scale; + + return (1 * value.toFixed(this.precision)).toLocaleString(); + } + }, + + + ready: function () { + if (typeof this.precision == 'undefined') this.precision = 0; + if (typeof this.unit == 'undefined') this.unit = 'mm'; + if (typeof this.iunit == 'undefined') this.iunit = 'in'; + if (typeof this.scale == 'undefined') this.scale = 25.4; + } +} diff --git a/src/resources/config-template.json b/src/resources/config-template.json index 6da0be1..93eabf5 100644 --- a/src/resources/config-template.json +++ b/src/resources/config-template.json @@ -1,4 +1,11 @@ { + "settings": { + "units": { + "type": "enum", + "values": ["METRIC", "IMPERIAL"], + "default": "METRIC" + } + }, "motors": { "type": "list", "index": "0123", @@ -60,6 +67,8 @@ "type": "float", "min": 0, "unit": "m/min", + "iunit": "IPM", + "scale": 0.0254, "default": 5, "code": "vm" }, @@ -67,6 +76,8 @@ "type": "float", "min": 0, "unit": "km/min²", + "iunit": "g-force", + "scale": 35.304, "default": 10, "code": "am" }, @@ -74,6 +85,8 @@ "type": "float", "min": 0, "unit": "km/min³", + "iunit": "g/min", + "scale": 35.304, "default": 50, "code": "jm" }, @@ -89,6 +102,8 @@ "travel-per-rev": { "type": "float", "unit": "mm", + "iunit": "in", + "scale": 25.4, "default": 5, "code": "tr" } @@ -98,12 +113,16 @@ "min-soft-limit": { "type": "float", "unit": "mm", + "iunit": "in", + "scale": 25.4, "default": 0, "code": "tn" }, "max-soft-limit": { "type": "float", "unit": "mm", + "iunit": "in", + "scale": 25.4, "default": 0, "code": "tm" }, @@ -132,6 +151,8 @@ "type": "float", "min": 0, "unit": "m/min", + "iunit": "IPM", + "scale": 0.0254, "default": 0.5, "code": "sv" }, @@ -139,6 +160,8 @@ "type": "float", "min": 0, "unit": "m/min", + "iunit": "IPM", + "scale": 0.0254, "default": 0.1, "code": "lv" }, @@ -146,6 +169,8 @@ "type": "float", "min": 0, "unit": "mm", + "iunit": "in", + "scale": 25.4, "default": 5, "code": "lb" }, @@ -153,6 +178,8 @@ "type": "float", "min": 0, "unit": "mm", + "iunit": "in", + "scale": 25.4, "default": 1, "code": "zb" } diff --git a/src/stylus/style.styl b/src/stylus/style.styl index bf79bf1..41495dc 100644 --- a/src/stylus/style.styl +++ b/src/stylus/style.styl @@ -77,6 +77,9 @@ body color #000 animation attention 2s step-start 0s infinite +span.unit + font-size 60% + .status color #eee text-align center @@ -111,9 +114,9 @@ body top 50% #menu - .save + .save, .units display block - margin 0.25em auto + margin 0.25em 0.6em .pure-menu-heading background inherit -- 2.27.0