UX: compact control panel menu

[jarrettv]

I propose a more compact control panel menu so there is less scrolling for content:

BEFORE

AFTER

Mobile view:

This is an early mockup to get some feedback.

[ahochsteger]

@jarrettv looks really good - I like it :-)

[robertsLando]

I like it @jarrettv ! But where are the zwaveHex id lib version etc? Them should be showed somewhere

[jarrettv]

i was hoping we could relocate to sidebar or settings screen

[starman2k01]

Sorry for newb question but how do I access the control panel? Documents don't point this out...

[robertsLando]

@jarrettv Controller status must be there IMO, the others could be shown in an info popup/menu, colud also be on topbar, like an info icon that on hover shows those informations

[jarrettv]

Like this?

[robertsLando]

@jarrettv yep that's good! Only the controller status btw needs to be placed somewhere, I would leave it there for now

[jarrettv]

The table was rather complicated and is not mobile friendly so I'm experimenting with a grid layout:

Mobile

[robertsLando]

I like it but where do you show nodes values etc? Everything that was on the expansion panel

[robertsLando]

I also like where you placed the controller status, I think that's the best place for that as it will be visible ion all panels

[jarrettv]

node values would go inside a dialog or slide out panel

[jarrettv]

      switch(node.status) {
        case 'Awake':
        case 'Alive': 
          return node.interviewStage === 'RestartFromCache' ? 'orange' : 'green'
        case 'Dead': 
          return 'red'
        case 'Asleep':
          return 'blue'
        default:
          return 'gray'
      }
    },
    getNodeIcon(node) {
      switch(node.interviewStage) {
        case 'None': 
          return 'remove_circle_outline'
        case 'RestartFromCache': 
          return node.status === 'Dead' ? 'dangerous' : 'history'
        case 'Complete': 
          return node.status === 'Asleep' ? 'nightlight_round' : 'check_circle_outline'
        case 'ProtocolInfo':
        case 'NodeInfo':
        case 'CommandClasses':
        case 'Neighbors':
          return 'arrow_circle_down'
        default:
          return node.status === 'Unknown' ? 'help_outline' : 'error_outline'
      }
    },```

[robertsLando]

@ahochsteger Thoughts?

[jarrettv]

Goal: remove broadcast question and remove node selection. Have a top level menu that affects all nodes and have an individual node menu that targets a specific node. For example:

Controller advanced (top level):

• Heal network
• Hard reset
• Refresh all node values (broadcast)
• Re-interview all nodes (broadcast)
• Check for failed nodes (broadcast)
• Remove all failed nodes (broadcast)
• Remove all associations (broadcast)

Node advanced (target individual node)

• Refresh node values
• Re-interview
• Heal
• Replace failed
• Remove failed
• Firmware update
• Remove all associations

[jarrettv]

[jarrettv]

i've got most of this working on my branch although I am having an issue with Import/Export

[robertsLando]

I really like it! I need to know where all the other stuff is gone. I would also know @ahochsteger opinion as he is working on the nodes table too

[ahochsteger]

I really like it! I need to know where all the other stuff is gone. I would also know @ahochsteger opinion as he is working on the nodes table too

Me too - see #524 (comment) for further comments.

[jarrettv]

New node dialog

[robertsLando]

That's awesome 😍

[AlCalzone]

The info text for re-interview should be reworked IMO. It should make very clear that all currently known information about the node is reset and re-queried

[JonLaliberte]

Love the ideas here. Especially moving node details to a separate view (so not a part of the main list). Right now on mobile it's frustrating figuring out what you're looking at since the node details spill off the screen and it's easy to end up looking at the wrong node.

[robertsLando]

@JonLaliberte I liked the idea too. @jarrettv started with an implementation but unfortunately never finished it and now that should be rewritten almost all from scratch giving that most source code is changed

[JonLaliberte]

Yeah, this is a tough project since it's not as usually lived in (a UI/UX used daily). I don't have the skills to help here unfortunately, but I hope someone is able to pick this up at some point. Thanks to everyone involved!

[robertsLando]

Finally found some time to look at this, check #2971

[mckochan]

Thanks to all! This makes inclusion on mobile much easier

[robertsLando]

Mine looks a little bit different then #2971

Yeah because that wasn't the last style, I made that video some commit before merging. All icons looks good to me, the only thing I see there is that you don't have any node name in the controller node so the space isn't filled very well in vertical alignment

Instead of the big status icon (move/make smaller) and FW version (remove), I would put Manufacturer and product. Long term goal for this could be to import the product image from your device database like zigbee2mqtt does.

ATM I thought about using product image but that would require an internet connection and also wouldn't be always available, also manufacturer and other infos are already available in the tooltip and sometimes them could be very long (too long to diplay them in that little space

[JonLaliberte]

I’m a big fan of the update.

I agree with @mckochan here:

To use the horizontal space, either expand the tile to fit the width of the screen or keep square and allow 2 rows of tiles.

[robertsLando]

Done

[JonLaliberte]

Awesome!

[robertsLando]

To test it just use master tag, giving that I just release a new minor I will keep this for next release in few days