mirror of
https://github.com/noodlapp/noodl-docs.git
synced 2026-01-11 23:02:54 +01:00
Initial commit
Co-Authored-By: kotte <14197736+mrtamagotchi@users.noreply.github.com> Co-Authored-By: mikaeltellhed <2311083+mikaeltellhed@users.noreply.github.com> Co-Authored-By: Tore Knudsen <18231882+torekndsn@users.noreply.github.com> Co-Authored-By: Michael Cartner <32543275+michaelcartner@users.noreply.github.com>
This commit is contained in:
Eric Tuvesson
37
nodes/utilities/boolean-to-string.md
Normal file
37
nodes/utilities/boolean-to-string.md
Normal file
@@ -0,0 +1,37 @@
|
||||
---
|
||||
hide_title: true
|
||||
hide_table_of_contents: true
|
||||
title: Boolean To String
|
||||
---
|
||||
|
||||
<##head##>
|
||||
|
||||
# Boolean To String
|
||||
|
||||
This node takes a <span className="ndl-data">boolean</span> input and converts it into the strings <span className="ndl-data">true</span> or <span className="ndl-data">false</span>.
|
||||
|
||||
<div className="ndl-image-with-background l">
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
<##head##>
|
||||
|
||||
## Inputs
|
||||
|
||||
| Data | Description |
|
||||
| -------------------------------------------------- | ------------------------------------------------------------------------------------------------- |
|
||||
| <span className="ndl-data">Selector</span> | <##input:selector##>This is the boolean value that will select which string to output.<##input##> |
|
||||
| <span className="ndl-data">String for true</span> | <##input:trueString##>The string to output if the selector is true.<##input##> |
|
||||
| <span className="ndl-data">String for false</span> | <##input:falseString##>The string to output if the selecor is false.<##input##> |
|
||||
|
||||
## Outputs
|
||||
|
||||
| Data | Description |
|
||||
| ----------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------ |
|
||||
| <span className="ndl-data">Current Value</span> | <##output:currentValue##>The selected string, i.e. either **String for true** or **String for false** depending on the **Selector**.<##output##> |
|
||||
|
||||
| Signal | Description |
|
||||
| ---------------------------------------------------- | --------------------------------------------------------------------------------------------- |
|
||||
| <span className="ndl-signal">Selector Changed</span> | <##output:inputChanged##>This signal is sent when the **Selector** changes value.<##output##> |
|
||||
32
nodes/utilities/color-blend.md
Normal file
32
nodes/utilities/color-blend.md
Normal file
@@ -0,0 +1,32 @@
|
||||
---
|
||||
hide_title: true
|
||||
hide_table_of_contents: true
|
||||
title: Color Blend
|
||||
---
|
||||
|
||||
<##head##>
|
||||
|
||||
# Color Blend
|
||||
|
||||
This node lets you blend between color values.
|
||||
|
||||
<div className="ndl-image-with-background">
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
<##head##>
|
||||
|
||||
## Inputs
|
||||
|
||||
| Data | Description |
|
||||
| --------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
||||
| <span className="ndl-data">Color 0..N</span> | The colors to mix. These ports are numbered as _Color 0_, _Color 1_ etc. When a color is specified a new input will be created for the next color. |
|
||||
| <span className="ndl-data">Blend value</span> | This specifies how the input colors will be blended. The inputs colors are interpolated linearly so a _Blend Value_ of _0_ will result in the color of the input port _Color 0_ and a value of _1_ will result in _Color 1_.<br/><br/>A value of 0.5 will be a mix of 50% of _Color 0_ and _Color 1_, a number of 1.5 will be a mix between _Color 1_ and _Color 2_, etc. Values below 0 or above the amount of input colors are clamped to the closest color. |
|
||||
|
||||
## Outputs
|
||||
|
||||
| Data | Description |
|
||||
| ---------------------------------------- | --------------------------- |
|
||||
| <span className="ndl-data">Result</span> | The resulting blended color |
|
||||
37
nodes/utilities/css-definition.md
Normal file
37
nodes/utilities/css-definition.md
Normal file
@@ -0,0 +1,37 @@
|
||||
---
|
||||
hide_title: true
|
||||
hide_table_of_contents: true
|
||||
title: CSS Definition
|
||||
---
|
||||
|
||||
<##head##>
|
||||
|
||||
# CSS Definition
|
||||
|
||||
This node lets you write your own global custom CSS. It outputs your style definitions in a style tag at the top of your web app.
|
||||
|
||||
<div className="ndl-image-with-background l">
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
The Visual nodes all have built in Visual Properties. They feature all the styling options needed for the majority of apps. The CSS Definition node is used whenever those properties are not enough: if you want to use experimental or advanced CSS features, hacks or workarounds. It is written like plain CSS:
|
||||
|
||||
<div className="ndl-image-with-background l">
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
Classes can be attached to the Visual nodes in the Property Panel:
|
||||
|
||||
<div className="ndl-image-with-background l">
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
The CSS Definition is best used if a style class will be reused on multiple different Visual nodes. If you're only styling one Visual node you should do it in the CSS Style editor at the bottom of the Property Panel.
|
||||
|
||||
<##head##>
|
||||
60
nodes/utilities/date-to-string.md
Normal file
60
nodes/utilities/date-to-string.md
Normal file
@@ -0,0 +1,60 @@
|
||||
---
|
||||
hide_title: true
|
||||
hide_table_of_contents: true
|
||||
title: Date To String
|
||||
---
|
||||
|
||||
<##head##>
|
||||
|
||||
# Date To String
|
||||
|
||||
This node translates a <span className="ndl-data">date</span> type input and outputs a <span className="ndl-data">string</span> based on your specified format.
|
||||
|
||||
<div className="ndl-image-with-background l">
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
The format is specified as a <span className="ndl-data">string</span> that can include the following special syntax: `{date}`, `{month}`, `{monthShort}`, `{year}`, `{hours}`, `{minutes}` and `{seconds}`.
|
||||
|
||||
<##head##>
|
||||
|
||||
- **{date}** The numeric date part.
|
||||
- **{month}** The numeric month 1 = January, 12 = December.
|
||||
- **{monthShort}** The numeric month 1 = Jan, 12 = Dec.
|
||||
- **{year}** The numeric year.
|
||||
- **{hours}** The numeric hour, between 0..23
|
||||
- **{minutes}** The numeric minute, between 0..60
|
||||
- **{seconds}** The numeric second, between 0..60
|
||||
|
||||
The default format is this:
|
||||
|
||||
```
|
||||
{year}-{month}-{date}
|
||||
```
|
||||
|
||||
## Inputs
|
||||
|
||||
<div className="ndl-table-35-65">
|
||||
|
||||
| Data | Description |
|
||||
| ---------------------------------------- | -------------------------------------------------------------------- |
|
||||
| <span className="ndl-data">Format</span> | This is where the format string is specified, see above for details. |
|
||||
| <span className="ndl-data">Date</span> | The date input to format. |
|
||||
|
||||
</div>
|
||||
|
||||
## Outputs
|
||||
|
||||
<div className="ndl-table-35-65">
|
||||
|
||||
| Data | Description |
|
||||
| ----------------------------------------------- | -------------------------- |
|
||||
| <span className="ndl-data">\*Date String</span> | The formatted date string. |
|
||||
|
||||
| Signal | Description |
|
||||
| ------------------------------------------------ | ------------------------------------------------------ |
|
||||
| <span className="ndl-signal">Date Changed</span> | Sends a signal when the formatted date string changed. |
|
||||
|
||||
</div>
|
||||
39
nodes/utilities/delay.md
Normal file
39
nodes/utilities/delay.md
Normal file
@@ -0,0 +1,39 @@
|
||||
---
|
||||
hide_title: true
|
||||
hide_table_of_contents: true
|
||||
title: Delay
|
||||
---
|
||||
|
||||
<##head##>
|
||||
|
||||
# Delay
|
||||
|
||||
This node lets you delay <span className="ndl-signal">signals</span> by the specified amount of milliseconds.
|
||||
|
||||
<div className="ndl-image-with-background l">
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
<##head##>
|
||||
|
||||
## Inputs
|
||||
|
||||
| Signal | Description |
|
||||
| ------------------------------------------- | --------------------------------------------------------------------- |
|
||||
| <span className="ndl-signal">Start</span> | Starts the timer. Does nothing if the timer is already running. |
|
||||
| <span className="ndl-signal">Restart</span> | Starts the timer. Restarts the timer if the timer is already running. |
|
||||
| <span className="ndl-signal">Stop</span> | Stops the timer if it's running. Does nothing otherwise. |
|
||||
|
||||
| Data | Description |
|
||||
| --------------------------------------------- | -------------------------------------------------------------------------------------------------- |
|
||||
| <span className="ndl-data">Duration</span> | The duration of the timer in milliseconds. |
|
||||
| <span className="ndl-data">Start Delay</span> | The delay before the timer starts after the _Start_ input is triggered. Specified in milliseconds. |
|
||||
|
||||
## Outputs
|
||||
|
||||
| Signal | Description |
|
||||
| -------------------------------------------- | ------------------------------------------ |
|
||||
| <span className="ndl-signal">Started</span> | Signal emitted when the timer starts. |
|
||||
| <span className="ndl-signal">Finished</span> | Signal emitted when the timer is finished. |
|
||||
114
nodes/utilities/drag.md
Normal file
114
nodes/utilities/drag.md
Normal file
@@ -0,0 +1,114 @@
|
||||
---
|
||||
hide_title: true
|
||||
hide_table_of_contents: true
|
||||
title: Drag
|
||||
---
|
||||
|
||||
<##head##>
|
||||
|
||||
# Drag
|
||||
|
||||
The drag node is used to make visual nodes draggable with the mouse or touch. The child of a **Drag** node automatically become draggable.
|
||||
|
||||
:::tip
|
||||
|
||||
The Drag node can only have one child, but that child can have many children.
|
||||
|
||||
:::
|
||||
|
||||
<div className="ndl-image-with-background l">
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
<##head##>
|
||||
|
||||
## Inputs
|
||||
|
||||
### Snap To Position X
|
||||
|
||||
| Signal | Description |
|
||||
| -------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------- |
|
||||
| <span className="ndl-signal">Do</span> | Send a signal here to trigger a snap to the position specified by _Value_ and with the transition duration specified by _Duration_. |
|
||||
|
||||
| Data | Description |
|
||||
| ------------------------------------------ | -------------------------------------------------------------------------------- |
|
||||
| <span className="ndl-data">Value</span> | This is the X value the the snap action will have as destination when triggered. |
|
||||
| <span className="ndl-data">Duration</span> | The snap transition duration. |
|
||||
|
||||
### Snap To Position Y
|
||||
|
||||
| Signal | Description |
|
||||
| -------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------- |
|
||||
| <span className="ndl-signal">Do</span> | Send a signal here to trigger a snap to the position specified by _Value_ and with the transition duration specified by _Duration_. |
|
||||
|
||||
| Data | Description |
|
||||
| ------------------------------------------ | -------------------------------------------------------------------------------- |
|
||||
| <span className="ndl-data">Value</span> | This is the Y value the the snap action will have as destination when triggered. |
|
||||
| <span className="ndl-data">Duration</span> | The snap transition duration. |
|
||||
|
||||
### Drag
|
||||
|
||||
| Data | Description |
|
||||
| ----------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
||||
| <span className="ndl-data">Enable</span> | Enables or disables this node. If it is disabled, drag will not have any affect on child nodes. |
|
||||
| <span className="ndl-data">Axis</span> | Specifies along which axes the drag will work<br/>a<br/>`X`: Only horizontal drag is enabled.<br/>`Y`: Only vertical drag is enabled.<br/>`Both`: Both horizontal and vertical drag is enabled. |
|
||||
| <span className="ndl-data">Constrain to parent</span> | If enabled the child nodes being dragged will be constrained to the borders of the parent node so they cannot be dragged outside of the parent bounds. |
|
||||
|
||||
### Other
|
||||
|
||||
| Data | Description |
|
||||
| ---------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
||||
| <span className="ndl-data">Start Drag X</span> | Specifies the X position that will be used as the starting point. Setting this will force the child nodes to the specified position. |
|
||||
| <span className="ndl-data">Start Drag Y</span> | Specifies the Y position that will be used as the starting point. Setting this will force the child nodes to the specified position. |
|
||||
| <span className="ndl-data">Scale</span> | Specifies the move scale that will be used when dragging the node around. This can correct the drag deltas while you are zoomed in or out. |
|
||||
| <span className="ndl-data">Mounted</span> | This property is used to completely remove the node from the DOM. If this property is set to false the node is removed from the DOM. It differs from the _Visible_ property where the node is still part of the DOM but invisible. |
|
||||
|
||||
### Visual
|
||||
|
||||
This node supports the following [Visual Input Properties](/nodes/shared-props/inputs/visual-input-properties):
|
||||
|
||||
- [Advanced HTML](/nodes/shared-props/inputs/visual-input-properties#advanced-html)
|
||||
|
||||
## Outputs
|
||||
|
||||
### Other
|
||||
|
||||
| Data | Description |
|
||||
| --------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
||||
| <span className="ndl-data">Child Index</span> | The place this node has in relation to its parent. E.g. if a **Group** has three children, then the first child will have _Child Index_ 0, the second child will have _Child Index_ 1, and so on. |
|
||||
| <span className="ndl-data">This</span> | A reference to this node. Used in custom **Javascript** nodes and more. |
|
||||
|
||||
### Bounding Box
|
||||
|
||||
| Data | Description |
|
||||
| --------------------------------------------------- | ----------------------------------------------------- |
|
||||
| <span className="ndl-data">Screen Position X</span> | Where this node is on the screen's X-axis, in pixels. |
|
||||
| <span className="ndl-data">Screen Position Y</span> | Where this node is on the screen's Y-axis, in pixels. |
|
||||
| <span className="ndl-data">Width</span> | Current width of this node. |
|
||||
| <span className="ndl-data">Height</span> | Current height of this node. |
|
||||
|
||||
### Mounted
|
||||
|
||||
| Signal | Description |
|
||||
| ------------------------------------------------ | ---------------------------------------------------------------------------------------------------- |
|
||||
| <span className="ndl-signal">Did Mount</span> | Signal sent when this node has been mounted, i.e. has become part of the visual tree and is visible. |
|
||||
| <span className="ndl-signal">Will Unmount</span> | Signal sent when this node is about to be removed from the visual tree and become hidden. |
|
||||
|
||||
### Signals
|
||||
|
||||
| Signal | Description |
|
||||
| ------------------------------------------------ | ---------------------------------------------------------- |
|
||||
| <span className="ndl-signal">Drag Started</span> | Emitted when dragging of a child is detected. |
|
||||
| <span className="ndl-signal">Drag Ended</span> | Emitted when dragging stopped. |
|
||||
| <span className="ndl-signal">Drag Moved</span> | Emitted while a child node is being moved during the drag. |
|
||||
|
||||
### Values
|
||||
|
||||
| Data | Description |
|
||||
| ----------------------------------------- | ---------------------------------------------------------------------------------------------------- |
|
||||
| <span className="ndl-data">Drag X</span> | The current X position of the dragged node. |
|
||||
| <span className="ndl-data">Drag Y</span> | The current Y position of the dragged node. |
|
||||
| <span className="ndl-data">Delta X</span> | The horizontal distance a node has been dragged from its last horizontal position. Measured in `px`. |
|
||||
| <span className="ndl-data">Delta Y</span> | The vertical distance a node has been dragged from its last vertical position. Measured in `px`. |
|
||||
49
nodes/utilities/logic/condition.md
Normal file
49
nodes/utilities/logic/condition.md
Normal file
@@ -0,0 +1,49 @@
|
||||
---
|
||||
hide_title: true
|
||||
hide_table_of_contents: true
|
||||
title: Condition
|
||||
---
|
||||
|
||||
<##head##>
|
||||
|
||||
# Condition
|
||||
|
||||
This node evaluates a condition and sends one of two <span className="ndl-signal">signals</span> depending on if the condition is <span className="ndl-data">true</span> or <span className="ndl-data">false</span>.
|
||||
|
||||
<div className="ndl-image-with-background l">
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
The input <span className="ndl-data">Condition</span> will be treated as a <span className="ndl-data">boolean</span>, and the evaluation happens when the input changes, unless an explict <span className="ndl-signal">signal</span> is connected to the <span className="ndl-signal">Evaluate</span> input.
|
||||
|
||||
<##head##>
|
||||
|
||||
<div className="ndl-image-with-background l">
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
## Inputs
|
||||
|
||||
| Data | Description |
|
||||
| ------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
||||
| <span className="ndl-data">Condition</span> | <##input:condition##>A boolean that decides which output signal (**On true** or **On false**) that should be triggered when the **Evaluate** signal is triggered or when the condition changes, if the **Evaluate** signal is not connected.<##input##> |
|
||||
|
||||
| Signal | Description |
|
||||
| -------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
||||
| <span className="ndl-signal">Evaluate</span> | <##input:evaluate##>Evaluates the **Condition** input and triggers the respective output signal. If no signal is connected to Evaluate, the node will evaluate the input everytime the input changes.<##input##> |
|
||||
|
||||
## Outputs
|
||||
|
||||
| Data | Description |
|
||||
| ------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
||||
| <span className="ndl-data">Is True</span> | <##output:result##>A <span className="ndl-data">boolean</span> that is <span className="ndl-data">true</span> when the latest evaluated value on the **Condition** input is true. <##output##> |
|
||||
| <span className="ndl-data">Is False</span> | <##output:isfalse##>A <span className="ndl-data">boolean</span> that is <span className="ndl-data">false</span> when the latest evaluated value on the **Condition** input is false. <##output##> |
|
||||
|
||||
| Signal | Description |
|
||||
| -------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------- |
|
||||
| <span className="ndl-signal">On True</span> | <##output:ontrue##>Triggered when **Evaluate** is triggered and **Condition** is <span className="ndl-data">true.</span><##output##> |
|
||||
| <span className="ndl-signal">On False</span> | <##output:onfalse##>Triggered when **Evaluate** is triggered and **Condition** is <span className="ndl-data">false.</span><##output##> |
|
||||
94
nodes/utilities/logic/states.md
Normal file
94
nodes/utilities/logic/states.md
Normal file
@@ -0,0 +1,94 @@
|
||||
---
|
||||
hide_title: true
|
||||
hide_table_of_contents: true
|
||||
title: States
|
||||
---
|
||||
|
||||
<##head##>
|
||||
|
||||
# States
|
||||
|
||||
This node is used to switch between logical states. Each state holds values that can be transitioned between. You can define as many states and values as needed.
|
||||
|
||||
<div className="ndl-image-with-background l">
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
The <span className="ndl-node">State</span> node is often used to create animations on user interactions, and create state machines. Learn more in the State Node Guide.
|
||||
|
||||
<div className="ndl-image-with-background l">
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
<##head##>
|
||||
|
||||
To learn more take a look at the [States guide](/docs/guides/user-interfaces/states).
|
||||
|
||||
## Inputs
|
||||
|
||||
| Data | Description |
|
||||
| ------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
||||
| <span className="ndl-data">States</span> | A **States** node can have as many states as is necessary. Add a new state by clicking on the plus button. |
|
||||
| <span className="ndl-data">Values</span> | Every state will have its own set of values. All values need to be set for every state that is added. |
|
||||
| <span className="ndl-data">State</span> | <##input:state##>This input controls the current state. By setting this input to the same name as one of the available states, **State** node will change to that state.<##input##> |
|
||||
| <span className="ndl-data">Use Transitions</span> | <##input:useTransitions##>Setting this to <span className="ndl-data">true</span> will turn on transitions when moving between states, while <span className="ndl-data">false</span> will turn them off. <##input##> |
|
||||
|
||||
| Signal | Description |
|
||||
| ------------------------------------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
||||
| <span className="ndl-signal">Toggle</span> | <##input:toggle##>Triggering this signal will force the **State** node to move to the next state in its state list, or the first state if the current state is the last one.<##input##> |
|
||||
|
||||
### Value types
|
||||
|
||||
For each value you can specify the type. Default is **Number**.
|
||||
|
||||
<div className="ndl-image-with-background">
|
||||
<img src="/nodes/animation/states-value-types.png" className="ndl-image small"></img>
|
||||
</div>
|
||||
|
||||
### State values
|
||||
|
||||
For every state you can specify each of the values. This is the value that they will have when you are at that specific state. You can also set the values for each state by connecting them to other nodes.
|
||||
|
||||
<span className="hidden-props-for-editor"><##input:.\*##>The value of a property for a specific state.<##input##></span>
|
||||
|
||||
<div className="ndl-image-with-background">
|
||||
<img src="/nodes/animation/state-values.png" className="ndl-image small"></img>
|
||||
</div>
|
||||
|
||||
### State transition
|
||||
|
||||
Here you specify if there should be a transition to the target state. When you switch to the given state it will transition smoothely over time. Each state has a default transition and individual transitions for **Number** and **Color** types. Use the curve editor to specify the timing for the transition.
|
||||
|
||||
<div className="ndl-image-with-background">
|
||||
<img src="/guides/states/change-size-curve.gif" className="ndl-image med"></img>
|
||||
</div>
|
||||
|
||||
To learn more take a look at the [States guide](/docs/guides/user-interfaces/states).
|
||||
|
||||
### To state actions
|
||||
|
||||
Each state will have a signal input called **To** followed by the state name. This can be used to connect a signal that will take the states node to that state when the signal is triggered.
|
||||
|
||||
<span className="hidden-props-for-editor"><##input:to-\*##>Triggers the **State** node to move to this state.<##input##></span>
|
||||
|
||||
## Outputs
|
||||
|
||||
| Data | Description |
|
||||
| ---------------------------------------- | ------------------------------------------------------------------------------- |
|
||||
| <span className="ndl-data">State</span> | <##output:state##>The name of the current state.<##output##> |
|
||||
| <span className="ndl-data">Values</span> | All of the values for the current state and for any transitions that is active. |
|
||||
|
||||
<span className="hidden-props-for-editor"><##output:.\*##>The value of the property, given the current state and transition.<##output##></span>
|
||||
|
||||
| Signal | Description |
|
||||
| -------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
||||
| <span className="ndl-signal">State Changed</span> | <##output:stateChanged##>A signal that is sent when the current state is changed.<##output##> |
|
||||
| <span className="ndl-signal">At `[State Name]`</span> | True when the currently selected state is `[State Name]`. For example, if the _State_ node has a state _Started_, it will have an output signal called _At Started_. |
|
||||
| <span className="ndl-signal">Has Reached `[State Name]`</span> | Signal sent when the state animation to state `[State Name]` is complete. |
|
||||
|
||||
<span className="hidden-props-for-editor"><##output:at-\*##>This value is <span className="ndl-data">true</span> when this state is active, otherwise <span className="ndl-data">false</span>.<##output##></span>
|
||||
<span className="hidden-props-for-editor"><##output:reached-\*##>This signal is sent when the specific state has been reached.<##output##></span>
|
||||
50
nodes/utilities/open-file-picker.md
Normal file
50
nodes/utilities/open-file-picker.md
Normal file
@@ -0,0 +1,50 @@
|
||||
---
|
||||
hide_title: true
|
||||
hide_table_of_contents: true
|
||||
title: Open File Picker
|
||||
---
|
||||
|
||||
<##head##>
|
||||
|
||||
# Open File Picker
|
||||
|
||||
This node opens a file picker dialog. Noodl uses the system file picker dialog, meaning it works seamlessly with the users native device experience.
|
||||
|
||||
<div className="ndl-image-with-background l">
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
You can define what file types are allowed to be uploaded. This is done by entering a <span className="ndl-data">string</span> of file types: each item needs to start with a period (`.`) and be separated by a comma (`,`). Leave the list blank if you want to accept any file type.
|
||||
|
||||
<##head##>
|
||||
|
||||
## Inputs
|
||||
|
||||
| Signal | Description |
|
||||
| ---------------------------------------- | ------------------------------------------------------------------------------- |
|
||||
| <span className="ndl-signal">Open</span> | <##input:open##>Send a signal to this input to open the file picker.<##input##> |
|
||||
|
||||
| Data | Description |
|
||||
| ----------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
||||
| <span className="ndl-data">Accepted file types</span> | <##input:accepted file types##>A comma separated list of file types that the user can select. Leave blank to accept any file type.<##input##><br/><br/>The file type can be specified as a filename extension, starting with a period. E.g. `.png`, `.json` or `.png, .jpg`.<br/><br/>The type can also be specified as a [MIME type](https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/MIME_types/Common_types). E.g. `image/*`, `image/png` or `video/mp4`. |
|
||||
|
||||
## Outputs
|
||||
|
||||
| Data | Description |
|
||||
| -------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
||||
| <span className="ndl-data">File</span> | <##output:file##>A web file API Object.<##output##> A [File](https://developer.mozilla.org/en-US/docs/Web/API/File) object. This can be used uploaded via [Upload File](/nodes/data/cloud-data/upload-file), sent as a part of a [REST](/nodes/data/rest) call, processed in a [Function](/nodes/javascript/function) node, used together with modules, or other tasks. |
|
||||
|
||||
### Metadata
|
||||
|
||||
| Data | Description |
|
||||
| ----------------------------------------------- | ---------------------------------------------------------------------- |
|
||||
| <span className="ndl-data">Path</span> | <##output:path##>The local path to the file.<##output##> |
|
||||
| <span className="ndl-data">Name</span> | <##output:name##>Name of the file, without the path.<##output##> |
|
||||
| <span className="ndl-data">Size in bytes</span> | <##output:size in bytes##>Total size of the file in bytes.<##output##> |
|
||||
| <span className="ndl-data">Type</span> | <##output:type##>The file type<##output##> |
|
||||
|
||||
| Signal | Description |
|
||||
| ------------------------------------------- | --------------------------------------------------------------------------- |
|
||||
| <span className="ndl-signal">Success</span> | <##output:success##>Triggered when the user has selected a file<##output##> |
|
||||
27
nodes/utilities/screen-resolution.md
Normal file
27
nodes/utilities/screen-resolution.md
Normal file
@@ -0,0 +1,27 @@
|
||||
---
|
||||
hide_title: true
|
||||
hide_table_of_contents: true
|
||||
title: Screen Resolution
|
||||
---
|
||||
|
||||
<##head##>
|
||||
|
||||
# Screen Resolution
|
||||
|
||||
This node outputs the <span className="ndl-data">width</span>, <span className="ndl-data">height</span> and <span className="ndl-data">aspect ratio</span> of the display area in CSS pixels.
|
||||
|
||||
<div className="ndl-image-with-background l">
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
<##head##>
|
||||
|
||||
## Outputs
|
||||
|
||||
| Data | Description |
|
||||
| ---------------------------------------------- | ----------------------------------------- |
|
||||
| <span className="ndl-data">Width</span> | The width of the display area in pixels. |
|
||||
| <span className="ndl-data">Height</span> | The height of the display area in pixels. |
|
||||
| <span className="ndl-data">Aspect Ratio</span> | The width divided by the height. |
|
||||
33
nodes/utilities/unique-id.md
Normal file
33
nodes/utilities/unique-id.md
Normal file
@@ -0,0 +1,33 @@
|
||||
---
|
||||
hide_title: true
|
||||
hide_table_of_contents: true
|
||||
title: Unique Id
|
||||
---
|
||||
|
||||
<##head##>
|
||||
|
||||
# Unique Id
|
||||
|
||||
This node generates a unique ID, something that is very useful when storing data in a backend like Noodl Cloud Services.
|
||||
|
||||
<div className="ndl-image-with-background l">
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
Generating a unique ID for every entity in the database means that it can easily be retrieved and referenced, no matter what the content is.
|
||||
|
||||
<##head##>
|
||||
|
||||
## Inputs
|
||||
|
||||
| Signal | Description |
|
||||
| --------------------------------------- | ------------------------------------- |
|
||||
| <span className="ndl-signal">New</span> | Set the Id output to a new unique id. |
|
||||
|
||||
## Outputs
|
||||
|
||||
| Data | Description |
|
||||
| ------------------------------------ | -------------------------------------- |
|
||||
| <span className="ndl-data">Id</span> | The current id generated by this node. |
|
||||
Reference in New Issue
Block a user