45
Lecture (08) Build Custom Android App for your Arduino Project using MIT App Inventor By: Dr. Ahmed ElShafee Dr. Ahmed ElShafee, ACU : Spring 2017, Practical App EE II ١ Open vmware/app inventor image Dr. Ahmed ElShafee, ACU : Spring 2017, Practical App EE II ٢

Lecture (08) Build Custom Android App for your ...draelshafee.net › Spring2017 › practical-app-ee-ii---lecture-08.pdfAndroid App for your ArduinoProject using MIT App Inventor

  • Upload
    others

  • View
    0

  • Download
    0

Embed Size (px)

Citation preview

Page 1: Lecture (08) Build Custom Android App for your ...draelshafee.net › Spring2017 › practical-app-ee-ii---lecture-08.pdfAndroid App for your ArduinoProject using MIT App Inventor

Lecture (08)Build Custom 

Android App for your Arduino Project using MIT App Inventor

By:

Dr. Ahmed ElShafee

Dr. Ahmed ElShafee, ACU : Spring 2017, Practical App EE II ١

Open vmware/app inventor image

Dr. Ahmed ElShafee, ACU : Spring 2017, Practical App EE II ٢

Page 2: Lecture (08) Build Custom Android App for your ...draelshafee.net › Spring2017 › practical-app-ee-ii---lecture-08.pdfAndroid App for your ArduinoProject using MIT App Inventor

Dr. Ahmed ElShafee, ACU : Spring 2017, Practical App EE II ٣

Run AI2 starter as admin

Dr. Ahmed ElShafee, ACU : Spring 2017, Practical App EE II ٤

Page 3: Lecture (08) Build Custom Android App for your ...draelshafee.net › Spring2017 › practical-app-ee-ii---lecture-08.pdfAndroid App for your ArduinoProject using MIT App Inventor

Dr. Ahmed ElShafee, ACU : Spring 2017, Practical App EE II ٥

Run App Inventor Ultimate as admin

Dr. Ahmed ElShafee, ACU : Spring 2017, Practical App EE II ٦

Page 4: Lecture (08) Build Custom Android App for your ...draelshafee.net › Spring2017 › practical-app-ee-ii---lecture-08.pdfAndroid App for your ArduinoProject using MIT App Inventor

Open firefox or chrome as admin

Dr. Ahmed ElShafee, ACU : Spring 2017, Practical App EE II ٧

type the following address 127.0.0.1:8888

Dr. Ahmed ElShafee, ACU : Spring 2017, Practical App EE II ٨

Page 5: Lecture (08) Build Custom Android App for your ...draelshafee.net › Spring2017 › practical-app-ee-ii---lecture-08.pdfAndroid App for your ArduinoProject using MIT App Inventor

Login using email

Dr. Ahmed ElShafee, ACU : Spring 2017, Practical App EE II ٩

Dr. Ahmed ElShafee, ACU : Spring 2017, Practical App EE II ١٠

Page 6: Lecture (08) Build Custom Android App for your ...draelshafee.net › Spring2017 › practical-app-ee-ii---lecture-08.pdfAndroid App for your ArduinoProject using MIT App Inventor

Start new project

Dr. Ahmed ElShafee, ACU : Spring 2017, Practical App EE II ١١

Type name

Dr. Ahmed ElShafee, ACU : Spring 2017, Practical App EE II ١٢

Page 7: Lecture (08) Build Custom Android App for your ...draelshafee.net › Spring2017 › practical-app-ee-ii---lecture-08.pdfAndroid App for your ArduinoProject using MIT App Inventor

Now we go

Dr. Ahmed ElShafee, ACU : Spring 2017, Practical App EE II ١٣

Open layout

Dr. Ahmed ElShafee, ACU : Spring 2017, Practical App EE II ١٤

Page 8: Lecture (08) Build Custom Android App for your ...draelshafee.net › Spring2017 › practical-app-ee-ii---lecture-08.pdfAndroid App for your ArduinoProject using MIT App Inventor

Inset Horizontal arrangement

