Skip to content
Snippets Groups Projects
Commit f64fc737 authored by yuichitamiya's avatar yuichitamiya
Browse files

add tips blynk

parent c2fc8226
No related branches found
No related tags found
No related merge requests found
Showing
with 254 additions and 54 deletions
docs/Instruction/images/blynk/arduino_serial_monitor.png

234 KiB

docs/Instruction/images/blynk/arduino_setting_barduino.png

938 KiB

docs/Instruction/images/blynk/barduino.jpg

221 KiB

docs/Instruction/images/blynk/blynk_create_new_template.png

181 KiB

docs/Instruction/images/blynk/blynk_firmware_config.png

283 KiB

docs/Instruction/images/blynk/blynk_quick_start.png

204 KiB

docs/Instruction/images/blynk/blynk_quick_start_1.png

239 KiB

docs/Instruction/images/blynk/blynk_quick_start_2.png

254 KiB

docs/Instruction/images/blynk/blynk_quick_start_3.png

287 KiB

docs/Instruction/images/blynk/blynk_quick_start_4.png

457 KiB

docs/Instruction/images/blynk/blynk_quick_start_5.png

307 KiB

docs/Instruction/images/blynk/blynk_quick_start_cong.png

293 KiB

docs/Instruction/images/blynk/blynk_start.png

183 KiB

# 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>
## 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>
!!! 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>
# 14. Interface and application programming # 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) > compare as many tool options as possible
- [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>
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment