描述

沒有靜態(tài)IP？沒問題。一步一步，我們將在樹莓派上搭建VPN、網(wǎng)絡(luò)服務(wù)器和HC-SR04超聲波距離傳感器。

最終效果演示

所需的硬件和軟件

• 樹莓派與 Raspbian
• HC-SR04超聲波距離傳感器
• 3x 1kΩ 電阻器（或 1x1kΩ 1x2kΩ）
• 電纜
• Husarnet VPN
• 阿帕奇
• RPi.GPIO Python 庫(kù)
• jQuery（獲取 jQuery CDN 的鏈接）

我正在安裝大部分軟件。

如果覺得本教程中的代碼片段難以閱讀，請(qǐng)查看本文的 Github 版本（它們的片段格式更好，支持更多語(yǔ)言）。存儲(chǔ)庫(kù)鏈接在此文本的底部。

組裝電路

如您所見，我們需要使用一些電阻來降低電壓，因?yàn)楦哂?3.3V 的電壓可能會(huì)損壞 RPi，傳感器將無法正常工作。

Husarnet VPN

我們的目標(biāo)是能夠從任何地方讀取數(shù)據(jù)，因此我們現(xiàn)在需要設(shè)置 VPN。該解決方案更安全，因?yàn)槲覀儾粫?huì)將設(shè)備暴露在開放的互聯(lián)網(wǎng)流量中。

我假設(shè)您已經(jīng)在https://husarnet.com/ 創(chuàng)建了一個(gè)帳戶。

如果是這樣，讓我們??創(chuàng)建一個(gè)網(wǎng)絡(luò)并添加我們的設(shè)備。

1.在 RPi 以及其他設(shè)備（例如您的計(jì)算機(jī)）上安裝 Husarnet 客戶端，以便您稍后可以顯示該網(wǎng)站。要安裝客戶端，請(qǐng)使用以下命令：

curl https://install.husarnet.com/install.sh | sudo bash

安裝過程完成后，建議重啟Husarnet：

sudo systemctl restart husarnet

2.登錄https://app.husarnet.com/，點(diǎn)擊創(chuàng)建網(wǎng)絡(luò)，成功完成該過程后，在網(wǎng)絡(luò)面板中點(diǎn)擊添加元素。

3.點(diǎn)擊后會(huì)彈出一個(gè)菜單。如您所見，有很多選項(xiàng)可用于將設(shè)備添加到網(wǎng)絡(luò)。其中最普遍的是使用*加入代碼*。復(fù)制它并繼續(xù)到 RPi 上的命令行。

sudo husarnet join  

設(shè)置易于記憶的設(shè)備名稱是個(gè)好主意，因?yàn)槟院罂梢允褂盟鼈兌皇情L(zhǎng)而難看的 IPv6 地址。

4. 對(duì)要添加到網(wǎng)絡(luò)的所有其他設(shè)備執(zhí)行相同操作。

成功配置的網(wǎng)絡(luò)應(yīng)該與此類似：

您現(xiàn)在可以通過 ping 設(shè)備來測(cè)試您的網(wǎng)絡(luò)是否正常工作。

例如，在我的筆記本電腦設(shè)備上，我會(huì)運(yùn)行：

ping6 -c 5 rasp

向rasp發(fā)送 5 個(gè) ping 。

傳感器軟件

所有代碼都可以在本頁(yè)底部列出的我的存儲(chǔ)庫(kù)中找到。

在開始編寫代碼之前，我們需要安裝 RPi.GPIO。這非常簡(jiǎn)單：

pip3 install RPi.GPIO

互聯(lián)網(wǎng)上有很多可用于 HC-SR04 的代碼示例。

在本例中，我們將使用以下 python3 程序：

import RPi.GPIO as GPIO
import time

GPIO.setmode(GPIO.BCM)
TRIG = 23
ECHO =24

