Thinking spatially
Building a tool to organize your sessions
Once you've created your first tool is time to explore Fermat's possibilities. The spatial interface allows you to organise your content however you want. In this section we'll cover two main aspects:
- Block creation: how you can define new block types within Fermat.
- Placement and selection: how you can use your content as a reference to place elements or even how to access elements you selected to perform actions.
To do that, we'll build two different tools: a Todo List and a Task organiser.
ToDo List
Task organiser
You can create any block by calling the method
new with the corresponding block type - text, image, checkbox, etc. - of the new block. To control where to place it, we can use the position of the clicked button with the following command: me.position.Then we only need to move the position of the button (i.e 60 pixels vertically) and voila🪄! You have a simple TodoList.
when click me:
new "input" with {
"position" to me.position
"type" to "checkbox"
"label" to "Your Task"
}
set me.position to me.position + [0, 60]
end
You can also use other blocks as references. In this example, we'll use two blocks, a ToDo area and a Completed area to place the new blocks.
Assigning other blocks IDs for later usage
In addition, we can directly access to selected blocks by using the Selection API -
selection command. This will create a list containing all the IDs of the selected blocks. Therefore, we can iterate through them with the for each in command. For example, we could change the color of all the selected blocks using the following code: when click me:
set me.selected to selection
for each in me.selected (element):
set element.background to "red"
end
end
This allows us to directly access and manipulate our content without having to define a reference to their ID. Particularly, we are gonna check the value of the selected group of checkboxes and place them accordingly in the designated area. If an item is checked, it will be placed in the Completed area, otherwise, in the ToDo area. As you can see, we set this behaviour in
me.organise method:set me.toDoArea to "YOUR_BLOCK_ID"
set me.completedArea to "YOUR_BLOCK_ID"
set me.organise to (elements):
set completed to []
set toDo to []
for each in elements (e):
if e.value is false:
do append e to toDo
else:
do append e to completed
end
end
set currentPosition to me.toDoArea.position + [5,5]
for each in toDo (element):
set element.position to currentPosition
set currentPosition to element.position + [0,element.size[1] + 5]
end
set currentPosition to me.completedArea.position + [5,5]
for each in completed (element):
set element.position to currentPosition
set currentPosition to element.position + [0,element.size[1] + 5]
end
end
when click me:
set me.selected to selection
do me.organise with me.selected
end
Use Selection API to classify your content in different ways or create Chart blocks that help you set and track goals. You have all your space to play around and create new tools using these new concepts you just learned 💭 .
Combining ToDo List and organiser