Compute.rhino3d.appserver

Hi,
I’m trying to use Rhino.Compute.Appserver as explained in this github.

It’s amazing to be able to use Grasshopper definitions on the web environment!
However, I’m having hard to time to figure out how to customize web page designs.
I have two imminent questions:

  1. How can I use a css file instead of having styles in hbs files?
    Adding this line of code in a hbs file doesn’t work. image
    I’m getting this error message.
    It only works if I add codes inside style tags in hbs files.
  2. How can I add images on the web page?
    Adding this code image in hbs files gives me an error of 404 (Not Found). The image path is correct.

Hello!

You should add your own interfaces in the /examples/ directory. Here You can find examples which are tailored for each gh definition. Here you could also include images, your own css, etc.

I hope that helps!

The .hbs file is a template designed to generate the input UI based on the Grasshopper definition picked. The CSS and JS are in the same file to keep things simple.

As it’s written, only the examples directory is served as static files. Everything else is routed through Express. This is probably why your CSS file wasn’t found.

Thank you, @fraguada and @will! I’ll need some time to understand the whole thing, but I could customize styles of range sliders and names by adding css codes in the hbs template. If the hbs template is essentially a html file, I’m not sure why I’m getting the error in adding an image in the hbs file. Would you let me know how I could add an image in the hbs template? I understand it’s not static, but I want to add the same logo above the title for all Grasshopper definitions.

Unless you’ve modified the routes yourself, the /css and /images paths aren’t being served by the app. You might try adding something like this to app.js so that your image file is served as a static file…

app.use('/images', express.static(__dirname + '/images'))

Yes, that worked! Thank you so much @will .

1 Like