Canvas Panel Developer Narrative - Intro

Intro | Version 1 | Version 2 | Viewer 1 | Collaboration

This is a series of experiments to get a feel for what Canvas Panel (CP) actually is, by attempting to build some simple viewing experiences and seeing where the code wants to go.

I think that there are many components in evidence at https://canvas-panel.digirati.com/styleguide/, above and below the level of the thing we want to call Canvas Panel (CP). I think that the component I'm looking for is somewhere around the level of CanvasRepresentation or Viewport in the current implementation. That doesn't mean that I wouldn't use all those other components in putting an application together - as we have done with Canvas Panel-based viewing experiences for V&A and Galway.

But if I want a multipurpose canvas renderer outside of any particular set of tools or frameworks, that will do the heavy lifting of scene evaluation and rendering, what are its interfaces? How do I program against it?

What is useful, and what's just going to get in the way?

The questions I'm trying to answer are:

In other words, can we be sure that our code is in the right places?

Rather than use the real Canvas Panel, I have a definitely less-than-MVP Canvas Panel implementation, as a web component. You'll have to imagine that this component renders a nice deep zoom interface, is capable of rendering AV, is capable of being given annotations to render, fires events as the user interacts, and so on. This is an exercise in determining the boundaries of the component - what do I need to know about how it works inside, where does the black box begin?

I've made CP a web component, because that is a simple way of encapsulating it to think about how I would want to code against it. It's also a favoured future direction for the Universal Viewer, that CP could fit into nicely. Obviously this demo is not a good cross-browser solution, there are no polyfills or any concessions to old browsers. I know that it works in Chrome on my machine and probably in Chrome on yours too.

On to Version 1.


View on GitHub