💾 Archived View for gemini.ctrl-c.club › ~ssb22 › script2canvas.gmi captured on 2023-01-29 at 03:24:38. Gemini links have been rewritten to link to archived content
View Raw
More Information
⬅️ Previous capture (2022-07-16)
➡️ Next capture (2024-08-18)
🚧 View Differences
-=-=-=-=-=-=-
Typescript player for HTML5
I wrote this to make an in-browser demonstration of Primer Pooler. It uses code from DOStoy to display a typescript in an HTML5 canvas.
Advantages:
- The Javascript is entirely self-contained. It does not require any special setup on the server side and you don’t have to rely on a third-party server.
- Reduces data transfer without blurring the text (although HTML5 Canvas can be blurred under *some* circumstances)
- New text stays entirely within the canvas and is not added to the web page, thus avoiding bad interactions with screenreaders and accessibility CSS
- Canvas appears only on wide screens, won’t clutter mobile devices (I’m assuming the demonstration is non-essential)
- Animation does not start until clicked on (to avoid annoying anyone who’s not looking at it), and can be paused/resumed at any time by clicking again
- The typescript can be viewed in the Javascript source.
Disadvantages:
- No rewind control
- Won’t stop the screensaver
- Can’t copy/paste or change the font without looking at the source
- The terminal program must be simple: think *line-mode interaction with some colours*. Full-screen editors etc will not work properly (at least not without further work on the converter)
- No screen-reader accessibility. But as mentioned above I’m assuming the demonstration is entirely optional; people who don’t think visually shouldn’t need it (I know I don’t; I’m just doing this because apparently some sighted people want it).
Download: script2canvas.py (License: MIT)
script2canvas.py
Usage:
1. On a GNU/Linux terminal, do script -t log2 2>log1 and record as appropriate
2. Do python script2canvas.py >demo.js
3. Optionally edit the resulting demo.js file if you want to ‘airbrush’ your mistakes
4. In your HTML, put:
<span id="DOStoyPlace"></span><script src="demo.js"></script>
5. Test
Legal
All material © Silas S. Brown unless otherwise stated. Javascript is a trademark of Oracle Corporation in the US. Linux is the registered trademark of Linus Torvalds in the U.S. and other countries. Any other trademarks I mentioned without realising are trademarks of their respective holders.