Roblocks

An introduction to the configuration protocol

Dustin Hendriks

May 11, 2021

Document History

Version

Date

State

Adjustments

Commentary

1.0

14-05-2021

Release

Release

None

 

 

 

 

 

1

1Introduction to Roblocks

Roblocks is a GUI-driven development environment which aims to make scripting accessible, so that anyone can create a small program for a (your) robot.

Roblocks reads a configuration file (JSON), and uploads a single JSON file containing different blocks (a sequence) that can be used to control the robot.

This document describes how support for Roblocks can be implemented for your robot / project, so that your robot or device may perform pre-programmed actions.

Advantages of using Roblocks:

A Graphical User Interface has already been made for you and your users.

Using JSON you can easily add new actions and commands.

Roblocks does not have any alternative.

Accessible and fun after implementation (especially for people other than programmers).

Any implementation of the outgoing Roblocks-protocol must be written on the server side (= your robot or device), which enables you to hide your protocols and functionalities for the user.

Disadvantages of using Roblocks:

Can be time-consuming to implement for advanced features.

Roblocks is not able to listen to and receive responses, therefor sensordata can not be utilized. Roblocks can only control your robot.

Working with arguments takes longer to implement than using pre-defined behaviour on your server side, for commands without any arguments.

Get the latest Roblocks from: https://github.com/jetspiking/Roblocks

2

2Protocol

Roblocks reads a configuration file on startup. This file lists all actions (usable blocks) in the program. All arguments except "name" are optional, however, it is recommended to include atleast a description and image.

Every component (block) should look exactly like the following, to prevent reading errors.

1{

2"name": "Movement",

3"image": "move.png",

4"attributes": ["move_forward", "move_backward", "move_left"],

5"description": "Move your robot",

6"tags": ["Movement"]

7}

Listing 1: JSON example

The components (blocks) need to be wrapped inside a components object, which is displayed below.

1{

2{

3"components":[{"your_object_1"}, {"your_object_2"}]

4}

5}

Listing 2: JSON example

A full example can be viewed on the next page.

3

1{

2{

3"components":

4[

5{

6

"name": "Movement",

7

"image": "move.png",

8

"attributes": ["move_forward", "move_backward", "move_left"],

9

"description": "Move your robot",

10

"tags": ["Movement"]

11},

12

13{

14"name": "Audio",

15"image": "volume-2.png",

16"attributes": ["filename", "volume", "url"],

17"description":"Play audio on robot",

18"tags":["Audio", "Music", "MP3"]

19},

20

21{

22"name":"Camera",

23"image":"eye.png",

24"attributes":["view_cam"],

25"description":"Spy on your robot",

26"tags":["Monitoring","Camera","Cam"]

27},

28

29{

30"name":"AI",

31"image":"cpu.png",

32"attributes":["Walk_until_obj"],

33"description":"AI",

34"tags":["AI", "ML", "Smart"]

35},

36

37{

38"name":"Settings",

39"image":"settings.png",

40"attributes":["Perform_sys_check"],

41"description":"Robot settings",

42"tags":["Settings"]

43}

44]

45}

46

47}

Listing 3: JSON example

4

In the application the layout (right window) will look like the following, using only a few more components than displayed in the example.

5

3Outgoing JSON

The outgoing JSON-protocol describes all attributes for each node (block), which can be received by uploading to a speci c port and IPv4-address, as displayed under preferences.

A full example can be viewed below. The text between the quotes (attributes) are whatever you want them to be, since you can set them to any text you would like.

1{

2"components": [

3{

4"operations": [

5{

6

"name": "Commands",

7

"attributes": [

8

{

9

"Stop": ""

10

}

11

]

12}

13],

14"name": "Node"

15},

16{

17"operations": [

18{

19"name": "Connectivity",

20"attributes": [

21{

22

"WiFi": ""

23

},

24

{

25

"Bluetooth": ""

26

}

27

]

28}

29],

30"name": "Node"

31}

32]

33}

Listing 4: JSON example

6

4Icons

The following list displays all icons that can be used by default, by referring to each name. These icons are Open Source and are copied from https://github.com/feathericons/feather and have been converted to .png files.

activity.png

airplay.png

alert-circle.png

alert-octagon.png

alert-triangle.png

align-center.png

align-justify.png

align-left.png

align-right.png

anchor.png

aperture.png

archive.png

arrow-down.png

arrow-down-circle.png

arrow-down-left.png

arrow-down-right.png

