DEV Community: Stew West

Arduino, JohnnyFive, Socket io and React

Stew West — Wed, 22 Sep 2021 08:41:03 +0000

Johnny Five Node JS server with Socket io connecting Arduino to React

I wanted to make my Arduino flash certain green or red LEDs, triggered by certain sensors and then show that in a React app at the same time. Also, in the React App web page, I wanted to click a button and then see that trigger LEDs on the Arduino. I found that one could use socket.io to do this, with the one Johnny Five JS node + Socket.io server talking to the Arduino and via socket.io talking to the React JS Node app.

Find the full instructable here:

https://www.instructables.com/Arduino-JohnnyFive-Socketio-and-React/

So, we're creating a mashup of:

What to do:

https://github.com/rwaldron/johnny-five#setup-and-assemble-arduino

Download Arduino IDE
Plug in your Arduino or Arduino compatible microcontroller via USB
Open the Arduino IDE, select: File > Examples > Firmata > StandardFirmataPlus

** StandardFirmataPlus is available in Firmata v2.5.0 or greater

Click the "Upload" button.

If the upload was successful, the board is now prepared and you can close the Arduino IDE.

From https://github.com/stewest/j5-arduino-react

Git clone https://github.com/stewest/j5-arduino-react.git and cd j5-arduino-react

Then each from their own separate terminal:

Terminal 1:

cd socket-io-server
yarn install
node app.js

Terminal 2:

cd socket-io-client
yarn install
yarn start

While developing, as the client and server use specific ports, you may need to stop of all nodes and restart. - killall -9 node in the socket-io-server folder and restart both the server node app.js and yarn start the client.

If you find some lights not working, double check the pins assigned. I hope the Fritzing diagram helps.

What does it do?

You should see a Socket.io Button, that temporarily stops the client from connecting to the socket server.
There is a "light" sensor showing the amount of light data from from the photo resistor.
When the Arduino board first starts it has some LEDs flashing.
The LED status is shown as on or off. Once the node server and react app has loaded, you should be able to click the Toggle LEDs button and the Red, Green and Blue LEDs should light up for 5 seconds.
There is a temperature display.

References:

http://johnny-five.io/api/led.rgb/

http://johnny-five.io/examples/photoresistor

https://stackabuse.com/using-global-variables-in-node-js/

https://www.valentinog.com/blog/socket-react/

https://socket.io/docs/v3/index.html

GATSBY AND REACT INTERNATIONALISATION

Stew West — Wed, 22 Sep 2021 08:17:23 +0000

Great post by Mattia Simonato

https://www.amazeelabs.com/en/journal/gatsby-and-react-internationalisation

GraphQL in Twig!

Stew West — Tue, 06 Jul 2021 10:17:22 +0000

In 2019 I presented "a beginner’s guide on how to use GraphQL in Twig" - to progressively decouple Drupal's Front end at Decoupled Days in New York.

Decoupled Drupal is part of the future, but learning an entirely new stack can be daunting (like React, Vue or Angular, if you haven't used those before).

Writing GraphQL inside Twig templates gives developers a path to an accessible soft-decoupled approach.

This session will introduce GraphQL queries and demonstrate the advantages of changing the Drupal push model to a pull model by letting the template define its data requirements.

Quick Benefits

Performance
-- Everything done in the same GraphQL “request”, no HTTP request is made.
-- Queries are cached
-- Queries are grouped within multiple templates
-- Under the hood, it's like an additional hook
Advantages
-- We still get Drupal forms
-- We still get translations out of the box
-- We still get all the nice features as it ...
-- Works alongside with standard Drupal
-- We have a common language between Backend and Frontend!
-- Reduced risk / cost

In the future: it is easier to partly decouple (ie: some React driven components), and it lays a foundation path to fully decouple. “Future proof”.

See the Presentation here.

https://www.youtube.com/watch?v=lknMgevZqu0

Resources

The Future Web is here

Stew West — Wed, 27 Jan 2021 09:24:53 +0000

Join me by claiming your ticket here
https://gatsbyconf.com/conference-pass/Stewart-West/