flowfuse/node-red-dashboard

FlowFuse helps Node-RED developers deliver applications in a more reliable, collaborative and secure manner. Node-RED’s intuitive, low-code development environment is great for connecting together hardware devices, APIs and online services. FlowFuse adds to Node-RED collaborative development, management of remote deployments, support for DevOps deliver pipelines, and the ability to host Node-RED applications on FlowFuse Cloud. FlowFuse is the devops platform for Node-RED application development and delivery.

Key Features

• FlowFuse adds team collaboration to Node-RED, allowing multiple developers to work together on a single instance.
• Many organizations deploy Node-RED instances to remote servers or edge devices. FlowFuse automates this process by creating snapshots on Node-RED instances that can be deployed to multiple remote targets.
• FlowFuse simplifies the software development lifecycle of Node-RED applications. You can now set up DevOps delivery pipelines to support development, test and production environments for Node-RED application delivery.
• FlowFuse is available from FlowFuse Cloud, a managed cloud service, or a self-hosted solution.
• FlowFuse offers professional technical support for FlowFuse and Node-RED.

Links

• Home Page
• Documentation
• Contributing
• Code of Conduct
• Security
• License

node-red-dashboard's Issues

Widget: Text Area Input

Description

Similar to #39 but multi-line input.

Properties

Shouldn't require too many, no "mode" options as per #39.

Events

• on-change: this widget would need to send a message back to Node-RED when it's value is changed/updated

Controls

• enabled: this widget can be enabled/disabled

Existing Examples

Vuetify Component: https://vuetifyjs.com/en/components/textareas/

Have you provided an initial effort estimate for this issue?

I have provided an initial effort estimate

Built-in Manufacturing Part Count Widget

Description

Many manufacturing customers need to keep track of the number of parts produced versus the planned production count. It would be highly beneficial for users to have a built-in, easy-to-use widget for this purpose.

• The ability to set a planned part count for a specific time period (daily, weekly, monthly, or custom range).
• A visual representation of the actual part count as it increases, updating in real-time as new parts are produced.
• A comparison of the planned vs. actual part count in a clear and easily understandable format (e.g., percentage, bar chart, or progress bar).
• The ability to customize the appearance of the widget (e.g., colors, fonts, and chart types) to match the customer's branding or user preferences.

Easy insert option for images

Describtion

As a Node-RED Dashboard user, I would like to have an easy and straightforward way to insert images into my dashboard without having to rely on external tools or complicated workarounds. This feature would streamline the process of adding visual elements and enhance the overall user experience.

Per user log in

Description

It would be very helpful to have the option of both an open (public) dashboard - that is to say, given pages can be viewed with no account required - it would be valuable to require a user to create an account to view other nominated pages of the dashboard.

Have you provided an initial effort estimate for this issue?

I can not provide an initial effort estimate

Widget: Form

Description

In Dashboard 1.0, we have a singular "Form" widget, which allows users to define multiple rows and components to render, with a singular "Submit" button.

Upon submission, all of hte data fields from these rows is sent as a single payload.

Properties

Existing form properties in Dashboard 1.0:

Events

• on-action: this widget would need to send a message back to Node-RED when the form is submitted.

Controls

• enabled: this widget can be enabled/disabled

Existing Examples

Contains multiple smaller components/elements, all of which could be found in Vuetify.

Have you provided an initial effort estimate for this issue?

I have provided an initial effort estimate

Widget: Dropdown/Select

Description

Adds a dropdown select box to the user interface. Multiple value / label pairs can be added as required. If the label is not specified the value will be used for both.

Properties

Existing dropdown properties:

Events

• on-change: this widget would need to send a message back to Node-RED when a new value is selected from the list of options

Controls

• enabled: this widget can be enabled/disabled

Existing Examples

Vuetify Component: https://vuetifyjs.com/en/components/selects/

Have you provided an initial effort estimate for this issue?

I have provided an initial effort estimate

UIChart / chart.js "advanced" mode

Description

chart.js 4 is so powerfull and flexible ! timeseries.. bubbles.. etc.
What about an "advanced" option for UIChart in order to let the user set up from the Node-RED node editor the full chart.js native config json object ?

Have you provided an initial effort estimate for this issue?

