GithubHelp home page GithubHelp logo

blockpy-edu / blockmirror Goto Github PK

View Code? Open in Web Editor NEW
74.0 74.0 28.0 1.8 MB

An interface for dual block/text representation with Blockly

License: Apache License 2.0

CSS 0.88% JavaScript 95.51% HTML 3.62%

blockmirror's People

Contributors

acbart avatar dependabot[bot] avatar kolowy avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

blockmirror's Issues

Generated block images have black boxes in place of constants

The image generated from the blocks seems to have some corruption in it. Okay, a lot of corruption. But it's always been readable. However, apparently right now the constants all have black boxes covering their text. Probably just the background being black instead of white? Gotta investigate.

Unsupported Python Language Features

The following are not yet implemented in Skulpt, but reasonably should:

[ ] FormattedValue, also known as F-strings
[ ] Async versions of comprehensions, function definitions, For, With, and the Await keyword
[ ] Bytes string literals (b'test')
[ ] Ellipsis
[ ] Nonlocal keyword

The following are more cutting edge features not yet supported

[ ] Walrus operator
[ ] Positional-only parameters

Additional API function and configuration option

First of all. I want to say that What you have done here is simply amazing. I have been digging in deeply into testing this and trying to understand how all the pieces work together and I can tell this has been a LOT of work. Bravo. I have been using you alpha release, and I have to say it feels like more than an alpha, it seems very stable.

I do have some things I wish for tough. For one, I know that Skulpt supports actually executing the python code and also returning exceptions. It would be really cool to have a check-code api call. At least checking for syntax errors would be nice.

Also, I don't see a way to dictate the toolbox. I see that one gets defined at BlockMirrorBlockEditor.prototype.makeToolbox() but that would be a nice configuration option to have. It would also be really neat to be able to manipulate the toolbox through the API too. Just being able to pass it XML at will and change the tools would be very useful to me.

I also noticed that master is a few commits ahead of release, any chance you will be releasing a beta soon?

Thank you for all your hard work. I really love what you have done here.

Chris

Comment Block issue

I think there is a lot of issues with the comment, because of the skulpt parser modification

Comment blocks are not placed in the correct indentation, as they are treated separately from the rest of the code :
image

In addition, while, if, else, for, ... blocks are not generated if they just have a comment inside. (same problem as above)
image

Is a better way to implement comments in the skulpt parser ?

Full isolation for multiple instances

Currently, there is pretty good isolation between multiple instances. However, there are some global variables present, particularly for settings and features among the AST nodes. More care should be taken to make sure that no variables leak between instances - this will probably require attaching some data to the Blockly workspace.

Skulpt dependency

It might be possible to slim down Skulpt - we're only using its parser, after all. My initial attempts at this only removed a small portion of the core, however, and shaved off just a couple hundred KB. Perhaps a more concerted effort will lead to better results?

Adding Blocks

Hi @acbart

Great work on this, super useful tool.

I was wondering if there was any docs on how to add a simple block into BlockMirror and show in the toolbox? That would be super handy.

Josh

add new block for fstring

Hello, how would I go about to add a new fstring block for the print function. Right now I add a new checkbox to the List and convert it to a fstring format when the checkbox is checked.
It works fine in this approach except that I won't able to reload the code back to the Blockly canvas for the list.
Also, when I create a new Block such as fstring, I don't know how to add it to BlockMirror. I add f" or fstring(___) in the toolbox.js but I don't know how to tie it to ast_fstring.js to customize the fstring function.
Any suggestion would be greatly appreciated.

Modify text on input block

The current input block is of the form "input [ ]" where "[ ]" is a slot to put a value, nominally a prompt string. This block used to be: "input with prompt ' _____' where the underscores would be the prompt string as implied by the wording on the block.

Better Toolbox support

Currently, we don't have any sophisticated mechanisms for specifying the toolbox. Ideally, we'll have two ways:

  1. Basic pallets: have a few common setups. Probably "Computational Thinking", "Python Intro", "Intro CS", "Useful Python", and "Full Python".
  2. Fully customizable mode where you give the explicit XML of the toolbox.

Better function/variable/identifier awareness

I'm pretty sure the block interface is dumb about function definitions, class definitions, etc. Blockly has features for keeping track of defined functions and variables, but we aren't really incorporating them correctly. There's a lot we should do to make this all seem more accurate.

Documentation

I didn't comment my code - that makes me a bad person, but deadlines are what they are.

Where to start without using the full BlockMirror class

I am considering using BlockMirror in our project but we already have a full layout with Blockly and CodeMirror in it. So we don't need the BlockMirror div. Whta I am looking for is 'just' the function getBlocklyXMLFromPython(python_code) which accepts a full python scripts, and outputs the Blockly XML. Is there something similar in this code so I can only use that part?

Comments directly after statements can break the converter

banana
#

Typing that # will break the converter with the following traceback:

