npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2025 – Pkg Stats / Ryan Hefner

@soop-sasm/node-red-soop-dashboard

v1.1.1

Published

Dashboard Nodes for Node-RED

Downloads

51

Vulnerabilities

Powered byPowered by Snyk
  • 0High
  • 0Medium
  • 0Low

Links

Git

Maintainers

lea_hwanglea_hwanggemnshgemnshhrookimhrookimquaternion12345quaternion12345zzunsikzzunsikjekwanjekwan

Keywords

node-red

Readme

@soop-sasm/node-red-soop-dashboard

platform npm version GitHub license

This module provides a set of nodes in Node-RED to configure dashboard.

These nodes require node.js version 16.17.1 and Node-RED version 3.0.2.

Description

With these nodes, you can easily configure a fancy dashboard.
Just add a node on the palette, and freely customize your own dashboard.
You can bind nodes as a group, and groups as a tab.
Also, You can arrange each group, just drag & drop it on the dashboard.
Moreover, you can control devices with our nodes such as button, slider, and so on.
Furthermore, you can visualize data with our nodes such as chart, gauge, and so on.

Pre-requisites

The Node-RED-Soop-Dashboard requires Node-RED to be installed.

Install

cd ~/.node-red/
npm install @soop-sasm/node-red-soop-dashboard

Restart your Node-RED instance and you should have dashboard nodes available in the palette.

The dashboard interface is available at http://localhost:1880/dashboard

Layout

Grid

Basically, in a resolution environment with a width greater than 1200px, the dashboard consists of 12 columns. The width of each grid may vary depending on resolution. And the height of each grid is fixed at 75px.
The gap of each grid is 10px for width and height, and the gap of each widget is 20px, 10px for width and height.

Drag & Drop

According to our stacking algorithm, groups are placed in order from the large area group to the top left.
If drag and drop option is activated, all groups are aligned up to the top compactly.

Nodes

This is a brief description of each node.
If you want a more detailed description of nodes, check out our Wiki.

  • Button: A widget that delivers a specific message when pressed by a user.

  • Chart: A widget that receives data from a user and displays it in a chart.

    • Line: Plot a time-series data as a line chart on the dashboard.
    • Bar: Plot a time-series or non-time-series data as a bar chart on the dashboard.
    • Pie: Plot a non-time-series data as a pie chart on the dashboard.

  • Dropdown: A widget that shows the value entered by the user in a drop-down format.

  • Gauge: A widget that shows the percentage of the total value that a user receives.

    • Gauge: Plot a data as a gauge graph on the dashboard.
    • Donut: Plot a data as a donut graph on the dashboard.
    • Liquid: Plot a data as a liquid fill gauge chart on the dashboard.

  • Image: A widget that shows images through an image file or image URL.

  • List: A widget that shows the values entered by the user in list form.

    • Ordered: Show an ordered list on the dashboard.
    • Unordered: Show an unordered list on the dashboard.
    • Checkbox: Show a checkbox list on the dashboard.

  • Slider: A slider-type widget that allows users to set values.

  • Switch: A widget that allows the user to toggle (on/off) values.

  • Text: A widget that shows the value entered by the user in text format.

  • Dashboard Config: A configuration node for soop dashboard.

  • Data Format: A node for labeling each dataset to use chart nodes.

  • Group: A set of widgets. It will be sorted automatically.

  • Tab: A set of groups. The default name is given as Tab # number. It doesn't matter if the name is duplicated.

Examples

Here are some example flows configured with our dashboard nodes. image image image

Discussions and suggestions

Use GitHub Issues to ask questions or to discuss new features.

Authors

SoopSASM in SSAFY(Samsung Software Academy for Youth) 7th

Copyright and license

Copyright Samsung Automation Studio Team under the Apache 2.0 license

Reference