Working Example with ReactJS
ddublon opened this issue · 13 comments
Is your feature request related to a problem? Please describe.
how to use webgl-plot in reactjs?
Describe the solution you'd like
simple example that works with ReactJS
Describe alternatives you've considered
github code or repo or codesandbox code
Additional context
there is this website https://webgl-plot-react.vercel.app/sine but not a code example how this was done
i have tried to make some according to this example but i dont know how to handle this error
Uncaught SyntaxError: The requested module '/node_modules/.vite/deps/webgl-plot.js?v=0a2c77f8' does not provide an export named 'default' (at App.tsx:3:8)
Have you tried this example?
The solution will not be "true" React code, but it works! Just start by copying and modifying the example.
thank you for your response, I will check that out! i am having a couple of difficulties, because i am using only javascript with out type script, but I will give it more focus and will tell you if i were able to solve it, or what is my problem if not,
do you think that for a better performance does it might be better to consider just using vanilla javascript or is it ok to still using ReactJS , does it even uses something from ReactJS to render the graph?
It depends. If you have a simple prototype app, go for vanilla JS like this. If you have an app which has complex user interactions and you want to deploy it to the public, then I recommend ReactJS plus a UI framework. See this app which uses ChakraUI. If you want maximum performance (i.e. FPS), then it is best to keep the UI minimal.
Hi there!, sorry for my late response, i am facing a big problem with the usage of request animation frame, do you think you can help me please?
I followed the example in the code you gave me here :
Have you tried this example?
but this example gets its data from a random() function
I need to build something that gets its data from a socket connection, and I dont understand the syntax when using requestAnimationFrame yet
i will try to figure out and will give a reproducible example here by the end of the day
when i duplicate the component, in the example you provided, it create an error, that only one canvas is beeing updated
how can i solve this?
this is my first issue i am trying to solve , and after that i will solve the connection error to the sockets
i was able to overcome this with some question to ChatGPT, but i dont understand why when i assign values with setY(i, 5 for example) that are greater then 1 i dont see them?
do you know how can i fix that?
i still have a problem with updating the chart : please give a look at this component
import { WebglPlot, WebglLine, ColorRGBA } from "webgl-plot";
import React, { useEffect, useRef, useState } from "react";
const MAX_POINTS = 240_000;
const generateRandomNumbers = () => {
var numbers = [];
for (var i = 0; i < 2200; i++) {
var number = Math.random() * 80000 - 40000;
numbers.push(Math.round(number));
}
return numbers;
};
const RAWGL = () => {
const canvasMain = useRef(null);
const canvasStyle = {
width: "20%",
height: "90vh",
};
const [connection, setConnection] = useState(true);
useEffect(() => {
if (connection) {
let id = 0;
const color = new ColorRGBA(0, 0, 0, 1);
const line = new WebglLine(color, MAX_POINTS);
const wglp = new WebglPlot(canvasMain.current);
line.arrangeX();
wglp.addLine(line);
let numbersIndex = 0;
const renderPlot = () => {
// get 2200 random numbers
const numbers = generateRandomNumbers();
// add the numbers to the line
for (let i = 0; i < numbers.length; i++) {
line.setY(numbersIndex + i, numbers[i]);
}
numbersIndex += numbers.length;
wglp.update();
id = requestAnimationFrame(renderPlot);
};
id = requestAnimationFrame(renderPlot);
// Cleanup function to cancel the animation frame when component unmounts.
return () => cancelAnimationFrame(id);
}
}, []);
return (
<>
<canvas style={canvasStyle} ref={canvasMain} />
</>
);
};
export default RAWGL;
I think that the function that make it slow is random when i changed it to the sinus function then it was faster, but i dont understand why Math.sin() is faster than Math.Random?
when i duplicate the component, in the example you provided, it create an error, that only one canvas is beeing updated
This is not recommended. You should have only one canvas and then plot everything there. See this example
i was able to overcome this with some question to ChatGPT, but i dont understand why when i assign values with setY(i, 5 for example) that are greater then 1 i dont see them?
OpenGL standard viewport is bounded between [-1,1]. If your values are out of these you have to scale using gScaleY and gScaleX. The "g" stands for global rather than per line. In your example, it is best if you do not change the gScale but normalize your Y values yourself.
this is my first issue i am trying to solve , and after that i will solve the connection error to the sockets
I suggest first prototyping the core in JS/TS and then once verified implementing the UI using React. Otherwise, it will be confusing.
https://codesandbox.io/s/webgl-reactjs-simple-example-53y92q?file=/src/App.js code sand box
convert it to pure JS/TS so it is easier to debug
I think that the function that make it slow is random when i changed it to the sinus function then it was faster, but i dont understand why Math.sin() is faster than Math.Random?
This is normal. The JS engine is a JIT compiler and tries to find out what you trying to do in realtime. If your sin() values are repetitive then it replaces them with a lookup table which is much faster than random() which is computationally intensive. Also, CodeSandBox will slow down your script because is running other things in the background.