基本实现Hello页面

Hello.py

@@ -1,37 +1,70 @@
 from multiprocessing import Process, Queue, freeze_support
 import threading
-from _tkinter import TclError
-import tkinter
-# from tkinter import ttk
-import tkinter.font as tkfont
-from PIL import ImageTk, Image
 import time
 import os
-import tkinter.messagebox
 import webbrowser
 import random
 import flask
+import json
 
 from newtkinter import DragWindow, center_windows
 
 app = flask.Flask(__name__, static_url_path='')
-img = None
-SCREEN = None
-queue_screen = None
-draftboard_start = None
-datascience_start = None
-functionmapping_start = None
-functionfactory_start = None
-algebraicfactory_start = None
-machinelearner_start = None
-git_start = None
-crawlef_start = None
-title_color = '#F0FFFF'
-button_color = '#FFFFFF'
-button_cursor = 'tcross'
-pic_list = os.listdir(f'{os.getcwd()}{os.sep}Pic')
+
+pic_list = os.listdir(f'{os.getcwd()}{os.sep}static{os.sep}Pic')
 del pic_list[pic_list.index('favicon.ico')]
 pic_list = random.sample(pic_list, 10)
+queue_box = []
+var_box = []
+new_queue_box = True
+new_var_box = True
+
+
+@app.route('/img', methods=['get'])
+def get_img():
+    pic = pic_list[int(str(time.time())[-1])]
+    print(pic)
+    return pic
+
+
+@app.route('/sent', methods=['get'])
+def sent():
+    value = flask.request.args.get("message", '')
+    index = queue_box.index(flask.request.args.get("index", queue_box[0]))
+    queue_controller.put(value, index)
+    return 'success'
+
+
+@app.route('/update')
+def update():
+    global new_queue_box, new_var_box
+    must = flask.request.args.get("must", 'NO')
+    if must == 'must':
+        new_queue_box = True
+        new_var_box = True
+    repo = {'queue': queue_box, 'var': var_box}
+    if new_queue_box or new_var_box:
+        repo['status'] = 'YES'
+    else:
+        repo['status'] = "NO"
+    new_queue_box = False
+    new_var_box = False
+    return repo
+
+
+def update_queue_box(queue_list):
+    global queue_box, new_queue_box
+    queue_box = queue_list
+    new_queue_box = True
+
+
+def update_var_box(var_dict, var_from):
+    global var_box, new_var_box
+    var = []
+    for name in var_dict:
+        var.append(f'{name}[{var_from[name]}] : {var_dict[name]}')
+    var_box = var
+    new_var_box = True
 
 
 class QueueController:
@@ -125,6 +158,7 @@ class QueueController:
 
 
 queue_controller = QueueController()
+queue_controller.init(update_var_box, update_queue_box)
 
 
 def progress_bar(func):
@@ -147,6 +181,11 @@ def draftboard_main(in_queue, out_queue):
     draw_main(in_queue, out_queue)
 
 
+@app.route('/communication')
+def communication():
+    return app.send_static_file(r'Communication.html')
+
+
 @app.route('/')
 def hello():
     return app.send_static_file('Hello.html')
@@ -333,406 +372,11 @@ def system_run():  # 不需要进度条
     return in_queue, out_queue
 
 
