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 Ternary Graph Generator
</div> </div>
<hr/> <hr/>
<div class="group"> <div id="main-content">
<h3>Axis 1</h3> <div id="controls">
<div class="input"> <div class="group">
<p>Title:</p> <h3>Axis 1</h3>
<input id="axis-1-title" value="axis 1"/> <div class="input">
</div> <p>Title:</p>
<div class="input"> <input id="axis-1-title" value="axis 1"/>
<p>Start value:</p> </div>
E<input type="number" id="axis-1-start" value="0"/> <div class="input">
<button id="axis-1-start-down">▼</button> <p>Start value:</p>
<button id="axis-1-start-up">▲</button> 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>
<div id="svg-container" class="my-class"></div>
</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> </body>
<script src="index.js"></script> <script src="index.js"></script>
</html> </html>

1
spago.dhall
View File

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

12
src/Main.purs
View File

@@ -15,6 +15,7 @@ import Effect (Effect)
import Effect.Console (log) import Effect.Console (log)
import Effect.Class (liftEffect) import Effect.Class (liftEffect)
import Effect.Exception (throw) import Effect.Exception (throw)
import JSURI (encodeURIComponent)
import TernaryGraph (Dimension, svgTextID, ternaryGraph, ternaryGraphSvg, TextStyle, tickLabelStrings) import TernaryGraph (Dimension, svgTextID, ternaryGraph, ternaryGraphSvg, TextStyle, tickLabelStrings)
import TernaryGraph as TernaryGraph import TernaryGraph as TernaryGraph
import Web.DOM.Document (contentType import Web.DOM.Document (contentType
@@ -228,6 +229,15 @@ update = do
newNode <- importNode svgNode true document newNode <- importNode svgNode true document
appendChild newNode svgContainer 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 :: Document -> String -> Effect Unit
addUpdateListener doc id = do addUpdateListener doc id = do
listener <- eventListener updateEvent listener <- eventListener updateEvent
@@ -251,8 +261,6 @@ registerInputIncButton doc inputID buttonID inc = do
element <- myGetElementById doc buttonID element <- myGetElementById doc buttonID
addEventListener (EventType "click") listener true (Element.toEventTarget element) addEventListener (EventType "click") listener true (Element.toEventTarget element)
main :: Effect Unit main :: Effect Unit
main = do main = do
w <- window w <- window

11
ternary-graph.css
View File

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