Powered by Blogger.

Thursday, December 1, 2016

Tag: ,

Lesson 4: Magicblocks.io - Visit to the playground



Playground of the magicblocks IDE is the platform where you develop your logic. In this article you will learn how to start the playground and introduce major components of the magicblocks playground home.

Step 1




Login to magicblocks and click on 'Playground' link on left nav bar. If you you are logging in for the first time following messages will be displayed in the playground.
  • First message in Red color indicates that the playground has not started yet. You need to start the playground to develop your projects.
  • Second message in Green indicates your licence information. Its validity and valid time period.

Step 2


Click on Start playground to activate your playground instance.

Step 3


After sarting the playground your window will be updated as follows.
  • Top Left box indicates the status of the magicblocks playground, whether its working or having a trouble in functioning or stopped.
  • Top Right box indicates where your playground is hosted. IP of the host will be displayed in here.
  • Bottom Left box displays the links for the playground where you connect your systems and logic. (Where drag, drop and connect happens) Features and basics of this will be discussed later.
  • Bottom Right box indicates your licence information. Its validity and valid time period.

Step 4

Click on "Click to open playground" and your magicblocks playground session will be opened in new tab or window in your web browser.
Note: If you are connecting to the internet via an HTTP Proxy you will experience problems in connecting to the playground

Step 5

Lets have a closer look of each segment in the IDE.
White space at the middle is the drawing area, where you put blocks and connect them to build your logic.


Step 6

To the left of this area contains the building nodes of the magicblocks. These node blocks are categorized according to their properties as follows.
  • Input
  • Output
  • Function
  • Social
  • Image Processing
  • Dashboards
  • Arduino
  • ESP
To know more about what each blocks do, refer to the documentation of the blocks here



Step 7

Right side of the drawing area contains three tabs, named "info", "config", "debug" where you can view information, set configuration and visualize debugging messages using this pane.


Step 8

On the left top of the screen, Deploy button is located. 


When no blocks are present in the drawing area, this button is disabled by default. Once you start drawing your logic, the button will be enabled. This button also contains the deploying options as well. Simply click on the deploy button when you are done with building the logic and you are good to go!