Building an Onshape model viewer

alan_baljeu

As my next step towards the creation of some amazing Onshape partner app, I want to figure out how to create a nice model view on a web page.  What is the best way to go with this?  Do you recommend a particular project from github as a reference?  Some third party control to integrate?

NeilCooke

This would be the best one using three.js https://github.com/onshape-public/app-gltf-viewer

NikNYC

Consider porting it to Babylon which is a mighty upgrade from ThreeJS.

alan_baljeu

@NeilCooke What is the deal with needing Heroku?  So far I haven't gotten into any service like Heroku.  Should I?

NeilCooke

@alan_baljeu you can run it off your own servers or any other, it's just that Heroku is a popular, low cost cloud hosting platform.

billy2

@alan_baljeu you're going to need a server to serve up onshape content. This isn't something onshape does. Heroku is one of many online servers in the cloud. Stay away from hosted solutions like cpanel, wordpress or anything shared. You'll need root access to your server.

Once you purchase a server, then you'll have to load up some server software. Basically you'll need to serve up a web server handling clients. I'd use nginx & nodejs with sockets.

Once you're handling client requests, you'll have to serve up webgl with some kind of display package. ThreeJS has been around for a long time and Babylon is a more recent incarnation. Neither of these 2 will render OS content. You get to build this.

Your server will ask Onshape for your data or if you want this to be a product, you'll have to register with the onshape app store to allow access to other people's data (this is the Oauth stuff which is included in the example code). In the past this data was STL and more recently it is now gltf. STL had limited part color information and no understanding of an assembly structure. gltf has more information contained in the format transfer but still doesn't understand the assembly structure. gltf won't give you a webpage that looks like onshape running in a browser, you'll have to build it. You'll have to ask onshape for the parts in an assembly and then build the structure in a client. You'll have to create shaders that look like Onshape in order for your website to look like onshape. There won't be a feature tree unless you build it. gltf is just a polyhedral transfer of geometry.

@NeilCooke is your example running anywhere?

alan_baljeu

I looked into Babylon vs Three.  It seems Babylon is preferred but not universally.  They say it makes coding easier.  Hoping not much will be required to make this happen. 

The functions I'll need are basically zoom/rotate with the mouse, and show/hide parts.  Also would like to display dimensions and labels.  Is any of that possible with these technologies?  Nothing stands out on the Three site about this.

My dev environment is C#, which unfortunately means a bit of reworking server side code from the js example.  I don't imagine a line by line translation, just figure out what calls the gltf example is making and do the same.  And node just won't be the tool then.  Client-side js can probably be mostly unchanged?

billy2

I believe babylon is a microsoft product trying to capture this new world of webgl that's emerging. Webgl has a lot of traction right now and things are changing quickly. My problem with these libraries is that the client has to download them making whatever you're building slow. Also, many of these libraries (three.js) aren't modularized so you can't load what you're needing for your application.

With three.js there's a orbital module that I had to re-write so it wouldn't stop rotating at 180 degrees. It was a little bit of work to match OS rotate behaviour. In OS, and most CAD, you can just keep rotating the model, with three.js it stops. Dimension between parts? you'll be writing that in webgl, I haven't seen a library with that included. Show/hide parts, assemblies? thats your data structure you've created that gets activated with a mouse over event to hide/show/ghost stuff.

I'm not a windows guy so C# is a foreign language and I'm not sure how that azure thing is setup. I suppose you can map json objects to C# objects and manage the data in C#. This data management will be a significant task and needs to be written in a thoughtful manner to make your web viewer a success.

Most of the work for an Onshape web viewer will be on the client side handling data packets from OS servers. OS uses Json and the challenge will be to ask for the assembly structure and replicating this structure inside the client. It parses fairly quickly and speed shouldn't be an issue. Then you'll have to associate this structure with the polyhedral part data sets that you've asked for separately. Viewing a large assembly will be a flurry of requests. Eventually you'll want to store the data locally and start running a cache system to make your viewer responsive.

