-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
executable file
·109 lines (104 loc) · 4.43 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
<!doctype html>
<html>
<head>
<title>FunctionXplorer</title>
<style>
*{margin : 0; padding: 0; font-family: "helvetica", "Arial", sans-serif}
fieldset{border:2px solid transparent}
ul{list-style-type:none;}
body{overflow:hidden; background:#fff}
header{height:50px; line-height:50px; color: white; background: #000; box-shadow: rgba(0,0,0,0.2) 0px 4px 10px;}
header *, .panel{ -moz-user-select:none; -webkit-user-select:none; cursor: default}
.panel{display:none; position: absolute; padding: 0px; text-align:right; padding: 10px; border:0px; border-radius: 0 0 3px 3px; box-shadow: rgba(0,0,0,0.2) 0px 4px 10px; background: #333; color: #DDD}
.button{position: absolute; top: 15px; height:35px; line-height:35px; text-align: right; padding: 0 10px 0 10px; border-radius: 3px 3px 0 0; background:#333}
#application, header{position: relative}
#visualization{left: 0; top: 0; width:100%;}
#config-button{right: 10px; }
#configuration{right:10px; top: 0; }
#formulas-button{right: 160px;}
#formulas{right: 160px; top:0; }
/*#tools-button{right: 310px;}
#tools{right: 310px; top:0; }*/
footer, #position{position: fixed; z-index:10; font-size:small; pointer-events:none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-o-user-select: none;
user-select: none}
footer{ bottom: 0; right:0}
footer a{pointer-events:auto}
#position{top:50px; left:0}
</style>
</head>
<body>
<header>
<h1>Function Xplorer</h1>
<div class="button" id="config-button" data-for="configuration" >Configuration ▼</div>
<div class="button" id="formulas-button" data-for="formulas" >Formulas ▼</div>
<!--<div class="button" id="tools-button" data-for="tools" >Tools</div>-->
</header>
<div id="application">
<div id="visualization"></div>
<div id="configuration" class="panel"></div>
<div id="formulas" class="panel">
<button id='addFormula'>Add formula</button>
<ul id='formulasList'></ul>
</div>
<!-- <div id="tools" class="panel">
<button>Export image</button>
</div>-->
</div>
<div id="position"></div>
<footer>
FunctionXplorer by <a href="http://bobylito.me">Alexandre Stanislawski</a> (<a href="http://twitter.com/bobylito">@bobylito</a>). <a href="https://github.com/bobylito/functionXplorer">Sources</a> under <a href="http://bobylito.mit-license.org/">MIT licence</a>. Based on <a href="http://bobylito.me/jsPlot">plot.js</a>
</footer>
<script type="text/html" id="config-template">
<fieldset>
<label for="xLabel">X axis label</label>
<input id="xLabel" value="<%=xLabel%>"/><br/>
<label for="yLabel">Y axis label</label>
<input id="yLabel" value="<%=yLabel%>"/><br/>
</fieldset>
<fieldset>
<label for="Xmin">X min</label>
<input id="Xmin" type="number" step="0.1" value="<%=Xmin%>"/><br/>
<label for="Xmax">X max</label>
<input id="Xmax" type="number" step="0.1" value="<%=Xmax%>"/><br/>
<label for="Ymin">Y min</label>
<input id="Ymin" type="number" step="0.1" value="<%=Ymin%>"/><br/>
<label for="Ymax">Y max</label>
<input id="Ymax" type="number" step="0.1" value="<%=Ymax%>"/><br/>
</fieldset>
<fieldset>
<label>Show grid?</label>
<% if(gridVisible) { %>
<input id="gridVisible" type="checkbox" checked></br>
<% } else { %>
<input id="gridVisible" type="checkbox"></br>
<% }%>
</fieldset>
<button class="reset">Reset</button>
</script>
<script type="text/html" id="position-template">
<h3>Mouse position</h3>
<ul>
<li>x : <%=x%></li>
<li>y : <%=y%></li>
</ul>
</script>
<script type="text/html" id="formula-template">
<label>f ( x ) = </label>
<input class="formula" value="<%=bodyAsString%>" />
<input type="checkbox" class="visible" <%=visible%>/>
<button class="delete">Delete</button>
</script>
<script src="plot.js"></script>
<script src="lib/jquery.min.js"></script>
<script src="lib/jquery.mousewheel.js"></script>
<script src="lib/json2.js"></script>
<script src="lib/underscore-min.js"></script>
<script src="lib/backbone-min.js"></script>
<script src="lib/backbone.localStorage-min.js"></script>
<script src="app.js"></script>
</body>
</html>