Merge pull request #97 from sz3/ui-misc-tweaks

Misc tweaks/updates to cimbar.js encoder UI
sz3 · Jun 29, 2024 · 8939668 · 8939668
2 parents f21b1a5 + d9b5388
commit 8939668
Show file tree

Hide file tree

Showing 2 changed files with 81 additions and 19 deletions.
diff --git a/web/index.html b/web/index.html
@@ -20,7 +20,9 @@
 
 body {
  background-color: white;
- background-image: radial-gradient(circle at top left, rgb(7,0,0),transparent,transparent), repeating-linear-gradient(0deg, rgb(153,197,206) 0px, rgb(153,197,206) 1px, transparent 1px, transparent 30px), repeating-linear-gradient(0deg, rgb(153,197,206) 0px, rgb(153,197,206) 2px, transparent 2px, transparent 150px), repeating-linear-gradient(90deg, rgb(153,197,206) 0px, rgb(153,197,206) 1px, transparent 1px, transparent 30px),repeating-linear-gradient(90deg, rgb(153,197,206) 0px, rgb(153,197,206) 2px, transparent 2px, transparent 150px), linear-gradient(white, white);
+ background-image: linear-gradient(135deg, rgb(0,0,0) 65px, transparent 130px),
+repeating-linear-gradient(135deg, rgb(0,0,0) 0px, rgb(153,197,206) 1px,transparent 1px, transparent 30px),
+repeating-linear-gradient(45deg, rgb(0,0,0) 0px, rgb(153,197,206) 1px,transparent 1px, transparent 30px);
  background-size: cover;
  color: gray;
  display: grid;
@@ -34,13 +36,13 @@
  top: 0;
 }
 
-#invisible_click, #canvas, #nav-container {
+#nav-container:focus-within {
  z-index: 1;
 }
 
-#nav-button {
- z-index: 2;
-}
+#nav-content, #nav-container .bg, #nav-container:focus-within #nav-button {
+  z-index: 1;
+ }
 
 #canvas {
  display: block;
@@ -56,7 +58,7 @@
  box-shadow: 0px 0px 12px black, 0px 0px 18px black;
 }
 
-#dragdrop::before {
+.dragdrop::before {
  content: "⌜ Tap to start! ⌟";
  font: 1.5em serif;
  padding-top: 2em;
@@ -66,6 +68,10 @@
  width: 100%;
 }
 
+.dragdrop.error:before {
+ content: "⌜ Error! WebGL is not enabled :( ⌟";
+}
+
 #invisible_click {
  position: fixed;
  opacity: 0;
@@ -271,6 +277,8 @@
 
 <input style="display:none;" type="file" name="file_input" id="file_input" onchange="Main.fileInput(this);" />
 
+<a id="invisible_click" href="javascript:;" onclick="Main.clickNav()"></a>
+
 <div id="nav-container" class="mode-4c">
  <div class="bg" onclick="Main.blurNav();"></div>
  <button id="nav-button" tabindex="0" onclick="Main.clickNav();">
@@ -292,7 +300,6 @@
  </ul>
  </div>
 </div>