Dr. Ahmed ElShafee, ACU : Spring 2017, Practical App EE II ١٥

Set properties

Dr. Ahmed ElShafee, ACU : Spring 2017, Practical App EE II ١٦

Page 9: Lecture (08) Build Custom Android App for your ...draelshafee.net › Spring2017 › practical-app-ee-ii---lecture-08.pdfAndroid App for your ArduinoProject using MIT App Inventor

Open user interface/Inset label into horizontal arrangement

Dr. Ahmed ElShafee, ACU : Spring 2017, Practical App EE II ١٧

Set label properties

Dr. Ahmed ElShafee, ACU : Spring 2017, Practical App EE II ١٨

Page 10: Lecture (08) Build Custom Android App for your ...draelshafee.net › Spring2017 › practical-app-ee-ii---lecture-08.pdfAndroid App for your ArduinoProject using MIT App Inventor

Add another horizontal arrangement

Dr. Ahmed ElShafee, ACU : Spring 2017, Practical App EE II ١٩

Insert image into horizontal arrangement 2

Dr. Ahmed ElShafee, ACU : Spring 2017, Practical App EE II ٢٠

Page 11: Lecture (08) Build Custom Android App for your ...draelshafee.net › Spring2017 › practical-app-ee-ii---lecture-08.pdfAndroid App for your ArduinoProject using MIT App Inventor

Upload image file to project

Dr. Ahmed ElShafee, ACU : Spring 2017, Practical App EE II ٢١

Dr. Ahmed ElShafee, ACU : Spring 2017, Practical App EE II ٢٢

Page 12: Lecture (08) Build Custom Android App for your ...draelshafee.net › Spring2017 › practical-app-ee-ii---lecture-08.pdfAndroid App for your ArduinoProject using MIT App Inventor

Inset media file into image object

Dr. Ahmed ElShafee, ACU : Spring 2017, Practical App EE II ٢٣

Adjust image properties

Dr. Ahmed ElShafee, ACU : Spring 2017, Practical App EE II ٢٤

Page 13: Lecture (08) Build Custom Android App for your ...draelshafee.net › Spring2017 › practical-app-ee-ii---lecture-08.pdfAndroid App for your ArduinoProject using MIT App Inventor

Dr. Ahmed ElShafee, ACU : Spring 2017, Practical App EE II ٢٥

Add 3rd horizontal arrangement

Dr. Ahmed ElShafee, ACU : Spring 2017, Practical App EE II ٢٦

Page 14: Lecture (08) Build Custom Android App for your ...draelshafee.net › Spring2017 › practical-app-ee-ii---lecture-08.pdfAndroid App for your ArduinoProject using MIT App Inventor

Adjust properties

Dr. Ahmed ElShafee, ACU : Spring 2017, Practical App EE II ٢٧

Inset label 2, label 3,list piker

Dr. Ahmed ElShafee, ACU : Spring 2017, Practical App EE II ٢٨

Page 15: Lecture (08) Build Custom Android App for your ...draelshafee.net › Spring2017 › practical-app-ee-ii---lecture-08.pdfAndroid App for your ArduinoProject using MIT App Inventor

Adjust labels text, background color

Dr. Ahmed ElShafee, ACU : Spring 2017, Practical App EE II ٢٩

Dr. Ahmed ElShafee, ACU : Spring 2017, Practical App EE II ٣٠

Page 16: Lecture (08) Build Custom Android App for your ...draelshafee.net › Spring2017 › practical-app-ee-ii---lecture-08.pdfAndroid App for your ArduinoProject using MIT App Inventor

Add BT image

Dr. Ahmed ElShafee, ACU : Spring 2017, Practical App EE II ٣١

Dr. Ahmed ElShafee, ACU : Spring 2017, Practical App EE II ٣٢

Page 17: Lecture (08) Build Custom Android App for your ...draelshafee.net › Spring2017 › practical-app-ee-ii---lecture-08.pdfAndroid App for your ArduinoProject using MIT App Inventor

Add BT image to pick list

