Add other graph parameters to interface
This commit is contained in:
44
index.html
44
index.html
@@ -2,6 +2,50 @@
|
||||
<head>
|
||||
</head>
|
||||
<body>
|
||||
<div>
|
||||
Axis 1
|
||||
<div>
|
||||
Title
|
||||
<input id="axis-1-title" value="axis 1"/>
|
||||
</div>
|
||||
<div>
|
||||
Start Value:
|
||||
E<input type="number" id="axis-1-start" value="0"/>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
Axis 2
|
||||
<div>
|
||||
Title
|
||||
<input id="axis-2-title" value="axis 2"/>
|
||||
</div>
|
||||
<div>
|
||||
Start Value:
|
||||
E<input type="number" id="axis-2-start" value="0"/>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
Axis 3
|
||||
<div>
|
||||
Title
|
||||
<input id="axis-3-title" value="axis 3"/>
|
||||
</div>
|
||||
<div>
|
||||
Start Value:
|
||||
E<input type="number" id="axis-3-start" value="0"/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
axis title text size (px):
|
||||
<input type="number" id="axis-title-size" value="16"/>
|
||||
</div>
|
||||
<div>
|
||||
tick label text size (px):
|
||||
<input type="number" id="tick-label-size" value="2"/>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div>
|
||||
ticks:
|
||||
<input type="number" id="ticks" value="10"/>
|
||||
|
||||
@@ -115,6 +115,42 @@ update = do
|
||||
let document = HTMLDoc.toDocument d
|
||||
domParser <- makeDOMParser
|
||||
|
||||
axis1TitleElMay <- myGetElementById document "axis-1-title"
|
||||
axis1TitleEl <- case HTMLInput.fromElement axis1TitleElMay of
|
||||
Nothing -> throw "'axis-1-title' element is not an input tag"
|
||||
Just e -> pure e
|
||||
axis1Title <- HTMLInput.value axis1TitleEl
|
||||
|
||||
axis1StartElMay <- myGetElementById document "axis-1-start"
|
||||
axis1StartEl <- case HTMLInput.fromElement axis1StartElMay of
|
||||
Nothing -> throw "'axis-1-start' element is not an input tag"
|
||||
Just e -> pure e
|
||||
axis1Start <- (liftM1 Int.round) $ HTMLInput.valueAsNumber axis1StartEl
|
||||
|
||||
axis2TitleElMay <- myGetElementById document "axis-2-title"
|
||||
axis2TitleEl <- case HTMLInput.fromElement axis2TitleElMay of
|
||||
Nothing -> throw "'axis-2-title' element is not an input tag"
|
||||
Just e -> pure e
|
||||
axis2Title <- HTMLInput.value axis2TitleEl
|
||||
|
||||
axis2StartElMay <- myGetElementById document "axis-2-start"
|
||||
axis2StartEl <- case HTMLInput.fromElement axis2StartElMay of
|
||||
Nothing -> throw "'axis-2-start' element is not an input tag"
|
||||
Just e -> pure e
|
||||
axis2Start <- (liftM1 Int.round) $ HTMLInput.valueAsNumber axis2StartEl
|
||||
|
||||
axis3TitleElMay <- myGetElementById document "axis-3-title"
|
||||
axis3TitleEl <- case HTMLInput.fromElement axis3TitleElMay of
|
||||
Nothing -> throw "'axis-3-title' element is not an input tag"
|
||||
Just e -> pure e
|
||||
axis3Title <- HTMLInput.value axis3TitleEl
|
||||
|
||||
axis3StartElMay <- myGetElementById document "axis-3-start"
|
||||
axis3StartEl <- case HTMLInput.fromElement axis3StartElMay of
|
||||
Nothing -> throw "'axis-3-start' element is not an input tag"
|
||||
Just e -> pure e
|
||||
axis3Start <- (liftM1 Int.round) $ HTMLInput.valueAsNumber axis3StartEl
|
||||
|
||||
inputElement <- myGetElementById document "ticks"
|
||||
inputHTMLElement <- case HTMLInput.fromElement inputElement of
|
||||
Nothing -> throw "'ticks' element is not an input tag"
|
||||
@@ -127,20 +163,32 @@ update = do
|
||||
Just e -> pure e
|
||||
tickSize <- HTMLInput.valueAsNumber tickSizeEl
|
||||
|
||||
axisTitleSizeElMay <- myGetElementById document "axis-title-size"
|
||||
axisTitleSizeEl <- case HTMLInput.fromElement axisTitleSizeElMay of
|
||||
Nothing -> throw "'axis-title-size' element is not an input tag"
|
||||
Just e -> pure e
|
||||
axisTitleSize <- HTMLInput.valueAsNumber axisTitleSizeEl
|
||||
|
||||
tickLabelSizeElMay <- myGetElementById document "tick-label-size"
|
||||
tickLabelSizeEl <- case HTMLInput.fromElement tickLabelSizeElMay of
|
||||
Nothing -> throw "'tick-label-size' element is not an input tag"
|
||||
Just e -> pure e
|
||||
tickLabelSize <- HTMLInput.valueAsNumber tickLabelSizeEl
|
||||
|
||||
svgContainer <- getNodeById document "svg-container"
|
||||
|
||||
let graphDef = { axis1Label: "axis 1"
|
||||
, axis2Label: "axis 2"
|
||||
, axis3Label: "axis 3"
|
||||
, axis1Start: 0
|
||||
, axis2Start: 1
|
||||
, axis3Start: 20
|
||||
let graphDef = { axis1Label: axis1Title
|
||||
, axis2Label: axis2Title
|
||||
, axis3Label: axis3Title
|
||||
, axis1Start: axis1Start
|
||||
, axis2Start: axis2Start
|
||||
, axis3Start: axis3Start
|
||||
, numTicks: ticks
|
||||
, tickTextStyle: { sizePx: 12.0
|
||||
, tickTextStyle: { sizePx: tickLabelSize
|
||||
, typeface: "Liberation Sans"
|
||||
}
|
||||
, tickSize: TernaryGraph.Pixels tickSize
|
||||
, axisTitleTextStyle: { sizePx: 16.0
|
||||
, axisTitleTextStyle: { sizePx: axisTitleSize
|
||||
, typeface: "Liberation Mono"
|
||||
}
|
||||
}
|
||||
@@ -192,6 +240,16 @@ main = do
|
||||
d <- document w
|
||||
let dd = HTMLDoc.toDocument d
|
||||
|
||||
addUpdateListener dd "axis-1-title"
|
||||
addUpdateListener dd "axis-1-start"
|
||||
addUpdateListener dd "axis-2-title"
|
||||
addUpdateListener dd "axis-2-start"
|
||||
addUpdateListener dd "axis-3-title"
|
||||
addUpdateListener dd "axis-3-start"
|
||||
|
||||
addUpdateListener dd "axis-title-size"
|
||||
addUpdateListener dd "tick-label-size"
|
||||
|
||||
addUpdateListener dd "ticks"
|
||||
addUpdateListener dd "tick-size"
|
||||
|
||||
|
||||
Reference in New Issue
Block a user