System Command Editor plugin not working

Plugins
1

Running a Pi3B OctoPi .14 OctoPrint 1.3.6

It shows up under the Plugins section of the OctoPrint settings.
Upon selecting it, it shows the title "System Commands Editor" at the top of the panel and then the rest of the panel is blank.

I tried it on a Mac with Safari, FireFox, and Chrome. The latter two showed the control box but clicking on it did nothing.

I see that this problem has been around for a couple of years in the GitHub docs.

Does that plug-in work for anyone?

2

Check out the homepage-


but realize that most of it is RIGHT click in the examples.

You have to right click on the green box.

3

You don’t have a right click button on a Mac.

4

Macs have supported a right click for many years. The few who have that disabled should know that ctrl-click is the same as right click.

On my touchpad a two finger click is a right click. Or a ctrl-one finger click.

6

I'm also seeing this on a freshly-installed Systems Command Editor plugin.

  • No content whatsoever is displayed below the title
  • There actually is HTML content, as seen in the Safari Developer's dialog area
  • Temporarily turning off the Themeify plugin with the Discorded theme doesn't fix this
  • If I were to guess, I'd say that the dropdown-menu class is messed up.

By renaming each reference to this class (prepending it with an extra letter "d"), I was able to reveal the underlying (badly-styled) HTML elements:

48%20AM
Screen Shot 2018-09-28 at 10.51.48 AM.png1033×571 71.8 KB

Having just edited things back to normal, it now actually displays that single green input box. I think this is the author's actual attempt at an interface. Presumably, he expects you to right-mouse click the green rectangle which presents options "Create Command" and "Create Divider". Selecting the first then displays a new dialog box. I assume that things get smoother, having created the first one.

See the outstanding issue here on the github.

7

Quick-and-dirty workaround:

  1. Install Themeify and either enable the Discorded theme or not
  2. Add the following to adjust the style for this area:
Selector:  div#settings_plugin_systemcommandeditor
CSS-Rule:  min-height
Value:     600px

I've just worked on a fork & pull request to help the plugin author on this.

  • Adjusted style of the outer-most DIV tag to have a minimum height, required when you're under the control of OctoPrint's scrollable class.
  • Added a stylesheet to your project.
  • Added placeholder text for your input tags so that people can more easily determine what each does.
  • Added a title attribute to the green rectangle UL element so that people know to right-mouse click it.
  • Added a p element to further make this known to your users how this works.
8

Issue closed in latest version.

I've tested with Safari 12.0 and it appears to look good.