陳煥 IOT 作業
===
###### tags: `大學必修-筆記`

## hw2 App Inventor 2 控制家電

* hc 05 是一個藍芽控制模組，可以讓手機用藍芽的方法來和 arduino 連結
* 首先我們要先來了解 hc 05 這塊板子
### 板子介紹
* hc 05 一共有 4 個接腳
* RX
* TX
* Vcc -> 電源輸入
* GND -> 接地
* RX TX 的部分是用來連接 arduino
* hc 05 的 RX 要接 arduino 的 TX
* hc 05 的 TX 要接 arduino 的 RX
* 接著試著把 hc 05 板子接到 arduino 上面
### 如何接 arduino
* 如圖片所示
* TX 接 RX、RX 接 TX
* Vcc 接 3.3v
* GND 接地
---
* 當 hc 05 板子發出紅色的燈號時
* 你的藍芽就已經成功接到 arduino 上了囉
### 藍芽設定
* 把藍芽接上 arduino 後
* 接下來我們要來做一些基本設定
* 到 auduino IDE 寫入下列的程式

// 定義連接藍牙模組的序列埠
SoftwareSerial BT(8, 9); // 接收腳, 傳送腳
char val;  // 儲存接收資料的變數
 
void setup() {
  Serial.begin(9600);   // 與電腦序列埠連線
  Serial.println("BT is ready!");
 
  // 設定HC-05藍牙模組，AT命令模式的連線速率。
  BT.begin(38400);
}
 
void loop() {
  // 若收到「序列埠監控視窗」的資料，則送到藍牙模組
  if (Serial.available()) {
    val = Serial.read();
    BT.print(val);
  }
 
  // 若收到藍牙模組的資料，則送到「序列埠監控視窗」
  if (BT.available()) {
    val = BT.read();
    Serial.print(val);
  }
}

* 程式上傳完畢後，打開「序列埠監控視窗」
* 輸入 AT 命令看看
* 如果回應 ok 那就代表我們成功透過藍芽去跟 RC 05 溝通了
* 我們也可以用 AT+NAME 這個指令來改變藍芽的名稱
* 而在手機上就可以在藍芽介面上找到剛剛設定的名稱
* 輸入 0000 或 1234 預設密碼
* 就可以用手機連上 HC 05 囉
---
* 接下來我們要使用 app inventer 寫一個簡單的開關燈程式
* 使用簡單的 app 來和 hc 05 的藍芽連結

### APP Inventer 2
* 使用APP Inventer 建立使用者介面
* 由左方選取要用的原件，再至右方細維調整圖示、文字等
* 程式運作部分，到右上方BLOCKS區塊編寫

* 起始整個介面需要用到的物件，首先只開啟BT_LIST按鈕，其他按鈕先鎖著

* 將可連接到的藍芽顯示在LIST中(AddressAndNames 會自己找出目前連接的藍芽)
* 以下是手機上顯示的圖

* 選擇到指定的藍芽時，會將BT_LIST按鍵功能鎖上，只留開關燈或斷開連結按鈕
* 傳送藍芽訊號，發出 O 時，燈會開啟；反之 X 則會關閉
* 若按到的是斷開按鍵，則將開關按鈕都關閉，只留BT_LIST (代表需要重新連接)
* 以下是手機上顯示的圖

* 與google搭配的語音辨識功能，從SpeechRecognizer取得辨識出的語音(GetText)
* 若辨識出來是"open"，則會透過藍芽傳送 O 即開啟LED。
* 若辨識出來是"off"，則會透過藍芽傳送 X 即關閉LED。

### Arduino code
* 控制arduino與藍芽模組互傳訊息(先看傳送是否有字串，若有則讀取並印出)
* 讀取輸入的訊息，有傳送東西，若是O則控制13腳位的LED亮起:若是X則將LED關閉
* 非這兩者，則輸出ignore
---
* 下面是最後的結果
* 原本 LED 燈是暗的
* 按下手機開燈按扭後 LED 燈開了

## hw3 WiFi Communication
* 這一週我們要來學什麼是 wemos wifi 模組 & 濕度感應器
* 如何使用 database 來和 wemos 溝通

### 什麼是 wemos
* wemos 是一個 wifi 模組
* 可以讓 arduino 連上 wifi

