import ThreepennyPages
import Graphics.UI.Threepenny.Core as UI
import qualified Graphics.UI.Threepenny as UI
canWidth,canHeight :: Num a => a
canWidth = 300
canHeight = 300
main = startGUI defaultConfig setup
setup window =
do -- Elements
canvas <- mkCanvas canWidth canHeight -- The drawing area
fx <- mkHTML "f(x)=" -- The text "f(x)="
input <- mkInput 20 "x" -- The formula input
draw <- mkButton "Draw graph" -- The draw button
-- The markup "..." means that the text inside should be rendered
-- in italics.
-- Layout
formula <- row [pure fx,pure input]
getBody window #+ [column [pure canvas,pure formula,pure draw]]
-- Styling
getBody window # set style [("backgroundColor","lightblue"),
("textAlign","center")]
pure input # set style [("fontSize","14pt")]
-- Interaction
on UI.click draw $ \ _ -> readAndDraw input canvas
on valueChange' input $ \ _ -> readAndDraw input canvas
readAndDraw input canvas =
do s <- get value input
-- The following code draws the formula text in the canvas.
-- It should be replaced with code that draws the graph of the function.
set UI.fillStyle (UI.solidColor (UI.RGB 255 255 255)) (pure canvas)
UI.fillRect (0,0) canWidth canHeight canvas
set UI.fillStyle (UI.solidColor (UI.RGB 0 0 0)) (pure canvas)
UI.fillText s (10,canHeight/2) canvas