nathanmcrae/ternary-graph-generator
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Add download button

Browse Source
This commit is contained in:
Nathan McRae
2025-08-27 21:15:20 -07:00
parent 5e795ac9f3
commit 6a4a0f5719
4 changed files with 92 additions and 66 deletions
Download Patch File Download Diff File Expand all files Collapse all files

134
index.html
View File

@@ -17,72 +17,78 @@
Ternary Graph Generator
</div>
<hr/>
<div class="group">
<h3>Axis 1</h3>
<div class="input">
<p>Title:</p>
<input id="axis-1-title" value="axis 1"/>
</div>
<div class="input">
<p>Start value:</p>
E<input type="number" id="axis-1-start" value="0"/>
<button id="axis-1-start-down">▼</button>
<button id="axis-1-start-up">▲</button>
<div id="main-content">
<div id="controls">
<div class="group">
<h3>Axis 1</h3>
<div class="input">
<p>Title:</p>
<input id="axis-1-title" value="axis 1"/>
</div>
<div class="input">
<p>Start value:</p>
E<input type="number" id="axis-1-start" value="0"/>
<button id="axis-1-start-down">▼</button>
<button id="axis-1-start-up">▲</button>
</div>
</div>
<div class="group">
<h3>Axis 2</h3>
<div class="input">
<p>Title:</p>
<input id="axis-2-title" value="axis 2"/>
</div>
<div class="input">
<p>Start value:</p>
E<input type="number" id="axis-2-start" value="0"/>
<button id="axis-2-start-down">▼</button>
<button id="axis-2-start-up">▲</button>
</div>
</div>
<div class="group">
<h3>Axis 3</h3>
<div class="input">
<p>Title:</p>
<input id="axis-3-title" value="axis 3"/>
</div>
<div class="input">
<p>Start value:</p>
E<input type="number" id="axis-3-start" value="0"/>
<button id="axis-3-start-down">▼</button>
<button id="axis-3-start-up">▲</button>
</div>
</div>
<div class="input">
<p>Axis title text size (px):</p>
<input type="number" id="axis-title-size" value="16"/>
<button id="axis-title-size-down">▼</button>
<button id="axis-title-size-up">▲</button>
</div>
<div class="input">
<p>Tick label text size (px):</p>
<input type="number" id="tick-label-size" value="12"/>
<button id="tick-label-size-down">▼</button>
<button id="tick-label-size-up">▲</button>
</div>
<div class="input">
<p>Ticks:</p>
<input type="number" id="ticks" value="10"/>
<button id="ticks-down">▼</button>
<button id="ticks-up">▲</button>
</div>
<div class="input">
<p>Tick size (px):</p>
<input type="number" id="tick-size" value="5"/>
<button id="tick-size-down">▼</button>
<button id="tick-size-up">▲</button>
</div>
<a id="download-button">
<button>Download SVG</button>
</a>
</div>
<div id="svg-container" class="my-class"></div>
</div>
<div class="group">
<h3>Axis 2</h3>
<div class="input">
<p>Title:</p>
<input id="axis-2-title" value="axis 2"/>
</div>
<div class="input">
<p>Start value:</p>
E<input type="number" id="axis-2-start" value="0"/>
<button id="axis-2-start-down">▼</button>
<button id="axis-2-start-up">▲</button>
</div>
</div>
<div class="group">
<h3>Axis 3</h3>
<div class="input">
<p>Title:</p>
<input id="axis-3-title" value="axis 3"/>
</div>
<div class="input">
<p>Start value:</p>
E<input type="number" id="axis-3-start" value="0"/>
<button id="axis-3-start-down">▼</button>
<button id="axis-3-start-up">▲</button>
</div>
</div>
<div class="input">
<p>Axis title text size (px):</p>
<input type="number" id="axis-title-size" value="16"/>
<button id="axis-title-size-down">▼</button>
<button id="axis-title-size-up">▲</button>
</div>
<div class="input">
<p>Tick label text size (px):</p>
<input type="number" id="tick-label-size" value="12"/>
<button id="tick-label-size-down">▼</button>
<button id="tick-label-size-up">▲</button>
</div>
<div class="input">
<p>Ticks:</p>
<input type="number" id="ticks" value="10"/>
<button id="ticks-down">▼</button>
<button id="ticks-up">▲</button>
</div>
<div class="input">
<p>Tick size (px):</p>
<input type="number" id="tick-size" value="5"/>
<button id="tick-size-down">▼</button>
<button id="tick-size-up">▲</button>
</div>
<button onclick="downloadSVG">Download SVG</button>
<div id="svg-container" class="my-class"></div>
</body>
<script src="index.js"></script>
</html>

1
spago.dhall
View File

@@ -19,6 +19,7 @@ to generate this file without the comments in this block.
, "exceptions"
, "foldable-traversable"
, "integers"
, "js-uri"
, "lists"
, "maybe"
, "numbers"

12
src/Main.purs
View File

@@ -15,6 +15,7 @@ import Effect (Effect)
import Effect.Console (log)
import Effect.Class (liftEffect)
import Effect.Exception (throw)
import JSURI (encodeURIComponent)
import TernaryGraph (Dimension, svgTextID, ternaryGraph, ternaryGraphSvg, TextStyle, tickLabelStrings)
import TernaryGraph as TernaryGraph
import Web.DOM.Document (contentType
@@ -228,6 +229,15 @@ update = do
newNode <- importNode svgNode true document
appendChild newNode svgContainer
-- Set SVG content to download button
downloadButtonEl <- myGetElementById document "download-button"
encodedSVG <- case encodeURIComponent mySVG of
Nothing -> throw "Failed to encode SVG"
Just encoded -> pure encoded
let downloadText = "data:xml/svg;charset=utf-8," <> encodedSVG
Element.setAttribute "href" downloadText downloadButtonEl
Element.setAttribute "download" "ternary-graph.svg" downloadButtonEl
addUpdateListener :: Document -> String -> Effect Unit
addUpdateListener doc id = do
listener <- eventListener updateEvent
@@ -251,8 +261,6 @@ registerInputIncButton doc inputID buttonID inc = do
element <- myGetElementById doc buttonID
addEventListener (EventType "click") listener true (Element.toEventTarget element)
main :: Effect Unit
main = do
w <- window

11
ternary-graph.css
View File

@@ -6,6 +6,11 @@ button {
border-top-color: #E3E3E3;
}
#controls {
display: flex;
flex-direction: column;
}
.group {
display: flex;
flex-direction: column;
@@ -28,10 +33,16 @@ input[type="number"] {
}
.input {
display: flex;
flex-direction: row;
height: 1.5em;
margin-bottom: 0.4em;
}
#main-content {
flex-direction: row;
}
p {
margin: auto;
margin-right: 0.5em;