-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
235 lines (235 loc) · 13.2 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
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
<meta name="description" content="" />
<meta name="author" content="" />
<title>Serial Studio - A dashboard for your embedded projects</title>
<link rel="icon" type="image/x-icon" href="assets/favicon.ico" />
<link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.5.0/font/bootstrap-icons.css" rel="stylesheet" />
<link rel="preconnect" href="https://fonts.gstatic.com" />
<link href="https://fonts.googleapis.com/css2?family=Newsreader:ital,wght@0,600;1,600&display=swap" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css2?family=Mulish:ital,wght@0,300;0,500;0,600;0,700;1,300;1,500;1,600;1,700&display=swap" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css2?family=Kanit:ital,wght@0,400;1,400&display=swap" rel="stylesheet" />
<link href="css/styles.css" rel="stylesheet" />
<script async src="https://www.googletagmanager.com/gtag/js?id=G-HG8G05QR0Z"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'G-HG8G05QR0Z');
</script>
<script type="text/javascript" src="https://helptheukrainenow.newnow.cool/helptheukrainenow.js" async defer></script>
</head>
<body id="page-top">
<nav class="navbar navbar-expand-lg navbar-light fixed-top shadow-sm" id="mainNav">
<div class="container px-5">
<a class="navbar-brand fw-bold" href="#page-top"><img width="30" height="30" class="d-inline-block align-top" alt="" src="assets/img/logo.svg"></img> Serial Studio</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
Menu
<i class="bi-list"></i>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav ms-auto me-4 my-3 my-lg-0">
<li class="nav-item"><a class="nav-link me-lg-3" href="#features">Features</a></li>
<li class="nav-item"><a class="nav-link me-lg-3" href="#download">Download</a></li>
<li class="nav-item"><a class="nav-link me-lg-3" href="https://github.com/Serial-Studio/Serial-Studio/wiki" target="_blank">Wiki</a></li>
<li class="nav-item"><a class="nav-link me-lg-3" href="https://github.com/Serial-Studio/Serial-Studio/tree/master/examples" target="_blank">Examples</a></li>
</ul>
<a class="btn btn-secondary rounded-pill px-3 mb-2 mb-lg-0" href="https://www.paypal.com/donate/?hosted_button_id=XN68J47QJKYDE" target="_blank">
<i class="fa fa-paypal"></i>
Donate
</a>
<a class="btn btn-primary rounded-pill px-3 mb-2 mb-lg-0" href="https://github.com/sponsors/alex-spataru" target="_blank">
<i class="fa fa-heart"></i>
Sponsor Me
</a>
</div>
</div>
</nav>
<header class="masthead">
<div class="container px-5">
<div class="row gx-5 align-items-center">
<div class="col-lg-6">
<div class="mb-5 mb-lg-0 text-center text-lg-start">
<h1 class="display-1 lh-1 mb-3">Visualize your data.</h1>
<p class="lead fw-normal text-muted mb-5">Serial Studio allows you to easily display, process & export data from your embedded projects. The application is able to interact with serial ports, network sockets & MQTT brokers.</p>
<div class="d-flex flex-column flex-lg-row align-items-center">
<a type="button" class="btn btn-dark btn-lg" href="https://github.com/Serial-Studio/Serial-Studio/releases/latest"><i class="fa fa-download"> </i>Install</a>
<a type="button" class="btn btn-dark btn-lg" href="https://github.com/Serial-Studio/Serial-Studio"><i class="fa fa-github"> </i>Source code</a>
</div>
</div>
</div>
<div class="col-lg-6">
<img width=100% src="assets/img/laptop-mockup.png"></img>
</div>
</div>
</div>
</header>
<aside class="text-center bg-gradient-primary-to-secondary">
<div class="container px-5">
<div class="row gx-5 justify-content-center">
<div class="col-xl-8">
<div class="h2 fs-1 text-white mb-4">"We like Serial Studio’s ease of use and adaptability, and we’ll likely use it for our own projects in the future."</div>
<img src="assets/img/hackaday-logo.png" alt="..." style="height: 3rem" />
</div>
</div>
</div>
</aside>
<!-- App features section-->
<section id="features">
<div class="container px-5">
<div class="row gx-5 align-items-center">
<div class="col-lg-7 order-lg-1 mb-5 mb-lg-0">
<div class="container-fluid px-5">
<div class="row gx-5">
<div class="col-md-6 mb-5">
<div class="text-center">
<i class="fa fa-wrench fa-5x icon-feature text-gradient d-block mb-3"></i>
<h3 class="font-alt">Multiple widgets</h3>
<p class="text-muted mb-0">Visualize your data with FFT charts, multiple data plots, logarithmic plots, gauges, bar widgets and more.</p>
</div>
</div>
<div class="col-md-6 mb-5">
<div class="text-center">
<i class="fa fa-share fa-5x icon-feature text-gradient d-block mb-3"></i>
<h3 class="font-alt">Export your data</h3>
<p class="text-muted mb-0">Serial Studio can generate CSV files in real-time from the data received from your embedded device.</p>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6 mb-5">
<div class="text-center">
<i class="fa fa-check-circle fa-5x icon-feature text-gradient d-block mb-3"></i>
<h3 class="font-alt">Data integrity checks</h3>
<p class="text-muted mb-0">CRC-8, CRC-16 and CRC-32 checksums are supported. For more information, check <a href="https://github.com/Serial-Studio/Serial-Studio/issues/30#issuecomment-926263119" target="_blank">this issue</a>.</p>
</div>
</div>
<div class="col-md-6 mb-5">
<div class="text-center">
<i class="fa fa-edit fa-5x icon-feature text-gradient d-block mb-3"></i>
<h3 class="font-alt">Project editor</h3>
<p class="text-muted mb-0">Easily create and edit your projects without the need of opening a code editor or reading the wiki.</p>
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-5 order-lg-0">
<div id="carousel" class="carousel slide" data-ride="carousel" >
<div class="carousel-inner">
<div class="carousel-item">
<img class="d-block w-100" src="assets/img/widgets/leds.png" alt="LEDs display">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="assets/img/widgets/datasets.png" alt="Dataset display">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="assets/img/widgets/accelerometer.png" alt="Accelerometer">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="assets/img/widgets/bar.png" alt="Bar">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="assets/img/widgets/compass.png" alt="Compass">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="assets/img/widgets/console.png" alt="Console">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="assets/img/widgets/fft.png" alt="FFT">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="assets/img/widgets/gauge.png" alt="Gauge">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="assets/img/widgets/gps.png" alt="GPS">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="assets/img/widgets/gyro.png" alt="Gyro">
</div>
<div class="carousel-item active">
<img class="d-block w-100" src="assets/img/widgets/multiplot.png" alt="Multiple data plot">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="assets/img/widgets/plot.png" alt="Plot">
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="bg-dark">
<div class="container px-5">
<div class="row gx-5 align-items-center justify-content-center justify-content-lg-between">
<div class="col-12 col-lg-5">
<h2 class="display-4 lh-1 mb-4" style="color:#fff;">IoT Ready.</h2>
<p class="lead fw-normal mb-5 mb-lg-0" style="color:#d7d7d7;">Serial Studio can also act as a simple MQTT client. This allows you to use Serial Studio to receive and display data across multiple computers anywhere in the world.</p>
<br/>
<p class="lead fw-normal mb-5 mb-lg-0"><a href="https://mqtt.org/" target="_blank">Read more about MQTT.</a></p>
</div>
<div class="col-sm-8 col-md-6">
<div class="px-5 px-sm-0"><img class="img-fluid rounded-circle" src="https://images.unsplash.com/photo-1645760051467-9d61131d133e?w=900" alt="..." /></div>
</div>
</div>
</div>
</section>
<section class="bg-light">
<div class="container px-5">
<div class="row gx-5 align-items-center justify-content-center justify-content-lg-between">
<div class="col-sm-8 col-md-6">
<div class="px-5 px-sm-0"><img class="img-fluid rounded-circle" src="https://images.unsplash.com/photo-1647166545674-ce28ce93bdca?w=900" alt="..." /></div>
</div>
<div class="col-12 col-lg-5">
<h2 class="display-4 lh-1 mb-4">A project for everyone.</h2>
<p class="lead fw-normal text-muted mb-5 mb-lg-0">Everyone is welcome to use, modify and improve the project.</p>
<br/>
<p class="lead fw-normal text-muted mb-5 mb-lg-0">Even if you don't know how to code, you can contribute to Serial Studio by reporting bugs, providing ideas, translating it in your native language or by spreading the word with your colleagues and friends.</p>
</div>
</div>
</div>
</section>
<section class="bg-gradient-primary-to-secondary" id="download">
<div class="container px-5">
<h2 class="text-center text-white font-alt mb-4">Get Serial Studio now!</h2>
<div class="d-flex flex-column flex-lg-row align-items-center justify-content-center">
<a type="button" class="btn btn-dark btn-lg" href="https://github.com/Serial-Studio/Serial-Studio/releases/latest"><i class="fa fa-download"> </i>Download</a>
<a type="button" class="btn btn-dark btn-lg" href="https://github.com/Serial-Studio/Serial-Studio"><i class="fa fa-github"> </i>Source code</a>
</div>
</div>
</section>
<footer class="bg-black text-center py-5">
<div class="container px-5">
<div class="text-white-50 small">
<div class="mb-2">Copyright © Alex Spataru 2020-2024.</div>
<a href="https://github.com/alex-spataru">GitHub</a>
<span class="mx-1">·</span>
<a href="https://github.com/Serial-Studio/Serial-Studio/issues">Report an issue</a>
<span class="mx-1">·</span>
<a href="https://github.com/sponsors/alex-spataru">Sponsor me</a>
<span class="mx-1">·</span>
<a href="mailto:alex_spataru@outlook.com">Contact</a>
</div>
</div>
</footer>
<script language="JavaScript" type="text/javascript" src="https://use.fontawesome.com/0d31132455.js"></script>
<script language="JavaScript" type="text/javascript" src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
<script language="JavaScript" type="text/javascript" src="js/scripts.js"></script>
<script language="JavaScript" type="text/javascript" src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<script language="JavaScript" type="text/javascript">
$(document).ready(function(){
$('.carousel').carousel({
interval: 2000
})
});
</script>
</body>
</html>