/j5-arduino-react

A johnny 5 arduino with react page

Primary LanguageJavaScriptMIT LicenseMIT

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

A NodeJS Arduino play play with React webpage.

I wanted to make my Arduino flash certain green or red LEDs, triggered by certain sensors and then show that in a React app.

Creating a Mashup of:

What to do:

From 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.

- Git clone https://github.com/stewest/j5-arduino-react.git and cd j5-arduino-react
- You'll need node version 12 or more (with yarn installed or npm).

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.

What does it do?

  • You should see a Socket.io Button, that temporarily stops the client from connecting to the socker 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.

See the Instructable:

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

References: