-
Notifications
You must be signed in to change notification settings - Fork 0
Visual Scripting
With HTML Designer's visual scripting, you can script interactions on your website without writing a single line of code.
This feature is in beta, and incomplete.
We are still working on it and we are looking for feedback. If you discover any issues, please report them on the repository.
The output of the script is not yet placed into your page.
Let's assume you already have a webpage set up within the IDE, and you want to add some scripted behaviour. First step is to add unique ID's to the elements on your page that you wish to script.
- In the Tag Hierarchy dock, select an element
- In the Properties dock, provide an ID.
- Repeat for all elements you wish to script.
[images]
For now, the only way to open the visual scripting editor is to click the "Tools > Visual Script" button in the menu bar.
In the future, the editor will be a dock-able window placed at the bottom of the IDE.
[image]
Visual scripting takes the form of a 'graph' of nodes.
A node represents something such as a mathematical operation, an element on your document, or a value.
Nodes can be created from the right-click menu, or from the 'graph > add' button found in the menu bar.
Nodes can receive input from other nodes, and can output data to other nodes.
- Outputs are Green
- Inputs are orange.
Wires dragged from an output to an input lets data flow from the output to the input.
Let's make a simple connection between two nodes.
Right click > Maths > Add
A mathematical 'add' node will add two numbers together. Taking a look at the node's inputs (left), we can see that it has three inputs, A, B and trigger.
A and B are the two numbers to be added together, and trigger is some kind of event on your page that would trigger this node to run.
Hovering the mouse over these inputs will show a tooltip displaying the type of data the input can receive, and a default value that is used if no wires are connected.
Let's provide some information to the inputs.
Right click > Random > Random Number
A random number node will output a random number. It takes two inputs for the minimum and maximum values, but we'll ignore those for now.
The nodes can be organised by dragging them around using their title bar.
A quick drag from the random number node's output to the add node's A input will create a wire. Repeat the same for B.
When executed, the random number node will be ran once for every connection, so the two numbers we're using will be different.
Now, you've now created a simple script that will generate two random numbers, and add them together - but you a keen observer may have noticed that the script is not triggered by anything.
Nodes with orange titles are not included in the script being generated from your graph.
This may be because they are not connected correctly, or are not being triggered.
(Note that in the beta some nodes may not be compiled correctly and will appear orange even if they are connected correctly.)
Technical Description :
Nodes have a 'touched' flag, which is lowered when a compilation is started. The graph compiler, when successfully includes a node in the outputted script will raise the flag. After compiling, the title bar is orange if this
touchedflag is low.
Graph nodes representing elements on your web page can trigger your scripts to run.
For example, let's right click > From Document... and select a button or link from the document.
On the right-hand side of the node are two circular outputs. These outputs, as indicated by the tooltip shown when hovering, are triggers.
Triggers can be distinguished from informational outputs by their circular shape.
- Triggers are circular
- Data is square
In the graph we've created above, we want to trigger the add function with a simple wire from the button's click trigger to the trigger input of the add node.
The instant you make this connection, you'll notice the title bar of the add node is no longer orange. This indicates that the node is now included in the web page.
However, you may have noticed triggers on the other node we added, too. Why did we have to trigger the 'add', but not the random number?
Well this is because, when triggered, a node will automatically execute nodes providing inputs so that the node itself is able to run. It does not automatically trigger things that use the output of the node.
In the way that the graph is pictured here, this can be described a bit more visually by simply saying that a trigger works towards the left from the node being triggered, and not towards the right.
Knowing this, we now know that triggers should typically by attached to the right-most node that can be triggered.
The output can then be applied back into an element from your document in some way that completes the interaction.
This section is incomplete.
This section is incomplete.
This section is incomplete.
Nodes can be grouped together by selecting them, just as you would with icons on your desktop. Simply drag a square that completely covers all of the nodes you wish to select.
When you let go of the mouse, a box will be drawn around the nodes. This temporary group allows you to perform actions on many nodes at once, such as moving, duplicating or deleting.
However, once you click away from the group, the group will be deleted.
The group can be saved by clicking on it, and providing a name. Saving a group provides a handy tool to organise your nodes, and label sections of your graph.
This section is incomplete.
This section is incomplete.