Here you’ll find everything you need to know to create your best prototype.
Currently we support only Arduino boards. The boards we support are listed here:
To be able to communicate with blokdots, the Arduino needs to be flashed with Firmata. Firmata is a special protocol that allows the Arduino to communicate with a computer. One you start blokdots and plug in your Arduino, blokdots flashes the board with the Firmata automatically, so usually you do not have ot worry about that. This is indicated by a smal green box at the top of the Live View.
To install Firmata without the blokdots software, open the Arduino IDE and go to File › Examples › Firmata › StandardFirmataPlus
, and flash this on your board. It is the same file, if you are interested in the code.
We currently have decided to use the Grove components created by Seeed Studio, since they are very simple to use and do not require any wiring for the components.
The Beginner Kit has everything you need to start right away. A Seeeduino Lotus board with Grove connectors, 10 components, Grove cables, and a USB cable. It costs around 20 US$ (price subject to change due to external distributor).
You can order it here.
Disclaimer: We are currently about to implement all components featured in the kit, which means not every component is working yet with blokdots that comes with it. We already have the following components included: Button, Rotary Potentiometer, Brightness/Light, Sound, LED, and Buzzer. Please bare with us until we have the missing components included as well, thank you!
Of course, you can also connect the Grove Shield for Arduino as displayed below:
Simply put the shield on your Arduino and plug in the components into the slots.
Set the little switch at ”VCC” (next to the analog slots) to ”5V” to allow every component to function properly.
blokdots does, however, also work without the Grove shield – You can of course use your regular components as well. The name of the Arudino pins hereby resemble the Grove slots. E.g. What would have been Slot D4
is pin 4
on the Arduino board.
In general there are four slot types that are currently supported: digital, analog, pwm and I2C.
0
and 1023
, a relatively wide range to get detailed infos from your sensors.You can only plug in a component into the relevant fitting slot. See in the Hardware Components section which component is set for which type. Also the Wizard helps you to select the right available slot for your component when using blokdots.
blokdots has two windows: The Live View and the Project View. Let’s focus on the Live View first. The live view is the control center for you Arduino – it should always reflect the state that your Arduino is in right now. This means when you plug in a new components, you need to tell blokdots about it, so that it can control it.
The main part of the Live View is a list of the slots of your Arduino. To tell blokdots that you plugged in a new component, click on the appropriate slot. This will expand a list of all the components that are compatible with this slot. Select the one you plugged in and you are good to go.
To remove a component from the Live View once you unplug it, move your mouse over the appropriate slot. A “×” symbol appears in the top right corner of the slot. Click the symbol to remove the component.
It can be confusing the figure out which kind of component can be plugged into which kind of slot and where that slot is on your Arduino. blokdots solves this problem for your, with the setup Wizard.
Click the “Connect A New Component” button on the top of the Live View to open the Wizard. On the left side of the wizard there is a scrollable list of the components that are available – pick the one you want to connect. Now blokdots will recommend you a free slot to plug your component into and show you where that slot is on your board in the small map on the right side. If you are happy with this slot, go ahead and click “Set Component”, after you plugged it in. Otherwise you can click on the name of the slot displayed in the middle of the Wizard to get a list of all other slots that would be suitable.
Once set up, the slot displays the current value of the component. For a sensor it simply shows its reading value, for an actuator you are able to manipulate the value as well and directly see the feedback on the hardware component.
Next to the actual, the ”current value”, you are able to select the unit in which the value should be displayed. This depends on the component you have selected. While for a Temperature Sensor °C
might make more sense, for a button simply ”on” and ”off” will do.
After plugging in and setting up a component, you can click the small downward facing arrow on the right side of the slot to expand its detail view. What exactly is shown depends on the component, but usually you’ll find a Live Graph, giving you a visual representation of the component’s values of the last ten seconds, and in a second tab some options. With the options you can configure the exact behavior of the component. Most options show a little “i” symbol next to their title. Move your pointer over it to see a tooltip describe exactly what the option does.
blokdots’ second window is the Project View. This is where your actually build your prototype and can create your programs.
You need to tell blokdots which of the components that are currently connected and set up in the Live View you want to use in your project.
You do this in the Project View’s Project Components section on the left side of the window. There you see a list of all your Arduino’s slots and a preview of the components which are set up. To use a component in your project, click the “use” button on the right side of the slot. The component now become active. If you remove it from the Live View, it still is active in the Project View, because blokdots knows your project will only work if the component is set up.
If you do not need a component in your project any more you can remove it: move your mouse over the appropriate slot. A “×” symbol appears in the top right corner of the slot. Click the symbol to remove the component.
You can also give a component a custom name, for example if you use multiple components if of the same type in a project. Simply click on the name of the component in the Project Components section and type in the custom name.
blokdots works like any other macOS program for editing files, which means you can save and open your project as a document. When you open a previously saved project, the Project View will display the project. The Live View will not change, because it always displays the actual current state of your Arduino, not a “saved” state.
That means it can happen that you open a project that uses specific components, which are not set up in the Live View right now. To run the project you have to make sure to connect the components which you can see in the project’s Project Components section to your Arduino and set them up in the Live View. To automatically set up all the project’s slots at once, click the button showing a symbol of two arrows in the top left corner of the Project View.
You can create a program for your protoype by adding and configuring cards. There are two types of cards in blokdots: “If This Then That” cards and “Mapping” cards.
A button in the Project Window’s main area lets you easily select one of these two.
If This Then That cards are the most simple type of cards: They wait for somthing to happen, then trigger an action. To add a new card of this type to your project, press the “If … then …” button in the top left corner of the cards section in the Project View.
Now fill out the sentence to configure your card: Fist pick a component that you want to trigger the action and specify the circumstances. Then select a component to perform the action and specify its behaviour. Every one of the colored boxes in the card is a dropdown menu, giving you several options to choose from.
Mapping cards describe a continous relationship between to components. This means you can directly map the values from an in-component to the value of an out-component. For example a the position of a Potentiometer can control the brightness of an LED, or the value of a Temperature Sensor can control the position of a Servo Motor.
The relationship between the two components you select is linear, but you can control the minimum and maximum value of both components, allowing you to create flexible mappings.
If you don’t need a card anymore, you can click the “×” symbol in the right corner of its header to delete it.
By default the cards you create a just numbered, but you can give them more helpful names. Simpley click on the name of the card in the card’s header and enter the new name.
If you want to run your project without a specific card you can disable it temporarily. Click the toggle switch on the right side of the card’s header to disable or enable it.
When you have many cards it can be helpful to use the filter bar to find the one you are looking for. You find it on the top of the cards section in the Project View. When typing in your query, blokdots will filter the cards below. You can filter by the name of a card, the name of a component or the value of a parameter.
To run your project, press the big play button in the top left corner of the Project View. If there is an error in your project, it will be displayed up there as well. When you change your project while it is running, a small green indicator appears. Changes will only be effective, after you stop and restart your project.
If you want to export your project to JavaScript, go to File › Export to Code
and pick a location. It can be helpful to give your project components and cards custom names before exporting, to make the code more easily readable.
Here is an example of how this code would look like:
// ---- Setup the board ----
var five = require("johnny-five");
var board = new five.Board();
// -- Setup vars
var led;
// ---- IFTTT ----
// Project Start Signal
function ProjectStartSignalReaction() {
led.blink();
setTimeout(function() {
led.stop().off()
}, 5000)
}
// ---- Run ----
board.on('ready', function() {
// -- Setup components
led = new five.Led(2);
// -- Run reaction when project starts
// Project Start Signal
ProjectStartSignalReaction()
});
// ---- Stop ----
function stop() {
// Remove event listeners
if (led && led._events) {
led.removeAllListeners();
}
}
We are using Johnny Five to communicate with the Arduino. If you want to dive deeper into the generated JavaScript code, we suggest you have a look at its API to adjust the code to your needs.
To display the current value of a sensor, for example on an LCD Display, you need to set the “if” part of the card to “is changing”, then type in {{value}}
in a text field, to get it displayed.
To activate features that are currently in Beta, go to blokdots › Preferences…
.
Our Figma integration lets you manipulate different properties of layers in Figma right from your Arduino protoype.
First you need to install our Figma plugin: Get it here. Then you need to enable the Figma integration in blokdots, because it is still in Beta: Go to blokdots › Preferences…
and enable it.
No you can run the plugin in Figma – it only works with the macOS application of Figma, not when you are using Figma in your browser! Make sure to already have blokdots running the background. Figma and blokdots will now connect and you are good to go.
You need to tell blokdots, which layers from your Figma document you want to manipulate. To do that select a layer in Figma, then click the “Expose current selection to blokdots” button in the plugin. If you close the plugin, it remembers which layers were exposed when you open it again.
In blokdots you can now add an If This Then That card and select Figma as the “then” component. In the black dropdown menu, select the layer you want to manipulate. With regular layers you can rotate them, set the background color, set the opacity and set or change the position or size. For text layers you can also set the color of the text and the content of the text.
To display the value of a sensor in a text layer, set the condition of the “if” component to “is changing”, then select a text layer and the action “set text”. If you now type {{value}}
into the text field, your layer in Figma will display the value of the component.
You can also add a Mapping card in blokdots, select Figma as the “onto” component, and then select a layer from the black dropown menu. You can map the value of a component onto a layer’s size, position, opacity and color.
When running your project make sure the Figma plugin is also running and blokdots and Figma are connected. If the plugin doesn’t connect it can help to close it and run it again.
When you start blokdots for the first time, you are asked if you are okay with us collecting some usage data through the app. Unless you explicitly set the checkmark and opt in no data is collected whatsoever. If you change your mind you can always update the setting in the preference panel of blokdots.
We use Mixpanel to collect usage data. The data is tied to an anonymized user id (there is no way for us to find out who you are based on the data we receive).
We believe that getting some information about how our users actually use blokdots will help us improve the app and make sure we deliver the most value to our users. We greatly appreciate it if you choose to allow us to collect some usage data.
We make sure to never collect any data that lets us identify you or the specific content of your project.
If you allow us to collect your usage data, this is what we track:
If you have any questions about this, feel free to reach out to our support contact provided below.
If you have any questions or are in need of product support, don’t hesitate to reach out.moc.stodkolb@troppus