-
Notifications
You must be signed in to change notification settings - Fork 3
/
Copy pathindex.html
172 lines (166 loc) · 8.06 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
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
<!DOCTYPE html>
<html lang="en">
<head>
<script async="" src="https://www.googletagmanager.com/gtag/js?id=UA-184807790-1">
</script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="styles/css_style.css">
<link rel="stylesheet" href="styles/main.css">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@100;300;400;700&display=swap" rel="stylesheet">
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<script src="https://cdn.jsdelivr.net/npm/[email protected]/lib/p5.min.js"></script>
<link rel = "icon" href = "../images/mowito_icon .png" type = "image/x-icon">
<title>Mowito Lidar Visualizer</title>
</head>
<body>
<!-- Header============================================ -->
<!-- <header>
<nav class="navbar">
<a href="http://mowito.in" class="logo">
<img src="./images/mowito_logo2.png">
</a>
<ul>
<li><a href="https://mowito.in/">Home</a></li>
<li><a href="#">Lidar Visualizer</a></li>
<li><a href="https://mowito.in/index.html#my_contact">Contact Us</a></li>
</ul>
</nav>
</header> -->
<!-- New hrader from motio.in=========================----------------------------------- -->
<!-- <div class="common_container mrg_auto">
<div class="top_main_section full_conatiner"> -->
<div class="my_header full_conatiner f_box fixed-header">
<header class="my_header_in full_conatiner f_box">
<div class="logo_con"><a href="https://mowito.in/"><img src="./images/mowito_logo2.png"></a><p class="title">LiDAR Visualizer</p></div>
<div class="menu_con">
<ul class="my_menu f_box">
<li><a href="https://mowito.in/">Home</a></li>
<li><a href="https://mowito.in/index.html#services" id="produvt_services">Product
& Services</a></li>
<li><a href="https://mowito.in/index.html#my_team_con" id="team">Team</a></li>
<!-- <li><a href="javascript:void(0)" id="client">Client</a></li> -->
<li><a href="https://mowito.in/index.html#my_news" id="news">News</a></li>
<li><a href="https://mowito.in/our_blog.html">Blogs</a></li>
<li><a href="https://mowito.in/recruitment.html">Career</a></li>
<li><a href="https://mowito.in/index.html#my_contact" id="contact">Contact</a></li>
</ul>
</div>
<!-- <div class="mobile_menu"> <span class="mobile_ico"><img src="images/menu.svg"></span>
<div class="tab_menu">
<ul class="my_menu f_box">
<li><a href="javascript:void(0)" id="m_homes">Home</a></li>
<li><a href="javascript:void(0)" id="m_produvt_services">Product
& Services</a></li>
<li><a href="javascript:void(0)" id="m_team">Team</a></li>
<li><a href="javascript:void(0)" id="m_client">Client</a></li>
<li><a href="javascript:void(0)" id="m_news">News</a></li>
<li><a href="our_blog.html">Blogs</a></li>
<li><a href="recruitment.html">Career</a></li>
<li><a href="javascript:void(0)" id="m_contact">Contact</a></li>
</ul>
</div>
</div> -->
</header>
</div>
<!-- </div>
</div> -->
<!-- Main==================================================== -->
<main>
<!-- Info Card =================================== -->
<div class="infoCard">
<div id="instructions" class="instr">
<h3> Instructions:</h3>
<br>
<p>
1: Create obstacles by selecting a tool and drawing on the canvas. <br><br>
2: Select a LiDAR from the drop-down. <br><br>
3. Change room length to reflect the real world.<br><br>
4: Hit "Play" and move the cursor on the canvas to see how the LiDAR behaves. Use the mouse scroll wheel to change the direction.<br><br>
5: Hit “Stop” to add more obstacles or to modify Range & Resolution values.<br><br>
6: Hit “Reset” to clear the canvas..<br><br>
Note:<br><br>
1: In case the LiDAR has a range of values, the max value is used for visualization.<br><br>
2: The tool is currently designed for 2D Visualization only.<br><br>
3: If you want a new LiDAR to be added, please contact us!<br><br>
</p>
</div>
<div id="update"></div>
</div>
<!-- Dashbord Card================================== -->
<div class="rightcontaner">
<div class="dashbord">
<div class="inputs">
<select id="lidar" name="Lidar Type" class="selecter" onchange="assist(this)"></select>
<div class="input">
<label id= "a" for="angle">Angular Resolution</label>
<div class="inputbox">
<input type="number" step="0.1" id="angle" onclick="angle()" onchange="resetSelecter()" placeholder="angle" data-inline="true" value="1" ></input>
<span>°</span>
</div>
</div>
<div class="input">
<label id="b" for="range" >Detection Range</label>
<div class="inputbox">
<input type="number" id="range" onclick="rangeofrays()" onchange="resetSelecter()" placeholder="detection distance" data-inline="true" value="500"></input>
<span>m</span>
</div>
</div>
<div class="input">
<label id="c" for="angrange">Angular Range</label>
<div class="inputbox">
<input type="number" id="angrange" onclick="angularrange()" onchange="resetSelecter()" data-inline="true" placeholder="Angle Range" value="360"></input>
<span>°</span>
</div>
</div>
<!-- <div class="input">
<label id="widlabel" for="length">Room Length</label>
<div class="inputbox">
<input type="number" id="breadth" placeholder="Breadth" data-inline="true" value="250"></input>
m
</div>
</div> -->
</div>
<div class="tools">
<div>
<button id="line" onclick="selecttools(0)" class="tool toolseleted"><i class="fa fa-arrows-v"></i></button>
<button id="rect" onclick="selecttools(1)" class="tool"><i class="fa fa-square"></i></button>
<button id="triangle" onclick="selecttools(4)" class="tool" style="transform: rotate(-90deg);"><i class="fa fa-play"></i></button>
<button id="circle" onclick="selecttools(5)" class="tool"><i class="fa fa-circle"></i></button>
<button id="eraser" onclick="selecttools(2)" class="tool"><i class="fa fa-eraser"></i></button>
</div>
</div>
<div class="controls">
<input type="button" id="play" onclick="selecttools(3)" value="Play" class="playbutton" ></input>
<input type="button" id="reset" onclick="reset()" value="Reset" data-inline="true"></input>
</div>
</div>
<!-- Canves Card======================================== -->
<div class="canvesCard" oncontextmenu="return false;">
<div class="input roomLength">
<label id="widlabel" for="length">Room Length</label>
<div class="inputbox">
<input type="number" id="breadth" placeholder="Breadth" data-inline="true" value="250"></input>
m
</div>
</div>
</div>
</div>
</main>
<footer>
<hr>
<div>
<p>Mowito Robotic Systems Pvt Ltd</p>
</div>
</footer>
<script src="scripts/script.js"></script>
<script src="scripts/sketch.js"></script>
<script src="scripts/ray.js"></script>
<script src="scripts/shapes.js"></script>
<script src="scripts/particle.js"></script>
</body>
</html>