With this setup it is possible to create a website (React-App) and use it wihtin vvvv as e.g. a (touch) interface. The website and vvvv communicate through a websocket Server, which is runnning locally in vvvv. The website sends JSON data to vvvv and vice versa. In this case you get the touch gesture and movement/position as a string.
More infos in the code and vvvv patch :D
❗ This project uses additional packages, so you need node.js and a package manager (npm comes with node.js)
Just open the vvvv patch and start the web-app. See further down on how to start the web-app. You should see a Stride Window like this:
The "Click me" Button is rendered in the web and sends a String to vvvv, which is then rendered as a skia graphics. The "Test" Button is rendered in vvvv (ImGui) and sends a String to the web-app, which results in a new html element rendering. You can also touch/click anywhere on the screen, which changes the color of the red circle and by dragging/pinching, you can move/scale the circle. This circle is rendered in vvvv and the information comes from the web-app. In this case, there is no touhc/mouse input from vvvv side.
In the project directory (/react-template), you can run:
Installs all necessary packages. This web-app will not work without the packages!
Runs the app in the development mode.
Open http://localhost:3000 to view it in your browser.
The page will reload when you make changes.
You may also see any lint errors in the console.
Builds the app for production to the build folder.
It correctly bundles React in production mode and optimizes the build for the best performance.
Your app is ready to be deployed or served locally!
Serves the build on a local server.
For more information: serve npm package documentation
You can learn more in the Create React App documentation.
To learn React, check out the React documentation.
There is also a folder called "Web_Keyboard_for_react" which contains a styled keyboard Component, which you can import to your web-app and use as a virtual Keyboard.