javascript - 将值从 p5 草图传递到 React(使用 react-p5-wrapper)
问题描述
我现在有一个 p5 网络摄像头视频预测系统正在工作。目前,我正在尝试将其插入 React 应用程序以创建更完整的 Web 应用程序。
我的问题是,预测现在只在我的 p5 草图中进行,我希望将预测值传递到 React 的 App.js 以进行进一步的构造。有没有这样做的方法?
我正在使用 react-p5-wrapper 顺便说一句。
这是sketch.js:
import "react-p5-wrapper/node_modules/p5/lib/addons/p5.dom";
import ml5 from 'ml5';
let mobileNet;
let video;
let label='model loading...';
function sketch (p) {
p.setup = function () {
p.createCanvas(1000, 1000);
//imitialize the webcam stream in a object
video = p.createCapture(p.VIDEO);
//hide the webcam stream
video.hide();
//initialize the mobilenet object with a callback
mobileNet= ml5.imageClassifier('MobileNet',video,ModelLoaded);
};
p.draw = function () {
p.image(video,0,0);
p.textSize(16);
p.fill(255,140,0);
p.text(label,10,450);
};
};
function ModelLoaded()
{
console.log('Model is ready');
//predicting the image
mobileNet.predict(result)
}
//callback function to get the results
function result(err,res)
{
//check for errors
if(err)
{
//log the error if any
console.error(err)
}
else{
//get the label from the json result
label = res[0].className;
//predicting the image again
mobileNet.predict(result)
}
}
export default sketch;
我的 App.js 目前看起来像这样:
import React, { Component } from 'react';
// import logo from './logo.svg';
import './App.css';
import sketch from './sketch';
import P5Wrapper from 'react-p5-wrapper';
class App extends Component {
componentDidMount(){
}
render() {
return (
<div className="App">
<P5Wrapper sketch={sketch} />
</div>
);
}
}
export default App;
任何帮助表示赞赏!
解决方案
我试了一下,想出了一个解决方案。它不是很优雅,但应该这样做。我在 sketch.js 中做了一个非常简单的测试项目,我尝试说明两种访问信息的方法。需要注意的是timesClicked变量和myCustomRedrawAccordingToNewPropsHandler函数。
export let timesClicked = 0;
export default function sketch (p) {
p.setup = function () {
p.createCanvas(300, 300);
};
p.draw = function () {
p.background(0);
p.fill(255);
p.ellipse(p.mouseX, p.mouseY, 100, 100);
};
p.myCustomRedrawAccordingToNewPropsHandler = function(newProps){
if(newProps.getCoords){
p.sendCoords = newProps.getCoords;
}
}
p.mouseClicked = function() {
p.sendCoords(p.mouseX, p.mouseY);
timesClicked++;
}
};
timesClicked是一个可以导入的变量,用于计算鼠标被点击的次数。它可以从草图范围内修改并从其他文件导入。
myCustomRedrawAccordingToNewPropsHandler是一个在组件接收道具时从 react-p5-wrapper 库调用的函数,并且可以在草图中定义。
有了这个,你的 App.js 文件可以这样修改:
import React, { Component } from 'react';
import P5Wrapper from 'react-p5-wrapper';
import sketch from './sketch';
import {timesClicked} from './sketch';
function getCoords(){
console.log(arguments);
}
class App extends Component {
componentDidMount(){
}
render() {
return (
<div className="App">
<P5Wrapper sketch={sketch} getCoords={getCoords}/>
</div>
);
}
}
export default App;
document.body.onkeyup = function(e){
if(e.keyCode == 32){
console.log(timesClicked);
}
}
运行时,每次点击时,草图都会执行 App.js 文件中的getCoords()函数,或者,每次按下空格键时,都会从 App.js 文件中访问timesClicked变量。我认为您可以修改它以“发送”或“读取”预测值。
推荐阅读
- android - 如何为我的移动应用程序选择平台以及如何将其演变为多个平台?
- php - 创建没有库的excel文件
- go - 配置 [go build]/[go test] 等以在诊断消息中显示绝对路径
- kotlin - 将 Period 添加到 startDate 不会产生 endDate
- node.js - 用于 NodeJS 的 Google App Engine 标准环境中的 Memcache
- laravel - Route::has note 检测路由资源
- wordpress - 在 Wordpress 上使用网格插件记录错误
- google-analytics - 来自 Google Analytics 中外部域的奇怪流量
- python - 在 LSTM 中关闭 Return_Sequence 后如何解决尺寸问题?
- ruby - 使用 openssl ruby 使用密码加密私钥