block_mirror.js:812 TypeError: Next statement does not exist.
    at Object.Blockly.Xml.domToBlockHeadless_ (blockly_compressed.js:977)
    at Object.Blockly.Xml.domToBlock (blockly_compressed.js:973)
    at Object.Blockly.Xml.domToWorkspace (blockly_compressed.js:969)
    at BlockMirrorBlockEditor.setCode (block_mirror.js:804)
    at handleChange (block_mirror.js:549)
    at BlockMirrorTextEditor.changed (block_mirror.js:555)
    at codemirror.js:2061
    at fireCallbacksForOps (codemirror.js:2018)
    at finishOperation (codemirror.js:2032)
    at endOperation (codemirror.js:3772)

Don't separate blocks when Python code has whitespace

Students seemed a bit confused by the fact the Blocks separate when newline whitespace is used in the Python code.
image

This relates to a sequence being represented by the blocks connecting together in most block-based environments like Scratch, etc. So students wondered, looking over at the blocks, if the code segments ran separately and not sequentially.

My request is to have the blocks ignore the newline whitespace in the Python code and always connect the blocks together.

However, I am not sure the impact this has on the system as when blocks are dragged out, they are automatically added to the Python code from top most being first and bottom most being last in sequence. My suggestion, if easily implementable, would be to have any block added to the canvas automatically connect to the bottom of the blocks sequence unless specified by connecting to another block in the sequence (between blocks in the sequence). Thinking through this, I also don't know what the system should do as soon as the user touches the blocks. Delete whitespace? Somehow keep track of whitespace? Currently, it removes any extra whitespace when you have more than one line and move the blocks, so maybe that still happens but removes whitespace entirely.

Better packaging

The use of webpack in this package is clumsy at best. Look into better organizational structures based on whatever is popular right now.

Allow keyword parameter renaming

Blocks can currently have a named keyword parameter by prefixing their parameter name with a *. However, this simply embeds the rest of the text as the exact parameter name. It'd be nice to have a way to let instructors remap that parameter name to something more friendly. Perhaps allow a syntax like "*internal=SHOW"? We'll need to be careful about what we intend to support.

Text To Blocks - can not fine define

hello, Thanks for share nice library

I'm try to porting a BlockMirror to our block coding system based on blockly.
i thnks almost done, and working well... but some problem is accured
oh, i used releases 0.0.1 version code, Skulpt also used latest releases version

when, i creat block from toolbox.. python code is make well what i defined.
but python code to block is not working well..

like this
image

It is shown as the same code, and matches perfectly down to the case.
However, the block taken out of the toolbox (upper pink) and the converted python code into a block (lower dark blue) are different.

this is my test code...

`

BlockMirrorTextToBlocks.BLOCKS.push({
"type": "ast_PlayRbVoice",
"message0": "Say %1 Test",
"args0": [{
"type": "input_value",
"name": "voice"
}],
"previousStatement": null,
"nextStatement": null,
"colour": "#D65CD6",
"tooltip": "%{BKY_PLAY_MELODY_TOOLTIP}",
"helpUrl": ""
});

Blockly.Python['ast_PlayRbVoice'] = function (block) {
var argument0 = Blockly.Python.valueToCode(block, 'voice', Blockly.Python.ORDER_ATOMIC) || Blockly.Python.blank;

console.log("Blockly.Python['ast_PlayRbVoice']");
console.log(argument0);
var code = ('playRbVoice(' + argument0 + ')\n');

return code;
};

BlockMirrorTextToBlocks.prototype['ast_PlayRbVoice'] = function (node, parent) {

var target = node.voice;
console.log("Text to Block ast_PlayRbVoice");
var blockName = 'ast_PlayRbVoice';
//BlockMirrorTextToBlocks.create_block = function (type, lineNumber, fields, values, settings, mutations, statements) {
return BlockMirrorTextToBlocks.create_block(blockName, node.lineno, {}, {"voice": this.convert(target, node) }, {}, {}, {});
};

`

this is event log...
image

in this function "BlockMirrorTextToBlocks.create_block" when i changed forcely blockName to "ast_PlayRbVoice", i can checked block made well

so that, i think the reason of this issue is "BlockMirrorTextToBlocks.prototype['ast_PlayRbVoice'] " this function dosen't called anywhere

please, let me know process to add new block
and if i solved this problem, when i make block to python
the "tab" works well?

i means that, in test example
class X:
'''
Hello world
'''
def add(self, a, b):
a = 0
return a

In the example, when converting a block to Python code, you can see that the code is accurately separated by tab intervals.
However, the converted code on my system is not properly indented and just comes out with newlines.
We appreciate your feedback.

Best Regards, Empe : )

do nothing with

Hi, I wanted to add the "do nothing with" block that sometimes appears in loops or Class definitions in Blockly to the toolbar. How would I go about adding it to the toolbar?

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.