add tips blynk

docs/Instruction/tips/blynk.md

+# Blynk IOT
+
+## Setup blynk.cloud
+
+- [site](https://blynk.io/)
+    - sign up tp blynk.cloud
+
+![](../images/blynk/blynk_start.png)  
+
+- activate new device -> Scan QR code in smart phone -> Download and log in
+
+
+- Help ->  Quick start
+![](../images/blynk/blynk_quick_start.png)
+
+![](../images/blynk/blynk_quick_start_1.png)  
+![](../images/blynk/blynk_quick_start_2.png)  
+
+In Arduino IDE, Tools - Manage Libraries... -> Search "Blynk" and Install  
+![](../images/blynk/blynk_quick_start_3.png)  
+
+Enter Wi-Fi SSID and password  
+Download As file and open in Arduino IDE   
+![](../images/blynk/blynk_quick_start_4.png)  
+
+![](../images/blynk/blynk_quick_start_5.png)  
+
+
+[Barduino](https://gitlab.com/fablabbcn-projects/electronics/barduino)  
+![](../images/blynk/barduino.jpg)
+
+!!! note
+    When uploading sketch, use slide switch to **serial bootloader** and press **Reset button**
+
+![](../images/blynk/arduino_setting_barduino.png)
+
+!!! note
+    When running program in ESP32, use slide switch to **execution mode** and press **Reset button**
+
+![](../images/blynk/arduino_serial_monitor.png)
+
+![](../images/blynk/blynk_quick_start_cong.png)
+
+## GPIO pin control
+
+!!! note
+    LED on Barduino is Pin 13
+
+
+```
+/*************************************************************
+
+  This is a simple demo of sending and receiving some data.
+  Be sure to check out other examples!
+ *************************************************************/
+
+// Template ID, Device Name and Auth Token are provided by the Blynk.Cloud
+// See the Device Info tab, or Template settings
+#define BLYNK_TEMPLATE_ID           "TMPL9qywWF1q"
+#define BLYNK_DEVICE_NAME           "Quickstart Device"
+#define BLYNK_AUTH_TOKEN            "tttttooooookkkkkeeeennnn"
+
+
+// Comment this out to disable prints and save space
+#define BLYNK_PRINT Serial
+
+
+#include <WiFi.h>
+#include <WiFiClient.h>
+#include <BlynkSimpleEsp32.h>
+
+char auth[] = BLYNK_AUTH_TOKEN;
+
+// Your WiFi credentials.
+// Set password to "" for open networks.
+char ssid[] = "kannai201";
+char pass[] = "marumie";
+
+BlynkTimer timer;
+
+// This function is called every time the Virtual Pin 0 state changes
+BLYNK_WRITE(V0)
+{
+  // Set incoming value from pin V0 to a variable
+  int value = param.asInt();
+
+  //////////////////////////////////////////////////////////////////////////add
+  if (param.asInt() == 1) {
+    // execute this code if the switch widget is now ON
+    digitalWrite(13, HIGH); // Set digital pin 13 HIGH
+  }
+  else {
+    // execute this code if the switch widget is now OFF
+    digitalWrite(13, LOW); // Set digital pin 13 LOW
+  }
+  ////////////////////////////////////////////////////////////////////////added
+
+  // Update state
+  Blynk.virtualWrite(V1, value);
+}
+
+// This function is called every time the device is connected to the Blynk.Cloud
+BLYNK_CONNECTED()
+{
+  // Change Web Link Button message to "Congratulations!"
+  Blynk.setProperty(V3, "offImageUrl", "https://static-image.nyc3.cdn.digitaloceanspaces.com/general/fte/congratulations.png");
+  Blynk.setProperty(V3, "onImageUrl",  "https://static-image.nyc3.cdn.digitaloceanspaces.com/general/fte/congratulations_pressed.png");
+  Blynk.setProperty(V3, "url", "https://docs.blynk.io/en/getting-started/what-do-i-need-to-blynk/how-quickstart-device-was-made");
+}
+
+// This function sends Arduino's uptime every second to Virtual Pin 2.
+void myTimerEvent()
+{
+  // You can send any value at any time.
+  // Please don't send more that 10 values per second.
+  Blynk.virtualWrite(V2, millis() / 1000);
+}
+
+void setup()
+{
+  // Debug console
+  Serial.begin(115200);
+
+  pinMode(13, OUTPUT); /////////////////////////////////////////////////////add
+
+  Blynk.begin(auth, ssid, pass);
+  // You can also specify server:
+  //Blynk.begin(auth, ssid, pass, "blynk.cloud", 80);
+  //Blynk.begin(auth, ssid, pass, IPAddress(192,168,1,100), 8080);
+
+  // Setup a function to be called every second
+  timer.setInterval(1000L, myTimerEvent);
+}
+
+void loop()
+{
+  Blynk.run();
+  timer.run();
+  // You can inject your own code or combine it with other sketches.
+  // Check other examples on how to communicate with Blynk. Remember
+  // to avoid delay() function!
+}
+```
+
+<video width="600"  controls>
+  <source src="../../images/blynk/output_video.mp4" type="video/mp4">
+</video>

docs/Instruction/tips/svg_js.md

+## title
+
+
+
+
+<div id="div" style="position:absolute;top:0%;height:100%;left:0%;width:100%;text-align:center;">
+<svg id="svg" xmlns="http://www.w3.org/2000/svg" version="1.1"
+   viewBox="0 0 1 1">
+</svg>
+</div>
+<script type="application/javascript">
+//
+// svgline.html
+// Neil Gershenfeld 1/28/17
+// demonstrates drawing SVG lines by animating sin(k*x)/k*x
+//
+var div = document.getElementById("div")
+var height = div.clientHeight
+var width = height
+var svgns = "http://www.w3.org/2000/svg"
+svg = document.getElementById("svg")
+svg.setAttribute("width",width)
+svg.setAttribute("height",height)
+var npts = 1000
+var nloop = 100
+var loop = 1
+var step = 1
+var linewidth = 0.005
+var dtms = 10
+
+window.setInterval("animate()",dtms)
+line = document.createElementNS(svgns,"polyline")
+line.setAttribute("stroke-width",linewidth)
+line.setAttribute("stroke","black")
+line.setAttribute("fill","none")
+svg.appendChild(line)
+f
+unction animate() {
+   var x1,y1,x2,y2,r1,r2
+   var points = ""
+   for (var point= 0; point < npts; ++point) {
+      r1 = 100*(2*point-(npts+1))/(npts*nloop)
+      x1 = point/npts
+      y1 = (1-Math.sin(loop*r1)/(loop*r1))/2
+      r2 = 100*(2*(point+1)-(npts+1))/(npts*nloop)
+      x2 = (point+1)/npts
+      y2 = (1-Math.sin(loop*r2)/(loop*r2))/2
+      points += x1+','+y1+' '+x2+','+y2+' '
+      }
+   line.setAttribute("points",points)
+   loop += step
+   if ((loop == 1) || (loop == nloop))
+      step = -step
+   }
+</script>

docs/Instruction/tips/svg_js_animations.md

+!!! alart
+    This document is only for test
+
+
+
+
+
+<!DOCTYPE html>
+<html>
+<head>
+  <title>SVG.js</title>
+  <script src="https://cdn.jsdelivr.net/npm/@svgdotjs/svg.js@3.0/dist/svg.min.js"></script>
+</head>
+<body>
+var draw = SVG().addTo('body').size(300, 300)
+var rect = draw.rect(100, 100).attr({ fill: '#f06' })
+
+<svg xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" width="300" height="300">
+	<rect width="100" height="100" fill="#f06"></rect>
+</svg>
+
+
+<?xml version="1.0" encoding="utf-8" ?>
+<svg id="drawing" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" >
+  <script type="text/javascript" xlink:href="svg.min.js"></script>
+  <script type="text/javascript">
+    <![CDATA[
+      var draw = SVG('#drawing')
+      draw.rect(100,100).animate().fill('#f03').move(100,100)
+    ]]>
+  </script>
+</svg>
+
+
+</body>
+</html>

docs/Instruction/week14.md

 # 14. Interface and application programming
 
-This week I worked on defining my final project idea and started to getting used to the documentation process.
+## Final presentation
 
-## Research
+- Instructors assign local students in the date from nueval
+- It will open two weeks before the first presentation date
+    - Jun 08 (Wed)
+    - Jun 10 (Fri)
+    - Jun 13 (Mon)
+    - Jun 15 (Wed)
 
-"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
+## Schedule
 
-> "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
+- May 04: interface and application programming
+- May 11: wildcard week
+- May 18: applications and implications
+- May 25: invention, intellectual property, and income
+- Jun 01: project development
+- Jun 08-15: presentation
 
-## Useful links
+## Group Assignment
 
-- [Jekyll](http://jekyll.org)
-- [Google](http://google.com)
-- [Markdown](https://en.wikipedia.org/wiki/Markdown)
-
-## Code Example
-
-Use the three backticks to separate code.
-
-```
-// the setup function runs once when you press reset or power the board
-void setup() {
-  // initialize digital pin LED_BUILTIN as an output.
-  pinMode(LED_BUILTIN, OUTPUT);
-}
-
-// the loop function runs over and over again forever
-void loop() {
-  digitalWrite(LED_BUILTIN, HIGH);   // turn the LED on (HIGH is the voltage level)
-  delay(1000);                       // wait for a second
-  digitalWrite(LED_BUILTIN, LOW);    // turn the LED off by making the voltage LOW
-  delay(1000);                       // wait for a second
-}
-```
-
-## Gallery
-
-![](../images/sample-photo.jpg)
-
-## Video
-
-### From Vimeo
-
-<iframe src="https://player.vimeo.com/video/10048961" width="640" height="480" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
-<p><a href="https://vimeo.com/10048961">Sound Waves</a> from <a href="https://vimeo.com/radarboy">George Gally (Radarboy)</a> on <a href="https://vimeo.com">Vimeo</a>.</p>
-
-### From Youtube
-
-<iframe width="560" height="315" src="https://www.youtube.com/embed/jjNgJFemlC4" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
-
-## 3D Models
-
-<div class="sketchfab-embed-wrapper"><iframe width="640" height="480" src="https://sketchfab.com/models/658c8f8a2f3042c3ad7bdedd83f1c915/embed" frameborder="0" allow="autoplay; fullscreen; vr" mozallowfullscreen="true" webkitallowfullscreen="true"></iframe>
-
-<p style="font-size: 13px; font-weight: normal; margin: 5px; color: #4A4A4A;">
-    <a href="https://sketchfab.com/models/658c8f8a2f3042c3ad7bdedd83f1c915?utm_medium=embed&utm_source=website&utm_campaign=share-popup" target="_blank" style="font-weight: bold; color: #1CAAD9;">Dita&#39;s Gown</a>
-    by <a href="https://sketchfab.com/francisbitontistudio?utm_medium=embed&utm_source=website&utm_campaign=share-popup" target="_blank" style="font-weight: bold; color: #1CAAD9;">Francis Bitonti Studio</a>
-    on <a href="https://sketchfab.com?utm_medium=embed&utm_source=website&utm_campaign=share-popup" target="_blank" style="font-weight: bold; color: #1CAAD9;">Sketchfab</a>
-</p>
-</div>
+>  compare as many tool options as possible