Coder Social home page Coder Social logo

hotnipi / node-red-contrib-ui-level Goto Github PK

View Code? Open in Web Editor NEW
26.0 2.0 6.0 1.09 MB

A linear level type widget to the Node-RED dashboard

License: MIT License

HTML 32.51% JavaScript 67.49%
node-red ui-widget ui-level dashboard-widget dashboard level gauge

node-red-contrib-ui-level's People

Contributors

hotnipi avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar

node-red-contrib-ui-level's Issues

Make width of bar configurable

Is your feature request related to a problem? Please describe.
I would like a wider level bar

Describe the solution you'd like
A configuration option to specify the width of the level bar

Describe alternatives you've considered
Changing CSS (did not work)

Additional context
Add any other context or screenshots about the feature request here.

Numbers and digits without the bars.

This node is great. I would love to see the same node but without the bars showing. Numbers (and label) only. Do you think that is possible?

Kind regards,

William

Layout type Pair Horizontal units for bottom channel neither superscript or subscript

Describe the bug
Top channel unit it superscript whereas bottom channel is aligned with baseline.

To Reproduce
Add ui object with Layout Horizontal Pair and Unit value.

Expected behavior
Unit should either be superscript (preferred) or subscript

Screenshots
Refer GitHub sample images

Environment and versions (please complete the following information):

  • OS: Win 10
  • Browser Chrome
  • Node-RED version 2.1.6
  • Dashboard version 3.1.5
  • ui-level version 0.1.46

Make node clickable to open another page

Is your feature request related to a problem? Please describe.
I would like to click on the node and open another page when clicked.

Describe the solution you'd like
An output on the node which can send a payload to ui control.

Describe alternatives you've considered
Use separate buttons (Which uses space on my screen)

Additional context

Font Color

Describe the bug
Font color default seems to be 'white'. How do I change/set "label", "Unit", "Value" font color, size, etc.?

To Reproduce
na

Expected behavior
Expected to use dashboard Theme and/or use of CSS settings (font size=1; font color= blue) as I do for node-red standard widgets.

Screenshots
na

Environment and versions (please complete the following information):

ui-level version: 0.0.20

C:\Users\dave>node-red
22 May 09:03:45 - [info]

Welcome to Node-RED

22 May 09:03:45 - [info] Node-RED version: v0.19.5
22 May 09:03:45 - [info] Node.js version: v10.15.1
22 May 09:03:45 - [info] Windows_NT 10.0.17763 x64 LE
22 May 09:03:45 - [info] Loading palette nodes
22 May 09:03:48 - [warn] rpi-gpio : Raspberry Pi specific node set inactive
22 May 09:03:48 - [info] Dashboard version 2.14.0 started at /red/ui
22 May 09:03:49 - [warn] ------------------------------------------------------
22 May 09:03:49 - [warn] [node-red/tail] Not currently supported on Windows.
22 May 09:03:49 - [warn] ------------------------------------------------------
22 May 09:03:49 - [info] Settings file : \Users\dave.node-red\settings.js
22 May 09:03:49 - [info] HTTP Static : C:\Users\dave.node-red
22 May 09:03:49 - [info] Context store : 'default' [module=memory]
22 May 09:03:49 - [info] User directory : \Users\dave.node-red
22 May 09:03:49 - [info] Server now running at http://127.0.0.1:1880/red/
22 May 09:03:49 - [info] Active project : Collection_Template_Widgets
22 May 09:03:49 - [info] Flows file : \Users\dave.node-red\projects\Collection_Template_Widgets\flow.json
22 May 09:03:49 - [info] Starting flows

Additional context
na

Error: Cannot find module 'node-red-dashboard'

Describe the bug

node-red[1452]: { Error: Cannot find module 'node-red-dashboard'
node-red[1452]: at Object.requireModule [as require] (/usr/local/lib/node_modules/node-red/node_modules/@node-red/registry/lib/util.js:48:19)
node-red[1452]: at new LevelNode (/var/smarthouse/nodered/.node-red/node_modules/node-red-contrib-ui-level/ui-level.js:176:14)
node-red[1452]: at Object.createNode (/usr/local/lib/node_modules/node-red/node_modules/@node-red/runtime/lib/nodes/flows/util.js:483:31)
node-red[1452]: at Flow.start (/usr/local/lib/node_modules/node-red/node_modules/@node-red/runtime/lib/nodes/flows/Flow.js:176:44)
node-red[1452]: at start (/usr/local/lib/node_modules/node-red/node_modules/@node-red/runtime/lib/nodes/flows/index.js:329:33)
node-red[1452]: at stop.then.then (/usr/local/lib/node_modules/node-red/node_modules/@node-red/runtime/lib/nodes/flows/index.js:196:21)
node-red[1452]: at processTicksAndRejections (internal/process/task_queues.js:86:5) code: 'MODULE_NOT_FOUND' }

