Node-App User Manual

English

中文

English

中文

Appearance

Quick Start ​

Interface ​

https://nodematrix.cc/app/

  • Toolbar - See Toolbar Instructions for details.
  • Blocks Toolbox - Categorized available blocks.
  • Plugin Selection - Refer to Plugins.
  • HTML Root Container - System-generated initial block. See Root Container.
  • Workspace - Block programming area.
  • Page Preview - Real-time preview of the page created by the HTML blocks in the workspace.
  • Load Script - Load generated JavaScript into the page preview to make the app functional.
  • JavaScript Preview - Real-time preview of the JavaScript code generated from the workspace.

Toolbar Instructions

  • New Project - Create a new project.
  • Export Project - Save the current project as a JSON file to the browser's Downloads folder.
  • Import Project - Import a saved project from a JSON file into the workspace.
  • App Link - After the project is published, the URL for the app will be generated.
  • Project Name - The project name can only contain letters, numbers, hyphens, and underscores.
  • Save Online - Save the project online (for logged-in users).
  • Publish Project - Publish the project as a web app for browser access (for logged-in users).
  • Tools
    • Image to Data URL - Convert an image to a data URL for use as an image block's src attribute.
  • Toggle Preview Area - Show or hide the preview area.
  • Toggle Fullscreen - Enter or exit fullscreen mode.
  • Example - View example projects.
  • Help - Open this document.
  • Language - Select interface language (English/中文).
  • My Images - Manage your uploaded images (for Plus plan users).
  • My Projects - Manage your online saved projects (for logged-in users).
  • Login/Register - User login or registration (via email).

Hello, World! ​

The Hello, World! interface contains an input field and a button. Clicking the button makes the input field display Hello, World! (Online Example).

This simple app demonstrates the basics of a web application:

  • Layout of UI elements (input field and button).
  • Responding to UI events (button click).
  • Manipulating UI elements (modifying input field content).

Let's begin.

  1. Click the button on the toolbar to create a new project. The workspace starts with a default HTML root container block, which is the base for all UI elements. The bgcolor attribute of the root block can be used to set the page's background color. Let's set it to a light gray.

  2. Add the input (input field) and button blocks from the HTML category in the toolbox to the workspace, and connect them to the root block. To be accessed by the script, set the input's ID to INP and the button's ID to BTN. Also, change the button's label to Hello.

  3. The input field and button are now close together, so we need to add some spacing. Connect the margin style from the Style category in the toolbox to the right style socket of the input field, and set the y (vertical) spacing to 2. Then, connect the width style to the root block and set the max-width to 300px to limit the size of the input field. Connect the width style to the button and set the width to 100% to make the button as wide as the input field.

  4. The current interface is consistent with the Hello, World! example. Let's add some code blocks. Add the when button click (button event) block from the DOM category in the toolbox to the workspace. When the button is clicked, the program will jump to the button event block to start execution.

  5. Add the control set value block from the DOM category in the toolbox to the workspace and connect it to the button event block. This block sets the value of a control. Connect the text block from the Text category in the toolbox to the input socket of the control set value block, and set the text to Hello, World!.

The project is complete. Click the button on the script bar to load the script. Then, click the Hello button, the input field should now display Hello, World!.

Logged-in users can save projects online. Saved projects can be published as web apps using the button on the toolbar. Clicking the button will open the published app in a new tab, and you'll get the app's URL.

To view more examples, please click the button on the toolbar.