I am no FlowForge team member

Interactive dashboard list

Description

Description

• Dynamical list with the possibility to add links or other dashboard elements or trigger events in Node-RED

Example

Real-Time Order Management Dashboard

Description

I propose the development of a real-time order management dashboard that integrates human and process data, as well as connected digital apps and work instructions. This dashboard should:

• Provide real-time tracking of orders, materials, and jobs across the entire operation.
• Minimize errors and waste through seamless integration with digital apps and work instructions.
• Allow users to monitor work order status and drill down to locate materials and jobs within the process.
• Ensure up-to-date information by establishing bi-directional connections to ERPs and real-time dashboards.
• Offer customizable views and filters for users to focus on specific aspects of their operation.
• Support data export and sharing for collaboration and decision-making among relevant stakeholders.

Have you provided an initial effort estimate for this issue?

I have provided an initial effort estimate

Candlestick Chart

Description

Have you provided an initial effort estimate for this issue?

I have provided an initial effort estimate

FlowForge Dashboard – Preparation phase

Description

• Set Up Repo Structure
• Decide on a Framework: Vue vs. React
• Evaluate Backward Compatibility Options
• Specify Freelancer Requirements
• Begin with First Iteration of Development

Use in control systems

In my industry, we use Node-RED for audiovisual control systems (similar to home automation, but in a commercial setting with much more polish required). While these control systems are often backend-only, we commonly need to provide user GUIs as well. These would typically run in a kiosk web browser on an embedded touch panel, but it could also run on a user's device. Sometimes we run a Node-RED instance 1:1 per AV system. Sometimes we have one instance that may be serving events and control for dozens or hundreds of systems (using query params / path to specify which system is being used). Dashboard provides a nice way of doing this without requiring each developer to understand front-end development, as opposed to ui-builder for example. I'd love for the successor to Dashboard to bear in mind that interactive GUIs is a major use case for us, not just data visualization, and that a low-code approach is highly desirable. We should be able to bring our own components, but also take advantage of a rich palette of existing components. I'd love to see something React based but that's not a strict requirement.

Feel free to take from this what helps. Just sharing context for future development.

Widget: Toggle Switch

Description

Adds a switch to the user interface. Each change in the state of the switch will generate a msg.payload with the specified On and Off values.

Properties

Existing options in Dashboard 1.0:

Events

• on-change: this widget would need to send a message back to Node-RED when it's value is changed/updated

Controls

• enabled: this widget can be enabled/disabled

Existing Examples

Vuetify Component: https://vuetifyjs.com/en/components/switches/

Have you provided an initial effort estimate for this issue?

I have provided an initial effort estimate

Mobile Support / Responsive Design

Description

• Automatically adapt its layout based on the screen size and orientation (portrait or landscape).
• Be touch-friendly, with larger buttons and touchable elements.
• Prioritize essential information, ensuring it's easily accessible on smaller screens.
• Utilize collapsible menus and sections to minimize clutter and enhance navigation on mobile devices.

Have you provided an initial effort estimate for this issue?

I have provided an initial effort estimate

Gantt Chart

Description

Tracking events over time.
One of the best visualization tools for this is a Gantt chart.
Node-RED has a community flow for it, but its very complicated to set up and maintain. (Clearing the chart with the flow and global variables is arduous).

Properties

No response

Events

No response

Controls

No response

Existing Examples

https://madewithvuejs.com/vue-ganttastic

Have you provided an initial effort estimate for this issue?

I can not provide an initial effort estimate

Push notification

Share dashboard elements between groups or tabs

Description

To display information on different groups or tabs I have to duplicate the dashboard elements. What about an option to share an element on multiple groups or even tabs?

Have you provided an initial effort estimate for this issue?

I have provided an initial effort estimate

Consider not building a Node-RED plugin

Story

No response

Description

While Node-RED integration is great, Node-RED comes with downsides too: Limited throughput, limitations on hosting, etc, etc.

We should consider building a FlowForge Dashboard where it has integration does use Node-RED, but is not build in or on Node-RED for the visualisation layer. Maybe not even the storage query layer?

User Authentication and Integration with FlowFuse

Description

I would like to propose the implementation of User Authentication and integration with FlowForge Authentication. This feature would enable the creation of user-specific applications and dashboards, as well as the ability to share dashboards among users.

Proposed Solution

• Implement a user authentication system that supports secure login and access control for dashboard users.
• Integrate the authentication system with FlowForge Authentication to streamline user management and ensure consistency across the platform.
• Provide the ability to create user-specific applications and dashboards, which would allow users to customize their experience and access control on a per-user basis.
• Enable users to share dashboards with other authenticated users, allowing for collaboration and efficient sharing of resources.

Interactive elements

Describtion

To increase the interactivity and user engagement of the Dashboard / App Builder, I propose the addition of easy-to-use and customizable buttons (interactive elements). This feature would enable users to quickly create buttons that can perform specific actions or trigger events within the dashboard, making the overall experience more interactive and dynamic.

CORS settings option for socket.io

Description

With current node-red-dashboard , there is not a CORS setting for the ui socket.

I'm currently writing Web Components (Lit Element) clones of the dashboard ui elements with the plan of loading then from a different domain and connecting via a WebRTC bridge wrtten in node-js. When i tried to implement a browser aware version of the bridge, I ran into the CORS problem. A settings.js entry to pass an aditional parameter to socketio(server,....) in ui.js would be great!

Have you provided an initial effort estimate for this issue?

Multiple Dashboards (Tabs, pages, etc.)

Push notification

Epic

No response

Description

As a:

I want to:

So that:

Acceptance Criteria

• criteria 1
• criteria 2
• criteria 3
• ...

Widget: Checkbox Group

Description

Implemented in Dashboard 1.0, but only as part of it's "Form" widget. We may also want a standalone 'checkbox Group" widget too, although could be replicated by adding a collection of Toggles (#42) into a single group within a age Layout.

Properties

• Label/description
• List direction (vertical/horizontal)
• List of options to include and their respective label/value

Events

• on-change: this widget would need to send a message back to Node-RED when it's value is changed/updated

Controls

• enabled: this widget can be enabled/disabled

Existing Examples

Vuetify: https://vuetifyjs.com/en/components/checkboxes/

Have you provided an initial effort estimate for this issue?

I have provided an initial effort estimate

OEE Dashboard

Description

I propose the addition of an out-of-the-box OEE Dashboard that provides a comprehensive, easy-to-use interface for tracking and analyzing OEE metrics. This dashboard should include:

• Predefined key performance indicators (KPIs) for OEE, such as Availability, Performance, Quality, and OEE percentage.
• Clear visualizations for each KPI, including trend lines, bar charts, and pie charts.
• Real-time data updates and historical data comparisons for informed decision-making.
• Customizable date range and time period selection for data analysis.
• Drill-down capabilities to view data at a granular level (e.g., individual equipment, lines, or shifts).
• Export functionality for reports and sharing data with relevant stakeholders.

Have you provided an initial effort estimate for this issue?

I have provided an initial effort estimate

Time range UI component

Description

It could be very useful for reports a component that works like Grafana's time range peeker.

• The component payload could be a JSON containinig "from" and "to" epoch time and/or ISO timestamps

Example (when expanded):

Have you provided an initial effort estimate for this issue?

I am no FlowForge team member

Widget: Text Link

Description

My typical use case is to add an external link to documentation/reference as part of a form.

Requested by @rcarmo here: #9 (comment)

A single row element where the user can define (in Node-RED) an external (or internal?) link to open.

Properties

• The URL to open
• Whether to open it in a new tab or now
• Label/Icon

Events

No need for events here, functionality would likely be self contained within Dashboard (i.e. opening the link)

Controls

• enabled: this widget can be enabled/disabled

Existing Examples

Could extend from the #38 component structure

Have you provided an initial effort estimate for this issue?

I have provided an initial effort estimate

Customizable Dashboard with e.g. HTML/CSS Support

Description

In order to provide users with more control over the look and feel of their Node-RED Dashboards, it would be beneficial to allow customization using HTML and CSS. This feature would enable users to create unique and personalized dashboard designs, enhancing both the aesthetics and functionality of their projects.

Have you provided an initial effort estimate for this issue?

I have provided an initial effort estimate

Widget: Range Slider

Description

standard form slider input that emits events when the value is changed.

Properties

