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.
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>
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.
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”.
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
Another sketch (manually assigned value)
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.
