-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathdraw.htm
35 lines (32 loc) · 1.6 KB
/
draw.htm
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<!doctype HTML>
<html>
<head>
<title>Adjustable Timeline Tool</title>
<meta charset="UTF-8">
<meta name="author" content="mxamber, https://github.com/mxamber">
<meta name="title" content="TimelineTool">
<meta name="description" content="Simple timeline creator implemented in HTML & JavaScript.">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script type="text/javascript" src="draw.js"></script>
<link rel="stylesheet" href="draw.css">
</head>
<body>
<p id="viewControls">
Start year: <input type="number" onchange="timeline.offset = this.valueAsNumber; draw();" value=2000 step=1 id="startYear" />
End year: <input type="number" onchange="timeline.end = this.valueAsNumber; draw();" value=2020 step=1 id="endYear" />
Zoom factor: <input type="range" oninput="draw();" min=0.25 max=10 value=1 id="zoomFactor" step=0.25 /> <span id="zoomLabel"></span>
<span class="spacer1"/>
<button onclick="newEvent()" class="buttonAdd"> + Event</button>
<button onclick="newTimespan()" class="buttonAdd"> + Timespan</button>
<button onclick="deleteEvent()" class="buttonRemove"> X Item </button>
<button onclick="elem('fileInput').click();" class="buttonImport">Import JSON</button>
<button onclick="exportEvents()" class="buttonExport">Export JSON</button>
<input type="file" accept=".txt,.json,text/plain,application/json" id="fileInput"></input>
<input type="text" placeholder="Timeline Title" id="timelineTitle"></input>
</p>
<canvas id="timeline" width=3000 height=500></canvas>
<script type="text/javascript">
init();
</script>
</body>
</html>