Build Volume Color and Color Control Fix

Fixed an issue with color control not working as intended and now use the line color on the bed for the build volume.
Sindarius · Nov 29, 2020 · 7f9c483 · 7f9c483
1 parent 0bafa9f
commit 7f9c483
Show file tree

Hide file tree

Showing 4 changed files with 22 additions and 6 deletions.
diff --git a/GCodeViewer/ColorPicker.vue b/GCodeViewer/ColorPicker.vue
@@ -1,15 +1,15 @@
 <template>
   <v-row justify="center" align="center">
     <v-col class="shrink" :style="[backgroundColorStyle]">
-      <v-text-field v-model="color" v-on:blur="updateValue(color)" hide-details class="ma-0 pa-0" solo>
+      <v-text-field v-model="internalTextColor" @blur="updateValue(internalTextColor)" @keyup.enter="updateValue(internalTextColor)" hide-details class="ma-0 pa-0" solo>
         <template v-slot:append>
           <v-menu v-model="menu" top nudge-bottom="105" nudge-left="16" :close-on-content-click="false">
             <template v-slot:activator="{ on }">
               <div :style="swatchStyle" v-on="on" />
             </template>
             <v-card>
               <v-card-text class="pa-0">
-                <v-color-picker class="index-placement" v-model="color" flat v-on:blur="updateValue(color)" />
+                <v-color-picker class="index-placement" v-model="color" flat @input="updateValue(color)"   />
               </v-card-text>
             </v-card>
           </v-menu>
@@ -23,6 +23,7 @@
   export default {
     props: ["editcolor"],
     data: () => ({
+      internalTextColor: "#000000",
       color: "#000000",
       menu: false,
     }),
@@ -47,13 +48,16 @@
     },
     mounted() {
       this.color = this.editcolor;
+      this.internalTextColor = this.editcolor;
     },
     methods: {
       updateValue(val) {
+        this.color = val;
         if (!val.startsWith("#")) {
           this.color = "#" + val;
         }
         this.color = this.color.toUpperCase().padEnd(7, "0").substring(0, 7);
+        this.internalTextColor = this.color;
         this.$emit("updatecolor", this.color);
       },
     },

diff --git a/GCodeViewer/viewer/bed.js b/GCodeViewer/viewer/bed.js
@@ -147,7 +147,7 @@ export default class {
       this.scene.setRenderingAutoClearDepthStencil(2, false, false, false);
 
       var hl = new BABYLON.HighlightLayer('hl', this.scene, { isStroke: true, blurTextureSizeRatio: 3 });
-      hl.addMesh(this.bedMesh, new BABYLON.Color4(0, 0, 1, 1));
+      hl.addMesh(this.bedMesh,this.getBedColor4());
 
       this.bedMesh.onBeforeRenderObservable.add(() => {
         this.scene.getEngine().setColorWrite(false);
@@ -177,7 +177,8 @@ export default class {
       this.bedMesh.edgesWidth = 100;
       this.bedMesh.material = this.boxMaterial;
       this.bedMesh.isPickable = false;
-      this.bedMesh.edgesColor = new BABYLON.Color4(0, 0, 1, 1);
+      this.bedMesh.edgesColor = this.getBedColor4();
+
       this.registerClipIgnore(this.bedMesh);
     }
   }
@@ -212,6 +213,9 @@ export default class {
       this.buildBed();
     }
   }
+  getBedColor4(){
+   return BABYLON.Color4.FromHexString(this.getBedColor().padEnd(9,'F'));
+  }
   dispose() {
     this.bedMesh.dispose(false, true);
   }

diff --git a/GCodeViewer/viewer/buildobjects.js b/GCodeViewer/viewer/buildobjects.js
@@ -49,9 +49,9 @@ export default class {
     return material;
   }
   rebuildMaterials() {
-    this.baseMaterial = this.setBuildMaterial('BuildObjectBaseMaterial', new BABYLON.Color3(0.1, 0.5, 0.1));
+    this.baseMaterial = this.setBuildMaterial('BuildObjectBaseMaterial', new BABYLON.Color4(0.1, 0.5, 0.1), 0.25);
     this.highlightMaterial = this.setBuildMaterial('BuildObjectHighlightMateria', new BABYLON.Color3(0.8, 0.8, 0.8));
-    this.cancelledMaterial = this.setBuildMaterial('BuildObjectHighlightMateria', new BABYLON.Color3(1, 0, 0));
+    this.cancelledMaterial = this.setBuildMaterial('BuildObjectHighlightMateria', new BABYLON.Color3(1, 0, 0), 0.4);
     this.cancelledHighlightMaterial = this.setBuildMaterial('BuildObjectHighlightMateria', new BABYLON.Color3(1, 1, 0), 0.6);
     let material = new BABYLON.Texture.CreateFromBase64String(this.xmark, 'checkerboard', this.scene);
     this.cancelledMaterial.diffuseTexture = material;
@@ -211,8 +211,14 @@ export default class {
   setObjectTexture(mesh) {
     if (mesh.metadata.cancelled) {
       mesh.material = this.cancelledMaterial;
+      mesh.enableEdgesRendering();
+      mesh.edgesWidth = 15.0;
+      mesh.edgesColor = new BABYLON.Color4(1, 0, 0, 1);
     } else {
       mesh.material = this.baseMaterial;
+      mesh.enableEdgesRendering();
+      mesh.edgesWidth = 15.0;
+      mesh.edgesColor = new BABYLON.Color4(0, 1, 0, 1);
     }
   }
   handleClick(pickInfo) {

diff --git a/GCodeViewer/viewer/gcodeviewer.js b/GCodeViewer/viewer/gcodeviewer.js
@@ -93,6 +93,8 @@ export default class {
     this.orbitCamera.inputs.attached.keyboard.panningSensibility = 2;
     this.orbitCamera.panningSensibility = 10;
     this.orbitCamera.zoomingSensibility = 10;
+    this.orbitCamera.wheelDeltaPercentage = 0.02;
+    this.orbitCamera.pinchDeltaPercentage = 0.02;
     //Disabled at the moment
     //this.flyCamera = new BABYLON.UniversalCamera('UniversalCamera', new BABYLON.Vector3(0, 0, -10), this.scene);