Diagrams.Backend.Html5

A full-featured rendering backend for diagrams using HTML5 Canvas. Implemented using the static-canvas package.

To invoke the Html5 backend, you have three options.

• You can use the Diagrams.Backend.Html5.CmdLine module to create standalone executables which will display the diagram in a browser using a web service.
• You can use the renderHtml5 function provided by this module, which gives you more programmatic control over when and how images are displayed (making it east to, for example, write a single program that displays multiple images, or one that diaplays images dynamically based on user input, and so on).
• For the most flexiblity you can invoke the renderDia method from Backend instance for Html5. In particular, renderDia has the generic type

renderDia :: b -> Options b v -> QDiagram b v m -> Result b v

(omitting a few type class contraints). b represents the backend type, v the vector space, and m the type of monoidal query annotations on the diagram. Options and Result are associated data and type families, respectively, which yield the type of option records and rendering results specific to any particular backend. For b ~ Html5 and v ~ R2, we have

data Options Html5 V2 Double = Html5Options
 { _size :: SizeSpec V2 -- ^^ The requested size
 }

data family Render Html5 V2 Double = C (RenderM ())

type family Result Html5 V2 Double = Html5 ()

So the type of renderDia resolves to

renderDia :: Html5 -> Options Html5 V2 Double -> QDiagram Html5 V2 Double m ->
Html5()

which you could call like renderDia Html5 (Html5Options (width 250)) myDiagram

Documentation

data Html5

This data declaration is simply used as a token to distinguish this rendering engine.

Constructors

Html5

Instances

Eq Html5

Ord Html5

Read Html5

Show Html5

Backend Html5 V2 Double

Renderable (Text Double) Html5

Renderable (DImage Double External) Html5

Renderable (Path V2 Double) Html5

Renderable (Trail V2 Double) Html5

Monoid (Render Html5 V2 Double)

Renderable (Segment Closed V2 Double) Html5

type V Html5 = V2

type N Html5 = Double

data Options Html5 V2 Double = Html5Options {

• _html5Size :: SizeSpec V2 Double
• _standalone :: Bool
• _canvasId :: String

}

type Result Html5 V2 Double = Builder

data Render Html5 V2 Double = C (RenderM ())

type MainOpts [(String, QDiagram Html5 V2 Double Any)] = (MainOpts (QDiagram Html5 V2 Double Any), DiagramMultiOpts)

type MainOpts (QDiagram Html5 V2 Double Any) = DiagramOpts

type B = Html5

data family Options b v n

Backend-specific rendering options.

Instances

data Options NullBackend

data Options Html5 V2 Double = Html5Options {

• _html5Size :: SizeSpec V2 Double
• _standalone :: Bool
• _canvasId :: String

}

renderHtml5 :: FilePath -> SizeSpec V2 Double -> QDiagram Html5 V2 Double Any -> IO ()

Lenses

size :: Lens' (Options Html5 V2 Double) (SizeSpec V2 Double)

Output size.

canvasId :: Lens' (Options Html5 V2 Double) String

"id" for the canvas element (prepended to "StaticCanvas"). Only applies to non-standalone diagrams.

standalone :: Lens' (Options Html5 V2 Double) Bool

Should the output be a standalone html file. Otherwise the output is a canvas element followed by a script calling the canvas.