質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
87.20%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Python

Pythonは、コードの読みやすさが特徴的なプログラミング言語の1つです。 強い型付け、動的型付けに対応しており、後方互換性がないバージョン2系とバージョン3系が使用されています。 商用製品の開発にも無料で使用でき、OSだけでなく仮想環境にも対応。Unicodeによる文字列操作をサポートしているため、日本語処理も標準で可能です。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

解決済

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

Kiiko1
Kiiko1

総合スコア19

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Python

Pythonは、コードの読みやすさが特徴的なプログラミング言語の1つです。 強い型付け、動的型付けに対応しており、後方互換性がないバージョン2系とバージョン3系が使用されています。 商用製品の開発にも無料で使用でき、OSだけでなく仮想環境にも対応。Unicodeによる文字列操作をサポートしているため、日本語処理も標準で可能です。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

1回答

0評価

0クリップ

273閲覧

投稿2022/03/03 08:13

編集2022/03/03 23:05

やりたいこと

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

できていないこと

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

エラーはこのように出ています。
イメージ説明

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.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); })

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

Javascript

$(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); })

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

イメージ説明

良い質問の評価を上げる

以下のような質問は評価を上げましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

気になる質問をクリップする

クリップした質問は、後からいつでもマイページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

  • プログラミングに関係のない質問
  • やってほしいことだけを記載した丸投げの質問
  • 問題・課題が含まれていない質問
  • 意図的に内容が抹消された質問
  • 過去に投稿した質問と同じ内容の質問
  • 広告と受け取られるような投稿

評価を下げると、トップページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

まだ回答がついていません

会員登録して回答してみよう

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
87.20%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問

同じタグがついた質問を見る

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Python

Pythonは、コードの読みやすさが特徴的なプログラミング言語の1つです。 強い型付け、動的型付けに対応しており、後方互換性がないバージョン2系とバージョン3系が使用されています。 商用製品の開発にも無料で使用でき、OSだけでなく仮想環境にも対応。Unicodeによる文字列操作をサポートしているため、日本語処理も標準で可能です。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。