3d Model Data Sheet Generator

Generating data sheets for 3D models with a few clicks.

• Manually writing a data sheet for every single 3D model is a tedious process and produces inconsistent quality. I tried to solve the problem using a template text file that I fill every time with new data but it was still a time-consuming process.
• This project was build with scalability in mind. As I learn more techniques in 3D art, more options and categories will need to be be added to the form. Fot this prupose, the elements.Js module is used to create elements inside each component. Each element function is passed an argument object containing the required properties for the element.

---

The Concept

• Each 3D trading website uses a description box to format the info describing the model. Each site uses a set of special characters to mark text style, lists, etc. But formatting the description using the website's tool is a lengthy process especially if there are many details included.
• This application takes the information provided by the user and formats it, based on the target site setting, to be copied directly into the site's description box without the user having to do any editing.

---

Development Challenges

• Creating reusable components with as little code as possible meant having to find common features between the UI's elements to build the elements around them without having to carry uneeded features.
• Implementing a way to gather data from the form without having to query select elements from the document. This was solved by writing getter functions to each element which are invoked by a getter function in the component.
• Validating the form without using the HTML-based validation. Using select and radio elements removed the need to validate these elements as they always default to a meaningful value. The smaller pseudo-forms used to create items, materials, etc. are validated using javascript using event listeners. Error messages are displayed on error/info panels attached to containers that require one.
• Writing a documentation. I didn't even know how to write an MD file.

---

How to Use the App

1. Fill the form to best describe your 3D model and its attachments:
   • Model details field is optional
   • Model contents adds items that are included in the model's file, it must include at least 1 item
   • Mesh Details describes the model's geometry, it is required and will get the default values set on load unless changed by the user. Each field takes 1 choice.
   • Poly count is required, it is the number of polygons and vertices forming your model(s), the polygon unit is Triangles.
   • Materials is optional, it contains the texture sets included with the model. If no sets were added, the materials and related fields are defaulted to a "Not available" value, which will appear in the final sheet.
   • Texture details describes the textures included in the model (if available). UV mapping is independent of the materials field and if left empty defaults to a "Not Available" value.
   • The target website changes the formatting symbols generated in the final sheet as they differ from site to site.
2. Click the lightning bolt button to generate a sheet, in case of an error, an error message will refer to the mistake's location in the form.
3. After the sheet is generated, highlight and copy the text OR use the copy button to automatically copy to the clipboard.
4. Paste the sheet into the description box of the website where the model is being uploaded, no further editing is needed.

---

Using elements.js (For Developers)

label({
    id: String, undefined ? ""
    for: String, undefined ? ""
    text: String, undefined ? "Default Text"
    classes: Array of Strings, undefined ? []
});

Parameter	Use
id	Set the element's id attribute
for	Set the element's for attribute
text	Set the element's text content
classes	Add CSS classes to the label

Returns
HTML label element

textArea({
    id: String, undefined ? ""
    name: String, undefined ? ""
    cols: Number, undefined ? 30
    rows: Number, undefined ? 10
    placeholder: String, undefined ? "Write text",
    classes: Array of Strings, undefined ? [],
    required: Boolean, undefined ? false
});

Parameter	Use
id	Set the element's id attribute
name	Set the element's name attribute
cols	Set the element's cols attribute
rows	Set the element's rows attribute
placeholder	Set the element's placeholder attribute
classes	Add CSS classes to the textarea
required	Set the element as required

Returns
element : HTML textarea element
getContent : function to get current value

iconButton({
    id: String, undefined ? ""
    type: String, undefined ? "button"
    icon: Image object, undefined ? defaultIcon
    btnClasses: Array of Strings, undefined ? []
    iconClasses: Array of Strings, undefined ? []
    clickFunction: Function, undefined ? () => {},
});

Parameter	Use
id	Set the element's id attribute
type	Set the element's type attribute
icon	control the button's icon, defaultIcon is a plus icon
btnClasses	Add CSS classes to the button
iconClasses	Add CSS classes to the icon
clickFunction	Add a function to execute on click events

Returns
HTML button element

button({
    id: String, undefined ? ""
    type: String, undefined ? "button"
    classes: Array of Strings, undefined ? []
    text: String, undefined ? "click here"
    clickFunction: Function, undefined ? () => {},
});

Parameter	Use
id	Set the element's id attribute
type	Set the element's type attribute
classes	Add CSS classes to the button
text	Set the button's text content
clickFunction	Add a function to execute on click events

