14. Interface and application programming¶
group assignment:¶
- compare as many tool options as possible
Since there are three students in Kannani Lab, each of us tried different tool option to compare each other.
1. Switch On and Off from iPhone (Ishimura)¶
I tried Blynk.
I followed below steps.
Blynk setup
- Install Blynk from App Store to iPhone
- Input New Project name
- Select Device ESP8266
- Button and select pin as Digital | ~gp4
ESP8266
- Cabling
LED Pin connect to IO04(GPIO4)
Arduino
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
|
Results:
Successfully connected LED and Blynk.
Reference site : https://stocker.jp/500W/2015/12/23/esp8266/
Notes for Mac OS users :
When I was trying to upload a program, I encountered an error below. I am using Mac OS Big Sur. It seems that the error has known among Big Sur users who tried ESP8266 per below referred site. - Arduino’s error message :
pyserial or esptool directories not found next to this upload.py tool.An error occurred while uploading the sketch
- Referred site ( in Japanese)
https://www.storange.jp/2020/12/macos-big-suresp8266.html - Suggested adjustments
Adjustments to be made in ~/Library/Arduino15/packages/esp8266/hardware/esp8266/2.7.4/tools/pyserial/serial/tools/list_ports_osx.py
What to be adjusted is Line 29 and 30 of above file
Original text ( # means comment out as adjustment)
‘’ # iokit = ‘ ctypes.cdll.LoadLibrary(ctypes.util.find_library(‘IOKit’))
‘’# cf=ctypes.cdll.LoadLibrary(ctypes.util.find_library(‘CoreFoundation’))
Text to be added “iokit = ctypes.cdll.LoadLibrary(‘/System/Library/Frameworks/IOKit.framework/IOKit’) “cf = ctypes.cdll.LoadLibrary(‘/System/Library/Frameworks/CoreFoundation.framework/CoreFoundation’)
The error was not shown in uploading a program to ESP8266 after the adjustments.
2.MIT App Inventor with LED lights (By Kamei)¶
I was interested to Wi-Fi connected interface where the user can operate the device from the smartphone. Also making an easy app for it sounded fun, so I decided to try MIT App Inventor which was introduced in the class.
The basic information¶
Input : MIT App Inventor (http://ai2.appinventor.mit.edu/) Board: ESP8266(Commercial) Client Environment: Arduino IDE 1.8.13 Output : LED light (Turning ON/OFF by the button on the app)
Thanks a lot forAdrián Torres’s(Fab Lab León) perfect documentation, I followed all procedures as he did.
1.Install App from Google play.¶
MIT App Inventor was an app for Android and luckily my smartphone was so.
2.Develop the App from MIT App Inventor Website¶
Next, access to the MIT App Inventor website. Both the computer(which accesses the website) and the smartphone(which the app was installed in)should be connected to the same Wi-Fi.
From “Project”>”Start New Project”, you can start to create the app.
Design the On the top of the right side, you can switch the following two modes.
Design: where you can design how the app looks to the user.
Blocks: where you can set the inside structure and logic of the app.
2-1.Designer Mode¶
Since the MIT App Inventor was very easy to understand visually, this step was the one of the fun parts! All you have to do is to add the necessary function from the pallet on the left side.
2-2.Blocks Mode¶
You can pick the necessary elements for your app from the left hand side. By assembling them you can program the app easily.
3.Connect the electricity on the board.¶
4.Write a code¶
Then you can write a code and connect it to the app.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 |
|
5.Load the App¶
Finally, everything has set. Load the app you created from the tab “Build”>”App(QR code)”, then try on the smartphone!
6.Results¶
On the serial monitor
On the board