GPIO.setup(TRIG, GPIO.OUT)
GPIO.setup(ECHO, GPIO.IN)
file = '/var/www/html/data.txt'

try:
while True:
    GPIO.output(TRIG,False)
    time.sleep(0.1)
    GPIO.output(TRIG, True)
    time.sleep(0.0001)
    GPIO.output(TRIG, False)

    while GPIO.input(ECHO) == 0:
        pulse_start = time.time()

    while GPIO.input(ECHO) == 1:
        pulse_end = time.time()

    pulse_duration = pulse_end - pulse_start
    dist = pulse_duration * 17150
    dist = round(dist, 2)

    print("distance:", dist, end='\r', flush=True)
    with open(file,'w') as f:
        f.write(str(dist))

except KeyboardInterrupt:
    print("cleanup")
    GPIO.cleanup()

我強(qiáng)烈建議你玩一下 first 的持續(xù)時(shí)間，time.sleep這樣你的刷新率就不錯(cuò)了，而且你不會(huì)遇到很多錯(cuò)誤。對(duì)我來說，~10Hz 的刷新率非常好。

如您所見，我們只是將計(jì)算出的距離保存在 Apache 目錄中的 .txt 文件中。這是迄今為止我能想到的訪問傳感器數(shù)據(jù)的最簡(jiǎn)單方法，而無需編寫精美的后端服務(wù)。

要在 Raspberry Pi 上安裝和啟用 Apache，請(qǐng)執(zhí)行以下操作：

sudo apt update
sudo apt install apache2 -y

安裝后，您可以重新啟動(dòng) Apache 以確保服務(wù)正常運(yùn)行：

sudo service apache2 restart

執(zhí)行類似的命令

curl localhost

應(yīng)該會(huì)得到默認(rèn)的 Apache index.html 頁(yè)面。

網(wǎng)站

現(xiàn)在我們有了一個(gè)可以從中獲取數(shù)據(jù)的工作界面，我們可以繼續(xù)將其呈現(xiàn)給用戶。為此，我們需要 jQuery 和一些基本的 CSS/JS。

檢索傳感器數(shù)據(jù)

讓我們從從文本文件中動(dòng)態(tài)提取數(shù)據(jù)開始。假設(shè)我們將每秒刷新一次數(shù)據(jù)。

<script>
    var hostname = document.location.origin;
    var interval = 100; // it's reasonable to set this to the same value as the refresh rate of the sensor
    function get_data() {
        $.ajax({
            url: hostname+"/data.txt",
            type: "GET",
            dataType : "text",
            success: function(data){
                d = document.getElementById('sensor-data');
                d.innerHTML = data;
                bar.set_value(data);
            setTimeout(function(){
            get_data();
            }, interval);
            }
        });
    }
get_data();
script>

我們正在使用 AJAX，它是 jQuery 庫(kù)的一個(gè)組件，用于動(dòng)態(tài)請(qǐng)求和刷新數(shù)據(jù)，而無需重新加載頁(yè)面。現(xiàn)在，不要擔(dān)心從 geElementById 開始的三行，我們稍后會(huì)談到。

我們的函數(shù) get_data 只是向```/data.txt``` 發(fā)出請(qǐng)求，這是我們傳感器數(shù)據(jù)的目錄。```setTimeout``` 構(gòu)造設(shè)置了一個(gè)早先定義的間隔（100ms），之后整個(gè)函數(shù)邏輯被重復(fù)。

顯示數(shù)據(jù)

現(xiàn)在讓我們繪制一個(gè)進(jìn)度條。我們將從定義 3 個(gè) div 開始。

<div class="progress-bar">
    <div class="result" id ="sensor-data">div>
    <div class = "progress-bar-fill">div>
div>

我們將快速對(duì)其進(jìn)行樣式設(shè)置，以便將數(shù)據(jù)很好地呈現(xiàn)給用戶（最后將 css 移動(dòng)到外部文件中）。

