Skip to content

Commit 3312cbb

Browse files
ashvaykaashvayka
committed
Merge with master
2 parents c440f8f + b134d01 commit 3312cbb

7 files changed

Lines changed: 60 additions & 49 deletions

File tree

‎_layouts/iot-data-visualization.html‎

Lines changed: 8 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,9 @@
1515

1616
<script async type="text/javascript">
1717
document.addEventListener('DOMContentLoaded', function() {
18+
const heroImage = document.querySelector('.visualization-hero-image');
19+
heroImage.src = '/images/visualization/bar-chart.svg' + '?' + encodeURI(new Date());
20+
1821
const svgAnimations = document.querySelectorAll(".svg-animation");
1922
const svgObserver = new IntersectionObserver((entries, obs) => {
2023
entries.forEach(entry => {
@@ -31,7 +34,7 @@
3134
obs.unobserve(img);
3235
}
3336
});
34-
}, {threshold: 1.0});
37+
}, {threshold: 0.5});
3538

3639
svgAnimations.forEach(img => svgObserver.observe(img));
3740

@@ -54,7 +57,7 @@
5457
obs.unobserve(img);
5558
}
5659
});
57-
}, {threshold: 1.0});
60+
}, {threshold: 0.5});
5861

5962
templatesAnimations.forEach(img => templatesObserver.observe(img));
6063

@@ -67,7 +70,7 @@
6770
obs.unobserve(img);
6871
}
6972
});
70-
}, {threshold: 1.0});
73+
}, {threshold: 0.5});
7174

7275
layoutsAnimations.forEach(img => layoutsObserver.observe(img));
7376

@@ -80,7 +83,7 @@
8083
obs.unobserve(img);
8184
}
8285
});
83-
}, {threshold: 1.0});
86+
}, {threshold: 0.5});
8487

8588
customersAnimations.forEach(img => customersObserver.observe(img));
8689

@@ -93,7 +96,7 @@
9396
obs.unobserve(img);
9497
}
9598
});
96-
}, {threshold: 1.0});
99+
}, {threshold: 0.5});
97100

98101
customAnimations.forEach(img => customObserver.observe(img));
99102
});

‎images/visualization/energy_1.webp‎

46.6 KB
Loading

‎images/visualization/energy_2.webp‎

52.3 KB
Loading

‎images/visualization/scada-1.webp‎

-47.2 KB
Binary file not shown.

‎images/visualization/scada-2.webp‎

-56.9 KB
Binary file not shown.

‎iot-data-visualization.md‎