-def queuer():
-    global title_color, button_color, button_cursor, queue_screen
-    try:
-        queue_screen.destroy()
-    except (AttributeError, TclError):
-        pass
-    queue_screen = tkinter.Toplevel()
-
-    queue_screen.title('通信管理器')
-    queue_screen.resizable(width=False, height=False)
-    queue_screen.geometry(f'+30+30')
-    font = ("黑体", 11)  # 设置字体
-
-    def sent():
-        nonlocal sent_text, queue_box
-        value = sent_text.get()
-        try:
-            index = queue_box.curselection()[0]
-        except IndexError:
-            return
-        queue_controller.put(value, index)
-
-    width_b = 20
-    height_b = 2
-    a_x = 0
-    a_y = 0
-    sent_text = tkinter.Entry(queue_screen, width=width_b * 2)
-    sent_text.grid(column=a_x, row=a_y, columnspan=2, sticky=tkinter.E + tkinter.W + tkinter.S + tkinter.N)
-    tkinter.Button(queue_screen, bg=button_color, text='发送', command=sent, font=font, width=10, height=height_b)\
-        .grid(column=a_x+2, row=a_y, sticky=tkinter.E + tkinter.W + tkinter.S + tkinter.N)
-    a_y += 1
-    queue_box = tkinter.Listbox(queue_screen, height=height_b * 8)
-    queue_box.grid(column=a_x, row=a_y, columnspan=3, rowspan=8, sticky=tkinter.E + tkinter.W + tkinter.S + tkinter.N)
-    a_x += 3
-    a_y = 0
-    var_box = tkinter.Listbox(queue_screen, width=width_b * 3, height=height_b * 9)
-    var_box.grid(column=a_x, row=a_y, columnspan=3, rowspan=9, sticky=tkinter.E + tkinter.W + tkinter.S + tkinter.N)
-
-    def update_queue_box(queue_list):
-        try:
-            queue_box.delete(0, tkinter.END)
-            queue_box.insert(0, *queue_list)
-        except TclError:
-            pass
-
-    def update_var_box(var_dict, var_from):
-        var = []
-        for name in var_dict:
-            var.append(f'{name}[{var_from[name]}] : {var_dict[name]}')
-        try:
-            var_box.delete(0, tkinter.END)
-            var_box.insert(0, *var)
-        except TclError:
-            pass
-
-    queue_controller.init(update_var_box, update_queue_box)
-
-
 def to_website():
-    SCREEN.update()
     t = threading.Thread(target=webbrowser.open, args=('https://cotan.songzh.website/',))
     t.start()
 
 
