-
Notifications
You must be signed in to change notification settings - Fork 5
/
index.html
140 lines (122 loc) · 6.03 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>LAS Loading Script Test</title>
<!-- BOOTSTRAP CSS GENERIC STYLESHEET & HELPERS . . .-->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<!-- USED TO HELP LOAD FILES -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js" crossorigin="anonymous"></script>
<!-- WHAT IS THIS FOR !? -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
<!-- SCRIPT TO HELP BOOTSTRAP CSS -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
<!-- SCRIPT FOR D3.JS A VISUALIZATION LIBRARY USED BY G3.JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.js"></script>
<!-- SCRIPT FOR PRINTING JSON INTO A DOM ELEMENT SO IT LOOKS NICE ON A WEBPAGE -->
<script src="https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js"></script>
<!-- SCRIPT FOR ADDING SPACES TO JSON SO IT LOOKS NICE ON A WEBPAGE -->
<script src="./js/vkbeautify.js"></script>
<!-- MAIN WEBPAGE STYLESHEET -->
<link rel="stylesheet" href="./css/main.css">
<!-- GEOLOGY DATA SPECIFIC VISUALIZATIONS BUILT ON TOP OF D3.JS -->
<script src="./js/g3.js"></script>
<!-- PLOTTING FUNCTIONS THAT CALL G3.JS FROM MAIN.JS -->
<script src="./js/call_plots.js"></script>
<!-- LAS TO JSON JAVASCRIPT FUNCTIONS -->
<!-- <script src="./js/wellio.js"></script> -->
<script src="./dist/index.js"></script>
<script src="https://requirejs.org/docs/release/2.3.5/minified/require.js"></script>
<!-- REST OF THE WEBPAGE FUNCTIONS -->
<script src="./js/main.js"></script>
</head>
<body>
<div class="jumbotron text-center">
<h1><a href="https://github.com/JustinGOSSES/wellio.js">Wellio.js</a></h1>
<h2>Demo Page</h2>
<h5>Upload local LAS files using a file loader & turn them into json using wellio.js.</h5>
</div>
<div class="container">
<button class="btn btn-primary btn-sm" data-toggle="collapse" data-target="#wellupload">Upload and convert LAS file</button>
<button class="btn btn-primary btn-sm" data-toggle="collapse" data-target="#welldisplaycurves">Display Curves</button>
<button class="btn btn-primary btn-sm" data-toggle="collapse" data-target="#welldisplaytext">Display LAS file</button>
<button class="btn btn-primary btn-sm" data-toggle="collapse" data-target="#welldisplayjson">Display JSON</button>
<button class="btn btn-primary btn-sm" data-toggle="collapse" data-target="#welldownloadjson">Download JSON</button>
<div id="wellupload" class="collapse">
<div class="well_step">
<p><b>First</b>: use either of these buttons to load a LAS files.</p>
<div class="well_pos_relative">
<a class='btn btn-primary' href='javascript:;'>
from your computer
<input type="file" id="files" multiple class='well_file_upload' name="file_source" size="40" onchange='$("#upload-file-info").html($(this).val());readInFilesFunction()'>
</a>
<button onclick="readInLASFromASSETS()" class='btn btn-primary'>from Assets folder of this webpage</button>
<span class='label label-info' id="upload-success"></span>
</br>
<span class='label label-info' id="upload-file-info"></span>
</div>
<output id="list"></output>
</div>
<div class="well_step">
<p><b>Second</b>: convert .las text into JSON. If you selected more than one las, the first will be used.</p>
<button onclick="convert_and_startHelpers()" class='btn btn-primary'>convert</button>
<p id="which_well"><i>no well selection</i></p>
</div>
</div>
<div id="welldisplaytext" class="collapse">
<div class="well_step">
<h4>Display Results as original text (A), converted JSON (B), or visual curves using g3.js (C)</h4>
</div>
<div class="well_step">
<p><b>A.</b> Display of .las files as text</p>
<button onclick="displayFileFunction() " class='btn btn-secondary'>display text</button>
<button onclick="removeTextLAS()" class='btn btn-secondary'>remove text</button>
<div id="fileContents"></div>
</div>
</div>
<div id="welldisplaycurves" class="collapse well_step_left">
<p><b>B.</b>Buttons to draw each curve in the select well will appear below after the <b>CONVERT</b> step</p>
<div id="curveButtons_holder"></div>
<p>Remove all curves</p><button onclick="remove_DOM_children()" class='btn btn-secondary'>remove</button>
<!-- <div>
<p>Remove all curves</p>
<button onclick="remove_DOM_children()">remove</button>
</div> -->
<div class="plot_holder">
<div id="log_plot_div" class="log_plot_div box"></div>
<div class="log_plot_div2 box"></div>
</div>
</br>
</div>
<div id="welldisplayjson" class="collapse well_step_left">
<p><b>C.</b> Print well in wellio.js JSON format</p>
<button onclick="print_well()" class='btn btn-secondary'>print json</button>
<button onclick="remove_DOM_children('well_json_prettyprint')" class='btn btn-secondary'>remove json</button>
</br>
<div style="float:left"></div>
</br>
<!-- <div style="float:left;width:100%">
<span>
<button onclick="print_well()" class='btn btn-secondary'>Print well in wellio.js JSON format</button>
<button onclick="remove_DOM_children('well_json_prettyprint')" class='btn btn-secondary'>remove json</button>
</span>
</div> -->
</br>
<div class="well_left_full_width">
<pre id="well_json_prettyprint" class="prettyprint">
</pre>
</div>
</div>
</br>
<div id="welldownloadjson" class="collapse well_step_left">
<div class="well_step">
<h3>Download well as JSON file</h3>
<button id="download_button" onclick="download_test()" class='btn btn-secondary'>download</button>
</div>
</div>
</div>
</br>
</body>
</html>