### 在 arduino 上面設定 wemos
1. 設定 esp8266
* 最上面的檔案 -> 偏好設定
* 在下面額外的開發板管理員網址
* 輸入 http://arduino.esp8266.com/stable/package_esp8266com_index.json
* 
* 安裝ESP8266開發版
* 
* 在搜尋列裡面輸入 esp 找到下面的之後
* 安裝 2.6.3 版本
* 
2. 設定 wemos
* 設定 wemos d1 r1 設定版
* 
* 打開 Wifi 的範列程式
* 
* 按上傳
* 
* 按右上角的打開序列埠監控視窗
* 
* 如果是亂碼的話要把鮑率改為 115200 buad
* 最後出現下列 Wifi 表的話就代表成功連到 Wifi 囉
* 

3. 下載 DHT11 溫濕度感應 Library
* 
* 下載版本 1.2.3
* 
* 寫入下面的程式
* 
* 測試執行後如果出現下面的畫面的話就代表成功了！
* 

### 什麼是 database
* database 中文叫資料庫
* 是一個可以存放外面感測器收集來的資料
* 有需要的時候可以隨時拿出來使用
* 現在我們要來用 sql 這個資料庫來實作

### database 來和 wemos 溝通
1. 首先我們先來打開服務
* 先打開 xampp
* 在 Apache 和 mySQL 的地方按下 start
* 
* 這樣資料庫服務就已經成功開起來了
---
2. 接著要新增使用者
* 輸入網址 localhost/phpmyadmin
* 
* 接著輸以下資料新增使用者
* (使用者名稱、密碼可以自己命名)
* 
* 接著再創建一個本機端帳號
* 
* 做完後全部的使用者應該會長這個樣
* 

---
3. 接著要新增資料庫
* 點選最上面的「資料庫」
* 把資料庫的名稱設定成 lightdatabase
* 並且選擇 uft8_unicode_ci
* 
* 在最上面 table 的地方設定 table 名稱 light
* 並且後面欄位數打 5
* 最後按照下面把資料輸入進去
* database 新增完成囉
---
4. wemos 連接 database
* 最後我們要來把剛剛完成的 wemos 連接在 sql database 上面
* 我們先在 C://xampp/htdocs 中新增一個 addData.php
* 裡面新增下面程式

<?php
    // 設定 database 連接
    $host = "127.0.0.1";
    $user = "localhost";
    $pass = "mushding";

    $databaseName = "lightdatabase";
    $tableName = "light";
    
    // 與 database 連接
    $con = mysqli_connect($host, $user, $pass, $databaseName);
    
    // 取得網址參數資料
    if ($_GET["h"] || $_GET["t"]){
        $humi = $_GET['h'];
        $temp = $_GET['t'];

        // 把網址資料寫進 database 中
        $sql = "insert into $tableName (humi, temp) VALUES (".$humi.", ".$temp.")";
        $result = mysqli_query($con, $sql);
    }
?>

---
* 接著在瀏覽器輸入下列網址
* http://localhost/addData.php?t=30&h=24.6&l=48
* 回去設定網址如果可以看到下面畫面的話
* 就代表你成功連到 database 了
* 
* 最後還需要修改 wemos 上面的 code
* 改成這樣
* 
---
* 最後來檢查一下
* 可以看到我們成功新增資料了！
* 
* 

## hw4 AIOT web
### 匯入上次做好的資料庫
* 這一次我們要把資料庫中的資料放到前端
* 我們去 ilearning 上面下載之前已經做好的 sensors.sql 檔案
* 去 localhost/phpmyadmin 按上面的匯入
* 
* 選擇之前做好的 sensor.sql
* 
* 如果沒檔案或是已經忘了的話可以回去看第三次作業的教學喔
* 成功新增後就可以看到下面多了一個 sensors 的 table
* 
### 使用 getData 取得 database 中的資料
* 現在我們的 database 已經架好了
* 我們要用 php 把 database 中的資料取出來
* 我們在 C:/xampp/htdos 目錄中新增一個 getData.php
* 
* 在 getData.php 檔案中新增下面的 code

<?php
// 設定 database 連接
$servername = "127.0.0.1";
$username = "localhost";
$password = "mushding";
$dbname = "lightdatabase";
$tablename = "sensors";

// Create connection
$conn = new mysqli($servername, $username, $password, $dbname);

// Check connection
if ($conn->connect_error) {
    die("Connection failed: " . $conn->connect_error);
}

// 選擇選出的 query
$sql = "SELECT * FROM $tablename";
$result = $conn->query($sql);

// 這裡的值是每一行每一行取出
$data;
$i=0;
while($row = $result -> fetch_array(MYSQLI_NUM)){
	$data[$i]=$row;
	$i++;
}