Dr. Ahmed ElShafee, ACU : Spring 2017, Practical App EE II ٣٣

Adjust pick list properties

Dr. Ahmed ElShafee, ACU : Spring 2017, Practical App EE II ٣٤

Page 18: Lecture (08) Build Custom Android App for your ...draelshafee.net › Spring2017 › practical-app-ee-ii---lecture-08.pdfAndroid App for your ArduinoProject using MIT App Inventor

Add last horizontal arrangement

Dr. Ahmed ElShafee, ACU : Spring 2017, Practical App EE II ٣٥

Dr. Ahmed ElShafee, ACU : Spring 2017, Practical App EE II ٣٦

Page 19: Lecture (08) Build Custom Android App for your ...draelshafee.net › Spring2017 › practical-app-ee-ii---lecture-08.pdfAndroid App for your ArduinoProject using MIT App Inventor

Add 2 buttons

Dr. Ahmed ElShafee, ACU : Spring 2017, Practical App EE II ٣٧

Adjust buttons text

Dr. Ahmed ElShafee, ACU : Spring 2017, Practical App EE II ٣٨

Page 20: Lecture (08) Build Custom Android App for your ...draelshafee.net › Spring2017 › practical-app-ee-ii---lecture-08.pdfAndroid App for your ArduinoProject using MIT App Inventor

Open connectivity add BT client

Dr. Ahmed ElShafee, ACU : Spring 2017, Practical App EE II ٣٩

Open user interface add clock

Dr. Ahmed ElShafee, ACU : Spring 2017, Practical App EE II ٤٠

Page 21: Lecture (08) Build Custom Android App for your ...draelshafee.net › Spring2017 › practical-app-ee-ii---lecture-08.pdfAndroid App for your ArduinoProject using MIT App Inventor

Switch to blocks window

Dr. Ahmed ElShafee, ACU : Spring 2017, Practical App EE II ٤١

Dr. Ahmed ElShafee, ACU : Spring 2017, Practical App EE II ٤٢

Page 22: Lecture (08) Build Custom Android App for your ...draelshafee.net › Spring2017 › practical-app-ee-ii---lecture-08.pdfAndroid App for your ArduinoProject using MIT App Inventor

Click on listpicket1, choose before picking event

Dr. Ahmed ElShafee, ACU : Spring 2017, Practical App EE II ٤٣

Dr. Ahmed ElShafee, ACU : Spring 2017, Practical App EE II ٤٤

Page 23: Lecture (08) Build Custom Android App for your ...draelshafee.net › Spring2017 › practical-app-ee-ii---lecture-08.pdfAndroid App for your ArduinoProject using MIT App Inventor

Dr. Ahmed ElShafee, ACU : Spring 2017, Practical App EE II ٤٥

Dr. Ahmed ElShafee, ACU : Spring 2017, Practical App EE II ٤٦

Page 24: Lecture (08) Build Custom Android App for your ...draelshafee.net › Spring2017 › practical-app-ee-ii---lecture-08.pdfAndroid App for your ArduinoProject using MIT App Inventor

Open BT client

Dr. Ahmed ElShafee, ACU : Spring 2017, Practical App EE II ٤٧

Dr. Ahmed ElShafee, ACU : Spring 2017, Practical App EE II ٤٨

Page 25: Lecture (08) Build Custom Android App for your ...draelshafee.net › Spring2017 › practical-app-ee-ii---lecture-08.pdfAndroid App for your ArduinoProject using MIT App Inventor

Open list piker1, select after picking

Dr. Ahmed ElShafee, ACU : Spring 2017, Practical App EE II ٤٩

Open built in control select if statment

Dr. Ahmed ElShafee, ACU : Spring 2017, Practical App EE II ٥٠

Page 26: Lecture (08) Build Custom Android App for your ...draelshafee.net › Spring2017 › practical-app-ee-ii---lecture-08.pdfAndroid App for your ArduinoProject using MIT App Inventor

Dr. Ahmed ElShafee, ACU : Spring 2017, Practical App EE II ٥١