To Reproduce
Clear setup node-red.
Then install node-red-dashboard and node-red-contrib-ui-level from node-red interface.
Run with option -u:

ExecStart=/usr/local/bin/node-red -u /var/smarthouse/nodered/.node-red

Desktop (please complete the following information):

  • OS: raspberry debian
  • Node-RED version: 0.20.5
  • Dashboard version: 2.14.0
  • ui-level version: 0.0.15

Allow changing color of Value on the fly

Is your feature request related to a problem? Please describe.
A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]

Describe the solution you'd like
A clear and concise description of what you want to happen.

Describe alternatives you've considered
A clear and concise description of any alternative solutions or features you've considered.

Additional context
Add any other context or screenshots about the feature request here.

Which part of the message is used.

Going on from my other "bug report" I now also see that msg.payload is the only thing that can be used to give it a value.

That's ok for most times, but now I have to modify my flows as msg.payload is used for something else.
(Ironically I believe the other node can have its input qualifier changed, so all is kind of good)

I spoke too soon.
So now I'm stuck.

on max value when displayed until first refresh

Since the update to 0.1.37 the bars are always at max value until they are refreshed with a new value while displayed.
The numbers are shown correctly, but the bars are always completely full when just shown.

Using Dashboard of Node Red 1.1.3.

Layout problem

I was wanting to use this to indicate the level of charge in a battery.

Only a small part of the screen. 1 x 1.

But I can't get rid of the actual value being shown on top of the graph.

Screenshot from 2020-10-28 06-51-19
I get that they may be needed sometimes, but I think it is a bug (sorry if it is a feature request) as there isn't an option to turn the text/value being displayed off.

No segments option.

Is your feature request related to a problem? Please describe.
Not really related to a problem.

Describe the solution you'd like
I would like, a setting to disable the segments, just continious line.
Would be cool, if you had an option, so that value field shows diffirent values, to the ones bargraph is using. (if that makes sense).

Describe alternatives you've considered
I cant find reasonable solutions.

Additional context
Im making a spotify controll, and wanted to add a progress bar for song, that is currently playing.

Allow changing of Decimals of the Value on the fly

Is your feature request related to a problem? Please describe.
I want to be able to change the decimals of the value on the fly, e.g. with msg.control={color:"red"}.

Additional context
The sense would be to be able to adjust the decimals when changing the min/max values.

Bug with segments color rule

Describe the bug
When trying to set the Min and Max values using the msg.control.seg1/2, i've notice a bug with the color rule. It doesnt respect the limits imposed by the msg.control.seg1/2. After testing, looks like there's some problem related to odd/even numbers, cuz they respond different.

To Reproduce
Just enter some msg.control.seg like: 166175 and 167176 and move 1 before the lower limit (168) and 1 above the higher limit (177).
Expected behavior
For exemple, when setted to 166~175 it should be red from 0 to 165, green from 166 to 175, and red from 176 to 250.

Screenshots
image

Great work by the way!!

Environment and versions

OS: windows 10
Microsoft Edge
Node-RED version: 1.1.3
Dashboard version: 2.24.2
ui-level version: 0.1.40

Additional context
Add any other context about the problem here.

Multi series per node

Hi there,

Great node!

Is there any plan for multi series per node? Like a level-style bar chart?

Thanks

Updating Min/Max does not refresh ticks

Describe the bug
when sending msg.control to update min/mx values, the tick marks remain based on the manual
values entered in the config panel. They do not seem to refresh or change one a message is sent.

Expected behavior
Tick values, specially if left on Auto mode should refresh when msg.config { min / max} is sent.

Environment and versions (please complete the following information):

  • OS: OS X: 10.15
  • Browser: Safari
  • Node-RED: 1.3.5
  • Dashboard version (good question... next question ? )
  • ui-level version: 0.1.44

No bar displayed

Describe the bug
Today I tried to use the ui-level but I don't see the bar .....

aaa

