Skip to content

Contributing

software-next edited this page Jul 3, 2025 · 27 revisions

Contributing

We welcome contributions from the community! To contribute:

  1. Fork the repository.
  2. Create a new branch for your feature or bug fix.
  3. Submit a pull request with a detailed description.

We appreciate your interest in Tactigon Shapes! If you encounter any issues or have feedback, feel free to open an issue.

Creating Custom Blocks

We'll walk you through how to create the block and handle the Python code generation. The easiest step is to create your custom blocks on the Blockly Developer website: Blockly Developer Tools. This platform provides an intuitive interface for defining block shapes, fields, and behavior without needing to write code manually. You can customize the block's appearance, input types, and logic connections. Once your block is designed, the tool generates the corresponding JSON, which can be easily integrated into Tactigon Shapes project.

Steps to Create Custom Blocks:

  1. Create a Category (Optional)
    • If you want to organize your blocks, you can create a new category or assign your block to an existing category.
    • To create a new category, go to the Edit page in the Shape module.
  <category name="To Uppercase" colour="#f1c40f ">
      <block type="to_uppercase">
      </block>
  </category>
  1. Design Your Block
    • Use the Blockly Developer Tools to create your new block by customizing its inputs, logic, and appearance.
    • Once done, copy the generated JSON code for your block.
 Blockly.Blocks['to_uppercase'] = {
        init: function () {
            this.jsonInit({
                "type": "to_uppercase",
                "tooltip": "",
                "helpUrl": "",
                "message0": "To Uppercase %1",
                "args0": [
                  {
                    "type": "input_value",
                    "name": "TEXT",
                    "check": "String"
                  }
                ],
                "previousStatement": null,
                "nextStatement": null,
                "colour": '#f1c40f'
              });
        }
};
  1. Add the Block to Tactigon Shapes
    • Paste the JSON code into the Custom blocks file page in the Shapes module.
    • After adding it, you will see both the new category (if created) and the new block in the Tactigon Shapes workspace.

chrome_innQ8Zb8cg

  1. Write Custom Code for the Block
    • You can write custom Python code for your block in the Custom blocks file page in the Shapes module.
    • From Tactigon Shapes, you can generate code in JavaScript, Python, PHP, or Dart based on the visual blocks. But we recommend using Python because almost all of our projects speak Python.
    python.pythonGenerator.forBlock['to_uppercase'] = function(block) {
        var text_to_print = Blockly.Python.valueToCode(block, 'TEXT', Blockly.Python.ORDER_ATOMIC) || "''";
        var code = `debug(logging_queue, ${text_to_print}.upper())\n`;
        return code;
    };  
  1. Run and Test
    • After creating your block, rerun the project and test your block by running your shape.

chrome_32A8gvnK5J

Here, we have attached a demo video about how to create your own block in the Tactigon Shapes project.

custom_blocks.mp4

Creating a Custom Module in Tactigon Shape

This guide will walk you through how to add your own module to the Tactigon Shape system.


Project Structure Overview

Here's what each main folder does:

config

Stores all config files for the app and its modules.

Models

Holds trained machine learning models and related info.

speech

Includes speech recognition models and files.

tactigon_speech

The main Python package where everything connects.

Main Python File

This file is where everything starts. It handles command-line options and runs the Tactigon server.

image


Module Structure

Inside the project folder tactigon_shapes, you’ll find a folder named modules. This is where all modules live.

Each module should have:

image

  • blueprint.py: Flask routes and web APIs.
  • extension.py: Connects your module to other systems/devices.
  • manager.py: Business logic and how your module works.
  • models.py: Data structures for your module.
  • templates/, static/: For web UI (Jinja HTML, CSS, JS).

How to Create a Module

  1. Inside modules/, create a new folder with your module’s name.

image

  1. Inside that folder, add these files (empty or with templates):
  • __init__.py
  • blueprint.py
  • extension.py
  • manager.py
  • models.py
  • templates/ and static/ folders if needed
  1. If you're building a web page, put your Jinja templates in the templates/ folder.

image

  1. In models.py, define your module's data (like configs or status).

image

  1. In manager.py, write your core logic (how it behaves or reacts).

image

  1. In extension.py, connect to external devices or other modules.

image

  1. In blueprint.py, create Flask routes and link your Jinja UI files.

image

Example:
When users go to /zion, they'll see index.jinja from the zion module.

image

This is what that page would look like:

image

Want to create custom blocks? Use this link

image

  1. Import your module’s extension and manager where needed.

image

  1. Register your module in tactigon_shapes/__init__.py.

image

  1. Register the blueprint in the same file.

image

  1. Add your module to the navigation bar (optional, but useful!).

image

To do this, update tactigon_shapes/templates/base.jinja to include your link and icon:

image

  1. Need real-time updates from server to browser?

Use SocketApp from tactigon_shapes/modules/socketio/extension.py. It pushes live data from your backend to the UI.

image


That’s it! Now you know how to build a new module in the Tactigon Shapes system 🎉

Clone this wiki locally