-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
145 lines (125 loc) · 7.4 KB
/
index.html
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
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-103013509-1"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'UA-103013509-1');
</script>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>fixthejet! A colormap converter</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.4/css/bootstrap-select.min.css" integrity="sha256-/us3egi2cVp0mEkVR8cnqLsuDY6BmrDuvTPUuEr1HJQ=" crossorigin="anonymous" />
<link rel="stylesheet" type="text/css" href="css/main.css" />
</head>
<body>
<!-- Github corner from http://tholman.com/github-corners -->
<a href="https://github.com/smsaladi/fixthejet" class="github-corner" aria-label="Help us improve on Github">
<svg width="80" height="80" viewBox="0 0 250 250" style="color:#fff; position: absolute; top: 0; border: 0; right: 0;" aria-hidden="true">
<path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path>
<path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path>
<path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path>
</svg>
</a>
<style>.github-corner:hover .octo-arm{animation:octocat-wave 560ms ease-in-out}@keyframes octocat-wave{0%,100%{transform:rotate(0)}20%,60%{transform:rotate(-25deg)}40%,80%{transform:rotate(10deg)}}@media (max-width:500px){.github-corner:hover .octo-arm{animation:none}.github-corner .octo-arm{animation:octocat-wave 560ms ease-in-out}}
</style>
<div class="container">
<div class="starter-template">
<h1>fixthejet: An online colormap converter</h1>
<h6 class="lead">Convert your figures to a better colormap!</h6>
</div>
<div id="alert-section">
</div>
<div class="upload-drop-zone" id="drop-zone">
<label id="to-click" for="files" class="input-label">
<div class="drop-text">
Drag and Drop Files Here or Click to Browse
</div>
<input type="file" id="files" name="files[]" multiple />
</label>
</div>
<br>
<div id="figure-list">
<!-- Figure section template -->
<script type="text/x-tmpl" id="section-template" class="figure-section">
<div class="row">
<div class="col pull-left">
<div class="figure-container">
</div>
</div>
<div class="col pull-right">
<div class="button-container">
<select class="selectpicker from-colormap">
<option>jet</option>
<option disabled>jet (mpl)</option>
<option data-divider="true"></option>
<option>viridis</option>
<option>magma</option>
<option>plasma</option>
<option>inferno</option>
<option>cividis</option>
</select>
<select class="selectpicker to-colormap">
<option>viridis</option>
<option>magma</option>
<option>plasma</option>
<option>inferno</option>
<option>cividis</option>
</select>
</div>
</div>
<div class="col pull-right">
<div class="button-container">
<button id="convert-btn" class="btn btn-success" onClick="convertFigure(this.parentNode.parentNode.parentNode.parentNode);">
<span>Convert </span><i class="glyphicon glyphicon-flash"></i>
</button>
<button id="download-btn" class="btn btn-info" onClick="downloadFigure(this.parentNode.parentNode.parentNode.parentNode);">
<span>Download </span><i class="glyphicon glyphicon-download"></i>
</button>
<button id="delete-btn" class="btn btn-danger delete" onClick="deleteSection(this.parentNode.parentNode.parentNode.parentNode);">
<span>Delete </span><i class="glyphicon glyphicon-remove"></i>
</button>
</div>
</div>
</div>
</script>
</div>
<br>
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">Notes</h3>
</div>
<div class="panel-body">
<ul>
<li>
<code>svg</code>, <code>jpg</code>, and <code>png</code> files are currently supported. It is unlikely that we will support others at least in the near future.
Please use a desktop application (e.g. <a href="https://inkscape.org/en">Inkscape</a>, <a href="https://www.adobe.com/products/illustrator.html">Adobe Illustrator</a>) or a web service to convert your figure into one of these formats.
</li>
<li>
All calculations are done client-side, i.e. files are <i>not</i> uploaded to our servers or anywhere else.
As a side effect, if you are having trouble, please try updating your broswer or using a different one.
We develop and test on <a href="https://www.google.com/chrome/">Google Chrome</a>.
</li>
<li>Help us improve with a pull request! All code is available under an MIT License at <a href="https://github.com/smsaladi/fixthejet">Github</a>.
</li>
<li>Meet the authors: Alex Guerra and <a href="http://shyam.saladi.org">Shyam Saladi</a>.
</li>
</ul>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.4/js/bootstrap-select.min.js" integrity="sha256-19J3rT3tQdidgtqqdQ3xNu++Gd7EoP/ag/0x1lHi0xY=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chroma-js/1.3.4/chroma.min.js" integrity="sha256-sTTE1lDQFmk1nQ4uuhafJjR3/t8vwQPmxorZes3v3G0=" crossorigin="anonymous"></script>
<script src="js/colorscales.js"></script>
<script src="js/cm_convert.js"></script>
<script src="js/guimethods.js"></script>
</body>
</html>