Existing Dashboard 1.0 properties:

Events

• on-change: this widget would need to send a message back to Node-RED when it's value is changed/updated

Controls

• enabled: this widget can be enabled/disabled
• visible: this widget can be hidden

Existing Examples

Vuetify Component: https://vuetifyjs.com/en/components/sliders/

Have you provided an initial effort estimate for this issue?

I have provided an initial effort estimate

Gauge Chart

Description

Have you provided an initial effort estimate for this issue?

I have provided an initial effort estimate

Decision about "FlowForge Dashboard"

Description

This task aims to facilitate the decision-making process for moving forward with the development of a FlowForge Node-RED Dashboard. The outcome will determine whether the project is viable, necessary, and valuable.

Tasks

1. Understanding requirements: Review collected ideas, requirements, and suggestions to understand the desired features and functionalities for the FlowForge Dashboard.
2. Decision on how to move forward: Determine the feasibility of the project based on the gathered information and available resources.
3. Identify developers: Determine who will be responsible for the development of the FlowForge Dashboard.
4. Define rough initial scope: Outline the general scope of the project, including the key features, functionalities, and integration points with other systems or tools.

Requirements Planning

https://github.com/orgs/flowforge/projects/15

Per user action audit log

Description

Once a user logs in, any actions taken by that user are logged.

Example. A month ago I had a user type very horrible words into any/all text entry (search requests) on my public aircraft tracking website. The words were so vulgar I had several other users complain to me about the offence they were caused. Since my aircraft website was public, and there is no way to know which user was typing in those phrases, there was nothing I could do but cripple the functionally of the entire site for all users and remove all text entry gadgets for a time and hope they got board and move on.

If each logged in user had an audit trail, I could have emailed the exact person, present the evidence, tell them they have 24 hours to stop doing that and if they don't, revoke their account.

Push notification

Description

Webapp or mobile push notification

Have you provided an initial effort estimate for this issue?

I have provided an initial effort estimate

⏱️ Machine Cycle Time

While Cycle time in principle is fairly easy; (endTime - startTime) it would be great if it's very easy to achieve and visualize.

Widget: Text Input

Description

Text input field with the ability to setup different "modes", e.g. password, email, etc. for validation.

Properties

Existing Dashboard 1.0 Properties:

Events

• on-change: this widget would need to send a message back to Node-RED when it's value is changed/updated

Controls

• enabled: this widget can be enabled/disabled

Existing Examples

Vuetify Component: https://vuetifyjs.com/en/components/text-fields/

Have you provided an initial effort estimate for this issue?

I have provided an initial effort estimate

Other "standard" visualizations

Description

Examples

See list of visualisations in Grafana: https://grafana.com/docs/grafana/latest/panels-visualizations/visualizations/

Have you provided an initial effort estimate for this issue?

I can not provide an initial effort estimate

PDF Document generation

Description

As a Node-RED Dashboard user,
I want a feature to generate PDF documents directly from the Node-RED Dashboard,
So that I can create, share, and store visualizations and data summaries for team discussions, documentation, or presentations easily and efficiently.

Reference

https://marketplace.mendix.com/link/component/211553

Have you provided an initial effort estimate for this issue?

I have provided an initial effort estimate

Widget: Audio

Description

Description from Dashboard 1.0:

Properties

Properties from Dashboard 1.0:

r

Events

Not sure we need any events, this node would likely have 0 outputs.

Controls

• enabled: this widget can be enabled/disabled

Existing Examples

Existing Dashboard 1.0

Have you provided an initial effort estimate for this issue?

I have provided an initial effort estimate

Widget: Template

Description

A freeform editor in Node-RED that allows a user to define their own HTML/Vue code and that is then rendered inside the Vue application.

Properties

The UX within Dashboard 1.0:

Events

Not sure on events here, in theory, we could provide some wrapper functions for the core supported events, and then the user could utilise those within the custom-defined html.

Controls

• enabled: this widget could be enabled/disabled

Existing Examples

none

Have you provided an initial effort estimate for this issue?

I have provided an initial effort estimate

Widget: UI Text

Description

Will display a non-editable text field on the user interface.

Properties

Existing properties in Dashboard 1.0:

More detailing/control over the text size, etc. would be useful here as to make larger metric-based dashboards.

