Using the Online Thumby IDE

Using the Online Thumby IDE

This tutorial will show you how to build a basic project and upload it to your Thumby using our online IDE!


Materials 

Hardware: 

    Software: 


      Background:

      • Only Google Chrome and Microsoft Edge support running the TinyCircuits Thumby Editor IDE webpage

      Step 1: Assembly (Hardware)

      Simply plug in the Thumby to your computer using a Micro USB cable and flip the power switch ON to the right (when looking at the screen).


      Step 2: Software (Setup)

      Open Google Chrome or Microsoft Edge and open the online Thumby IDE, the below screen will appear:

      Figure 1: Screen on opening IDE for the first time

      If you prefer a light theme, hover over the 'Utilities' dropdown in the top bar and left-click 'Invert Theme'.

      Figure 2: Light theme

      To connect the Thumby,

      1. Click 'Connect Thumby' in the top bar
      2. Select the device through the pop-up menu
      3. Click 'Connect'
      The below screenshot shows the button locations and order to click them in.

       

      Figure 3: Steps to connect Thumby

      If connection is successful, a green 'Connected' message will be printed to the terminal.
      After doing the above steps the Thumby will be paired to the webpage and will auto-connect when 'Connect Thumby' is clicked.
      With the Thumby connected it is time to upload some code!

          Step 3: The Code!

              Follow the below steps to start a project and then upload it to Thumby.

              • Hover over 'Project Settings' and left-click 'Set Project Name', set the name to anything you like.

              Figure 4: Left-clicking 'Set Project Name' under 'Project Settings'

              • Click 'OK' after typing in a name, in this case, we used 'HelloWorld' as the name (without quotes).

              The Thumby should be preloaded a 'Games' and 'lib' folder, each containing files. Left-click any file to open it in a webpage code editor. 'thumby.py' in 'lib' is the main API that should be used to program your projects.

              If you've done any exploring of the library files, close those editors by left-clicking the 'X' in the header tab of the editor, see the pink arrow in the below image.

              Figure 5: Closing any open editors

              Once all the editors are closed, open a new one by left-clicking 'Add New Editor' in the top panel (see the pink arrow in the below image).

              Figure 6: Opening a new editor

              Follow the below steps and enter code as you go to program your first project.

              • import the time and math modules that will be used for animating a sprite with respect to time. Also import the thumby module which implements the main API for interacting with buttons and the screen

              import time
              import thumby
              import math

              • Draw a sprite in the 'Bitmap Builder' panel. First, set the width and height to 32px by clicking the 'Set Width' and 'Set Height' buttons in the 'Bitmap Builder'
              • Use mouse left-click to set pixels to black and mouse right-click to set them white
              • Once the sprite is drawn, select a line in the code editor added earlier, then click the 'Export Lines' button in the 'Bitmap Builder' panel - see the below image for the result

              Figure 7: Result of drawing a sprite and exporting it to code/Python array

              • Create a loop where the sprite will be animated bobbing up and down. The first steps every loop are to store the current time in milliseconds and to clear the screen to black.

              while(1):
                  t0 = time.ticks_ms()   # Get the current time in ms
                  thumby.display.fill(0) # Fill the screen to black to give a 'blank' canvas

              • As time goes on create a vertical offset using the sin function. The offset will move the sprite up and down 5px.

                  bobRate = 250 # How fast the animation is (higher is slower, arbitrary)
                  bobRange = 5  # The range in pixels of the bob (how far it moves up/down, -5px to 5px)

                  # The actual offset incorporating time and range (will be applied to the sprite position)
                  bobOffset = math.sin(t0 / bobRate) * bobRange

              • Next, use the Thumby screen width and the width of the bitmap to center and calculate the sprite's X and Y location

                  # Center the sprite using screen and bitmap dimensions
                  # Also apply the bob offset from above
                  spriteX = int((thumby.DISPLAY_W/2) - (32/2))
                  spriteY = int(round((thumby.DISPLAY_H/2) - (32/2) + bobOffset))

              • The sprite is drawn on the screen, every loop, using the bitmap data array, the sprite X & Y position, and the sprite dimensions

                  # Display the bitmap by supplying the bitmap data, position, and bitmap dimensions
                  thumby.display.blit(bitmap1, spriteX, spriteY, 32, 32)
                  thumby.display.update()

              That's it! Before clicking the 'Upload Project' button in the top header, hover over 'File' in the code editor and give the file the same name as your project by left-clicking 'Rename File'. In this case, the project name is 'HelloWorld' so the file was renamed to 'HelloWorld.py'.

              For your project to show up on the Thumby game select screen, there needs to be one .py file with the same name as the project. Before clicking upload, the webpage and code should look something like the below image:

              Figure 8: Setup before clicking upload

              Now click the 'Upload Project' button on the top of the page, disconnect Thumby, power cycle it (turn off and on), use down on the Thumby dpad to find your project, click the left button to select and execute your main project file.

              If the above code was used, the below animation will play after selecting 'HelloWorld' in the Thumby select screen:


              Other Webpage Features

              • Execute a single file on the Thumby at root level '/' using the 'Fast execute' button in any code editor
              • Import/export a .py file from/to your computer using the file drop-down in any editor (left-click 'File')
              • Change the font size of individual editors using the view drop down (left-click 'View')
              • Delete files or directories on the Thumby by left-clicking in the filesystem panel
              • Open files stored in Thumby by right-clicking in filesystem panel
              • Reset page layout by re-positioning each panel using button under Utilities -> Reset Layout
              • Reset and erase all page memory using button under Utilities -> Hard Reset Page
              • Clear and invert buttons in the bitmap builder
              • Import exported lines to bitmap builder by selecting bitmap array and comment then left-clicking
              • Download most compatible/tested Thumby MicroPython firmware through Utilities -> Download Firmware button and follow instructions provided when hovering over 'Download Firmware' button
              • All work is automatically saved to the webpage, nothing is lost on a page refresh

              Contact Us

              If you have any questions or feedback, feel free to contact TinyCircuits support or make a post on the TinyCircuits forum.

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

              Thanks for making with us!