Week 2 – HTML

Leave a reply

STUDY NOTES

<meta charset=”UTF-8″> 
UTF-8 is a character encoding system. It lets you represent characters as ASCII text, while still allowing for international characters, such as Chinese characters.

<meta http-equiv=”X-UA-Compatible” content=”IE=edge”>

The X-UA-Compatible meta tag allows web authors to choose what version of Internet Explorer the page should be rendered as.

<metaname=”viewport”content=”width=device-width, initial-scale=1.0″>
control the viewport’s size and shape.

div VS. span
<span> element which is used to color a part of a text:
<p>My mother has <span style=”color:blue”>blue</span> eyes.</p>

W2-1-1

 

Review of the last week’s assignment

This week I tried another 2 sensors, consisting of 2 values and 10 values respectively. At first, I was confused about how to handle the JSON format and I asked Tom. He told me the correct format for multiple values and I tried to modify the sketch. It worked. I could read the specific multi-values on the web. 
2--1 from the 10-channel light and color sensor

For the color sensor, the F1 value shows “READING1” rather than a numeric value at the beginning. I have figured out that the choice of names shouldn’t nest with each other. “READING1” is part of “READING10”.

2--2 from the VL 6180 distance sensor

 

Build your own dashboard

This week, I want to try visualizing the data reading on the web. I try to use the potentiometer to control the opacity of the circle. Apparently, the reading (excluding the name, only numeric values) from the device has shown on the web, but the opacity hasn’t changed. I used [docuemnt.getElementById().style.opacity], which I tried with another sketch (manually assigned value) was working.

Question 1: Why it’s not working with the potentiometer?
Answer： It hasn’t read the latest data. In this case, should use [array]. Mqtt could fix it.

Potentiometer sketch
2--4

Another sketch (manually assigned value)
2--5

Question 2: Why values were still shown on the web without the [document.getElementById(result).innerHTML]?
Answer： May read the file in another place, it can check on the web, check the “original code”.

And I guess it is because of the braces with the numerical reading. So I erase it, there are only numbers on the web. But the opacity effect is not work. One tricky thing I found here is if I command the document.getElementById(result).innerHTML, the values are still shown on the web. As the image, I have shown below. It makes me so confused.

2--6

 

 

 

 

 

 

 

 

 

 

 

 

 

Week 2 – 5 of something

Leave a reply

Be honest to say I am super confused at the beginning about what kind of thing I choose to make. Since the amount of it should be FIVE, I don’t want to make anything that is useless and take up space. I start to hang out in my apartment, truly the space is not that kind of big to discover. Even I began to map out my daily routine in my room, and think about whether there is something that could help my lifestyle habits, but it is missing.

One idea came to my mind, I really like to wear rings and basically have a set combination of wearing them. However, all of my rings are currently in a storage box, and finding them takes a long time. Maybe I need small ring organizers that can store three to five rings. That way, I’ll have 5 sets of rings for my typical wear.

Since the structure of the ring organizer is quietly similar to the box that was assigned last week. I observe the box I made last week and find the inside bottom of the box is uneven and has a fairly deep hole since the middle of the drill is super sharp. Even though it’s fine to use but looks not good.
w2--10 

So I think about splitting the bottom and wall and then sticking them together to ensure the flat inside. Below is my initial sketch for the ring organizer. The interior needs to be spacious enough to store a few rings and still accommodate 5 objects stacked on top of each other.

W2--11

In the beginning, I sand the straight angles of the wood to make sure each piece of wood block could be fitted together perfectly and sticks well at a later stage. But I found that perfectly sawing such a thick block into slices is not easy work. It’s hard to avoid the out-of-straight and the loss of wood sawing surface. There is a tiny gap between the 2 pieces.
w2--9 w2--6

Afterward, I choose a suitable size of drill to make the interior space of the organizer. I draw the auxiliary lines to help me drill the center position but I have to say it helps but is not obvious. 😂 One thing I found here was since the piece is not thick the drill may crack it if you push it quickly, a slow drilling is a better option. I drilled and cracked a piece, but I forgot to take a picture.
w2--8 w2--7

After I want to stick to the theme I choose, the “squircle”, and I cannot accept that the circular space is not in the middle. I try to use a sander to reshape it. 
w2--5  w2--3

The iterated sketch is shown below.
W2--12

Finally, I still sand it with sandpaper to make it more smooth. I’ve put the ring in and it looks good！

Final Output
w2--2

Sketch for Sander
w2--13

 

 

 

 

Week2 – Sensor Research

Leave a reply

VL6180X Time of Flight Distance Sensor

Miaoye and I choose the VL6180X TOF distance sensor as our research target.

Description:

Instead of estimating the distance by measuring the amount of light reflected back from the object (which is significantly influenced by color and surface), the VL6180X precisely measures the time the light takes to travel to the nearest object and reflect back to the sensor (Time-of-Flight). Since it uses a very narrow light source, it is good for determining the distance of only the surface directly in front of it, the ‘cone’ of sensing is very narrow.

A three-in-one ready-to-use reflowable package: Combining an IR emitter, a range sensor, and an ambient light sensor. 

2-2

Datasheet:

Proximity and ambient light sensing (ALS) module

You can find the datasheet here

Ranging: from 0 to 100mm
[0-100mm(precise measuring), 0-200mm(also could be detected)]

Ambient light sensor: < 1 Lux up to 100kLux; 16-bit output; 8 manual gain settings

Operating voltage: Functional range(2.6 to 3.0V); Optimum range(2.7 to 2.9V)
[Since the chip uses 2.8 VDC, we have included a voltage regulator on board that will take 3-5VDC and safely convert it down. ]

Operating voltage: Functional range(-20 to 70°C ); Optimum range(-10 to 60°C)

 

Strengths & Weakness:

Strengths:

  1. Precise reading for the short distance, suitable for any object to be played with hand.
  2. Sensitive reading, simple to use in any circumstance requiring a captured moment.
  3. Ultra-low power operation, measurements can be automatically performed at user-defined intervals. 

Weakness:

  1. Only detect the object precisely in front of the sensor, but NOT for the nearby objects.2-1
  2. VL6180X does NOT have reverse voltage protection. The sensor will be unresponsive and cannot be detected if you make the mistake of reversing the GND and Vin pins.
  3. The readings are inaccurate when the object is TOO close to the sensor. When my finger is fully pressed on the sensor, it reads 20mm. Miaoye tried her sensor, which read around 10mm for the same scene.

 

Reference:

https://electronics.stackexchange.com/questions/583800/are-there-any-laser-sensors-that-have-a-high-accuracy-at-200-400-mm-with-low-las

https://forums.adafruit.com/viewtopic.php?f=19&p=621355

https://learn.adafruit.com/adafruit-vl6180x-time-of-flight-micro-lidar-distance-sensor-breakout

 

 

 

 

 

 

Week 1 – Intangible Interaction Among Us

Leave a reply

Efrat and I choose the Automatic Toothbrush as our research target. 

Observation & Research

1-4

Ideation of “Brushwash”

We decided to focus our project around the automatic toothbrush.  It has come to our attention that the process required from the user today is long, exhaustive, floppy and sometimes even dangerous. The classic “Oral-B” model that can be found today at most shops, requires multiple different actions for the each of the three main functions of the brush:
1- The portable charger that comes with the brush (that can be risky due to it’s electric connection) isn’t very convenient to the user. It usually requires a lot of special attention and isn’t very manageable in most scenarios.
2- The brush-cleaning process requires a lot of manual action, usually the user would be required to use another device for that, such as the sink. This is exactly the same behavior you would assume with the normal brush, therefore we thought it isn’t sufficient.
3- The brush itself is pretty heavy and doesn’t have any object to ground it or any other applicable option to put it in place.
We also thought that the whole combination of water, electricity and mechanical movement is not a very friendly one for the user, and should be avoided at all costs. 

In our solution to these problems, we decided to come up with a “one for all” device that would function as a “service station” for all the functions that are needed. In the same way that a car wash, or a dishwasher delivers the service in one physical space, the same should be for the toothbrush, to make it more efficient and thorough. This will allow better cleaning, better safety and also preserve the battery life and overall mechanical condition of all devices.

The technologies that the Brushwash may adopt:
1- Ultrasonic cleaning for the wash.
2- UV light for disinfection.
3- Ventilating system for drying.
4- Magnetic charging.

1-2   1-3   1-1

1-5 1-7 1-6

 

 

 

 

 

 

Week 1 – Box

Leave a reply

Learn to use the 4 machines: Bandsaw, Sliding Compound Miter Saw, Drill press, Sander

I initially envisioned making a box consisting of six sides, but I found it difficult to get the exact dimensions by cutting.

w1--5 BEFORE

So I decided to make a jewelry organizer in the way that Phil demonstrated in the last class.

Cut to get an ideal size, drill the holes, cut out the lid, and dig the holes inside.

w1--1

Sanding the inside of the box, it didn’t work very well because the sanding head with sandpaper has out of stock.

w1--2

Finally smoothed out the edges of the box with a sander and sandpaper.w1--3 w1--4 

w1--6AFTER

Theme:

The theme I wanted was probably something with a sense of line, not sharp, but rounded.