BT connect

Dr. Ahmed ElShafee, ACU : Spring 2017, Practical App EE II ٥٢

Page 27: Lecture (08) Build Custom Android App for your ...draelshafee.net › Spring2017 › practical-app-ee-ii---lecture-08.pdfAndroid App for your ArduinoProject using MIT App Inventor

Dr. Ahmed ElShafee, ACU : Spring 2017, Practical App EE II ٥٣

List picker selection

Dr. Ahmed ElShafee, ACU : Spring 2017, Practical App EE II ٥٤

Page 28: Lecture (08) Build Custom Android App for your ...draelshafee.net › Spring2017 › practical-app-ee-ii---lecture-08.pdfAndroid App for your ArduinoProject using MIT App Inventor

Dr. Ahmed ElShafee, ACU : Spring 2017, Practical App EE II ٥٥

Set List picker 1 elements

Dr. Ahmed ElShafee, ACU : Spring 2017, Practical App EE II ٥٦

Page 29: Lecture (08) Build Custom Android App for your ...draelshafee.net › Spring2017 › practical-app-ee-ii---lecture-08.pdfAndroid App for your ArduinoProject using MIT App Inventor

Dr. Ahmed ElShafee, ACU : Spring 2017, Practical App EE II ٥٧

BT client addresses and names

Dr. Ahmed ElShafee, ACU : Spring 2017, Practical App EE II ٥٨

Page 30: Lecture (08) Build Custom Android App for your ...draelshafee.net › Spring2017 › practical-app-ee-ii---lecture-08.pdfAndroid App for your ArduinoProject using MIT App Inventor

Dr. Ahmed ElShafee, ACU : Spring 2017, Practical App EE II ٥٩

Button 1 click

Dr. Ahmed ElShafee, ACU : Spring 2017, Practical App EE II ٦٠

Page 31: Lecture (08) Build Custom Android App for your ...draelshafee.net › Spring2017 › practical-app-ee-ii---lecture-08.pdfAndroid App for your ArduinoProject using MIT App Inventor

Dr. Ahmed ElShafee, ACU : Spring 2017, Practical App EE II ٦١

Call BT client  send text

Dr. Ahmed ElShafee, ACU : Spring 2017, Practical App EE II ٦٢

Page 32: Lecture (08) Build Custom Android App for your ...draelshafee.net › Spring2017 › practical-app-ee-ii---lecture-08.pdfAndroid App for your ArduinoProject using MIT App Inventor

Dr. Ahmed ElShafee, ACU : Spring 2017, Practical App EE II ٦٣

Text

Dr. Ahmed ElShafee, ACU : Spring 2017, Practical App EE II ٦٤

Page 33: Lecture (08) Build Custom Android App for your ...draelshafee.net › Spring2017 › practical-app-ee-ii---lecture-08.pdfAndroid App for your ArduinoProject using MIT App Inventor

Dr. Ahmed ElShafee, ACU : Spring 2017, Practical App EE II ٦٥

Button 2 click

Dr. Ahmed ElShafee, ACU : Spring 2017, Practical App EE II ٦٦

Page 34: Lecture (08) Build Custom Android App for your ...draelshafee.net › Spring2017 › practical-app-ee-ii---lecture-08.pdfAndroid App for your ArduinoProject using MIT App Inventor

Dr. Ahmed ElShafee, ACU : Spring 2017, Practical App EE II ٦٧

Dr. Ahmed ElShafee, ACU : Spring 2017, Practical App EE II ٦٨

Page 35: Lecture (08) Build Custom Android App for your ...draelshafee.net › Spring2017 › practical-app-ee-ii---lecture-08.pdfAndroid App for your ArduinoProject using MIT App Inventor

Save app

Dr. Ahmed ElShafee, ACU : Spring 2017, Practical App EE II ٦٩

Export app

Dr. Ahmed ElShafee, ACU : Spring 2017, Practical App EE II ٧٠

Page 36: Lecture (08) Build Custom Android App for your ...draelshafee.net › Spring2017 › practical-app-ee-ii---lecture-08.pdfAndroid App for your ArduinoProject using MIT App Inventor