Lines changed: 40 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -14,20 +14,20 @@ description: Explore powerful IoT data visualization with ThingsBoard. Build int
1414
</div>
1515
<div class="images">
1616
<div class="circle-bg"></div>
17-
<img src="https://img.thingsboard.io/visualization/bar-chart.svg" class="visualization-hero-image" alt="Thingsboard dashboards and menus">
18-
<img src="https://img.thingsboard.io/visualization/cold_water_usage.webp" class="visualization-hero-image-2" alt="Cold water usage value-chart card">
19-
<img src="https://img.thingsboard.io/visualization/route_history.webp" class="visualization-hero-image-3" alt="Trip animation map">
20-
<img src="https://img.thingsboard.io/visualization/moisture_himidity.webp" class="visualization-hero-image-4" alt="Moisture and humidity line chart">
21-
<img src="https://img.thingsboard.io/visualization/energy_sources.webp" class="visualization-hero-image-5" alt="Energy source pie chart">
22-
<img src="https://img.thingsboard.io/visualization/slider.webp" class="visualization-hero-image-6" alt="Slider widget">
17+
<img src="/images/visualization/bar-chart.svg" class="visualization-hero-image" alt="Thingsboard dashboards and menus">
18+
<img src="/images/visualization/cold_water_usage.webp" class="visualization-hero-image-2" alt="Cold water usage value-chart card">
19+
<img src="/images/visualization/route_history.webp" class="visualization-hero-image-3" alt="Trip animation map">
20+
<img src="/images/visualization/moisture_himidity.webp" class="visualization-hero-image-4" alt="Moisture and humidity line chart">
21+
<img src="/images/visualization/energy_sources.webp" class="visualization-hero-image-5" alt="Energy source pie chart">
22+
<img src="/images/visualization/slider.webp" class="visualization-hero-image-6" alt="Slider widget">
2323
</div>
2424
</section>
2525
<section class="visualization-definition">
2626
<div class="title">
2727
<h2>What is data visualization in IoT?</h2>
2828
<p>IoT Data visualization is the process of turning raw device data into visual formats like charts, graphs, and gauges to help users quickly understand patterns and trends. In ThingsBoard, you can create real-time dashboards using a variety of widgets—charts, tables, SCADA symbols, and more—for monitoring and control. Dashboards support responsive layouts, navigation flows, and can be easily shared with customers.</p>
2929
</div>
30-
<img data-src="https://img.thingsboard.io/visualization/visualization-scheme.svg" src="https://img.thingsboard.io/visualization/visualization-scheme.svg" class="svg-animation" alt="Visualization scheme">
30+
<img data-src="/images/visualization/visualization-scheme.svg" src="/images/visualization/visualization-scheme.svg" class="svg-animation" alt="Visualization scheme">
3131
</section>
3232
<section class="visualization-implementation">
3333
<h2>How data visualization is implemented in ThingsBoard</h2>
@@ -39,7 +39,7 @@ description: Explore powerful IoT data visualization with ThingsBoard. Build int
3939
<div class="row">
4040
<div class="card">
4141
<div class="image-container">
42-
<img class="svg-animation" data-src="https://img.thingsboard.io/visualization/cards.svg" src="https://img.thingsboard.io/visualization/cards.svg" alt="Card widgets">
42+
<img class="svg-animation" data-src="/images/visualization/cards.svg" src="/images/visualization/cards.svg" alt="Card widgets">
4343
</div>
4444
<div class="content">
4545
<h4>Cards</h4>
@@ -48,7 +48,7 @@ description: Explore powerful IoT data visualization with ThingsBoard. Build int
4848
</div>
4949
<div class="card">
5050
<div class="image-container">
51-
<img class="svg-animation" data-src="https://img.thingsboard.io/visualization/charts.svg" src="https://img.thingsboard.io/visualization/charts.svg" alt="Charts widgets">
51+
<img class="svg-animation" data-src="/images/visualization/charts.svg" src="/images/visualization/charts.svg" alt="Charts widgets">
5252
</div>
5353
<div class="content">
5454
<h4>Charts</h4>
@@ -59,7 +59,7 @@ description: Explore powerful IoT data visualization with ThingsBoard. Build int
5959
<div class="row">
6060
<div class="card">
6161
<div class="image-container">
62-
<img class="svg-animation" data-src="https://img.thingsboard.io/visualization/control.svg" src="https://img.thingsboard.io/visualization/control.svg" alt="Control and status widgets">
62+
<img class="svg-animation" data-src="/images/visualization/control.svg" src="/images/visualization/control.svg" alt="Control and status widgets">
6363
</div>
6464
<div class="content">
6565
<h4>Control & Status widgets</h4>
@@ -68,7 +68,7 @@ description: Explore powerful IoT data visualization with ThingsBoard. Build int
6868
</div>
6969
<div class="card">
7070
<div class="image-container">
71-
<img class="svg-animation" data-src="https://img.thingsboard.io/visualization/gauges.svg" src="https://img.thingsboard.io/visualization/gauges.svg" alt="Gauges widgets">
71+
<img class="svg-animation" data-src="/images/visualization/gauges.svg" src="/images/visualization/gauges.svg" alt="Gauges widgets">
7272
</div>
7373
<div class="content">
7474
<h4>Gauges</h4>
@@ -77,7 +77,7 @@ description: Explore powerful IoT data visualization with ThingsBoard. Build int
7777
</div>
7878
</div>
7979
<div class="block-link">
80-
<a href="/docs/user-guide/widgets/">Read more</a><i class="fas fa-chevron-right fa-md"></i>
80+
<a href="/docs/user-guide/widgets/">Read more <i class="fas fa-chevron-right fa-md"></i></a>
8181
</div>
8282
</div>
8383
<div class="block">
@@ -88,7 +88,7 @@ description: Explore powerful IoT data visualization with ThingsBoard. Build int
8888
<div class="row">
8989
<div class="card">
9090
<div class="image-container">
91-
<img class="svg-animation" data-src="https://img.thingsboard.io/visualization/SCADA-high-perf-section.svg" src="https://img.thingsboard.io/visualization/SCADA-high-perf-section.svg" alt="SCADA high performance widgets">
91+
<img class="svg-animation" data-src="/images/visualization/SCADA-high-perf-section.svg" src="/images/visualization/SCADA-high-perf-section.svg" alt="SCADA high performance widgets">
9292
</div>
9393
<div class="content">
9494
<h4>High-performance</h4>
@@ -97,7 +97,7 @@ description: Explore powerful IoT data visualization with ThingsBoard. Build int
9797
</div>
9898
<div class="card">
9999
<div class="image-container">
100-
<img class="svg-animation" data-src="https://img.thingsboard.io/visualization/SCADA-traditional-section.svg" src="https://img.thingsboard.io/visualization/SCADA-traditional-section.svg" alt="SCADA traditional widgets">
100+
<img class="svg-animation" data-src="/images/visualization/SCADA-traditional-section.svg" src="/images/visualization/SCADA-traditional-section.svg" alt="SCADA traditional widgets">
101101
</div>
102102
<div class="content">
103103
<h4>Traditional</h4>
@@ -106,7 +106,7 @@ description: Explore powerful IoT data visualization with ThingsBoard. Build int
106106
</div>
107107
</div>
108108
<div class="block-link">
109-
<a href="/docs/user-guide/scada/">Read more</a><i class="fas fa-chevron-right fa-md"></i>
109+
<a href="/docs/user-guide/scada/">Read more <i class="fas fa-chevron-right fa-md"></i></a>
110110
</div>
111111
</div>
112112
<div class="block">
@@ -117,29 +117,29 @@ description: Explore powerful IoT data visualization with ThingsBoard. Build int
117117
<div class="row">
118118
<div class="card">
119119
<div class="image-container solution-template">
120-
<img src="https://img.thingsboard.io/visualization/placeholder.png" alt="placeholder">
121-
<img class="al1" src="https://img.thingsboard.io/visualization/assisted-living-1.webp" alt="Assisted living widgets">
122-
<img class="al2" src="https://img.thingsboard.io/visualization/assisted-living-2.webp" alt="Assisted living widgets">
120+
<img src="/images/visualization/placeholder.png" alt="placeholder">
121+
<img class="al1" src="/images/visualization/assisted-living-1.webp" alt="Assisted living widgets">
122+
<img class="al2" src="/images/visualization/assisted-living-2.webp" alt="Assisted living widgets">
123123
</div>
124124
<div class="content">
125-
<h4>Assisted Living</h4>
125+
<h4>Health care</h4>
126126
<p>ThingsBoard is an IoT platform with all the tools needed to build a comprehensive healthcare monitoring and management solution with ease. ThingsBoard provides an extensive range of built-in features as well as flexible customization options.</p>
127127
</div>
128128
</div>
129129
<div class="card">
130130
<div class="image-container solution-template">
131-
<img src="https://img.thingsboard.io/visualization/placeholder.png" alt="placeholder">
132-
<img class="d1" src="https://img.thingsboard.io/visualization/scada-1.webp" alt="Drilling SCADA widgets">
133-
<img class="d2" src="https://img.thingsboard.io/visualization/scada-2.webp" alt="Drilling SCADA widgets">
131+
<img src="/images/visualization/placeholder.png" alt="placeholder">
132+
<img class="d1" src="/images/visualization/energy_1.webp" alt="Energy SCADA widgets">
133+
<img class="d2" src="/images/visualization/energy_2.webp" alt="Energy SCADA widgets">
134134
</div>
135135
<div class="content">
136-
<h4>SCADA Systems in Drilling</h4>
137-
<p>The use of SCADA systems allows operators to monitor drilling parameters in real time, control equipment, and prevent emergency situations.</p>
136+
<h4>SCADA Energy management</h4>
137+
<p>The use of SCADA systems enables businesses to monitor energy generation, distribution, and consumption in real time, optimize energy efficiency, reduce costs, and enhance system reliability with ThingsBoard IoT platform.</p>
138138
</div>
139139
</div>
140140
</div>
141141
<div class="block-link">
142-
<a href="/iot-use-cases/">Read more</a><i class="fas fa-chevron-right fa-md"></i>
142+
<a href="/iot-use-cases/">Read more <i class="fas fa-chevron-right fa-md"></i></a>
143143
</div>
144144
</div>
145145
<div class="block">
@@ -150,11 +150,11 @@ description: Explore powerful IoT data visualization with ThingsBoard. Build int
150150
<div class="row no-margin">
151151
<div class="card image-only">
152152
<div class="image-container layouts no-border">
153-
<img src="https://img.thingsboard.io/visualization/placeholder.png" alt="placeholder">
154-
<img class="layout1 large" src="https://img.thingsboard.io/visualization/layouts_macbook.webp" alt="Macbook layout">
155-
<img class="layout2 large" src="https://img.thingsboard.io/visualization/layouts_iphone.webp" alt="iPhone layout">
156-
<img class="layout3 large" src="https://img.thingsboard.io/visualization/layouts_ipad.webp" alt="iPad layout">
157-
<img class="layout small" src="https://img.thingsboard.io/visualization/layouts_image.webp" alt="Layouts">
153+
<img src="/images/visualization/placeholder.png" alt="placeholder">
154+
<img class="layout1 large" src="/images/visualization/layouts_macbook.webp" alt="Macbook layout">
155+
<img class="layout2 large" src="/images/visualization/layouts_iphone.webp" alt="iPhone layout">
156+
<img class="layout3 large" src="/images/visualization/layouts_ipad.webp" alt="iPad layout">
157+
<img class="layout small" src="/images/visualization/layouts_image.webp" alt="Layouts">
158158
</div>
159159
</div>
160160
</div>
@@ -181,10 +181,10 @@ description: Explore powerful IoT data visualization with ThingsBoard. Build int
181181
<div class="row no-margin">
182182
<div class="card image-only">
183183
<div class="image-container customers no-border">
184-
<img src="https://img.thingsboard.io/visualization/placeholder.png" alt="placeholder">
185-
<img class="customerA" src="https://img.thingsboard.io/visualization/customer_a.webp" alt="Customer A dashboard">
186-
<img class="customerB" src="https://img.thingsboard.io/visualization/customer_b.webp" alt="Customer B dashboard">
187-
<img class="customerC" src="https://img.thingsboard.io/visualization/customer_c.webp" alt="Customer C dashboard">
184+
<img src="/images/visualization/placeholder.png" alt="placeholder">
185+
<img class="customerA" src="/images/visualization/customer_a.webp" alt="Customer A dashboard">
186+
<img class="customerB" src="/images/visualization/customer_b.webp" alt="Customer B dashboard">
187+
<img class="customerC" src="/images/visualization/customer_c.webp" alt="Customer C dashboard">
188188
</div>
189189
</div>
190190
</div>
@@ -211,9 +211,9 @@ description: Explore powerful IoT data visualization with ThingsBoard. Build int
211211
<div class="row no-margin">
212212
<div class="card image-only">
213213
<div class="image-container custom no-border">
214-
<img class="left" src="https://img.thingsboard.io/visualization/left_img.webp" alt="Person on image map widget">
215-
<img class="arrow" src="https://img.thingsboard.io/visualization/arrow.svg" alt="Arrow">
216-
<img class="right" src="https://img.thingsboard.io/visualization/guest_info.webp" alt="Person information widget">
214+
<img class="left" src="/images/visualization/left_img.webp" alt="Person on image map widget">
215+
<img class="arrow" src="/images/visualization/arrow.svg" alt="Arrow">
216+
<img class="right" src="/images/visualization/guest_info.webp" alt="Person information widget">
217217
</div>
218218
</div>
219219
</div>
@@ -235,14 +235,14 @@ description: Explore powerful IoT data visualization with ThingsBoard. Build int
235235
</section>
236236
<section class="widgets">
237237
<div class="widgets-slide">
238-
<img src="https://img.thingsboard.io/visualization/widgets_part.webp" alt="Thingsboard widgets">
238+
<img src="/images/visualization/widgets_part.webp" alt="Thingsboard widgets">
239239
</div>
240240
<div class="widgets-slide">
241-
<img src="https://img.thingsboard.io/visualization/widgets_part.webp" alt="Thingsboard widgets">
241+
<img src="/images/visualization/widgets_part.webp" alt="Thingsboard widgets">
242242
</div>
243243
</section>
244244
<section class="visualize-with-tb">
245245
<h2>Visualize your data with ThingsBoard!</h2>
246-
<a id="visualization_startFree" target="_blank" href="/pricing/" class="button gtm_button">Start free</a>
246+
<a id="visualization_startFree" target="_blank" href="/pricing/" class="button gtm_button">Try it now</a>
247247
</section>
248248
</div>

‎iot-data-visualization.sass‎

Lines changed: 12 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -104,7 +104,7 @@
104104

105105
.visualization-hero-image-2
106106
left: 1%
107-
bottom: 17%
107+
bottom: 28%
108108
width: 42%
109109
z-index: -3
110110
opacity: 0
@@ -178,6 +178,12 @@
178178
gap: 125px
179179
margin-bottom: 80px
180180

181+
h2
182+
flex: 0.5
183+
184+
p
185+
flex: 1
186+
181187
img
182188
width: 100%
183189

@@ -403,9 +409,11 @@
403409
margin-right: 10px
404410
text-decoration: none
405411
color: #0094FF
406-
.fas.fa-chevron-right
407-
color: #0094FF
408-
cursor: pointer
412+
.fas.fa-chevron-right
413+
font-size: 16px
414+
margin-left: 10px
415+
color: #0094FF
416+
cursor: pointer
409417

410418
.widgets
411419
white-space: nowrap

0 commit comments

Comments
 (0)