Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
21 changes: 19 additions & 2 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,17 @@ If you want to use `npm` to install your nodes, you can instead [follow these in

*Note*: this package was previously published under the name `@flowforge/node-red-dashboard`. That package has now been deprecated and will not receive any further updates.

### Cloud Hosted Dashboards

If you're looking to host Node-RED in the Cloud, then look no further than [FlowFuse](https://flowfuse.com/). FlowFuse is a fully managed platform for hosting, securing, managing and scaling Node-RED deployments. You can [sign up today for a free trial](https://app.flowfuse.com/account/create).

<div style="text-align: center; margin-bottom: 12px;">
<img width="600" alt="Screenshot of the 'Getting Started with FlowFuse Dashboard' blueprint from FlowFuse Cloud" src="./docs/assets/images/blueprint-getting-started.png">
<em style="display: block; text-align: center;">Screenshot of the "Getting Started with FlowFuse Dashboard" blueprint from FlowFuse Cloud</em>
</div>

FlowFuse also comes with a collection of [FlowFuse Dashboard Blueprints](https://flowfuse.com/blueprints/) to help you get started on your FlowFuse Dashboard journey.

## Features

FlowFuse Dashboard provides a base set of nodes for building your own user interfaces and data visualisations. Much like it's predecessor, it provides a set of easy-to-use, core nodes, but provides complete flexibility for customisation and control over theming, layout and behaviour if you want to go further.
Expand All @@ -28,13 +39,19 @@ The nodes provided integrate seamlessly with any of the existing nodes and flows

### Data Visualization

<img width="600" alt="Example of data visualisations in FlowFuse Dashboard" src="https://github.com/FlowFuse/node-red-dashboard/assets/99246719/48da3687-bebd-4e2a-88b5-6abe2af4fc46">
<div style="text-align: center; margin-bottom: 12px;">
<img width="600" alt="Example of data visualisations in FlowFuse Dashboard" src="https://github.com/FlowFuse/node-red-dashboard/assets/99246719/48da3687-bebd-4e2a-88b5-6abe2af4fc46">
<em style="display: block; text-align: center;">Example of data visualisations in FlowFuse Dashboard</em>
</div>

No dashboard is complete without data visualisation. FlowFuse Dashboard provides a core `ui-chart` widget to provide a simple, yet powerful way to visualise your data. It supports a wide range of chart types, including line, bar and scatter, with more planned for the near future.

### Flexible Customisation

<img width="600" alt="Example of a dashboard using custom templates to render a to-do list" src="https://github.com/FlowFuse/node-red-dashboard/assets/99246719/10d2b81b-8dfe-4597-84c8-03c1776287d5">
<div style="text-align: center; margin-bottom: 12px;">
<img width="600" alt="Example of a dashboard using custom templates to render a to-do list" src="https://github.com/FlowFuse/node-red-dashboard/assets/99246719/10d2b81b-8dfe-4597-84c8-03c1776287d5">
<em style="display: block; text-align: center;">Example of a dashboard using custom templates to render a to-do list</em>
</div>

As with Node-RED Dashboard, the new FlowFuse Dashboard, comes with a `ui-template` node which allows you to define your own custom widgets and styling.

Expand Down
Binary file added docs/assets/images/blueprint-getting-started.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
9 changes: 9 additions & 0 deletions docs/de/getting-started.md
Original file line number Diff line number Diff line change
Expand Up @@ -26,6 +26,15 @@ Dieses Projekt wurde von FlowFuse ins Leben gerufen, um das ursprüngliche Dashb

<RecommendedTutorials />

## FlowFuse Dashboard Blueprints

Der schnellste Weg, um mit FlowFuse Dashboard zu beginnen, ist die [Anmeldung bei FlowFuse Cloud](https://app.flowfuse.com/account/create) und die Auswahl einer der vorhandenen [FlowFuse Dashboard Blueprints](https://flowfuse.com/blueprints/), zum Beispiel die unten gezeigte [Getting Started with FlowFuse Dashboard](https://flowfuse.com/blueprints/getting-started/dashboard/) Blueprint:

![Screenshot des FlowFuse Cloud Dashboards](../assets/images/blueprint-getting-started.png){data-zoomable}
_Screenshot der "Getting Started with FlowFuse Dashboard" Blueprint von FlowFuse Cloud_

FlowFuse bietet eine vollständige Lösung, um Ihre Node-RED-Bereitstellungen zu hosten, zu sichern, zu verwalten und zu skalieren, sei es für Ihr eigenes Hobbyprojekt zu Hause oder wenn Sie Tausende von Node-RED-Instanzen am Edge betreiben. Es gibt auch Angebote für Cloud-, Self-Hosted- und Dedicated-Lösungen.

## Installation

Das Node-RED Dashboard 2.0 von [FlowFuse](https://flowfuse.com) ist im Node-RED Palette Manager verfügbar. Um es zu installieren:
Expand Down
13 changes: 13 additions & 0 deletions docs/en/getting-started.md
Original file line number Diff line number Diff line change
Expand Up @@ -26,6 +26,15 @@ This project was formed by [FlowFuse](https://flowfuse.com/), as part of efforts

<RecommendedTutorials />

## FlowFuse Dashboard Blueprints

The quickest way to get up and running with FlowFuse Dashboard is to [sign up to FlowFuse Cloud](https://app.flowfuse.com/account/create), and select one of the existing [FlowFuse Dashboard Blueprints](https://flowfuse.com/blueprints/), for example the [Getting Started with FlowFuse Dashboard](https://flowfuse.com/blueprints/getting-started/dashboard/) blueprint show below:

![Screenshot of the FlowFuse Cloud dashboard](../assets/images/blueprint-getting-started.png){data-zoomable}
_Screenshot of the "Getting Started with FlowFuse Dashboard" blueprint from FlowFuse Cloud_

FlowFuse offers a complete solution to help you host, secure, manage and scale your Node-RED deployments, whether that's for your own home hobby project, or you're running thousands of Node-RED instances at the Edge. It also comes in offerings for Cloud, Self-Hosted and Dedicated solutions.

## Installation

[FlowFuse](https://flowfuse.com) Dashboard is available in the Node-RED Palette Manager. To install it:
Expand All @@ -43,6 +52,10 @@ The nodes will then be available in your editor for you to get started.

If you want to use `npm` to install your nodes, you can instead [follow these instructions](https://nodered.org/docs/user-guide/runtime/adding-nodes)

### Hosting Node-RED

If you're looking to host Node-RED, we recommend using [FlowFuse](https://flowfuse.com) to get started. FlowFuse can either be self-hosted on your own infrastructure, or to get up and running in 30 seconds, you can use FlowFuse Cloud, which comes with a collection of FlowFuse Dashboard Blueprints to help you get started.

## Dashboard Hierarchy

Each Dashboard is a collection of widgets (e.g. charts, buttons, forms) that can be configured and arranged in our own User Interface. The hierarchy of a Dashboard is as follows:
Expand Down
Loading