Want to build websites in no-time? Announcing the new Framer Beta.Learn more
Framer
  • Support
  • Using Framer
Want to build websites in no-time? Announcing the new Framer Beta.Learn more
Framer
  • Teams
  • Showcase
  • Developers
  • Resources
    • Tutorials
    • Examples
    • Components
    • Templates
    • Sessions
    • Support
    • Updates
  • Blog
  • Pricing
  • ···
    • Blog
    • Pricing
  • Support
  • Using Framer

Related Articles

  • Deprecated Code Component Width and Height Props
  • Differences between Preview and Export in code
  • Legacy Code
  • Code Editor
  • Code Overrides

Working with Arduino

Framer is a flexible web-based tool that can allow your prototypes to talk directly to a connected device. By starting a server on your computer you can connect to a socket server in a few different ways—locally on your computer, over a local-network, or within Framer. This capability makes it possible to work with Arduino, RaspberryPI, or any other IoT device.

You can connect to an external device is through USB, Bluetooth, or HTTPS. In this guide, we’ll be connecting to the Arduino via USB and using HTTPS to connect to our web sockets. HTTP support is not possible.

We’ll show you how to work with an Arduino in both communication directions.

  • Arduino sending a command to Framer to trigger an animation
  • Framer sending a command to the Arduino to blink a light

Here are the steps to make an Arduino communicate with a Framer prototype.

  1. Set up your Arduino board and connect it to your computer using the cable.
  2. By following the example below you’ll create a loop from your Framer prototype to your Arduino. The button on the breadboard can trigger an animation in your prototype and your prototype can toggle the LED on and off.

  1. Open the terminal on your computer.
  2. You can use this template to get a headstart. Open this folder in your code editor.
  3. Run yarn install in your code editor's terminal (ensure you have yarn installed on your computer)
  4. Run yarn start to start your socketio server.
  5. Open this example project in Framer if you don't have it open already.
  6. Once your Framer project is ready, preview it alongside your local server console from earlier. If all is working as expected, you should see a line that says “Connected to Framer”.
  7. Preview the frame on the canvas and toggle the first item.
  8. You should be able to click your component and see your Arduino light up. Pressing the button connected to the Arduino should toggle your light again and reflect that state in your prototype.
  9. Now you have basic two-way communication working between your Arduino and Framer. You can add functionality to either side to create limitless hardware-based prototypes.
Helpful?Was this article helpful?

0

0

Framer

  • Teams
  • Pricing
  • Showcasenew
  • Blog
  • Developers
  • Updates

Platforms

  • Web
  • macOS
  • Windows
  • iOS
  • Android

Learn

  • Tutorials
  • Examples
  • Templates
  • Sessions

Resources

  • Components
  • Input Kit
  • State of Prototyping
  • Desktop Prototyping
  • Prototyping Tool
  • Mockup Tool
  • Wireframing Tool
  • UI/UX Design Tool
  • Graphic Design Tool
  • User Testing

About

  • Loupe
  • Community
  • Company
  • Careers
  • Legal

Support

  • Using Framer
  • Accounts
  • Contact

  • Twitter
  • Discord
  • Dribbble

Copyright © 2022 Framer B.V.

  • Security
  • Terms of Service
  • Privacy Statement