-
Notifications
You must be signed in to change notification settings - Fork 28
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
This reverts commit 4048afb.
- Loading branch information
Showing
1 changed file
with
148 additions
and
112 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,128 +1,164 @@ | ||
| # CodeWire: A Comprehensive Guide | ||
|
|
||
|  | ||
|  | ||
|  | ||
|
|
||
|
|
||
| # CodeWire | ||
|  | ||
|
|
||
| Try at https://ayushk7.github.io/CodeWire/ | ||
| CodeWire is a node based editor inspired by UE4 Blueprints which helps in better visualization of the code, | ||
| and faster scripting of complex and repetitive tasks. | ||
| It doesn't bind to any particular language. | ||
| Multiple target languages can be added to added in the future. | ||
|
|
||
| Tutorial: | ||
| 1. Include Begin Node By Right Click And Select Begin. | ||
| 2. Include Other Nodes In The Same Way. | ||
| 3. Use Left Panel To create New Variable. | ||
| 4. New variable is added into the right click menu, or you can drag it from the variable panel. | ||
| 5. Hold middle mouse button To Pan. | ||
| 6. Use Scroll Wheel To Zoom in and out. | ||
| 7. Hold left Ctrl and click the node or the wire to delete it or simply right and select delete. | ||
| 9. White wire between two arrow terminals is used for execution flow. | ||
| 10. Colored wire is used for input/outputs. | ||
| 11. Click Code to get Javascript native code. | ||
|
|
||
| # Screenshots | ||
|
|
||
| ## Fibonacci Series | ||
|
|
||
|  | ||
|
|
||
| ## HTTP REQUEST/Compiled Code | ||
|
|
||
|  | ||
|
|
||
| This project is still in under development, | ||
| subsequent new features like functions, delay, sand boxing, save, undo will be added. | ||
|
|
||
| ## Contributing | ||
|
|
||
| Join Discord Server https://discord.gg/VuB2UjzqrK | ||
| Thanks @L-o-o-t for creating the server | ||
|
|
||
| ### Anatomy Of Nodes | ||
|  | ||
|
|
||
|
|
||
|
|
||
|
|
||
| ### Adding New JS Nodes | ||
| 1. Add the description of node in the [javascript/Nodes/nodes.js](javascript/Nodes/nodes.js) | ||
| ```js | ||
| //description of the Print node | ||
| if (type == 'Print') { | ||
| nodeDescription.nodeTitle = 'Print'; | ||
| nodeDescription.execIn = true; | ||
| nodeDescription.pinExecInId = null; | ||
| nodeDescription.execOut = { | ||
| execOut0: { | ||
| execOutTitle: null, | ||
| pinExecOutId: null, | ||
| outOrder: 0, | ||
| }, | ||
| } | ||
| nodeDescription.inputs = { | ||
| input0: { | ||
| inputTitle: 'Value', | ||
| dataType: 'Data', | ||
| defValue: "'hello'", | ||
| pinInId: null, | ||
| } | ||
| } | ||
| // styling for the node | ||
| nodeDescription.color = 'Print'; | ||
| nodeDescription.rows = 3; | ||
| nodeDescription.colums = 12; | ||
| } | ||
|
|
||
| //NOTE: this same object is furthur used for serialization and deserialization of the graph, so we have some meta info like pinIds | ||
| ``` | ||
| <b>But still the node is not available in the context menu</b> | ||
|  | ||
|
|
||
|
|
||
| 2. To make this node available in the context menu you need to add it to the markup in [index.html](index.html) | ||
| ```html | ||
| <div class="context-menu-items">Begin</div> | ||
| <div class="context-menu-items">Print</div> <!-- this is the title of the newly added node --> | ||
| <div class="context-menu-items">Alert</div> | ||
| <div class="context-menu-items">Confirm</div> | ||
| ``` | ||
| <b>Result</b> | ||
|  | ||
|
|
||
| 3. Now only thing left is to add the logic for the node, that is what code it should generate on it's turn | ||
|
|
||
| For this you need add the logic in [VisualScriptToJavascript.js](javascript/VisualScriptToJavascript/VisualScriptToJavascript.js) in <b>coreAlgorithm(node)</b> method | ||
|
|
||
| ```js | ||
| case "Print": { | ||
| this.script += `console.log(${this.handleInp(inputPins[0])});\n | ||
| `; | ||
| this.coreAlgorithm(execOutPins[0]); // this tells algo to go to the next node which is connected at first pin(triangle shaped) | ||
| } | ||
|
|
||
| // this will append the console.log(input) in the generated js | ||
| ``` | ||
| <b>Result</b> | ||
|  | ||
|
|
||
|
|
||
| #### NOTE: The above node only takes input, but if the node also do outputs, then that logic is needed to be added separately | ||
| Example: Add Node | ||
|
|
||
| Description: | ||
| ```js | ||
| if (type == 'Add') { // this type should match the entry in the context menu's markup in index.html | ||
| nodeDescription.nodeTitle = 'Add'; | ||
| nodeDescription.inputs = { | ||
| input0: { | ||
| inputTitle: 'ValueA', | ||
| dataType: 'Number', | ||
| defValue: 0, | ||
| pinInId: null, | ||
| }, | ||
| input1: { | ||
| inputTitle: 'ValueB', | ||
| dataType: 'Number', | ||
| defValue: 0, | ||
| pinInId: null, | ||
| } | ||
| } | ||
| nodeDescription.outputs = { | ||
| output0: { | ||
| outputTitle: 'Result', | ||
| dataType: 'Number', | ||
| pinOutId: null, | ||
| outOrder: 0, | ||
| } | ||
| } | ||
| nodeDescription.color = 'Math'; | ||
| nodeDescription.rows = 2; | ||
| nodeDescription.colums = 10; | ||
| } | ||
| ``` | ||
|
|
||
| Welcome to **CodeWire**, a visual scripting tool inspired by Unreal Engine 4's Blueprints. It is designed to help users visualize code and automate repetitive tasks efficiently. CodeWire is language-agnostic, meaning multiple programming languages can be supported as target outputs in future updates. | ||
|
|
||
| Thanks @L-o-o-t for Logo and Discord Server. | ||
|
|
||
| Try CodeWire at: [CodeWire](https://ayushk7.github.io/CodeWire/) | ||
|
|
||
| ## Table of Contents | ||
| 1. [Getting Started](#getting-started) | ||
| 2. [Basic Workflow](#basic-workflow) | ||
| 3. [Nodes and Connections](#nodes-and-connections) | ||
| 4. [Creating Variables](#creating-variables) | ||
| 5. [Node Anatomy](#node-anatomy) | ||
| 6. [Executing Code](#executing-code) | ||
| 7. [Adding New Nodes](#adding-new-nodes) | ||
| 8. [Contributing to CodeWire](#contributing-to-codewire) | ||
|
|
||
| ## Getting Started | ||
| To start using CodeWire, open the application, right-click on the canvas, and start adding nodes. CodeWire provides a visual flow for writing scripts, allowing for faster prototyping of ideas. | ||
|
|
||
| ## Features | ||
| - 🚀 **Node-Based Editor** for visual scripting | ||
| - 🌐 **Multi-Language Support** (Currently supports JavaScript) | ||
| - 🎨 **Intuitive User Interface** for better visualization and faster coding | ||
| - 🛠️ **Custom Nodes** creation for extended functionality | ||
|
|
||
| ## Basic Workflow | ||
| 1. **Add a Node**: Right-click anywhere on the canvas and select "Begin" to start your node chain. | ||
| 2. **Connect Nodes**: After adding the "Begin" node, continue adding nodes such as Print, Variables, etc., by right-clicking and selecting from the context menu. | ||
| 3. **Pan & Zoom**: Use the middle mouse button to pan across the canvas. Use the scroll wheel to zoom in and out. | ||
| 4. **Connect Wires**: | ||
| - **White Wires**: These control the flow of execution between nodes. | ||
| - **Colored Wires**: These handle data inputs and outputs between nodes. | ||
| 5. **Delete Nodes or Wires**: Hold `Ctrl` and click a node or wire to delete it, or right-click and select "Delete." | ||
|
|
||
| ## Nodes and Connections | ||
| Nodes are the building blocks in CodeWire that perform actions. They are connected by wires that represent the flow of execution and data. | ||
|
|
||
| - **Execution Flow**: Nodes use white wires to control the script's sequence. | ||
| - **Data Flow**: Colored wires represent the input/output of data between nodes. The color indicates the data type being transferred. | ||
|
|
||
| ## Creating Variables | ||
| Variables can be created using the left-hand panel: | ||
| 1. Click "New Variable" on the left panel to create a new variable. | ||
| 2. The variable will be available in the right-click context menu or can be dragged from the panel onto the canvas. | ||
|
|
||
| ### Connecting Variables | ||
| - Variables are used to pass data between nodes. Simply drag the variable to the desired node or select it from the context menu. | ||
|
|
||
| ## Node Anatomy | ||
| Each node has specific attributes depending on its type. Here's the breakdown: | ||
|
|
||
| 1. **Title**: Displays the node's name (e.g., "Print"). | ||
| 2. **Execution Pins**: White triangle pins to control the flow of execution. | ||
| - **Input Execution Pin**: Marks the start of a node’s execution. | ||
| - **Output Execution Pin**: Marks the next step in the flow. | ||
| 3. **Input Pins**: Colored pins that receive data into the node. | ||
| 4. **Output Pins**: Colored pins that output data from the node. | ||
| 5. **Actions**: Nodes like Print or Add perform specific operations. | ||
|
|
||
| For example, a **Print Node** would have: | ||
| - Input: A single pin for the value to print. | ||
| - Output: A white execution pin to control the next step. | ||
|
|
||
| ### Example: Fibonacci Series Node | ||
| To generate a Fibonacci series, you can chain nodes that loop through calculations, each connected to the next using data pins (colored) and execution flow pins (white). | ||
|
|
||
|  | ||
|
|
||
| ## Executing Code | ||
| Once your nodes are connected and ready, you can generate native JavaScript code by clicking on the **Code** button. This transforms the visual representation into a runnable script. | ||
|
|
||
|  | ||
| And In [VisualScriptToJavascript.js](javascript/VisualScriptToJavascript/VisualScriptToJavascript.js) | ||
|
|
||
| ## Adding New Nodes | ||
| To extend CodeWire by adding new JavaScript nodes, follow these steps: | ||
| in <b>handleInputs()</b> method | ||
|
|
||
| 1. **Define Node**: Add the node’s description in the `javascript/Nodes/nodes.js` file. | ||
| ```js | ||
| if (type == 'Print') { | ||
| nodeDescription.nodeTitle = 'Print'; | ||
| nodeDescription.execIn = true; | ||
| nodeDescription.execOut = { execOut0: { outOrder: 0 }}; | ||
| nodeDescription.inputs = { input0: { inputTitle: 'Value', dataType: 'Data' }}; | ||
| nodeDescription.color = 'Print'; | ||
| } | ||
| ``` | ||
| ```js | ||
| case "Add": { | ||
| expr = `(${this.handleInputs(inputPins[0])} + ${this.handleInputs(inputPins[1])})`; | ||
| } | ||
| // this will generate and return (inp1 + inp2) expression | ||
| ``` | ||
|  | ||
|
|
||
| 2. **Add to Context Menu**: In `index.html`, include the node in the right-click context menu. | ||
| ```html | ||
| <div class="context-menu-items">Print</div> | ||
| ``` | ||
|
|
||
| 3. **Define Code Generation**: In `VisualScriptToJavascript.js`, add the logic to convert the node’s operation into JavaScript code. | ||
| ```js | ||
| case "Print": { | ||
| this.script += `console.log(${this.handleInp(inputPins[0])});\n`; | ||
| this.coreAlgorithm(execOutPins[0]); | ||
| } | ||
| ``` | ||
| ## Thanks to all who ever checked Codewire out. I want to convery that I won't be able to maintain this project any further (as you can see there is no commit from past 2 years) because of time constrainsts, my full-time job, and the not so great code quality which I wrote back in the college 😅. Please feel free to fork this out, or raise prs I'll be happy to look at them. | ||
|
|
||
| ### Example: Adding a Print Node | ||
| By following these steps, you'll add a new "Print" node that outputs console logs when executed in JavaScript. | ||
|
|
||
|  | ||
|
|
||
| ## Contributing to CodeWire | ||
| CodeWire is an open-source project and welcomes contributions. Join the community on Discord: [Join Discord](https://discord.gg/VuB2UjzqrK). | ||
|
|
||
| The project is in active development, and we encourage developers to fork the repository, add features, or raise pull requests. Contributions like sandboxing, undo features, and function nodes are welcome! | ||
|
|
||
| For guidance on adding complex nodes such as mathematical operations or logic nodes, refer to the "Adding New Nodes" section. | ||
|
|
||
| --- | ||
|
|
||
| Thank you for checking out CodeWire! We hope you find it useful for your scripting needs. | ||
|
|
||
| If you have any suggestions, feel free to reach out! |