-def close():
-    global SCREEN
-    if not queue_controller.can_stop():
-        tkinter.messagebox.showinfo('操作不被允许', '请先关闭其他模块。')
-    else:
-        SCREEN.destroy()
-
-
-def cotan_main():
-    global SCREEN, title_color, button_color, button_cursor, img
-    SCREEN = DragWindow(width=1200, height=800)
-    font1 = tkfont.Font(family='Comic Sans MS', size=20, weight=tkfont.BOLD)
-    font2 = tkfont.Font(family='Comic Sans MS', size=16, weight=tkfont.BOLD)
-    font3 = tkfont.Font(family='Comic Sans MS', size=10)
-    SCREEN.title('')
-    SCREEN.resizable(width=False, height=False)
-    SCREEN.geometry(f'1200x800+30+30')
-    center_windows(SCREEN, 1200, 800)
-    # 渲染白色
-    frame = tkinter.Frame(SCREEN, width=1200, height=800, bg='#FFFFFF')
-    frame.pack()
-
-    # 图片
-    canvas = tkinter.Canvas(
-        frame,
-        bd=0,
-        width=1000,
-        height=800,
-        highlightthickness=0)
-    pic = pic_list[int(str(time.time()).split()[0][-1])]
-    bg_image = ImageTk.PhotoImage(Image.open(f'Pic{os.sep}{pic}'))
-    canvas.create_image(400, 400, image=bg_image)
-    canvas.grid(column=1, row=0, sticky=tkinter.S + tkinter.N, rowspan=20)
-    SCREEN.iconbitmap(bitmap=f'Pic{os.sep}favicon.ico', default=f'Pic{os.sep}favicon.ico')
-    # 标题
-    tkinter.Label(
-        frame,
-        text='CoTan~科学计算系统',
-        width=20,
-        bg='#FFFFFF',
-        font=font1).grid(
-        column=0,
-        row=0,
-        sticky=tkinter.N)  # 设置说明
-    tkinter.Label(
-        frame,
-        text='CoTan工具',
-        bg=title_color,
-        font=font2).grid(
-        column=0,
-        row=1,
-        sticky=tkinter.W +
-        tkinter.E)
-    tkinter.Button(
-        frame,
-        text='CoTan草稿板',
-        cursor=button_cursor,
-        height=2,
-        font=font3,
-        bg=button_color,
-        command=draftboard_run,
-        activebackground=title_color,
-        bd=0,
-        justify=tkinter.LEFT).grid(
-        column=0,
-        row=2,
-        sticky=tkinter.N +
-        tkinter.E +
-        tkinter.W)
-    tkinter.Button(
-        frame,
-        text='自动化网页',
-        cursor=button_cursor,
-        command=crawler_run,
-        height=2,
-        font=font3,
-        bg=button_color,
-        activebackground=title_color,
-        bd=0,
-        justify=tkinter.LEFT).grid(
-        column=0,
-        row=3,
-        sticky=tkinter.N +
-        tkinter.E +
-        tkinter.W)
-    tkinter.Button(
-        frame,
-        text='Git仓库控制器',
-        cursor=button_cursor,
-        command=git_run,
-        height=1,
-        font=font3,
-        bg=button_color,
-        activebackground=title_color,
-        bd=0,
-        justify=tkinter.LEFT).grid(
-        column=0,
-        row=4,
-        sticky=tkinter.N +
-        tkinter.E +
-        tkinter.W)
-    tkinter.Button(
-        frame,
-        text='CoTan社区',
-        cursor=button_cursor,
-        command=to_website,
-        height=1,
-        font=font3,
-        bg=button_color,
-        activebackground=title_color,
-        bd=0,
-        justify=tkinter.LEFT).grid(
-        column=0,
-        row=5,
-        sticky=tkinter.N +
-        tkinter.E +
-        tkinter.W)
-
-    title_color = '#FFFAFA'
-    tkinter.Label(
-        frame,
-        text='数学系统',
-        bg=title_color,
-        font=font2).grid(
-        column=0,
-        row=6,
-        sticky=tkinter.W +
-        tkinter.E)
-    tkinter.Button(
-        frame,
-        text='代数工厂',
-        cursor=button_cursor,
-        command=algebraicfactory_run,
-        height=2,
-        font=font3,
-        bg=button_color,
-        activebackground=title_color,
-        bd=0,
-        justify=tkinter.LEFT).grid(
-        column=0,
-        row=7,
-        sticky=tkinter.N +
-        tkinter.E +
-        tkinter.W)
-    tkinter.Button(
-        frame,
-        text='机器学习',
-        cursor=button_cursor,
-        command=machinelearner_run,
-        height=2,
-        font=font3,
-        bg=button_color,
-        activebackground=title_color,
-        bd=0,
-        justify=tkinter.LEFT).grid(
-        column=0,
-        row=8,
-        sticky=tkinter.N +
-        tkinter.E +
-        tkinter.W)
-    tkinter.Button(
-        frame,
-        text='数据科学',
-        cursor=button_cursor,
-        command=datascience_run,
-        height=2,
-        font=font3,
-        bg=button_color,
-        activebackground=title_color,
-        bd=0,
-        justify=tkinter.LEFT).grid(
-        column=0,
-        row=9,
-        sticky=tkinter.N +
-        tkinter.E +
-        tkinter.W)
-    tkinter.Button(
-        frame,
-        text='函数工厂',
-        cursor=button_cursor,
-        command=functionfactory_run,
-        height=1,
-        font=font3,
-        bg=button_color,
-        activebackground=title_color,
-        bd=0,
-        justify=tkinter.LEFT).grid(
-        column=0,
-        row=10,
-        sticky=tkinter.N +
-        tkinter.E +
-        tkinter.W)
-    tkinter.Button(
-        frame,
-        text='函数实验室',
-        cursor=button_cursor,
-        command=functionmapping_run,
-        height=1,
-        font=font3,
-        bg=button_color,
-        activebackground=title_color,
-        bd=0,
-        justify=tkinter.LEFT).grid(
-        column=0,
-        row=11,
-        sticky=tkinter.N +
-        tkinter.E +
-        tkinter.W)
-
-    title_color = '#F5FFFA'
-    tkinter.Label(
-        frame,
-        text='物化系统',
-        bg=title_color,
-        font=font2).grid(
-        column=0,
-        row=12,
-        sticky=tkinter.W +
-        tkinter.E)
-    tkinter.Button(
-        frame,
-        text='几何车间',
-        cursor=button_cursor,
-        height=2,
-        font=font3,
-        bg=button_color,
-        activebackground=title_color,
-        bd=0,
-        justify=tkinter.LEFT).grid(
-        column=0,
-        row=13,
-        sticky=tkinter.N +
-        tkinter.E +
-        tkinter.W)
-    tkinter.Button(
-        frame,
-        text='物理车间',
-        cursor=button_cursor,
-        height=2,
-        font=font3,
-        bg=button_color,
-        activebackground=title_color,
-        bd=0,
-        justify=tkinter.LEFT).grid(
-        column=0,
-        row=14,
-        sticky=tkinter.N +
-        tkinter.E +
-        tkinter.W)
-    tkinter.Button(
-        frame,
-        text='化学车间',
-        cursor=button_cursor,
-        height=1,
-        font=font3,
-        bg=button_color,
-        activebackground=title_color,
-        bd=0,
-        justify=tkinter.LEFT).grid(
-        column=0,
-        row=15,
-        sticky=tkinter.N +
-        tkinter.E +
-        tkinter.W)
-    tkinter.Button(
-        frame,
-        text='实验室管理',
-        cursor=button_cursor,
-        height=1,
-        font=font3,
-        bg=button_color,
-        activebackground=title_color,
-        bd=0,
-        justify=tkinter.LEFT).grid(
-        column=0,
-        row=16,
-        sticky=tkinter.N +
-        tkinter.E +
-        tkinter.W)
-    title_color = '#F8F8FF'
-    tkinter.Label(
-        frame,
-        text='其他工具',
-        bg=title_color,
-        font=font2).grid(
-        column=0,
-        row=17,
-        sticky=tkinter.W +
-        tkinter.E)
-    tkinter.Button(
-        frame,
-        text='系统管理',
-        cursor=button_cursor,
-        command=system_run,
-        height=1,
-        font=font3,
-        bg=button_color,
-        activebackground=title_color,
-        bd=0,
-        justify=tkinter.LEFT).grid(
-        column=0,
-        row=18,
-        sticky=tkinter.N +
-        tkinter.E +
-        tkinter.W)
-    tkinter.Button(
-        frame,
-        text='通信管理器',
-        cursor=button_cursor,
-        height=1,
-        font=font3,
-        bg=button_color,
-        command=queuer,
-        activebackground=title_color,
-        bd=0,
-        justify=tkinter.LEFT).grid(
-        column=0,
-        row=19,
-        sticky=tkinter.N +
-        tkinter.E +
-        tkinter.W)
-    tkinter.Label(
-        frame,
-        text='',
-        bg='#FFFFFF',
-        font=font2,
-        height=5).grid(
-        column=0,
-        row=20,
-        sticky=tkinter.W +
-        tkinter.E)
-    # canvas.create_text(450, 740, text='Welcome to CoTan', font=font4, fill='#FFFFE0')
-    SCREEN.protocol("WM_DELETE_WINDOW", close)
-    SCREEN.mainloop()
-
-
 if __name__ == "__main__":
     freeze_support()
     app.run()

static/Communication.css

@@ -0,0 +1,54 @@
+div.screen{
+    background: #ffffff;
+    width:1200px;
+    height:800px;
+    position:absolute;
+    left:50%;
+    top:50%;
+    margin:-400px 0 0 -600px;
+    z-index:10;
+}
+
+canvas.bg_canvas{
+    background: #000000;
+    display: block;
+    width: 99%;
+    height: 99%;
+    position:absolute;
+    z-index: 1;}
+
+.font{
+    font-size: 20px;
+}
+
+div.nothing{
+    height: 5px;
+    width: 0;
+}
+
+div.form{
+    text-align:center;
+}
+input.text{
+    width: 520px;
+}
+
+#sentfunc{
+    width: 180px;
+}
+
+button.button{
+    width: 100px;
+}
+
+#prosser_list{
+    width: 500px;
+}
+
+#var_list{
+    width: 690px;
+}
+
+select.box{
+    height: 750px;
+}

static/Communication.html

@@ -0,0 +1,276 @@
+<!DOCTYPE html>
+<html lang="zh">
+    <head>
+        <link rel="stylesheet" type="text/css" href="Communication.css">
+        <meta charset="UTF-8">
+        <title>Hello</title>
+    </head>
+    <body>
+        <script>
+            let host = 'http://127.0.0.1:5000/'
+        </script>
+        <canvas id="canvas" class="bg_canvas"></canvas>
+        <div class="screen" id="screen">
+            <div class="nothing"></div>
+            <div class="form" id="form">
+                <div>
+                    <label for="sentfunc" class="font" id="sentfunc_labe">选定发送方式:</label>
+                    <select id="sentfunc" class="font">
+                        <option value="done ">执行python</option>
+                        <option value="get_var ">获取变量</option>
+                        <option value="get var_* ">获取所有变量</option>
+                        <option value="get * ">获取通信变量</option>
+                        <option value="get_eval ">返回代码</option>
+                        <option value="put_var ">发送变量</option>
+                        <option value="put_eval ">发送代码</option>
+                        <option value="file ">发送文件</option>
+                    </select>
+                    <input type="file" id="get_file" style="display:none;"/>
+                    <label for="message" class="font">输入发送对象:</label>
+                    <input id="message" class="font text" type="text">
+                    <button class="font button" onclick="sent()">发送消息</button>
+                    <button class="font button" onclick="document.getElementById('get_file').click()">选择文件</button>
+                    <script>
+                            let the_file = document.getElementById("get_file");
+                            the_file.addEventListener("change",function () {
+                            let message_input = document.getElementById("message");
+                            message_input.value = message_input.value + the_file.value;
+                        });
+                    </script>
+                </div>
+                <div class="nothing"></div>
+                <div>
+                    <label for="prosser_list"></label>
+                    <select id="prosser_list" class="font box" size=30>
+                    </select>
+                    <label for="var_list"></label>
+                    <select id="var_list" class="font box" size=30>
+                    </select>
+                </div>
+            </div>
+        </div>
+        <script>
+            function sent() {
+                let sentbox = document.getElementById("sentfunc");
+                let the_prosser_list = document.getElementById("prosser_list");
+                let first = sentbox.options[sentbox.selectedIndex].value;
+                let index = String(the_prosser_list.options[the_prosser_list.selectedIndex].value);
+                let message = first + document.getElementById("message").value;
+                let xhr = new XMLHttpRequest();
+                xhr.onloadend = function () {
+                    };
+                xhr.open('get', host + "sent?message=" + message + '&index=' + index, true);
+                xhr.send();
+                }
+            function update(is_must) {
+                console.log('1');
+                function get_update(is_must){
+                        let xhr = new XMLHttpRequest();
+                        xhr.onloadend = function () {
+                            if (xhr.status === 200) {
+                                let json = JSON.parse(xhr.responseText);
+                                console.log(json['status']);
+                                if (json['status'] === 'YES'){
+                                    let p_box = document.getElementById("prosser_list");
+                                    let var_box = document.getElementById("var_list");
+                                    p_box.innerHTML='';
+                                    var_box.innerHTML='';
+                                    for (i of json['queue']){
+                                        let y=document.createElement('option');
+                                        y.text=String(i);
+                                        y.value=String(i);
+                                        p_box.add(y, null)
+                                    }
+                                    for (i of json['var']){
+                                        let y=document.createElement('option');
+                                        y.text=String(i);
+                                        y.value=String(i);
+                                        var_box.add(y, null)
+                                    }
+                                    console.log(json['queue']);
+                                    console.log(json['var']);
+                                }
+                            }};
+                        let must = '?must=' + is_must;
+                        xhr.open('get',host + "update" + must,true);
+                        console.log(must);
+                        xhr.send();
+                    }
+                get_update(is_must)
+            }
+            update('must');
+            let t_update = window.setInterval("update('No')",1000);
+
+            class Circle {
+                    constructor(x, y) {
+                        this.x = x;
+                        this.y = y;
+                        this.r = Math.random() * 10 ;
+                        this._mr = Math.random();
+                        this._mx = (Math.random() - 0.5) * 2;
+                        this._my = (Math.random() - 0.5) * 2 ;
+                        this.ax = 0;
+                        this.ay = 0;
+
+                    }
+
+                    drawCircle(ctx) {
+                        ctx.beginPath();  // 开始绘制
+                        ctx.arc(this.x, this.y, this.r, 0, 2 * Math.PI);  // 画弧线
+                        ctx.closePath();  // 结束绘制
+                        ctx.fillStyle = 'rgba(204, 204, 204, 0.3)';
+                        ctx.fill();
+                    }
+
+                    drawLine(ctx, _circle) {
+                        let dx = this.x - _circle.x;  // 差距
+                        let dy = this.y - _circle.y;  // 差距
+                        let d = Math.sqrt(dx * dx + dy * dy);  // 勾股距离
+                        if (d < 180) {
+                            ctx.beginPath();
+                            //开始一条路径，移动到位置 this.x,this.y。创建到达位置 _circle.x,_circle.y 的一条线：
+                            ctx.moveTo(this.x, this.y);   //起始点
+                            ctx.lineTo(_circle.x, _circle.y);   //终点
+                            ctx.closePath();
+                            ctx.strokeStyle = 'rgba(204, 204, 204, ' + String(1 - (d/180)) + ')';
+                            ctx.stroke();
+                        }
+                    }
+
+                    set_a(ax, ay){
+                        this.ax += ax;
+                        this.ax /= 2;
+                        this.ay += ay;
+                        this.ay /= 2;
+                    }
+
+                    set_a_first(){
+                        if (Math.abs(this._mx) > 3) {
+                            this.ax = 0;
+                            this._mx = (Math.random() - 0.5) * 2;
+                        }
+                        if (Math.abs(this._my) > 3) {
+                            this.ay = 0;
+                            this._my = (Math.random() - 0.5) * 2;
+                        }
+                    }
+
+                        // 圆圈移动
+                        // 圆圈移动的距离必须在屏幕范围内
+                    move(w, h) {
+                        this._mx += this.ax;
+                        this._my += this.ay;
+
+                        this._mx = (this.x < w && this.x > 1) ? this._mx : (-this._mx);
+                        this._my = (this.y < h && this.y > 1) ? this._my : (-this._my);
+                        this._mr = (this.r < 10 && this.r > 1) ? this._mr : (-this._mr);
+                        this.x += this._mx / 2;
+                        this.y += this._my / 2;
+                        this.r += this._mr / 2;
+                        if (this.r <= 0){
+                            this._mr = -this._mr;
+                            this.r = -this.r;
+                        }
+                        }}
+            //鼠标点画圆闪烁变动
+                class currentCirle extends Circle {
+                    constructor(x, y) {
+                        super(x, y);
+                        this.r = 8;
+                        this.R = 30;
+                        this.rad = 0;
+                        this.circle = ['rgba(204, 204, 204,0.9)'];
+                    }
+
+                    drawLine(ctx, _circle) {
+                        let dx = this.x - _circle.x;  // 差距
+                        let dy = this.y - _circle.y;  // 差距
+                        let d = Math.sqrt(dx * dx + dy * dy);  // 勾股距离
+                        if (d < 180){
+                            ctx.beginPath();
+                            ctx.moveTo(this.x, this.y);   //起始点
+                            ctx.lineTo(_circle.x, _circle.y);   //终点
+                            ctx.closePath();
+                            ctx.strokeStyle = 'rgba(204, 0, 0, ' + String(1 - (d / 180)) + ')';
+                            ctx.stroke();
+                            _circle.set_a(dx / 1800, dy / 1800);
+                        }else{
+                            _circle.set_a_first()
+                        }
+                    }
+
+                    drawCircle(ctx) {
+                        let l = this.circle.length;
+                        for (let i of this.circle){
+                            let dx = this.R * Math.cos(this.rad);
+                            let dy = this.R * Math.sin(this.rad);
+                            ctx.beginPath();  // 开始绘制
+                            ctx.arc(this.x + dx, this.y + dy, this.r, 0, 2 * Math.PI);  // 画弧线
+                            ctx.closePath();  // 结束绘制
+                            ctx.fillStyle = i;
+                            ctx.fill();
+                            this.rad += 2 * Math.PI * (1 / l);
+                            if (this.rad >= 2 * Math.PI){
+                                this.rad -= 2 * Math.PI}
+                        }
+                        this.rad += Math.PI * (15 / 180);
+                    }
+                }
+                //更新页面用requestAnimationFrame替代setTimeout
+                window.requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;
+
+                let canvas = document.getElementById('canvas');
+                let ctx = canvas.getContext('2d');
+                let w = canvas.width = canvas.offsetWidth;
+                let h = canvas.height = canvas.offsetHeight;
+                let circles = [];
+                let current_circle = new currentCirle(0, 0);  // 鼠标位置
+                let update_times = 0;
+                let draw = function () {
+                    ctx.clearRect(0, 0, w, h);  // 清空
+                    for (let i = 0; i < circles.length; i++) {
+                        circles[i].move(w, h);
+                        circles[i].drawCircle(ctx);
+                        for (j = i + 1; j < circles.length; j++) {
+                            circles[i].drawLine(ctx, circles[j])
+                        }
+                    }
+                    if (current_circle.x) {
+                        current_circle.drawCircle(ctx);
+                        for (let k = 1; k < circles.length; k++) {
+                            current_circle.drawLine(ctx, circles[k])
+                        }
+                    }else{
+                        for (let k = 1; k < circles.length; k++) {
+                            current_circle.set_a_first()
+                        }
+                    }
+                    update_times += 1;
+                    if (update_times >= 100) {
+                        circles.push(new Circle(Math.random() * w, Math.random() * h));
+                        circles.shift();
+                        update_times = 0
+                    }
+                    requestAnimationFrame(draw)
+                };
+
+                let init = function (num) {
+                    for (var i = 0; i < num; i++) {
+                        circles.push(new Circle(Math.random() * w, Math.random() * h));
+                    }
+                    draw();
+                };
+                window.addEventListener('load', init(220));
+                window.onmousemove = function (e) {  // 鼠标进入范围
+                    // e = e || window.event;
+                    current_circle.x = e.clientX;
+                    current_circle.y = e.clientY;
+                };
+                window.onmouseout = function () {  // 鼠标移出反围
+                    current_circle.x = null;
+                    current_circle.y = null;
+
+                };
+        </script>
+    </body>
+</html>

