CodeCrafter - Building App Inventor Extensions With Blocks

[TechHamara]

Microsoft Windows [Version 10.0.19045.5131]
(c) Microsoft Corporation. All rights reserved.

F:\CodeCrafterAIX\server\PythonServer>python server.py
Traceback (most recent call last):
  File "F:\CodeCrafterAIX\server\PythonServer\server.py", line 7, in <module>
    import requests
ModuleNotFoundError: No module named 'requests'

F:\CodeCrafterAIX\server\PythonServer>

found error what issue

[Passos_0213]

You must install dependencies with pip, in this case pip install requests

[Passos_0213]

New version

- Now you can create helper classes that will be allocated directly in helpers.

[AyProductions]

Are you willing to release prebuilt binaries for this builder?

[Passos_0213]

It's open source, so you can do everything under the MIT license.

[Passos_0213]

Test here: CodeCrafter AIX

[JEWEL]

I've noticed that it doesn't seem responsive to mobile users. You might take a look at this issue.

[Passos_0213]

You're right. It's not optimized for mobile yet.

[Vishal_Nage1]

Its Difficult to handle Blockly on mobile like device and small screen device. and Mouse and Screen is essential for Blockly Work for easy GUI .

[Passos_0213]

You're right. I'll be uploading a mobile optimization soon.

[TechHamara]

I have created mobile responsive with theme customisation check here

[Passos_0213]

Very good. Have you submitted the pull request on GitHub?

[TechHamara]

Not yet..
Submit later..

1. I have find the this background I'd class to change the theme color.

2. 2nd issue block aria invisible of 1st time code preview Toggle button click.
   

   

3. If mobile device by default code preview collapse then better view of block aria.

[Passos_0213]

Very good

[Passos_0213]

The next version will be compatible with the new version of Fast Cli and the IDE will be able to:

• search for blocks added to the workspace
• Generate proguard-rules.pro files

Code added to IDE

main.js

document.addEventListener('keydown', function (event) {
    if (event.ctrlKey && event.key === 'f') {
        event.preventDefault();
        openSearchWorkspaceModal();
    }
});

function openSearchWorkspaceModal() {
    const existingModal = document.getElementById('workspaceSearchModal');
    if (existingModal) {
        existingModal.remove(); // Remove if already exists
    }

    const modal = document.createElement('div');
    modal.id = 'workspaceSearchModal';
    modal.style.position = 'fixed';
    modal.style.top = '20px';
    modal.style.left = '50%';
    modal.style.transform = 'translateX(-50%)';
    modal.style.backgroundColor = '#fff';
    modal.style.border = '1px solid #ccc';
    modal.style.padding = '10px';
    modal.style.zIndex = 1000;
    modal.style.display = 'flex';
    modal.style.alignItems = 'center';

    const input = document.createElement('input');
    input.type = 'text';
    input.placeholder = 'Search blocks in workspace...';
    input.style.marginRight = '10px';
    input.style.padding = '5px';
    input.style.flexGrow = '1';

    const searchButton = document.createElement('button');
    searchButton.textContent = 'Search';
    searchButton.style.padding = '5px 10px';
    searchButton.addEventListener('click', () => {
        const query = input.value.toLowerCase();
        resetHighlightedBlocks(); // Reset any previously highlighted blocks
        highlightMatchingBlocks(query);
    });

    const closeButton = document.createElement('button');
    closeButton.textContent = 'Close';
    closeButton.style.padding = '5px 10px';
    closeButton.addEventListener('click', () => modal.remove());

    modal.appendChild(input);
    modal.appendChild(searchButton);
    modal.appendChild(closeButton);
    document.body.appendChild(modal);
    input.focus();
}

function highlightMatchingBlocks(query) {
    const workspace = Blockly.getMainWorkspace();
    if (!workspace) return;

    const allBlocks = workspace.getAllBlocks();
    let foundBlocks = false;

    allBlocks.forEach(block => {
        const blockText = `${block.type} ${block.toString()}`.toLowerCase();
        if (blockText.includes(query)) {
            foundBlocks = true;
            if (!block.originalColour) {
                block.originalColour = block.getColour(); // Save the original color
            }
            block.setColour('#FFD700'); // Highlight color (gold)

            // Add click listener to reset color on click
            block.clickHandler = function () {
                block.setColour(block.originalColour);
                block.originalColour = null;
                block.clickHandler = null; // Remove listener
            };
            block.getSvgRoot().addEventListener('click', block.clickHandler);
        }
    });

    if (!foundBlocks) {
        alert('No matching blocks found.');
    }
}

function resetHighlightedBlocks() {
    const workspace = Blockly.getMainWorkspace();
    if (!workspace) return;

    const allBlocks = workspace.getAllBlocks();
    allBlocks.forEach(block => {
        if (block.originalColour) {
            block.setColour(block.originalColour);
            block.originalColour = null;

            // Remove any attached click listener
            if (block.clickHandler) {
                block.getSvgRoot().removeEventListener('click', block.clickHandler);
                block.clickHandler = null;
            }
        }
    });
}

blockly.css

#searchModal input {
    width: 300px;
    font-size: 16px;
    border: 1px solid #ccc;
}

[Patryk_F]

Will this also move the workspace to the found block?

[Passos_0213]

All blocks found will be painted yellow.

[Passos_0213]

New upgrade

+ Update with the new version of Fast Cli
+ Fixed Blockly workspace resizing
+  Standardizing the building block with Fast Cli
+ Colorization of selected Tabs
+ Resize the screen with F11 or manually without changing the Blockly workspace design.
+ Search for blocks using Ctrl+F keys
- Fixed screen removal with F11 key.

Happy coding!