Override Timelapse Preview dialog & timelapse.js file using plugin

mikesalvia · August 17, 2022, 9:12pm

Hello all,

I am currently writing a plugin to integrate OctoPrint with JW Player & JW Dashboard.

I have modified:
src/octoprint/templates/dialogs/timelapse.jinja2
src/octoprint/static/js/app/viewmodels/timelapse.js
src/octoprint/templates/javascripts.jinja2

These changes work locally to support using JW Player in OctoPrint. I wanted to know if there was a way to override these files using my plugin. I looked at get_template_configs but nothing there worked.

Any insight would be helpful.

Thanks in advance,

Mike

jneilliii · August 17, 2022, 11:56pm

I've done this similarly with PlotlyTempGraph plugin. You have to basically use the "replaces" option with get_template_configs.

github.com

jneilliii/OctoPrint-PlotlyTempGraph/blob/b2f4a3edc505b3b205cc8a3b78ded510a27dd6e4/octoprint_plotlytempgraph/init.py#L48


      
          
          
	def get_assets(self):
          		return dict(
          			css=["css/spectrum.css", "css/PlotlyTempGraph.css"],
          			js=["js/spectrum.js", "js/ko.colorpicker.js", "js/plotly-latest.min.js", "js/plotlytempgraph.js"]
          		)
          
          
	def get_template_configs(self):
          		return [
          			dict(type="tab", name="Temperature", template="plotlytempgraph_tab.jinja2", replaces="temperature"),
          			dict(type="settings", template="plotlytempgraph_settings.jinja2", replaces="temperature",
          				 custom_bindings=False),
          			dict(type="generic", template="plotlytempgraph.jinja2")
          		]
          
          
	##~~ Softwareupdate hook
          
          
	def get_update_information(self):
          		return dict(
          			plotlytempgraph=dict(
          				displayName="Plotly Temp Graph",

mikesalvia · August 18, 2022, 12:26am

Thanks much! I will try do I just use settings for dialog? Is there a type dialog?

jneilliii · August 18, 2022, 12:32am

I think that's what the generic type is for.

EDIT: After looking at the docs, I don't think generic will do it as a replacement, but will allow you to include your own. You may have to modify the template accordingly for different include pathing.

mikesalvia · August 18, 2022, 12:42am

Thanks! I will try it out and see what I get for results!

mikesalvia · August 18, 2022, 4:00am

@jneilliii,

Thanks for the direction!

I was able to get the jinja2 files to be replaced but now I am left with the Timelapse tab empty. I would need to also override the js/timelapse.js how would I do that?

I tried:

def get_assets(self):
        return dict(
            js=["js/timelapse.js"]
        )

And copied the timelapse.js with the same path to my plugin.

This is what my screen is looking like now. I read that when you override core components the plugin is required to maintain functionality. So I assume there is more I will need to copy from OctoPrint into my plugin and setup.

Cheers,

Mike

jneilliii · August 18, 2022, 4:59am

Yeah, you basically have to re-create all the same files and functionality that are available in the original view model. Another example I thought of that uses replaces is GitHub - cp2004/OctoPrint-VirtualPrinterSettings: Add configurable settings to the virtual printer in OctoPrint. Not sure if it will help in understanding it a little more. I know personally with PlotlyTempGraph I copied all the files related to the original temperature view model and just whittled away at errors that popped up in the developers tools console tab.

mikesalvia · August 18, 2022, 1:31pm

Thanks so much! This makes sense even if I don’t understand the “why”, I most certainly understand the “how”! Many thanks! I will respond back with my solution!

mikesalvia · August 18, 2022, 6:16pm

@jneilliii,

So I have gotten everything to work from my plugin except the dialog. I think perhaps I should just modify that work JavaScript, to reduce headaches.

I can't seem to find a way to replace the original.

If you know a way please let me know.

Cheers,

Mike