Environment and versions (please complete the following information):
Ubuntu 20.04
Firefox 96.0
Node-RED version: v2.1.6
Node.js version: v14.16.0
Dashboard version 3.1.3
ui-level version 0.1.46

Can you help me?

ui-level resetting with deploy

I have ui-level on a dashboard.
It shows the value.

I modify ANOTHER node in the flow and do a deploy (modified nodes) and the node just shows 100%.

Details:
NR 1.0.3
Dashboard: 2.19.2
RPI Stretch
Also happens on Ubuntu 18.04 LTS

Screen shots:
After deploy

Screenshot from 2019-12-17 19-50-59

After button pressed

Screenshot from 2019-12-17 19-51-32

The flow: (Picture)

Screenshot from 2019-12-17 19-51-38

Horizontal Level always displayed as "Max" - again

Hi,
until yesterday I was using node-red-contrib-ui-level without any trouble with an older version. Yesterday I updated to the latest version 0.1.27. After the update a new deployment was urged by all my ui-level nodes.
After having done so, I experienced, that depending on the browser type the level display worked correctly or not:
Firefox browser on my PC: Level display ok
Firefox browser on Android smartphone and tablet: Only "Max" is displayed on all level meters
Chrome browser on Andoid tablet: Level display ok.

Who has an idea how to eliminate the dependency of browser types?
Best regards
Gerhard

It would be great if the UI_Level would auto scale with customer widget sizes

Is your feature request related to a problem? Please describe.
With the default widget size of 48x48 pixels the levels look great but when scaling to say 96x96 the level does not seem to scale with the specified widget size. For example if you have a level set to a widgets size of 2x1 at 48x48 pixels it looks great but if you double the pixel resolution to 96x96 the level only fills half of the widgest defined space.

Describe the solution you'd like
It would be great if it auto scaled with the resolution. in a very old version I think 0.2 it scaled correctly.

image

image

image

image

image

Horizontal Level always displayed as "Max"

When i deploy a level bar, it is visually always "maxed" even if the actual values do not reflect that. This started after the upgrad to 0.25

Reproduce by:
Place a horizontal level bar and send some values within the expected range.

Expected behavior
Level displayed reflects actual value.

Screenshots
image

Environment and versions (please complete the following information):

  • OS: Windows
  • Browser: Chrome and Firefox
  • Node-RED version: 1.0.4
  • Dashboard version: 2.19.04
  • ui-level version

Additional context
Thank you very much for your help!

Disable min and max value

Is your feature request related to a problem? Please describe.
On the vertical bar the minmum and maximum level numbers are always shown, I would like to disable these to gain some horizontal space.

Describe the solution you'd like
A checkbox per node to disable min and max value

Describe alternatives you've considered
I tried to find a css property to change this but it has no unique css class

Additional context

Propper Display Option for Celcius/Fahrenheit

Is your feature request related to a problem? Please describe.
I use the level dashboard component for different things.
One case is for battery states for shellies another use case is for temperature values from the i.e. heatpump or Netatmo devices.
It is possible to feed the data in but when it comes to temperature values in Celcius or Fahrenheit it would be nice to have a center for 0°C or 32°F and then the color goes up or down (i.e. from green into red shapes up and into blue shapes down).

Describe the solution you'd like
It would be nice to get a 4th option in the layout to choose "temperature" and then to configure the min and max values as it is.

Describe alternatives you've considered
All the other projects I found around are not that beautiful as yours is.
And when it is too complicated to integrate that feature directly in the same node, maybe there is an option to create a dedicated temperature node for it.

Thank you - you have a great lib 👌💪

Space between label and level bar

For the single horizontal bar, the Label is right above the bar/ticker values, which can seem crammed. In my case I am using widget unit sizes of 40 x 40 px and my ui-level is 8 x 2 units. The bar is right at the bottom as expected. The ticker values are right above the bar - also good. But the label is then placed right above the ticker values, which makes everything look crammed.

I found I could increase the distance between the label and the bar/ticker values by changing line 808 of ui-level.js, where config.textpos is hard coded to config.stripe.y0 - 2. By changing that to y0 - 20 I could make it all look a lot less crammed. It would be great if that option (distance between label and bar) could be set by the user in the ui-level edit panel.

BTW thanks for this great node with all its flexibility.

Zero Reference - Center Swing point for +ve and -ve ui level

The Min and Max are settable however the zero reference is not. It always assumes a positive number from minimum when displaying the levels, It would be good to have the ability to set the zero reference so the ui levels swings from this zero reference point.