<style>
.progress-bar{
    width: 100%;
    height: 200px;
    border: 1px solid black;
    position: relative;
}
.progress-bar-fill{
    height: 100%;
    background: lightblue;
    transition: width 0.5s;
}
.result{
    position: absolute;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 40px;
    font-family: sans-serif;
}
style>

我們現(xiàn)在需要編寫一些 Javascript 代碼來改變進(jìn)度條填充 div 的長(zhǎng)度。長(zhǎng)話短說，我們要更改寬度樣式參數(shù)（值從 0-100%）。

為此，我們將編寫一個(gè)名為 ProgressBar 的類（當(dāng)然是在腳本標(biāo)簽內(nèi)）。

class ProgressBar{
    constructor(element, intial_value){
        this.value_elem = element.querySelector('.result');
        this.fill_elem = element.querySelector('.progress-bar-fill');
        this.set_value(intial_value);
    }
    set_value(new_value){
        this.value_scaled = new_value * 0.25; //100% of the bar is now 400cm, scaled for better visibility
        //0.25=100% * 1/400
        this.value = new_value;
        if (this.value_scaled < 0) {
            this.value_scaled = 0;
        }
        if (this.value_scaled > 100) {
            this.value_scaled = 100;
        }
        this.update();
    }
    update(){
        const percentage = this.value_scaled + '%';
        this.fill_elem.style.width = percentage;
        this.value_elem.textContent = this.value + 'cm';
    }
}
bar = new ProgressBar(document.querySelector('.progress-bar'), 200);

此類的構(gòu)造函數(shù)將樣式元素 (*progress-bar-fill* div) 和初始進(jìn)度條值作為參數(shù)。初始值并不重要，因?yàn)樗鼤?huì)立即被我們的代碼更改。

如果您仔細(xì)觀察，您會(huì)注意到我已經(jīng)初始化了 ProgressBar 類 ( bar ) 的一個(gè)實(shí)例。這與之前的片段之一（在get_data函數(shù)內(nèi)）中出現(xiàn)的變量相同。

我們的類有兩個(gè)方法。第一個(gè)是 set_value ，它將以厘米為單位的距離縮放為 % (0-100)。我選擇將值縮放到 400cm，即 100%，但理論上你可以一直到 4000cm，因?yàn)檫@是 HC-SR04 的最大范圍。第二種方法是更新。這設(shè)置了我們 div 的實(shí)際寬度。

距離限制

現(xiàn)在讓我們通過添加一些動(dòng)態(tài)功能來增強(qiáng)我們的網(wǎng)站 - 瀏覽器選項(xiàng)卡中的通知和可調(diào)整的閾值，它將確定我們是否距離傳感器足夠遠(yuǎn)。

首先，我們應(yīng)該在文檔中添加幾個(gè) div（就在 *progress-bar* 下方）：

<div style="margin-top: 200px; width: 100%; text-align: center">
    

id="info"> Threshold slider

div> <div class="slidecontainer" style="margin-top: 50px;"> "range" min="1" max="100" value="50" class="slider" id="myRange"> div> <div id="slider-value">div>

我還設(shè)置了 div 的樣式，以便它們?cè)诰W(wǎng)站上看起來更好。

為避免代碼混亂，我們應(yīng)該拆分文件。創(chuàng)建一個(gè)名為style的目錄，并在該目錄中創(chuàng)建一個(gè)文件 slider.css。這是slider.css的代碼：

.slidecontainer {
    width: 100%;
}
.slider {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 25px;
    background: #d3d3d3;
    outline: none;
    opacity: 0.7;
    -webkit-transition: .2s;
    transition: opacity .2s;
}
.slider:hover {
    opacity: 1;
}
.slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 25px;
    height: 25px;
    background: #4CAF50;
    cursor: pointer;
}
.slider::-moz-range-thumb {
    width: 25px;
    height: 25px;
    background: #4CAF50;
    cursor: pointer;
}

為了使滑塊工作，我們需要添加一些用于動(dòng)態(tài)更新的 Javascript。

