-
-
Notifications
You must be signed in to change notification settings - Fork 93
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Add a memory map of VRAM #544
Conversation
This makes it more prominent, and also more useful
It is slightly dynamic, relying on a fuckton of pre-generated elements and a `display:` CSS rule. This generates a **monster** SVG (5108 lines), which is not great. The file could be slimmed down tremendously by making use of `<use>` elements (e.g. `<use href="#tile_block">` in six places), but this is incompatible with the CSS trick used (then the `<text>` elements cannot be all positioned in the same place in the parent). It may be more reasonable to use some JS for this, instead of this pure-CSS hack.
The SVG went from 929744 to 9249 bytes!! Meanwhile, we only have 29 sloc of JS in ~3 KiB, which perform very little processing. Definitely a worthwhile tradeoff. The SVG being significantly deflated also makes it easy to process by hand, removing the need for a generator script and simplifying the build.
Co-authored-by: Sylvie <[email protected]>
Co-authored-by: Rangi42 <[email protected]>
This last commit moves the JS file from stand-alone to being contained within the SVG itself; this makes the SVG fully interactive even when viewed stand-alone instead of within Pan Docs. |
Co-authored-by: Sylvie <[email protected]>
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Great job, here's some first comments
Co-authored-by: Antonio Vivace <[email protected]>
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Looks amazing to me. Just a note: it doesn't seem to work exactly as expected as a "standalone SVG" when loading the image directly in the browser.
Fixes #533.
The hand-written SVGs return! (Sorry, Antonio... :P)
The SVG was originally (see 966b0d1) generated automatically from a Python script. At that point, it was fully self-contained (no JS required for interactivity)... at the cost of being just shy of one megabyte.
Considering this was ridiculously large, and visibly taxing on the browser, the SVG was entirely overhauled to move the interactivity from a ****ton of elements and a bit of CSS, to only a bunch of elements and a bit of JS. (This was never fully realised, thus never committed.)
The result was still very large, so I started making use of the
<use>
element, which allows duplicating elements without copy-paste—perfect for these massive grids! (And chances are, the browser may be able to optimise that. Idk.) This was impossible with the old CSS-only design, due to it being based on some elements having the same position within the parent (which<use>
inherently precludes.)Unfortunately,
<use>
is also very finicky with regards tomouseover
/mouseenter
events (especially the former), so the final implementation (fdbf322) may raise some eyebrows among JS devs. I tried to be clean, but I'm only an amateur in that field... :D