Name	Type
`colors`	{ `danger`: `string` ; `dark`: `string` ; `info`: `string` ; `light`: `string` ; `primary`: `string` ; `secondary`: `string` ; `success`: `string` ; `warning`: `string` }
`colors.danger`	`string`
`colors.dark`	`string`
`colors.info`	`string`
`colors.light`	`string`
`colors.primary`	`string`
`colors.secondary`	`string`
`colors.success`	`string`
`colors.warning`	`string`
`font`	{ `color`: `string` ; `computedFont`: `string` ; `size`: `number` ; `type`: `string` }
`font.color`	`string`
`font.computedFont`	`string`
`font.size`	`number`
`font.type`	`string`

TInstanceManagerPage

TInstanceManagerPage<T, Extension>: (div: HTMLDivElement, options: IDynamicUiRenderData & { createInstance: (description: Partial<IInstanceCreationMsg>, options?: { assignmentValid?: TValidAsssignmentChecker ; selector?: ValidSelectorFunction }) => Promise<T & IGenericNopeModule> ; ctorName: string ; instances: INopeModuleDescription[] } & Extension) => Promise<TInstanceManagerPageResult>

Type parameters

Name	Type
`T`	extends `INopeModule` = `INopeModule`
`Extension`	{}

Type declaration

(div, options): Promise<TInstanceManagerPageResult>

UI to define an instance.

Parameters

Name	Type
`div`	`HTMLDivElement`
`options`	`IDynamicUiRenderData` & { `createInstance`: (`description`: `Partial`<`IInstanceCreationMsg`>, `options?`: { `assignmentValid?`: `TValidAsssignmentChecker` ; `selector?`: `ValidSelectorFunction` }) => `Promise`<`T` & `IGenericNopeModule`> ; `ctorName`: `string` ; `instances`: `INopeModuleDescription`[] } & `Extension`

Returns

Promise<TInstanceManagerPageResult>

TLibraries

TLibraries: Object

Type containing the external libraries.

Type declaration

Name	Type	Description
`ace`	typeof `ace`	Ace is an embeddable code editor written in JavaScript. It matches the features and performance of native editors such as Sublime, Vim and TextMate. It can be easily embedded in any web page and JavaScript application. Ace is maintained as the primary editor for Cloud9 IDE and is the successor of the Mozilla Skywriter (Bespin) project. For more details checkout: https://ace.c9.io/#nav=about
`gojs`	typeof `go`	GoJS is a JavaScript library that lets you easily create interactive diagrams in modern web browsers. GoJS supports graphical templates and data-binding of graphical object properties to model data. You only need to save and restore the model, consisting of simple JavaScript objects holding whatever properties your app needs. Many predefined tools and commands implement the standard behaviors that most diagrams need. Customization of appearance and behavior is mostly a matter of setting properties. For more details checkout: https://gojs.net/latest/
`jQuery`	`any`	jQuery is a fast, small, and feature-rich JavaScript library. It makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler with an easy-to-use API that works across a multitude of browsers. With a combination of versatility and extensibility, jQuery has changed the way that millions of people write JavaScript. Contains jQuery. See: https://jquery.com/
`jsoneditor`	`any`	Contains a library for a dynamic JSON-Editor. This contains a tree-view, with edit options. For more details checkout: https://github.com/josdejong/jsoneditor
`nope`	`any`	The Nope Library. It contains only the Browser build.
`plotly`	typeof `plotly`	Built on top of d3.js and stack.gl, Plotly.js is a high-level, declarative charting library. plotly.js ships with over 40 chart types, including 3D charts, statistical graphs, and SVG maps. plotly.js is free and open source and you can view the source, report issues or contribute on GitHub. For Tutorials and more checkout: https://plotly.com/javascript/
`w2ui`	`any`	-
`w2uiHelpers`	{ `nopeW2ui`: `any` ; `w2alert`: (...`args`: `any`) => `any` ; `w2confirm`: (...`args`: `any`) => `any` ; `w2grid`: (...`args`: `any`) => `any` ; `w2popup`: (...`args`: `any`) => `any` ; `w2prompt`: (...`args`: `any`) => `any` ; `w2utils`: `any` }	Out of the box w2ui is an all-in-one solution. It contains common UI widgets: Grid, Forms, Toolbars, Layout, Sidebar, Tabs, Popup and various field controls. You do not need to put together a collection of mismatched plugins to accomplish your goals. Contains the original w2ui Library. https://w2ui.com/web/
`w2uiHelpers.nopeW2ui`	`any`	The Custom W2UI-Helper provided by the nope-ui package.
`w2uiHelpers.w2alert`	(...`args`: `any`) => `any`	-
`w2uiHelpers.w2confirm`	(...`args`: `any`) => `any`	-
`w2uiHelpers.w2grid`	(...`args`: `any`) => `any`	-
`w2uiHelpers.w2popup`	(...`args`: `any`) => `any`	-
`w2uiHelpers.w2prompt`	(...`args`: `any`) => `any`	-
`w2uiHelpers.w2utils`	`any`	-

TRenderConfigureServicePage

