Dev Web Final: Monkey Business (Sidra Manzoor)

Team: Billy & Sidra

Link to the app: http://192.168.50.184/~sm6450/speechapp/

For our final we decided to create a web app that could be used to control a monkey via an Arduino Yun. The web app had an input textarea that could take in commands. These commands could be sent through directly tying into the input field or through the use of an iphone’s microphone. These commands were then analysed through javascript and if a match was found (e.g. jump, dance, or wave), it would send a signal to the Arduino Yun via ajax to turn on a specific pin. Then based on what pin was turned on, the Arduino would move the five servos, connected to the arms, legs, and head of the monkey at specific angles.

We started off by creating the web app and laser cut monkey. The biggest issue in creating the app was positioning the various elements onto the page. Since this was being created for a phone and a desktop, we needed to make sure that the positioning of the various elements was just right for both screen sizes. After some trial and error, we figured out the final layout for the app.

Screen Shot 2017-05-22 at 7.22.28 pm

After this, we worked on the jquery and Arduino codes for the app. In jquery, we created a function “onChange()” that would analyse the input text and figure out if it matched any of our preset dictionary words (like dance or jump). If it did, it would then carry out a command based on which word was matched. For each word, it would send out a command that would turn on and off specific pins (11, 12, 13, 5). The commands were sent through ajax in the form of a url (e.g. http://speechapp/arduino/digital/11/1). This url was then read by the Arduino Yun to turn on and off it’s specific pins. Based on these pins, the Arduino code had conditionals set with it to move the different servos to different positions. For example, the word “jump” would turn on pin 12 and turn off all the other pins on the Arduino. And based on this command, the Arduino would move the leg servos of the monkey up and down to imitate a jump.

After figuring out the code, we started to assemble our monkey with the servos. At this point, we had a lot of problems. Firstly, two of our servos were broken and so did not read any commands that we sent them. After replacing them, we hot glued all the monkey parts to each servo head and fixed them on top of the servos. We did not screw the servo heads into the servos and as a result, every time when the servos moved, the monkey’s limbs fell off. Here’s a sad video as an example:

 

After realising this problem, we used a heat gun to remove the hot glue and first screwed the servo heads on top of the servos before hot gluing the limbs back on. This was our finished monkey:

File_000 (2)

This was the back with the servos:

File_001 (1)

After assembling everything and tweaking the code with different commands, we tested our monkey. It took some trial and error to figure out the exact angles that we wanted to move the monkey based on the commands; however, eventually, we got it to move perfectly.

Here are videos of it waving and jumping:

This project was a lot of fun to make and taught me a lot about how to establish communication between a web application and an Arduino. I think my favourite part of the whole project was actually seeing the text commands transform into a physical output. Through this, we can introduce a new level of interaction in our web applications which I definitely want to explore more in the future.

Arduino Yun Code:

 

Final Documentation: The Alert Bracelet (Sidra and Gabriela)

Project Partners: Sidra Manzoor and Gabriela Naumnik

Idea:

We wanted to help older people quickly and easily notify their family member in case of an emergency. We were inspired by a “Grace and Frankie” episode in which both older ladies fell, could not get up and had no possibility of calling for help as their phones were in different rooms. Based on this episode, our idea was to create a bracelet with a button, which, once pressed, would trigger an email message to be sent to a family member with information that help is needed as well as the location of the person. In order to better visualise the target users, we thought of “Grandma Edith”: an old lady in her 70s who lives by herself in New York.

1st stage of development:

(link: http://ima.nyu.sh/documentation/2017/05/09/the-alert-bracelet-tuesday-updates-gabriela-and-sidra/):

We started off by creating a Temboo for Gmail API. To do this, we had to verify one of ours Gmail accounts to get the verification key (which required activating Gabriela’s Polish phone number since our Chinese numbers did not work for some reason). Then, we set the title of the alert email to “HELP ALERT!” and the body to “I need help. Please, come as soon as possible.” We decided that the email is going to be sent when the button is pressed from “Grandma’s” account: nefron17@gmail.com to Sidra’s account (“close relative”). The next step included generating the code and connecting MRK1000. Initially, we had problems connecting MKR1000. It turned out the the one we checked out was broken. Thus, we managed to obtain another MKR1000 which worked just fine. The second problem was that the working MKR100 was not connecting to the WIFI because we did not include the WIFI password in the code. Finally, after fixing that issue, we run the Temboo choreo request and it worked! The Serial monitor showed the following request:

Temboo request 1

After a minute, the HELP ALERT email showed up in Sidra’s inbox:

Screen Shot 2017-05-19 at 1.43.10 pm

However, later on we encountered some problems. Our email was sent out once and we could not make it send again. So, to solve this, we decided to set up an entirely new gmail account called grandmaold98@gmail.com. This time we went through Google’s Developer’s Console to obtain our gmail account’s client Id and Secret and run the Temboo Choreo through that process. This time, our choreo requests were successful! At this point we added in a push button to control when the help email would be sent. The following video shows that once the button is pressed, Sidra receives an email from grandmaold98@gmail.com:

2nd stage of development:

This week we experimented with the Grove GPS module to get location data for the alert message. In order to see what values were given out from the module, we used example code from class. After connecting the module we received the following readings indoors:

Screen Shot 2017-05-11 at 4.05.13 pm

After making sure we connected it properly, we took the module outside and we got readings!

While using the module, we had a hard time understanding the data that was given through it. In order to only get the latitude and longitude values, we used the tinyGPS++ library. Through that we were able to directly call latitude and longitude without much difficulty. After successfully getting the GPS data, we tried to get the module to work with the MKR1000. The main problem here was that the software serial did not work with the MKR1000 therefore we had to use the hardware serial which did not give us immediate feedback. Due to this, it was very difficult to keep track of the GPS data that was being recorded through the GPS module. Our work around for that was that we first connected the module to an Arduino Uno to see the GPS readings. Through this, we found that they were floats logged in as 0.00 (The value was zero since we were indoors and could not get accurate location). After knowing that it was a float, we tried to send that 0.00 as a string in an email through Temboo. However, after many failed attempts we realised that zero by itself cannot be sent through the server since it reads as a null value. To solve this problem, we wrote a string in the email body “My location is at: ” and concatenated the latitude and longitude values to a google maps url to finally be able to send the values in an email.

Screen Shot 2017-05-12 at 8.47.12 pm

After getting the code to work, we soldered all the different parts onto a perfboard and powered the bracelet with a lipo battery. We then sewed a bracelet with a pocket to place the board within. Here’s what the board and bracelet looked like. We used the foam hand because why not be extra?

File_000   File_001

3rd stage of development:

This time, we started running tests on our device. At this point, we were confident that our device would work properly; however, things don’t always go as planned. Unfortunately, while getting the GPS module onto the perfboard, we accidentally damaged it. Due to which, we were no longer able to get location data. Since this was the last module we had, we could not work with GPS any longer. 

However, as an alternative solution, we decided to replace the module with three push buttons, each of which would send out a different location in the email on being pressed. As our target group are older people living alone, with health problems, it makes sense to assume that they do not move much around the town during the day. They may either be at home, at friend’s home, grocery store or, for example, a park. Therefore, we linked the three locations (her home, friend’s house, and central park) to the three push buttons. We also linked the buttons to three different LED’s so that once the button is pressed, the user would get feedback from the bracelet i.e. an LED would light up.

 

File_001 (1)

Screen Shot 2017-05-19 at 2.36.34 pm

Reflection:

All feedback given by other IMA friends indicated that our project is useful and indeed needed. Within a short time frame we created a wearable which works and serves its purpose of making sure that older people can get help if they find themselves in a hopeless situation alone. Even though GPS Grove broke down, we found another solution and demonstrated a developed product which can be used. We feel that we learned a lot from the process which helped us better understand how devices can be networked and how knowledge gained in the classroom can be applied to solve real world problems.

 

Networked Project that Inspired Me: Tweeting Cat Door

Link to the project: http://duino4projects.com/tweeting-cat-door-using-an-arduino/

Screen Shot 2017-04-27 at 12.57.34 pm

This cat door uses an rfid reader to detect rfid tags in a cat’s collar to open a latch to allow it to enter or exit the house. At the same, it takes a picture of the cat and posts it on twitter with a random tweet.

One such post read:

Penny is out to find someone to spoil her immaculate being

Screen Shot 2017-04-27 at 1.12.33 pm

I found this project interesting because it shows that even the most unusual (and sometimes unnecessary) ideas can be made super high tech using a simple Arduino. It shows me how easy it is now for even beginners to be creative and come up with the wildest ideas.

Experimenting with Youtube Data API V3

Link to the page: http://192.168.50.184/~sm6450/API/

This week I worked with the Youtube Data API to get a NYU Shanghai’s youtube channel videos onto a webpage. I started out by going through the reference page for the API to try to understand the basic commands for the API; however, I had difficulty in understanding how to implement those commands in my code. So, I started from the basics and took the codecademy course for APIs and specifically for Youtube to get a better sense of how to use APIs. After this, I experimented with the code and and looked up tutorials on Youtube to finally create my webpage. I was easily able to use the “get” command to retrieve the channel data from youtube. However, I had a hard time understanding how to embed the videos on my webpage. After some research I learned about the <iframe> tag through which I could embed the videos directly onto the page. Finally, after doing all of this I found that even though the video tags were appearing on the page, the actual videos did not show up. I realised that I needed to first upload the code to the NAS to get the data from Youtube. After doing this, the videos worked!

Screen Shot 2017-04-26 at 5.49.49 pm

MKR1000 and Twitter API with Temboo (Gabriela Naumnik and Sidra Manzoor)

This week we decided to use the twitter api through temboo to display random tweets about Donald Trump in a processing sketch if a button was pressed. We started out by registering with twitter developer to get the necessary api key and api secret etc. After this, we generated the code in temboo and opened it in processing after downloading the temboo library. We tested this part of the code and it worked!

After this, we connected the mkr1000 to our computer and connected it to a button. We used dweet.io to send the button value onto the dweet.io server. The dweet.io server produced a JSON file with the button data in it.

Here’s the file with the button data d1 = 1:

Screen Shot 2017-04-25 at 1.01.26 pm

Then, we edited our processing code to read the data from the JSON file. This part was a bit confusing mainly because we could not find any relevant examples. Eventually we got it to work (Thank you Luis!). Now once the button is pressed, “1” is sent to the dweet.io server which is then read by processing and changes the tweet (and colors the background red for dramatic effect) on the processing sketch.

Screen Shot 2017-04-25 at 1.01.02 pm

Here’s a video of it working:

 

Responsive Website (Midterm)

Link to the site: http://192.168.50.184/~sm6450/VCC/

For this project, I made a website for an NGO that works with villages called “Village Community Care”. I started out by first looking at different NGO websites online to get a sense of the different elements that I would need to include in my website. I then drew out a rough layout of the website. In my layout, I decided to have four pages: home, about us, projects, and contact us. For the home page, I wanted to add in a carousel as the background with the title over it. I was able to do this using bootstrap; however, the carousel seemed too distracting so I decided to just switch to a static background image with the Village Community Care title over it.

Screen Shot 2017-04-13 at 11.54.07 pm

For the rest of the pages, I wanted to place all the information within divs to flesh out the pages and make everything look tidy. This became a struggle to do since the divs did not change dimensions in the same manner as the content within them. After much trial and error, I was able to fit everything perfectly within the divs. Later on, I decided to add in carousels for the images in the projects page. Bootstrap made it much easier to do this; however, the framework has preset styles which I had a difficult time changing. I wanted to position the carousels in specific parts of the divs and remove the margins around them; however, the positions that I set for the carousels were overridden by the styles set through bootstrap. In order to solve this problem, I learned to use !important in front of the positions that I wanted to set the carousels at. !important made sure that my given positions would be given priority over the preset styles from bootstrap. Finally, for my contact us page, I created a form that would allow the user to input their name, email, and message, and directly send an email to the NGO by submitting the form. Finally, after creating the different elements of the website I worked on making the pages more responsive. Initially, I set everything in percentages; however, this did not work properly when the window size was changed. In order to solve this issue, I learned about and applied vh (viewport height) and vw (viewport width) which set the dimensions of the items based on the dimensions of the viewing screen.

       Screen Shot 2017-04-13 at 11.55.18 pm      Screen Shot 2017-04-13 at 11.55.08 pm      Screen Shot 2017-04-13 at 11.54.50 pm

Through this project, I came to appreciate the importance of including responsiveness in a site. I also came to realise the challenges associated with achieving this responsiveness. I still have a long way to go in terms of creating a fully responsive site; however, this was a good starting point.

Physical Networks (Sidra)

This year I spent my spring break in Japan. These were some of the networks I found in the cities that I visited. I was surprised to find so many wire connections since I was expecting most of it to be wireless. However, I think this was mainly because wire connections were easier to spot.

I found a number of communication poles throughout the city. These were connected to street lights, shops and houses.

IMG_8407 IMG_8895

IMG_8332

Solar panels were also pretty common. These provided power to the nearby housing communities.

IMG_8505

I also found many free wifi signs in the city. As long as the person is near those areas, they are able to connect to the wifi.

wifi

Japan’s transportation system is also highly networked. These wires were used to connect trains to power. I also found a lot of wiring on the roofs of subway platforms. They’re used to provide power to security cameras, lights and led information boards.

IMG_8627 IMG_8508

Codecademy JQuery

After completing the Javascript course it didn’t take me much time to finish JQuery. I think the biggest problem I had was with the syntax for JQuery. Also, I constantly forgot to add in my closing parentheses which gave me an error in my code. However, after practicing for a few times in the course, I was able to get the hang of it!

jQuery

Codecademy Javascript

Screen Shot 2017-03-15 at 5.48.20 pm

Javascript took me the most amount of time out of all of the other lessons. I think the main problem I had with it was understanding the implementation of tasks through functions. A lot of the times, I had to look at the hints provided in each exercise or go to the Q&A forum to figure out what I was doing wrong. Another main issue was with codecademy itself which sometimes did not accept the right code and after numerous attempts of editing, I simply had to refresh the page to get my code to work. Overall, I think this course really helped me develop a strong basic foundation in javascript.

RFID Assignment

Team: Angelica, Tristan & Sidra

This week our project was inspired by the card game “Yu-Gi-Oh”. Just like the game, we wanted to make the monsters appear if a card was used. In order to do that, we used mifare cards to start different videos on processing which would then make the monsters appear onto a hologram projector.

In order to make the hologram projector, we laser cut four triangular parts and taped them together. The most important part for the projection was to maintain a 45 degree angle with the computer that had the processing sketch with the video playing on it. Initially, we were using a phone screen to project the videos but that did not work since the screen was too small relative to the projector and thus the projected images were too small to see. Afterwards, we tested it with a computer screen and it worked!

 

Here’s a video of us testing out the different cards and showing the different holograms:

 

Here’s the projector that we made:

IMG_7962 (1)