Pi Dashboard:给你的派装一个仪表盘

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

目前已加入的监测项目有:

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


安装方法

安装共2步,首先安装 Nginx(或 Apache)和 PHP。然后在 Nginx 目录通过 SFTP 或 GitHub 部署好本项目的程序。

安装 Nginx 和 PHP

在 Pi 的终端运行以下命令。

sudo apt-get update
sudo apt-get install nginx php-fpm php-cli php-curl php-gd php-mcrypt php-cgi
sudo service nginx start
sudo service php5-fpm restart

如果安装成功,可通过

http://树莓派IP

访问到 Nginx 的默认页。Nginx 的根目录在 /var/www/html。
进行以下操作来让 Nginx 能处理 PHP。

sudo nano /etc/nginx/sites-available/default

将其中的如下内容

location / {
                # First attempt to serve request as file, then
                # as directory, then fall back to displaying a 404.
                try_files $uri $uri/ =404;
        }

替换为

location / {
                index  index.html index.htm index.php default.html default.htm default.php;
        }

        location ~ .*\.php(\/.*)*$ {
                #fastcgi_split_path_info ^(.+\.php)(/.+)$;
                fastcgi_pass unix:/var/run/php5-fpm.sock;
                fastcgi_index index.php;
                include fastcgi_params;
                set $real_script_name $fastcgi_script_name;
                if ($fastcgi_script_name ~ "(.+?\.php)(/.*)") {
                        set $real_script_name $1;
                        set $path_info $2;
                }
                fastcgi_param SCRIPT_FILENAME $document_root$real_script_name;
                fastcgi_param SCRIPT_NAME $real_script_name;
                fastcgi_param PATH_INFO $path_info;
        }

Ctrl + O 保存再 Ctrl + X 退出。

sudo service nginx restart

最后重启 Nginx 即可,以上步骤在树莓派 Zero + Linux version 4.9.41+ 系统版本上测试通过。

对在树莓派上部署 LNMP 有兴趣可以参考实验室更详细的介绍《树莓派搭建LNMP环境》。

部署 Pi Dashboard

这里介绍两种方法将 Pi Dashboard 部署在 Nginx 上。

SFTP 上传

在 GitHub 下载本项目源码。通过 FileZilla 等 FTP 软件将解压出来的目录上传到树莓派的 /var/www/html目录下。
那么可以通过 http://树莓派IP/pi-dashboard 访问部署好了的 Pi Dashboard。

如果页面无法显示,可以尝试在树莓派终端给源码添加运行权限,例如你上传之后的路径是 /var/www/html/pi-dashboard,则运行。

cd /var/www/html
sudo chown -R www-data pi-dashboard
GitHub 部署

如果你了解过 GitHub 的基本操作,通过 GitHub 来下载本项目到 Pi 上会相当方便。

cd /var/www/html
sudo git clone https://github.com/spoonysonny/pi-dashboard.git

即可通过

http://树莓派IP/pi-dashboard

访问部署好了的 Pi Dashboard。

同样如果页面无法显示,可以尝试在树莓派终端给源码添加运行权限,例如你上传之后的路径是

/var/www/html/pi-dashboard

则运行。

cd /var/www/html
sudo chown -R www-data pi-dashboard

以上步骤在树莓派 Zero + Linux version 4.9.41+ 系统版本上测试通过。

常见问题

Q:Pi Dashboard 的 WebUI 支持在哪些终端上查看?
A:任何带有浏览器的终端都可以查看,无论是在内网还是外网的电脑、Pad或是智能手机上。Pi Dashboard 对不同的设备做了响应式布局,能很好兼容手机浏览。

Q:我没法通过外网IP访问到怎么办?
A:国内很多地区的ISP都不提供独立的外网IP了,可以通过花生壳等工具实现外网访问。对于已有外网独立IP的用户,可以尝试把 Nginx 服务端口从 80 改成其他端口号,再在 IP 地址后添加端口号访问。这是因为国内ISP普遍禁用了80端口。

Q:我有一个域名,如何将域名绑定到树莓派上?
A:可以参考DNSPod动态IP解析更新程序和树莓派搭建LNMP环境。将域名指向树莓派IP后需要修改 Nginx 网站配置的 servername 这项为你的域名即可。

Q:使用遇到问题可以提供技术支持吗?
A:可以加树莓派实验室QQ群 549418432 和其他用户交流获得协助。

使用条款

本项目是开源项目,NXEZ.com 保留作为发起者的权利。
允许在 GPL v3.0 协议下对项目进行使用。请务必在保证项目的出处、声明、超链接等内容完整。

完善计划

欢迎有兴趣的朋友通过 GitHub 参与到本项目的完善。下面是项目后续完善的几个方向。

  • 计划完善 Device 型号识别,需要收集各种 Device 的硬件特征。
  • 对通用 Linux 系统做适配优惠。
  • 不同风格 UI 的加入。

本文来自:树莓派实验室
链接地址:http://shumeipai.nxez.com/2017/08/31/pi-dashboard-released.html

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
以下是一个简单的Element UI仪表盘代码示例: ```html <template> <div class="dashboard"> <el-row> <el-col :span="12"> <el-card> <div class="dashboard-item"> <div class="dashboard-item-title">Total Sales</div> <div class="dashboard-item-value">$5000</div> </div> </el-card> </el-col> <el-col :span="12"> <el-card> <div class="dashboard-item"> <div class="dashboard-item-title">New Users</div> <div class="dashboard-item-value">50</div> </div> </el-card> </el-col> </el-row> <el-row> <el-col :span="12"> <el-card> <div class="dashboard-item"> <div class="dashboard-item-title">Orders</div> <div class="dashboard-item-value">100</div> </div> </el-card> </el-col> <el-col :span="12"> <el-card> <div class="dashboard-item"> <div class="dashboard-item-title">Conversion Rate</div> <div class="dashboard-item-value">5%</div> </div> </el-card> </el-col> </el-row> </div> </template> <script> export default { name: "Dashboard", }; </script> <style scoped> .dashboard { display: flex; flex-wrap: wrap; justify-content: space-between; } .dashboard-item { display: flex; flex-direction: column; justify-content: center; align-items: center; height: 100%; } .dashboard-item-title { font-size: 18px; font-weight: bold; margin-bottom: 10px; } .dashboard-item-value { font-size: 24px; font-weight: bold; } </style> ``` 这是一个简单的仪表盘布局,使用了Element UI的Grid系统和Card组件。在每个Card中,有一个包含标题和值的div元素,可以根据实际需求添加更多的元素和样式。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值