diff options
| author | elioat <elioat@tilde.institute> | 2024-06-30 17:31:33 -0400 |
|---|---|---|
| committer | elioat <elioat@tilde.institute> | 2024-06-30 17:31:33 -0400 |
| commit | 7a07d2799dc777de2816a16777c2f9953a284241 (patch) | |
| tree | e14a61447ae97f984d218f6dee05baa331290296 | |
| parent | 39c186174ebc88233e641fee868a20d2d24b8e65 (diff) | |
| download | tour-7a07d2799dc777de2816a16777c2f9953a284241.tar.gz | |
*
| -rw-r--r-- | js/pico-cam/index.html | 79 | ||||
| -rw-r--r-- | js/pico-cam/video.js | 2 |
2 files changed, 75 insertions, 6 deletions
diff --git a/js/pico-cam/index.html b/js/pico-cam/index.html index 4e3a416..b524b39 100644 --- a/js/pico-cam/index.html +++ b/js/pico-cam/index.html @@ -3,13 +3,80 @@ <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> - <title>Webcam with Dithering</title> + <title>Pico Cam</title> + <style> + body { + background-color: beige; + margin: 0; + padding-bottom: 60px; /* Space for footer */ + } + + .footer { + position: fixed; + left: 0; + bottom: 0; + width: 100%; + background-color: #f5f5f5; + color: black; + text-align: center; + height: 60px; /* Fixed height */ + display: flex; + justify-content: center; + align-items: center; + } + + button { + font-size: 16px; + padding: 12px 24px; + border: none; + cursor: pointer; + transition: background-color 0.3s ease; + } + + button:hover, button:focus { + outline: none; + } + + .capture-frame.active { + background-color: teal; + color: #FFFFFF; /* Optional: Change text color to improve contrast */ + } + + .media-container { + display: flex; + justify-content: center; + align-items: center; + flex-wrap: wrap; + } + + video, canvas { + max-width: 50%; /* Each takes up to half of the container width */ + height: auto; /* Maintain aspect ratio */ + flex: 1 1 auto; /* Allows the elements to change size and needed */ + } + + /* Check if the viewport is taller than it is wide */ + @media (orientation: portrait) { + .media-container { + flex-direction: column; + } + + video, canvas { + max-width: 100%; /* Take full width of the container */ + width: 100%; /* Ensure they don't exceed the container's width */ + } + } + </style> </head> <body> - <button id="toggleCamera">Turn On Camera</button> - <button id="captureFrame" disabled>Capture Frame</button> - <video id="webcam" autoplay playsinline style="display:none;"></video> - <canvas id="ditheredOutput"></canvas> + <div class="footer"> + <button id="toggleCamera">Turn Camera On</button> + <button id="captureFrame" class="capture-frame" disabled>Capture Frame</button> + </div> + <div class="media-container"> + <video id="webcam" autoplay playsinline style="display:none;"></video> + <canvas id="ditheredOutput"></canvas> + </div> <script src="video.js"></script> </body> -</html> +</html> \ No newline at end of file diff --git a/js/pico-cam/video.js b/js/pico-cam/video.js index b2f68a5..b28038f 100644 --- a/js/pico-cam/video.js +++ b/js/pico-cam/video.js @@ -22,6 +22,7 @@ toggleCameraButton.addEventListener('click', async () => { isCameraOn = true; toggleCameraButton.textContent = 'Turn Camera Off'; captureFrameButton.disabled = false; + captureFrameButton.classList.add('active'); video.addEventListener('loadeddata', () => { canvas.width = lowResWidth; canvas.height = lowResHeight; @@ -36,6 +37,7 @@ toggleCameraButton.addEventListener('click', async () => { isCameraOn = false; toggleCameraButton.textContent = 'Turn Camera On'; captureFrameButton.disabled = true; + captureFrameButton.classList.remove('active'); } }); |