Events

None - this would not be an interactive widget. Display only.

Controls

• enabled: could this widget be enabled/disabled?
• visible: should it be possible to hide this widget?

Existing Examples

None, would need to be a custom-built widget, although can use the existing Node-RED Dashboard node as a starting point.

Have you provided an initial effort estimate for this issue?

I have provided an initial effort estimate

Blank Text Fields for Custom Headlines and Descriptions

Description

I suggest adding blank text fields for headlines and descriptions, enabling users to create custom content. These fields should:

• Be easy to locate and access within the content creation/editor interface.
• Have an appropriate character limit to ensure the custom content fits within the design layout.
• Allow for basic text formatting options, such as bold, italic, and underline.
• Support input validation to prevent inappropriate content or formatting issues.

Have you provided an initial effort estimate for this issue?

I have provided an initial effort estimate

New Project in the spirit of nr-dashboard

Ability to zoom in and pan the chart

Description

Description

Users require a simple and efficient way to visualize time series data. By providing out-of-the-box, good-looking time series charts, we can enhance the user experience and enable users to better analyze and understand their data. These charts should be easily customizable and require minimal configuration to get started.

Examples

• Grafana
• https://github.com/grafana/grafana/tree/main/public/app/plugins/panel/xychart

Have you provided an initial effort estimate for this issue?

None

Ubos Web Editor

https://ubos.tech/web-apps-editor/
https://ubos.tech/wp-content/uploads/2023/05/ui_ai_demo4.mp4

Widget: File Upload

Description

Could not see this in the existing Dashboard 1.0. I suspect this is because there is no guarantee that Node-RED has access to a local file system.

Properties

• "Click here to upload" vs. drag and drop file.
• Labelling

Events

• on-action: this widget would need to send a message back to Node-RED when a file is uploaded, with the relevant file object.

Controls

• enabled: this widget can be enabled/disabled

Existing Examples

Vuetify Component: https://vuetifyjs.com/en/components/file-inputs/

Have you provided an initial effort estimate for this issue?

I have provided an initial effort estimate

Widget: Number Input

Description

Called a "numeric" in the existing Dashboard 1.0. Would be similar to #38, but provide up/down arrows in the UI to modify the value.

Properties

Existing Dashboard 1.0 Properties:

Events

• on-change: this widget would need to send a message back to Node-RED when it's value is changed/updated

Controls

• enabled: this widget can be enabled/disabled

Existing Examples

Would require a custom built piece of HTML/JS

Have you provided an initial effort estimate for this issue?

I have provided an initial effort estimate

Visual Layout Editor

Description

One to the unappreciated (and somewhat obscure) features of the current solution is the integration with the main Node-RED environment and the ability to do a baseline visual layout without fully leaving the flow editor. The widget grid and sizing system is a bit clunky (the emphasis on units rather than percentages/free resizable elements, etc.), but it works pretty well for multiple scenarios (like the example below):

Have you provided an initial effort estimate for this issue?

I am no FlowForge team member

Industrial Image / Animation collection

Description

Example

https://inductiveautomation.com/ignition/designer

Have you provided an initial effort estimate for this issue?

I have provided an initial effort estimate

State: Loading

Description

Would be great for widgets to be able to support a "loading" state, where msg.loading can be passed as true or false, or maybe even as a number out of 100 for a progress, and then in place of any widget a loading/progress spinner shows until the state is reset.

This would follow the same architecture/approach as the enabled state found in https://flowforge.github.io/flowforge-nr-dashboard/contributing/guides/events.html#widget

Have you provided an initial effort estimate for this issue?

I have provided an initial effort estimate

Widget: Colour Picker

Description

Adds a colour picker to the dashboard, with interactive colour palette, and raw text input for hex or RGB values.

Properties

Existing Dashboard 1.0 Options:

Events

• on-change: this widget would need to send a message back to Node-RED when it's value is changed

Controls

• enabled: this widget can be enabled/disabled

Existing Examples

Vuetify Component: https://vuetifyjs.com/en/components/color-pickers/

The existing Dashboard 1.0 picker is a lot more compact though, so may need some level of customisation on top.

Have you provided an initial effort estimate for this issue?

I have provided an initial effort estimate