Loading a custom window before OctoPrint main User Interface

Development
1

Hello,
I wanted to add a custom window to the OctoPrint, which would let me choose the type of head i want and based on that configure the appearance of Octoprint

I added following files

student.html

<div class="dropdown">
          <button onclick="myFunction()" class="dropbtn">Dropdown</button>
          <div id="myDropdown" class="dropdown-content">
            <a href="/index">Plastic</a>
            <a href="/Syringe">Syringe</a>
            <a href="/Ceramic">Ceramic</a>
          </div>
</div>

and inside the view.py file

@app.route("/")
def Extruder():
	print ('inside extruder')
	extruders= ['Plastic', 'Syringe', 'Ceramic']
	return render_template('student.html', extruders=extruders)

and changed the @app.route of index function to @app.route("/index")

@app.route("/index")
def index():
	# rest of the code (not modified)

So the idea is, after going to http://localhost:5000, it would show this page

1
1.PNG630×624 7.47 KB

which would let me choose various heads

2
2.PNG566×605 9.09 KB

My idea is to set a value for each extruder and in the index function check this value and disable some features of OctoPrint. For eg: Ceramic head doesn't require Temperature TAB

After selecting the head, In above code, upon clicking Plastic, it should call index function and load User interface (Only plastic is configured now), instead I'm getting this

3
3.PNG1425×702 42.6 KB

Any help regarding how i could allow the user choose the option without losing server connection will be helpful. Thanks in advance.

2

@Athul I think your current approach is not a good way. You should use the octoprint plugin-apis and also the html-templates (<plugin_identifier>_settings.jinja2).

Anyway.....on which event you want to show your form for selecting the head?
I see two events: Browser is (initialy) opened or if a user is clicking on print-button.
Or you just use the standard plugin-settings-dialog....why is this not an option for you?

For the first option, my solution would look like this:

  • On the server side I capture the event: ClientOpened
  • then I send a message to the browser
  • the javescript-event-hook opens a modal dialog to show your "head-option"
def on_event(self, event, payload):
  if (Events.CLIENT_OPENED == event):
    self._plugin_manager.send_plugin_message(self._identifier, dict(action="openDlg"))                 
                  ... do other stuff ...

JavaScript
self.onDataUpdaterPluginMessage = function (plugin, data) {... open dialog ...}

The second option is to "hijack" the print-button-event-listener to prevent the print executing and to display also a dialog for selecting the "head-option"

My latest plugin AutostartPrint use the first approach. After the server detects a printer-connection a message is send to the browser to show a countdown dialog.

If you want to know how to hijack the print button, you can look into my knowledge-base wiki:

Hope thats helps
C ya,
Olli

1 Like
3

What you are trying to do would be best served utilizing the UiPlugin mixin implementation. This would allow you to basically create your own view models and redirect to different pages/templates based on conditions. I believe this is how the Force Login plugin works and is what displays the login page instead of the full interface.

4

@OllisGit @jneilliii
Thanks for the replies
What I want to implement is, when octoprint starts it should show an option to select the Extruder Head options and configure the octoprint UI according to that

Is it possible to do by developing a plugin, without modifying the core code?

5

It is possible to achieve this as a plugin.

6

It is always a good idea to use the rich set of the plugin-apis, instead of modifying the core code. Because the core-code would be changed in the future. APIs should be stable.

You should start evaluating plugins that already includes some feature you want to implement. E.g. PopUp-Dialog on startup/opening the OctoprintServer-Page.
Or (as you mentioned) you want to change the UI...what kind of "change" do you want to do? Maybe a new Tab on the main-page is enough.

Overall, I agree that everything could be done in a plugin instead of modifying the core-code.

7

As I say to my potential clients: I can literally do anything you want, the only thing that matters is will the cost outweigh the perceived problem?