Proper way to add new controls to Control Tab

Development
1

I am wondering if I am doing the right thing here. I added some new controls to the Control Tab using something like below because I wanted them to show up below the standard jag panel:

    $("#control-jog-custom").after("\
	<div id=\"my controls\" class=\"jog-panel\">\
	<h1>My Controls</h1><p>\
	<p>\
	</div>\
    ");

I have seen other plugins using getAdditionalControls() but that seems to be limited to adding printer command buttons. My plugin requires more control than that. Is my approach OK/valid? i.e. won't break anything? It seems to be working properly for what I am trying to do (at least with the virtual printer).

Thanks,
Dave

2

Nope :slight_smile: You can also have it trigger arbitrary javascript code on button click via the javascript property on a control. To quote the docs:

javascript

(Optional) A JavaScript snippet to be executed when the button rendered for command or commands is clicked. This allows to override the direct sending of the command or commands to the printer with more sophisticated behaviour. The JavaScript snippet is eval’d and processed in a context where the control it is part of is provided as local variable data and the ControlViewModel is available as self.

I have to admit though that I haven't used this myself in ages and it is a bit more limiting still than your approach. If it is unsuited for your task at hand, your approach is ok. It could break if something changes on the Control tab, but as long as you stay up to date with current development, that shouldn't be too hard to detect if push comes to shove.

3

Since the docs didn't really document a javascript example, here is a quick one showing how it would work with getAdditionalControls callback in your viewmodel js file. This will simply add a button to the controls tab that when you click it will log to the browser console the controlViewModel (the self part in docs) and send an M117 command of the name of the button that you pressed (the data part in docs).

self.getAdditionalControls = function() {
	return [{type: "javascript", javascript: "console.log(self);OctoPrint.control.sendGcode('M117 ' + data.name);", name: "Javascript Test"}];
	};

I just recently had a request for one of my plugins that required me to implement this method to prevent the necessity to reload OctoPrint/Browser cache in order for the settings being saved to be linked to the custom control buttons.

In order to do that you just have to walk up the controlViewModel object for example using self.settings.settings.plugins.<pluginidentifier>.<setting_to_get>() will reference the specific setting.