-<a id="invisible_click" href="javascript:;" onclick="Main.clickNav()"></a>
 
 <script type="text/javascript">
  if ('serviceWorker' in navigator) {
@@ -303,7 +310,7 @@
  var Module = {};
  Module.canvas = canvas;
  Module.onRuntimeInitialized = () => {
- Main.init();
+ Main.init(canvas);
  Main.nextFrame();
  };
 </script>

diff --git a/web/main.js b/web/main.js
@@ -1,9 +1,10 @@
 var Main = function() {
 
 var _interval = 66;
+var _pause = 0;
 
 var _showStats = false;
-var _renders = 0;
+var _counter = 0;
 var _renderTime = 0;
 
 function toggleFullscreen()
@@ -43,21 +44,45 @@ return {
  {
  Module._initialize_GL(1040, 1040);
  Main.resize();
+ Main.check_GL_enabled(canvas);
+ },
+
+ check_GL_enabled : function(canvas)
+ {
+ if (canvas.getContext("2d")) {
+ var elem = document.getElementById('dragdrop');
+ elem.classList.add("error");
+ }
  },
 
  resize : function()
  {
  // reset zoom
  var canvas = document.getElementById('canvas');
- var width = window.innerWidth;
- var height = window.outerHeight;
+ var width = window.innerWidth - 12;
+ var height = window.outerHeight - 12;
  Main.scaleCanvas(canvas, width, height);
  Main.alignInvisibleClick(canvas);
  },
 
  toggleFullscreen : function()
  {
  toggleFullscreen().then(Main.resize);
+ Main.togglePause(true);
+ },
+
+ togglePause : function(pause)
+ {
+ // pause is a cooldown. We pause to help autofocus, but we don't want to do it forever...
+ if (pause === undefined) {
+ pause = !Main.isPaused();
+ }
+ _pause = pause? 15 : 0;
+ },
+
+ isPaused : function()
+ {
+ return _pause > 0;
  },
 
  scaleCanvas : function(canvas, width, height)
@@ -66,16 +91,14 @@ return {
  if (height < dim) {
  dim = height;
  }
- console.log(dim);
- if (dim > 1040) {
- dim = 1040;
- }
+ console.log(dim + "x" + dim);
  canvas.style.width = dim + "px";
  canvas.style.height = dim + "px";
  },
 
  alignInvisibleClick : function(canvas)
  {
+ canvas = canvas || document.getElementById('canvas');
  var cpos = canvas.getBoundingClientRect();
  var invisible_click = document.getElementById("invisible_click");
  invisible_click.style.width = canvas.style.width;
@@ -109,11 +132,15 @@ return {
  document.getElementById("nav-button").focus();
  },
 
- blurNav : function()
+ blurNav : function(pause)
  {
+ if (pause === undefined) {
+ pause = true;
+ }
  document.getElementById("nav-button").blur();
  document.getElementById("nav-content").blur();
  document.getElementById("nav-find-file-link").blur();
+ Main.togglePause(pause);
  },
 
  clickFileInput : function()
@@ -127,14 +154,20 @@ return {
  var file = document.getElementById('file_input').files[0];
  if (file)
  importFile(file);
- Main.blurNav();
+ Main.blurNav(false);
  },
 
  nextFrame : function()
  {
+ _counter += 1;
+ if (_pause > 0) {
+ _pause -= 1;
+ }
  var start = performance.now();
- Module._render();
- var frameCount = Module._next_frame();
+ if (!Main.isPaused()) {
+ Module._render();
+ var frameCount = Module._next_frame();
+ }
 
  var elapsed = performance.now() - start;
  var nextInterval = _interval>elapsed? _interval-elapsed : 0;
@@ -144,6 +177,9 @@ return {
  _renderTime += elapsed;
  Main.setHTML( "status", elapsed + " : " + frameCount + " : " + Math.ceil(_renderTime/frameCount));
  }
+ if ( !(_counter & 31) ) {
+ Main.resize();
+ }
  },
 
  setActive : function(active)
@@ -194,6 +230,10 @@ window.addEventListener('keydown', function(e) {
  Main.clickNav();
  e.preventDefault();
  }
+ else if (e.key == 'Backspace' || e.keyCode == 8) {
+ Main.togglePause(true);
+ e.preventDefault();
+ }
  }
  else {
  if (e.key == 'Escape' || e.keyCode == 27 ||
@@ -259,6 +299,21 @@ window.addEventListener('keydown', function(e) {
  }
 }, true);
 
+window.addEventListener("touchstart", function(e) {
+ e = e || event;
+ Main.togglePause(true);
+}, false);
+
+window.addEventListener("touchend", function(e) {
+ e = e || event;
+ Main.togglePause(false);
+}, false);
+
+window.addEventListener("touchcancel", function(e) {
+ e = e || event;
+ Main.togglePause(false);
+}, false);
+
 window.addEventListener("dragover", function(e) {
  e = e || event;
  e.preventDefault();