Introduction: UI for MicroPython

Recently, I got an esp8266 board and installed
MicroPython on it. It can be controlled by typing command or uploading a python code to it.

For installing MicroPython on esp8266, please check https://MicroPython.org/download/#esp8266 or https://MicroPython.org/download/#esp8266

Python code:

import time

from machine import Pin

led=Pin(2,Pin.OUT)//Pin 2 is the on board LED.

led.off()

led.on()

The different version MicroPython, the code maybe different.

It’s very cool for typing the command to control esp8266, but it’s still not user friendly. As a web programmer, I like to create an interface with html and JavaScript.

I found an Android App OGT UI. It’s a hybrid APP; you can create a graphic interface with Html and JavaScript. It simulates a terminal, receives all text messages from MicroPython and filter it, only send the useful information back to JavaScript. With JavaScript, you can process the result very easily.

The OGT UI comes with a demo UI. For testing it, you need download demo python code and put it to MicroPython .

Step 1: Install OTG UI.

Go to google play and search "otg ui". Install it. It will need some permissions.

Step 2: Download Main.zip

Go to http://www.otgui.com/home?mc=download and download the main.py.

Step 3: Upload the Main.py to Your MicroPython

Upload the main.py to your MicroPython by command:

ampy --port com5 put main.py

You can test it through putty and make sure the code works.

Step 4: Connect Esp8266 to Your Android Phone Through OTG Adapter.

For the first time, It will show a dialog, check the checkbox and click OK button. Then the demo UI will show up. You can click the switch button to control led On/Off.

Step 5: Create Your UI

For creating your UI, you need register an account and download a test tool.

Step 6: Register an Account

Go to www.otgui.com and click "My UIs". it will show a login page, click "Register". Fill the all information and click

click "Register".

Now you can login with your account and default password is "123456", you can change it later.

Step 7: Create a New UI

After login, click "Text UIs". it will show all your UIs.

  • Click Add button.
  • Input all information.
  • Click Save button
  • It will create a new UI with some code in it.

  • Edit the code.

Step 8: Test the UI

Click Preview to see the result.

Step 9: Upload UI to Your Android

Find the App Code in your UI detail page. Then open browser on your android and type the “http://localhost:8889”.

Input the App Code and click save button. Restart the OTG UI App.

It will download the UI to you Android.