update topuino
This commit is contained in:
Villivateur Von
parent
1830d76c4b
commit
59ec2ee6b7
63
generic.html
63
generic.html
|
|
@ -1,63 +0,0 @@
|
|||
<!DOCTYPE HTML>
|
||||
<!--
|
||||
Hyperspace by HTML5 UP
|
||||
html5up.net | @ajlkn
|
||||
Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
|
||||
-->
|
||||
<html>
|
||||
<head>
|
||||
<title>Generic - Hyperspace by HTML5 UP</title>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
|
||||
<link rel="stylesheet" href="assets/css/main.css" />
|
||||
<noscript><link rel="stylesheet" href="assets/css/noscript.css" /></noscript>
|
||||
</head>
|
||||
<body class="is-preload">
|
||||
|
||||
<!-- Header -->
|
||||
<header id="header">
|
||||
<a href="index.html" class="title">Hyperspace</a>
|
||||
<nav>
|
||||
<ul>
|
||||
<li><a href="index.html">Home</a></li>
|
||||
<li><a href="generic.html" class="active">Generic</a></li>
|
||||
<li><a href="elements.html">Elements</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</header>
|
||||
|
||||
<!-- Wrapper -->
|
||||
<div id="wrapper">
|
||||
|
||||
<!-- Main -->
|
||||
<section id="main" class="wrapper">
|
||||
<div class="inner">
|
||||
<h1 class="major">A Generic Page</h1>
|
||||
<span class="image fit"><img src="images/pic04.jpg" alt="" /></span>
|
||||
<p>Donec eget ex magna. Interdum et malesuada fames ac ante ipsum primis in faucibus. Pellentesque venenatis dolor imperdiet dolor mattis sagittis. Praesent rutrum sem diam, vitae egestas enim auctor sit amet. Pellentesque leo mauris, consectetur id ipsum sit amet, fergiat. Pellentesque in mi eu massa lacinia malesuada et a elit. Donec urna ex, lacinia in purus ac, pretium pulvinar mauris. Curabitur sapien risus, commodo eget turpis at, elementum convallis elit. Pellentesque enim turpis, hendrerit tristique.</p>
|
||||
<p>Interdum et malesuada fames ac ante ipsum primis in faucibus. Pellentesque venenatis dolor imperdiet dolor mattis sagittis. Praesent rutrum sem diam, vitae egestas enim auctor sit amet. Pellentesque leo mauris, consectetur id ipsum sit amet, fersapien risus, commodo eget turpis at, elementum convallis elit. Pellentesque enim turpis, hendrerit tristique lorem ipsum dolor.</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- Footer -->
|
||||
<footer id="footer" class="wrapper alt">
|
||||
<div class="inner">
|
||||
<ul class="menu">
|
||||
<li>© Untitled. All rights reserved.</li><li>Design: <a href="http://html5up.net">HTML5 UP</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<!-- Scripts -->
|
||||
<script src="assets/js/jquery.min.js"></script>
|
||||
<script src="assets/js/jquery.scrollex.min.js"></script>
|
||||
<script src="assets/js/jquery.scrolly.min.js"></script>
|
||||
<script src="assets/js/browser.min.js"></script>
|
||||
<script src="assets/js/breakpoints.min.js"></script>
|
||||
<script src="assets/js/util.js"></script>
|
||||
<script src="assets/js/main.js"></script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
18
index.html
18
index.html
|
|
@ -45,29 +45,27 @@
|
|||
<!-- One -->
|
||||
<section id="products" class="wrapper style2 spotlights">
|
||||
<section>
|
||||
<a href="#" class="image"><img src="images/topuino_sample.jpg" alt="" data-position="center center" /></a>
|
||||
<a href="topuino.html" class="image"><img src="images/topuino_sample.jpg" alt="" data-position="center center" /></a>
|
||||
<div class="content">
|
||||
<div class="inner">
|
||||
<h2>Topuino</h2>
|
||||
<p>Topuino 是一个桌面小摆件，可以实现通用服务器或计算机的数据监控，包括 CPU 占用、RAM 占用、两个硬盘的可用空间、硬盘读写速度、网络 IO 速率。</p>
|
||||
<ul class="actions">
|
||||
<li><a href="#" class="button">了解更多</a></li>
|
||||
<li><a href="#" class="button">立即购买</a></li>
|
||||
<li><a href="#" class="button">产品注册</a></li>
|
||||
<li><a href="topuino.html" class="button">了解更多</a></li>
|
||||
<li><a href="https://qiegedianzi.taobao.com/" class="button">立即购买</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<section>
|
||||
<a href="#" class="image"><img src="images/mapuino_sample.jpg" alt="" data-position="top center" /></a>
|
||||
<a href="mapuino.html" class="image"><img src="images/mapuino_sample.jpg" alt="" data-position="top center" /></a>
|
||||
<div class="content">
|
||||
<div class="inner">
|
||||
<h2>Mapuino</h2>
|
||||
<p>Mapuino 是一个简单的摆件，或者叫“玩具”。你可以在自己的个人博客、主页或者任何可以插入个性代码的社交网站（如 V2EX）上添加一行 URL，然后就可以在 Mapuino 上观赏全国哪些地方的人正在访问你的网站。</p>
|
||||
<ul class="actions">
|
||||
<li><a href="#" class="button">了解更多</a></li>
|
||||
<li><a href="#" class="button">立即购买</a></li>
|
||||
<li><a href="#" class="button">产品注册</a></li>
|
||||
<li><a href="mapuino.html" class="button">了解更多</a></li>
|
||||
<li><a href="" class="button">敬请期待</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -83,12 +81,12 @@
|
|||
<section>
|
||||
<span class="icon solid major fa-code"></span>
|
||||
<h3>Telegram 交流群</h3>
|
||||
<p>敬请期待</p>
|
||||
<p><a href="https://t.me/qiegedianzi" class="button">点击加入</a></p>
|
||||
</section>
|
||||
<section>
|
||||
<span class="icon solid major fa-lock"></span>
|
||||
<h3>QQ 交流群</h3>
|
||||
<p>敬请期待</p>
|
||||
<p>群号 702769921</p>
|
||||
</section>
|
||||
<section>
|
||||
<span class="icon solid major fa-cog"></span>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,59 @@
|
|||
<!DOCTYPE HTML>
|
||||
<!--
|
||||
Hyperspace by HTML5 UP
|
||||
html5up.net | @ajlkn
|
||||
Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
|
||||
-->
|
||||
<html>
|
||||
<head>
|
||||
<title>Generic - Hyperspace by HTML5 UP</title>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
|
||||
<link rel="stylesheet" href="assets/css/main.css" />
|
||||
<noscript><link rel="stylesheet" href="assets/css/noscript.css" /></noscript>
|
||||
</head>
|
||||
<body class="is-preload">
|
||||
|
||||
<!-- Header -->
|
||||
<header id="header">
|
||||
<a href="index.html" class="title">Hyperspace</a>
|
||||
<nav>
|
||||
<ul>
|
||||
<li><a href="index.html">主页</a></li>
|
||||
<li><a href="https://qiegedianzi.taobao.com/">购买链接</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</header>
|
||||
|
||||
<!-- Wrapper -->
|
||||
<div id="wrapper">
|
||||
|
||||
<!-- Main -->
|
||||
<section id="main" class="wrapper">
|
||||
<div class="inner">
|
||||
<h1 class="major">敬请期待</h1>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- Footer -->
|
||||
<footer id="footer" class="wrapper alt">
|
||||
<div class="inner">
|
||||
<ul class="menu">
|
||||
<li>© VVZERO.COM. All rights reserved.</li><li>Design: <a href="http://html5up.net">HTML5 UP</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<!-- Scripts -->
|
||||
<script src="assets/js/jquery.min.js"></script>
|
||||
<script src="assets/js/jquery.scrollex.min.js"></script>
|
||||
<script src="assets/js/jquery.scrolly.min.js"></script>
|
||||
<script src="assets/js/browser.min.js"></script>
|
||||
<script src="assets/js/breakpoints.min.js"></script>
|
||||
<script src="assets/js/util.js"></script>
|
||||
<script src="assets/js/main.js"></script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,118 @@
|
|||
<!DOCTYPE HTML>
|
||||
<!--
|
||||
Hyperspace by HTML5 UP
|
||||
html5up.net | @ajlkn
|
||||
Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
|
||||
-->
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<title>Topuino 产品介绍</title>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
|
||||
<link rel="stylesheet" href="assets/css/main.css" />
|
||||
<noscript>
|
||||
<link rel="stylesheet" href="assets/css/noscript.css" />
|
||||
</noscript>
|
||||
</head>
|
||||
|
||||
<body class="is-preload">
|
||||
|
||||
<!-- Header -->
|
||||
<header id="header">
|
||||
<a href="index.html" class="title">Topuino 产品介绍</a>
|
||||
<nav>
|
||||
<ul>
|
||||
<li><a href="index.html">主页</a></li>
|
||||
<li><a href="https://qiegedianzi.taobao.com/">购买链接</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</header>
|
||||
|
||||
<!-- Wrapper -->
|
||||
<div id="wrapper">
|
||||
|
||||
<!-- Main -->
|
||||
<section id="main" class="wrapper">
|
||||
<div class="inner">
|
||||
<h1 class="major">Topuino 产品介绍</h1>
|
||||
<h2>Topuino 简介</h2>
|
||||
<p>Topuino 是一个桌面小摆件，可以实现通用服务器或计算机的数据监控，包括 CPU 占用、RAM 占用、两个硬盘的可用空间、硬盘读写速度、网络 IO 速率。</p>
|
||||
<h2>为什么叫 Topuio</h2>
|
||||
<p>在 Linux 系列服务器上，通常使用 top 命令查看 CPU 内存占用，本项目最初的设想也是将 top 命令实物化，这就是 Topuino 中 Top 的由来。</p>
|
||||
<p>在选型的时候，为了兼顾开发效率和成本，项目选用了大名鼎鼎的 ESP8266 单片机，配合了 Arduino 开发框架，Arduino 则是 Topuino 中 uino 的由来。</p>
|
||||
<h2>Topuino 的工作原理</h2>
|
||||
<ul>
|
||||
<li>服务端使用了 Flask，维护一个内存数据库（实际上是 Python 的字典），保存着从站（被监控服务器）UUID 与运行参数的映射关系。主站接收从站的运行数据，并向 Topuino
|
||||
回传数据；/li>
|
||||
<li>客户端采用 python 的 psutil 库，获取所有的运行数据；</li>
|
||||
<li>硬件端使用了 ESP-12F 作为 MCU，显示采用 LED 阵列和数码管，显示驱动是 TM1638 芯片。</li>
|
||||
</ul>
|
||||
<h1 class="major">Topuino 用户操作手册</h1>
|
||||
<h2>使用前准备</h2>
|
||||
<ol>
|
||||
<li>Topuino 依赖 2.4G Wi-Fi 连接互联网，并且不支持 5G Wi-Fi，所以你需要有一个可以连接互联网的 2.4G Wi-Fi 接入点，并且 SSID
|
||||
不可以包含特殊字符（包括中文字符），且必须有密码；</li>
|
||||
<li>Topuino 通过 HTTP 协议与 iot.vvzero.com 通讯以获取实时监控数据，所以请确保网络链路中不存在拦截、缓存等异常行为；</li>
|
||||
<li>Topuino 使用 USB TypeC 接口供电，供电电压为 5V，市面上绝大多数手机充电器、电脑 USB 输出均可；</li>
|
||||
<li>客户端需要运行一个 python 脚本以向 iot.vvzero.com 上传监控数据，所以请安装 python3；</li>
|
||||
<li>客户端、硬件端通过 Topuino 硬件背面贴着的 SN 号进行绑定，请留意。</li>
|
||||
</ol>
|
||||
<h2>待监控的服务器/电脑配置</h2>
|
||||
<ol>
|
||||
<li>安装 python 依赖包 requests 和 psutil，注意 psutil 在某些机器上可能因为缺少某些库而 build 失败（比如
|
||||
armbian），请用搜索引擎搜索对应的报错信息，一般很容易解决；</li>
|
||||
<li>下载 <a href="https://git.vvzero.com/villivateur/Topuino_Client/raw/branch/master/main.py">客户端
|
||||
python 脚本文件</a>；</li>
|
||||
<li>修改 main.py，将硬件背面的 SN 填入 main.py 的指定位置；同时请填入需要监控的两个磁盘挂载点；</li>
|
||||
<li>直接使用 python3 运行 main.py，将会每隔 1s 向 iot.vvzero.com 报告当前监控数据；</li>
|
||||
<li>如果需要配置自动启动和 daemon，建议参考 <a
|
||||
href="https://git.vvzero.com/villivateur/Topuino_Client/raw/branch/master/topuino_client.service">这个
|
||||
systemd 服务文件</a></li>
|
||||
</ol>
|
||||
<h2>Topuino 配置</h2>
|
||||
<ol>
|
||||
<li>Topuino 初次上电后，右上角的红色状态灯应当以 0.5 Hz 闪烁（一亮一灭表示一个周期），表示正在等待配置；</li>
|
||||
<li>以安卓手机配置为例，为避免某些手机的自动网络优化，请暂时关闭数据流量；</li>
|
||||
<li>请暂时关闭手机上的任何代理软件；</li>
|
||||
<li>打开 Wi-Fi，并连接 SSID 为 <code>Topuino</code> 的接入点，密码是 <code>vvzero.com</code>。
|
||||
如果系统提示该网络无法访问互联网，请忽略并继续保持连接；</li>
|
||||
<li>打开一个正常的浏览器，访问 192.168.1.1；</li>
|
||||
<li>在网页中填入 Topuino 可连接的、可访问互联网的 2.4G Wi-Fi 接入点的 SSID 和密码；</li>
|
||||
<li>点击提交后，页面会返回一个 OK（某些情况下可能会出现 Connection Reset，请忽略）；</li>
|
||||
<li>此时 Topuino 的状态灯应当以 2Hz 闪烁，等待几秒至十几秒后，状态灯熄灭，面板开始正常显示。</li>
|
||||
</ol>
|
||||
<h2>常见问题分析</h2>
|
||||
<ul>
|
||||
<li>Q：我遇到问题了怎么办？A：请再认真读一遍该手册，如果无法解决，请继续往下看。</li>
|
||||
<li>Q：上电后闪灯状态不对怎么办？A：请先短按 RESET 键并观察，如果不行，请长按 FUNC 键 6 秒以上，再次观察，如果还是不行，请联系开发者。</li>
|
||||
<li>Q：我在配置 Topuino 时输错了 SSID、密码怎么办？A：请长按 FUNC 键 6 秒以上，重新配置。</li>
|
||||
</ul>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- Footer -->
|
||||
<footer id="footer" class="wrapper alt">
|
||||
<div class="inner">
|
||||
<ul class="menu">
|
||||
<li>© VVZERO.COM. All rights reserved.</li>
|
||||
<li>Design: <a href="http://html5up.net">HTML5 UP</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<!-- Scripts -->
|
||||
<script src="assets/js/jquery.min.js"></script>
|
||||
<script src="assets/js/jquery.scrollex.min.js"></script>
|
||||
<script src="assets/js/jquery.scrolly.min.js"></script>
|
||||
<script src="assets/js/browser.min.js"></script>
|
||||
<script src="assets/js/breakpoints.min.js"></script>
|
||||
<script src="assets/js/util.js"></script>
|
||||
<script src="assets/js/main.js"></script>
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
Loading…
Reference in New Issue