Add buttons to control tab

Get Help Electronics
1

I got a led strip, which I connected to my OctoPrint RaspberryPi and started writing this plugin for it, so if I connect to the webinterface or start a print, it will turn the led strip on, and when the print is done, it will turn the leds off again.

Now I want to put on/off buttons on the control tab, but I have no clue, how to put them there (I have a generic template, but the buttons are now at the bottom of the page). And even if I knew how to get the buttons at the right position, I still wouldn't know how to make them work.
So how does that work?

2

The easiest solution is using the additional controls callback. An example can be seen in my BLTouch plugin here.

5

You could probably go simpler and not use the javascript type on the children.

self.getAdditionalControls = function() {
        return [
        {name: 'Light', type: 'section', layout: 'vertical', children: [
          {command: 'M117 On', name: 'On'},
          {command: 'M117 Off', name: 'Off'}
        ]}
        ];
        }
6

Just submitted a merge request to your gitlab repo that appears to work out the issue...

1 Like
7

So that's working, but I actually want it next to the other controls, like in the MultiCam Plugin. He is not using get additional controls. He is doing something with templates for that.

And then, now it is only sending gcode commands, can I somehow call a python script to turn on the lights, or invent gcode, which I then can parse to turn on the lights?

And for the slider, I think that's a good Idea, but if you have the slider you don't really need the off button anymore because it just is brightness 0. And it would be cool if you wouldn't even need a set button, so it is just updating, when the value of the slider changes.

8

So in order to send commands to the python side, you'd have to re-program it entirely. Like you mentioned, injecting buttons into other templates javacsript side, and then your click event bindings on those buttons would make api calls to the back-end to run python code, etc. It gets extremely cumbersome and time consuming working all that out, but an example of making calls to the server side python code can be seen in my Tasmota plugin. It sends instruction to the python side to turn a tasmota device on or off.

9

So no I created the api in the init.py and wrote this fuction:

    self.send = function(brightness) {
        $.ajax({
            url: API_BASEURL + 'plugin/ledstrip',
            type: 'POST',
            dataType: 'json',
            data: Json.stringify({
                command: 'set_led',
                brightness: brightness
            }),
            content_type:'application/json; charset=UTF-8'
        });
    };

How can now call it instead of sending that gcode?

10

Wouldn't you want horizontal on that?

11

Doesn't look like you updated the gitlab repo with your latest changes so it's hard to say, but if you have that in your js viewmodel now you can use a button with a data-bind attribute set to click: send. That button is either using the getAdditionalControls method using the javascript type like before the changes I submitted or injected using jQuery.append as is done in the MultiCam plugin here. If using the later approach you'll have to also include a jinja template for your buttons like this.

12

You want it however you want the layout to be, it's not my plugin...but is slowly becoming mine. Maybe @ulPa will break down and just hire me to do this plugin for him...

13

:laugh: We should all break down and hire you to code our plugins for us.

14

So I updated the code and submitted a merge request to your gitlab repo. The plugin now will use the getAdditionalControls method for adding the buttons like before but utilize an @command for the instruction to the printer instead of just an M117. This allows for utilizing the atcommand @ledstrip to trigger the commands on the python side and keeps the nice functionality of the custom controls. You'll see I'm taking the parameters for that command and splitting them to get each word being sent with the command. So #ledstrip On 255 will then run your dutycycle command you had in the onclientconnected event handler where 255 is used for the brightness paraeter to fakepi.

I hope this helps, tips accepted via PayPal at this link.

https://paypal.me/jneilliii

15

So it is now working, but I still want to have it next to the other buttons, not under them. I think you need to change the type: 'section' to something else, but I don't know to what.

16

That's just how custom controls work. In order to place them anywhere else will require some jquery dom manipulation. I'll test that out tonight.

17

the multicam plugin does that

18

Yes, as I stated before muticam plugin is doing it that way. Will have to get a handle on the added buttons and then move them. How about you make a screenshot, showing where and how you want those buttons to look.

19

octoprint-screenshot
octoprint-screenshot792×300 16.5 KB

There next to the webcams section.

20

Ok, so 3 buttons in a vertical section, injected after the General commands. I'll see what I can do. Not sure how well they all will play together because of space, but it looks like you might be using Themify and making the UI wider already.

21

Just did a quick test and it looks like adding the function below to your js file will allow those custom controls to move up. Not sure how this will interact with multicam since I don't have it, but hopefully this is acceptable.

image

        self.onAllBound = function(){
            $('#control-jog-custom').addClass('jog-panel').css('clear','');
        }