App Inventor + IoT: RGB LED control through Wi-Fi with LinkIt 7697


App Inventor + IoT:

Wi-Fi RGB LED control with LinkIt 7697



(including Arduino IDE setup)

Level: advanced

This tutorial will help you get started with App Inventor + IoT, controlling LinkIt 7697 (Arduino compatible) to control a RGB LED  with four different colors by buttons on your app.


Hardware

 LinkIt 7697 is an Arduino compatible dev board with Wi-Fi / BLE. You can use it to interface with App Inventor through its BLE communication.


 Arduino IDE Setup

  1. First get Arduino IDE 1.8.x version, download the .zip file, unzip and click arduino.exe to open the IDE. From File Preference menu, enter the link below in the Additional Boards Manager URLs field:

https://lh5.googleusercontent.com/1MUG0JISgMmmZNk3VPYkjwTpmn1oe41QYKi5bWuO5fIMG7Fk_JmRBWg6YwrMgO9AAOnJv03Eljkfyg4_lLZftQXRW3evIImcrCzSYesX3FZlqfaW270kxhc-HK8KBu9Jon7UO_lc


  1. Open Tools/ Board/ Board Manager, then search “7697” and install the latest version of 7697 SDK.

  1. Download and install the CP2102N driver (Windows / MAC/OSX), then check the COM port in your Device manager. You should see a “Silicon Labs CP210 USB to UART Bridge(COMXX),” this is the COM port number of your LinkIt 7697.

Finally, go back to the Arduino IDE, check to see if it recognizes your LinkIt 7697 successfully in the Tools/Port menu. For MAC users, it should be something like “/dev/tty.usbserialXXX…”  For Windows users, it should look like the figure below.

https://lh4.googleusercontent.com/ZQnRkmWz2D_mJnLcZ-CtB5Jdu2FV2qw3fBFRPJr5Sd88TwYf1G8uiYmHlwQtNqgozJYkKiXQzYtKe3IZyS_nl_AGMJTyNu_phl1VsTx_cxHkPD0vNdoyyU6cq_YoEuVQ1vhnk7hg


Hardware Assembly

 In this project, we are going to control a RGB LED by App Inventor, which actually are three different color LEDs (red, green and blue) integrated into one.

 Here are the components you need for this project:

  • LinkIt 7697 dev board, 1

  • *breadboard, 1

  • *wires, 4

  • *RGB LED (common cathode), 1


 First, connect LinkIt 7697 and RGB LED on the breadboard, and use wires to connect all the components according the table.


RGB LED

LinkIt 7697

R

P11

G

P9

B

P7

GND

any one GND pin




Your finished project should look like the picture below:

https://lh5.googleusercontent.com/lNvFOz8e2xd9QwvJNkIlWD4QXd7Rk0-hedjZza0VrZMQZU4Et33EPHwoaT_vMCXs76Hnn6FfYazwBTw-8amxA2ZDZRuKJgUkgPoA8d1AstTIoZb4acLdry6_eAKtANwUv0eq2il0


Physical photo of this project:

added later

  

.

App Inventor

 The purpose of this project is to control an RGB LED on your LinkIt 7697 board to shine in four different colors with App Inventor via Wi-Fi. The four colors are red, green, blue and white. The main idea is that App Inventor will open LinkIt 7697’s URL with different command, this will lights up the LED in different colors.

  • /R: red light

  • /G: green light

  • /B: blue light

  • /W: white light

  • /o: light off


Now log in to your MIT App Inventor account and create a new project.

 

Designer

  1. We need to import BLE extension from this URL:

Then add it to the project by dragging it into the Viewer.

  1. Add a HorizontalArrangement component.

  2. Add a button and a label into previous HorizontalArrangement component. This button is for user to set LinkIt 7697’s IP and label is to show messages.

  3. Add a Textbox and clear the Text field. Set the Hint to "check 7697 ip in serial monitor," input the user’s LinkIt 7697’s IP here.

  4. Add a TableArrangement component, set its width to Fill parent, height to 200 pixels, Row to 2 and Column to 3.

  5. Add five buttons into previous TableArrangement component. Give each a width of 33% and a height of 100 pixels. And modify the Text to "R", "G", "B", "W" and "off", representing different color of RGB LED.

 

  After some adjusting, your designer should look like this. It doesn’t have to be exactly the same, feel free to modify the color and placement of buttons:

https://lh5.googleusercontent.com/YTBptzWE7VnVd0YvdbRKaldm2ZAp4ejm2j0oMbVblgpYv0NRZ0XKmUbPeS6V9WI3Ynj4HjKTxDXIo_HUFFm6rw2Zguqb3YNuzl-ptpWLyrOgGqfcKwC0FJ1j9ZUicNoiwF-3V5Tn



Blocks

 

Let’s take a look of our blocks step by step:


  1. Variable for Bluetooth address

   Please replace the value with what you get from Arduino’s Serial Monitor. This is LinkIt 7697’s IP address after connection to the Internet.

