Custom HTML link in system menu?

Get Help
1

Is it possible to create a custom link in the system menu and not just a system command?

I followed this guide Setting up OctoPrint on a Raspberry Pi running Raspbian for setting up a webcam and now I have "Start video stream" and "Stop video stream" buttons in the system menu. I'd like to add a third link "Configure video stream" so that it would open a new tab to http://pi/?action=configure

Is that possible? Perhaps it's possible to create an all new button alongside the system menu just with webcam start/stop commands and a config link?

Thanks

2

You can add commands to the System pull-down menu in OctoPrint as described here.

3

Right, but is there a way to add a web link instead of a shell command?

4

Sorry, I must have misunderstood earlier.

Hm... I think I would install Themeify, find out using the Developer's Console in your browser what the CSS selector would be for the pull-down menu and then to use CSS trickery to insert a link there.

The other route would be to create a plugin which injects the link in that menu by merely having a CSS stylesheet which does this or JavaScript.

5

Well, you can't use CSS to add HTML content, so that's a no go and creating a plugin seems absurdly overkill to just add a single link.

I'm guessing it's not possible right now, hopefully one day custom user created menus could become a thing.

6

I wouldn't have guessed it myself until seeing the technique but it's totally possible. But it's very hacky.

7

It's not hacky, it's used for a variety of different use cases - web icon fonts are a prime example and it's used in Octoprint for the fontawesome icons. However, you cannot create new HTML tags in the content CSS property as described in the CSS spec https://www.w3.org/TR/CSS21/generate.html#propdef-content

Generated content does not alter the document tree. In particular, it is not fed back to the document language processor (e.g., for reparsing).

It is possible to create a link in the content property like so

.item {
   content: ' ' attr(data-href);
}

However it can only access the parent elements attributes, and you cannot change them with CSS.

Anyway, hopefully a simple feature like custom menus will get included eventually.