Tag Archives: JavaScript

Driving an Arduino-powered RC car with a USB racing wheel


Maker connects a USB racing wheel to a web browser running HTML5 Gamepad API to drive an RC toy car through WebSockets and a Node.js server.


Mate Marschalko has created an Arduino-powered RC car that can be driven around with a USB racing wheel or gamepad. In order to wirelessly control the vehicle, the Maker connected the wheel to a web browser running the HTML5 Gamepad API.

IMG_20150330_195450

“The work started off by taking out the original radio and motor drive modules and the antenna from the car. I was left with two motors, one for steering and one for acceleration, and the plan was to rebuild the whole architecture using Arduinos,” Marschalko writes.

“I succeeded and the motors are now driven with a powerful H-bridge module (L298n) and the wireless connection is handled by two nRF24l01 antennas. The Arduino and the motors are both powered from the original 6V battery pack (4xAA).”

IMG_20150330_193544

An on-board Arduino Nano (ATmega328) is tasked with receiving wireless messages from an Arduino Uno connected to his Macbook Pro, which communicates with the Node.js server and browser. Looking ahead, the Maker hopes to add other features to the car, including a wireless camera, a more powerful RC battery pack and possibly a few more sensors and lights, too.

Intrigued? Head over to the project’s original page, where you will also find more details on the JavaScript code. In the meantime, be sure to watch it in action below!

Creating realtime IoT dashboards and maps with PubNub


EON is an open source JavaScript framework for creating beautiful realtime dashboards, charts and maps.


The realtime publishing and streaming of data is a key component of the Internet of Things, especially when it comes to tracking and monitoring connected devices. We need a way to easily collect, detect, and distribute data as it’s created or changes, and immediately have it be received and acted upon.

There are several great frameworks for bringing data to life: D3.js, C3.js, WebGL, the list goes on. However, the missing component is how to deliver and reflect changes in that data in realtime, a vital requirement of the ever-growing IoT. Whether you’re streaming sensor data to a dashboard, monitoring device(s) health, or tracking a fleet of vehicles on a live-updating map, delivering the data in realtime is essential.

With this in mind, PubNub wanted an easier way to stream data to create beautiful IoT dashboards, charts, and maps. And so, the team built Project EON, an open source Javascript framework. EON not only enables you to build these dashboards and maps, but stream the raw JSON data to them as well.

iot maps and geolocation

Let’s check out the details! Then we’ll show you EON in action, using an Atmel MCU (because what’s better than connecting hardware and software?).

Realtime Charts and Dashboards for Connected Devices

The charting and graphing component of EON is based on C3.js, an open source charting library. This allows you to build realtime line, bar, pie, gauge, and donut charts. When new data is streamed, transitions are animated and changes are reflected in realtime — no manual refreshing required!

These charts are especially useful when it comes to monitoring and displaying data from Internet of Things connected devices, and gives you flexibility on how you want to display that data.

EON bar, pie, and gauge charts

EON bar, pie, and gauge charts

IoT use cases include:

  • Home automation: Temperature readings, power usage and consumption for individual devices
  • Connected car: RPMs, state of fleet of vehicles, analytics on vehicles including gas usage, capacity, or money earned, vehicle telemetry
  • Industrial and factory: Oil field sensor readings, brewery analytics (eg. pressure, capacity), factory statistics

Mapping for Connected Vehicles and Wearables

Realtime maps are a staple of any connected transportation application. For applications on the move, you need a way to track movement and current location.

The mapping and geolocation component of EON is based on Mapbox, a series of APIs and tools for building custom maps. Give EON a marker icon (bus, train, plane, person), and a geolocation. When the geolocation is updated, the market animates and travels to the new location.

EON maps for bus systems, aircrafts, and wearables

EON maps for bus systems, aircrafts, and wearables

IoT use cases for live-updating maps include:

  • Connected car, fleet management and public transportation: navigation, taxi/rideshare dispatch based on proximity, collect and publish road conditions, hailing and fare calculation for car services, monitor and calculate route and arrival times for public transit
  • Wearables: navigation and tracking, fitness applications
  • Air and sea: track and monitor location of aircraft and sea craft for consumer travel, freight, and delivery.

In Action: Atmel MCU Realtime Temperature Sensor

So let’s see EON and the Internet of Things working together!

Our demo application is a realtime temperature sensor built using an Atmel | SMART SAM D21 Xplained Pro and a temperature sensor. The concept is fairly simple, we collect the data using the Atmel sensor, and stream it in realtime to a live dashboard, where the temperature data is displayed as it changes.

That streaming and visualization is EON at work. And with some CSS added on, we have something that looks like this:

xplained_pro_demo_gif

Just think, this is just a simple demonstration. Imagine having hundreds or even thousands of these sensors spread across a region, all collecting and streaming that data to a single dashboard. Or even a single sensor streaming to hundreds of dashboards, all simultaneously.

The use cases are endless, and it really comes down to collecting data, streaming data, and visualizing that data. And that’s where EON does the work.

To learn more about the Atmel Realtime Temperature Sensor demo, check out our full tutorial and code repository, or watch the video below.

Is Leap Sheep the new Flappy Bird?

There have been quite a number of hardware crossovers in the gaming world as of late, with the physical incarnation of Fawn Qiu’s Flappy Bird taking the Maker world by storm.

As CNET’s Amanda Kooser reports, the Arduino-powered Flappy Bird in a box uses a scrolling background with two controls to move the bird up and down to avoid obstacles. One wrong move and the box lid closes, playing a “game over” sound.

“I think creating a physical game makes the playing experience more approachable. It’s no longer just one player and the phone, but people around you are also aware of the game, which invites collaboration and curiosity,” Fawn told CNET. “Each win and loss is more dramatic, surprising and exciting.”

Recently, a Maker by the name of Tom Randle created a small robot to play Leap Sheep for him on the iPad. While not a full hardware crossover, the Leap Sheep ‘bot has nevertheless garnered considerable attention, with a write up of the project authored by Kevin C. Tofel prominently featured on Gigagom.

According to Tofel, Randle uses an Atmel-based Arduino Uno board (ATmega328) to power the brains of his game-playing robot, which has solenoids and capacitive styli in place of finders.

“A light sensor checks screen brightness and since the sheep are white, they’re relatively easy for the robot to spot,” writes Tofel. “The robot runs on JavaScript, with earlier versions [coded] in Python.”

Randle says his creation isn’t perfect yet, as the original aim was to build a robot that was better at playing the game than a human.

“At the moment, it’s not quite there. The longest I’ve had it running continuously so far is about 5 minutes: 110 sheep,” he explains. “Occasionally it just misses a very fast or slow sheep, and because the solenoids are fixed there’s no way for it to recover. I’m sure with a bit more tweaking I can get it to do much better, but I may have to add a second row of LDRs to more accurately measure the speed of each sheep.”

Interested in learning more? You can check out the Leap Sheep cheating machine on the project’s official page here.