✨ FlexDash alpha release - round 3

I look forward to the results 'cause that kind of CSS tweaking is outside of my skillset :laughing:

1 Like

I've certainly got to grips with CSS in more detail in the past 12m. I've really come to appreciate CSS variables and calculated values now. It let me build a CSS file that can automatically switch to light and dark based on your browser preference (or on some simple controls if you prefer).

1 Like

image

6 Likes

@smcgann99 Nice! are you sharing an example flow :wink:

2 Likes

@Paul-Reed Sure but its in need of some more work.

Shadows need to automatically adjust in size, (need to be computed) and at the moment colours have to be valid for Vue and "regular" CSS :wink:

[{"id":"9e00f73ed906e7a7","type":"inject","z":"b1fe02d0f08961f9","name":"","props":[{"p":"payload"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"0","payloadType":"num","x":715,"y":930,"wires":[["48feeb03597e2f0c"]]},{"id":"7ad6d551fcbeaf32","type":"inject","z":"b1fe02d0f08961f9","name":"","props":[{"p":"payload"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"1","payloadType":"num","x":715,"y":975,"wires":[["48feeb03597e2f0c"]]},{"id":"48feeb03597e2f0c","type":"flexdash custom","z":"b1fe02d0f08961f9","title":"LED","sfc_source":"<template>\r\n    <!-- For classes see the entire styles section of https://next.vuetifyjs.com/en/styles/border-radius/ -->\r\n    <div class=\"flex-grow-1 w-100 pa-2 d-flex flex-row align-center justify-space-around\">\r\n        <div>{{ label }}</div>\r\n        <div :class=\"`led bg-${color}`\" />\r\n    </div>\r\n</template>\r\n\r\n<style scoped>\r\n    div.led {\r\n        height: 80%;\r\n        aspect-ratio: 1;\r\n        width: min-content;\r\n        border-radius: 50%;\r\n        box-shadow: 0px 0px 15px 0px v-bind(color), rgba(0, 0, 0, 0.17) 0px -3px 2.5px 0px inset, rgba(0, 0, 0, 0.15) 0px -5px 4px 0px inset, rgba(0, 0, 0,\r\n                0.1) 0px -11px 5px 0px inset;\r\n    }\r\n</style>\r\n\r\n<script>\r\n    export default {\r\n    props: {\r\n        payload: { default: undefined }, // type is \"any\"\r\n        label: { default: \"state\", type: String }\r\n    },\r\n    computed: {\r\n        color() {\r\n            // use any material-design color: https://vuetifyjs.com/en/styles/colors/#material-colors\r\n            // (warning, it's link to the old docs 'cause that page is broken in the new ones...)\r\n            if (this.payload == 0) return \"green\"\r\n            else if (this.payload == null) return \"grey\" // null or undefined\r\n            else return \"red\"\r\n        }\r\n    }\r\n}\r\n</script>","fd_container":"","fd_cols":1,"fd_rows":1,"fd_array":false,"fd_array_max":10,"x":920,"y":960,"wires":[[]]}]
3 Likes

In a change of subject...
I switched to FlexDash recently and am impressed for the most part.
At this point the main thing I'm missing is a UI-Notification type of widget for FlexDash, like in the traditional dashboard.
Could anyone point me in the right direction to do something like this?

Basically I would like a widget that would popup in the lower right corner, and disappear after a few seconds. Also would be nice to have the option of having it pop up in the center with a OK button to close it.

A quick forum and google search brought me no results, or am I missing the obvious somewhere?

1 Like

Thanks for the feedback! I'm glad things are mostly working for you.
You didn't miss anything WRT pop-up, it's something that has been on my list but never got done. You can write one using a custom widget or using a pop-up grid, but it will be constrained to a specific tab, which is probably not what you're looking for. Let me see what I can do...

Someone asked via PM:

Do you plan to include a Sankey diagram node?

I'm unlikely to be able to write a sankey diagram node, but I'd be happy to help someone who wants to write one. I assume this would use D3? It's been a long time that I've used D3, but I can probably jog my memory... I could help, for example, getting D3 to work...

1 Like

Plotly includes Sankey-diagram, and in another thread we have the Plotly library working in flexdash.

Just a thought...

1 Like

Awesome!
The popup grid would likely do for my specific application, but yes a site-wide notification would come in real handy yet.

I built a popup grid, but I have not yet figured out how to make it pop up on an event, does the FD control node need to trigger it? Or is it simpler than that?

1 Like

Yep the FD ctrl node is needed to open/close the pop-up grid