If this is your first visit, be sure to
check out the FAQ by clicking the
link above. You may have to register
before you can post: click the register link above to proceed. To start viewing messages,
select the forum that you want to visit from the selection below.

[Entry for PHPoC] Graphical programming for your own IoT board

However, this time, it is a different story. We don't just make some plug-ins for the existing platforms, we are going to modify the software and make it work our way. Of course, everything is open-source. Everyone should be able to do it. But, does it take time and effort to dig into their source code?

The answer is: "It may be easier than you think!". In this post, I want to show you the steps to include a new hardware platform and build your customized version of one existing graphical programming software. And then, everyone will be able to do it themselves.

Alright, let's start.

2.1. Entry, a Scratch-style programming platform:

Scratch-style programming platform, in short, is the software platform that provides a graphical way to program: instructions are represented as colorful blocks, instead of boring textual lines. These programs are designed to help everyone, especially children, to learn programming and creative thinking.

Ladies and gentlemen, I would like to introduce you Entry, a Scratch-style graphical programming platform.

From Entry homepage: Entry is an education platform created to help anyone learn to code. Students are able to learn to code while playing. Teachers are able to teach and manage students effectively.

This open-source software program comes from Korea, developed and maintained by Entry Labs. It is written in HTML5 and JavaScript.

Tho they provide Developer guide, there is no English manual, so it may be painful for non-Korean speakers to catch up (including me). Fortunately, Google Translate worked quite well, and their source code is not too complicated to follow, so I still managed to get it.

2.2. System architecture

The system architecture of Entry is quite similar to Scratch, except that here they provide an official Hardware Connector app for users.

There are two core modules in Entry: Entry-js and Entry-hw.

+ Entry-js is the editor work-space module. If you want to create new programming blocks or modify user interface, you will need to check this module.

By design concept, Entry editor can be loaded on web browsers, however, due to security reason, web browsers can not interact directly with serial COM port, so that's why a hardware connector app is needed. They already supported tons of hardware devices in Entry-hw, but if yours is not on the list, you can add and define the communication interface for your device.

Note that in the json file above, you will need to define a unique hardware ID for your device. For testing, you can set it as anything different from the existing IDs.

Actually, this part is just for your information, because in my project I don't use Hardware connector app. Wonder why? Because with PHPoC device I am using, I can connect it with Entry editor via WebSocket (no security restriction tho), so there is no need of serial port connection neither Hardware connector app. But I already tried this step, so you can still leave me questions if you have any.My customized version of Entry with PHPoC

3.2.Design programming blocks for your hardware platform:

Next is Entry-js, the editor work-space module.

Code:

npm install

You can use this build command:

Code:

npm run dist

It will compile source files into \dist\entry.js file.

You can use the command below to run a test server on localhost.

Code:

npm run serve

Programming blocks
There is a lot of stuff in entry-js, but for adding new programming blocks for your hardware, you just need to follow the steps below:

- Browse to \src\playground\blocks\, create block_Your_Device_Name.js

You can refer to other block definition files in the same folder to create your own. Here you will define the shape, color, the data type, the functions to handle exchanging data with Hardware connector.

Just remember, only first 4 digits in the defined hardware ID are used here.

Following the steps above, basically you can add new hardware and define new programming blocks.

4. Build your customized graphical programming software:

Entry offline is a desktop app (based on Electron framework) that includes both editor and hardware connector module. You can download source code from here.

In entry-offline folder, the hardware connector module is available at:

\src\renderder\bower_components\entry-hw\app\modules\

And the editor work-space module, is available at:

\src\renderder\bower_components\entryjs\dist\entry .min.js

Note that here, this module has been compiled and minified. You can refer to 3.2 to compile entry.js file from entry-js module.

You also need to add the new object types, which you declared in block_Your_Device_Name.js, to \src\renderer\src\static.js. Probably you will know what to do after taking a look at the file and referring to other included objects, it is quite straightforward. You can refer to the below:

Finally, after finish your editing, you may run some commands for packaging and building the customized software. Let's refer to package.json file to select the appropriate commands. For example, I use the following command to make installation file for Windows 64-bit: