← Back to search

Build a Real-Time System Monitor with WebSockets on NVIDIA Jetson

JetsonHacks 21:21

2,475 views · 84 likes Watch on YouTube ↗

Join this channel to get access to perks:
https://www.youtube.com/channel/UCQs0lwV6E4p7LQaGJ6fgy5Q/join
Sign up for the newsletter! https://newsletter.jetsonhacks.com

Web interfacing is now a must-have component of embedded systems. In this tutorial, we create a web application to deliver real-time system information over a network connection. We update the data dynamically using WebSockets.

We create a server application in Python, and serve web pages using HTML, Javascript, and CSS. Designing web systems on embedded systems are different from larger machines, so other rules apply.

Use this information to build your own web enabled app!

We use Visual Studio Code and Anaconda for our development environment.

The code runs on all NVIDIA Jetsons, including Jetson Nano, Jetson Xavier and Jetson Orin. Nano, NX, and AGX versions.

00:00 Intro
00:25 Setup
01:28 Tutorial - Get Data
03:13 Webserver
04:47 WebSockets!
07:41 Run WebSocket Server
08:17 Client Side Javascript
09:40 Python Websocket Client
11:40 Styling in CSS
14:03 Adding Graphing
16:10 Javascript Debugger
16:43 Python Debugger
17:51 Connection Manager
19:51 System Monitor App
20:34 Jtop Comparison

As an Amazon Associate I earn from qualifying purchases.
Visit the JetsonHacks storefront on Amazon: https://www.amazon.com/shop/jetsonhacks

Visit the website at https://jetsonhacks.com
Sign up for the newsletter! https://newsletter.jetsonhacks.com
Github accounts: https://github.com/jetsonhacks
https://github.com/jetsonhacksnano
Twitter: http://twitter.com/jetsonhacks

Some of these links here are affiliate links. As an Amazon Associate I earn from qualifying purchases at no extra cost to you.

Playback is via YouTube's official embedded player. Data from YouTube; Exumo is not affiliated with YouTube.