Skip to main content
Skip table of contents

Modifiers | Inputs

Modifier

Explanation

Input

Numeric input

Allows the final user to add/pick a number (within set boundaries) in a number input field.

  • Minimum Value: Enter a minimum value for your numeric input here. This can also be a negative number.

  • Maximum Value: Enter a maximum value for your numeric input here. This can also be a negative number.

  • Step (Accuracy): If you want the numeric input's steps to have a specific value. For example if you have a numeric input that has min-max values 0-1, you can input a value of 0,1.

  • Default Value: If you want the numeric input to start out on a specific value when first loaded.

  • Order: Order of appearance in the parameter list.

  • Form Name: Alternative title that can be used on the front-end.

  • Additional Data: Json metadata can be added here.

  • Camera Stand: Link to a separately created camera stand.

  • Visible: Option to hide or show the parameter.

  • Read only: Option to lock the parameter for edits or open it up to be edited.

  • Description: Small description that is located under the parameter title.

  • External Parameter ID: Extra id that links to pure front-end code.

Text input

Allows the user to enter a text or number. This can be used for simply entering text, but think also, as an example, of color codes.

  • Maximum Length: The maximum amount of characters that can be input into the field.

  • Show Placeholder: Option to hide or show the placeholder text when the text input is empty.

  • Default Value: If you'd like a specific text to be shown by default, input it here.

  • Order: Order of appearance in the parameter list.

  • Form Name: Alternative title that can be used on the front-end.

  • Additional Data: Json metadata can be added here.

  • Camera Stand: Link to a separately created camera stand.

  • Visible: Option to hide or show the parameter.

  • Read only: Option to lock the parameter for edits or open it up to be edited.

  • Max Text: This enables text clipping based on the dimensions of the text box.

  • Change Policy: Has currently only 1 policy - Live. This sets the blacklisting policy to the current one.

  • Blacklist Check: Enables or disables the blacklist check.

  • Blacklist Ruleset: If there is a custom rule set for blacklisting, this can be added in here.

  • Description: Small description that is located under the parameter title.

  • External Parameter ID: Extra id that links to pure front-end code.

Advanced Input

  • Text Case: Here, you've got 3 options for the visualization of the text. It can just be shown as normal, or you can force the text to be all capital or all lower case.

  • Validation Regex: Input all characters and symbols that should be valid in the text field. You can simply enter 0-9 for all numbers, A-Z for all upper case letters, a-z for all lower case letters. Special characters like €, #, @ and such need to be input individually. Any symbol you leave out will not be visualized. There is a selection of symbols filled in by default.

Slider

Allows the end user to pick a value on a slider.

  • Minimum Value: Enter a minimum value for your slider here. This can also be a negative number!

  • Maximum Value: Enter a maximum value for your slider here. This can also be a negative number!

  • Step (Accuracy): If you want the slider's steps to have a specific value. For example if you have a slider that has min-max values 0-1, you can input a value of 0,1.

  • Default Value: If you want the slider to start out on a specific value when first loaded.

  • Delay (ms): Adds a delay on the visual changes after making the slider adjustments in milliseconds.

  • Order: Order of appearance in the parameter list.

  • Hide Value Label: If you don't want the label to show up on your slider, enable this.

  • Form Name: Alternative title that can be used on the front-end.

  • Additional Data: Json metadata can be added here.

  • Camera Stand: Link to a separately created camera stand.

  • Visible: Option to hide or show the parameter.

  • Read only: Option to lock the parameter for edits or open it up to be edited.

  • Description: Small description that is located under the parameter title.

  • External Parameter ID: Extra id that links to pure front-end code.

Mesh upload

This will add a file dialog where you can upload OBJ meshes. The uploaded mesh will be outputted from this node.

  • Default Mesh: Link a 3D object to this and it will appear as the default shape. As soon as you upload something new, it will take the place of this mesh.

  • Order: Order of appearance in the parameter list.

  • Form Name: Alternative title that can be used on the front-end.

  • Additional Data: Json metadata can be added here.

  • Camera Stand: Link to a separately created camera stand.

  • Visible: Option to hide or show the parameter.

  • Read only: Option to lock the parameter for edits or open it up to be edited.

  • Description: Small description that is located under the parameter title.

  • External Parameter ID: Extra id that links to pure front-end code.

Shape wizard

