IDEAS: DASHBOARD BLOCK SUGGESTIONS Moderators: adafruit_support_bill, adafruit

[trackseven]

A Gauge that had safe, warning and danger zones. From Google charts

Google gauge.png

Yess please add these for computer monitoring projects

[trackseven]

How in this tutorial did they get these symbols

https://learn.adafruit.com/adafruit-io- ... ython-code

[trackseven]

I got the regular symbols for a project i just finished

https://io.adafruit.com/trackseven/dashboards/bmp388

[jwcooper]

How in this tutorial did they get these symbols

https://learn.adafruit.com/adafruit-io- ... ython-code

They are the "Icon" block types. You can find them when creating a new block for your dashboard.

[wsquared58]

This is more of an enhancement to the line chart block,

1) No matter what a point is set to, as far as scale (0psi - 10 psi), the X axis minimum and maximum represent 0% - 100% of the configured scale, so dissimilar points should show up even if they are completely dissimilar such as temperature and pressure. For example, BME280 Temp indicates 70F, I set scale to 40F min & 100F max and Barometric Pressure indicates 29.5"Hg (I've done unit conversions in the python code) and I set 27" Hg Min and 32"Hg Max and I put them on same line chart block they should both be visible. They are both inside of their respective min and max scales.

2) Clicking on the temperature line puts temperature X-axis in focus and presents those units. Clicking on pressure line changes focus and X-axis scale changes to pressure units.
Across the board no matter what the point is, as long as it falls within the bounds of its configured X min and X max, it should be visible, even if every point is a dissimilar sensor or unit of measure.

[namangarg]

hello guys,


ideas dashboard block suggestions are as follow

rules for better dashboard design. ...
Chose the right representation for the data. ...
Clear and consistent naming convention, Consistent date formatting, Truncate large values. ...
Define the layout. ...
Use building blocks with consistent structure. ...
Double your margins. ...
Don't hide information.

thanks and regards

[MathMiller]

It's better for sure

[wsquared58]

Can you create a visible high and low limit line on the trend block. Similar to high and low alerts that you can set on the gauge block.

[DevilWAH]

I would like the "text" block to be able to have some logic to it.

In my code I often use numerical values to hold things like "day of week" 1 = monday, 2 = tuesday etc

Now I could of course add a few lines in the code to convert back to the string value and send this but it would be nice if with in the text block I could say

if feed = 1 then display "Monday", if feed = 2 display "tuesday"

I can do this with triggers, but it will require an extra feed,

Capture.PNG (17.16 KiB) Viewed 1153 times

If not directly in the text Block, then to be able to create a "conversion" block that is hidden where you can create a simple logical process to take the current value in a feed and apply simple logic function to it.

Then any block can use the output of this as its input I know this is kind of like the method i used the triggers for, but with this idea it would not require another feed, it would just have a "current" value that is calculate when ever it is called but the "parent" block.

In this was you could create simple alarms, responses, etc and if the logic is just IF AND OR logic and allows any feed to be used as an input. IT would allow values in multiple feeds to be used.

[cstanke]

Service Block Idea:

"Get Dominant Image Color"

This could be a service block where the work happens on the server-side and the result is provided by the block. For instance, a program (Arduino or CircuitPython) could hand off an image URL to the service and the service will return a color (or a few color choices) in your choice of format (RGB, HSL, HEX, etc...).

It could work well for something like the PyPortal where you're showing an image on the TFT display and want the NeoPixel to shine in a dominant color from the image—such as with the NASA Image of the Day example.

There are several examples of getting dominant colors from images online. A couple of them are Vibrant.js and Color Thief.

The block could allow for some preference configs like "avoid all black or all white" or a palette choice (like with Vibrant.js). Or, as stated above, it could return a small selection of colors (Like the Vibrant.js example).

This is a good service block idea because the work of getting dominant colors from an image might be a little tough for an IoT device but should be easy work for a service.

[DevilWAH]

Service Block Idea:

"Get Dominant Image Color"

This could be a service block where the work happens on the server-side and the result is provided by the block. For instance, a program (Arduino or CircuitPython) could hand off an image URL to the service and the service will return a color (or a few color choices) in your choice of format (RGB, HSL, HEX, etc...).

It could work well for something like the PyPortal where you're showing an image on the TFT display and want the NeoPixel to shine in a dominant color from the image—such as with the NASA Image of the Day example.

There are several examples of getting dominant colors from images online. A couple of them are Vibrant.js and Color Thief.

The block could allow for some preference configs like "avoid all black or all white" or a palette choice (like with Vibrant.js). Or, as stated above, it could return a small selection of colors (Like the Vibrant.js example).

This is a good service block idea because the work of getting dominant colors from an image might be a little tough for an IoT device but should be easy work for a service.

How about the ability to create blocks where you can use simple Python code, take a feed value as an input argument and provide a single value output that can be represented on the dash board. So in this case you provide the code for the block that determines the dominant colour.

[fruity_pebbles]

Line chart with two independent Y axes. This is so you can do something like plot temperature and humidity on the same chart, with independent scaling of the two sets of values. For example, temperatures range 70-80 and humidity ranges 40-50; if you plot them on the same Y axis the two lines get squished, and you have a lot of empty space.

[clairefan]

5. Graphing compass

These one looks really cool!

[va3rom]

Can't figure out this blogging stuff so I hope this finds someone somewhere out there who can answer my question.

Trying to program Indicator block using the programming logic I learned 45 years ago.

I want to indicate out-of-bound status of values when < -20 OR > 20 but when I tried to do this with the IO Indicator block I had to write it as > -20 AND < 20. Could someone explain to me why the logical construct has to be reversed to work?

I've tried to attach screen captures but it's very confusing to me.


Thank you,
Robert

Indicator Logic Example 1.png (198.07 KiB) Viewed 985 times

Indicator Logic Example 2.png (198 KiB) Viewed 985 times

[DevilWAH]

[quote="va3rom"]Can't figure out this blogging stuff so I hope this finds someone somewhere out there who can answer my question.

Trying to program Indicator block using the programming logic I learned 45 years ago.

I want to indicate out-of-bound status of values when < -20 OR > 20 but when I tried to do this with the IO Indicator block I had to write it as > -20 AND < 20. Could someone explain to me why the logical construct has to be reversed to work?

I've tried to attach screen captures but it's very confusing to me.


Thank you,
Robert

this is because which way you have the colours selected.
If you have the top colour green and bottom Red then you have to do the logic one way, if you have the top picker red and bottom green you have the logic opposite

If you read what is says is states "if the logic matches it will display the "ON" colour, and if it does not it displays the "off Colour"

< -20 OR >20 is true any value that is not between -20 and +20 so for 10 it will show the "OFF" colour and for -30 or +30 it will show the "ON" colour

> -20 and < +20 is true for any value between -20 and +20. So for 10 it will now show "ON" colour and for -30 or +30 it will show the "OFF" colout

I noticed this, you just have to think which of the colour pickers is the "ON" colour and which is "OFF" in your example you logic is to pick the "OK" temp, not the out of bounds temp.