for more information visit the package's GitHub page
Package contains the following modules:
The CellGrid package provides a type for representing and rendering
a rectangular grid of cells. The grid can be rendered as
HTML, SVG, WebGL, or Image. In the HTML and SVG versions, the grid responds to
mouse clicks. Here an example of how one sets up a CellGrid Int
.
import Array
grid1 : CellGrid Int
grid1 = CellGrid.initialize (Dimensions 2 2) (\i j -> i)
toLists grid1
--> [ [0,0]
--> , [1,1]
--> ]
One can define CellGrid a
, where a
is any type.
There are two on-line demo applications: Conway's game of life, and a simulation
of heat conduction. See the examples
folder on GitHub
for the code. In the first example, we use the type
CellGrid State,
where
type State = Occupied | Unoccupied
In the second, we use
CellGrid Float
In this case, the contents of a cell represents its temperature, which is normalized to lie in the interval [0,1]. One can create a CellGrid, transform it, and render it in the formats mentioned above. Note the type
type alias Msg =
{ cell : Position
, coordinates :
{ x : Float
, y : Float
}
}
It is referenced by the function which renders a cell
so that when the user clicks on a cell, a message
is sent containing its Position i j as well as its local floating
point coordinates x and y. Consult ./examples/GameOfLife.elm
,
to see how this message is used to respond to user clicks.
Render a CellGrid
using the function
CellGrid.Render.asHtml : { width : Int, height : Int }
-> CellStyle a -> CellGrid a -> Html Msg
The CellStyle argument determines how a cell is rendered:
type alias CellStyle a =
{ cellWidth : Float
, cellHeight : Float
, toColor : a -> Color
, gridLineWidth : Float
, gridLineColor : Color
}
Here is an example:
cellStyle : CellStyle Float
cellStyle =
{ toColor = \z -> Color.rgb z 0 0
, ellWidth = 10
, cellHeight = 10
, gridLineColor = Color.rgb 180 0 0
, gridLineWidth = 0.5
}
where Color
is from the package avh4/elm-color
. This is the
cellStyle
value used in Conway's Game of Life.
Please consult ./examples/HeatMap/Image2.elm
.
One uses the following from `CellGrid.RenderWebGL``
asHtml : { width : Int, height : Int }
-> (a -> Color) -> CellGrid a -> Html.Html msg
where the second parameter is a function a -> Color
like
the following
colorMap : Float -> Color.Color
colorMap t =
Color.rgb t 0 0
Please consult ./examples/HeatMap/Image3.elm
.
One uses the following from CellGrid.Image
toImage : CellGrid Color -> Image
Note that one can map a CellGrid a
to a CellGrid Color
, e.g., using
colorMap : Float -> Color.Color
colorMap t =
Color.rgb t 0 0
cgImage = CellGrid.Image.asBmpUri (CellGrid.map colorMap cgFloat)
The Image
type is defined in the package justgook/elm-image
.
Many thanks to Folkert de Vries for code optimizations and API improvements,
including the new CellGrid.Image
module which
gives the fastest of the rendering options.