FlowFuse / flowfuse

Connect, collect, transform, visualise, and interact with your Industrial Data in a single platform. Use FlowFuse to manage, scale and secure your Node-RED solutions.
https://flowfuse.com
Other
274 stars 63 forks source link

UI Design: Editor not available states #3659

Closed joepavitt closed 2 months ago

joepavitt commented 7 months ago

Related Issue

3655

Description

Need to fill this red space when the Editor is not available. See #3655 for the various reasons the Editor may not yet be accessible.

image

Considerations:

Inspirations:

joepavitt commented 7 months ago

Pulsation through grid. Not a fan of this, but was my first thought, so sharing at least.

Screenshot 2024-03-28 at 14 02 33
joepavitt commented 7 months ago

Embedded window animation style:

Screenshot 2024-03-28 at 14 26 58

Available in Figma here

Yndira-E commented 6 months ago

So these are all possible states:

In general, the text highlighting the state would be part of the composition.

Idea 1 Regarding this option, I saw your comment about making the small window different for each state, but I think it might be too detailed for that size? Maybe not obvious enough? Also, the FlowFuse flow from our icon in the background... I don't like when it doesn't have the full square because it seems cut off for no reason... But surely we can find a workaround for that.

Idea 2 For "starting" and "installing," I'm thinking some ghost state of the UI could do the trick, not just a small window but using the space of the actual UI, something like:

Image

With changing opacity in a loop until it's fully loaded. Kind of like: https://lottiefiles.com/animations/skeleton-frame-loading-JVx9aHWX5B?from=search

For the other three, what's the difference between "suspended," "error," and "crashed"?

It wouldn't make sense to have the ghost UI since it simply won't ever show up, right? What would be the next possible step that the user should take for a "suspended," "crash," or "error" state? Just thinking if there's a button or CTA that needs to be added.

Idea 3 On the other hand, the idea you suggested of the flow being built could work too, something like this one: https://lottiefiles.com/animations/loading-animation-j7BG8cPg6H?from=search for "starting" and "installing." For the other states, the flow can't be built, the loop starts building the node but when it tries to connect/create a new one, a red X or a ! would appear.

WDYT?

joepavitt commented 6 months ago

On the other hand, the idea you suggested of the flow being built could work too, something like this one: https://lottiefiles.com/animations/loading-animation-j7BG8cPg6H?from=search for "starting" and "installing.

This is what I had in mind. Using the "ghost" state as the building block. With installing, it's animating nodes being added to the left-side palette. For "Starting", it's adding nodes to the flow editor

"suspended," "error," and "crashed"

Suspended: The user has explicitly chosen to pause operation of the Instance Error/Crashed: I'm not sure on the difference here either, and we have no docs on the matter, @knolleary can you clarify please?

joepavitt commented 6 months ago

@Yndira-E fyi - different states are now documented here: https://flowfuse.com/docs/contribute/workflows/project-states/

Yndira-E commented 6 months ago

@joepavitt could we have a quick call tomorrow? I have a couple of questions and it would be quicker on a call.

joepavitt commented 6 months ago

Small, first iteration, let's group some states together:

hardillb commented 6 months ago

@joepavitt I would remove access to the editor as soon as the suspend action is triggered.

Suspend is going to try and stop the Node-RED process straight away, it will wait for up to 10 seconds, but the editor should be considered disconnected straight away

joepavitt commented 6 months ago

Thanks Ben - in that case, we need a "Suspending" state too please @Yndira-E

Yndira-E commented 5 months ago

@joepavitt first iteration here.

I've used bodymovin because they don't 'force' me to upload it anywhere and lottie does. I've created that folder and if you open the live view of that HTML, you'll be able to see all the states. Here are the steps I followed.

Note: the suspending loop needs to be in reverse, hence the line animation1.setDirection(-1);

joepavitt commented 5 months ago

Lottie doesn't force you to upload anything?

Yndira-E commented 5 months ago

LottieFiles does

Image

A "workspace" is like a folder on their platform.

Image

The result is basically the same, I just get to skip that part using a different plugin.

And, if you prefer linking the animations from that platform, you can upload the JSON files to a workspace of your choice. I just don't like depending on a third-party platform.

joepavitt commented 5 months ago

Ah, that's a new business model since I last used it. Thanks for sharing. We'll use local files anyway, so other plugin is fine!

joepavitt commented 5 months ago

They do feel a little cartoonish for FF, but as first iteration they'll be okay.

Loading/Suspending: I think the links are the reason they look a little cartoonish. Is it possible to make the links look a little more Node-RED in their appearance? Thicker slightly for sure, but the actual shape of the links are too circular.

Crashed: It took a few watched to realise what the cracks were. Might be worth adding a darker red tone into the crack to give it shadow/depth?

Suspended: The indigo doesn't fit here, should be from the Blue palette, and the pause icon can be a little smaller.

Yndira-E commented 5 months ago

Hi @joepavitt I've just updated the files following your suggestions 😉

joepavitt commented 2 months ago

Can close this out as the design work is done