Best way to disable UI when printer isn't ready

Development
1

I'm a battle hardened developer, but new to Bootstrap/ Knockout/Flask etc. I have a button that I want to disable when the printer isn't ready (i.e. no connection, or it's printing).

So far I've implemented a timer that checks every second to see if there's a connection and what status the printer is in and then update an observable depending on the result. The observable is bound to then update the disabled state of the button.

Is this the best way to do it, on a timer? Or should I be watching for some kind of events/hooks and then I can just update when the state changes?

2

Hmm... my solution would look like this:

  • Use printerStateViewModel in JavaScript-Part
  • Knockout subscription to printerstate-change
  • Do what ever I want after the state is changed

Some helpful documentation:
https://docs.octoprint.org/en/master/plugins/viewmodels.html#callbacks

   OCTOPRINT_VIEWMODELS.push({
        construct: DisplaylayerprogressViewModel,
        // ViewModels your plugin depends on, e.g. loginStateViewModel, settingsViewModel, ...
        dependencies: ["loginStateViewModel", "settingsViewModel", "temperatureViewModel", "filesViewModel", "printerStateViewModel"],

....

$(function () {
    function DisplaylayerprogressViewModel(parameters) {
        var PLUGIN_ID = "DisplayLayerProgress";
....		
	self.printerStateViewModel = parameters[4];
....
	
        self.onAllBound = function() {

            self.printerStateViewModel.stateString.subscribe(function(newValue){
                debugger
                if (newValue == "Operational"){console.info("O")}
                if (newValue == "Offline"){console.info("Off")}
                if (newValue == "Printing"){console.info("Print")}
                if (newValue == "Pausing"){console.info("Paus")}
            });

	}
3

I wondered whether there might be something to do with View Models :slight_smile: I'll dig in to that, thanks!

4

Here is a way I have done it in the Marlin EEPROM editor plugin - to check for a bunch of reasons the button could be disabled:

In the HTML, the binding looks like this:

5

Thanks both for your hints, that really helped.

1 Like