stl more shiny

5 files changed, 65 insertions, 25 deletions

diff --git a/frontend/app/views/tile/forms/tile.form.misc.js b/frontend/app/views/tile/forms/tile.form.misc.js
index dff5e68..fd72ad3 100644
--- a/frontend/app/views/tile/forms/tile.form.misc.js
+++ b/frontend/app/views/tile/forms/tile.form.misc.js
@@ -19,6 +19,16 @@ export default function TileMiscForm({ tile, parent }) {
           onChange={parent.handleSettingsSelect}
         />
       </div>
+      {tile.settings.units === "video" && (
+        <Checkbox
+          label="Scale to video"
+          name="scale_to_video"
+          className='short'
+          checked={tile.settings.scale_to_video}
+          onChange={parent.handleSettingsSelect}
+          autoComplete="off"
+        />
+      )}
       <Slider
         title='Opacity'
         name='opacity'
diff --git a/frontend/app/views/tile/tile.utils.js b/frontend/app/views/tile/tile.utils.js
index c0f92a5..c0ddd3e 100644
--- a/frontend/app/views/tile/tile.utils.js
+++ b/frontend/app/views/tile/tile.utils.js
@@ -1,5 +1,6 @@
 export const generateTransform = (tile, box, bounds, videoBounds) => {
   let { x, y, align, rotation, scale, units, is_tiled } = tile.settings
+  let xUnits, yUnits
   if (is_tiled) {
     return 'translateZ(0)'
   }
@@ -17,22 +18,45 @@ export const generateTransform = (tile, box, bounds, videoBounds) => {
   units = units || 'px'
   const [yalign, xalign] = align.split('_')
   let transform = ['translateZ(0)']
-  if (yalign === 'center') {
-    transform.push('translateY(-50%)')
-  }
-  if (xalign === 'center') {
-    transform.push('translateX(-50%)')
-  }
-  // if (x % 2 == 1) x += 0.5
-  // if (y % 2 == 1) y += 0.5
-  const xUnits = units === 'video' ? videoUnits(x, bounds, videoBounds) : x + units
-  const yUnits = units === 'video' ? videoUnits(y, bounds, videoBounds) : y + units
+  if (!tile.settings.scale_to_video) {
+    if (yalign === 'center') {
+      transform.push('translateY(-50%)')
+    }
+    if (xalign === 'center') {
+      transform.push('translateX(-50%)')
+    }
+    xUnits = units === 'video' ? Math.round(videoUnits(x, bounds, videoBounds)) + "px" : x + units
+    yUnits = units === 'video' ? Math.round(videoUnits(y, bounds, videoBounds)) + "px" : y + units
+
+    transform.push('translateX(' + xUnits + ')')
+    transform.push('translateY(' + yUnits + ')')
+    if (scale !== 1) {
+      transform.push('scale(' + scale + ')')
+    }
+  } else {
+    yUnits = y + "px"
+    xUnits = x + "px"
+
+    if (yalign === 'center') {
+      transform.push('translateY(-50%)')
+    }
+    if (xalign === 'center') {
+      transform.push('translateX(-50%)')
+    }
+    if (xalign === 'right') {
+      transform.push('translateX(50%)')
+    }
+    if (yalign === 'bottom') {
+      transform.push('translateY(50%)')
+    }
 
-  transform.push('translateX(' + xUnits + ')')
-  transform.push('translateY(' + yUnits + ')')
-  if (scale !== 1) {
     transform.push('scale(' + scale + ')')
+    transform.push('scale(' + videoUnits(1, bounds, videoBounds) + ')')
+
+    transform.push('translateY(' + yUnits + ')')
+    transform.push('translateX(' + xUnits + ')')
   }
+
   if (rotation !== 0) {
     transform.push('rotateZ(' + rotation + 'deg)')
   }
@@ -75,7 +99,7 @@ export const unitsDimension = (tile, dimension, bounds, videoBounds) => {
   if (!value) return "auto"
   if (tile.settings.units) {
     if (tile.settings.units === 'video') {
-      return videoUnits(value, bounds, videoBounds)
+      return Math.round(videoUnits(value, bounds, videoBounds)) + "px"
     }
     return value + tile.settings.units
   }
@@ -84,9 +108,9 @@ export const unitsDimension = (tile, dimension, bounds, videoBounds) => {
 
 export const videoUnits = (value, bounds, videoBounds) => {
   if ((videoBounds.width / videoBounds.height) > (bounds.width / bounds.height)) {
-    return Math.round(value * bounds.height / videoBounds.height) + 'px'
+    return value * bounds.height / videoBounds.height
   }
-  return Math.round(value * bounds.width / videoBounds.width) + 'px'
+  return value * bounds.width / videoBounds.width
 }
 
 export const hexToRgb = (hex) => {
@@ -121,9 +145,10 @@ export const pickCursor = (tile, cursors, viewing) => {
     }
   }
   if (isCustom) {
-    className = null
+    className = ""
     cursorStyle = `url(${customCursor.url}) ${x} ${y}, `
     cursorStyle += (tile.target_page_id || tile.href) ? 'pointer' : 'default'
   }
+
   return [className, cursorStyle]
 }
\ No newline at end of file
diff --git a/frontend/site/projects/museum/constants.js b/frontend/site/projects/museum/constants.js
index 4913717..5c3288d 100644
--- a/frontend/site/projects/museum/constants.js
+++ b/frontend/site/projects/museum/constants.js
@@ -1,7 +1,7 @@
 export const ARTISTS = {
   nora: {
     name: "Nora Al-Badri",
-    location: "C-Base, Berlin, Germany",
+    location: "CCCB and c-base, Berlin, Germany",
     start: "nora-1",
     bio: `
       <p>
diff --git a/frontend/site/projects/museum/stl-files.js b/frontend/site/projects/museum/stl-files.js
index a6fc957..146e135 100644
--- a/frontend/site/projects/museum/stl-files.js
+++ b/frontend/site/projects/museum/stl-files.js
@@ -3,8 +3,9 @@ export const STL_FILES = {
   "nora-nefertiti": {
     url: "/last-museum/static/media/last-museum/nora-albadri/nefertiti.stl",
     modelMaterial: { 
-      color: "#0000ff", 
-      shininess: 30,
+      color: "#bbbbff", 
+      metalness: 0.8,
+      roughness: 0.4,
     },
     width: () => window.innerWidth / 2,
     height: () => window.innerHeight * 2/3,
@@ -25,7 +26,8 @@ export const STL_FILES = {
     url: "/last-museum/static/media/last-museum/nora-albadri/shehorus.stl",
     modelMaterial: { 
       color: "#888888", 
-      shininess: 100,
+      metalness: 0.8,
+      roughness: 0.4,
     },
     width: () => window.innerWidth * 0.25,
     height: () => window.innerHeight * 2/3,
@@ -46,7 +48,8 @@ export const STL_FILES = {
     url: "/last-museum/static/media/last-museum/nora-albadri/peg.stl",
     modelMaterial: { 
       color: "#0000ff", 
-      shininess: 30,
+      metalness: 0.8,
+      roughness: 0.4,
     },
     width: () => window.innerWidth / 2,
     height: () => window.innerHeight * 2/3,
@@ -68,7 +71,8 @@ export const STL_FILES = {
     url: "/last-museum/static/media/last-museum/nora-albadri/lamassu.stl",
     modelMaterial: { 
       color: "#bfb8a8", 
-      shininess: 60,
+      metalness: 0.8,
+      roughness: 0.4,
     },
     width: () => window.innerWidth * 1/2,
     height: () => window.innerHeight * 2/3,
@@ -90,7 +94,8 @@ export const STL_FILES = {
     url: "/last-museum/static/media/last-museum/nora-albadri/queen.stl",
     modelMaterial: { 
       color: "#BCC6CC", 
-      shininess: 80,
+      metalness: 0.8,
+      roughness: 0.4,
     },
     width: () => window.innerWidth / 2,
     height: () => window.innerHeight * 2/3,
diff --git a/frontend/site/projects/museum/stl/STLViewer.js b/frontend/site/projects/museum/stl/STLViewer.js
index 39848ad..b781f63 100644
--- a/frontend/site/projects/museum/stl/STLViewer.js
+++ b/frontend/site/projects/museum/stl/STLViewer.js
@@ -89,7 +89,7 @@ class STLViewer extends Component {
 
       mesh = new THREE.Mesh(
         geometry,
-        new THREE.MeshPhongMaterial(modelMaterial)
+        new THREE.MeshStandardMaterial(modelMaterial)
       );
 
       geometry.computeBoundingBox();