visual tweaks

brianpeiris · Dec 24, 2019 · 9a32515 · 9a32515
1 parent 58165d7
commit 9a32515
Show file tree

Hide file tree

Showing 9 changed files with 30 additions and 7 deletions.
diff --git a/css/index.css b/css/index.css
@@ -46,3 +46,15 @@ textarea {
   filter: drop-shadow(0 0 2px rgba(0,0,0,1))!important;
   -webkit-filter: drop-shadow(0 0 2px rgba(0,0,0,1))!important;
 }
+
+#github {
+  position: absolute;
+  bottom: 20px;
+  right: 20px;
+  width: 40px;
+  background: white;
+  border-radius: 50px;
+  border: 2px solid white;
+  height: 41px;
+  filter: opacity(0.5);
+}
diff --git a/index.html b/index.html
@@ -12,6 +12,7 @@
       <canvas id="viewer"></canvas>
       <video id="monitor" autoplay></video>
     </div>
+    <a id="github" href="https://github.com/brianpeiris/RiftSketch" target="_blank"></a>
     <script src="vendors~main.js"></script>
     <script src="main.js"></script>
 </body>

diff --git a/js/Monitor.js b/js/Monitor.js
@@ -33,6 +33,7 @@ export default class Monitor {
   }
 
   update() {
+    if (!this._domMonitor) return;
     this.context.drawImage(this._domMonitor, 0, 0, WIDTH, HEIGHT);
     this._monitorTexture.needsUpdate = true;
   }

diff --git a/js/RiftSandbox.js b/js/RiftSandbox.js
@@ -53,10 +53,10 @@ export default class RiftSandbox {
     this._camera.add(this._monitor.object);
   }
 
-  setTextAreas(domTextAreas) {
+  setTextAreas(domTextAreas, hasCamera) {
     this.domTextAreas = domTextAreas;
     this._textAreas = this.domTextAreas.map(domTextArea => {
-      const textArea = new TextArea(domTextArea);
+      const textArea = new TextArea(domTextArea, hasCamera);
       this.scene.add(textArea.object);
       return textArea;
     });

diff --git a/js/SketchController.js b/js/SketchController.js
@@ -10,7 +10,7 @@ import Cube from "raw-loader!./Files/Cube.js";
 
 export default class SketchController {
   constructor() {
-    this._setupVideoPassthrough();
+    //this._setupVideoPassthrough();
 
     this._keyboardHandler = new KeyboardHandler(this);
 

diff --git a/js/TextArea.js b/js/TextArea.js
@@ -5,8 +5,9 @@ const NUM_LINES = 20;
 const CANVAS_SIZE_PX = NUM_LINES * FONT_SIZE_PX + FONT_SIZE_PX * 0.2;
 const UPDATE_INTERVAL_MS = 500;
 export default class TextArea {
-  constructor(domTextArea) {
+  constructor(domTextArea, hasCamera) {
     this.domTextArea = domTextArea;
+    this._hasCamera = hasCamera;
 
     this.canvasSize = CANVAS_SIZE_PX;
     const canvas = document.createElement("canvas");
@@ -52,7 +53,7 @@ export default class TextArea {
     this.infoContext.fillRect(0, 0, this.canvasSize, this.canvasSize);
     this.infoContext.fillStyle = "hsl(0, 0%, 25%)";
     this.infoContext.fillText("Alt/Ctrl + Shift + ...", 0, FONT_SIZE_PX * 2);
-    this.infoContext.fillText("v: VR | z: reset | e: editor | r: webcam", 0, FONT_SIZE_PX * 3);
+    this.infoContext.fillText(`e - toggle editor${this._hasCamera ? " | r - webcam" : ""}`, 0, FONT_SIZE_PX * 3);
     this.infoContext.fillText("j/k, u/i, n/m - change number", 0, FONT_SIZE_PX * 4);
 
     this.infoTexture = new THREE.Texture(canvas);

diff --git a/js/index.js b/js/index.js
@@ -1,2 +1,5 @@
 import SketchController from "./SketchController";
+import github from "raw-loader!@fortawesome/fontawesome-free/svgs/brands/github.svg";
+
+document.getElementById("github").innerHTML = github;
 new SketchController();
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -8,6 +8,7 @@
   },
   "dependencies": {
     "@brianpeiris/kibo": "^1.2.0",
+    "@fortawesome/fontawesome-free": "^5.12.0",
     "three": "^0.111.0"
   },
   "devDependencies": {