Javascriptにおいてcanvasの色分け関数がうまくいかない。

Question

やりたいこと

Ajax を用いて、Pythonからデータを受け取り、それをもとに色分けをする関数を作っています。
pythonでgreen、yellow のそれぞれの IPアドレスを送信したら、「０」か「１」で返ってきます。
green が「１」なら緑で、yellow が「１」なら黄色で、greenもyellow も「０」なら赤色でcanvasで図形を描画したいです。

できていないこと

コンソールで確認したところ、色分けの関数が不十分で、canvasの図形描画がデフォルトの黒色になってしまいます。

エラーはこのように出ています。

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.5;
var cw = 0.0058



console.log(time, startpoint, client_w);


setInterval(repeat, 1000);

function repeat() {
  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);

  $(function() {
    function get_data(){
        $.ajax({
            url : '/data',
            type : 'GET',
            dataType : 'json',
        })
        //通信成功時の処理
        .done(function(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)"; }
          console.log(data(['green']['machine1']));
        })
          //通信失敗時の処理
          .fail(function () {
            console.log('データが取れていません');
          });
  
    }
  
    

    console.log(startpoint);
  })
}



$(document).ready(function () {

  get_data();
  setInterval(get_data, 10000);
})

問題があるであろう箇所↓

$(function() {
    function get_data(){
        $.ajax({
            url : '/data',
            type : 'GET',
            dataType : 'json',
        })
        //通信成功時の処理
        .done(function(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)"; }
          console.log(data(['green']['machine1']));
        })
          //通信失敗時の処理
          .fail(function () {
            console.log('データが取れていません');
          });
  
    }
  
    

    console.log(startpoint);
  })
}



$(document).ready(function () {

  get_data();
  setInterval(get_data, 10000);
})

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

Answer 1

function get_data(){ ...} は function repeat() { と $(function() { に囲まれていますが、このままだと get_data() を呼び出しているコードからは見えません。トップレベルに移動するか、$(document).ready(function () { の中に移動してください。

Comments

[Kiiko1]

ありがとうございます。
ご指摘いただいた部分を改善したらエラーが消えました！

しかし、色分けができず、黒色で表示されてしまう点が未だ改善できていない状況です。
私としては、上記Javascriptのコードの初めの$function（特にif文）に問題があるのではと思っています。ブラウザ上に表示した際、コンソールに「データが取れていません」すら表示されないので....

ご教授いただけると幸いです。よろしくお願いします。

[int32_t]

「get_data is not defined」以外のエラーが出ていませんか?
「.done(function(data){ 」の中で data の中身はどうなってますか? console.log(data) などして確認してください。

[Kiiko1]

エラーはこのように↑でています。（投稿部分の1番下にスクリーンショットを添付させていただきました。）

コンソールでは、「time, client_w, startpoint」の値が表示されるのみで、そもそもこの関数をループしていないのではと思っています。
コマンドプロンプトでpythonからデータを受け取っていることは確認できています。