var slider = document.getElementById("myRange");
var output = document.getElementById("slider-value");
// Display the default slider value
output.innerHTML = "Current threshold value: " + slider.value*4 + "cm";
// Update the current value
slider.oninput = function() {
    output.innerHTML = "Current threshold value: " + this.value*4 + "cm";
}

我在bar（提醒：存儲(chǔ)庫(kù)的源文件中提供完整代碼）的初始化下添加了此代碼。

好的，還有一件事要做 - 瀏覽器標(biāo)簽通知。在瀏覽器的頂部，在我們的網(wǎng)站選項(xiàng)卡中，我們希望有類似的內(nèi)容：favicon:(distance) Page title 。

要實(shí)現(xiàn)動(dòng)態(tài)favicon的效果，我們需要編寫一個(gè)Javascript函數(shù)：

function set_favicon(happy) {
    icon = 'img/happy.ico';
    if (!happy){
    icon = 'img/angry.ico';
}

var link = document.createElement('link');
var old_link = document.getElementById('favicon');

link.id = 'favicon';
link.rel = 'icon';
link.href = icon;

if (old_link){
    document.head.removeChild(old_link);
}

document.head.appendChild(link);
}

我們將有兩個(gè)可能的網(wǎng)站圖標(biāo) - 憤怒和快樂（由快樂參數(shù)確定）。

您可以從我的存儲(chǔ)庫(kù)下載圖標(biāo)。如您所見，我在/var/www/htmlimg 中創(chuàng)建了一個(gè)新目錄，用于存儲(chǔ)圖標(biāo)。代碼非常簡(jiǎn)單——我們確定要使用哪個(gè)圖標(biāo)，我們創(chuàng)建一個(gè)鏈接元素，檢查一個(gè)是否已經(jīng)存在并用一個(gè)新的替換它。

我們現(xiàn)在需要回到我們的好老朋友那里get_data做一些調(diào)整：

function get_data() {
    $.ajax({
        url: hostname+"/data.txt",
        type: "GET",
        dataType : "text",
        success: function(data){
        d = document.getElementById('sensor-data');
        d.innerHTML = data;
        bar.set_value(data);
//changes start here
        if (slider.value*4 > data){
            document.getElementById('info').innerHTML = "Move away";
            document.getElementById('bar-fill').style.backgroundColor = "red";
            set_favicon(false);
        } else{
            document.getElementById('info').innerHTML = "OK";
            document.getElementById('bar-fill').style.backgroundColor = "#4CAF50";
        set_favicon(true);
        }
        setTimeout(function(){
            get_data();
        }, interval);
    }
    });
}

if 語(yǔ)句確定是否超過了閾值，并取決于我們是否被通知（通過一個(gè)憤怒的表情符號(hào)和一個(gè)微妙的后退提示）我們離得太近或被告知我們的距離是合適的。

滑塊值乘以 4，因?yàn)榛瑝K被設(shè)計(jì)為具有 0-100 的值（有點(diǎn)像進(jìn)度條），如前所述，我已確定 400 厘米為最大范圍。

最后一點(diǎn)：這是可選的，但看起來很酷——讓我們讓進(jìn)度條在超過閾值時(shí)改變顏色。這只是兩行代碼（上面的片段）。

就是這樣！

我們現(xiàn)在可以測(cè)試我們的網(wǎng)站了。再一次，所有放在一個(gè)文件中的 HTML/JS 片段都可以在存儲(chǔ)庫(kù)中使用（get.html文件，記得將其復(fù)制到/var/www/html目錄）。

在您的 RPi 上，運(yùn)行讀取傳感器數(shù)據(jù)的 python 腳本。在腳本所在的目錄中運(yùn)行：

sudo python3 script.py

現(xiàn)在您可以在您的計(jì)算機(jī)上打開該網(wǎng)站 -

我們?nèi)グ桑?/font>

?

?

?