Open Propeller Project #5: BlocklyProp

Michel L · 2014-04-11 15:38

Recently I saw a post mentioning Blockly. A web based, graphical programming editor.

I liked this project and using the Arduino version of Blockly, BlocklyDuino, I created a Propeller version: BlocklyProp.

https://github.com/parallaxinc/BlocklyProp

It's in it's very early stages and doesn't contain a lot yet but I'm working on it every evening.
While Blockly is only javascript that runs in the browser, I added a server component to interact with your Propeller using Propellent Propeller-load from the PropGcc toolchain and compile using OpenSpin.

If anyone has advice, feature propositions, criticisms or want to participate. Please let me know.

Current stage:
I can find the COM port on which the propeller is connected, and you are able to compile. (Loading into ram or eeprom is my next task.)
Blocks currently available:

read pin value
write pin value
wait for x-milliseconds
repeat forever
repeat x-times
conditions (if, elseif, else)
variables
methods
numeric compare
boolean operations
numeric operations
bitwise operations
cognew
servo
Ping)))
Debug LCD

I will update this as I go along.

My last build can be downloaded from: http://owncloud.creatingfuture.eu/public.php?service=files&t=0eae565db031cd3ca3f1163de91c5984

You can see the application on http://blocklyprop.creatingfuture.eu/index.html.

Heater. · 2014-04-11 16:00

Wow, This sounds totally awesome.

Is it it possible to make the server side part cross platform. For example use openspin to compile the Spin code instead of propellent. There is also the cross-platform propeller loader from propgcc can be use to load the Propeller.

Are you aware of the Spin compiler, in JS, in the browser? http://forums.parallax.com/showthread.php/152711-A-Propeller-WebTool-Framework-for-Compiled-Languages
sorry that is a long thread, but there is good stuff at the end.

Cluso99 · 2014-04-11 18:04

Extremely interesting!

Michel L · 2014-04-12 03:09

Heater. wrote: »

Wow, This sounds totally awesome.

Thanks! Too you to Cluso99!

Heater. wrote: »

Is it it possible to make the server side part cross platform. For example use openspin to compile the Spin code instead of propellent.

I found the project and will have a look at it. Sadly they only provide the windows version, you need to build the Linux and Mac versions yourself. As I develop using Linux all day, creating a Mac version might require someone else.

Heater. wrote: »

There is also the cross-platform propeller loader from propgcc can be use to load the Propeller.

This looks easily doable: https://sites.google.com/site/propellergcc/documentation/tutorials/load-propgcc-code-images

Heater. wrote: »

Are you aware of the Spin compiler, in JS, in the browser? http://forums.parallax.com/showthread.php/152711-A-Propeller-WebTool-Framework-for-Compiled-Languages
sorry that is a long thread, but there is good stuff at the end.

If openspin looks to hard to use, I just might use this js version. It is indeed a post and I didn't have the chance to go through it all. As I have a server component I don't need to compile in the client.

Heater. · 2014-04-12 03:22

