受け取ったデータをもとにcanvasで描画したい

やりたいこと

python を使用して機械からデータを受け取り、それをAjexで javascript に変換したのち、canvasで図形を描画したいです。
機械からのデータに応じてcanvas で描画する図形の色を変えたいです。

機械からのデータを受け取ることには成功しているので、javascript (jquery) 側に問題があるのではと思っています。

詳細

pythonでgreen、yellow のそれぞれの IPアドレスを送信したら、「０」か「１」で返ってきます。
green が「１」なら緑で、yellow が「１」なら黄色で、greenもyellow も「０」なら赤色でcanvasで図形を描画したいです。

Python
1import socket
2from flask import Flask, render_template
3from flask_socketio import SocketIO,send, emit
4from decimal import Decimal
5import logging
6import socket
7import webbrowser
8import math
9import time
10import datetime
11import threading
12from openpyxl import *
13import pandas
14import json
15import threading
16
17machines_ip_address = ['ここにIPアドレス']
18
19production_command = ['ここにIPアドレス']
20
21cycletime_command = ['ここにIPアドレス']
22
23green_command = ['ここにIPアドレス']
24
25yellow_command = ['ここにIPアドレス']
26
27
28def python_to_html(i,j,k,l,m):
29
30    time.sleep(3)
31    client5 = socket.socket(socket.AF_INET, socket.SOCK_STREAM)
32
33    try:
34        client5.connect((i,8501))
35    except:
36        print("PLC接続NG")
37        return 0, 0
38
39
40    Production5 = j
41    Cycle_Time5= k
42    Green5 = l
43    Yellow5 = m
44
45    client5.send(Production5.encode("ascii"))
46    response5 = client5.recv(64)
47    response5 = response5.decode("UTF-8")
48    response5 = int(response5)
49
50    client5.send(Cycle_Time5.encode("ascii"))
51    response51 = client5.recv(64)
52    response51 = response51.decode("UTF-8")
53    response51 = int(response51)
54    response51 = response51 * Decimal('0.1')   
55    
56    client5.send(Green5.encode("ascii"))
57    response52 = client5.recv(64) 
58    response52 = response52.decode("UTF-8")
59    response52 = int(response52)
60
61    client5.send(Yellow5.encode("ascii"))
62    response53 = client5.recv(64) 
63    response53 = response53.decode("UTF-8")
64    response53 = int(response53)
65
66
67
68    print("send : " + Production5)
69    print("send : " + Cycle_Time5)
70    print("send : " + Green5)
71    print("send : " + Yellow5)
72
73    print("Received :" ,response5)
74    print("Received :" ,response51)
75    print("Received :" ,response52)
76    print("Received :" ,response53)
77
78    client5.close()
79
80    return response5, response51, response52, response53
81
82
83
84app = Flask(__name__)
85@app.route('/', methods=['GET'])
86def index():
87    return render_template('test2.html')
88
89@app.route('/data', methods=['GET'])
90def send_data():
91    one = python_to_html(" IPアドレス ")
92    
93
94    json_data = {'production':{'machine1':one[0]}, 'cycletime':{'machine1':one[1]}}
95    return json_data
96
97

Javascript
1
2
3
4var canvas1 = document.getElementById("myCanvas1");
5var ctx1 = canvas1.getContext("2d");
6let client_w = document.getElementById("myCanvas1").clientWidth;
7var e = new Date();
8var now = new Date();
9var time = parseInt(e.getHours()*3600) + parseInt(e.getMinutes()*60) + parseInt(e.getSeconds()); //3600
10var startpoint = (time/86400)*client_w*0.5;
11var cw = 0.0058
12
13
14
15console.log(time, startpoint, client_w);
16
17
18setInterval(repeat, 1000);
19
20function repeat() {
21  var now = new Date();
22	time = parseInt(e.getHours()*3600) + parseInt(e.getMinutes()*60) + parseInt(e.getSeconds());
23
24	if (time >= 86399){
25		startpoint = 0;
26		ctx1.clearRect(0, 30, client_w, 60)
27	}
28
29  console.log(time, client_w);
30    ctx1.fillRect(startpoint, 30, 0.0058, 60);
31    startpoint = startpoint + cw;
32
33    console.log(startpoint);
34
35  $(function() {
36    function get_data(){
37        $.ajax({
38            url : '/data',
39            type : 'GET',
40            dataType : 'json',
41        })
42        //通信成功時の処理
43        .done(function(data){ 
44    
45          if (data['response52']==1)  {ctx1.fillStyle = "rgb(0, 255, 0)";
46           } else if (data['response53']==1) { ctx1.fillStyle = "rgb(255, 255, 0)";
47           }	else  { ctx1.fillStyle = "rgb(255, 0, 0)"; }
48         
49        })
50          //通信失敗時の処理
51  
52          console.log("更新しています")
53    }
54  
55    console.log(time, client_w);
56    ctx1.fillRect(startpoint, 30, 0.0058, 60);
57    startpoint = startpoint + cw;
58
59    console.log(startpoint);
60  })
61}
62
63
64(document).ready(function () {
65
66  get_data();
67  setInterval(get_data, 10000);
68})