// 把結果印出來
echo json_encode($data);
$conn->close();
?>

* 可以在網址中輸入 localhost/getData.php
* 如果出現下面的輸出結果就代表成功從 database 中取到資料囉
* 

### 寫一個簡單的 html 以及使用 highchar 把資料變成圖片
* 我們從資料庫取出檔案後
* 我們可以更進一步把資料畫成圖
* 讓我們可以更一目了然資料的結構
* 在 C:/xampp/htdos 中新增一個 index.html 把下列程式放進去

<html>
<head>
    <--->import jquery 以及 highcharts</--->
    <meta charset="UTF-8" />
    <title>Highcharts</title>
    <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    <script src="http://code.highcharts.com/highcharts.js"></script>
</head>
<body>
    <div id="container" style="width: 550px; height: 400px; margin: 0 auto"></div>
    <script language="JavaScript">
        $(document).ready( function() {
            var  val =[];
            var time =[]; 
            var humi = [];
            $.ajax({
                url:"getData.php",
                data:"",
                dataType:"json",
                success: function (data){
                var windowSize =30;
                for(var i=data.length-windowSize; i<data.length;i++){
                    time.push(data[i][1]);
                    val.push(parseInt(data[i][4]));
                    humi.push(parseInt(data[i][3]));
                }   
                console.log(time)
                console.log(val)
                highchartInit(val, time, humi);
                }
            }); 
        });
    
        function highchartInit(val, time, humi) {
           var title = {
               text: '月平均氣溫'   
           };
           var subtitle = {
                text: 'Source: runoob.com'
           };
           var xAxis = {
               categories: time
           };
           var yAxis = {
              title: {
                 text: 'Temperature (\xB0C)'
              },
              plotLines: [{
                 value: 0,
                 width: 1,
                 color: '#808080'
              }]
           };   
        
           var tooltip = {
              valueSuffix: '\xB0C'
           }
        
           var legend = {
              layout: 'vertical',
              align: 'right',
              verticalAlign: 'middle',
              borderWidth: 0
           };
        
           var series =  [
              {
                  name: 'val',
                  data: val,
              },
              {
                  name: 'humi',
                  data: humi,
              }
           ];
        
           var json = {};
        
           json.title = title;
           json.subtitle = subtitle;
           json.xAxis = xAxis;
           json.yAxis = yAxis;
           json.tooltip = tooltip;
           json.legend = legend;
           json.series = series;
        
           $('#container').highcharts(json);
        };
    </script>
</body>
</html>

* 特別注意這個部分
* 這個部份是去跟 getData.php 把資料中取出來
* 並且把 data array 中的值一個個放進 time var ... array 中

$(document).ready( function() {
            var  val =[];
            var time =[]; 
            var humi = [];
            $.ajax({
                url:"getData.php",
                data:"",
                dataType:"json",
                success: function (data){
                var windowSize =30;
                for(var i=data.length-windowSize; i<data.length;i++){
                    time.push(data[i][1]);
                    val.push(parseInt(data[i][4]));
                    humi.push(parseInt(data[i][3]));
                }   
                console.log(time)
                console.log(val)
                highchartInit(val, time, humi);
                }
            }); 
        });

* 以下是出來的結果
* 
* 也可以修變這邊把結果變成只輸出一個

var series =  [
   {
       name: 'val',
       data: val,
   },
   // {
   //     name: 'humi',
   //     data: humi,
   // }
];

* 
* 也可以…變三個…？

var series =  [
   {
       name: 'val',
       data: val,
   },
   {
       name: 'humi',
       data: humi,
   },
   {
       name: 'light',
       data: light,
   }
];

* 

## hw5 PyMySQL 教案 增加功能
* 接下來我們要把圖表套入新的版型
* 以及使用 pyEA.py 將資料做個簡單的分類
* 以下教程跟 hw4 步驟一樣
### 匯入上次做好的資料庫
* 這一次我們要把資料庫中的資料放到前端
* 我們去 ilearning 上面下載之前已經做好的 sensors.sql 檔案
* 去 localhost/phpmyadmin 按上面的匯入
* 
* 選擇之前做好的 sensor.sql
* 
* 如果沒檔案或是已經忘了的話可以回去看第三次作業的教學喔
* 成功新增後就可以看到下面多了一個 sensors 的 table
* 
### 使用 getData 取得 database 中的資料
* 現在我們的 database 已經架好了
* 我們要用 php 把 database 中的資料取出來
* 我們在 C:/xampp/htdos 目錄中新增一個 getData.php
* 
* 在 getData.php 檔案中新增下面的 code

