Api practice- Jarred Kubas

For this assignment, we were tasked with using an api. I chose to to use the good maps api in order to add to my hamburger fan page. It was a good fit for the purposes of my website being a food blog. Naturally having the location marker on the location of the restaurant would aid viewers in finding direction. With this screen shot users can see the nearest metro station.

Screen Shot 2017-05-23 at 2.28.15 PM

Final Project- Developing Web – Jarred Kubas

For my final project, I chose to take an old wireframe built earlier in the semester for a UX Design course and take it the next step into a mobile app.  The wireframe is seen below:

Screen Shot 2017-05-23 at 12.49.31 PM

The basis behind the app was to create a female hygiene application with built in functionality to subscribe to relevant monthly product deliveries. These deliveries would sync with the inputted health data. Through making my UX development project into an actual mobile app, the medium through which i hoped my audience would interact with the project, I was able to to become quite comfortable within the jquery mobile framework. Although, given the complexity of some of the functions, mainly the predictive menstrual tracking algorithm, I was not able to make a perfect copy of my wireframe. As a business and finance student, I gained the furthered ability to understand at a high level what goes into making ideas into a reality within the tech space.

The jquery mobile features that I used the most were grids. As my app features a product page, organization was challenging. For this I would lay grids inside of grids in order to maintain consistent spacing and organization. The logic behind this took some time to understand, but in the end my project page was a success. Seen below is my grid system without CSS.

Screen Shot 2017-05-23 at 1.13.37 PM

Additionally, I used the jquery mobile datepicker. This was another challenge as the code for the datepicker came from a third party. Originally the css for the datepicker was nowhere to be found. However, this problem was solved by inspecting the source code for the Jquery mobile website.

Screen Shot 2017-05-22 at 7.07.28 PM

In total I made a 5 page app that included a home page, community page, health data page, product page, and subscription/payment/shipping page. Once my app wireframe had been remade with Jquery mobile, the next step was to use an API. Deciding on an api was not easy. Originally, I had looked for an API that would do the menstrual tracking algorithm and in order to help predict shipments. Although i did find this, the complexity of the API was not practical for the project. From here I looked for wechat pay and alipay api’s. Again, I ran into a similar issue. The wechat documentation was all in chinese, and alipay required a extensive registration process. In the end I used the google calendar api. The api operates by connecting to a google account and extracting the preentered dates and presenting them within the app. Although there is no predictive health tracking with the api, in the future the notification of upcoming events relevant to the menstrual cycle is really practical.

In the end, I am glad i chose to do this as my final project. It was a practical app that has the potential to go much further. At this point, I have a great prototype to pass on to potential users and developers.

Link: http://192.168.50.184/~jmk746/final/

note: api does not work on the nas, but works on the localhost

[Web App] Send Love – Jackie Final Project

Project Description: 

Send Love is a web app that allows people in long distance relationships to communicate with each other physically. This app is able to control Arduino Yún remotely and gets data back from it. Besides that, it can also update weather information in real time around the world.

It mainly has 3 functions:

  1. Get a city’s weather information by entering city’s name with customized icon;
  2. Press “Send Some Love!” in the App to turn on LED light remotely;
  3. Press the physical button beside the LED to send alert “Your love has been received!” back to the App page as a user feedback.

Tools:

PHP servor, Arduino Yún, Weather API, Photoshop

Different Design section:

  1. Arduino Yún: The hardest step for me is to set up Arduino Yún and make it working, including: control Arduino through javascript, connect it to wifi so that it can work wirelessly, getting data back to web page from Arduino. I got a lot of help from Professor Matt, Scott, and Antonious, Thank you : )