(↓該当範囲のみ抜粋）

HTML
1<!DOCTYPE html>
2<html>
3<head>
4 <title>Gunchart</title>
5 <meta charset="utf-8">
6  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
7  <link rel="stylesheet" href="{{url_for('static',filename='custome.css')}}">
8  <link rel="stylesheet" href="{{url_for('static',filename='bootstrap.min.css')}}">
9  <link rel="stylesheet" href="{{url_for('static',filename='bootstrap.css')}}">
10  <link rel="preconnect" href="https://fonts.googleapis.com">
11  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
12  <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500&display=swap" rel="stylesheet">
13</head>
14
15<script>
16    $(function() {
17        function get_data(){
18            $.ajax({
19                url : '/data',
20                type : 'GET',
21                dataType : 'json',
22            })
23            //通信成功時の処理
24            .done(function(data){
25                $('#result1').text(data['production']['machine1']);
26                $('#result2').text(data['cycletime']['machine1']);
27            })
28            //通信失敗時の処理
29    
30            console.log("更新しています")
31        }
32        get_data();
33        setInterval(get_data, 10000);
34    });
35    
36    </script>
37
38
39<body>
40    <h1>Ganttchart</h1>
41 <div class="set0" style="display:flex;justify-content: space-between; height: 25px;">
42 <div class="set" style="display:flex;justify-content: space-between;">
43  <div class="row" style="margin-bottom: 20px; margin-top: 5px;">
44    <div class="col-md-12" style="padding-right: 0px; padding-left: 5px;">
45      <div class="row" style="padding-right: 5px; padding-left: 10px;  margin-left: 5px;">
46
47        <div class="col-md-12">
48          <div class="row">
49            <div class="col-md-2 black_style1">
50             <div class="container">
51               <p class="text_style2" id="result1"></p>
52             </div>
53            </div>
54            <div class="col-md-2 black_style1">
55              <div class="text_style4">
56                <input type="text" style="width: 50px; height: 15px; margin: -10px;" id="result1" onkeydown="machineOrder('1',event)">
57              </div>
58            </div>
59            <div class="col-md-2 black_style1">
60              <div class="text_style2" id="result1"></div>
61            </div>
62            <div class="col-md-2 black_style1">
63              <div class="text_style2" id="result1"></div>
64            </div>
65            <div class="col-md-2 black_style1">
66              <div class="text_style2" id="result2"></div>
67            </div>
68            <div class="col-md-2 black_style1">
69              <div class="text_style2" id="result1"></div>
70            </div>
71          </div>
72          <div class="row">
73            <div class="col-md-12 black_style2">
74              <div style="width: 100%;" >
75                <div style="height: 20px;" id="chart1">
76
77                  <canvas class="canvas_style" id="myCanvas1"></canvas>
78
79                </div>
80                <div style="display:flex;justify-content: space-between;">
81                  <div class="text_style1">0</div>
82                  <div class="text_style1">2</div>
83                  <div class="text_style1">4</div>
84                  <div class="text_style1">6</div>
85                  <div class="text_style1">8</div>
86                  <div class="text_style1">10</div>
87                  <div class="text_style1">12</div>
88                  <div class="text_style1">14</div>
89                  <div class="text_style1">16</div>
90                  <div class="text_style1">18</div>
91                  <div class="text_style1">20</div>
92                  <div class="text_style1">22</div>
93                  <div class="text_style1">24</div>
94                </div>
95              </div>
96            </div>
97          </div>
98        </div>
99      </div>
100    </div>
101  </div>
102 
103</div>
104</div>
105</div>
106</div>
107</div>
108</div>
109</div>
110</body>
111<script type="text/javascript" src="{{ url_for('static', filename='custome.js') }}"></script>
112</html>

行動規範の内容に同意します

回答1件

ベストアンサー

python
1json_data = {'production':{'machine1':one[0]}, 'cycletime':{'machine1':one[1]}}

これだとjsonではなく辞書型のオブジェクトのままなので、json形式に変換する必要があるのではないでしょうか。

python
1import json
2
3中略
4
5data = {'production':{'machine1':one[0]}, 'cycletime':{'machine1':one[1]}}
6json_data = json.dumps(data)
7return json_data