diff options
| author | elioat <elioat@tilde.institute> | 2024-01-12 19:58:17 -0500 |
|---|---|---|
| committer | elioat <elioat@tilde.institute> | 2024-01-12 19:58:17 -0500 |
| commit | 3f6e81d826516509c7097a10a617f9eaa6c5ce1a (patch) | |
| tree | 96f7d5d3de7af07a5cc249d9f733d77fb3430b21 | |
| parent | d960c0347a85cf86a3c2227530e5bcee5836b49c (diff) | |
| download | tour-3f6e81d826516509c7097a10a617f9eaa6c5ce1a.tar.gz | |
*
| -rw-r--r-- | js/inknswitch/index.html | 37 | ||||
| -rw-r--r-- | js/inknswitch/ink.js | 109 |
2 files changed, 146 insertions, 0 deletions
diff --git a/js/inknswitch/index.html b/js/inknswitch/index.html new file mode 100644 index 0000000..c6fa0b6 --- /dev/null +++ b/js/inknswitch/index.html @@ -0,0 +1,37 @@ +<!DOCTYPE html> +<html lang="en"> +<head> + <meta charset="UTF-8"> + <meta name="viewport" content="width=device-width, initial-scale=1.0"> + <title>ink n switch</title> + <style> + @import url('https://fonts.googleapis.com/css2?family=Shantell+Sans&display=swap'); + body { + margin: 0; + padding: 0; + font-family: 'Shantell Sans', cursive; + } + textarea { + font-family: 'Shantell Sans', cursive; + font-size: 1.75em; + padding: 1em; + border: 0; + outline: 0; + width: 100%; + } + canvas { + padding: 0; + width: 100%; + } + #noteArea, #drawingArea { + margin: 0 auto; + display: block; + } + </style> +</head> +<body> + <textarea id="noteArea" rows="10" cols="30" placeholder="Start typing a note! When you wanna draw, toggle by hitting cmd, or ctrl + d then draw with the mouse, toggle back the same way. Tap the c key in draw mode to clear your drawing."></textarea> + <canvas id="drawingArea" width="500" height="500"></canvas> + <script src="ink.js"></script> +</body> +</html> \ No newline at end of file diff --git a/js/inknswitch/ink.js b/js/inknswitch/ink.js new file mode 100644 index 0000000..62666af --- /dev/null +++ b/js/inknswitch/ink.js @@ -0,0 +1,109 @@ +const canvas = document.getElementById('drawingArea'); +const ctx = canvas.getContext('2d'); +const noteArea = document.getElementById('noteArea'); + +noteArea.value = localStorage.getItem('noteContent') || ''; + +noteArea.style.width = '100vw'; +noteArea.style.height = '100vh'; +noteArea.style.boxSizing = 'border-box'; +noteArea.style.backgroundColor = 'rgba(255, 255, 255, 0.5)'; + +canvas.width = window.innerWidth; +canvas.height = window.innerHeight; +canvas.style.position = 'fixed'; + +let drawing = false; +let prevX = 0; +let prevY = 0; + +canvas.style.display = 'none'; + +const getCursorPosition = (e) => { + const rect = canvas.getBoundingClientRect(); + return { + x: e.clientX - rect.left, + y: e.clientY - rect.top + }; +}; + +const startDrawing = (e) => { + drawing = true; + const { x, y } = getCursorPosition(e); + prevX = x; + prevY = y; +}; + +const drawLine = (x1, y1, x2, y2) => { + ctx.beginPath(); + ctx.lineWidth = 5; + ctx.lineCap = 'round'; + ctx.strokeStyle = '#000'; + ctx.moveTo(x1, y1); + ctx.lineTo(x2, y2); + ctx.stroke(); +}; + +const draw = (e) => { + if (drawing) { + const { x, y } = getCursorPosition(e); + drawLine(prevX, prevY, x, y); + prevX = x; + prevY = y; + } +}; + +const saveCanvasImage = () => { + const dataUrl = canvas.toDataURL(); + localStorage.setItem('canvasImage', dataUrl); +}; + +canvas.addEventListener('mousedown', startDrawing); + +canvas.addEventListener('mousemove', (e) => { + if (drawing) { + draw(e); + } +}); + +canvas.addEventListener('mouseup', (e) => { + if (drawing) { + draw(e); + drawing = false; + saveCanvasImage(); + } +}); + +const savedImage = localStorage.getItem('canvasImage'); +if (savedImage) { + const img = new Image(); + img.onload = () => { + ctx.drawImage(img, 0, 0); + }; + img.src = savedImage; +} + +document.addEventListener('keydown', (e) => { + // Cmd or Ctrl and D key to toggle modes + if ((e.metaKey || e.ctrlKey) && e.key === 'd') { + e.preventDefault(); + if (canvas.style.display === 'none') { + canvas.style.display = 'block'; + noteArea.style.display = 'none'; + } else { + canvas.style.display = 'none'; + noteArea.style.display = 'block'; + } + } + + // C key to clear the canvas + if (e.key === 'c' && canvas.style.display === 'block') { + const confirmClear = confirm('Do you really want to clear the canvas?'); + if (confirmClear) { + ctx.clearRect(0, 0, canvas.width, canvas.height); + localStorage.removeItem('canvasImage'); + } + } + + localStorage.setItem('noteContent', noteArea.value); +}); \ No newline at end of file |