やりたいこと
Ajax を用いて、Pythonからデータを受け取り、それをもとに色分けをする関数を作っています。
pythonでgreen、yellow のそれぞれの IPアドレスを送信したら、「0」か「1」で返ってきます。
green が「1」なら緑で、yellow が「1」なら黄色で、greenもyellow も「0」なら赤色でcanvasで図形を描画したいです。
詳細
Javascript (Ajax) の ファイルが2つあります。
片方はHTML に Javascriptで「/data」というURLで記述し、もう片方は「/data2」というURLでJavascriptのファイルに記述っていう風にして、1つのPythonのファイルからデータを受け渡してもらうという状況です。
わからないこと
Javascript ファイルに記述している下記↓の部分が表示されません。
そもそもファイルが2つあることが問題なのか、Javascriptに記述しているデータの受け渡しの書き方が違うのかがわかりません。
該当箇所で、コンソールにエラーは出ていません。
また、コマンドプロンプトで確認したところ、機械からデータは受け取れています。
Javascript
$.ajax({ url : '/data2', type : 'GET', dataType : 'json', }) //通信成功時の処理 .done(function(data){ console.log(data) if (data(['green']['machine1'])==1) {ctx1.fillStyle = "rgb(0, 255, 0)"; } else if (data(['yellow']['machine1'])==1) { ctx1.fillStyle = "rgb(255, 255, 0)"; } else { ctx1.fillStyle = "rgb(255, 0, 0)"; } }) //通信失敗時の処理 .fail(function(data) { console.log('データが取れていません'); }) //通信成功・失敗を問わず .always(function(data){ console.log('通信中'); }); } setInterval (abc, 1000);
コード全貌
Javascript
var canvas1 = document.getElementById("myCanvas1"); var ctx1 = canvas1.getContext("2d"); let client_w = document.getElementById("myCanvas1").clientWidth; var e = new Date(); var now = new Date(); var time = parseInt(e.getHours()*3600) + parseInt(e.getMinutes()*60) + parseInt(e.getSeconds()); //3600 var startpoint = (time/86400)*client_w*0.3; var cw = 0.0058 console.log(time, startpoint, client_w); $(function (){ function abc(){ console.log('あいうえお'); var now = new Date(); time = parseInt(e.getHours()*3600) + parseInt(e.getMinutes()*60) + parseInt(e.getSeconds()); if (time >= 86399){ startpoint = 0; ctx1.clearRect(0, 30, client_w, 60) } console.log(time, client_w); ctx1.fillRect(startpoint, 30, 0.0058, 60); startpoint = startpoint + cw; console.log(startpoint); $.ajax({ url : '/data2', type : 'GET', dataType : 'json', }) //通信成功時の処理 .done(function(data){ console.log(data) if (data(['green']['machine1'])==1) {ctx1.fillStyle = "rgb(0, 255, 0)"; } else if (data(['yellow']['machine1'])==1) { ctx1.fillStyle = "rgb(255, 255, 0)"; } else { ctx1.fillStyle = "rgb(255, 0, 0)"; } }) //通信失敗時の処理 .fail(function(data) { console.log('データが取れていません'); }) //通信成功・失敗を問わず .always(function(data){ console.log('通信中'); }); } setInterval (abc, 1000); })
HTML
<script> $(function() { function get_data(){ $.ajax({ url : '/data', type : 'GET', dataType : 'json', }) //通信成功時の処理 .done(function(data){ $('#result1').text(data['production']['machine1']); $('#result2').text(data['cycletime']['machine1']); $('#result3').text(data['production']['machine3']); $('#result4').text(data['production']['machine4']); $('#result5').text(data['production']['machine5']); $('#result6').text(data['production']['machine6']); $('#result7').text(data['production']['machine7']); $('#result8').text(data['production']['machine8']); $('#result9').text(data['production']['machine9']); $('#result10').text(data['production']['machine10']); $('#result11').text(data['production']['machine11']); $('#result12').text(data['production']['machine12']); $('#result13').text(data['production']['machine13']); $('#result14').text(data['production']['machine14']); $('#result15').text(data['production']['machine15']); $('#result16').text(data['production']['machine16']); $('#result17').text(data['production']['machine17']); $('#result18').text(data['production']['machine18']); $('#result19').text(data['production']['machine19']); $('#result20').text(data['production']['machine20']); $('#result21').text(data['production']['machine21']); $('#result22').text(data['production']['machine22']); $('#result23').text(data['production']['machine23']); $('#result24').text(data['production']['machine24']); }) //通信失敗時の処理 console.log("更新しています") } get_data(); setInterval(get_data, 10000); }); </script>
Python
import socket from flask import Flask, render_template from flask_socketio import SocketIO,send, emit from decimal import Decimal import logging import socket import webbrowser import math import time import datetime import threading from openpyxl import * import pandas import json import threading machines_ip_address = ['ここにIPアドレス'] production_command = ['ここにIPアドレス'] cycletime_command = ['ここにIPアドレス'] green_command = ['ここにIPアドレス'] yellow_command = ['ここにIPアドレス'] def python_to_html(i,j,k,l,m): time.sleep(3) client5 = socket.socket(socket.AF_INET, socket.SOCK_STREAM) try: client5.connect((i,8501)) except: print("PLC接続NG") return 0, 0 Production5 = j Cycle_Time5= k Green5 = l Yellow5 = m client5.send(Production5.encode("ascii")) response5 = client5.recv(64) response5 = response5.decode("UTF-8") response5 = int(response5) client5.send(Cycle_Time5.encode("ascii")) response51 = client5.recv(64) response51 = response51.decode("UTF-8") response51 = int(response51) response51 = response51 * Decimal('0.1') client5.send(Green5.encode("ascii")) response52 = client5.recv(64) response52 = response52.decode("UTF-8") response52 = int(response52) client5.send(Yellow5.encode("ascii")) response53 = client5.recv(64) response53 = response53.decode("UTF-8") response53 = int(response53) print("send : " + Production5) print("send : " + Cycle_Time5) print("send : " + Green5) print("send : " + Yellow5) print("Received :" ,response5) print("Received :" ,response51) print("Received :" ,response52) print("Received :" ,response53) client5.close() return response5, response51, response52, response53 app = Flask(__name__) @app.route('/', methods=['GET']) def index(): return render_template('test2.html') @app.route('/data', methods=['GET']) def send_data(): one = python_to_html(" IPアドレス ") json_data = {'production':{'machine1':one[0]}, 'cycletime':{'machine1':one[1]}} return json_data
まだ回答がついていません
会員登録して回答してみよう