Barnabas Blocks Upgrade - BIG 2021

7/28/21

Hi guys, I'm heading to norcal to visit some friends so I had to work pretty quickly. I was able to create a constant oval block to output Micros(). I don't have an arduino handy so I haven't been able to check it, but it seems to compile okay. Regarding the actual block, I just used one of the pre-existing oval shapes to save time lol, although, I DID have to manually input it into blocks_compressed.js. Regarding the logic, as micros() already exists, that part wasn't that difficult. No actual logic programming, just linking things together. micros links to micros(), so, yeah, wasn't too difficult. 

Manipulating the C output in arduino_compressed.js can allow for some pretty nifty utilizations for micros() or millis() for that matter to do other things as well, but the way I designed it is simply to begin the timer to go until it hits a certain microsecond, then perform the "do" task. 

I wish I can test this out on an actual arduino, but probably have to wait until next Tuesday.

Anyway, please let me know if  I did something wrong, or if I deviated from the assignment. I BELIEVE you can use a function within an if statement in C, if I'm wrong, then darn lol, it's going to require some re-working. Would love to know thoughts!

I will take the rest of the week to see the how/why/what of the compression method. 

We had a great conversation today discussing the blockly toolchain.  We found some discrepancies in how the original blockly blocks are converted into C code and the way that Barnabas Blocks does it.  We did eventually arrive at an understanding of how blocks are generated in our code.  We still have one question left, however... how do the generator files get into the arduinocompressed.js file?  The task this coming week is to figure that out, which will allow us to create our own custom blocks.

With the help of Dante and with some identification of the hex code of the block and the text of a block I was able to change the text and color of a block (that was through editing the blocks/custom/aduino.js file, the generator/aduino/control.js file and the compressed arduino file contained within the js folder before opening the changed code using index.html. However, shape has still been difficult to find and it seems most of us have been having a similar issue. With no knowledge of how to write C code I was unable to change the output C code of a block. However, I was still able to input my own block into the program. The following images are what I was able to get done: 

Apologies for the delayed post, but I worked on this week's assignment mostly yesterday and this morning.

First, with the help of Mr. Richard and the online Blockly Toolbox, I updated the color and text of the controls_wait block to a color of 0 and also to state: "FREEZE! You're under arrest for _ seconds!". This website was particularly helpful for further understanding the Blockly program's code: https://developers.google.com/blockly/guides/overview.

Furthermore, I edited the code portion of this block to state as shown:

Obviously, I would need to change the delay function accordingly to allow "frozen" to mean to wait that many miliseconds.

I used the Developer Tools function in order to update my saved code and see the changes live.

Here is the new block I created: "WAIT twice the seconds."

Simply, whatever amount of seconds the user inputs gets doubled in arduino_compressed and is reflected on the editor tab:

As for the shape of the blocks, I was also a bit confused on this part. Thus, I decided to leave it for now, and I will be attempting the challenge questions later today.

It appears Blockly has some built-in customization for block shapes. This is used when initializing the Blockly workspace in code.js:1094 - 

Blockly.Themes.Barnabas = Blockly.Theme.defineTheme('barnabas', {
  'base': Blockly.Themes.Classic,
  'componentStyles': componentStyles,
  'blockStyles': blockStyles,
  'categoryStyles': categoryStyles,
  'fontStyle': fontStyle,
  'startHats': true
});

Hats are the arc shape on top of event blocks. There are only two event blocks in Barnabas Blocks - the setup/loop block and the subroutine declaration block. If startHats is set falsey, then these arcs will not be drawn:

Therefore there is at least one method to reshape blocks through the regular Blockly API. My endless searching through projects was therefore unfortunately not very useful.

Hopefully I can find more ways, but in the meantime I'll be reversing the gulp toolchain responsible for the compressed source files (mainly the Blockly ones) so that editing is actually practical.

7/26/21

I remember how Mr. Ed shared that story about the "impossible" assignment and how it IS indeed possible, just time consuming and arduous in undertaking. After many hours of trying, I am not able to manipulate shapes, haha! I am at peace, though, as it seems all of us are struggling with that. With that, this is my progress for this week:

1) text + color change: arduino.js 

2) output code change: arduino_compressed.js

3) Make own block: index.html + above

4) change padding: blockly_compressed.js

Regarding the challenge questions, all I can say, I'll give it a crack today haha!

Hello again,

Reshaping blocks has proven incredibly difficult. I know there are different ways blocks can be rendered (like the way they are shown on Google's documentation website versus on Barnabas Blocks):

Barnabas Blocks (with inline inputs turn on, which is not default)

Blockly documentation:

Scratch default rendering (Scratch is not actually built directly off Blockly as I previously thought, but is instead a fork with notable additions):

(source for the above is here)

Reshaping blocks is clearly possible, I just have no idea where to do it. I spent several hours cross-referencing appearances of the word "render" between Scratch and Blockly and trying to add code in various places in Barnabas Blocks to change rendering, but to no avail.

I previously mentioned the idea of searching for SVG in the codebase - I was correct that there were images embedded in the code (encoded in base64), but none of them were meaningful as they were all simple effects or not blocks (like the dropdown arrow being implemented as SVG embedded in a file). This seems like a very difficult task.

On a better note, there might be another idea to implement - a backpack system. Scratch has an account-persistent space called the backpack that can be used to store code. if code like the above (which I wrote to render clock hands) is useful in another project, entire sections of code can be dragged to the backpack and dragged out of it at another time, or even in another project.

Barnabas Blocks has no account or project system, but code that persists past clearing your workspace might be a good idea. Finding a way to serialize block XML and other specifics might be difficult, though.

Second, I thought of implementing the missing binary boolean functions - NOR, NAND,  and XOR. This should not be difficult on its own.

Slightly more difficult would be the idea to implement bitwise math in Blockly. This could prove difficult, mainly because it has a specific order of operations that has to be implemented (Blockly has a way to do orders of operation, but it's still some work), and support for bitwise math on non-integers is not part of the C standard. I doubt avr-gcc (the C compiler for Arduino) or the ATMega328P (the Arduino microcontroller) supports such a thing. Therefore Blockly would be required to either do type checking or cast every input to a bitwise operator to an integer. I haven't thought of anything specific though.

Good day everyone,

I've managed to make some basic block modifications.

The Serial print block has been locally modified to include the text "OWIEOWIEOWIEOWIE" in Blockly and now attaches a comment "// bazinga" when translated to C code.

The noTone block now has a custom hex color of f92f2f (a specific hex color I think is my favorite).

Finally, there is now a "sandwich" block in a new "Foods" category that accepts one parameter and completely ignores it. It declares the const int SANDWICH in the C code.

Reshaping a block is not feasible without reversing the Blockly compression toolchain (i.e. working from an uncompressed copy of Blockly and recompressing it with changes to block rendering), which is something I haven't yet found time for.

7/22/21

Hello! I'm not sure how far we got on the assignment for changing the shape on Tuesday, as I was in the next room most of the time, so please help me out if you made some progress, but it seems like, the "bread and butter" for changing the shape is in blockly_compressed.js. After "pretty-print"ifying it using an online editor, I spent hours trying to make some progress to very little avail. Hope everyone is making better progress!

As you can see... all I could change was the padding lol, definitely not any true shape manipulation. 

7/19/2021

Hello! After looking at a whole bunch of js files and feeling lost and discouraged, I realized that blockly(blocklyduino) already existed, lol. My negligence, yikes. So I decided to try and meticulously go over code.js and see how it all connects together. Still definitely working on it, but at this point, my brain is fried. Here's how I'm thinking so far. I realized through this exercise that I'm exactly like what Mr. Ed made a brief comment on last week. "Find a thread and pull". Once I find threads, I try and pull to find the root. It's very interesting to see how that's how my mind works(at the very least for this exercise). Still a long way to go, and I'm sure I'm making mistakes! Thank you all and have a good start to your week :)