Allows the end user to upload or draw a shape. The uploaded file can be an SVG or it can be an image that will be transformed in different steps to make a vector format.

  • Allow drawing/upload: Select Yes or No for each of the options to allow or disallow the user to be able to draw something or upload an image. Obviously 1 of 2 options needs to be active.

  • Default Shape (Vector URL): Link a 2D image to this and it will appear as the default shape. As soon as you upload or draw something new, it will take the place of this shape.

  • Upload Wizard Steps/Drawing Wizard Steps:

    • Black & white correction: With this option, a user can select just how much of the image will be visible. White will always be invisible and black will always be visible. The visibility of all shades of colours in between can be adapted with this slider.

    • Single-shape dragging: For some products it is important that the entire image is connected, or the product may fall apart. Enabling this will give the user the option to drag disconnected parts on top of each other to make 1 whole.

    • Free drawing: This option is automatically enabled for the Drawing option. Enable this with Upload if you want to allow your user to draw in addition to their upload.

    • Minimum thickness: When this option is enabled, the twikbot wil automatically add thickness to thin lines of the uploaded or drawn image. This may be important to prevent a product from being too fragile.

  • Min. Thickness: Here you can adapt just how thin the minimum thickness is allowed to be.

  • Order: Order of appearance in the parameter list.

  • Additional Data: Json metadata can be added here.

  • Clear Button: If you allow this option, there will be an additional button visible to delete the related image drawn or uploaded. If you have selected a Default shape, it will not reappear after clicking the clear button.

  • Camera Stand: Link to a separately created camera stand.

  • Visible: Option to hide or show the parameter.

  • Read Only: Option to lock the parameter for edits or open it up to be edited.

  • Description: Small description that is located under the parameter title.

  • Hide Upload Black And White Correction Popup: Enables/disables the popup that allows the user to manually adjust the black and white levels.

  • External Parameter ID: Extra id that links to pure front-end code.

Advanced Inputs

  • Width: Input of how wide you want your lightbox to be.

  • Height: Input of how high you want your lightbox to be.

Image parameter

Allows the user to upload an image file.

  • Default Colormap: Link a 2D image to this and it will appear as the default colormap. As soon as you upload something new, it will take the place of this shape.

  • Order: Order of appearance in the parameter list.

  • Width: Width of the image.

  • Height: Height of the image.

  • Form Name: The title you want your input field to have.

  • Additional Data: Json metadata can be added here.

  • Camera Stand: Link to a separately created camera stand.

  • Visible: Option to hide or show the parameter.

  • Read Only: Option to lock the parameter for edits or open it up to be edited.

  • Description: Small description that is located under the parameter title.

  • External Parameter ID: Extra id that links to pure front-end code.

Dropdown

With the dropdown parameter you can set options for a specific value of the product, for example materials, styles, different fonts etc. In the customizer this will show as a dropdown with the chosen values.

  • Options:

    • Option name: Name for the option.

    • + Add Option: Add an extra option.

  • Order: Order of appearance in the parameter list.

  • Form Name: The title you want your input field to have.

  • Default Value: When empty and loading the product, automatically the first option will be chosen. If you want any specific option to be chosen, input the exact option name here.

  • Additional Data: Json metadata can be added here.

  • Camera Stand: Link to a separately created camera stand.

  • Visible: Option to hide or show the parameter.

  • Read Only: Option to lock the parameter for edits or open it up to be edited.

  • Description: Small description that is located under the parameter title.

  • External Parameter ID: Extra id that links to pure front-end code.

Icon picker

With the icon picker parameter you can set options for a specific value of the product, for example materials, styles, different fonts etc. In the customizer this will show as an icon with the chosen icons.

  • Options:

    • Option Key: Here you can input names you want your options to have. These options will need to be linked to their corresponding values in another box "Value".

    • Image URL: You will need to upload your images externally and input the direct link here. The icons will be resized to 50x50 pixels.

    • + Add option: Click this to add infinite more options.

  • Order: Order of appearance in the parameter list.

  • Form Name: The title you want your input field to have.

  • Default Value: When empty and loading the product, automatically the first option will be chosen. If you want any specific option to be chosen, input the exact option name here.

  • Additional Data: Json metadata can be added here.

  • Camera Stand: Link to a separately created camera stand.

  • Visible: Option to hide or show the parameter.

  • Read Only: Option to lock the parameter for edits or open it up to be edited.

  • Description: Small description that is located under the parameter title.

  • External Parameter ID: Extra id that links to pure front-end code.

Boolean parameter

A user input consisting of a toggle, resulting in a boolean output (True/False). Particulary useful to hide/show certain other parameters.

  • Default Value: When loading up the product, the default value is what will be used.

  • Order: Order of appearance in the parameter list.

  • Form Name: The title you want your input field to have.

  • Additional Data: Json metadata can be added here.

  • Camera Stand: Link to a separately created camera stand.

  • Visible: Option to hide or show the parameter.

  • Read Only: Option to lock the parameter for edits or open it up to be edited.

  • Description: Small description that is located under the parameter title.

  • External Parameter ID: Extra id that links to pure front-end code.

Value interpretation

Give a meaningful value to a selected option from a ‘dropdown', 'icon picker’ or a boolean value.

  • Source: Can be an icon picker or a dropdown.

  • Interpretation: You'll have to select which value you want your options to have.

    • Geometry: A 3D mesh resource.

    • 2D Geometry: A node that generates a 2D shape resource or a 2D object , like render text.

    • Text: For a text value, as example, link a text input or text variable node.

    • Numeric: For a numeric value, as example, link a slider or numeric variable node.

    • Material: For multiple choices in material, use this to link material nodes.

    • Font: For multiple Font choices, use this to link font nodes.

    • Monochrome Map: To link monochrome map nodes.

    • Color Map: To link color map nodes.

JavaScript errors detected

Please note, these errors can depend on your browser setup.

If this problem persists, please contact our support.