Render a cell grid as html using SVG
SVG is slower for large cell grids, but is more interactive. User clicks on cells in the grid can be captured and used for interaction.
asHtml : { width : Basics.Int, height : Basics.Int } -> CellStyle a -> CellGrid a -> Html Msg
Render a cell grid into an html element of the given width and height.
asSvg : CellStyle a -> CellGrid a -> Svg Msg
Render a cell grid as an svg <g>
element, useful for integration with other svg.
{ cell : CellGrid.Position
, coordinates : { x : Basics.Float
, y : Basics.Float }
}
Capture clicks on the rendered cell grid. Gives the position in the cell grid, and the local (x, y)
coordinates of the cell
{ cellWidth : Basics.Float
, cellHeight : Basics.Float
, toColor : a -> Color
, gridLineWidth : Basics.Float
, gridLineColor : Color
}
Customize how a cell is rendered.
Color
is as defined in the package avh4/elm-color
, e.g. Color.rgb 1 0 0
is bright red.
cellStyle : CellStyle Bool
cellStyle =
{ toColor =
\b ->
if b then
Color.green
else
Color.red
, cellWidth = 10
, cellHeight = 10
, gridLineWidth = 1
, gridLineColor = Color.black
}