I would not worry about a Mac version of openspin. I'm sure there must be a Mac build kicking around somewhere. If not I'm sure it will come to be. (Thinks...isn't there a mac binary of openspin in the latest propgcc. propgcc uses it to create some loader parts)

Interesting. The JS version of openspin can be run on any platform under node.js. No need for specific binary builds. If your server component were made in JavaScript under node.js, used openspin and the loader from propgcc "transpiled" to JavaScript then you would have a cross platform solution.

Actually I started looking at getting the loader converted to JS a few days ago. It did actual compile very easily. No idea if it works yet. Needs some work getting the serial port access sorted out.

jazzed · 2014-04-12 10:33

Hi,

Pulled a clone. The bat file tries to run a .jar, but can't find it.

How do I build or get the .jar file? No build info in the README.txt ....

Thanks.

Heater. · 2014-04-12 10:38

Is it possible to split this up somehow so that the client part can be tried in a browser without the server part?
Us non-windows people want to play as well.

I'm sure we can fix up a little server to handle whatever HTTP requests it makes.

Heater. · 2014-04-12 10:47

jazzed wrote: »

Hi,
Pulled a clone..

Had to chuckle.

There is something eerily weird about that phrasing.

Sounds like you have just chatted up a clone of a good looking girl, who was no doubt good looking herself, in a bar in some far flung future sci-fi world.

Milliways perhaps.

koehler · 2014-04-12 23:17

This is something Ken needs to see and support.
I can see an edu board and this making for an excellent highschool or earlier entry level class.

Michel L · 2014-04-13 05:44

@jazzed
I 'thought this would suffice, but maybe I'll have to write more (I'm not used to making readme documents):

It is created as a maven project wich should make importing and building the project very easy. As there are a lot of static files I used the assembly plugin to create a zip file with all the files. (The application with dependencies, the bat file to start it, the compiler and all static files for the Blockly editor)

I now added a download link to the first post with the latest zip and tar.gz. They both contain the same content. They are built on a Windows computer, so it is possible that the linux executables are not set to be exectutable. (This is my first try with multi platform builds)

@Heater
It now runs on both windows and linux. (In linux just do a java -jar BlocklyProp-x.x-x.jar) It only requires Java 1.7.

It's already very easy to find the client content:

blockly contains the editor files
webcontent contains the index.html, css, and javascript to communicate with the server

Server content:

propeller-tools are the native executables
src/main/java contains all custom server code

Others:

pom.xml the maven project descriptor use for compiling and making the distribution files
src/main/assembly/dist.xml is the file that describes how to make the distribution files (zip and tar.gz)

@koehler
It would be great if this could be used as an entry level ide for the propeller.

Heater. · 2014-04-13 05:57

OK great. I'll try and find time to give it try soon.

Of course my plan is to bypass any legacy Java code

Michel L · 2014-04-13 09:31

I now created 2 build profiles. 1 creates the version you run locally, the other one creates a zip file with only the client code.

I will put the latest version of this regularly online. (Have a look in the first post for the url)

If you want to create your own server backend, just have a look at my different distribution profiles and start there to create your own. They are defined in src/main/assembly and are called from pom.xml.

jazzed · 2014-04-13 09:52

Michel L wrote: »

I now added a download link to the first post with the latest zip and tar.gz.

Thanks for that.

I was able to use what you have to do some LED blinking. Good work so far. Looking forward to more progress.

I don't use Maven and am a bit too busy the moment to bother with that. The Java server is something you added?

Looks like you have an on-line version? We have another development with Heater, msrobots, and David where we can compile and download spin programs to an ActivityBot with S6B from a remote server. All we have to do is get this Blockly project to do something similar.

Michel L · 2014-04-13 10:11

jazzed wrote: »

The Java server is something you added?

Yes, I use an embedded jetty that serves all the static files (because of the Blockly Iframe you cannot run without a server; file:// doesn't work) and using a servlet I do the interaction with the native code (OpenSpin and Propeller-load).

This could be easily replaced with another server implementation or even an other technology.

jazzed wrote: »

Looks like you have an on-line version? We have another development with Heater, msrobots, and David where we can compile and download spin programs to an ActivityBot with S6B from a remote server. All we have to do is get this Blockly project to do something similar.

My demo version is now hosted on a cheap php only hosting because it only serves files. But it would be great if we could combine our efforts to make it even easier to use.
As this way of programming is specifically for newcomers I want to make it as easy as possible.

Currently all I require is Java 1.7 and that the FTDI drivers are installed.

Michel L · 2014-04-13 12:19

Creating a blinking led is now easier. You can now repeat x times as well as repeat forever.

(As making builds available for download or putting a new version online to test, it might still take a while before you can test it there.
The only way to get the latest version is checking out the code from github and building it yourself.)

Michel L · 2014-04-14 14:06

I just added a lot more blocks and made this available for download as well as put a new demo version online. http://blocklyprop.creatingfuture.eu/index.html Have fun.

New blocks:

conditions (if, elseif, else)
variables
numeric compare
boolean operations

Any feedback or requests?

JonnyMac · 2014-04-14 15:07

Kudos to you for doing this -- I think you may just help some newcomers discover the Propeller. If you can figure out a clean way to implement multiple cores, you'll really get people excited.

Suggestion: Some clever forum member posted a bit of math that us at the top of my program which creates compile-time constants that are useful for timing. Here is my header.

con { timing }

  _clkmode = xtal1 + pll16x
  _xinfreq = 5_000_000                                          ' use 5MHz crystal

  CLK_FREQ = ((_clkmode - xtal1) >> 6) * _xinfreq               ' system freq as a constant
  MS_001   = CLK_FREQ / 1_000                                   ' ticks in 1ms
  US_001   = CLK_FREQ / 1_000_000                               ' ticks in 1us

Again, the math is something I picked up from another (and grateful for it). That may simplify the code output. I ran the demo to create do a blinking LED. The delay code (for 100ms) looks like this:

waitcnt(clkfreq / 1000 * (100) + cnt)

It could be simplified to:

waitcnt(cnt + (100 * MS_001))

... which I think is a little more readable.

rosco_pc · 2014-04-18 00:09

Michel L wrote: »

... (because of the Blockly Iframe you cannot run without a server; file:// doesn't work) ...

Well file:// does work. Take the attached files in put them in .../Blockly/apps/blocklyduino and voila it will work (the files are a slightly reworked frame.html and index.html incorporating Michel L's changes and the needed files for that. All taken from Michel

)

Granted you would need the Heater's & msrobots compile framework to get it to compile and loading into the prop would need a server (even if local) to get it to work without too much problems. Rayman has solved part of this in another thread, albeit only for windows

Michel L · 2014-04-18 08:17

I hope that my server part is not causing a problem. Heater talks about bypassing my java server, as well does rosco_pc.

I personally think it's as easy as starting SimpleIDE or any other program. But instead of showing a screen, it show's it in the browser. But as I'm a Software Engineer, working with Java all day long I could be wrong.

Other features I intend to implement are: projects, that you can save in a project folder or some kind of database.
A tutorial system, not for using the ide (or at least not only for), but for programming the propeller using demo project, exercises,...

Does this look interesting or do I need to focus solely on the blocks you can use?

Heater. · 2014-04-18 13:40

Michel L,

I have not had a chance to play with it yet. I hope to do so over this weekend.

I'd like to see you focus on the actual blocks rather than worry about projects, folders, and databases. At least for now. It's great to have a cool demo people can play with. Then you end up with a reusable component. The back end infrastructure can come later.

Still that's just my take on it.

msrobots · 2014-04-18 16:14

Hi Michel L.

I could not run your demo local but I went thru your git hub sources.

My main interest was the server part of it as the WebIDE (Online-Editor) already parses the project and includes all of the needed files before compilation.

So what I was looking for was to integrate your server part with the editor to get access to propeller load. I do already have a .binary (or .eeprom). ready to be written to the propeller.

What I found in your interfaces is just sending spin source to your serverlet?

Can you maybe provide some stand alone server part providing the ability to POST or even better PUT a .binary (or .eeprom) already existing as JavaScript Blob in the editor to the propeller to load into RAM or burn into EEPROM?

sort of this for EEPROM?

[FONT=Consolas][SIZE=2][FONT=Consolas][SIZE=2] $.post([/SIZE][/FONT][/SIZE][/FONT][FONT=Consolas][SIZE=2][COLOR=#800000][FONT=Consolas][SIZE=2][COLOR=#800000][FONT=Consolas][SIZE=2][COLOR=#800000]'/webapp/propeller.action'[/COLOR][/SIZE][/FONT][/COLOR][/SIZE][/FONT][/COLOR][/SIZE][/FONT][FONT=Consolas][SIZE=2][FONT=Consolas][SIZE=2], {action: [/SIZE][/FONT][/SIZE][/FONT][FONT=Consolas][SIZE=2][COLOR=#800000][FONT=Consolas][SIZE=2][COLOR=#800000][FONT=Consolas][SIZE=2][COLOR=#800000]"LOAD_EEPROM_BUF"[/COLOR][/SIZE][/FONT][/COLOR][/SIZE][/FONT][/COLOR][/SIZE][/FONT][FONT=Consolas][SIZE=2][FONT=Consolas][SIZE=2], binbuffer: buffer}, [/SIZE][/FONT][/SIZE][/FONT][FONT=Consolas][SIZE=2][COLOR=#0000ff][FONT=Consolas][SIZE=2][COLOR=#0000ff][FONT=Consolas][SIZE=2][COLOR=#0000ff]function[/COLOR][/SIZE][/FONT][/COLOR][/SIZE][/FONT][/COLOR][/SIZE][/FONT][FONT=Consolas][SIZE=2][FONT=Consolas][SIZE=2](data) {[/SIZE][/FONT][/SIZE][/FONT]

[FONT=Consolas][SIZE=2][FONT=Consolas][SIZE=2]         console.log(data);

     });

I would not need all the blocky stuff, just a small standalone server talking to propellerLoad , enumerating available com ports and serving some static files for the editor itself.

Having this running with Linux and Windows would be very nice as the rest of the Editor is already working with all Spin Projects I ever threw at it..

Enjoy!

Mike

[/SIZE][/FONT][/SIZE][/FONT]

Michel L · 2014-04-20 13:02

msrobots wrote: »

My main interest was the server part of it as the WebIDE (Online-Editor) already parses the project and includes all of the needed files before compilation.

So what I was looking for was to integrate your server part with the editor to get access to propeller load. I do already have a .binary (or .eeprom). ready to be written to the propeller.

It should be possible to create a version for this quite fast. I'll create a second branch where I will remove all the blockly code, and just add a test html. That you can replace with your client code.
As far as I can see, all you code is client side. So, you should be able to just copy your files into the specific directory that the server then will server under '/'.

msrobots wrote: »

What I found in your interfaces is just sending spin source to your serverlet?

Can you maybe provide some stand alone server part providing the ability to POST or even better PUT a .binary (or .eeprom) already existing as JavaScript Blob in the editor to the propeller to load into RAM or burn into EEPROM?

My server side is indeed really simple:
- I start an embedded server
- I serve static files from the harddisk
- If a file doesn't exist it will check a second place,...
- One of these handlers is an actual web-application that I have configured to listen to '/webapp/propeller.action' and sent the requests to this place to a servlet. (The classname is specified in web.xml)
- This servlet handles differently depending on get or post. For a 'get-request' the servlet returns a json list with all available COM ports (as supplied by PropellerLoad), post-request need to define the action (compile, load-ram, load-eeprom) and a result json-object is sent back.

As tomorrow (monday) I have a day off, I'll see if I can set it up.

Michel

msrobots · 2014-04-20 15:45

@Michel L.

Great!

I sort of put the Editor on hold since the only running loader is David's WIFI loader using the S6B module from Parallax. Seems to work, but I do not have one of the Modules.

My attempt to use the spinneret as server works half ways. I can save the .binary/.eeprom .onto the SD card, but not yet program another propeller with it. Got stuck there somehow. And my spinneret version does not support long filenames.

Rayman's solution using a active-x control will just work with IE and windows. And there you can just use the PropTool by itself and there is somehow no need for a web solution then. But I will still support it if it is working. Step by Step the Editor is assimilating things...

Heater is using Node.js - but Node seems still to have problems with serial Ports on Windows. I do not understand JavaScript and Node good enough and Heater is not doing Windows. (Like the 'Help' I have to clean my house...she is not doing Windows either...)

I never programmed JAVA at all, but was able to follow your sources and think I can write client side JavaScript to access your serverlet(?) using XMLhttp requests.

You are correct assuming that the Editor is just using client side JavaScript. So serving static files is perfectly fine. I added support for ETAG handling on the spinneret to reduce traffic and speed up things, but running from your embedded server this might be no issue.

It would be NICE if you embedded server could support PUT requests to save files, but not needed for usable operation. You always can just 'download' your changed source back to your local file system.

It would be VERY NICE if your embedded server could support directory listings. So a GET request ending in '/' could produce a html response, listing files (and directories) of that folder as html links. Like 'normal' webserver do if you allow directory listings. Not needed either, but very useful to browse the file system of the embedded web server. And the Editor as is now parses responses from requests ending in '/' different and pulls out a list of files and dirs. (just tested with IIS6 and Spinneret)

I have attached the latest version of the Editor for you to test. As you said just unpack in your web server file system. Since the spinneret has just 4 sockets I have to cramp everything in as less files as possible.

here a link to test it (same as in other thread) http://parallax.msrobots.net/Editor17.htm

Somehow we should name it M3 or so.

You are a Michel, I am a Mike and @Heater - hm - nobody knows, but I have the feeling he is some sort of a Michael also...

Enjoy!

Mike

rosco_pc · 2014-04-20 17:54

Michel L wrote: »

I hope that my server part is not causing a problem. Heater talks about bypassing my java server, as well does rosco_pc.

Sorry for late reply. This is not causing any problem, however blockly and blocklyduino both can be run as file:///. I happen to like that

and thought I would share. Sorry if that causes any confusion

Michel L wrote: »

Does this look interesting or do I need to focus solely on the blocks you can use?

You should do what you like doing best.

rosco_pc · 2014-04-20 17:58

msrobots wrote: »

I sort of put the Editor on hold since the only running loader is David's WIFI loader using the S6B module from Parallax. Seems to work, but I do not have one of the Modules.

Anybody ever looked in the ybox2 bootloader (https://github.com/darconeous/ybox2/blob/master/firmware/bootloader.spin)??

msrobots · 2014-04-20 20:30

rosco_pc wrote: »

Anybody ever looked in the ybox2 bootloader (https://github.com/darconeous/ybox2/blob/master/firmware/bootloader.spin)??

I just did. As far as I can see this is build around the ENC chip? Seems to me quite alike David's XBEE loader. Resident program in lower eeprom and user program in upper.

Has more options. Good for brainstorming. Somewhere I have one of the ENC modules. GG something?

But I still try to get a loader able to program ANY prop, not just those who have already a resident loader programmed...

I do also like the whole Blocky Idea. Like the S2 GUI you can program visual and then look at the generated source to understand spin if wanted.

So I would encourage @Michel L. to proceed with this effort, as he has time to. IMHO it is looking very good and I am sure it can be a very useful tool for education.

And in opposite to the Editor it already looks NICE. Like @Heater said the current Editor lacks in the design area.

lets combine the efforts and assimilate each other, somehow...

Enjoy!

Mike

Michel L · 2014-04-21 06:34

@msrobots

I just started a new project: propeller-web-loader: https://github.com/michel-cf/propeller-web-loader/

I'm currently writing the put action to load from the request into the ram or eeprom.
Maybe this should come in another thread but I just wanted to let you know.

edit:
I'v changed the 'sendBinaryS6B' function so that it loads into the ram.
The COM port can't yet be specified, it currently works without.

The new sendBinaryS6B function content, just move to any place you want:

var xhr = new XMLHttpRequest();
xhr.open('PUT', '/webapp/propeller.action?action=LOAD_RAM_BUF', true);
xhr.onload = function(e) {
    var output = typeof xhr.response == 'string' ? JSON.parse(xhr.response) : xhr.response;
    appendLine(current, '. propeller-web-loader - done ');
    appendLine(current, '. success:' + output.succes + ' code:' + output.code);
    appendLine(current, '. message:\n' + output.message);
};
xhr.onreadystatechange = function() {
    appendLine(current, '. propeller-web-loader - ' + xhr.readyState);
};
// Listen to the upload progress.
xhr.upload.onprogress = function(e) {
    appendLine(current, '. upload to propeller-web-loader');
};
xhr.send(bindata[current].buffer);

Response from the console in application:

2014-04-21 17:38:11 . upload to propeller-web-loader
2014-04-21 17:38:12 . propeller-web-loader - 2
2014-04-21 17:38:12 . propeller-web-loader - 3
2014-04-21 17:38:12 . propeller-web-loader - 4
2014-04-21 17:38:12 . propeller-web-loader - done 
2014-04-21 17:38:12 . success:true code:0
2014-04-21 17:38:12 . message:
Propeller Version 1 on COM4
Loading C:\Users\Michel\AppData\Local\Temp\blocklyapp5664941356363652472.binary to hub memory
48 bytes remaining             
                               
48 bytes sent
Verifying RAM ... OK

You can download it from: http://owncloud.creatingfuture.eu/public.php?service=files&t=9723787a87db639711f1b2de1cb0c756

Michel

msrobots · 2014-04-21 11:53

Hi Michel L,

I tried to run this:

C:\propeller-web-loader-1.0-SNAPSHOT>"C:\Program Files (x86)\Java\jre7\bin\java.exe" -jar propeller-web-loader-1.0-SNAPSHOT.jar
Error: Could not find or load main class eu.creatingfuture.propeller.blocklyprop.BlocklyProp

what to do next?

Enjoy!

Mike

Michel L · 2014-04-21 12:52

Mike,

When running it in my IDE it starts in another way and I forgot to test the distribution file. I've now fixed it, so it should work now.
I've put it online and just for ease i've uploaded it to the forum: propeller-web-loader-1.0-WebIDE.zip

Michel

Michel L · 2014-04-21 13:35

I'just added new blocks to BlocklyProp. It's available for download as well on the demo site.

You are now able to define PUB methods and call them. Have fun!

msrobots · 2014-04-21 14:48

Ha. this is cool. It works.

The .bat file still has the wrong .jar in it, but that was easy to fix.

Thanks Michel L - I just need to adjust the parsing of the directory in the Editor and we are good to go...

Enjoy!

Mike

Open Propeller Project #5: BlocklyProp

Comments