<?php
// 設定 database 連接
$servername = "127.0.0.1";
$username = "localhost";
$password = "mushding";
$dbname = "lightdatabase";
$tablename = "sensors";

// Create connection
$conn = new mysqli($servername, $username, $password, $dbname);

// Check connection
if ($conn->connect_error) {
    die("Connection failed: " . $conn->connect_error);
}

// 選擇選出的 query
$sql = "SELECT * FROM $tablename";
$result = $conn->query($sql);

// 這裡的值是每一行每一行取出
$data;
$i=0;
while($row = $result -> fetch_array(MYSQLI_NUM)){
	$data[$i]=$row;
	$i++;
}

// 把結果印出來
echo json_encode($data);
$conn->close();
?>

* 可以在網址中輸入 localhost/getData.php
* 如果出現下面的輸出結果就代表成功從 database 中取到資料囉
* 

### 查看網頁
* 我們在網址中輸入 localhost/index.html
* 可以看到我們成功把資料放到前端中
* 而且也可以看到上面有紅/綠的點
* 做到這一步就代表資料庫及前端都設置成功囉！

### 套入 myEA.py
* 接下來我們要將資料進行一個簡單的分類
* 將所有 value 大於 300 的值改成綠色的
* 將所有 value 小於 300 的值改成紅色的
* 首先我們先把載下來的 myEA.py 及 training.csv 放入 xampp/htdocs 中
* 記得將裡面資料庫設定改成我們剛剛設定的

myserver ="localhost"
myuser="mushding"
mypassword="mushding"
mydb="sensors"
 
conn = pymysql.connect(host=myserver,user=myuser, passwd=mypassword, db=mydb)

* 接著打開任何 IDE 執行

python myEA.py

* 接著就可以看到下面畫面
* 就代表資料成功訓練完，而且結果也重新放進資料庫中囉
* 這時我們再回去看 localhost/index.html
* 就可以看到我們的圖表成功分類

### 套入版型
* 我們從 https://startbootstrap.com/themes/sb-admin-2/ 下載好別人已經寫好的版型
* 下載完後把所有的檔案都放到 xampp/htdocs 中
* 找到 js/demo/chart-area-demo.js
* 把 31 行以下的 code 改成

var val = []
var time = []
var humi = []

$.ajax({
  url:"getData.php",
  data:"",
  dataType:"json",
  success: function (data){
    var windowSize = 30
    for (var i = data.length-windowSize; i<data.length;i++){
      time.push(data[i][1])
      val.push(parseInt(data[i][4]))
      humi.push(parseInt(data[i][3]))
    }
  }
})

// Area Chart Example
var ctx = document.getElementById("myAreaChart");
var myLineChart = new Chart(ctx, {
  type: 'line',
  data: {
    labels: time,
    datasets: [{
      label: "Earnings",
      lineTension: 0.3,
      backgroundColor: "rgba(78, 115, 223, 0.05)",
      borderColor: "rgba(78, 115, 223, 1)",
      pointRadius: 3,
      pointBackgroundColor: "rgba(78, 115, 223, 1)",
      pointBorderColor: "rgba(78, 115, 223, 1)",
      pointHoverRadius: 3,
      pointHoverBackgroundColor: "rgba(78, 115, 223, 1)",
      pointHoverBorderColor: "rgba(78, 115, 223, 1)",
      pointHitRadius: 10,
      pointBorderWidth: 2,
      
      data: humi,
    }],
  },
});

* 再回去 index.html 把 \<body\> 改成

<body>
	<div class="card-body">
		<div class="chart-area">
		  	<canvas id="myAreaChart" style="width: 60%; height: 30%;"></canvas>
		</div>
	</div>

	<button onclick="canceal()">canceal charts</button>

	<!-- Bootstrap core JavaScript-->
	<script src="vendor/jquery/jquery.min.js"></script>
	<script src="vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
  
	<!-- Core plugin JavaScript-->
	<script src="vendor/jquery-easing/jquery.easing.min.js"></script>
  
	<!-- Custom scripts for all pages-->
	<script src="js/sb-admin-2.min.js"></script>
  
	<!-- Page level plugins -->
	<script src="vendor/chart.js/Chart.min.js"></script>
  
	<!-- Page level custom scripts -->
	<script src="js/demo/chart-area-demo.js"></script>
	<script src="js/demo/chart-pie-demo.js"></script>
