• micros.js created

    richard4 days ago 2 comments


    Following Ed's instructions, I created a micros.js file that is referenced to from index. This js file is used in conjunction with arduino_compressed.js and blocks_compressed.js. Basically, everything needed for micros() to function is in the micros.js file.

    A couple questions did come up while putting the code together(and I emphasize "putting it together" because there wasn't much I did except analyze the code for what's necessary), 1) Why can't I seem to consolidate the two over-arching UMDs?(New term I learned while googling! the function(root, factory)). If anybody can shed some light on that, that'd be awesome.

    Also, should I change the block's location, what other changes would I need to make to code?

    Heading to Norcal soon! Have a great weekend everyone :)

  • Micros() implemented

    richard5 days ago 6 comments


    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. 

  • Blockly Toolchain discussion

    Edward Li6 days ago 0 comments

    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.

  • Basic Changes Mostly Finished

    Gracie6 days ago 1 comment

    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: 

  • Project Log Entry 2 - Shawn

    Sion Hwang7 days ago 3 comments

    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.

  • I stand heavily corrected on block reshaping

    Dante7 days ago 1 comment

    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.

  • The "Impossible"

    richard7 days ago 0 comments


    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!

  • Failing to reshape blocks + feature ideas

    Dante07/25/2021 at 01:47 1 comment

    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.

  • Basic block modifcations

    Dante07/22/2021 at 22:59 2 comments

    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.

  • Attempts at changing the shape

    richard07/22/2021 at 22:33 1 comment


    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.