arrow-left.png

arrow-left-circle.png

arrow-right.png

arrow-right-circle.png

arrow-up.png

arrow-up-circle.png

arrow-up-left.png

arrow-up-right.png

at-sign.png

award.png

bar-chart.png

bar-chart-2.png

battery.png

7

battery-charging.png

bell.png

bell-off.png

bluetooth.png

bold.png

book.png

book-open.png

bookmark.png

box.png

briefcase.png

calendar.png

camera.png

camera-off.png

cast.png

check.png

check-circle.png

check-square.png

chevron-down.png

chevron-left.png

chevron-right.png

chevron-up.png

chevrons-down.png

chevrons-left.png

chevrons-right.png

chevrons-up.png

chrome.png

circle.png

clipboard.png

clock.png

cloud.png

cloud-drizzle.png

cloud-lightning.png

cloud-off.png

8

cloud-rain.png

cloud-snow.png

code.png

codepen.png

codesandbox.png

coffee.png

columns.png

command.png

compass.png

copy.png

corner-down-left.png

corner-down-right.png

corner-left-down.png

corner-left-up.png

corner-right-down.png

corner-right-up.png

corner-up-left.png

corner-up-right.png

cpu.png

credit-card.png

crop.png

crosshair.png

database.png

delete.png

disc.png

divide.png

divide-circle.png

divide-square.png

dollar-sign.png

download.png

download-cloud.png

dribbble.png

droplet.png

9

edit.png

edit-2.png

edit-3.png

external-link.png

eye.png

eye-off.png

facebook.png

fast-forward.png

feather.png

figma.png

file.png

file-minus.png

file-plus.png

file-text.png

film.png

filter.png

ag.png

folder.png

folder-minus.png

folder-plus.png

framer.png

frown.png

gift.png

git-branch.png

git-commit.png

git-merge.png

git-pull-request.png

github.png

gitlab.png

globe.png

grid.png

hard-drive.png

hash.png

10

headphones.png

heart.png

help-circle.png

hexagon.png

home.png

image.png

inbox.png

info.png

instagram.png

italic.png

key.png

layers.png

layout.png

life-buoy.png

link.png

link-2.png

linkedin.png

list.png

loader.png

lock.png

log-in.png

log-out.png

mail.png

map.png

map-pin.png

maximize.png

maximize-2.png

meh.png

menu.png

message-circle.png

message-square.png

mic.png

mic-off.png

11

minimize.png

minimize-2.png

minus.png

minus-circle.png

minus-square.png

monitor.png

moon.png

more-horizontal.png

more-vertical.png

mouse-pointer.png

move.png

music.png

navigation.png

navigation-2.png

octagon.png

package.png

paperclip.png

pause.png

pause-circle.png

pen-tool.png

percent.png

phone.png

phone-call.png

phone-forwarded.png

phone-incoming.png

phone-missed.png

phone-off.png

phone-outgoing.png

pie-chart.png

play.png

play-circle.png

plus.png

plus-circle.png

12

plus-square.png

pocket.png

power.png

printer.png

radio.png

refresh-ccw.png

refresh-cw.png

repeat.png

rewind.png

rotate-ccw.png

rotate-cw.png

rss.png

save.png

scissors.png

search.png

send.png

server.png

settings.png

share.png

share-2.png

shield.png

shield-off.png

shopping-bag.png

shopping-cart.png

shuffle.png

sidebar.png

skip-back.png

skip-forward.png

slack.png

slash.png

sliders.png

smartphone.png

smile.png

13

speaker.png

square.png

star.png

stop-circle.png

sun.png

sunrise.png

sunset.png

tablet.png

tag.png

target.png

terminal.png

thermometer.png

thumbs-down.png

thumbs-up.png

toggle-left.png

toggle-right.png

tool.png

trash.png

trash-2.png

trello.png

trending-down.png

trending-up.png

triangle.png

truck.png

tv.png

twitch.png

twitter.png

type.png

umbrella.png

underline.png

unlock.png

upload.png

upload-cloud.png

14

user.png

user-check.png

user-minus.png

user-plus.png

user-x.png

users.png

video.png

video-off.png

voicemail.png

volume.png

volume-1.png

volume-2.png

volume-x.png

watch.png

wifi.png

wifi-off.png

wind.png

x.png

x-circle.png

x-octagon.png

x-square.png

youtube.png

zap.png

zap-off.png

zoom-in.png

zoom-out.png

15