Custom Page

The Custom Page section enables users to design and implement their own layouts and interactive logic, allowing for personalized interfaces and functionality beyond the predefined options.

The Custom Page in TQT Nuclei provides users with a powerful tool to create their own user interface (UI) pages with custom logic, visuals, and functionality. This page is designed to be fully customizable, allowing advanced users to build tailored interfaces for specific NMR tasks or workflows. The page is divided into two modes: View Mode and Edit Mode. Below is a detailed overview of each mode and its components:

1. Appbar Toggle: View Mode vs Edit Mode

At the top of the Custom Page, users can toggle between View Mode and Edit Mode using the Appbar. The toggle allows for switching between editing the page and viewing the finalized design.

• View Mode: Displays the fully rendered UI with all custom elements and logic in place. This is the operational view that the user will interact with after the design is complete.

• Edit Mode: Allows users to modify the structure and behavior of the page. Users should note that switching from Edit Mode to View Mode may take several seconds for large or complex pages to render, as the system processes the custom layouts and logic.

2. Edit Mode

In Edit Mode, the user interface is divided into two horizontal subpages: Layout and Code.

Layout Subpage

Important to mention

The Layout subpage is where users define the visual structure of their custom UI using HTML code and predefined components. Users can create a visually appealing and functional interface by utilizing a variety of layout elements and controls. Consult the Layout Schema to see the list of available blocks. By combining these components, users can create complex layouts that suit their specific needs.

XML Markdown Language Layout Example

    <horizontal-layout stretchY="true">
        <vertical-layout>
            <input label="Test input" id="test-inp" dtype="float" />
            <checkbox id="check" label="Check me" />
            <button action="press" label="Press me" />
            <select id="select" label="Pick one">
                <option value="option a" />
                <option value="option b" />
            </select>
        </vertical-layout>

    <plot id="custom-plot" title="Test" xLabel="x" yLabel="y" />
    <plot id="second-plot" title="Test 2" xLabel="x" yLabel="y" />
    </horizontal-layout>

Code Subpage

Important

The Code subpage allows users to define the logic and functionality behind their custom page using Python code. This subpage functions similarly to the Analysis Page, where users can:

• Import Python Libraries: Users can import standard Python libraries as well as Nuclei-specific constructions to handle data, run calculations, or control elements of the UI.

• Custom Logic: Write custom Python code to define the behavior of UI elements, such as what happens when a button is pressed or how data is handled when it's displayed in a plot. The logic written here directly controls the custom UI built in the Layout subpage.

• NMR-Specific Functions: Users can integrate existing NMR-related functions and processes, making it possible to create pages that perform specific NMR tasks or calculations directly within the custom UI.

This dual-editing system allows users to define both the appearance and behavior of their custom pages, providing flexibility to create highly specialized interfaces that suit their workflows.

The Custom Page empowers users to extend the functionality of the TQT Nuclei software by designing and implementing custom pages tailored to specific requirements. Whether for advanced data visualization, experiment control, or process automation, this page provides the tools necessary to build fully customizable interfaces within the application.

Layout Editor

LAYOUT Mode:

Users can define custom layouts using a simplified XML-like syntax to arrange components such as inputs, buttons, checkboxes, and plots.

• horizontal-layout / vertical-layout:

  Defines the overall structure, organizing elements horizontally or vertically.

• Input Elements:

  Add components like <input> for user input, <checkbox> for boolean options, and <button> for interactive actions.

• Plot Elements:

  Use the <plot> tag to create custom plots with configurable titles and axis labels.

Code Editor (Custom Logic)

CODE Mode:

Define the logic associated with layout components, allowing custom functionality through Python functions.

• Example: The press function is triggered by a button action, and the script can contain any logic, such as printing output or interacting with other elements on the page.

See following example of the possible logic that could be executed at this Page.

Example of Python Logic Realization using the Constructed Layout.

    def press():
        print(
            "Values from UI:",
            UI.user_get("test-inp"),
            UI.user_get("check"),
            UI.user_get("select"),
        )
        sequence = [
            Pulse('x+', 90),
            Silence(100),
            ADC(100),
        ]
        sig, spec = run_sequence(sequence)
        UI.user_plot('custom-plot', sig)
        UI.user_plot('second-plot', spec)

Page Definitions

Page Management

• New Page: Creates a new custom page template for designing layouts from scratch.

• Open Page / Save Page: Open an existing custom page or save the current one for reuse.

Edit/View Mode

• Edit Mode: Allows users to modify the layout structure and logic.

• View Mode: Enables users to interact with the designed custom page, running the logic and utilizing the created layout in real-time.

The Custom Page feature empowers users to extend the software's functionality by creating tailored interfaces for specific tasks, providing flexibility for unique experimental or analysis needs.