Visual Programming for CP

[s-light]

i like the idea to program CP in a visual way

this is a follow up from https://github.com/circuitpython/web-editor/issues/20#issuecomment-2018916625

Initial Idea / thoughts:

• get support for CP in OpenRoberta lab (git)
• add blockly (openroberta fork) editor to this web-editor
• use a node based visual flow based editor similar to NoFlo

i personally like the flow based version more than the blockly approach, as its more of a real visual abstraction & appealing design..

Integration in current web-editor

• add a side-by-side or top-bottom panel with the graphical representation
• this way you can switch between both representations and ways to code seamlessly.
• example for this for blockly: BlockMirror

Libraries

create a automagic conversion system to parse the libraries and create components for them. (maybe as a build job on the library builds...) as otherwise you would have no libs to use.. (its a to big burden for the lib maintainers to generate something special for the editor i think...)

Flow Based

• for parallel branches of a graph we could use asyncio)
• for sub-graphs we could use extra files that gets imported
  • that would make it very tidy in both representations

link collection

• block based
  • blockly google project - base for most of the others...
  • blockpy blockly python for student use
  • make.playpiper.com - blockly CP code generation
  • BlockMirror - generate blocks from code
  • s3 extend Tekktrik on discord: It looks like you can use scratch with the Circuit Playground Express
  • EduBlocks hint from tannewt on discord

    With support for HTML, micro:bit, CircuitPython, and Raspberry Pi, there's lots in EduBlocks to keep students engaged and learning.

• flow based
  • NoFlo
  • vue flow diagram editor
  • litegraph.js
• others
  • flowboard

  • visual-programming-codex collection of information on this topic in general

what do you think about this? would be a PR including some simple beginner friendly visual editor be an option?

conclusion

it would be reasonable possible to include blockly based on the BlockMirror project in the web-editor.

after more research on the available flow-based UIs i think there is currently no easy fitting framework/library out there.. (without writing all the code-generation myself)

and there are already running editors available - so is there any benefit in integrating it here?

[s-light]

what do you think about this? would be a PR including some simple beginner friendly visual editor be an option?

and there are already running editors available - so is there any benefit in integrating it here?

@makermelissa i love to hear your thought on this! :slightly_smiling_face:

[dhalbert]

There is https://edublocks.org, which was developed by Josh Lowe, and has been available for years. It is now available under the auspices of Anaconda. It knows about CircuitPython. It does not know about the web workflow, but I'm sure that could be added.

[s-light]

so you mean - it is better to integrate the web-workflow in this one? (than the other way around)

[dhalbert]

I don't have an opinion about that. It depends on the structure of EduBlocks.