https://lh4.googleusercontent.com/6Lx10ASSXyeeGvOscbwD4A9s1rlXYt1B6rxGtwYE_pIFFeph0bTJYmfA655w5ZfCfg6J5bQzT3AWZ_MQqUt22rI_kHllHJZPGjyMNN3ceqm2rLH0jTv4RpzUGAk7HBycqKyGZcLw

  1. Setting the IP

   Button_setIP is used to update LinkIt 7697’ IP.   This is very convenient when you want to control more than one LinkIt board. When you click the button (Button_setIP.Click event), it will check whether the TextBox is empty. If so, then it will set the Textbox’s content to the Web component’s Url (LinkIt 7697’s IP address).  If not, it will show a message that tells the user to input LinkIt IP in the form of "XXX.XXX.XXX.XXX", such as "192.168.1.73".

https://lh4.googleusercontent.com/6Lx10ASSXyeeGvOscbwD4A9s1rlXYt1B6rxGtwYE_pIFFeph0bTJYmfA655w5ZfCfg6J5bQzT3AWZ_MQqUt22rI_kHllHJZPGjyMNN3ceqm2rLH0jTv4RpzUGAk7HBycqKyGZcLw

  1. Procedure to update Url and connect

Here we use a procedure to manage what we send and message update when we click each button. Please add a procedure and click the blue gear to add two parameters. Rename this procedure to "sendData", and two parameters as "message" and "command", which means the message parameter is used to update the label and command parameter is used to send different command to LinkIt 7697.

        The command parameter of the sendData procedure will be combined with the IP variable into a complete URL, like "http://192.168.1.73/R."  The last letter is a different command sent to LinkIt 7697. Finally we use the Web component to get this URL, by sending out a specific text to LinkIt 7697.


  1. Buttons to control LED

  Every time we click a button, we are calling sendData procedures with different parameters. Using procedures will make your code easier to read and manage.

  • /R: red light

  • /G: green light

  • /B: blue light

  • /W: white light

  • /o: light off

https://lh5.googleusercontent.com/AutTDfRxub-RDehK0BqHPfQbpsKIVeY5NKQzXtRXIOTm-PC8q9zL9dHDtfhrxrfyk6RL7SRqBG8H1hVOgYrQCexChzaawhGWP_OROWKac7Hi2lHgg9LTSrtQ0TrLRrJb_tW0C1MG

Arduino code

Please download code here and upload to your LinkIt 7697. Press the "Upload" right-arrow button, this will compile and upload the Arduino sketch in Arduino IDE to your LinkIt 7697. Please make sure you see the "done uploading" message in the console below.


Tips

Make sure your LinkIt 7697 is running correctly as a Webserver. Open Serial Monitor in Arduino IDE, check the IP address of your LinkIt 7697.

Modify App Inventor’s IP variable value with this, then click each button to see the different colors lighting up!

https://lh5.googleusercontent.com/OPGYua4RoXOuN68ZuPI3yUFEG-ChoJXxqFHKzSctRI0-c2gEBxPJpYmvYEFuNHTDvcHaqbNqgzYH35py5xKEQsg6Xr0sYEImXB2-K8z-Nbj6LX4Uz-28t82od5jsciVyUX_jqz1X

Outside of App Inventor, open a web browser with LinkIt 7697’s ip address and you can see a webpage hosted by LinkIt 7697. Click each "here" to control the LED light color. Note: Your PC or any device to open this webpage and LinkIt 7697 must under the same network.


https://lh3.googleusercontent.com/AgplwWtWuwTRSZ2yoLVr8Ix-O-q63gEbn1ic88VSxUhlGVfdzw1WCLFOgGckS2-AYNA2ppro7wgCbyi1qDxdKAsuPel1UNBVsGUw90yfYeIS-13RasKajrNdGYpVo3CSbQ5IEqlj

Tips


Open your app. You can see messages in the lower left corner of the screen when you have set the IP correctly. Click the buttons to light up different colors and the label in the upper right hand corner will show corresponding messages.

https://lh3.googleusercontent.com/Fm4aB4SGAEclobPhiGgnMX5helCzpWHtrzrBLA5fu3nJXrB82OBlerYVFI01ENru17COdJqM2i5u7gBK3pO4B6P4U174vRJdaHHEkZLf40L9JGbLC9LumpS_Ju8FViu9RZEcYgQDhttps://lh3.googleusercontent.com/HJ3D6V8Mbyvqq8xgGkL__pVvzrY-O7htOxKb9hqMrmjoDueLF69T67zBGhKRhUjw0ibKcenPgQ_lNqvwYMSp2J1PZHPXYi6BTsqahO2lFRZulOHf3yfd2zSGlnAkxYG0a9LHje2Q

Brainstorming

  1. Try to light up RGB LED with different colors, such as red and blue lighting up together to shine in purple.


ċ
WIFI_7697_LED.aia
(85k)
曾吉弘,
2017年11月20日 上午11:52
ċ
WiFi_7697_LED.ino
(5k)
曾吉弘,
2017年11月20日 上午11:52
Comments