Requirement to create a custom page with HTML and dynamic Javascript code

1
Hello All, I have been working on Mendix to create web applications and pretty much it satisfies most of the requirement like building responsive pages and combining that with microflows and get the job done. But now I have a requirement of consuming a 3rd party SDK / Library which is Vertex visualization for rendering CAD 3D models in a browser. Their SDK helps in rendering the model in their Cloud environment and streams the pixel data using a Socket connection which I can view in a viewer JS library in a browser HTML page. So if I would have to build this outside Mendix, I just have to create a simple HTML page with below code. <html> <head> <link rel="stylesheet" href="https://unpkg.com/@vertexvis/viewer@latest/dist/viewer/viewer.css" /> <script type="module" src="https://unpkg.com/@vertexvis/viewer@latest/dist/viewer/viewer.esm.js" ></script> <script nomodule src="https://unpkg.com/@vertexvis/viewer@latest/dist/viewer.js" ></script> <script> window.addEventListener('DOMContentLoaded', () => { main(); }); async function main() { const viewer = document.querySelector('#viewer'); const YOUR_STREAM_KEY = '7ylSMPyZ9BwoakUm0RyhVXyuljVTsGnFpnAw'; await viewer.load(`urn:vertexvis:stream-key:${YOUR_STREAM_KEY}`); viewer.addEventListener('tap', async function (event) { const viewer = document.querySelector('#viewer'); const { position } = event.detail; const scene = await viewer.scene(); const raycaster = await scene.raycaster(); console.log(await raycaster.hitItems(position)); }); } </script> </head> <body> <vertex-viewer id="viewer" camera-controls="true" style="width:auto;height:auto;canvas-background:#F2F2F2"></vertex-viewer> </body> </html> It has 3 characteristics: Stream Key is generated dynamically outside and needs to be replaced in above JS snippet. Above code has both HTML and JavaScript code interdependent on each other. I need to create a custom<vertex-viewer>html tag in the page to load the 3d model which will then use a socket connection to vertex Cloud api and streams the 3d model pixel data. So If i rotate or pan or zoom in this viewer, the model is rendered and resulting pixel data is streamed back.   Now I have to create this in Mendix. I have created all the other Backend Rest APIs and able to generate a Stream key, But I am not finding a way to create above HTML page with Javascript code in Mendix. I tried using HTML / JS Snippet widget. But that is for static HTML and JS Code. I want to dynamically pass Stream key and could not find or understand how to do it. I am exploring the ways to create a new Pluggable widget myself. But not able to completely wrap my head around how to achieve both HTML and Javascript in a single widget.  Exploring how to create a custom JavaScript action. But how do I add a dependency for viewer JS which comes from NPM. Once i add this external dependency how to call this in a Mendix Page.   Resulting Page outside Mendix would look like in the below Image where the Model will be rendered in the browser window. Any help would be appreciated in this regard. Thanks, Aniketh Raj
asked
3 answers
3

Hi Aniketh, hope you are still here and have not left the building because no one responded. The reason for not getting a response is that your requirement is highly unusual and most Mendix developers only develop for administrative applications. Nevertheless, there are some folks that might help you out. Take a look at these examples:

https://visualizationsampl-sandbox.mxapps.io/

or https://tbn-d3animatedsank-sandbox.mxapps.io/ (nice vietnamese company more than average using Mendix’ possibilities)

or https://babylon3d-sandbox.mxapps.io/ (although it does not seem to go out of sleepmodus…)

So Mendix is unlocking javascript-possibilities, React since version 8. 

 

answered
2

Hi Aniketh Raj,

You can use HTMLSnippet with Context and you have to add the external js and css link in index.html file.

answered
0

Try using same thing with appstore module given below:

https://marketplace.mendix.com/link/component/56

answered