Introduction: Lesson4 : Magicblocks.io - Playground

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

Step 1:

Login to magicblocks and click on Playground tab on leftside bar. Then Magicblocks playground will be opended. 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 activating the playground your playground window will be updated as follows.

  • Left top box indicates the status of the magicblocks playground, whether its working or having a trouble in functioning.
  • Right top box indicates where your playground is hosted. IP of the host will be displayed in here.
  • Left bottom 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.
  • Right bottom 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.

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
  • Dashboards
  • Arduino
  • ESP

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. You can set your deployment options and deploy your project by pressing this button.

Step 9:

At the left top corner, option button is located where you can modify view options, import your designs and so on.

Thats some basics of Playground interface of magicblocks IDE. We will post more information about node blocks in latter articles. Enjoy!