WechatIMG4

  1. Interface Desgin: I used UI KIT as javascript framework. To keep this page simple but unique, I draw my own icons for the app and edit it in the photoshop (polishing colors and taking off the background).
  2. Weather API: I used the world weather api in class to complete this project. I used “Postman” to check the api’s status and complete the json code. As I only drew 6 weather icons, which were not as detailed as the api’s data, I organized their weather code to fit in my 6 categories. And in my code, I was not getting the weather’s name but the code instead:

    Sunny: 113

    Thunder: 389, 386, 200

    Cloudy: 143, 122, 119, 116

    Rainy: 359, 356, 353, 314, 311, 308, 305, 302, 299, 296, 293, 284, 281, 266, 263, 185, 176

    Snowy: 395, 392, 377, 374, 371, 368, 365, 362, 350, 338, 335, 332, 329, 326, 323, 320, 317, 230, 227, 182, 179

    Windy: 260, 248

  3. PHP Server: Mostly the knowledge we learnt in class with MAMP.
  4. Others: I bought some materials to decorate my LED into a little heart ❤️

Challenges/Problems Encountered:

  1. Working with Json to control Arduino;
  2. Finding effective with api;
  3. Slow reaction from Arduino;
  4. Short time (bc I wanted to finish before semester show, which I did).

Screen Shot 2017-05-23 at 4.03.35 AMScreen Shot 2017-05-23 at 4.04.32 AM

(more pictures and videos need to be uploaded here!!!)

Although this app is still very basic, I have fun creating it. I consider it a cute but meaningful project that worth working on. I truly had a good time when developing web and found my self-value in it.

(Developing_Web)Mobile App Project using API

Link to project and related Arduino code on NAS:        http://192.168.50.184/~ys1664/API_Project/

Impressed in class by the power of REST API from Arduino YUN, I decided to take the chance of my project to further experiment on REST API.

This small fun project is a “B-Box Practicing” application, it simply contains a few buttons to play four tracks of b-box drops. So far I haven”t managed in adding in fancy visual effect using REST API, instead I just introduced in four LED indicators as signaling for different difficulty levels of the b-box drop that’s being playing.

23_05_17_01_51_22

 

Technically speaking I might have over-complicated the process by not directly playing the sound through a mobile’s speaker. However, considering the mobile’s holder might want the sound to populate over all areas with covered by a common wifi, I decided to use YUN as the device of playing the sound and I matched YUN to a USB-driver amplifier for a better B-boxing effect.

The mentioned above has led me to learning how to accessing Arduino YUN’s Linux system for more operations. As a Windows user, I had to reply on some third-party software called “PuTTY” which allowed me to access the system of YUN through SSH(Security Shell). Next, an external package called “madplay” was installed on Arduino YUN through SSH, and after which I was able to use YUN as the sound source.

23_05_17_01_56_38 23_05_17_01_54_14 23_05_17_01_53_40

Besides the time spent on SSH, I also got a better understanding of how YUN’s REST API works through digesting the example code in Bridge.ino. I was trying hard experimenting on different methods in API such as (Process).runShellCommandAsynchronously() and (Process).runAsynchronously() in order to achieve playing multiple sound tracks at the same time, but it might be the cause of package “madplay”, simultaneous playing didn’t work out.

As I have an Arduino YUN back home, I’m gonna spend some time this summer exploring the functionality of REST API, looking forward to get more entertaining potential digged out.

Below is a demo video of this little app, I hope you enjoy 😀

Tyler Roman- Developing Web Final+ Others

It’s that time of year folks, bring you the latest in mass posts, what waits ahead of you are a conglomeration of all things I have accomplished in Developing Web seeing as how I do not think I have managed to do a single documentation since the time we first made our basic web page. This semester I have found documentation to be a struggle and it was not that the work was not done on time it was simply the documentation that wasn’t and thinking back that is truly something foolish to do, and in the future I will endeavor to begin the documentation process as soon as I begin the project itself so both things will end up done around the same time, but anyway without further ado I present “Tyler Develops the World Wide Web of Pokemon and other Miscellaneous things”.

[DevWeb] Saphya&ZZ – The Seven Sentence Stories (Week 14 Collective Post)

The Seven Sentence Stories

192.168.50.184/~zz791/DevWeb_w14-assignment

Idea: A collaborative writing platform, bridging the physical distance and igniting the imaginations of authors around the globe.

 

 

Screen Shot 2017-05-22 at 10.24.32 PM

using ThemeRoller from JQuery Mobile site

Screen Shot 2017-05-22 at 10.38.08 PM

Screen Shot 2017-05-22 at 10.38.36 PM

Front End:

Jquery Mobile Theme Picker

HTML

changeStory(): in order to make the story page dynamically (so that we don’t need to manually create new pages when there’s new story being created), we wrote the function called changeStory() where we built a basic structure(title, sentence, author, and time) that will be autofilled with json data.

showStories(): lists all the stories on the list view page

filterStories(): shows all or shows only certain stories whose titles contain a certain word or phrase that users can type in

storyUpdate(): uses the ‘set-story’ get call to add new row in a ‘p’ tag to that page. Also updates the database.

newStory(): uses the ‘set-story’ get call to add a new row for that story to the php database and updates the list of stories on the main page.

 

Back End:

18697733_1519023128119436_1801275045_o

phpMyAdmin

In phpMyAdmin, we made a new database called “collab_fiction”. In it we have a table called ‘stories’ with columns, ‘id’, ‘dates’, ‘author’, ‘sentence’, and ‘storyid’. In our index.php, we have four ‘get commands’:

‘Set-story’: adds a new row to the table

‘Get-stories’: lists all rows in the table

‘Get-story’: list all the rows under that storyid

‘Story-list’: lists all unique storyids in the table

We use the commands for different javascript functions in our html code.

 

Problems:

Although the story updated instantly, the author list did not update unless you refreshed the page. We tried to fix this by placing the portion of code that controlled the author list within the submit button’s “click” function, but this only generated duplicates. We are still seeking to solve this issue.

Monkey Business – Final Project

For this final project, I paired up with Sidra and started working together with some ideas in mind. Some ideas we suggested were using the limited edition cards from the Bai Qi pockies to make a game, using them to report the weather’s situation of the week, or making an automaton monkey using servos. We decided to do the latter, since we would need to buy many pockies in order to get the cards, which would be somewhat expensive. Regarding on the project, the automaton monkey will move its limbs according to the commands given through a webapp, such commands are dancing, jumping, waving, etc. Since we do not have much time, we decided to break the workload into two parts: the overall skeleton of the monkey connected to the arduino yun, and the code behind the framework of the monkey.

Sidra decided to do the latter, while I did the design for the monkey, even though we ended helping each other in our tasks afterwards. We agreed that the design will be laser cut rather than 3D printed, since that process takes less time. At that time, I pondered how should the monkey “stand” on a surface while it is showing its moves. I thought of some iterations: a pole stuck on the surface connected in the back of the monkey, and a base that connects with the monkey’s tail. I decided to do the latter and made a wooden framework similar to those wooden “do-it-yourself” toys. The monkey would be hanging on its tail on a triangular base with consideration of the monkey’s center of mass. The design is the following: Monkey

After finishing designing the monkey’s framework, I helped Sidra a bit in coding the javascript and arduino for the project. I specifically coded for the words input in the textbox that Sidra has created for the site. The code is meant to read all the text that the user has inputted and to find the relevant words that suggest a command. For example, if the user writes “monkey dance!”, then the code will only identify the word “dance”. Then, the code further encrypts this word into a series of commands for the yun with a switch and case function, such that “dance” will activate pins #13 and #12 (for example) for the yun.

We found out that outputting a combination of digital high and lows to the yun with the javascript can increase the amount of commands that we can code for the monkey; specifically 2^(x), in which x is the amount of digital pins set as an input. Since we were using only 3 pins as an input, the monkey can only recognize a total of 8 commands. However, we only made three commands for the monkey: dance, jump, and wave. How does the yun translates the inputs into movements for the monkey? This translation is done with conditionals, such that a high, low, low combination will activate the different servos in the monkey.

Overall, we had some difficulties such as using non-working servos, having unexpected errors that we later fixed, and burning oneself with hot glue. However, this final project was a great experience to understand how a webapp can communicate with a device outside of its local connection. Here’s the LINK for the site.

IMG_6468

 

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: