This website uses cookies to ensure you get the best experience on our website.Learn more.
Understood

Here you’ll find everything you need to know to create your best prototype.

Documentation

    Base Setup

    Arduino

    Suported Boards

    Currently we support only Arduino boards. The boards we support are listed here:

    Firmata

    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.

    Firmata

    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.

    Grove

    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.

    Grove Beginner Kit

    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!

    Grove Shield

    Of course, you can also connect the Grove Shield for Arduino as displayed below:

    Arduino Grove

    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.

    Using Own Components

    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.

    Slot Types

    In general there are four slot types that are currently supported: digital, analog, pwm and I2C.

    • digital — the basic setup. It only can communicate with “on” or “off” in both directions, in and out.
    • analog — analog slots are only able to read values (aka in). In comparison to the digital slot is able to read values between 0 and 1023, a relatively wide range to get detailed infos from your sensors.
    • pwm — this is a technology to transform digital values cleverly into an output that behaves as if it is “analog”. This enables some components to have a more granular output setting. Unfortunately on the Grove Shield, these slots are not marked. They do however still exist! E.g. on an Arduino Uno these slots are: D3, D5, and D6.
    • I2C — this is a serial communication connection that allows for more complex data handling. Only very very few components actually use this connection. You can think of it as an USB device that you simply plug in to your computer. That also is the reason why you do not need to specify which of the different I2C slots on your Arduino you are using. You can also split this slot with an adapter to plug in as many I2C devices as you want.

    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.

    Live View

    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.

    Connecting A Component

    Live Slot List

    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.

    Live Slot Remove

    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.

    Wizard

    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.

    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.

    Displaying The Current Value

    Live Slot Value

    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.

    Live Graph & Component Options

    Live Slot Graph

    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.

    Projects

    blokdots’ second window is the Project View. This is where your actually build your prototype and can create your programs.

    Using a Component in a Project

    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.

    Opening a Project

    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.

    Project Head

    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.

    Card Types

    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.

    Card Selection

    A button in the Project Window’s main area lets you easily select one of these two.

    If This Then That Cards

    IFTTT Card

    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

    Mapping Card

    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.

    Working with Cards

    Deleting a Card

    If you don’t need a card anymore, you can click the “×” symbol in the right corner of its header to delete it.

    Naming Cards

    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.

    Disabling Cards

    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.

    Filtering Cards

    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.

    Running Your Project

    Project Head

    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.

    Code Export

    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.

    Hidden Features

    Display Current Value of Sensor

    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.

    Activate Beta Features

    To activate features that are currently in Beta, go to blokdots › Preferences….

    Hardware Components

    Brightness Sensor

    analog
    A birghtness sensor is able to detect how much light is shining upon it. It could be used for example to build a luminaire that automatically siwtches on when its dark.
    If
    IfBrightness Sensorischanging
    IfBrightness Sensorisgettingover1unit
    ↗ See in Johnny-Five
    ↗ Go to Grove Component

    Button

    digital
    Buttons are the very basic inputs used everywhere. They can function as input at your keyboard, start element from your coffee machine or even as touch sensor at your door.
    If
    IfButtonispressed1unit
    IfButtonisreleased1unit
    IfButtonisheldfor1unit
    ↗ See in Johnny-Five
    ↗ Go to Grove Component

    LED

    digital
    LEDs are very tiny light sources. They come in a huge variety of colours. They can function as regular light or indicator of e.g. warnings.
    Then
    ThenLEDshouldswitchon
    ThenLEDshouldtoggle
    ThenLEDshouldpulsefor1unit
    ThenLEDshouldblinkfor1unit
    ThenLEDshouldadjust brightness
    ↗ See in Johnny-Five
    ↗ Go to Grove Component

    Relay

    digital
    This module can be used to control other curcuits that are not through the Arduino. It could be used for example to toggle a desk lamp.
    Then
    ThenRelayshouldswitch curcuitopen
    ThenRelayshouldtoggle
    ↗ See in Johnny-Five
    ↗ Go to Grove Component

    Potentiometer

    analog
    A (rotary) potentiometer is the basic turning knob. It can be used as input between 0 and 100%. It is not fully turnable though, most commonly only to 270 degrees.
    If
    IfPotentiometerischanging
    IfPotentiometerisgettingover1unit
    ↗ See in Johnny-Five
    ↗ Go to Grove Component

    Slide Potentiometer

    analog
    A slide potentiometer is the basic slider. It can be used as input between 0 and 100%. The Seed Studio slider has a total length of 30mm.
    If
    IfSlide Potentiometerischanging
    IfSlide Potentiometerisgettingover1unit
    ↗ See in Johnny-Five
    ↗ Go to Grove Component

    Buzzer

    digital
    Buzzers can produce simple sounds. They can be used to send acoustic warnings.
    Then
    ThenBuzzershouldbeep
    ↗ See in Johnny-Five
    ↗ Go to Grove Component

    Servo Motor

    pwm
    The servo motor is powerful and can be turned to a specific position. It can only be turned around 180 degrees. This might help to build an open / close mechanism.
    Then
    ThenServo Motorshouldadjust position
    ThenServo Motorshouldgo to1unit
    ↗ See in Johnny-Five
    ↗ Go to Grove Component

    Sound Sensor

    analog
    This one can measure loudness, so basically a microphone, which is not good enough to record audio.
    If
    IfSound Sensorischanging
    IfSound Sensorisgettingover1unit
    ↗ See in Johnny-Five
    ↗ Go to Grove Component

    LCD Display

    i2c
    An LCD is a simple display that can display up to 32 characters and change its background colour. Perfect for showing simple states or messages.
    Then
    ThenLCD Displayshoulddisplayyour text
    ThenLCD Displayshouldset background colortocolor
    ↗ See in Johnny-Five
    ↗ Go to Grove Component

    Temperature Sensor

    analog
    The temperature sensor measures the temperature, which can be output in degree Celsius. This could be used to build a simple interface thermometer.
    If
    IfTemperature Sensorischanging
    IfTemperature Sensorisgettingover1unit
    ↗ See in Johnny-Five
    ↗ Go to Grove Component

    Touch Button

    digital
    The touch sensor is basically the same as a button, except that it only reacts to capacitive contact from your skin, similar to the screen of a smartphone.
    If
    IfTouch Buttonispressed1unit
    IfTouch Buttonisreleased1unit
    IfTouch Buttonisheldfor1unit
    ↗ See in Johnny-Five
    ↗ Go to Grove Component

    Vibration Motor

    digital
    Vibration Motors simply vibrate. They are great to give users a haptic feedback.
    Then
    ThenVibration Motorshouldvibratefor1unit
    ↗ See in Johnny-Five
    ↗ Go to Grove Component

    Project

    virtual
    The project component is a virtual component to help you giving your project a default start setup.
    If
    IfProjectisstarting
    IfProjectisstopping

    Figma

    virtual
    A virtual component that represents all the elments selected in the Figma Plugin. This one allows you to manipulate any layer in Figma with your hardware. Go to the plugin site to read more about it. This integration is still in Beta. To use it please enable Figma Integration in the preferences.
    Then
    ThenFigmashoulddo actionFigma layer

    Counter

    virtual
    As simple as it can get, it simply counts up or down. Helpful if you want to let something happen after one or multiple other events have been triggered x times. This component is still in Beta. To use it please enable Virtual Components in the preferences.
    If
    IfCounterisat1
    IfCounterischanging
    Then
    ThenCountershouldcount up
    ThenCountershouldcount down
    ThenCountershouldbe set to0

    Timer

    virtual
    This component can be very helpful if you want to get something triggered after a certain amount of time, after something else has happened. This component is still in Beta. To use it please enable Virtual Components in the preferences.
    If
    IfTimerisat30seconds
    IfTimerischanging
    Then
    ThenTimershouldstart
    ThenTimershouldpause
    ThenTimershouldreset
    ThenTimershouldbe set to30seconds

    Signal Tower

    virtual
    This virtual component allows you to trigger multiple things when other elments get triggered. You can stack them together as you want to enable endless complexity. This component is still in Beta. To use it please enable Virtual Components in the preferences.
    If
    IfSignal Towerisreceivingmessage
    Then
    ThenSignal Towershouldsendmessage

    Integrations

    Figma Plugin

    Our Figma integration lets you manipulate different properties of layers in Figma right from your Arduino protoype.

    Setup

    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.

    Expose Your Layers

    Figma Plugin

    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.

    If This Then That card

    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.

    Mapping Card

    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.

    Run Your Project

    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.

    Privacy and Tracking

    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.

    How We Track

    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).

    What We Track and Why

    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:

    • That you use the app: We compile a number of monthly active users.
    • Which version of the app you use: We keep track of which versions of the app are actually in use, because when we push bugfixes we need to know which versions of the app to target.
    • That you added a card: We use this as a general indicator for how active our users are.
    • That you ran a prototype: To understand how users use the app, we want to collect some information about the projects that are created. We do not track the name of any project or card. We only track how many cards are in a project and which components are used (see below).
    • Which components are used: We would like to add more components to blokdots, to make it more useful to more users. In order to know which direction we should go in, it is important for us which components are actual being used in projects (and how often). Which components are used in a project is only tracked when you run the prototype.
    • That you used the export code function: We want to know how often this feature is being used so that we can decide how important it actually is for our users.

    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