diff --git a/src/blog/2023/01/environment-variables-in-node-red.md b/src/blog/2023/01/environment-variables-in-node-red.md index 3e4dd70fde..4698dcebff 100644 --- a/src/blog/2023/01/environment-variables-in-node-red.md +++ b/src/blog/2023/01/environment-variables-in-node-red.md @@ -57,6 +57,9 @@ Contextual data like configuration, which user is executing the code, differenti One of the options for the `inject` node is to inject a `env variable`, short for; you guessed it: Environment Variable. In this case we’re going to one that’s pre-defined by Node-RED: `NR_FLOW_NAME`. The name of each variable is in all caps by convention. When connecting this inject to a debug it prints “Flow 1” for me. +::cta-image{src="/images/cta/book-a-demo.png" alt="Walk through your FlowFuse setup with our team - book a demo" cta="demo"} +:: + ![Using an environment variable in Node-RED](./images/node-red-use-env-var.png "Using an environment variable in Node-RED") Leveraging environment variables can also be done with other nodes, like for example `change`, `switch`. Note however; you can set the `inject` node to output the value for `FOO` even when it doesn’t exist, but it doesn’t allow you to check in the switch node for example if `FOO` exists. diff --git a/src/blog/2023/03/3-quick-node-red-tips-4.md b/src/blog/2023/03/3-quick-node-red-tips-4.md index 27381cd59c..29976ea14e 100644 --- a/src/blog/2023/03/3-quick-node-red-tips-4.md +++ b/src/blog/2023/03/3-quick-node-red-tips-4.md @@ -22,6 +22,9 @@ When taking data in from sensors sometimes a spurious value can be sent into you ![Using the Smooth node to return highest value from the last 100 payloads](./images/smooth.png "Using the Smooth node to return highest value from the last 100 payloads") +::cta-image{src="/images/cta/book-a-demo.png" alt="Walk through your FlowFuse setup with our team - book a demo" cta="demo"} +:: + You can in turn use this to ignore values that deviate too far from the sample. To help demonstrate the Smooth node, I've created a flow you can import into Node-RED. ```json diff --git a/src/blog/2023/03/comparing-node-red-dashboards.md b/src/blog/2023/03/comparing-node-red-dashboards.md index 10a52bae9f..1ba7213036 100644 --- a/src/blog/2023/03/comparing-node-red-dashboards.md +++ b/src/blog/2023/03/comparing-node-red-dashboards.md @@ -50,6 +50,9 @@ I am assuming the user is a low-code developer. They may have limited experience So, that's the methodology, let's get on with looking at the strengths of each project. +::cta-image{src="/images/cta/wenco-book-demo.png" alt="Wenco deploys new dashboard pages in days with FlowFuse - book a demo" cta="demo"} +:: + ## How easy is it to install? ### uibuilder - 1st place diff --git a/src/blog/2023/06/import-modules.md b/src/blog/2023/06/import-modules.md index ad0ec3bffc..ff15ea26de 100644 --- a/src/blog/2023/06/import-modules.md +++ b/src/blog/2023/06/import-modules.md @@ -69,6 +69,9 @@ Historically in Node-RED, you would have needed to manually `npm install` module ![Location of the "add" button in order to import an npm module intoa function node](./images/npmimport-add.jpg "Location of the 'add' button in order to import an npm module intoa function node") +::cta-image{src="/images/cta/book-a-demo.png" alt="Walk through your FlowFuse setup with our team - book a demo" cta="demo"} +:: + All you need is the name of the module you want to import, then: 1. Drop in a new "function" node & double-click it diff --git a/src/blog/2023/07/how-to-build-a-opc-client-dashboard-in-node-red.md b/src/blog/2023/07/how-to-build-a-opc-client-dashboard-in-node-red.md index 08f9700db0..0faafd4cb8 100644 --- a/src/blog/2023/07/how-to-build-a-opc-client-dashboard-in-node-red.md +++ b/src/blog/2023/07/how-to-build-a-opc-client-dashboard-in-node-red.md @@ -114,6 +114,9 @@ Rather than building the flow step-by-step, the flow source code will be present ## Browse Hierarchical Server Address Space Structure With OPC UA Browser Node +::cta-image{src="/images/cta/wenco-book-demo.png" alt="Wenco deploys new dashboard pages in days with FlowFuse - book a demo" cta="demo"} +:: + The first flow will browse the hierarchical OPC UA Server address space structure and display it on the dashboard. ![image-20230727-085611.png](./images/opc-ua-3/image-20230727-085611.png){data-zoomable} @@ -138,7 +141,6 @@ The configuration of the endpoint properties includes no security credentials, a ![endpoint-configure.png](./images/opc-ua-3/endpoint-configure.png){data-zoomable} - Using the output of a debug node, we get from the OPC UA Browser yield a payload with an array of 5 objects. ![address-debug.png](./images/opc-ua-3/address-debug.png){data-zoomable} @@ -205,7 +207,6 @@ Going back to our OPC Server, we can see that exactly where that value is derive ![sim-counter-server.png](./images/opc-ua-3/sim-counter-server.png){data-zoomable} - Now we add a `gauge` dashboard node to visualize the counter on the dashboard. In the OPC Server, it is shown that the counter increments in a range of 0-30 in 1 count increments. ![counter-properties.png](./images/opc-ua-3/counter-propertie.png){data-zoomable} diff --git a/src/blog/2023/07/how-to-deploy-a-basic-opc-ua-server-in-node-red.md b/src/blog/2023/07/how-to-deploy-a-basic-opc-ua-server-in-node-red.md index 256dc92918..862037e0ae 100644 --- a/src/blog/2023/07/how-to-deploy-a-basic-opc-ua-server-in-node-red.md +++ b/src/blog/2023/07/how-to-deploy-a-basic-opc-ua-server-in-node-red.md @@ -77,7 +77,6 @@ Because of OPC-UA’s wide industry acceptance, it is increasingly becoming nati !["Automation Pyramid"](./images/opc-ua-1/automation-pyramid.jpg "Automation Pyramid") *Image reference - [imagecontroltips.com](https://www.motioncontroltips.com/what-is-opc-ua-and-how-does-it-compare-with-industrial-ethernet/)* - ## Fieldbus Model vs OPC-UA Information Model As of today, industrial ethernet fieldbuses dominate the field/device-level (level 0) and controller/PLC-level (level 1) of the automation pyramid. @@ -90,7 +89,6 @@ Traditionally, fieldbus protocols transmit only raw data from field devices (ie, !["Fieldbus Model"](./images/opc-ua-1/fieldbus-model.png "Fieldbus Model") - In contrast to fieldbus protocols, OPC-UA represents automation data in the form of nodes. The framework for constructing nodes is referred to as the [OPC Information model](https://reference.opcfoundation.org/Core/Part5/v104/docs/), and consists of pre-defined classes and methods that are programmed in the OPC Server address space. !["OPC Information Model"](./images/opc-ua-1/opc-information-model.png "OPC Information Model") @@ -112,6 +110,9 @@ The OPC client simply needs to subscribe to the OPC Server endpoint url (ex. opc With some background on OPC-UA and how information is modeled in mind, we can take a look at the [node-red-contrib-opcua-server](https://flows.nodered.org/node/node-red-contrib-opcua-server) node, which is merely a compact version of the [node-red-contrib-opcua](https://flows.nodered.org/node/node-red-contrib-opcua) node that only focuses on the OPC-UA server and hence requires less dependencies. +::cta-image{src="/images/cta/aperia-book-demo.png" alt="Aperia Technologies stopped reprogramming controllers station by station with FlowFuse - book a demo" cta="demo"} +:: + An [example flow](https://github.com/BiancoRoyal/node-red-contrib-opcua-server/blob/master/examples/server-with-context.json) is provided on github that can serve as a basis for understanding how a OPC-UA server is constructed. Let’s get the example server up and running. Deploying the example flow yields the following result - @@ -148,7 +149,6 @@ We can confirm the values are being stored in memory by checking the flow contex !["Screenshot showing the Context Data option"](./images/opc-ua-1/context-data-1.png "Screenshot showing the Context Data option") - ![Screenshot showing the flow variables in the context data tab](./images/opc-ua-1/context-data-2.png "Screenshot showing the flow variables in the context data tab") Each time we hit refresh, the values change, confirming that the values are randomly changing every second. diff --git a/src/blog/2023/07/influxdb-historical-data.md b/src/blog/2023/07/influxdb-historical-data.md index 01e96d381a..5125e47ecd 100644 --- a/src/blog/2023/07/influxdb-historical-data.md +++ b/src/blog/2023/07/influxdb-historical-data.md @@ -58,6 +58,9 @@ Unfortunately, these values are not in a friendly form to work with. Ideally, w
+::cta-image{src="/images/cta/power-workplace-book-demo.png" alt="Power Workplace relies on FlowFuse for scalability, reliability and security audits - book a demo" cta="demo"} +:: + We need to extract the numeric part of the string using a regular expression with a “change” node and the JSONata expression `$number($match(msg.payload, /-?(\d+(\.\d+)?)/, 10).match)`. `$match` and `/-?(\d+(\.\d+)?)/` help the function pull out the numeric components of the string and `$number` parses these components to be an actual number data type. Here are the properties of the “change” node. @@ -70,7 +73,6 @@ When we look in the debugger we see the payload specified as a “number” and Now we have some live data, let’s store it using InfluxDB. Below are the steps to set up an account with the InfluxDB free service. Navigate to [https://www.influxdata.com/products/influxdb-overview/](https://www.influxdata.com/products/influxdb-overview/) and let’s begin. Click on “Get Started for Free” under Cloud, InfluxDB Cloud Serverless. - !["Screenshot showing the Influxdb cloud 'Getting started' button"](images/influxdb-historical-data/run-influxdb-8.png "Screenshot showing the Influxdb cloud 'Getting started' button") For this example the Free plan will work fine. @@ -165,7 +167,6 @@ Here is the code from the “time/date” function node. A bit of juggling of l Here is the “change” node used to create the msg.rangeEnd. The JSONatta expression is `$fromMillis($toMillis(msg.rangeStart) + msg.payload.window * 60 * 1000)`. The expression combines the milliseconds from the `msg.rangeStart` with the calculated milliseconds in the “Window (minutes)” from the GUI. - !["Screenshot of the change node properties tab"](images/influxdb-historical-data/change-node-26.png "Screenshot of the change node properties tab")
@@ -220,7 +221,6 @@ The “join” node just needs to be set to “Combine each” msg.chartData obj The final “change” node, “format,” is where we prescribe the format needed for the “chart” node, [{"series":[""],"data":[[]],"labels":[""]}], and finally we insert our `msg.chartData` array into that structure. Notice `msg.title` is now set to “Data Received.” - !["Screenshot of the change node properties tab"](images/influxdb-historical-data/change-node-33.png "Screenshot of the change node properties tab")
diff --git a/src/blog/2023/08/flowforge-is-now-flowfuse.md b/src/blog/2023/08/flowforge-is-now-flowfuse.md index c9e0c96d6b..3bd9b147b5 100644 --- a/src/blog/2023/08/flowforge-is-now-flowfuse.md +++ b/src/blog/2023/08/flowforge-is-now-flowfuse.md @@ -38,6 +38,9 @@ We are happy to announce that FlowForge is changing its name to FlowFuse. Changi +::cta-image{src="/images/cta/book-a-demo.png" alt="Walk through your FlowFuse setup with our team - book a demo" cta="demo"} +:: + We believe that this new name better reflects our core mission and aspirations. Just as electricity fuses elements to create energy, the FlowFuse platform fuses together data, ideas, processes, and technologies to generate a powerful force of innovation and transformation. Selecting a new name for a company or product is never easy. Some of the requirements we set for a new name were: 1) it should be reasonably close to FlowForge so it will be easier to transition the brand identity, 2) it should even better reflect our mission, and 3) keeping the FF acronym will help with environment variable prefixes :-). I think we have accomplished all the above and am delighted to move forward as FlowFuse. diff --git a/src/blog/2023/12/device-agent-as-a-windows-service.md b/src/blog/2023/12/device-agent-as-a-windows-service.md index ae1c31db6f..9678fca395 100644 --- a/src/blog/2023/12/device-agent-as-a-windows-service.md +++ b/src/blog/2023/12/device-agent-as-a-windows-service.md @@ -49,7 +49,6 @@ Finally, we set the service to run under the **service** account. _NOTE: The instructions in this how to were written on **Windows 11 Pro 22H2**_ - ### TIP: Using domain accounts If the account is a domain account, append the domain name to the **user** e.g. `user@domain` whenever the **user** name is used in the instructions below. @@ -59,6 +58,9 @@ If the account is a domain account, append the domain name to the **user** e.g. powershell -Command "Start-Process 'cmd' -Verb runAs ``` +::cta-image{src="/images/cta/power-workplace-book-demo.png" alt="Power Workplace relies on FlowFuse for scalability, reliability and security audits - book a demo" cta="demo"} +:: + ### TIP: Launching an elevated powershell prompt window (e.g. as the admin user) ```bash @@ -107,7 +109,6 @@ del nssm-2.24.zip rmdir /s /q nssm-2.24 ``` - ### `powershell` version [elevated](#tip%3A-launching-an-elevated-powershell-prompt-window-(e.g.-as-the-admin-user)) powershell prompt If you don't have `cURL` installed, then powershell can be used to download the file. Here is how to do it: @@ -130,7 +131,6 @@ If you prefer, you can download the nssm zip file manually from [https://nssm.cc Ultimately, you should end up with a file named `nssm.exe` in the `c:\opt\` directory. - ## Install and configure the device-agent As the **service** account, to do so open a command prompt window and run the following and authenticate: @@ -226,7 +226,6 @@ Click the "Edit Service" button to save the changes. Now you have a service that will run the device-agent as the **service** account 🎉 - ### Controlling the service You can start the service with the command: diff --git a/src/blog/2024/01/dashboard-2-multi-user.md b/src/blog/2024/01/dashboard-2-multi-user.md index 5d8245df5e..471ed7a7f7 100644 --- a/src/blog/2024/01/dashboard-2-multi-user.md +++ b/src/blog/2024/01/dashboard-2-multi-user.md @@ -38,6 +38,9 @@ All instances on FlowFuse can be configured with _"FlowFuse User Authentication" ##### FlowFuse Cloud +::cta-image{src="/images/cta/wenco-book-demo.png" alt="Wenco deploys new dashboard pages in days with FlowFuse - book a demo" cta="demo"} +:: + _Note: Every instance created from today onwards automatically comes with the necessary configuration. Already created instances need to be manually restarted._ The Personalised Multi-User Dashboard plugin, `@flowfuse/node-red-dashboard-2-user-addon`, is available in our [Certified Nodes](/integrations/?certified=1) catalogue, accessible to our Teams and Enterprise customers. diff --git a/src/blog/2024/02/connect-node-red-to-kepware-opc.md b/src/blog/2024/02/connect-node-red-to-kepware-opc.md index 8dec68f0c4..513f5ad492 100644 --- a/src/blog/2024/02/connect-node-red-to-kepware-opc.md +++ b/src/blog/2024/02/connect-node-red-to-kepware-opc.md @@ -31,11 +31,12 @@ The first thing we need to do is check our **OPC UA Configuration Manager** for ![kepware tray](./images/kepserverex-tray.png) - If your Node-RED instance lives on the same server that your KepserverEX is on, pick accordingly or click add if you need to define by ip address. This is for setting different credential requirements for localhost vs remote host access. Also note, that if you have multiple network adapters, make sure to select the adapter that is in use. -![kepware endpoint definition](./images/kep-endpoint-definition.png) +::cta-image{src="/images/cta/aperia-book-demo.png" alt="Aperia Technologies stopped reprogramming controllers station by station with FlowFuse - book a demo" cta="demo"} +:: +![kepware endpoint definition](./images/kep-endpoint-definition.png) We are testing locally on the server, so we will use the one selected for loopback addressing. We will be leaving the OPC server port as default and select **Basic256Sha256** with **Sign and Encrypt**. @@ -49,32 +50,26 @@ Import the flow below into your Node-RED environment. - Next, let's configure the **OPC UA Client**. Click the **pencil** to add a new OPCUA-Endpoint. ![kepware node-red encrypted opc ua node](./images/opcua-endpoint-node-red-encrypted.png) - For the endpoint, **copy** the endpoint definition from the KepserverEX OPC UA Configuration Manager. In our example, it is ```opc.tcp://127.0.0.1:49320```, and paste it into the Endpoint. For SecurityPolicy select **Basic256Sha256**. For SecurityMode, select **Sign&Encrypt**. Lastly, we will be selecting **Anonymous**. Click **Update**, then **Deploy**. - Trigger the flow by **clicking** on the inject node. The server may not connect at this time, and it is expected. ![kepware node-red invalid endpoint](./images/node-red-opc-ua-invalid-endpoint.png) - #### Step 3: KepserverEX Moving back over to KepserverEX, Click on the tray again in the bottom of the screen and select **Configuration**, then select **Edit** from the file menu, then **Properties**. Next, Select **OPC UA** and ensure that **Allow Anonymous login** is set to **Yes**. Click **OK**. ![kepware node-red anonymous login](./images/node-red-kepware-anonymous-login.png) - Select the tray at the bottom of the screen again, and select **OPC UA Configuration**. Select the **Trusted Clients** tab. ![kepware node-red trusted client before](./images/kepserverex-trusted-client-before.png) - Now select the **NodeOPCUA-Client** and then **click** Trust. ***If you don't have the client option, trigger the inject node again from the Node-RED flow and check the logs*** ![kepware node-red trusted client after](./images/kepserverex-trusted-client-after.png) @@ -91,7 +86,6 @@ We will be leveraging the default Simulated Examples for reading tags from Kepse ![kepware node-red read tags](./images/node-red-kepware-read-tag.png) - Edit the OPCUa-Item node and note the item. ``` diff --git a/src/blog/2024/03/dashboard-getting-started.md b/src/blog/2024/03/dashboard-getting-started.md index acf22e907d..23c18c42dd 100644 --- a/src/blog/2024/03/dashboard-getting-started.md +++ b/src/blog/2024/03/dashboard-getting-started.md @@ -46,6 +46,9 @@ So, with that in mind, we wanted to offer a new "Getting Started" guide that wil ## Adding your first widgets +::cta-image{src="/images/cta/wenco-book-demo.png" alt="Wenco deploys new dashboard pages in days with FlowFuse - book a demo" cta="demo"} +:: + With the nodes installed, getting started is as easy as choosing a node from the Palette (the left-hand side list of nodes) in Node-RED, and dropping it onto your canvas. @@ -83,7 +86,6 @@ Currently, we have three different options for page layout: - **Fixed:** ([docs](https://dashboard.flowfuse.com/layouts/types/fixed.html)) Each component will render at a _fixed_ width, no matter what the screen size is. The "width" property is converted a fixed pixel value (multiples of 48px by default). - **Notebook:** ([docs](https://dashboard.flowfuse.com/layouts/types/notebook.html)) This layout will stretch to 100% width, up to a maximum width of 1024px, and will centrally align. It's particularly useful for storytelling (e.g. articles/blogs) or analysis type user interfaces (e.g. Jupyter Notebooks), where you want the user to digest content in a particular order through scrolling. - ### Navigation Sidebar Dashboard 2.0 offers various options on the appearance of the navigation sidebar: @@ -94,7 +96,6 @@ Dashboard 2.0 offers various options on the appearance of the navigation sidebar - **Appear over Content:** When the sidebar is opened, the page is given an overlay, and the sidebar sits on top. - **Always Hide:** The sidebar will never show, and navigation between pages can instead be driven by [`ui-control`](https://dashboard.flowfuse.com/nodes/widgets/ui-control.html). - ### Define Your Layout In our example, we're going to switch to a "Notebook" layout, with a "Collapse to Icons" sidebar: diff --git a/src/blog/2024/03/using-kafka-with-node-red.md b/src/blog/2024/03/using-kafka-with-node-red.md index f8b07e6d13..dcb74736a3 100644 --- a/src/blog/2024/03/using-kafka-with-node-red.md +++ b/src/blog/2024/03/using-kafka-with-node-red.md @@ -42,6 +42,9 @@ docker run -p 9092:9092 ` confluentinc/cp-kafka ``` +::cta-image{src="/images/cta/power-workplace-book-demo.png" alt="Power Workplace relies on FlowFuse for scalability, reliability and security audits - book a demo" cta="demo"} +:: + ## Running Kafka on the cloud To run Kafka on the cloud, you can consider utilizing any cloud service according to your preferences. For a guide on running Kafka on a cloud platform, the procedures may differ. You can refer to the documentation provided by your preferred cloud service for detailed instructions. diff --git a/src/blog/2024/04/displaying-logged-in-users-on-dashboard.md b/src/blog/2024/04/displaying-logged-in-users-on-dashboard.md index 72ee6e3856..f637eaebdc 100644 --- a/src/blog/2024/04/displaying-logged-in-users-on-dashboard.md +++ b/src/blog/2024/04/displaying-logged-in-users-on-dashboard.md @@ -85,6 +85,9 @@ The FlowFuse User Addon is a plugin developed for Dashboard 2.0, leveraging the ### Installing Flowfuse user addon +::cta-image{src="/images/cta/wenco-book-demo.png" alt="Wenco deploys new dashboard pages in days with FlowFuse - book a demo" cta="demo"} +:: + 1. Click the Node-RED Settings (top-right) 2. Click "Manage Palette" 3. Switch to the "Install" tab diff --git a/src/blog/2024/05/exploring-node-red-dashboard-2-widgets.md b/src/blog/2024/05/exploring-node-red-dashboard-2-widgets.md index 4dabc29d91..8d0c3bfc38 100644 --- a/src/blog/2024/05/exploring-node-red-dashboard-2-widgets.md +++ b/src/blog/2024/05/exploring-node-red-dashboard-2-widgets.md @@ -54,6 +54,9 @@ The **ui-form** widget emits a payload object with key-value pairs of form eleme 1. Drag a **function** node onto the canvas and add the following code. This will store the submission in the `income` global context variable, and then modify `msg.payload` to pass on a notification to any further connected nodes. +::cta-image{src="/images/cta/wenco-book-demo.png" alt="Wenco deploys new dashboard pages in days with FlowFuse - book a demo" cta="demo"} +:: + ```javascript // Retrieve the existing 'income' array from the global context, or initialize it as an empty array if it doesn't exist let income = global.get('income') || []; diff --git a/src/blog/2024/05/mapping-location-on-dashboard-2.md b/src/blog/2024/05/mapping-location-on-dashboard-2.md index e0e5011011..39d9cfbf7f 100644 --- a/src/blog/2024/05/mapping-location-on-dashboard-2.md +++ b/src/blog/2024/05/mapping-location-on-dashboard-2.md @@ -86,6 +86,9 @@ To render an interactive world map webpage for plotting location data, we will u Before plotting locations, we need to obtain the data first. For this purpose, we will utilize the [Edenburg Open Public Transportation API](https://tfe-opendata.readme.io/docs/getting-started). This API provides the live locations of all of Edenburg's public buses and trams, enabling us to access the necessary data for plotting on Worldmap within Dashboard 2.0. +::cta-image{src="/images/cta/wenco-book-demo.png" alt="Wenco deploys new dashboard pages in days with FlowFuse - book a demo" cta="demo"} +:: + 1. Drag an **Inject** node onto the canvas and set the repeat property to a 20-second interval. 2. Drag an HTTP request node onto the canvas, Dobule-click on it and choose **GET** method, and enter `https://tfe-opendata.com/api/v1/vehicle_locations` in the URL field and select return as **a parsed json object**. This API is public, so no need for environment variables. For private APIs, consider using [environment variables](/blog/2023/01/environment-variables-in-node-red) for security. diff --git a/src/blog/2024/06/dashboard-1-deprecated.md b/src/blog/2024/06/dashboard-1-deprecated.md index 0c247084cb..7896b0ac9b 100644 --- a/src/blog/2024/06/dashboard-1-deprecated.md +++ b/src/blog/2024/06/dashboard-1-deprecated.md @@ -32,6 +32,9 @@ Not only have we made significant efforts to ensure that FlowFuse Dashboard has - **Directly Install on Mobile:** FlowFuse Dashboard is built as a Progressive Web App (PWA), this means that you're able to install it directly onto your mobile device as if it were a native mobile application. - **Vuetify Framework:** FlowFuse Dashboard is built on VueJS, and with that, we made the decision to integrate in [Vuetify](https://vuetifyjs.com/en/components/all/#containment), a very rich collection of functional UI widgets. All of these widgets are available, by default when you want to build your own custom widgets in a `ui-template` node. +::cta-image{src="/images/cta/wenco-book-demo.png" alt="Wenco deploys new dashboard pages in days with FlowFuse - book a demo" cta="demo"} +:: + ## What we have planned We are actively investing into the development of FlowFuse Dashboard, and releasing new features and updates on a regular basis. We have a public [Project Management Board](https://github.com/orgs/FlowFuse/projects/15/views/1) that show exactly what we're working on, and what we have planned in the near future. Some particular highlights include: diff --git a/src/blog/2024/08/comparing-dashboard-2-with-uibuilder.md b/src/blog/2024/08/comparing-dashboard-2-with-uibuilder.md index 34cec763ef..4bf6e475d4 100644 --- a/src/blog/2024/08/comparing-dashboard-2-with-uibuilder.md +++ b/src/blog/2024/08/comparing-dashboard-2-with-uibuilder.md @@ -63,6 +63,9 @@ Users will need to recreate their dashboards from scratch, as UI-Builder relies ### FlowFuse Dashboard +::cta-image{src="/images/cta/wenco-book-demo.png" alt="Wenco deploys new dashboard pages in days with FlowFuse - book a demo" cta="demo"} +:: + [FlowFuse Dashboard](https://github.com/FlowFuse/node-red-dashboard/graphs/contributors), which replaced Node-RED Dashboard 1.0 in 2023, has shown consistent and high development activity. The project benefits from a dedicated team that regularly updates and improves it, ensuring it remains current with user needs and technological advancements. ![Screenshot of the FlowFuse Dashboard GitHub commit chart](./images/dashboard-2-commits.png) @@ -214,7 +217,6 @@ UI-Builder does not have a publicly accessible project roadmap or a dedicated pl ## Summary Table - | Feature | FlowFuse Dashboard | UI-Builder | |------------------------------------------|--------------------------------------------------|--------------------------------------------------| | **Ease of Installation** | **Moderately easy**: Search for `flowfuse/node-red-dashboard` can be confusing due to multiple nodes; useful documentation available | **Easy**: Clear package name `node-red-ui-builder` makes it straightforward to find | diff --git a/src/blog/2024/08/customise-theming-in-your-dashboards.md b/src/blog/2024/08/customise-theming-in-your-dashboards.md index 67cbc36a78..b92b0b0247 100644 --- a/src/blog/2024/08/customise-theming-in-your-dashboards.md +++ b/src/blog/2024/08/customise-theming-in-your-dashboards.md @@ -104,6 +104,9 @@ _Screenshot showing the 'Show page name in the header bar' option in the dashboa 3. Choose the page on which you want to render the buttons if you selected `page-scope`, or choose correct ui if `ui-scope` is selected. 4. Paste the following Vue snippet into the template widget. In this snippet, note how we specify the "to" attribute targeting the `#app-bar-title` ID in the teleport tag: +::cta-image{src="/images/cta/wenco-book-demo.png" alt="Wenco deploys new dashboard pages in days with FlowFuse - book a demo" cta="demo"} +:: + ```html