Dr. Ahmed ElShafee, ACU : Spring 2017, Practical App EE II ٧١

Build app

Dr. Ahmed ElShafee, ACU : Spring 2017, Practical App EE II ٧٢

Page 37: Lecture (08) Build Custom Android App for your ...draelshafee.net › Spring2017 › practical-app-ee-ii---lecture-08.pdfAndroid App for your ArduinoProject using MIT App Inventor

Dr. Ahmed ElShafee, ACU : Spring 2017, Practical App EE II ٧٣

Dr. Ahmed ElShafee, ACU : Spring 2017, Practical App EE II ٧٤

Page 38: Lecture (08) Build Custom Android App for your ...draelshafee.net › Spring2017 › practical-app-ee-ii---lecture-08.pdfAndroid App for your ArduinoProject using MIT App Inventor

Add‐on part

Dr. Ahmed ElShafee, ACU : Spring 2017, Practical App EE II ٧٥

Add timer clock event

Dr. Ahmed ElShafee, ACU : Spring 2017, Practical App EE II ٧٦

Page 39: Lecture (08) Build Custom Android App for your ...draelshafee.net › Spring2017 › practical-app-ee-ii---lecture-08.pdfAndroid App for your ArduinoProject using MIT App Inventor

Control if then

Dr. Ahmed ElShafee, ACU : Spring 2017, Practical App EE II ٧٧

Dr. Ahmed ElShafee, ACU : Spring 2017, Practical App EE II ٧٨

Page 40: Lecture (08) Build Custom Android App for your ...draelshafee.net › Spring2017 › practical-app-ee-ii---lecture-08.pdfAndroid App for your ArduinoProject using MIT App Inventor

BT client is connected

Dr. Ahmed ElShafee, ACU : Spring 2017, Practical App EE II ٧٩

Dr. Ahmed ElShafee, ACU : Spring 2017, Practical App EE II ٨٠

Page 41: Lecture (08) Build Custom Android App for your ...draelshafee.net › Spring2017 › practical-app-ee-ii---lecture-08.pdfAndroid App for your ArduinoProject using MIT App Inventor

Set Label 2 background color

Dr. Ahmed ElShafee, ACU : Spring 2017, Practical App EE II ٨١

Dr. Ahmed ElShafee, ACU : Spring 2017, Practical App EE II ٨٢

Page 42: Lecture (08) Build Custom Android App for your ...draelshafee.net › Spring2017 › practical-app-ee-ii---lecture-08.pdfAndroid App for your ArduinoProject using MIT App Inventor

color

Dr. Ahmed ElShafee, ACU : Spring 2017, Practical App EE II ٨٣

Set text2 text

Dr. Ahmed ElShafee, ACU : Spring 2017, Practical App EE II ٨٤

Page 43: Lecture (08) Build Custom Android App for your ...draelshafee.net › Spring2017 › practical-app-ee-ii---lecture-08.pdfAndroid App for your ArduinoProject using MIT App Inventor

Dr. Ahmed ElShafee, ACU : Spring 2017, Practical App EE II ٨٥

Dr. Ahmed ElShafee, ACU : Spring 2017, Practical App EE II ٨٦

Page 44: Lecture (08) Build Custom Android App for your ...draelshafee.net › Spring2017 › practical-app-ee-ii---lecture-08.pdfAndroid App for your ArduinoProject using MIT App Inventor

Dr. Ahmed ElShafee, ACU : Spring 2017, Practical App EE II ٨٧

Dr. Ahmed ElShafee, ACU : Spring 2017, Practical App EE II ٨٨

Page 45: Lecture (08) Build Custom Android App for your ...draelshafee.net › Spring2017 › practical-app-ee-ii---lecture-08.pdfAndroid App for your ArduinoProject using MIT App Inventor

Thanks,..

See you next week (ISA),…

Dr. Ahmed ElShafee, ACU : Spring 2017, Practical App EE II ٨٩