Added value display to slider, closes #21

LucasDower · Jan 18, 2022 · a5bafea · a5bafea · inxomnyaa · Jan 18, 2022
1 parent 5713133
commit a5bafea
Show file tree

Hide file tree

Showing 5 changed files with 37 additions and 11 deletions.
diff --git a/src/app_context.ts b/src/app_context.ts
@@ -93,7 +93,7 @@ export class AppContext {
             {
                 label: 'Build',
                 elements: [
-                    new SliderElement('Voxel size', 0.01, 0.5, 0.01, 0.10001),
+                    new SliderElement('Desired height', 1, 320, 1, 80),
                     new ComboBoxElement('Ambient occlusion', [
                         { id: 'on', displayText: 'On (recommended)' },
                         { id: 'off', displayText: 'Off (faster)' },
@@ -218,11 +218,10 @@ export class AppContext {
         const voxelSize = (<SliderElement> this._ui[2].elements[0]).getValue();
         const ambientOcclusion = (<ComboBoxElement> this._ui[2].elements[1]).getValue();
         this.ambientOcclusion = ambientOcclusion === 'on';
-        console.log(voxelSize, ambientOcclusion);
 
         try {
             const voxelManager = VoxelManager.Get;
-            voxelManager.setVoxelSize(voxelSize);
+            voxelManager.setDesiredHeight(voxelSize);
             voxelManager.voxeliseMesh(this._loadedMesh!);
 
             const renderer = Renderer.Get;

diff --git a/src/mesh.ts b/src/mesh.ts
@@ -112,6 +112,7 @@ class Material {
 
 export class Mesh {
     public materials: Array<Material>;
+    public static desiredHeight = 8.0;
 
     constructor(objPathString: string, mtlPathString: string) {
         // Parse .obj
@@ -396,9 +397,8 @@ export class Mesh {
 
         const size = Vector3.sub(b, a);
         console.log('size', size);
-        const targetSize = 8.0;
         // const scaleFactor = targetSize / Math.max(size.x, size.y, size.z);
-        const scaleFactor = targetSize / size.z;
+        const scaleFactor = Mesh.desiredHeight / size.z;
         console.log('scaleFactor', scaleFactor);
 
         // Scale each triangle

diff --git a/src/ui/elements/slider.ts b/src/ui/elements/slider.ts
@@ -21,8 +21,13 @@ export class SliderElement extends LabelledElement {
     public generateInnerHTML() {
         const norm = (this._value - this._min) / (this._max - this._min);
         return `
-            <div class="new-slider" id="${this._id}">
-                <div class="new-slider-bar" id="${this._id}-bar"style="width: ${norm * 100}%;">
+            <div style="display: flex; flex-direction: row;">
+                <div class="slider-value" id="${this._id + '-value'}">
+                    ${this._value}
+                </div>
+                <div class="new-slider" id="${this._id}" style="flex-grow: 1;">
+                    <div class="new-slider-bar" id="${this._id}-bar"style="width: ${norm * 100}%;">
+                    </div>
                 </div>
             </div>
         `;
@@ -57,14 +62,18 @@ export class SliderElement extends LabelledElement {
 
         const element = document.getElementById(this._id) as HTMLDivElement;
         const elementBar = document.getElementById(this._id + '-bar') as HTMLDivElement;
-        assert(element !== null && elementBar !== null);
+        const elementValue = document.getElementById(this._id + '-value') as HTMLDivElement;
+        assert(element !== null && elementBar !== null && elementValue !== null);
+
 
         const mouseEvent = e as MouseEvent;
         const xOffset = mouseEvent.clientX - elementBar.getBoundingClientRect().x;
         const width = element.clientWidth;
         const norm = clamp(xOffset / width, 0.0, 1.0);
         this._value = (norm * (this._max - this._min)) + this._min;
         elementBar.style.width = `${norm * 100}%`;
+
+        elementValue.innerHTML = this._value.toFixed(0);
     }
 
     public getValue() {
@@ -76,14 +85,17 @@ export class SliderElement extends LabelledElement {
 
         const element = document.getElementById(this._id) as HTMLDivElement;
         const elementBar = document.getElementById(this._id + '-bar') as HTMLDivElement;
-        assert(element !== null && elementBar !== null);
+        const elementValue = document.getElementById(this._id + '-value') as HTMLDivElement;
+        assert(element !== null && elementBar !== null && elementValue !== null);
 
         if (this._isEnabled) {
             element.classList.remove('new-slider-disabled');
             elementBar.classList.remove('new-slider-bar-disabled');
+            elementValue.classList.remove('slider-value-disabled');
         } else {
             element.classList.add('new-slider-disabled');
             elementBar.classList.add('new-slider-bar-disabled');
+            elementValue.classList.add('slider-value-disabled');
         }
     }
 }
diff --git a/src/voxel_manager.ts b/src/voxel_manager.ts
@@ -45,8 +45,8 @@ export class VoxelManager {
         this.blockPalette = [];
     }
 
-    public setVoxelSize(voxelSize: number) {
-        this.voxelSize = voxelSize;
+    public setDesiredHeight(desiredHeight: number) {
+        this.voxelSize = 8.0 / desiredHeight;
     }
 
     private _clearVoxels() {
@@ -209,5 +209,7 @@ export class VoxelManager {
         });
 
         this.assignBlankBlocks();
+
+        console.log('VOXEL SIZE', VoxelManager.Get.voxelSize, 'BLOCK HEIGHT', this.max.z - this.min.z);
     }
 }
diff --git a/styles.css b/styles.css
@@ -172,6 +172,19 @@ select:disabled {
   border: 1px solid rgb(255, 255, 255, 0.1);
 }
 
+.slider-value {
+  align-self: center;
+  font-weight: 300;
+  font-size: 85%;
+  margin-right: 8px;
+  color: #A8A8A8;
+  width: 20px;
+  text-align: center;
+}
+.slider-value-disabled {
+  color: #535353;
+}
+
 .new-slider {
   border-radius: 5px;
   font-family: 'Lexend', sans-serif;