Welcome to the Onshape forum! Ask questions and join in the discussions about everything Onshape.

First time visiting? Here are some places to start:
  1. Looking for a certain topic? Check out the categories filter or use Search (upper right).
  2. Need support? Ask a question to our Community Support category.
  3. Please submit support tickets for bugs but you can request improvements in the Product Feedback category.
  4. Be respectful, on topic and if you see a problem, Flag it.

If you would like to contact our Community Manager personally, feel free to send a private message or an email.

Building an Onshape model viewer

alan_baljeualan_baljeu Member, User Group Leader Posts: 111 ✭✭
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?
Creating knowledge-driven design automation software, for molds, etc.
www.virtualmold.com

«1

Comments

  • NeilCookeNeilCooke Moderator, Onshape Employees Posts: 5,308
    This would be the best one using three.js https://github.com/onshape-public/app-gltf-viewer
    Senior Director, Technical Services, EMEAI
  • NikNYCNikNYC Member Posts: 68 ✭✭
    Consider porting it to Babylon which is a mighty upgrade from ThreeJS.
  • alan_baljeualan_baljeu Member, User Group Leader Posts: 111 ✭✭
    @NeilCooke What is the deal with needing Heroku?  So far I haven't gotten into any service like Heroku.  Should I?
    Creating knowledge-driven design automation software, for molds, etc.
    www.virtualmold.com

  • NeilCookeNeilCooke Moderator, Onshape Employees Posts: 5,308
    @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.
    Senior Director, Technical Services, EMEAI
  • billy2billy2 Member, OS Professional, Mentor, Developers, User Group Leader Posts: 2,014 PRO
    edited May 2021
    @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_baljeualan_baljeu Member, User Group Leader Posts: 111 ✭✭
    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?
    Creating knowledge-driven design automation software, for molds, etc.
    www.virtualmold.com

  • billy2billy2 Member, OS Professional, Mentor, Developers, User Group Leader Posts: 2,014 PRO
    edited May 2021
    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_baljeualan_baljeu Member, User Group Leader Posts: 111 ✭✭
    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.
    Creating knowledge-driven design automation software, for molds, etc.
    www.virtualmold.com

  • alan_baljeualan_baljeu Member, User Group Leader Posts: 111 ✭✭
    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?
    Creating knowledge-driven design automation software, for molds, etc.
    www.virtualmold.com

  • billy2billy2 Member, OS Professional, Mentor, Developers, User Group Leader Posts: 2,014 PRO
    edited June 2021
    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_baljeualan_baljeu Member, User Group Leader Posts: 111 ✭✭
    Thanks for the response.  Anyway, the answer is I got a 500 error.  So there was no Json to scan.
    Creating knowledge-driven design automation software, for molds, etc.
    www.virtualmold.com

  • alan_baljeualan_baljeu Member, User Group Leader Posts: 111 ✭✭
    edited June 2021
    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.
    Creating knowledge-driven design automation software, for molds, etc.
    www.virtualmold.com

  • Ethan_KEthan_K Member, Onshape Employees Posts: 57
    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

  • billy2billy2 Member, OS Professional, Mentor, Developers, User Group Leader Posts: 2,014 PRO
    edited June 2021
    @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_baljeualan_baljeu Member, User Group Leader Posts: 111 ✭✭
    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?
    Creating knowledge-driven design automation software, for molds, etc.
    www.virtualmold.com

  • billy2billy2 Member, OS Professional, Mentor, Developers, User Group Leader Posts: 2,014 PRO
    edited June 2021
    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_baljeualan_baljeu Member, User Group Leader Posts: 111 ✭✭
    edited June 2021
    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.
    Creating knowledge-driven design automation software, for molds, etc.
    www.virtualmold.com

  • billy2billy2 Member, OS Professional, Mentor, Developers, User Group Leader Posts: 2,014 PRO
    edited June 2021
    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_schnoebelenbill_schnoebelen OS Professional, Developers, User Group Leader, csevp Posts: 109 PRO

    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_baljeualan_baljeu Member, User Group Leader Posts: 111 ✭✭
    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.
    Creating knowledge-driven design automation software, for molds, etc.
    www.virtualmold.com

  • bill_schnoebelenbill_schnoebelen OS Professional, Developers, User Group Leader, csevp Posts: 109 PRO
    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? 



  • billy2billy2 Member, OS Professional, Mentor, Developers, User Group Leader Posts: 2,014 PRO
    edited July 2022
    @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?


  • billy2billy2 Member, OS Professional, Mentor, Developers, User Group Leader Posts: 2,014 PRO
    edited July 2022
    @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_schnoebelenbill_schnoebelen OS Professional, Developers, User Group Leader, csevp Posts: 109 PRO
    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_baljeualan_baljeu Member, User Group Leader Posts: 111 ✭✭
    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. 
    Creating knowledge-driven design automation software, for molds, etc.
    www.virtualmold.com

  • bill_schnoebelenbill_schnoebelen OS Professional, Developers, User Group Leader, csevp Posts: 109 PRO
    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_schnoebelenbill_schnoebelen OS Professional, Developers, User Group Leader, csevp Posts: 109 PRO
    jwt stuff is 9 minutes into video
  • billy2billy2 Member, OS Professional, Mentor, Developers, User Group Leader Posts: 2,014 PRO
    edited July 2022
    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_schnoebelenbill_schnoebelen OS Professional, Developers, User Group Leader, csevp Posts: 109 PRO
    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.


  • billy2billy2 Member, OS Professional, Mentor, Developers, User Group Leader Posts: 2,014 PRO
    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?




Sign In or Register to comment.