3daddict / stl-estimator-nodejs

An STL 3D model estimator built with NodeJS, Vanilla JavaScript and Handlebars. HacktoberFest 2019

STL Estimator - HacktoberFest 2019

The goal of this project is to create an online STL file that users can upload a 3D Model (STL format binary or ascii) to get stats of their 3D Models. An example would be the volume of the model or the bouding box (L x W x H). This is commonly used for 3D Printing and depending on the level of interest we can accomplish some pretty cool things with this project. Things like Cost Estimation, Model Renderings, Saving Projects and Procssing G-Code files!

Here is a rough example of what something like this could look like:

Getting Started

Please review the Contributing file for information on how to work on this project

Dependancies

This project is built with NodeJS, Express, Vanilla JS and Handlebars. Let's try to keep this as simple as possible so everyone can contribute.

Requirements

• NodeJS
• Yarn or NPM (I use Yarn)
• Nodemon

Working with the code

• yarn install or npm install to install dependancies
• yarn start or npm start to start the server and use the app
• yarn dev or npm dev to fireup nodemon work in dev mode for the app

Working on Issues

Please request to work on an issue and wait until you are assigned. Once assigned please reply back that your working on it or it will go to the next person that asked.

Pull Request

Please always create pull requests to dev branch and see the Contributing for more details.

stl-estimator-nodejs's Issues

Template: Update Style Guide with Materialize CSS

Update the style guide with Materialize CSS.
templates/views/style-guide.hbs

• Pick out an awesome color theme (http://colormind.io/ is a good one to use)
• Headings
• P Tags
• Anchor links
• Add button styles
• Any other helpful elements.
  Get your inner designer on and pick the color theme for this project. Create a nice looks and feel that we'll all use for the page elements and UX.
  https://materializecss.com/

STL Loader, Parser and Viewer JS Module

Create a JS module to load, analyze and preview STL Files (ASCII and BINARY).
This can be created using NPM Packages or ThreeJS or Other.
The most simple method is preferred so others can understand how the module works. If possible to build from scratch that would be amazing!

Functions

1. Read STL file from User Upload (store in users localStorage if possible) see test STL file in public/stl/3DBenchy.stl
2. Parse STL file and display data on Left Side of Viewer

• Extract total model volume mm3
• Extract overall dimensions L x W x H in mm

3. Preview STL file in Viewer (Right Side)

Template: Footer Styling and add dynamic copy-write date SCSS and JS

Style the footer template
templates/partials/footer.hbs
public/css/styles.scss

• Make a sticky footer at the bottom
• Center text, add margins, mobile friendly
• Create dynamic copywrite year with JS

Vote for the front-end component CSS library - ALL WELCOME!

Vote below for the CSS Framework of your choice to be implemented in this project.

To vote click the 👍 and the one with the most thumbs up over the next couple days will get the win!

Last chance to get your votes in before October 1st!

Contributing link broken in README

Hi! Thanks for contributing! Please make sure that you have:

• Added the correct info
• Stared the repo 😉
• Looked over the Code of Conduct and this content is inline with it

Put an X between the brackets([]) when you are done.
--- Add your Issue Info Below be as descriptive as possible... ---

The link in the README for CONTRIBUTING.md is currently leading to a "Not Found" page.

Setup Webpack 4

Configure Webpack 4 to handle and compile the libraries we are using in this project.
This is probably a big ask so here is the thought behind it.

• Compile CSS and JS components into single chunks (we'll need to restructure the files into components)
• Hot module replacement
• BabelJS
• Update package scripts

Let me know if this is possible and a good choice?

Template: Contributors Page Styling SCSS

Style the contributers.hbs file to look good.
templates/views/contributors.hbs

• Add github user photos to name.
• Come up with a nice responsive layout 2 Column or 3 Column etc...

Main Column Layout for index.hbs

Once a CSS framework is decided here: #6 setup a 2 column layout.
templates/views/index.hbs
Left Side 1/3rd:

• Will have the upload button to upload an STL file
• Will have the stats text divs for the output of the analysis (Model Volume and Overall Size)

Right Side 2/3rds:

• This will be the display area for the 3D Model Preview

Desktop: Columns Side by Side
Mobile: Left Side on Top, Right Side on Bottom. (display: block)

Template: Style Header Template SCSS

Style the header template
templates/partials/header.hbs
public/css/styles.scss

• add logo found in images folder
• style links add proper styling that looks good on Desktop, Tablet and Mobile