This would allow this to be used for display of a controllers output eg Possitive or Negative Controller output. with Zero Center.
Or Delta from Setpoint display.

The levels could then peek in both directions away from the zero reference point.

The Zero reference at first could be "0" for first version but actualy the same maths would work if it was changed to be from a reference number "number" for delta from setpoint.

Love the ui Level, good job !!.

Requirements Question

Hello. Thanks for this cool bar-graphing display for node-red! I'm having some troubles getting it working. I can see a bit of a scale and a number that changes to match my slider, but no segments of the bar-graph (see screenshot). My system and startup info is below. Any suggestions?

cat /etc/os-release
PRETTY_NAME="Raspbian GNU/Linux 9 (stretch)"
NAME="Raspbian GNU/Linux"
VERSION_ID="9"
VERSION="9 (stretch)"
VERSION_CODENAME=stretch
ID=raspbian
ID_LIKE=debian

Node-RED version: v0.20.8
Node.js version: v8.16.2
Linux 4.19.66-v7+ arm LE
Dashboard version 2.17.1 started at /ui
Context store : 'default' [module=memory]

image

ui_level nodes marked as not properly configured when using projects

Describe the bug
I`m using projects. Mainly to transfer my flow from my development laptop to my "live" server.
After a push/pull all my ui_level nodes on the destination machine are marked as not properly configured

image

image

The edit panel don`t show errors and a simple "done" fix the "error"
Not a big deal but little bit annoying if you have to do this with many nodes all over again.

Environment and versions (please complete the following information):

  • OS: Windows 10
  • Browser Chrome latest
  • Node-RED version 1.0.3
  • Dashboard version 2.19.3
  • ui-level version 0.1.24

Additional context
Add any other context about the problem here.

Bug with msg.control.seg

Describe the bug
When trying to set the Min and Max values using the msg.control.seg1/2, it doesn't really change the value, only the label of it.
I need to input a variable value inside that min/max. Im trying to do it thru msg.control but here what happens:

To Reproduce
With the inside-node configuration all goes well:
image
this is what happens (and how i need it to be):
image

With msg.control.seg1 and msg.control.seg2:
image
here is the bug:
image

Great work by the way!!

Environment and versions

  • OS: windows 10
  • Microsoft Edge
  • Node-RED version: 1.1.3
  • Dashboard version: 2.24.2
  • ui-level version: 0.1.38

Peak Hold Numeric Value

The peak hold feature only works on the barograph itself, not on the numeric readout above the barograph display. It would be nice if there was an option to hold the numeric value for the specified time as well.

"TypeError: Cannot read property 'push' of undefined"

Describe the bug
When pressing "Deploy" in node red, "TypeError: Cannot read property 'push' of undefined" appears for all the contrib-ui-level nodes in the debug window

To Reproduce
Install new node-red system, install node-red-contrib-ui-level to the template, copy over the flow (via clipboard) from the old system, press "deploy"
There are no issues with any of the other nodes, pallete items and flows on the new system

Expected behavior
Normal Deploy, without the error, and the node showing up on the dashboard,

Screenshots
If applicable, add screenshots to help explain your problem.

Environment and versions (please complete the following information):

  • OS: 4.14.98-v7+ (Raspberry PI 3b+)
  • Browser Chrome
  • Node-RED version 0.20.5
  • Dashboard version 2.15.0
  • ui-level version 0.0.20

Additional context
Add any other context about the problem here
.
Dashboard has just released a new version, maybe this is where the problem lies... I did not use this version on the older system (Synology NAS) and did not have any problems there.

Dashboard tab change clears level bar

Describe the bug
If you change the dashboard tab the bar of the ui-level is empty, I think version 0.0.24 was OK?!

To Reproduce
Create a dashboard with 2 tabs with an ui-level node on each. Every time you change the tab the level bar is empty (text shows the correct value) until a new value is received...

Expected behavior
Bar is visible ;)

Screenshots

2019-09-19 19_25_08-Node-RED Dashboard

Environment and versions (please complete the following information):

  • OS: Windows
  • Browser: Firefox
  • Node-RED version 0.20.8
  • Dashboard version 2.16.3
  • ui-level version 0.1.3

Single Horizontal Layout like the Pair Horizontal Layout

I'd love to see the option for a Single Horizontal Layout that is like the upper half of a pair Horizontal Layout. In other words, the numeric legend below the bar graph, the label above and to the left, and the value above and to the right. Just like the top half of a pair layout.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.