Skip to content

A general purpose visual programming. This is the main repository for Blackprint that contains source code of cable, node, and container sketch for visualization.

License

Notifications You must be signed in to change notification settings

Blackprint/Blackprint

Repository files navigation

Blackprint

Blackprint

A general purpose visual programming interface for lowering programming language's steep learning curve, and introduce an easy way to experimenting with your beautiful project for other developer.

Preview_with_example_nodes.mp4

Blackprint Sketch is built using ScarletsFrame (performance and features).
Blackprint Engine is distributed separately for different runtime environment.
Blackprint Editor is created as a online IDE for browser.

Note

Please use Chromium based browser for better rendering performance.

Default Node's UI design was inspired by UE4 Blueprint and can be modified with HTML/CSS. If you're using Blackprint Editor you can choose different theme on the settings, and here's the code for reference if you want to create your own theme.

Documentation

Documentation is included in the editor, if you want to help contributing or modify you can fork the editor and modify files in this directory. Blackprint Engine and Sketch does have a TypeScript definition files, so if you working with TypeScript you may see a code suggestion in your code editor like Visual Studio Code.

Example

If you're looking for minimal sketch example to get started integrate for your editor project:

If you just want to execute exported Blackprint JSON, you can just use the engine. I also provide few simple example for different framework in case you want to use integrate to your frontend framework. For non-browser engine, there are example on it's repository. You can copy and paste the JSON to Blackprint Editor to see the nodes arrangement. The example below is using this arrangement.


Video Example:

  1. Build Telegram bot with Blackprint
Example-Creating-Telegram-bot.mp4

Available Shortcut for Blackprint Sketch

Mouse + Keyboard Touchscreen Target Description
LeftClick + move 1 touch + move Container Select nodes and cable
branch
Middle/Right click + move 2 touch + move Container Move the container
Ctrl + MouseWheel
RightClick + MouseWheel
3 touch + move Container Zoom the container
RightClick tap hold 1 sec Node, Cable, Container Context menu
Ctrl + LeftClick - Cable Create cable branch
Ctrl + RightClick - Port, Cable Node suggestion
Shift + LeftClick - Port Detach last connected cable

Available Shortcut for Blackprint Editor

Mouse + Keyboard Touchscreen Target Description
Ctrl + C - Selected Node Copy nodes
Ctrl + V - Selected Node Paste copied nodes
Delete - Selected Node Delete node
Ctrl + Alt + LeftClick - Anything ScarletsFrame's element
inspector (dev mode)

Blackprint Roadmap

This roadmap could be changed on the future, feel free to request feature or report an issue.

Name JavaScript PHP Golang Python C#
Browser Deno/Node.js
Blackprint Engine -
Minimal example ✔️ Link ✔️ Link ✔️ Link ✔️ Link ✔️ Link -
Environment variables ✔️ ✔️ ✔️ 🚧 ✔️ -
Import modules from URL ✔️ ✔️
Pausable and routable data flow ✔️ ✔️ 🧪 🚧 🧪 -
Remote control 🧪 🧪 - 🧪 -
Code generation 🧪 🧪 🚧 🚧 🧪 🚧

🚧 = Under development (In the current working plan)
🧪 = Experimental/Alpha stage (Being tested and may have rapid changes)
✖ = Not supported (Either it can't be implemented or it has better solution)
❔ = Should we add the feature? (Please start a discussion if you need it)
- = Haven't been decided


With remote control you can easily manage connection to the target environment (Node.js/Python/etc) from the browser. Please always run your app inside of isolated container (like Docker) if you allow someone to remote control your system.

Example case where you may need remote control:

  • Creating Discord.js bot (because the library doesn't have support for browser)
    • Support for browser was dropped due to CORS at the Discord endpoint
  • Collaboratively work with your friend
  • Remotely modify your running application in runtime

  • Blackprint Sketch (this repository)
    • Mirrored sketch on detachable window
    • Mini sketch for preview
    • Hot Reload
    • Export single sketch to JSON
    • Importable minimal sketch for different project
    • Select and move multiple nodes at once
      • Bulk delete
      • Add feature to put nodes into a group
    • Clicked nodes should be moved on front of the other nodes (z-index)
    • Automatically put cable on suitable port when it's dropped on top of a node
    • Add feature to arrange cable (cable branching)
    • Add variable's node
    • Add feature to hide some unused port on a node
    • Add feature to import node skeleton (use default node, and no execution)
    • Create addons for VS Code for previewing exported Blackprint
      • Add JSON preview for Visual Studio Code
    • Add TypeScript definition file
  • Blackprint Editor (repository)
    • Online editor
    • Basic nodes editor
    • Detachable window and minimap
    • Add Environment Variables editor
    • Import sketch from URL
    • Move current sketch with minimap
    • Node list editor (right click and from side panel)
    • Error/log popup or overlay
    • Show overview or notice when importing nodes from URL
    • Multiple sketch workspaces or tabs
  • Auto blackprint.config.js import
  • Better documentation
    • Add in-editor node documentation in a tooltip
    • Nodes docs generator
    • Add TypeScript definition file
  • Blackprint Nodes Package Manager
    • Use NPM registry for Node.js/Deno/Browser

Currently the main focus is Blackprint for JavaScript. Blackprint Engine for PHP, Python, Golang, etc may follow the implementation of JavaScript version.

Other possible plan

Blackprint Engine:

  • Lua (because it's embeddable language)
  • Java (or maybe Kotlin)
  • Rust (may get removed from this list)
  • C++ (for Arduino if possible)
  • Zig (for Arduino if possible)

Some Note

Each engine may have different compatibilities.
For the example:

  • WebAudio is only compatible in the browser.
  • Web server is not compatible in the browser.

Blackprint will act as an interface for each engine. To use it on NodeJS, Deno, or other JavaScript runtime, you can export it to JSON and use engine-js. But it doesn't mean exporting is just like a magic, you also need to write registerNode and registerInterface on the target engine. Except if someone already write the Blackprint Module (node and interface) on target engine, you can easily plug and play the module.

Contributing

To make things easier, please make sure to read the Contributing Guide before creating a issue/request.

If you want to compile and start the editor's web server on your machine, you can run the command below:

$ cd /your/project/folder
$ git clone --depth 1 --recurse-submodules https://github.com/Blackprint/Blackprint.git .

# You can also use npm or yarn instead of pnpm
$ pnpm i
$ npm start
 >> [Browsersync] Access URLs:
 >> -----------------------------------
 >> Local: http://localhost:6789
 >> -----------------------------------

Build and run the unit test

If you're trying to run the unit test, you can use npm run compile and then npm test.

$ cd /your/project/folder
$ git clone --depth 1 --recurse-submodules https://github.com/Blackprint/Blackprint.git .

# You can also use npm or yarn instead of pnpm
$ pnpm i
$ npm run compile
$ npm test

Stability

Breaking changes may happen every increment of v0.x.0, while v0.0.x usually will have new feature or bug fixes.

After version v1.0.0 any feature addition may have long delay before actually being merged.
Feel free to request a feature or give a feedback at this moment.

License

Blackprint is a MIT licensed open source project and completely free to use.

But please consider sponsoring the people who work and contribute amount of effort to maintain and develop new features for this project. Because without their contribution, this project may get slowed down or possible to getting paused.

About

A general purpose visual programming. This is the main repository for Blackprint that contains source code of cable, node, and container sketch for visualization.

Topics

Resources

License

Code of conduct

Stars

Watchers

Forks

Sponsor this project

 

Packages

No packages published