疫情防控常態化的今天，像我一樣的應屆畢業生大多面臨著“畢業即失業”的壓力，但咱們也不能因此停止學習。這不，為了提高自己的敲代碼能力，突發奇想能不能遠程敲代碼做實驗？
說干就干，經過一番折騰，終于實作了用樹莓派遠程開發51單片機。
專案原件清單
1.用來遠程連接的樹莓派3B（已經吃灰很久了….）
2.執行程式的51開發板；
3.顯示影像的攝像頭（翻出了一個10年前的老USB攝像頭…）
4.內網穿透工具花生殼；
5.一些繼電器（是不是猜不到這個是干嘛的，先保密）
專案流程
雖然樹莓派可以通過vnc進行遠程桌面，但喜歡折騰的我怎么能甘心必須安裝客戶端呢？這絕對不行！！！所以我選擇了帶有html5決議vnc協議的novnc，遠程部分ok。
51單片機的編譯軟體我選擇的是sdcc進行編譯，編譯后會出現hex檔案，但對于很多朋友來說這還不夠，hex格式的檔案還是很大，我們要用bin！！！大家可以使用Hex2bin來進行轉換，okok現在就剩下串口下載了，我們來解決遠程下載，這里我選擇的是開源的stcgal進行燒寫。
最后我們再來看看遠程攝像頭，遠程攝像頭的方案就有很多了，這里我選擇的是motion。
分析完了就讓我們擼起袖子加油干吧！
1. 燒錄完成系統后，老規矩來給樹莓派更換國內源；
sudo cp /etc/apt/sources.list /etc/apt/sources.list.bak
sudo cp /etc/apt/sources.list.d/raspi.list /etc/apt/sources.list.d/raspi.list.bak
修改軟體更新源，執行如下命令：
sudo vi /etc/apt/sources.list
按i進入編輯模式，改成清華的軟體源地址，按ESC退出，然后 :x 回車保存退出。
deb http://mirror.tuna.tsinghua.edu.cn/raspbian/raspbian/ buster main contrib non-free rpi
deb-src http://mirror.tuna.tsinghua.edu.cn/raspbian/raspbian/ buster main contrib non-free rpi
修改系統更新源，執行如下命令：
sudo vi /etc/apt/sources.list.d/raspi.list
將原鏡像用#號注釋掉，然后插入清華的系統源地址，保存退出：
deb http://mirror.tuna.tsinghua.edu.cn/raspberrypi/ buster main ui
同步更新源及更新軟體包，執行如下命令：
sudo apt-get update
sudo apt-get upgrade
2. 更換完成源以后，開啟樹莓派自帶的開啟VNC
在終端輸入以下命令進入配置界面。
sudo raspi-config
依次操作：Interfacing Options -> VNC -> Yes。之后系統會提示你是否要安裝 VNC 服務，輸入 y 之后回車，等待系統自動下載安裝完成，如果祖師爺還是愛我們的話應該已經開啟成功了。
穩妥起見我們還是來查看本地是否安裝了vncserver（其實就是看看上面祖師爺有沒有顯靈）
whereis vncserver
如果沒有請手動安裝
yum install -y tigervnc-server
如果按照成功了就看這里哦
使用下面的命令來運行vnc
vncserver
此時會要求輸入密碼。這里需要注意：
The VNC server will run in the background. The port that it runs on is the display number + 5900 (i.e. 5901 in the case above).
意思就是當你執行vncserver :1設定為1時，下面要運行VNC是的埠號應該是5900+1，那就是5901，VNC的默認埠是5900。
3. 安裝novnc
#安裝git
sudo apt-get install git
#獲取novnc的原始碼
git clone https://github.com/kanaka/noVNC
進入novnc的目錄
cd noVNC
運行novnc（第一次運行的時候會下載一個埠轉發的程式可能需要一些時間）
./utils/launch.sh --vnc localhost:5901
4. 安裝51開發環境
這里的開發環境依賴python3，需要確保已安裝python3， pip3.
如果沒有下載pip3請下載安裝
安裝sdcc
sudo apt-get install sdcc
編譯程式例子：
sdcc 1.c
安裝hex2bin（如果是不是專業開發者感覺可以不安裝）
百度網盤分享地址：
鏈接：https://pan.baidu.com/s/1iky8HsB-nVn1p5J3EzB8NQ
提取碼：tg3v
安裝pyserial
sudo pip3 install pyserial
安裝stcgal
pip3 install stcgal
測驗
stcgal -h
#下載程式樣例（建議完成安裝ch340后在進行下載測驗）
stcgal 1.ihx
5. 樹莓派安裝CH340驅動
驅動下載官方網址（linux版本）
http://www.wch.cn/download/CH341SER_LINUX_ZIP.html
cd 進入檔案夾
安裝依賴環境
sudo apt-get install linux-headers
修改make檔案
打開ch34x.c原始碼，添加#include <linux/sched/signal.h>，并注釋掉waitqueuet wait
編譯并加載驅動
make
make load
6. 安裝usb攝像頭監控界面
sudo apt-get install motion
然后打開 motion daemon 守護行程，讓他可以一直在后臺運行：
sudo nano /etc/default/motion
＃no修改成yes:
start_motion_daemon=yes
修改motion的組態檔：
sudo vim /etc/motion/motion.conf
#deamon off 改成 on
deamon on
#設定解析度
width 800
height 600
#關閉 localhost 的限制
webcam_localhost off
然后運行 motion：
sudo motion
現在我們的攝像頭已經變成了一臺網路攝像頭。在chrome瀏覽器下訪問 http://[your.domain]:8081 即可看到攝像頭當前拍攝的畫面。
7. 簡單修改novnc界面
在onvnc原始碼的app目錄下面添加camera檔案夾
這里是jq的一個小插件實作了一個可以拖動的小框框
鏈接：https://pan.baidu.com/s/1VZSh14pUXK36NcxrYTM1-A
提取碼：swk9
最后修改vnc.html檔案讓我們把攝像頭和遠程界面合二為一
<!DOCTYPE html>
<html lang="en" class="noVNC_loading">
<head>
<!--
noVNC example: simple example using default UI
Copyright (C) 2019 The noVNC Authors
noVNC is licensed under the MPL 2.0 (see LICENSE.txt)
This file is licensed under the 2-Clause BSD license (see LICENSE.txt).
Connect parameters are provided in query string:
http://example.com/?host=HOST&port=PORT&encrypt=1
or the fragment:
http://example.com/#host=HOST&port=PORT&encrypt=1
-->
<title>noVNC</title>
<meta charset="utf-8">
<!-- Icons (see app/images/icons/Makefile for what the sizes are for) -->
<link rel="icon" sizes="16x16" type="image/png" href="https://img.uj5u.com/2021/03/16/169277160322431.png">
<link rel="icon" sizes="24x24" type="image/png" href="https://img.uj5u.com/2021/03/16/169277160322432.png">
<link rel="icon" sizes="32x32" type="image/png" href="https://img.uj5u.com/2021/03/16/169277160322433.png">
<link rel="icon" sizes="48x48" type="image/png" href="https://img.uj5u.com/2021/03/16/169277160322434.png">
<link rel="icon" sizes="60x60" type="image/png" href="https://img.uj5u.com/2021/03/16/169277160322435.png">
<link rel="icon" sizes="64x64" type="image/png" href="https://img.uj5u.com/2021/03/16/169277160322436.png">
<link rel="icon" sizes="72x72" type="image/png" href="https://img.uj5u.com/2021/03/16/169277160322437.png">
<link rel="icon" sizes="76x76" type="image/png" href="https://img.uj5u.com/2021/03/16/169277160322438.png">
<link rel="icon" sizes="96x96" type="image/png" href="https://img.uj5u.com/2021/03/16/169277160322439.png">
<link rel="icon" sizes="120x120" type="image/png" href="https://img.uj5u.com/2021/03/16/1692771603224310.png">
<link rel="icon" sizes="144x144" type="image/png" href="https://img.uj5u.com/2021/03/16/1692771603224311.png">
<link rel="icon" sizes="152x152" type="image/png" href="https://img.uj5u.com/2021/03/16/1692771603224312.png">
<link rel="icon" sizes="192x192" type="image/png" href="https://img.uj5u.com/2021/03/16/1692771603224313.png">
<!-- Firefox currently mishandles SVG, see #1419039
<link rel="icon" sizes="any" type="image/svg+xml" href="https://bbs.csdn.net/topics/app/images/icons/novnc-icon.svg">
-->
<!-- Repeated last so that legacy handling will pick this -->
<link rel="icon" sizes="16x16" type="image/png" href="https://img.uj5u.com/2021/03/16/169277160322431.png">
<!-- Apple iOS Safari settings -->
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<!-- Home Screen Icons (favourites and bookmarks use the normal icons) -->
<link rel="apple-touch-icon" sizes="60x60" type="image/png" href="https://img.uj5u.com/2021/03/16/169277160322435.png">
<link rel="apple-touch-icon" sizes="76x76" type="image/png" href="https://img.uj5u.com/2021/03/16/169277160322438.png">
<link rel="apple-touch-icon" sizes="120x120" type="image/png" href="https://img.uj5u.com/2021/03/16/1692771603224310.png">
<link rel="apple-touch-icon" sizes="152x152" type="image/png" href="https://img.uj5u.com/2021/03/16/1692771603224312.png">
<!-- Stylesheets -->
<link rel="stylesheet" href="https://bbs.csdn.net/topics/app/styles/base.css">
<script src="https://bbs.csdn.net/topics/app/error-handler.js"></script>
<script type="module" crossorigin="anonymous" src="https://bbs.csdn.net/topics/app/ui.js"></script>
<link rel="stylesheet" type="text/css" href="https://bbs.csdn.net/topics/app/camera/css/normalize.css" />
<link href="https://bbs.csdn.net/topics/app/camera/src/css/interactive.css" rel="stylesheet" />
<style>
html, body {
width: 100%;
height: 100%;
background-color: gainsboro;
}
.content {
margin: 10px;
}
#element {
height: 280px;
width: 340px;
top: 240px;
left: 240px;
background-color: #82ABC0;
}
</style>
</head>
<body>
<!-- 攝像頭顯示框-->
<div id="element" name="Close false">
<div class="content">
<img style="-webkit-user-select: none;margin: auto;" src="http://192.168.3.208:8081/">
</div>
</div>
<div id="noVNC_fallback_error" class="noVNC_center">
<div>
<div>noVNC encountered an error:</div>
<br>
<div id="noVNC_fallback_errormsg"></div>
</div>
</div>
<!-- noVNC Control Bar -->
<div id="noVNC_control_bar_anchor" class="noVNC_vcenter">
<div id="noVNC_control_bar">
<div id="noVNC_control_bar_handle" title="Hide/Show the control bar"><div></div></div>
<div class="noVNC_scroll">
<h1 class="noVNC_logo" translate="no"><span>no</span><br>VNC</h1>
<!-- Drag/Pan the viewport -->
<input type="image" alt="Drag" src="https://bbs.csdn.net/topics/app/images/drag.svg"
id="noVNC_view_drag_button" class="noVNC_button noVNC_hidden"
title="Move/Drag Viewport">
<!--noVNC Touch Device only buttons-->
<div id="noVNC_mobile_buttons">
<input type="image" alt="Keyboard" src="https://bbs.csdn.net/topics/app/images/keyboard.svg"
id="noVNC_keyboard_button" class="noVNC_button" title="Show Keyboard">
</div>
<!-- Extra manual keys -->
<input type="image" alt="Extra keys" src="https://bbs.csdn.net/topics/app/images/toggleextrakeys.svg"
id="noVNC_toggle_extra_keys_button" class="noVNC_button"
title="Show Extra Keys">
<div class="noVNC_vcenter">
<div id="noVNC_modifiers" class="noVNC_panel">
<input type="image" alt="Ctrl" src="https://bbs.csdn.net/topics/app/images/ctrl.svg"
id="noVNC_toggle_ctrl_button" class="noVNC_button"
title="Toggle Ctrl">
<input type="image" alt="Alt" src="https://bbs.csdn.net/topics/app/images/alt.svg"
id="noVNC_toggle_alt_button" class="noVNC_button"
title="Toggle Alt">
<input type="image" alt="Windows" src="https://bbs.csdn.net/topics/app/images/windows.svg"
id="noVNC_toggle_windows_button" class="noVNC_button"
title="Toggle Windows">
<input type="image" alt="Tab" src="https://bbs.csdn.net/topics/app/images/tab.svg"
id="noVNC_send_tab_button" class="noVNC_button"
title="Send Tab">
<input type="image" alt="Esc" src="https://bbs.csdn.net/topics/app/images/esc.svg"
id="noVNC_send_esc_button" class="noVNC_button"
title="Send Escape">
<input type="image" alt="Ctrl+Alt+Del" src="https://bbs.csdn.net/topics/app/images/ctrlaltdel.svg"
id="noVNC_send_ctrl_alt_del_button" class="noVNC_button"
title="Send Ctrl-Alt-Del">
</div>
</div>
<!-- Shutdown/Reboot -->
<input type="image" alt="Shutdown/Reboot" src="https://bbs.csdn.net/topics/app/images/power.svg"
id="noVNC_power_button" cl
轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/268438.html
標籤：單片機/工控
下一篇：arduino探索者