TinyHTML Library Tutorial

by Jason Marcum

TinyHTML Library Tutorial

The TinyHTML library provides a set of simple functions to quickly build webpages that can be used to interact with projects/robots through a web browser on mobile or PC. This tutorial will guide you through setting up your hardware and uploading the library example sketch. 

Materials 

Hardware: 

    Software: 

      Step 1: Assembly (Hardware)

      Connect the Wi-Fi shield to the processor board. Ensure the processor is powered on, and use the Micro USB cable to connect the board to your computer.

      Step 2: Software (Setup)

      Many different processor boards can be used with this library. If this is your first time using the Arduino IDE, uploading a sketch, or using the Wi-Fi TinyShield, please visit one of the below links that relates to your hardware before downloading and uploading the example library sketch:

      *It is important that you visit the Wi-Fi TinyShield tutorial if you have not downloaded the WiFi101 library yet.

      Step 3: The Code!

      Follow the below steps to download and upload the example sketch provided with the TinyHTML library.

      1. Download the TinyHTML Library + Included Example Sketch from the software section of this tutorial (above)
      2. Extract the .zip file with 7-Zip or similar tools
      3. Open the TinyCircuits-TinyHTML-Library.ino sketch in the Arduino IDE
      4. Edit variables 'ssid' and 'wifi_password' in the sketch to match the settings you use to log into your WIFI network
      5. Upload the sketch to your processor board
      6. Open the Arduino serial monitor and record the IP displayed on the line "TinyShield IP Address: xxx.xxx.x.xxx"
      7. Enter the recorded IP into a web browser address bar
      8. The webpage shown below will show up (adjust browser window size if too large). Interact with the joystick, sliders, or button
      Watch the element states change on the serial monitor

      BONUS: One or multiple joysticks can be controlled at the same time with WASD by double left-clicking them while on PC.

      Visit the library GitHub page or see the README.md file for more information about the library's features.

      Troubleshooting:

      • After uploading the example sketch, opening the serial monitor, and using the printed IP in an address bar of a web browser, the webpage can look very large or wide on PC. Resize the web browser window to make the overall webpage smaller and to see more elements at one time.
      • If the WIFI shield doesn't connect or you get connection errors, make sure the WIFI SSID and password information is correct and that the shield is seated into the tan 32-pin connector firmly. Also check that both the client (web browser) and server (Arduino + Wi-Fi shield) are connected to the same network/router.
      • If the page doesn't load, try waiting a few seconds and then refresh the page.
      • If there are visual issues that are not addressed here, please contact us as the library has only been tested on Chrome Windows, Microsoft Edge Windows, Firefox Windows, Chrome iPhone, and Safari iPhone.

          Potential projects:

          • Wi-Fi controlled security camera:
            • Hijack or connect motors/servos to rotate a camera's pitch and yaw.
            • With the camera connected to some kind of server and hosting its output at a URL (an Arduino will not be able to handle a camera), embed the camera's output using this library's custom content element.
          • Wi-Fi controlled robots/cars/planes/quadcopters
            • Connect the project's motors or servos to the Arduino and control them from joystick, slider, or button webpage outputs using this library.
            • Monitor sensor output values with the display value element in the TinyHTML library.
          • Change the color of a RGB LED or light bulb:
            • Connect the Arduino to the light source and interact through the TinyHTML library webpage to control the light's brightness or color.

          Contact Us

          As always, if you have any questions or feedback, feel free to email us at info@tinycircuits.com.

          Show us what you make by tagging @TinyCircuits on Instagram, Twitter, or Facebook so we can feature it!

          Thanks for making with us!

          Back to Projects