This project is a web app that allows you to control Otto DIY robots from a browser using Bluetooth connection. The application use the p5js library to communicate with an Arduino board (connected to a BLE module) and Sweetalert2 to make better popup boxes.
You can use the app online visiting: https://ottodiy.github.io/OttoWebAppControl/
To use the app offline, install the project following these steps:
-
Clone the repository to your computer using the command:
git clone https://github.com/OttoDIY/OttoWebAppControl.git -
Install the dependencies by running
npm installin the project folder. -
And that's it! Open the index.html file with Google Chrome (Computers & Android) or Bluefy (iOS) to start using the app.
To use the application, follow these steps:
- Upload the code to your robot depending which model you are using. Otto Starter, Otto Wheels, Otto Ninja Starter.
Note: Make sure that the connections of the robots (legs, feet, bluetooth, etc) are wired as specified in the code.
-
Turn on your robot and make sure it is in pairing mode (the LED in the Bluetooth module should be blinking).
-
Open the application in your browser.
-
Select the robot from the list in the robot selector bar.
-
Click on Connect button and select your robot from the list of available Bluetooth devices that will appear.
-
Once connected, you can control the robot using the controls on the screen or the keyboard shortcuts.
-
Compatibility: with all Otto DIY robots but other biped and vehicle robots based on Arduino could be connected too
-
Movement control: forward, backward, turn left and turn right
-
Gestures: with Otto Starter you can execute some gestures like Happy, Sad, Angry, etc
-
Functions: avoidance (biped & wheels) and line follower (only wheels) functions are available
-
Sensor value display: depending on the robot you are using you will be able to view the values of some sensors like ultrasound and infrared
This project is open source and we welcome contributions. If you would like to help improve the project, please follow this process:
-
Clone or fork the repository
-
Create a branch for your feature (
git checkout -b my-new-feature) -
Commit your changes (
git commit -am 'Add some feature') -
Push to the branch (
git push origin my-new-feature) -
Create a new pull request
If you are looking for something specific you could help, check the issues section.
If working with the app styles, we are currently implementing PostCSS, so consider:
-
When you are developing, you can run
npm run css:watchto compile while you are working -
For compiling styles run
npm run css:buildwhen your code is ready for deploy
Read it here
- Browser compatible with Web Bluetooth API. Currently we strongly recommend Google Chrome for Computers (including Macbook) and Android devices, and Bluefy for iOS devices (iPhones and iPad).
Currently, Google Chrome is the only browser giving a good user experience for this app, except on iOS devices. For iOS devices (iPhones and iPad) we have confirmed that Bluefy work good. In case you are having issues using this app with another browser, we strongly recommend to try it with Chrome and/or Bluefy to confirm if it is a general issue or something with the browser.
Thanks to all these great people and open projects, it has been possible to make this software:
Easy to connect!
Light/Dark mode available!
Now Otto Wheels can be controlled using a joystick!
-
Official p5.js documentation: https://p5js.org/
-
Official Sweetalert2 documentation: https://sweetalert2.github.io/
-
Official website of the Otto DIY robots: https://www.ottodiy.com/
-
Documentation for Otto DIY robots: https://www.ottodiy.com/academy