TRenderConfigureServicePage<T, Extension>: (div: HTMLDivElement, options: IRenderData & { input: T } & Extension) => Promise<IServiceEditPage>

Type parameters

Name	Type
`T`	extends `PN`
`Extension`	{}

Type declaration

(div, options): Promise<IServiceEditPage>

Helper to configurate a service

Parameters

Name	Type
`div`	`HTMLDivElement`
`options`	`IRenderData` & { `input`: `T` } & `Extension`

Returns

Promise<IServiceEditPage>

TRenderInstancePage

TRenderInstancePage<T, Extension>: (div: HTMLDivElement, options: IDynamicUiRenderData & { input: T & IGenericNopeModule } & Extension) => Promise<TRenderFunctionResult>

Type parameters

Name	Type
`T`	extends `INopeModule` = `INopeModule`
`Extension`	{}

Type declaration

(div, options): Promise<TRenderFunctionResult>

Helper used, to render the instance details

Parameters

Name	Type
`div`	`HTMLDivElement`
`options`	`IDynamicUiRenderData` & { `input`: `T` & `IGenericNopeModule` } & `Extension`

Returns

Promise<TRenderFunctionResult>

TSession

TSession: Object

Descripting a session, which the ui has established.

Type declaration

Name	Type
`connection`	`"mqtt"` \| `"io-client"`
`dataServer`	`string`
`forwardData`	`boolean`
`name`	`string`
`port`	`number`
`required`	`boolean`
`uri`	`string`

TSettingsObject

TSettingsObject: Object

Index signature

▪ [index: string]: string | number | boolean

TSimpleSchema

TSimpleSchema: Object

A Schema to receive an object from the url (use the query pattern)

Index signature

▪ [index: string]: "number" | "integer" | "string" | "boolean" | { parse: (data: string) => any ; validate: (data: string) => boolean }

TcreateLayoutOptions

TcreateLayoutOptions: Object

Type declaration

Name	Type	Description
`colors?`	`any`	To define.
`divId`	`string`	ID of the div. given via `<div id="blabla" #blabla></div>`
`height?`	`string` \| `number`	The height, that should be set e.g. `100%` or `100px`
`id`	`string`	Id of the Layout
`onResizeCallback?`	(`event`: `any`, `panels?`: `IPossiblePanels`) => `void`	Function which is called during resizing. Receives the `event` and the `panels` (containg all panels of the layout)
`width?`	`string` \| `number`	The width, that should be set e.g. `100%` or `100px`

types.ui - ZeMA-gGmbH/NoPE-JS GitHub Wiki

Namespace: ui

Namespaces

Interfaces

References

EDGE_TYPE_INFO_CONSUME_DATA

EDGE_TYPE_INFO_CONSUME_EVENT

EDGE_TYPE_INFO_CONSUME_PATH

EDGE_TYPE_INFO_IS_SUB_INFO

EDGE_TYPE_LOGIC_AVOIDS

EDGE_TYPE_LOGIC_CONSUME_TOKEN

EDGE_TYPE_LOGIC_PRODUCE_TOKEN

EDGE_TYPE_LOGIC_RELEASES

EDGE_TYPE_LOGIC_REMOVE_RELEASES

EDGE_TYPE_LOGIC_REQUIRES

EDGE_TYPE_LOGIC_TRIGGERS

EDGE_TYPE_PLANNER_AVOIDS

EDGE_TYPE_PLANNER_LEADS_TO

EDGE_TYPE_PLANNER_RELEASES

EDGE_TYPE_PLANNER_REQUIRES

IAdaptDataCallback

IAdditionalSelectionContextMenuEntry

IBaseEdge

IBaseElement

IBaseNode

IBasicLayoutComponent

IBreak

IButton

ICallback

ICheckbox

IColor

ICustomDropDown

ICustomHTML

ICustomRender

IHotKeyAction

ILayout

ILayoutOptions

IMenu

IMenuCheckbox

IMenubar

IMinProvidedDataSet

IPanel

IPanelControl

IPanelInstance

IPanelOptions

IPanels

IPort

IPossiblePanels

IRadioButton

IRadioMenuItemDescription

IRenderHTML

IRenderMarkdown

IRenderW2UIElement

ISelectionConfig

ISelectionContextMenuEntry

ISelectionElement

ISelectionGroup

ISelectionTemplate

IServiceEditPage

ISpacer

ITab

ITabProps

ITextColor

IToolbar

IToolbarConfig

IToolbarElements

IW2UISelection

NODE_TYPE_BOOL_AND

NODE_TYPE_BOOL_NOT

NODE_TYPE_BOOL_OR

NODE_TYPE_BOOL_XOR

NODE_TYPE_CONSTANT

NODE_TYPE_DATA_IF

NODE_TYPE_DATA_TO_ON_CHANGE

NODE_TYPE_DATA_TO_ON_TRUE

NODE_TYPE_DATA_TO_TOKEN

NODE_TYPE_EVENT_TO_DATA

NODE_TYPE_FLOW_IF

NODE_TYPE_FLOW_OPERATION

NODE_TYPE_FLOW_SYNC