什么是Dashboard？

Dashboard本意是“仪表盘”，在汽车上，我们通过仪表盘掌握发动机的转速、车辆的速度和油量。如今，Dashboard通常是一个数据可视化工具，通过一个高度集成的网页，展示大量的可用信息。
比较知名的Dashboard有约翰斯霍普金斯大学提供的COVID-19 Dashboard
image.png
Dashboard广泛应用于各行各业，如需要了解我校的3D打印系统的运行状态，打开Dashboard即可
image.png
甚至连诸位目前看到的这个yuque平台，它的工作台也被叫做Dashboard
image.png
与OLED屏幕相比，Dashboard可以展示更为丰富的信息。但上学期，我们的Arduino性能有限，只能为0.96寸OLED小屏幕提供驱动；而树莓派则可以轻松带动一个Dashboard。
我们需要使用Dashboard了解硬件的工作状态，常见的硬件包括树莓派、Arduino、各类传感器等。需要大家掌握以下技能：
1.硬件的良好运行：确保树莓派、传感器的电路连接正确。
2.稳定的网络环境
3.安装与网络相关的应用程序（用来驱动Dashboard）
4.较好的程序设计

树莓派的准备工作

切换源

下载软件，需要访问树莓派的官方服务器，从官方服务器搜索软件，并进行下载。有点类似我们在手机应用商店进行程序下载。但是树莓派服务器位于欧洲，距离远、速度慢，为了提高访问的速度，一般换用清华大学的镜像服务器，否则，会出现以下报错：

  1. E:无法按照glob"..."找到任何软件包

切换源的操作如下：
然后在命令行窗口内输入 sudo nano /etc/apt/sources.list 并回车，进入编辑器。
sudo 是指用系统管理员权限启动，nano 是树莓派内置的轻量文本编辑器（当然也可以用之前我们一直在用的vim编辑器），而 /etc/apt/sources.list 就是软件源的配置文件地址了。
接着编辑这个文件，如下图所示，把原来的内容注释掉（最前面加 # 号），在文件最顶部添加下面的内容：

  1. deb http://mirrors.tuna.tsinghua.edu.cn/raspbian/raspbian/ buster main non-free contrib 
  2. deb-src http://mirrors.tuna.tsinghua.edu.cn/raspbian/raspbian/ buster main non-free contrib

按 ctrl-o 保存，按 ctrl-x 关闭。

执行软件更新操作

  1. sudo apt-get update

Pi Dashboard

什么是Pi Dashboard

Pi Dashboard (Pi 仪表盘) 是一个开源的 IoT 设备监控工具，目前主要针对树莓派平台，也尽可能兼容其他类树莓派硬件产品。你只需要在树莓派上安装好 PHP 服务器环境，即可方便的部署一个 Pi 仪表盘，通过炫酷的 WebUI 来监控树莓派的状态！
目前已加入的监测项目有：

  • CPU 基本信息、状态和使用率等实时数据
  • 内存、缓存、SWAP分区使用的实时数据
  • SD卡（磁盘）的占用情况
  • 实时负载数据
  • 实时进程数据
  • 网络接口的实时数据
  • 树莓派IP、运行时间、操作系统、HOST 等基础信息

    安装方法

    安装共2步，首先安装 Nginx（网页服务器）和 PHP。然后在 Nginx 目录通过GitHub 部署好本项目的程序。

    1.安装 Nginx 和 PHP

    在 Pi 的终端运行以下命令。
    1. sudo apt-get update
    2. sudo apt-get install nginx php7.3-fpm php7.3-cli php7.3-curl php7.3-gd php7.3-cgi
    3. sudo service nginx start
    4. sudo service php7.3-fpm restart
    如果安装成功，可通过 http://树莓派IP 访问到 Nginx 的默认页。Nginx 的根目录在 /var/www/html。
    进行以下操作来让 Nginx 能处理 PHP。
    sudo nano /etc/nginx/sites-available/default
    将其中的如下内容（找不到以下内容时，可以试试看Ctrl+W搜索以下代码中的关键词，如404，则可以快速定位）
    1. location / {
    2.               # First attempt to serve request as file, then
    3.               # as directory, then fall back to displaying a 404.
    4.               try_files $uri $uri/ =404;
    5.       }
    替换为 ```shell location / { index index.html index.htm index.php default.html default.htm default.php; }

location ~.php$ { fastcgi_pass unix:/run/php/php7.3-fpm.sock;

fastcgi_pass 127.0.0.1:9000;

fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name; include fastcgi_params; }

  1. Ctrl + O 保存再 Ctrl + X 退出。**一定要注意缩进，跟上面的要保持一致！**
  2. ```shell
  3. sudo service nginx restart

2.部署 Pi Dashboard

  1. sudo apt-get install git
  2. cd /var/www/html
  3. sudo git clone https://github.com/nxez/pi-dashboard.git

即可通过 http://树莓派IP/pi-dashboard 访问部署好了的 Pi Dashboard。
9b18360b643f899e4fe321b4e24319e.png
tips：上面Dashboard我做了一点点本地化修改，比如推荐链接、部分元素、图片等，你也可以对其定制修改，这是开源的魅力。
来源：Pi Dashboard是一个国内的开源项目，详细可以参见https://make.quwj.com/project/10

Q&A

什么是Github？

在上文中，我们通过安装git工具，然后通过clone的方式，部署了pi dashboard。这是因为pi dashboard的作者将其源代码托管在了Github上，供所有人开放使用、修改。这就是“开源代码”。Github是全世界最大的开源社区。
image.png
在这个项目(https://github.com/nxez/pi-dashboard)中，我们可以看到多种类型的文件，如.php，还有assets(前端资源)里面的.js，其中.js是JavaScript文件；.php是php文件，他们是组成一个网页的基本要素。
HTML5是前端控制显示的代码，即在浏览器中打开一个网站，查看源代码，可以看到的内容。

什么是JavaScript和HTML5？

HTML5是前端控制显示的代码，即在浏览器中打开一个网站，查看源代码，可以看到的内容。
Javascript通常来说是穿插在html5中用以控制数据和显示效果的脚本（因为js也可以用作其它用途，所以这里说 通常来说），想要做成动态页面，肯定要用到js了。查看源代码中 script标签内的代码，以及script标签指向的js文件。
综上，两个都是最终需要输出给浏览器端控制显示的。
拓展阅读（什么是HTML？）：https://developer.mozilla.org/zh-CN/docs/Learn/Getting_started_with_the_web/HTML_basics
TIP：关于HTML/CSS/Js的内容，建议通过上述链接对应的MDN网站了解，其资料权威，内容丰富，值得入门。

什么是PHP？

PHP则与这两者不同，它是完全在服务器端运行，运行完后到浏览器端是看不到任何原有的php代码的。
要说关系，也可以说是生成的关系。php连接数据库（也可以是没连），处理数据，生成html代码及js代码（js一般是单独写好的，只需要引用在html中，也可以由php生成），然后输出给浏览器显示。
但是PHP文件可以包含文本、HTML、CSS以及PHP代码
hp和html嵌套，服务器是把整个代码都拿到服务器去执行，但是服务器会判断在<? ?>之间的为php程序，是需要解释执行的，然后把输出的结果返回来放到相应的php代码处，而html原样输出，这样就把原来的html和php执行后的结果一起返回来，在浏览器上显示出来。
原文链接：https://blog.csdn.net/hxxjxw/article/details/85306162
拓展阅读(什么是PHP？)：https://www.w3school.com.cn/php/php_intro.asp