</body>

* 新增完後回去看 localhost/index.html 就可以發現我們的圖表換成新的樣子
* 有點太大了，把它弄小一點
* 在 canvas 的後面加 style="width: 60%; height: 30%;"
* 在這張圖底下新增一個小小功能
* 把這個圖表弄不見！
* 新增一個 button
* 按下去之後圖就不見了
* code 在這裡

<script>
function canceal(){
			var x = document.getElementById("myAreaChart");
			if (x.style.display === "none") {
				x.style.display = "block";
			} else {
				x.style.display = "none";
			}
		}
</script>

<body>
	<button onclick="canceal()">canceal charts</button>
</body>

## hw6 Django 套上hw5結果
### 檔案路徑
### 修改 setting.py
* 首先把 aiot 資料夾裡面的 urls.py 修改成以下這樣
* 加入了登入的網址(accounts/login)，以及模版的網址(accounts/profile)
* 這邊使用的是 django 裡面內建的 django.contrib.auth 函式庫
* 可以快速方便的創建一個登入網頁
* 記得要把 setting.py 中
* 的 django.middleware.csrf.CsrfViewMiddleware 註解掉
* 以及 django.contrib.auth.middleware.AuthenticationMiddleware 打開
* 以及把 STATIC_URL 改成 /static/
* 因為這樣 js 以及 css 的路徑才會是正確的
* 才能套上我們在網路上下載的模版
### 新增一個使用者
* 首先要登入 admin 後台管理
* 先關掉 server，在 command line 中輸入

python3 manage.py createsuperuser

* 帳號先以admin，信箱設為[e-mail]，密碼設為aa000000
* 創建完後就可以再次啟動伺服器，輸入「127.0.0.1:8000/admin」就會開啟admin登入畫面
* 接著新增一個使用者，帳密自訂就行了
* 到目前為止我們就已經新增好了一個使用者了
* 等等我們就要用這個 user 來登入我們另外寫的網頁
### 加入登入畫面 html
* 在highcharts的 view.py 中新增 url.py 中對應的 function
* 一個 login 以及一個 logout
* 
* 
* 當 user 沒有登入時回傳 sign.html
* 當 user 成功登入後則回傳 /account/profile
* 當 user 登出後回傳 /highchart
---
* 接著在 templates 資料中新增一個 registration 資料夾
* 接著在 registration 資料夾新增 login.html
* login.html 新增：
* 我們就完了登入介面囉！
### 套上模版
* 接著我們要來新增登入後的畫面
* 首先我們先把上一次作業的成果貼上來

$(document).ready(function() {
    $.ajax({
        type: "POST",
        url: "/highchartData/",
        async: 'asynchronous',
        data: {
            csrfmiddlewaretoken: '{{ csrf_token }}',
        },
        dataType:"json",
        success: (data) => {
            val = data['value']
            time = data['time']
            status = data['status']
            highchartinit(val, time, status);
        }
    })
    return false;
})
function highchartinit(val, time, status){
    let val_sl = val.slice(0, 50);
    let time_sl = time.slice(0, 50);
    var ctx = document.getElementById("myAreaChart");
    var myLineChart = new Chart(ctx, {
      type: 'line',
      data: {
        labels: time_sl,
        datasets: [{
          label: "Earnings",
          lineTension: 0.3,
          backgroundColor: "rgba(78, 115, 223, 0.05)",
          borderColor: "rgba(78, 115, 223, 1)",
          pointRadius: 3,
          pointBackgroundColor: "rgba(78, 115, 223, 1)",
          pointBorderColor: "rgba(78, 115, 223, 1)",
          pointHoverRadius: 3,
          pointHoverBackgroundColor: "rgba(78, 115, 223, 1)",
          pointHoverBorderColor: "rgba(78, 115, 223, 1)",
          pointHitRadius: 10,
          pointBorderWidth: 2,
          data: val_sl,
        }],
      },
    });
}

* 把這個 js 檔放進 static 資料中
* 接著回到 view.py 中新增一個 highchart
* 負責回傳 index.html，同時負責回傳從資料庫的資料
* 在 index.html 的最一面新增一個
* 最後一步修改 index.html 中 link 以及 script 中的位置
* 改成到 /static 中
* 也可以加上這一行
* 這麼一來就能將圖表套上模板並在左上角也會多出使用者已登入的字樣
* 最後我們登入後的畫面就做完囉
* 有成功從資料庫拿到資料，也成功的套上了模版