Week2-Blur Bookmarklet


Update: this week I try to figure out the why the blur effect didn't wort, and it truns out the external library sequence is wrong so I changed order of them with Cory's help, and it works now :D  -- Febrary 14



This week's assignment--

Make a bookmarklet that works against the user. It might make links harder to see/click (change color, move them around), remove form elements, put image/div on top of page, etc, make it less informative/useful. Interpret this how you like. It can be a bookmarklet that works generically on (most) sites, or one that is tailored for a specific site.

For this week's assignment, I want to make a bookmarklet to make the website difficult to seen by users. At first I want to make the whole page blur (not specific element but whole page) , so I wrapped whole page in a iframe, clear all the original elements in the body. And then I'd like to use external JS or JQuery blur library to make the whole page in a blur effect.


I tried all the libraries mentioned above, unfortunately, none of them works in this case. (seems like the link of JQuery library didn't work)

I use these lines to add external links in bookmarklet



Then I tried to mess up the style by using the iframe overlay on the original page , and insert a zombie picture in the background (maybe try a gif next time). Some website won't allow iframe for security issue like twitter, git hub, stackoverflow... So this bookmarklet may not works on these websites.

Week1-Hacking the browser

This week our assignment is 

Create a “responsive” web page or codepen that responds to some unexpected aspect of the browsing experience. 

I'd like to make a chrome extension- weather radio, which can provide user the weather forecast in real time base on user's geolocation. And the UI will changed base on the different weather. Meanwhile, sounds related to the specific weather will play. 

Next step, I'd like to use css animation to make some animation icon or weather related user interface, hope it can provide more fun.

Live Web Final - Drawing Melody

Online app here: www.manxue-wang.com

I like painting and drawing and I'd like to discover more interactive way of drawing. When I was a middle school student, I remember I was always drawing in the class, even exchange each other's notebooks with my friends, and continue their drawing. I think it will be really fun if I can create an online drawing board that everyone can collaborate drawing together.

After decided making a drawing app online, I start to think about fun interact way which can make the drawing experience more interesting. I think about melody. Music is also a beautiful thing in our life, if I can combine this two elements together, It will be really fun. 

I mapping the piano key to the canvas, and mapping the frequency from low to high based on the canvas width.

When user drawing on the canvas, the notes will start to play, users can play the sound in a note or in a scale by changing their drawing. After that, their drawing will affect by the gravity and wind power in this world, every time the drawing collide the canvas edge, sound play. It like echo, after user drawing the sound, it will have some random echo to generate beautiful harmony witch may give the user some surprise.

The app can be played by multiple people online. users can also see what other users drawing and heard the sound others made in real time.

I'm using P5 to make the drawing function , sound generation and physical effect, using socket.io , Node.js and Express.js to made the server side and make the drawing board can be played by multiple user in real time.




Data Personalization Final - BearPocket

Website link (so far it does't show well on the website, it will be better to see in iphone 6 size)



What data did you decide to work with? Why were you interested in this data?

For the final project, I decided to work on my personal consumption data which I'm dealing with everyday. I found it's really interesting when I first recorded my consumption behavior 2 years ago. It was a 2 weeks trip to Taiwan, and I recorded everything I spent in that period. Then I found even after a few months, every time when I opened my expense notebook in Taiwan, I can still remember clearly how I spent my days in that 2 weeks. I can also remember how's the commodity price there and how's the life different from my hometown. I didn't have so much time to write diary there, but with the expense recording's help, I can even get my daily routine.

After this experience, I have a habit to record how I spend money every day. I know there are some apps to do that, some banks also have their financial recording system to help users record all transactions on their card, but I don't like to use them. First, I feel they cannot record all my expense behavior if I use other bank's card as well. Second, even some products like Mint can record all my card's transactions, they still cannot get the things I bought with cash. Third, the most import one, sometimes I feel Insecurity if the app ask me to leave my credit or debit card info in their system. So I 'd rather to track all expense data by myself. Before making this app, I use Excel to record.

What were your key design considerations?

After I decided to make this expense app, I thought about why I want to make it so bad although there are already a lot of financial recording apps in the market. Then I found these points.

1. I want to record my expense behavior based on map. Because I want to see my daily routine--where I went today, where I'd like to go, where I have a very happy consumption, where I bought an awesome ice-cream that I can recommend  to my friends, and of course, where I don't want to go anymore.

2. I also want to see how I spend by timeline. I want to know about when I usually have meal, when I'd like to have a shopping, when I usually feel satisfy about my consumption. 

3. Simplify the recording process. When I first came here a year ago, I recorded my expense behavior every day, but then I got lazy to record them day by day and now I just record them by month (by seeing the record from my bank and I lost my cash expense data in this way). Recording data day by day is very annoying even if you just record a few transactions by the end of the day. I realized if I'd like to make a usable expense recording app, I must to make the recording process really really simple just like clicking a button. 

So I decided to make the app automatically set the time and geo data for the user, in this way it 'll be dramatically easier for users to record their expense behavior. User can open the App in the shop where they just finish a transaction. Just input the price value and pick a category, then click the button--Finish Recording!

4. Related all my transaction with my emotion. I'd like to track my emotion relationship with my consumption behavior. As you know, most people believe shopping can relieve their pressure while others think consumption makes them more restless. I'd like to see how my emotion changed with my consumption behavior. I'd like to know where is the happiest place I usually have satisfy transaction there; Where is the place I won't go any more; Which shop is AWESOME and I'll go to there again; Which deal is great and make my day.

5. Make the app playable,  friendly and reliable.

What are some of the key technology processes you used? What was interesting or tricky?

To make my app easily record the data, I build an API to record the all my expense behavior.  The APP running on Heroku with MongoDB as database. I also use Amazon Simple Storage Service(Amazon S3) for the image file saving since Heroku cannot save file.I used google map API to track the geo data and show's my geo info on map.

The tricky part for this project are all the things related to time, maybe it caused by I didn't think clearly at the beginning of the project, the logical way or the time data I decided to record is chaos. I'd like the app can automatically set the time and geo data for the user,  but the time which can be readable for user is unreadable for the computer. I also need the data for computer to read and can be used for sort by timeline in a day, month, and year. Maybe it's just caused by I'm not familiar with the time thing and won't be in trouble next time.

For the visual part, actually I haven't start the visual part, just make the thing works at this time, There are lots of things need to do with visual part. I still want to add more data visualization part for the project (See how I spend by month, How much I spent in total of the month, Which category I spent most on, Which is my happiest day, What's my happy point in this month.  )



My model coding is here, here's the thing I want to record by the app

var mongoose = require('mongoose');
var Schema = mongoose.Schema;

var spendSchema= new Schema({
price: Number,
stuffname: String,
category: String,
month: String,
sdate: String, 
spendtime: String,
shop: String,
location: {
geo: { type: [Number], index: { type: '2dsphere', sparse: true } },
name: String
note: String,
url: String,
mood: Number,
timePurchased: Date,
dateAdded : { type: Date, default: Date.now },

module.exports = mongoose.model('Spend',spendSchema);

I use 

/api/create/image (post)   record the data to my database. 

/api/get/:datePurchased (get)   this is for getting the data by special date

/api/get  (get)      this is for getting all transaction

/api/get/:id (get)    getting a transaction

/api/update/:id (post)   update one transaction

/api/delete/:id  (get)  delete one transaction

/api/search  (get)  search data by different key words.

Design Part

Where else could you see this project going?

I'm still working on the project,  It has a lot of things to do actually.

1. I want to make the map more playable, it will be more fun if the pin is the bear's head with different emotions and color, you can get the idea by a glance on the map-- where you have the transaction, what's you moods like in that moment and what category.

2. Provide more info analyze on the index page (so far the index is the input form.) I'd like to add more data visualize things.

3. Change the visual style for the app. (Put the bear as the main character for the app )

4. Think about if putting the app to multiple users (add account and login,sign up)

5. Have a place for user to set their daily expense goal. 

6.Make it responsive and can be seen correct in different browser and device



Week6 Data Personalization- Some Ideas

For this week's data personalization class, we ask to think about some ideas about the database we 'd like to make. At first, I'd like to make a healthy meal plan app that people can make, collect their meal plan (basic on how many calories and nutritions they had for a meal, and they can also see how other people have for their meal. ) It's more useful for group of people who want to keep healthy or keep fit.


The second idea is what in my bag. People can collect bag's data, what they bring when they work, shopping or study. What they bring if they want to have a trip to other place. They can remember what they bring with them, what the things they like to use, the stories behind the things and they may also know how about  other people's bag.

Other ideas based on the second one is how to keep my room clean and neat (you 'll ask to tidy up you stuff on you desk or closet or bookcase) and keep the things you thinks most important for you and keep it in the database. Tidy things is really really a good habit especially when you are living in the city like Manhattan.

Also have an idea about 21 day habit, like you collect the time you do something and grow it as a habit. Haven't think it clearly. 

Or I'm also think about collecting some thing about people's shopping habit.. but it's too personality, I'm not sure if there are people like to collect this kind of data in public.

Live web midterm proposal

For the midterm, I have bunch of ideas. At first I want to do some thing with face tracking and Video chatting. I think it will be interesting if you talk with familiar friends with unfamiliar faces, and it may also affect the way and the things you are talking about.  

Here are some ideas,  for the fifth idea, for example, I'd like to use face tracking library to track people 's face, and detect users' emotion score during the conversation. And also calculate how long he's speaking. If he speak too much or he's getting angry, his head will change to a wolf head or a tiger head. If he has a very happy mood and like listening to others, his face will change to a rabbit or other kind animal's head. I want to use a visual way to translate people's relationship during a conversation. Sometimes we may not have any ideas that we are too ambitious or a little bit impolite in a conversation. This application may help us correct our attitude and change bad emotions in a conversation and help building healthy relationship.

The tricky part for this idea is face tracking won't be reliable all the time, sometime it may have wrong result, and it will affect the experience. And another part is there is noway to calculate people's speaking time. But I like this idea so much..

Another idea I like so much is I want to build a collaborate drawing game, and everything you drew on the canvas can generate notes(music), Other user's drawing elements can have interaction with yours. Every elements in that world have rigid body and have gravity and may also collide with other elements. Every time they collide each other, sound generated.



Week5 Traceroute Map

Twitter and Instagram are the social medias people always and always use, so this week I asked my friends who live in different place help me to collect their all router path to get Twitter and Instagram. And I'd like to know how's the physical Intnet path It would be.

At first I ask them use yougetsignal.com to collect their Traceroute and send me the screenshot and the info they get from the site.

I asked 5 friends-->

Alice from Australia

Tianxiao from France

Sabrina from Pittsburgh


Matt from Florida

Cicillia from Seattle

Include myself from NewYork


At first I'm so surprised all the lines are very different, even though they are going to the same target. And then I save all the infos they get to a JSON file, and use IP TRACKER and IP LOCATION to find each IP address's physical location.  Then I show this data on the map with amMap's help to see their physical way directly.

I compared their times of HOPS, times to get the target website, and the distance to get the target website. I found usually long distance means long time, but some times also need to consider you intnet's speed. And at first, I think more Hops means long distance and long time, but I totally wrong, someone with high hops value got on the target website so quickly, I think maybe mane hops also means high communication quality in you website.


Low Energy Challenge

In Networked Sensor For Development class, Our group's challenge is RUN IT OFF BATTERY --"It should run off of a rechargeable battery. Charged only once for at least 2 weeks."

After discussing about the topic we are more interested in, we discovered that there are many developing countries are suffering from  the bad air quality and environment pollution. Most of this kind of  health threatening are lurking in people's daily life. Obsolete cooking equipment and burning coal in door to keep warm are main sources of pollution in their home. People are usually  unaware of the danger because they do not know how bad it is. So our group decided to make a low energy indoor  air pollution tester to help these people detect the air pollution in their home and arouse their attention to this health threats.

After research, we discover that cooking and heating is the most common indoor combustion behavior. Air pollutants from a gas stove , electric stove, heaters, fireplaces and other equipment burning wood, coal , oil , gas and other produce mainly pollutants like carbon monoxide, nitric oxide and nitrogen dioxide. 

Therefore we decided use MQ-7 carbon monoxide sensor and dust sensor to detect the air pollution. The low energy strategy for our project is using a solar panel as energy resource, plus we also use an homemade low energy Arduino instead Arduino UNO to save more electricity.

Building Time

We build each part separately , first, we build a breadboard Arduino at first, then we use Arduino UNO to test if dust sensor and gas sensor works well. And Finally, we put this three parts together.

For the breadboard Arduino, we used

  • Breadboard
  • ATmega328p
  • An Arduino Board
  • A LED
  • 10k resistor (optional)
  • 0.1uF capacitor
  • USB-Serial adapter (FTDI)
  • Jumper wire
  • Wire strippers/snippers

Dust sensor part

       We used 

  • Arduino 
  • Sharp Optical Dust Sensor – Datasheet
  • 6-pin TE 1.5mm pitch connector cable 
  • 220 uF Capacitor
  • 150 Ω Resistor
  • Breadboard
  • M/M jumper cables

Pins Assignments

Sharp Dust Sensor                        Attached To

1 (V-LED)                                       3.3V Pin (150 Ohm in between)

2 (LED-GND)                                 GND Pin

3 (LED)                                          Digital Pin 12

4 (S-GND)                                      GND Pin

5 (Vo)                                             Analog Pin A6

6 (Vcc)                                           3.3V Pin (Direct)

At first, we connect the sensor with 3.3V on Arduino UNO, but the data received is not accurate and inconsistent. then we found  we cannot reach the maximum using the 3.3V input on the Arduino. Then we used a extra 9V battery and a regulator to input 5V to the Arduino. And we can receive more reliable data in this way

Gas Sensor Part

  • 1x Arduino (I was using an Arduino Uno) 
  • 1x MQ-7 Carbon Monoxide Sensor 
  • 1x Breadboard 
  • Connecting wire 
  • 1x 10K Resistor
  • 1x 220 Resistor
  • Soldering Iron + Wire
  • +5V Power supply


This part is a tricky part for us. After connect the circuit, the data cannot read consistently, and the data always jump. Then we found The MQ7 requires a heater voltage that cycles between 5v (60s) and 1.4v (90s), drawing approximately 150mA at 5v which exceeds the power capacity of the Uno. 

So, we change the loop in our code like

void loop() {
  // 60s high voltage 5.0v
  Serial.println( "Heating Sensor" );
  analogWrite(triggerPin, 255);  
  // 90s low voltage 1.4v
  analogWrite(triggerPin, 67);
  val = analogRead( sensorPin );  
  for ( counter = 0; counter < 90; counter++ )
    Serial.print("Sensor Value: ");

Unfortunately , The problem didn't solve by this code, We need more time to deal with this guy, we find a good tutorial to follow, and we hope we can get correct data in this way. Therefore, we assemble the dust sensor with homemade low energy board at first.

Assemble part:

We assemble the dust sensor with homemade low energy board together, and used three LED to show the air quality. If air quality is good (data from 0-300) Green LED light up.If air quality is even (data from 300-600) Yellow LED light up. If air quality is bad (data more than 600) Red LED light up.

We also add Sleep model for their board. We added the JeeLib libraries in our code, and  replaced the delay() function with the Sleepy function. We made an experiment, It showed it can save a lot of energy by changing delay() to sleepy function. If we use delay() function, the current is 0.03-0.02, occasionally 0.04 appeared. And if we changed to sleepy function, the current is only 0.02-0.01.

    Arcade Game in Process (4.1 - 4.15)

    This week and last week, Xi and I focus on the over all design and the fabrication things of our game. We tried BIG MONSTER CNC... It's difficult to get well with... but it's really powerful. It's so hard and we spent a lot of time on fabrication , but we still feel happy about we are starting to have some progress. The only awful  thing is the stuff we cut all Saturday has been thrown since shop clean all the things on last Sunday...(The ridiculous thing is we stick our name on them and put them in exactly right place.. We think they just thought our pieces of things were so weird and ignored them..)

    First, we discuss the game mechanics. We decided  to make multiple player game which is available for 1-4 people play at the same time. Basically, is a shooting game. Player' s goal is controlling their robot , shooting the mountains, and get as more candy as they can.(Some candy hidden in the hills, giant hill need be shot several times, but may hidden more candy.) When there are multiple player play the game, they can shot each other, the stroked robot will get freeze and a candy he has grabbed will get back to the space. When there are 4 players, players will be separated to two group. When you team member get freeze, you can save him by running to him and just touching him.

    And here is the things we need to figure out in next 3 weeks.

    Fabrication in this two weeks

    Since we decide to make a multiple player Arcade game, it present we are having a lot of thing to do. We have borrow the monitor from ER, it's quite small only 22inch(The biggest one we can borrow ). So we need to design our Arcade based on the small size screen and limit the whole size of our Arcade. We also do a lot of user test on the floor, hoping we have the best table height for most people.

    Here is the design sketch of the Arcade game.

    Then Xi made cabinet models in Vectorworks.

    And then we cut all the things in CNC.

    Proposal about Agricultural problem

    This week, I focused on the research of current agriculture problem in China.

    China is the most populars country in the world,  it has 1.3 billion people, almost22% of world population. However, the available land for China is only7% of the global land. It's undoubtedly that Agriculture in China are confronting big challenges. 

    After research on related material, I found there are some main problem in China's Agriculture.

    First. Climate Monitoring.

    Farmers in China don't have technology way to monitor Climate, Most of them rely on their experience. Even if high technology can make climate monitoring get more  accurate,it's still  unpractical to apply generally in rural China. Climate Monitoring should be low energy less expense, and as accurate as possible.

    In  thunen institute, they use Unmanned Aerial Vehicle to take pictures of the field , and  by analyzing chromatographic, they can then determine the estimated time of harvest , identify plant diseases and estimate yield of the field.

    Second . Weather Forecast.

    Weather Forecast is also important for the agriculture, It can avoid unnecessary loss of the field. Farmers need to received signals of weather , and make decision according to the weather change.

    Third . Shortage of Labor.

    Nowadays, Farmers in China don't so rely on their own land , cause land cannot give them much profit than working in urban city. More and more Young people in countryside chose to live their home to live and work in cities. The shortage of labor is another problem in China.

    Forth. Different duration of crops.

    Different Crops have different durations, how to make a plenty use of soil based on planting different crops in different time of the year. How to plant them scientifically is also a challenge.

    My idea  is  to use multiple sensor(humility, temperature, different gas) monitor the cultivation environment, this data will send to agricultural  experts group to let them analyze the data. And then they will give technical advice to farmers to help them make plan. Also , there are sensors to monitor weather situation, and by analyzing the data, they may send the alert and informations to farmer to help them plant crops in correct time and  hire the labor before busy season.





    Week7 Midterm Project- BLEVU


    After we attended Don Coleman's BLE workshop, Karthik and I wanted to utilize the knowledge to explore indoor navigation. After brainstorming on the idea, we wanted to make an indoor navigation/information system for the visually impaired to guide them through a predefined indoor space.

    We imagined the solution to be more of 'providing important information at the right time' than an actual navigation system that puts the user on a map. We imagined a smartphone app that listens to BLE beacons placed in strategic positions to navigate a space. To elucidate, if the a user is to be guided in a subway station, the app could inform the user (through voice) if he/she is approaching a flight of stairs or a turnstile, based on multiple beacons placed strategically.

    To test our concept, we made a basic app that listens to the beacons kept on a linear passage (shown in the image below). We placed three TI SensorTags separated by about 10 feet in linear fashion. We worked out the logic to figure out roughly where the phone is. It is based on listening to the signal strength from the three beacons and approximating where the user is by tracking the changing signal strengths and values. The signal strength logic is also shown in the image below (36,40 and 58 are the S/N of three beacons we used). 

    At first, we want to found the special UUID for each SensorTag. However, me meet big problem in this step, since iPhone won't show UUID .(ID keep changing every time on iPhone, but won't change in Android.) We need find the special ID for each Sensor Tag.

    The video below shows the discovery of all devices within range. It uses Don Coleman's BLE plugin.

    After finding the special ID for each SensorTag , We analyze the strength of the signal and calculate the direction and the location of the users. So far we just use three sensor Tag to test if  the logic is correct.

    The video on the top demonstrates the trial app that approximates where the user is heading. The voice is for demonstration only and is yet to be incorporated into the app. Going forward, we want to try the same with Estimote beacon to test out if the signal strength is more stable. We want to improve on the algorithm to make it more reliable. Also, we would be incorporating the voice into the app. 

    The bigger picture is to create a platform that could be used to deploy this navigation system to various indoor spaces to help the visually impaired.




    Midterm - Game and Game Controller

    My game is a multiple player game. So far for the Midterm, I made only one player just to make sure the logic flow is correct. It's a story about some robots are trapped in mountains , and they should  dig the mouton and find as much candy as they can.

    Basically, robot spins all the time. Player can control it stop spinning and start to walk. Also, Player can control the robot shot mountains or other robot.

    I made all materials in Cinema 4D , I like low-poly style so much, so I try this style in my game.

    For the controller, I want to use two BIG buttons because I like the press feelings. However, too big buttons means big controllers, so I consider to make a suitable shape to help people easily hold it and control it.