- Title
+
+
+
+ 
+ NathanMcRae.name
+
+ /
+ Ternary Graph Generator
+
+
+ NathanMcRae.name
+
+ /
+ Ternary Graph Generator
+ +
+
Axis 1
+
+
- Title:
- Start Value:
+
-
+
Start value:
E + +
- Axis 2
-
- Title
+
+
Axis 2
+
+
- Title:
- Start Value:
+
-
+
Start value:
E + +
- Axis 3
-
- Title
+
+
Axis 3
+
+
- Title:
- Start Value:
+
-
+
Start value:
E + +
- axis title text size (px):
+
+
- Axis title text size (px):
+ +
- tick label text size (px):
-
+
-
+
- Tick label text size (px):
+ + +
-
- ticks:
+
+
- Ticks:
+ +
- tick size (px):
+
+
+
diff --git a/src/Main.purs b/src/Main.purs
index 49d945f..724d8b9 100644
--- a/src/Main.purs
+++ b/src/Main.purs
@@ -234,6 +234,25 @@ addUpdateListener doc id = do
element <- myGetElementById doc id
addEventListener (EventType "input") listener true (Element.toEventTarget element)
+incrementInput :: HTMLInput.HTMLInputElement -> Number -> Event -> Effect Unit
+incrementInput input inc _ = do
+ currentVal <- HTMLInput.valueAsNumber input
+ HTMLInput.setValueAsNumber (currentVal + inc) input
+ update
+
+registerInputIncButton :: Document -> String -> String -> Number -> Effect Unit
+registerInputIncButton doc inputID buttonID inc = do
+ inputElMay <- myGetElementById doc inputID
+ inputEl <- case HTMLInput.fromElement inputElMay of
+ Nothing -> throw $ "'" <> inputID <> "' element is not an input tag"
+ Just e -> pure e
+
+ listener <- eventListener $ incrementInput inputEl inc
+ element <- myGetElementById doc buttonID
+ addEventListener (EventType "click") listener true (Element.toEventTarget element)
+
+
+
main :: Effect Unit
main = do
w <- window
@@ -253,4 +272,25 @@ main = do
addUpdateListener dd "ticks"
addUpdateListener dd "tick-size"
+ registerInputIncButton dd "axis-1-start" "axis-1-start-up" 1.0
+ registerInputIncButton dd "axis-1-start" "axis-1-start-down" (-1.0)
+
+ registerInputIncButton dd "axis-2-start" "axis-2-start-up" 1.0
+ registerInputIncButton dd "axis-2-start" "axis-2-start-down" (-1.0)
+
+ registerInputIncButton dd "axis-3-start" "axis-3-start-up" 1.0
+ registerInputIncButton dd "axis-3-start" "axis-3-start-down" (-1.0)
+
+ registerInputIncButton dd "axis-title-size" "axis-title-size-up" 1.0
+ registerInputIncButton dd "axis-title-size" "axis-title-size-down" (-1.0)
+
+ registerInputIncButton dd "tick-label-size" "tick-label-size-up" 1.0
+ registerInputIncButton dd "tick-label-size" "tick-label-size-down" (-1.0)
+
+ registerInputIncButton dd "ticks" "ticks-up" 1.0
+ registerInputIncButton dd "ticks" "ticks-down" (-1.0)
+
+ registerInputIncButton dd "tick-size" "tick-size-up" 1.0
+ registerInputIncButton dd "tick-size" "tick-size-down" (-1.0)
+
update
\ No newline at end of file
diff --git a/style.css b/style.css
new file mode 100644
index 0000000..2e2c4ce
--- /dev/null
+++ b/style.css
@@ -0,0 +1,129 @@
+.avatar {
+ width: 2em;
+ margin-right: 0.2em;
+}
+
+body {
+ font-family: Liberation sans, sans-serif;
+ display: flex;
+ flex-direction: column;
+ border-style: solid;
+ border-width: 3px;
+ border-color: #f97200;
+ width: 80%;
+ max-width: 800px;
+ margin: auto auto;
+ padding-left: 1em;
+ padding-right: 1em;
+}
+
+#main-content {
+ padding: 0em 1em 1em 1em;
+ flex-direction: column;
+ max-width: 100%;
+ width: auto;
+}
+
+div {
+ width: fit-content;
+ display: flex;
+ flex-direction: row;
+}
+
+h1 {
+ text-align: center;
+ margin: 0.1em;
+ width: 100%;
+}
+
+h2 {
+ text-align: center;
+ margin: 0.1em;
+ color: #707070;
+}
+
+hr {
+ border: 0;
+ border-top: 3px solid #c0c0c0;
+ width: 100%;
+}
+
+table {
+ border-collapse: collapse;
+ text-align: center;
+ vertical-align: center;
+ margin: 1em;
+}
+
+table th, table td {
+ border-style: solid;
+ border-color: #c0c0c0;
+ border-width: 3px;
+ padding: 0.5em;
+}
+
+table tr:nth-child(odd) {
+ background-color: #fff;
+}
+
+table tr:nth-child(odd) {
+ background-color: #f5f5f5;
+}
+
+.button-wrapper {
+ height: 3em;
+ width: 5em;
+ border-style: solid;
+ border-color: black;
+ border-width: 1px;
+ margin: 1em;
+}
+
+.button-wrapper:hover {
+ border-color: #3C7FB1;
+}
+
+button {
+ border-width: 3px;
+}
+
+.label {
+ margin: 10px;
+ font-weight: bold;
+ font-size: x-large;
+}
+
+#breadcrumb {
+ align-items: center;
+ width: 100%;
+ font-weight: bold;
+ margin-bottom: 0.5em;
+ margin-top: 0.5em;
+ flex-wrap: wrap;
+}
+
+#breadcrumb a {
+ margin-left: 1em;
+ margin-right: 1em;
+ color: gray;
+}
+
+#breadcrumb a :hover {
+ text-decoration: underline;
+}
+
+.underlined {
+ text-decoration-line: underline;
+ text-decoration-style: dotted;
+}
+
+.image-container {
+ width: 100%;
+ flex-direction: column;
+ align-items: center;
+}
+
+#site-title {
+ display: flex;
+ align-items: center;
+}
\ No newline at end of file
diff --git a/ternary-graph.css b/ternary-graph.css
new file mode 100644
index 0000000..6e9feb8
--- /dev/null
+++ b/ternary-graph.css
@@ -0,0 +1,42 @@
+button {
+ border-width: 3px;
+ border-bottom-color: #B3B3B3;
+ border-right-color: #B3B3B3;
+ border-left-color: #E3E3E3;
+ border-top-color: #E3E3E3;
+}
+
+.group {
+ display: flex;
+ flex-direction: column;
+ margin-bottom: 1em;
+}
+
+input {
+ border-width: 3px;
+ border-bottom-color: #E3E3E3;
+ border-right-color: #E3E3E3;
+ border-left-color: #B3B3B3;
+ border-top-color: #B3B3B3;
+}
+
+input[type="number"] {
+ -webkit-appearance: textfield;
+ -moz-appearance: textfield;
+ appearance: textfield;
+ width: 3em;
+}
+
+.input {
+ height: 1.5em;
+ margin-bottom: 0.4em;
+}
+
+p {
+ margin: auto;
+ margin-right: 0.5em;
+}
+
+#svg-container {
+ margin: auto;
+}
\ No newline at end of file
Tick size (px):
+ +