redesign app scaling and about box - webgbcam - [fork] gameboy webcam
HTML git clone git://src.adamsgaard.dk/webgbcam
DIR Log
DIR Files
DIR Refs
DIR README
DIR LICENSE
---
DIR commit e55f6cb1c3b811d7c2cde3f2e27cf2b080bbb584
DIR parent 2e8c94d1bfecb9209cd6cc10eca977f1b4cac7ea
HTML Author: maple syrup <maple@maple.pet>
Date: Mon, 13 Nov 2023 03:18:57 +0000
redesign app scaling and about box
Diffstat:
M app.js | 51 +++++++++++++++++--------------
M index.html | 18 +++++++++++-------
M style.css | 40 +++++++++++++++++++++++++-------
M sw.js | 2 +-
4 files changed, 72 insertions(+), 39 deletions(-)
---
DIR diff --git a/app.js b/app.js
@@ -243,6 +243,7 @@ var amountOfCameras = 0;
var currentFacingMode = 'user';
var appScale;
var frameDrawing;
+var resizeTimeout;
const gifLength = 50;
var outputScale = 6;
var gifRecording,
@@ -598,16 +599,16 @@ function screenIsPortrait() {
//Function to get the mouse position
function getMousePos(canvas, event) {
- var rect = canvas.getBoundingClientRect();
- return {
- x: (event.clientX - rect.left) / appScale,
- y: (event.clientY - rect.top) / appScale
+ let rect = canvas.getBoundingClientRect();
+ let mousePos = {
+ x: (event.clientX - rect.left) / (rect.right - rect.left) * renderWidth / 2,
+ y: (event.clientY - rect.top) / (rect.bottom - rect.top) * renderHeight / 2
};
+ return mousePos;
}
//Function to check whether a point is inside a rectangle
function isInside(pos, rect){
- const scale = 2;
- return pos.x > rect.x * scale && pos.x < (rect.x+rect.width) * scale && pos.y < (rect.y+rect.height) * scale && pos.y > rect.y * scale;
+ return pos.x > rect.x && pos.x < (rect.x+rect.width) && pos.y < (rect.y+rect.height) && pos.y > rect.y;
}
function switchCameras() {
@@ -896,14 +897,15 @@ document.addEventListener('DOMContentLoaded', function (event) {
});
function restartCamera() {
- setTimeout(function() {
+ clearTimeout(resizeTimeout);
+ resizeTimeout = setTimeout(function() {
initAppScaling();
initCameraDrawing();
}, 300);
}
-window.onorientationchange = restartCamera;
-window.onresize = restartCamera;
+//window.onorientationchange = restartCamera;
+//window.onresize = restartCamera;
function captureImage() {
cameraStream.pause();
@@ -932,26 +934,18 @@ function initCameraUI() {
}, false);
}
-function initAppScaling() {
- // figure out max integer render scale for window
- if(window.innerWidth >= window.innerHeight) {
- // horizontal
- appScale = Math.floor(window.innerHeight / renderHeight);
- } else {
- // vertical
- appScale = Math.floor(window.innerWidth / renderWidth);
- }
- cameraDiv.style.width = appScale * renderWidth + "px";
- cameraDiv.style.height = appScale * renderHeight + "px";
+function initAppScaling(scale = 2) {
+ appScale = scale;
// canvas sizes
cameraView.width = cameraVars.width;
cameraView.height = cameraVars.height;
- appView.width = renderWidth;
- appView.height = renderHeight;
-
+ appView.width = renderWidth * appScale;
+ appView.height = renderHeight * appScale;
+
let ctx = appView.getContext("2d");
ctx.imageSmoothingEnabled = false;
+ ctx.scale(appScale,appScale);
ctx = cameraView.getContext("2d");
ctx.imageSmoothingEnabled = false;
}
@@ -1151,3 +1145,13 @@ function drawFrame() {
}
if (gifRecording) gifFrame();
}
+
+function toggleAbout() {
+ const elemAbout = document.getElementById("about");
+
+ if (elemAbout.classList.contains("hidden")) {
+ elemAbout.classList.remove("hidden");
+ } else {
+ elemAbout.classList.add("hidden");
+ }
+}
+\ No newline at end of file
DIR diff --git a/index.html b/index.html
@@ -14,22 +14,24 @@
<meta property="og:url" content="https://maple.pet/webgbcam/">
</head>
<body>
- <div class="maple-window">
- <div class="maple-window-title"><span>webgbcam v4.2</span></div>
+ <div id="main-app-window" class="maple-window centered">
+ <div class="maple-window-title"><span>webgbcam v4.3</span></div>
<div id="camera">
<canvas id="app-view"></canvas>
<canvas id="camera-view"></canvas>
<canvas id="camera-output"></canvas>
<video id="camera-stream" autoplay playsinline></video>
- </div>
- </div><br />
+ </div><br/>
+ <button id="button-about" onclick="toggleAbout();">about</button>
+ </div>
- <div class="maple-window centered">
+ <div id="about" class="maple-window centered modal hidden">
+ <div class="maple-window-title"><span>about</span></div>
<h2 class="blink">NFTs: No Fucking Thanks</h2>
<p>made by <a href="https://maple.pet">maple</a> - inspired by christine love's interstellar selfie station</p>
- <p>if the app above is blank, make sure you have cameras connected and browser camera permissions enabled!</p>
+ <p>if the app is blank, make sure you have cameras connected and browser camera permissions enabled!</p>
<p>webgbcam uses <a href="https://github.com/jnordberg/gif.js">gif.js</a><br/>
you can check the source code on <a href="https://github.com/Lana-chan/webgbcam">github</a>!</p>
@@ -42,9 +44,11 @@
</ul>
</p>
- <p>if you like the stuff i do, check out <a href="https://maple.pet/">my website</a> or <a href="https://ko-fi.com/squirrel">donate to me on ko-fi</a>!</p>
+ <p>if you like the stuff i do, check out <a href="https://maple.pet/">my website</a> and please <a href="https://ko-fi.com/squirrel">donate to me on ko-fi</a>!</p>
<p>ps: you look great today!</p>
+
+ <button id="button-close" onclick="toggleAbout();">close</button>
</div>
<div id="gif-preview" class="maple-window modal hidden">
DIR diff --git a/style.css b/style.css
@@ -20,7 +20,7 @@ body {
margin: 5px;
vertical-align: top;
display: inline-block;
- border-width: 35px 20px 20px 20px;
+ border-width: 26px 12px 20px 12px;
border-style: solid;
border-image: url("ui/mac-frame.png") 30 40 22 22 fill repeat;
border-image-width: 30px 40px 22px 22px;
@@ -30,6 +30,7 @@ body {
font-size: 12px;
font-family: geneva, sans-serif;
min-width: 200px;
+ box-sizing: border-box;
}
.maple-window a {
@@ -42,7 +43,7 @@ body {
.maple-window-title {
position: absolute;
- top: -31px;
+ top: -23px;
text-align: center;
width: 100%;
left: 0;
@@ -69,12 +70,10 @@ body {
#app-view {
height: 100%;
width: 100%;
- image-rendering: optimizeSpeed; /* Older versions of FF */
- image-rendering: -moz-crisp-edges; /* FF 6.0+ */
- image-rendering: -webkit-optimize-contrast; /* Safari */
- image-rendering: -o-crisp-edges; /* OS X & Windows Opera (12.02+) */
- image-rendering: pixelated; /* Awesome future-browsers */
- -ms-interpolation-mode: nearest-neighbor; /* IE */
+ /*image-rendering: -moz-crisp-edges;
+ image-rendering: -webkit-optimize-contrast;
+ image-rendering: -o-crisp-edges;
+ image-rendering: crisp-edges;*/
}
#camera-stream, #camera-output, #camera-view, .hidden {
@@ -139,4 +138,29 @@ ul {
margin-top: -1em;
padding: 0;
list-style: none;
+}
+
+#main-app-window {
+ width: 98%;
+ top: 48%;
+ transform: translateY(-50%);
+}
+
+#camera {
+ display: inline-block;
+ width: 100%;
+}
+
+@media (orientation:landscape) {
+ #main-app-window {
+ width: unset;
+ height: 98%;
+ top: unset;
+ transform: unset;
+ }
+
+ #camera {
+ width: unset;
+ height: calc(100% - 2rem);
+ }
}
\ No newline at end of file
DIR diff --git a/sw.js b/sw.js
@@ -1,4 +1,4 @@
-const cacheName = 'webgbcam-v4.2'
+const cacheName = 'webgbcam-v4.3'
// Install a service worker
self.addEventListener("install", (event) => {