How to pass http request response to plugin tab

Plugins
1

I am trying to make my first plugin. Functionality would be couple of button sending http request to server and on the opposite, couple of labels, showing text from responses of http requests. The first part I did, it is working just fine. But I have no idea, how to show on the plugin tab the result of the request.

In my ViewModel I have defined these functions:

function EnclosureHTTPViewModel(parameters) {
  var self = this;
    self.lightOn = function () {
        $.get('http://192.168.2.170/arduino?led1=1', function (data, status) {
            //response not important
        });
    };
    self.lightOff = function () {
        $.get('http://192.168.2.170/arduino?led1=0', function (data, status) {
          //response not important
        });
    };
    self.getServerResponse = function () {
        $.get('http://192.168.2.170/arduino?led1=1', function (data, status) {
          //how to pass this data response back to tab template????
        });
    };
}

My tab form contains:

<div>
    <button data-bind="click: $root.lightOn" class="btn">Light ON</button>
</div>
<div>
    <button data-bind="click: $root.lightOff" class="btn">Light OFF</button>
</div>

I tried 20 examples and functions from web, nothing worked at all (usually it just wrote the text of function to the web page). Could somebody advice, how to finish the js function and what to insert in tab to show the data response? The response will be just a single text word in body. Not planing any fast refresh.
Thank you very much for your help.
Milos

2

You might try changing self.lightOn = function () { to lightOn = function () {, for example, and then also... data-bind="click: $root.lightOn" with data-bind="click: lightOn". See if that works for the light-on button.

3

Hi, thank you. I did not write very clear, but to commands for light on and off works correctly. What I can not solve is the third function, to get a response from the page and show it on the plugin tab. I solved it now by including a iframe with the requested page, so I can see the result. So solution for time being, but not nice one. No script in the js file needed for this solution.

<iframe src="http://192.168.2.170/arduino?temp=1" id="tempframe" style="width: 70px; height: 40px; border: 0px solid #FFFFFF">

4

Add a knockout observable to store the response.

self.response_text = ko.observable();

Then in the get add a done callback and set the value of the observable.

Then in your jinja template add a div data bound to that observable.

<div class="row-fluid" data-bind="text: response_text"></div>
2 Likes
5

Thank you very much. Now I understand how the values are passed to templates. However the get function unfortunately did not return anything. Not just in data parametr, but the function in done is never called :frowning:
Is there any other way, then get?

6

The get is just a shortcut to a jquery ajax request. You may want to look into the developer console and see if it's actually making the call on the network tab.

7

The call to the remote server was done, that I can see on the webserver log, it just does not call the feedback function when recevied the response from server (if it received the response from server).
If I understand it correctly, this HTTP requests are asynchronous. So maybe the response comes a bit later and the script is in between terminated, is that possbile?

8 
$.get('http://192.168.2.170/arduino?led1=1')
    .done(function(data){
        self.response_text(data);
    }
);

All that function(data){...} part is a callback function which happens after get() has returned, in theory anyway.

9

Yes, the callback function should be called, but it is not. If I put the request to browser, I get simple OK plain text reponse:

image
image.png724×215 11.4 KB

I tried to place alert box call to the callback function, it never appears. If I place alert box to the script itself, it is shown, but closed in a less then a second.
From this my idea comes, that baybe it octoprint runs the script and terminates it before any callback can be activated.

10

I tried also call for a sync request:
self.getServerResponse = function () {
self.response_text($.ajax({
type: "GET",
url: 'http://192.168.2.170/arduino?led1=1',
cache: false,
async: false
}).responseText);
};

Again, it is sent correctly to server, but no response received :frowning: