blockpy-edu / blockmirror Goto Github PK
View Code? Open in Web Editor NEWAn interface for dual block/text representation with Blockly
License: Apache License 2.0
An interface for dual block/text representation with Blockly
License: Apache License 2.0
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.
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
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
Probably just malformed html
If a class is only decorated by @DataClass, then we could make it look prettier.
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 :
In addition, while, if, else, for, ... blocks are not generated if they just have a comment inside. (same problem as above)
Is a better way to implement comments in the skulpt parser ?
Converts to triple quoted strings.
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.
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?
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
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.
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.
Currently, we don't have any sophisticated mechanisms for specifying the toolbox. Ideally, we'll have two ways:
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.
I didn't comment my code - that makes me a bad person, but deadlines are what they are.
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?
If a function does not have a return statement or a return annotation, then its function calls should be statements instead of expressions.
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)
Students seemed a bit confused by the fact the Blocks separate when newline whitespace is used in the Python code.
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.
The use of webpack in this package is clumsy at best. Look into better organizational structures based on whatever is popular right now.
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.
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..
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) }, {}, {}, {});
};
`
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 : )
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?
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.