Major Changes in CSS3D gallery

Author: PANSTER.Daniel

angular.json

@@ -23,7 +23,6 @@
               }
             ],
             "styles": [
-              "styles/styles.css",
               "styles/w3.4.10.css",
               "styles/css3d-threejs.component.css",
               "styles/img-gallery.component.css"
@@ -76,7 +75,6 @@
             "tsConfig": "src/tsconfig.spec.json",
             "scripts": [],
             "styles": [
-              "styles/styles.css",
               "styles/w3.4.10.css",
               "styles/css3d-threejs.component.css"
             ],

package-lock.json

@@ -31,6 +31,7 @@
     "cannon": "^0.6.1",
     "chroma-js": "^1.3.7",
     "core-js": "^2.4.1",
+    "exif-js": "^2.3.0",
     "file-system": "^2.2.2",
     "filelist_reader": "^1.0.2",
     "fs": "0.0.1-security",

package.json

@@ -6,9 +6,9 @@ <h3>
   </div>
   <code>
     <a routerLink="" class="w3-bar-item w3-button">About</a>
-    <a routerLink="cube-threejs" class="w3-bar-item w3-button">Cube - Three.js</a>
-    <a routerLink="css3d-threejs" class="w3-bar-item w3-button">CSS3D - Three.js</a>
     <a routerLink="img-gallery" class="w3-bar-item w3-button">Image Gallery - Three.js</a>
+    <a routerLink="css3d-threejs" class="w3-bar-item w3-button">CSS3D - Three.js</a>
+    <a routerLink="cube-threejs" class="w3-bar-item w3-button">Cube - Three.js</a>
   </code>
 </div>
 

src/app/app.component.html

@@ -5,14 +5,18 @@
       <h1>
         <b>A Three.js - CSS3d showcase with terrain and physics...</b>
       </h1>
+      <b>Note: This page is not responsive for mobile screens yet.</b><br>
       This canvas contains two scenes from
       <em>THREE.js</em> and two renderer elements, a
       <em>WebGLRenderer</em> and a
       <em>CSS3DRenderer</em>.
-      <br> The focus is the integration and handling on the CSS 3d in the scene. Features for this showcase are clickable, highlight,
+      <br> The focus is the integration and handling on the CSS 3d in the scene. Features for this showcase are
+      clickable, highlight,
       moveable css elements. One drop-down menu is integrated.
-      <br> Additionally the WebGL scene contains a random generated terrain, light, shadow, camera handling with mouse, physics
-      with collision detection, tween, object scaling, rotation around a (pivot-)point and a simple particle system. Play with the clickable elements and see whats happen.
+      <br> Additionally the WebGL scene contains a random generated terrain, light, shadow, camera handling with mouse,
+      physics
+      with collision detection, tween, object scaling, rotation around a (pivot-)point and a simple particle system.
+      Play with the clickable elements and see whats happen.
       <br>
       <br> A list of used libraries / packages for this angular controller example:
     </div>
@@ -33,6 +37,6 @@ <h1>
   <!-- canvas here -->
   <!--<canvas class="w3-center" #canvasCSS3d (window:resize)="onResize($event)"></canvas>-->
   <div class="w3-container">
-      <div #canvasCSS3d (window:resize)="onResize()"></div>
+    <div #canvasCSS3d (window:resize)="onResize()"></div>
   </div>
 </div>

src/app/css3d-threejs/css3d-threejs.component.html

@@ -7,6 +7,12 @@ import * as Perlin from 'perlin-noise';
 import * as Chroma from 'chroma-js';
 import * as Cannon from 'cannon';
 
+
+/**
+ *
+ *
+ * @enum {number}
+ */
 enum Texture {
     BRICK = "assets/texture/Bricks.jpg",
     GAS_BRIGHT = "assets/texture/Gaseous_Bright.jpg",

src/app/css3d-threejs/src/main.ts

@@ -11,6 +11,7 @@
     <header>
             <div class="w3-container ">
                 <h1><b>A Three.js cube showcase...</b></h1>
+                <b>Note: This page is not responsive for mobile screens yet.</b><br>
                 In the canvas below you can play with at least one spinning cube. It's size is set to 1.0 "unitless" length of each edge.<br>
                 The scene contains a plane below the cubes and a spotlight over it.<br>
                 In this example the user cannot interact directly with the canvas via keybord or mouse movement.<br>

src/app/cube-threejs/cube-threejs.component.html

@@ -5,8 +5,10 @@
       <h1>
         <b>3D showcase examples set up on Angular 5, Three.js</b>
       </h1>
-      Currently there is an example with rotating cubes and an example with a terrain, CSS3D and pysics developed.
-      <br> A small game included most features of the examples will be implemented...
+      Currently there is an example...<br>
+      ... with images in CSS3D as gallery with options<br>
+      ... with a terrain, CSS3D and physics<br>
+      ... with rotating cubes<br>
       <br>
     </div>
 
@@ -20,22 +22,22 @@ <h1>
   <!-- thumb naming-->
   <div class="w3-row">
     <div class="w3-col s3 w3-center">
-      <p>Cube - Three.js</p>
+      <p>Image Gallery - Three.js</p>
     </div>
     <div class="w3-col s3 w3-center">
       <p>CSS3D - Three.js</p>
     </div>
     <div class="w3-col s3 w3-center">
-      <p>Image Gallery - Three.js</p>
+      <p>Cube - Three.js</p>
     </div>
     <div class="w3-col s3"></div>
   </div>
 
   <!--thumbs-->
   <div class="w3-row">
     <div class="w3-col s3 w3-center">
-      <a routerLink="cube-threejs">
-        <img [src]="imgURL_cube_threejs" alt="" height="150" width="150">
+      <a routerLink="img-gallery">
+        <img [src]="imgURL_img_gallery_threejs" alt="" height="150" width="150">
       </a>
     </div>
     <div class="w3-col s3 w3-center">
@@ -44,8 +46,8 @@ <h1>
       </a>
     </div>
     <div class="w3-col s3 w3-center">
-      <a routerLink="img-gallery">
-        <img [src]="imgURL_img_gallery_threejs" alt="" height="150" width="150">
+      <a routerLink="cube-threejs">
+        <img [src]="imgURL_cube_threejs" alt="" height="150" width="150">
       </a>
     </div>
     <div class="w3-col s6"></div>

src/app/home/home.component.html

@@ -5,32 +5,63 @@
       <h1>
         <b>A Three.js - CSS3d showcase for an image gallery...</b>
       </h1>
+      <b>Note: This page is not responsive for mobile screens yet.</b><br>
       Here you see an image gallery based on css3d. The photos you see are from the default <em>assets/galleries</em>
       folder.<br>
-      On the top left within the canvas you can choose a folder with images to load from. (Note: In some browsers the
-      <em>webkitDirectory</em> picker may not work :/ .)<br>
-      On the top right you can choose the presentation layout of the image gallery.
+      Above the canvas you can download the full gallery, if you want. On the top left within the canvas you have
+      options for each arrangement.<br>
+      Hovering (in front of camera) on image show few Exif information.<br>
+      <!--You can choose a folder with images to load from. (Note: In some browsers the
+      <em>webkitDirectory</em> picker may not work :/ .)<br>-->
+      On the left in the menu you can choose an arrangement of the images. Below that you find some gloabl options.<br>
       <br>
+      <em>... implementation not finished yet.</em>
       <br>
     </div>
   </header>
   <div class="w3-container">
     <!-- Folder Picker (support by chrome, edge, firefox) -->
-    <!--<input id="imgFolderInput" #imgFolderInputNG type="file" (change)="filesPicked(imgFolderInputNG.files)"
-      webkitDirectory>-->
+    <!-- <p> Choose your own gallery folder:
+      <input #imgFolderInputNG type="file" (change)="filesPicked(imgFolderInputNG.files)" webkitDirectory>
+    </p> -->
+
+    <p> Download Full Gallery (~25 MB):
+      <input #id_tglFullDefGal (change)="toggleLoadFullDefGal(id_tglFullDefGal.checked)" type="checkbox">
+    </p>
 
-    Load Full Gallery (~25 MB) <input #id_tglFullDefGal (change)="toggleLoadFullDefGal(id_tglFullDefGal.checked)" type="checkbox">
 
     <!-- fixed main layout menu-->
     <div class="imgMainMenu">
-      <button (click)="addOtherStuff($event)">Random</button>
-      <!-- <button id="sphere">SPHERE</button> -->
-      <!-- <button id="helix">HELIX</button> -->
-      <!-- <button id="grid">GRID</button> -->
+      <p id="menuTitle">Choose arrangement:</p>
+      <button class="menuMainElement" #btnGrid (click)="arrangeGallery(eArrgmt.GRID)">Grid</button><br>
+      <!-- <button class="menuMainElement" (click)="arrangeGallery(eArrgmt.TUBE)">Tube</button><br> -->
+      <!-- <button class="menuMainElement" (click)="arrangeGallery(eArrgmt.CUBE)">Cube</button><br> -->
+      <button class="menuMainElement" (click)="arrangeGallery(eArrgmt.RANDOM)">Random</button><br>
+      <p id="menuTitle">Global settings:</p>
+      <span class="menuMainElement menuChkBx"><input #id_tglCamYawCtrl (change)="toggleCamYawCtrl(id_tglCamYawCtrl.checked)"
+          type="checkbox" checked> Cam yaw control</span><br>
+      <span class="menuMainElement menuChkBx"><input #id_tglCamPitchCtrl (change)="toggleCamPitchCtrl(id_tglCamPitchCtrl.checked)"
+          type="checkbox" unchecked> Cam pitch control</span><br>
+      <!-- <button class="menuMainElement" (click)="resetPerspective()">Reset perspective</button> -->
+    </div>
+
+    <!-- fixed main layout menu-->
+    <div class="imgSubMenu">
+      <p id="menuTitle">Arrangement options:</p>
+      <!--Use [ngStyle]= / [style.X]= -->
+      <!--<span [style.display]="gggggetHideState()" class="menuSubElement">Show Line Grid <input #id_tglShowGrid (change)="toggleShowGrid(id_tglShowGrid.checked)" type="checkbox" unchecked></span><br>-->
+      <!-- use the id / view child reference-->
+      <p #id_spnShowGrid class="menuSubElement">
+        <input #id_tglShowGrid (change)="toggleShowGrid(id_tglShowGrid.checked)" type="checkbox" unchecked>
+        Show Line Grid
+      </p>
+      <p #id_spnRangeGridCols class="menuSubElement" style="color: rgba(146, 255, 127, 0.75);">No. of columns: {{id_sldRangeGridCols.value}}<br>
+        <input #id_sldRangeGridCols (change)="changeSldNumOfCols(id_sldRangeGridCols.value)" type="range" min="1" max="10" value="4" class="slider">
+      </p>
     </div>
 
     <!-- the canvas-->
-    <div id="canvasImgGal" #canvasImgGal (window:resize)="onResize()"></div>
+    <div id="canvasImgGal" #canvasImgGal (window:resize)="onResize()" (keyup)="onKey($event)"></div>
   </div>