static/Hello.html

@@ -10,7 +10,16 @@
             let host = 'http://127.0.0.1:5000/'
         </script>
         <canvas id="canvas" class="bg_canvas"></canvas>
-        <div class="screen">
+        <div class="screen" id="screen">
+            <script>
+                let xhr = new XMLHttpRequest();
+                xhr.onloadend = function () {
+                    let screen_div = document.getElementById('screen');
+                    screen_div.style.backgroundImage = 'url("Pic/match.png")';
+                    };
+                xhr.open('get', host + "img", true);
+                xhr.send();
+            </script>
             <div id='cotanTitle' class="cotan_title">
             </div>
             <div id="method" class="mode">
@@ -70,7 +79,7 @@
                 <button type="button" id="plugin" class="button white small" onclick="start('system')">系统管理</button>
 
                 <div class="nothing"></div>
-                <button type="button" id="process" class="button white small">通信管理器</button>
+                <button type="button" id="process" class="button white small"  onclick="window.open(host + '/communication');">通信管理器</button>
             </div>
             <script>
                 let screen_width = 1200;

static/hello.css

@@ -1,10 +1,5 @@
 /*h style*/
 
-body{
-    /*background: url("Pic/boat.png");*/
-    /*position: relative;*/
-}
-
 canvas.bg_canvas{
     background: #000000;
     display: block;
@@ -35,7 +30,7 @@ div.progressbar{
 }
 
 div.screen{
-    background: url("Pic/boat.png") repeat;
+    /*background: url("Pic/boat.png") repeat;*/
     width:1200px;
     height:800px;
     position:absolute;