Configurable Main Menu ( /w source code )

theKM · 2 Oct 2021, 04:45

Note edit: If anyone wants to try it out, I put the DWC zip files build here...
https://github.com/abates-dentsu/DuetWebControl/tree/az_generatedUI_build/dist-packaged
...this is based on the latest beta version. I'd only recommend people try it if they've already successfully moved up to the latest core beta of DWC.

--

Other thread was going on about configurability, I latched onto the thought that given there's some handy plugins that can do what we want in the main panel, that the main menu is the part that would be nice to be able to configure in the settings json.

So for whatever it's worth, I wrote a thing, and have a PR for anyone running their own builds and wants to play with it:
https://github.com/Duet3D/DuetWebControl/pull/388

It's the main menu, so it can't be plugin'ified.

I tried to make sure it didn't get in the way of the DWC maintainers, while still getting the flexibility to people desiring to wrangle with the menu.

Maintainers can muse over it, people who have a build setup can merge and play with it in their own branch, whatever anyone wants. There's dev info in the PR, but I need to put in some more user docco somewhere.

.

In short, in dwc-settings.json add a mainMenuConfig: [] array/list config in the main block, which represents the list of things in the main menu, including groups of items or buttons or whatever. The internal/system page components now have keys that you can use to define where they go. For the stock menu, the configuration would look like...

 "mainMenuConfig": [
  {
    "name": "Control",
    "icon": "mdi-tune",
    "caption": "menu.control.caption",
    "pages": [
      "control-dashboard",
      "control-console"
    ]
  },
  {
    "name": "Job",
    "icon": "mdi-printer",
    "caption": "menu.job.caption",
    "pages": [
      "job-status",
      "job-webcam"
    ]
  },
  {
    "name": "Files",
    "icon": "mdi-sd",
    "caption": "menu.files.caption",
    "pages": [
      "files-jobs",
      "files-macros",
      "files-filaments",
      "files-system"
    ]
  },
  {
    "name": "Plugins",
    "icon": "mdi-puzzle",
    "caption": "menu.plugins.caption",
    "pages": []
  },
  {
    "name": "Settings",
    "icon": "mdi-wrench",
    "caption": "menu.settings.caption",
    "pages": [
      "settings-general",
      "settings-machine"
    ]
  }
]

...this sets up the groups to work as they did, allowing plugins to register themselves as they always have.

But you can see how the string key placeholders for the stock components are working, and how the main components will set themselves into the menu. Here's an example of flattening out the menu with some select components to have just the list of items without the groups.

 "mainMenuConfig": [
      "control-dashboard",
      "control-console",
      "/MoveItMoveIt",
      "job-status",
      "files-jobs",
      "files-macros",
      "files-system",
      "settings-general",
      "settings-machine"
]

...the "/MoveItMoveIt" in the list is my own plugin's path, showing how to add a plugin to the list that you may have installed. So you can set what you want, in the order you want, etc etc.

Maybe I wanted to rename the dashboard item, you could define all the things about it including the icon....

 "mainMenuConfig": [
      { "caption": "Extra Dashboard!", "icon": "mdi-wrench", "path": "/", "button": true },
      "control-console",
      "/MoveItMoveIt",
      "job-status",
      "files-jobs",
      "files-macros",
      "files-system",
      "settings-general",
      "settings-machine"
]

...how about a submenu that actually works like a super handy macro panel (buttons can run gcode as well as route to pages)...

 "mainMenuConfig": [
      { "caption": "Extra Dashboard!", "icon": "mdi-wrench", "path": "/", "button": true },
      "control-console",
      "/MoveItMoveIt",
      "job-status",
      "files-jobs",
      "files-macros",
      "files-system",
      {
          "icon": "mdi-wrench",
          "caption": "Super Handy Macros",
          "pages": [
               { "caption": "Home IT!!", "icon": "mdi-cog", "gcode": "G28", "button": true },
               { "caption": "Home Sweet Home", "icon": "mdi-wrench", "path": "G28", "button": true }
          ]
        },
      "settings-general",
      "settings-machine"
]

.
Anyways, have a play with it if ya have the urge. I did accidentally fork with the account I use for work and couldn't be bothered moving it, so please no naughty review comment language

.

abates-dentsu opened this pull request 2 Oct 2021, 04:12 in Duet3D/DuetWebControl

closed Configurable main menu #388

theKM · 4 Oct 2021, 03:45

Wasn't totally happy with where some of the logic was sitting, so moved it own to its own vuex store file so it was less intrusive on the original routes/index.js and store/settings.js files... this did also mean that it got its own menu config file in dwc-mainMenu.json file, which is optional (just keeps using the internal default if not found). Changed pushed, fwiw.

theKM · 6 Oct 2021, 19:51

Thinking that people might like the current groups, just want the system to keep managing the default groups the way it always has... so this would be a way to set a menu to keep the default groups, but just put a plugin on top of the whole stack so it's more handy

 { "mainMenu": [
      "/BtnCmd",
      "default-control-group",
      "default-job-group",
      "default-files-group",
      "default-plugins-group",
      "default-settings-group"
    ]
}

...that way after system updates, anyone who's configured a menu this way doesn't have to guess about what the new menu might contain.

Have pushed this to the PR mentioned earlier.

For what it's worth (not much ).

theKM · 7 Oct 2021, 16:04

If anyone wants to try it out, I put the DWC zip files build here...

https://github.com/abates-dentsu/DuetWebControl/tree/az_generatedUI_build/dist-packaged

...note that this is based on the latest beta version. I'd only recommend people try it if they've already successfully moved up to the latest core beta of DWC.

T3P3Tony · 7 Oct 2021, 17:00

@thekm thanks for contributing this. In general increased configurability of DWC is something to balance against increased support, testing and maintenance costs so we will look at the concept as the DWC design progresses. I just replying at this point so you know its not just being ignored!

theKM · 7 Oct 2021, 17:35

@t3p3tony , no worries! Not even a problem. I used to be a maintainer over on Apache/Jakarta stuff, totally get it.

My other branch has the menu generating whole pages/routes to make control panels, and that's much less likely to be merged

Forks are part of the coolness of open source. The Ooznest CNC version is what convinced me to take the leap on something not a printer, and now I don't think I'd like it any other way... and now it's part of the core, sweetness.