[MCU] 【米尔MYB-YT507开发板试用体验】python显示内存、CPU实时情况1

lugl4313820   2022-8-1 22:05 楼主

【米尔MYB-YT507开发板试用体验】安装pyecharts模块 - 国产芯片交流 - 电子工程世界-论坛 (eeworld.com.cn)

上篇介绍安装了pyecharts模块,现在利用YT507建立web服务器固定显示图标:学习数据分析(四) pyecharts和Tornado - IVWT - 博客园 (cnblogs.com)

server.py:

import tornado.web
import tornado.ioloop
import tornado.httpserver

from pyecharts.charts import Bar
from pyecharts import options as opts


def bar_base() -> str:
    c = (
        Bar()
        .add_xaxis(["CPU", "内存"])
        .add_yaxis("时间A", [5, 20])
        .add_yaxis("时间B", [15, 25])
        .set_global_opts(title_opts=opts.TitleOpts(title="Bar-基本示例", subtitle="我是副标题"))
    )
    return c.dump_options()


def set_default_header(self):
    # 后面的*可以换成ip地址,意为允许访问的地址
    self.set_header("Access-Control-Allow-Origin", "*")
    self.set_header("Access-Control-Allow-Headers", "x-requested-with")
    self.set_header("Access-Control-Allow-Methods", "POST, GET, PUT, DELETE")
    self.set_header("Content-Type", "application/json; charset=UTF-8")


class BarChart(tornado.web.RequestHandler):
    def data_received(self, chunk):
        pass

    def get(self):
        set_default_header(self)
        chart_result = bar_base()
        # 返回结果
        self.write(chart_result)
        self.finish()


class PageHandler(tornado.web.RequestHandler):
    def data_received(self, chunk):
        pass

    def get(self):
        self.render("index.html")


def make_app():
    return tornado.web.Application([
        (r"/", PageHandler),
        (r"/getBarChart", BarChart),
    ])


if __name__ == "__main__":
    port = 8889
    app = make_app()
    sockets = tornado.netutil.bind_sockets(port)
    http_server = tornado.httpserver.HTTPServer(app)
    http_server.add_sockets(sockets)
    print("Server Start Running!\nHost: {} Port: {}".format("127.0.0.1", port))
    tornado.ioloop.IOLoop.instance().start()

创建index.html:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Awesome-pyecharts</title>
    <script src="https://cdn.bootcss.com/jquery/3.0.0/jquery.min.js"></script>
    <script type="text/javascript" src="https://assets.pyecharts.org/assets/echarts.min.js"></script>
    <script type="text/javascript" src="https://assets.pyecharts.org/assets/echarts-wordcloud.min.js"></script>

</head>
<body>
    <div id="bar" style="width:1000px; height:600px;"></div>
    <script>
        var chart = echarts.init(document.getElementById('bar'), 'white', {renderer: 'canvas'});

        $(
            function () {
                fetchData();
                setInterval(fetchData, 5000);
            }
        );

        function fetchData() {
            $.ajax({
                type: "GET",
                url: "http://192.168.3.49:8889/getBarChart",
                dataType: "json",
                success: function (result) {
                    chart.setOption(result);
                }
            });
        }
    </script>
</body>
</html>

然后把两个文件copy到开发板的/home/myir/目录下面,执行python3 server.py

image.png  

image.png  打开浏览器,就出现下面的页面。

image.png  下一步,利用psutil模块实时更新cpu、内存使用情况。

回复评论 (1)

记录一下,有点意思。

默认摸鱼,再摸鱼。2022、9、28
点赞  2022-8-3 18:34
电子工程世界版权所有 京B2-20211791 京ICP备10001474号-1 京公网安备 11010802033920号
    写回复