Returns
HTML button element

inputNumber({
    id: String, undefined ? ""
    name: String, undefined ? ""
    placeholder: String, undefined ? "",
    min: Number | String, undefined ? ""
    max: Number | String, undefined ? ""
    classes: Array of Strings, undefined ? []
    required: Boolean, undefined ? false
    errorMsg: String, undefined ? "Invalid Input"
});

Parameter	Use
id	Set the element's id attribute
name	Set the element's name attribute
placeholder	Set the element's placeholder attribute
min	Set the input's minimum range
max	Set the input's maximum range
classes	Add CSS classes to the element
required	Set the element as required
errorMsg	Define a custom error message for illegal input (general error message)

Returns
element : HTML number input element
getContent : function to get current value
clearContent : function to clear current value
isValid : function to get validity state of the input
getError : function to get the custom error message

inputText({
    id: String, undefined ? ""
    name: String, undefined ? ""
    placeholder: String, undefined ? "",
    minLength: Number | String, undefined ? ""
    maxLength: Number | String, undefined ? ""
    classes: Array of Strings, undefined ? []
    required: Boolean, undefined ? false
    errorMsg: String, undefined ? "Invalid Input"
});

Parameter	Use
id	Set the element's id attribute
name	Set the element's name attribute
placeholder	Set the element's placeholder attribute
minLength	Set the input's minimum number of characters
maxLength	Set the input's maximum number of characters
classes	Add CSS classes to the element
required	Set the element as required
errorMsg	Define a custom error message for illegal input (general error message)

Returns
element : HTML text input element
getContent : function to get current value
clearContent : function to clear current value
isValid : function to get validity state of the input
getError : function to get the custom error message

div({
    id: String, undefined ? ""
    classes: Array of Strings, undefined ? []
    children: Array of HTML Elements, undefined ? [],
});

Parameter	Use
id	Set the element's id attribute
classes	Add CSS classes to the element
children	HTML elements to be appended to the div element, in the same order they were passed

Returns
element : HTML div element

p({
    id: String, undefined ? ""
    classes: Array of Strings, undefined ? []
    text: String, undefined ? "Default text",
});

Parameter	Use
id	Set the element's id attribute
classes	Add CSS classes to the element
text	element's text content

Returns
element : HTML p element

select({
    id: String, undefined ? ""
    lblText: String, undefined ? "Default text"
    Classes: Array of Strings, undefined ? []
    choiceClasses: Array of Strings, undefined ? []
    labelClasses: Array of Strings, undefined ? []
    optionClasses: Array of Strings, undefined ? []
    selectedClasses: Array of Strings, undefined ? []
    choices: Array of Strings, undefined ? ["Default option 1", "Default option 2"]
    minChoices: Number, undefined ? 0
});

Description: A custom-made check list element. Allows multiple checks and can have a minimum number of active checks

Parameter	Use
id	Set the container's id attribute
lblText	Set the check list's label text
classes	Add CSS classes to the container
choiceClasses	Add CSS classes to option buttons
labelClasses	Add CSS classes to the check list's label
optionClasses	Add CSS classes to option buttons' container
selectedClasses	Add CSS classes to mark checked option buttons
choices	Options to be added to the check list
minChoices	Minimum number of checked buttons at any time, 0 means no limit.

Returns
element : HTML div element
getSelected : function to get current checked items

radio({
    id: String, undefined ? ""
    lblText: String, undefined ? "Default text"
    Classes: Array of Strings, undefined ? []
    choiceClasses: Array of Strings, undefined ? []
    labelClasses: Array of Strings, undefined ? []
    optionClasses: Array of Strings, undefined ? []
    selectedClasses: Array of Strings, undefined ? []
    choices: Array of Strings, undefined ? ["Default option 1", "Default option 2"]
    defaultChoice: Number, undefined ? 0
});

Description: A custom-made radio button element. Looks and behaves just like the select component but allows only one choice active at any time.

Parameter	Use
id	Set the container's id attribute
lblText	Set the check list's label text
classes	Add CSS classes to the container
choiceClasses	Add CSS classes to option buttons
labelClasses	Add CSS classes to the radio button's label
optionClasses	Add CSS classes to option buttons' container
selectedClasses	Add CSS classes to mark checked option buttons
choices	Options to be added to the check list
defaultChoice	Index of the button selected by default

Returns
element : HTML div element
getSelected : function to get current checked button