There's a lot to building a web viewer for OS and I think the guy that does it 1st will become popular. 

On the server side, their example is using oauth which allows users to use your app with their own data. Another option is to log into your account and access your data without oauth, this is simple. With this approach, the user just shares his data with you. There's other ways to access data from OS servers that might be better for the average guy just browsing the internet. I don't think you want someone to have to login to use your viewer.

If you getting something running, send me the url I'm interested in your progress.

alan_baljeu

Thank you for your contribution to the discussion.  I follow you quite well.  Based on your explanation, yes that is quite a bit of work, but also fairly doable.  To get the poly model from Onshape and cache it makes complete sense.    JSON is not a problem of course, that's just the language of the web api.  

Regarding the last paragraph, are you suggesting my webserver logs into my account to access user model that the user shares via Onshape with me?  Not a route I had in mind, but of course that could work.  It's mainly a question of what people want to be viewed and by whom.  If it was your own company's models, you would have an OnShape account to login presumably.  If you want to make a model public, then I guess just the website could use my account.

alan_baljeu

I have completed the instructions for app-gltf-viewer, got a page running on Heroku, and can add it as a tab in a document, but it errs from OnShape.

The page reads:  Error while requesting document elements: TypeError: json is not iterable

The offending code:

    // Get the Elements for the dropdown

    fetch(`/api/elements${window.location.search}`, { headers: { 'Accept': 'application/json' } })

       .then((resp) => resp.json())

       .then(async (json) => {

           for (const elem of json) {
               .......

            }).catch((err) => {

          displayError(`Error while requesting document elements: ${err}`);

     });

Any ideas?  Is this where to ask?

billy2

I'd look at $[err] on the heroku server console. It's throwing an error versus giving you data. I'd suspect the error is "who are you?". The error is weird because you haven't parsed json, I'd look at console.log resp and then look at resp.json() and see what they're doing in there. json is now an object in your code which is not what the servers return.

There are more reasons why this won't work than why it will work. It's probably permissions  or ${window.location.search} is wrong.

Get your permissions working with a simple call to onshape and make sure your authorized and getting through. Use the api explorer to make a simple call to the servers and then get your code to make the same call and get the same results. You'll never get anywhere until the permissions are correct.

The api explorer is behind OS and gltf isn't documented very well. You'll have to console debug in your browser to see what OS is sending to the servers to get the gltf call and then compare with ${window.location.search}.

Do you have the permissions correct? Have you gotten any data back from the servers?

alan_baljeu

Thanks for the response.  Anyway, the answer is I got a 500 error.  So there was no Json to scan.

alan_baljeu

Okay finally have time to nail this down. 

It appears the issue starts with 

Access to XMLHttpRequest at 'https://appstore.onshape.com/api/storeEntrys/F3A4CERWJDBDUHRRUPKLCIQ6USWUTFAKN2OYW4A=' from origin 'https://cad.onshape.com' has been blocked by CORS policy: Request header field accept-language is not allowed by Access-Control-Allow-Headers in preflight response.

That store key is a private store I created.

Nope that's an irrelevant quirk in the way OS deals with appstore apps.  The real issue seems to be back to the 500.

Ethan_K

Hi @alan_baljeu ,
Please send the details of the 500 request and response to api-support@onshape.com . We can then try to understand what is causing this from the Onshape side.

Cheers,
-Ethan

billy2

@alan_baljeu Ethan's very helpful and has helped me many times.

I'd backup a bit and start at square one. Can you get the api-explorer to work and is it returning data? After that, run the call through your website. These are 2 different things. The api-explorer is hard to understand and then getting your put/get calls from your server working is even harder. 

I've downloaded the https://github.com/onshape-public/app-gltf-viewer and it's really nice code. I'm currently switching it out from Heroku and porting it to a generic ubuntu server. 

This is something new, I like it, I need to figure this out, I don't use this:

const passport = require('passport');
const OnshapeStrategy = require('passport-onshape');

I just brute forced my headers and constructed them myself. It took a lot of time to get Onshape to talk back to me. The code I use is in a module that I wrote a long time ago and I haven't been in that module for a while. I believe "500's" are server errors and probably permission errors. 

I'd strip your code down to a simple get call and get it working. Your site should be receiving exactly what the api-explorer returns.

FYI The app-gltf-viewer is a bitch'n website and is a great example on how to get something up and running. The only thing it's missing is a react client. Adding react to this little server configuration would make it an awesome little 1st time server.

alan_baljeu

Yes billy2.  Using the api-explorer, the identical call documents/d/w/elements returns 200 and data.  I will get with ethan what the obstacle is.

I don't understand what you mean by "app-gltf-viewer is a bitch'n website".  Do you mean the website you set up using that onshape-public code?  You say it's missing a react client.  Do you mean you want to write webpage front ends using react, and that isn't available with the provided code?  What advantage would it give you if it had this?

billy2

Alan please check your headers on your requests. Onshape won't tell you to "please add data-type to communication", it just says, 500 broken. I think this is your problem. Compare your headers with communications that are working. There's no debugging info sent back on the requests. You have to get them right. Check what the api-explorer is sending and make yours look like them.

I do a lot of nodejs programming, app-gltf-viewer is a good starter for people setting up a server using nodejs. It's nicely done using some newer modules. I haven't looked at the client side code yet and wonder how sophisticated the rendered page will look. Do they supply the shaders to mimic onshapes look & feel? I'm hoping so, but I doubt it. Why did they put redis in there? To manage hide/show states? For persistence? Should you get data after every refresh? Did they supply a cache validation algorithm?

Currently your fighting the server and getting data from Onshape. You'll get it soon and it'll seem easy. But this is only a small piece of the puzzle. Eventually you'll need to send something to the client. Client side code is a mess with javascript and I think react is becoming the preferred solution. Possibly C# fixes this.

Three.js is pretty old and there needs to be something newer & better. I think it's coming as a module in react, angular or vue. There has to be a small army of programmers working on this somewhere. Maybe it's going to be C# & Babylon. This is the future of computing, this is the new frontier or wild west.

There's a lot more to this than permissions. It'll get more fun, hang in there.

alan_baljeu

If you ever had time for a live session going through these things with me (not that I expect it in the slightest), it would save hours. Currently it's like I'm not learning a system, but rather a whole network of interconnected systems all at once: Onshape, oauth, their API, heroku, Angular, etc., etc.

billy2

PM me your phone number, I was thinking last night that we could compare headers. Alan, I wrote my permissions years ago and I don't think about it now. Currently I just think about the things I'm trying to do. You'll get there.

It's new and it seems strange. A few months from now you'll look back and say that it wasn't that hard.

bill_schnoebelen

I started trying to get gltf-viewer sample working over the weekend. My second attempt at oauth2. What is the process to see this in the app store?

For the oauth2, does this have to run in a public server to work? I tried ngrok to see my localhost but this does not seem to work. Although I may be doing something else wrong.

alan_baljeu

oauth2 can be authorized using a private server or even localhost.  The key is you go into your app configuration on the onshape portal and tell them where to call back to you after a successful login.  So for my own testing, I get the login redirect to https://localhost:2030/return, and that address is in the store configuration.  You also of course need the clientid and secret put into the app configuration.

bill_schnoebelen

Ahh. I thought localhost was http and they would not allow. I'll try that.

Any luck with 500 error? I am getting one as well. Is this the same? 

billy2

@bill_schnoebelen I believe you'll need https to talk to OS servers. At rustyshed, I setup nginx to only communicate over https and I got a certificate through let's encrypt. Like @alan_baljeu says, you need to send OS who you are and then they send you a token that's used in any future call. 

I've never used localhost to talk to OS directly and find this interesting.

@alan_baljeu do you have to be logged into OS for localhost to work? Does OS send back an authorization token or since you're logged in, does it just start working?

One thing that I do for both get & post is to set the transfer protocol to json in the header. 

Bill is your document request a get or post? The error message looks like you're sending a post and your json isn't formatted correctly. One thing I've learned when sending a post is to keep the original object OS sent to me, I change it's parameter values and send it back without changing the format of the object. Seems like a lot to send the entire object back/forth, but OS won't accept a leaf from the original object, you have to send the whole thing back otherwise OS will error.

Bill what are you writing this in? Are you typing commands in a console?

billy2

@alan_baljeu
if the redirect address is localhost? It seems to me that if a OS server called localhost it'd cause a lot of problems. Are you certain this works? From their servers localhost isn't Bill's computer? Does this work?

bill_schnoebelen

My program seems to work now. I believe my issue was from was from updating the app data on onshape dev website while simaltaniously running the app in onshape. I will most likely port this sample to react, or start over in react. I think the example is in angular.

This is pretty cool stuff!! It would mean a lot less work.

I would still be interested in running everything locally for testing. It looks like you can. This is from another test attempt.

alan_baljeu

billy2 said:

@alan_baljeu
if the redirect address is localhost? It seems to me that if a OS server called localhost it'd cause a lot of problems. Are you certain this works? From their servers localhost isn't Bill's computer? Does this work?

It works and in the documentation it’s described this way.  There are two reasons to allow this: for local development before deploying to an open internet server; for development of desktop apps that connect to Onshape.

Here’s the process:
My browser goes to my local server to request a page.  My server redirects the browser to visit oauth.onshape.com.  As part of that visit is an instruction of where to go next.  That where-next must be pre-registered in the store.

That asks the user to login, I login.  Onshape redirects the browser to my localhost server.  This works because the browser is resolving ‘localhost’, not Onshape.  This redirect, coming back from Onshape but resolved by my browser, includes a magic token, which the login process obtains.  The token is handed over to my app.

From this point forward, my app communicates directly with Onshape and not via the browser.  The name ‘localhost’ is no longer involved.  This magic token received from the browser is then used by my app to ask Onshape for extended access, obtaining a unique ID that I pass to all future API calls. 

bill_schnoebelen

Does it give you a jwt bearer token like google? https://youtu.be/roxC8SMs7HU?t=549

The app-gltf-viewer uses passport-onshape. I going to attempt to create a local stand alone react app using their example. This would put me more in my confort zone. I think the key ingredients are app.js and api.js. I think I can use a .env vs the reddis as I have not used reddis.

This wouldn't give me an iframe inside OS, but one thing at a time...

bill_schnoebelen

jwt stuff is 9 minutes into video

billy2

Thanks guys for clarifying, I never realized localhost would work. 



So you can set up any port and communicate to the server via a command line on a desktop, if you wanted to?

@bill_schnoebelen are you running a local nodejs version of react? 

I just checked my server code only to find out it handles all the oauth hand shaking. I haven't been in that code for years, I'm refreshing myself to how it works. For some reason I thought my client had something to do with it.

I've been working on automation equipment and using TCP as a communication layer to communicate to a master controller and control each work cell, I've never needed to talk to OS yet. It's good to know it's possible. This is my only local networking stuff I've done, automation is mostly 192.x.x.x.

 I've never thought about localhost & oauth.

bill_schnoebelen

I have several localhost apps, but they all use api keys. Some of my apps used the api explorer server (now defunct) while running in google sheets. I used the api explorer because it gave me the backend without any work. Now I have to rewrite that code.

I do find the iframe in OS very interesting. If I can manipulate my custom macros from there, this will save me a lot of work. Of course, this would have to be a public app, but I'm not there yet.

billy2

I use api keys mostly. I also use api explorer a lot to figure out how it all works before hard coding it.

How do you get an iframe to work with local host? Do you have some magic for that also?