Filament Movement Sensor - additional graph in plugin tab?

Development
1

I'm working on a "filament movement sensor" (a shaft encoder that turns as the extruder moves filament). I've got the hardware and the basics of the python part of the plugin for it sorted. I've got it reading the sensor and sending that data to the UI, but so far it's just displaying the last numbers received, where of course it should be a graph.

Is there a way I can use the same Javascript graph library, that's used by the regular temperature graph, to make a second graph? My JS isn't super-strong, and I'm having trouble pulling things to pieces to figure out how they work. Can anyone give me some pointers, please?

2

you should check out my PlotlyTempGraph plugin for an example. Once the next release of OctoPrint comes out it will be able to graph the data for you if you want, check out the example file test plotly graph.py on how that works.

3

ooh - that's nice :slight_smile:

I've installed your plugin (which looks great, by the way - looking forward to the next Octoprint version to have this by default!). I've also managed to put my own graph on my plugin's tab, so I think I'm up and running (well, not "running" yet - my graph doesn't yet show the data, but I think I know what I need to do to make that work).

Thank you for your help - much appreciated!

For anyone stumbling here to ask the same question... I added this to my tab's template:

<div id="tester" style="width:600px;height:250px;"></div>

<script>
document.addEventListener('DOMContentLoaded', (event) => {
        data = [{
                x: [1, 2, 3, 4, 5],
                y: [1, 2, 4, 8, 16]
        }];

        TESTER = document.getElementById('tester');
        Plotly.newPlot( TESTER, data);
})
</script>

(clearly, it's better to put the Javascript in the plugin's ViewModel instead of inline with the HTML, and then no need to check for DOMContentLoaded, but the above is enough to get a graph to appear in the plugin's tab - from then on, the work is all about styling it and putting the real data into it, which is all stuff you can hopefully figure out from the Plotly docs)

4

One warning in regard to the PlotlyTempGraph, it's currently not cutting off data based on time when the tab is active, so can potentially grow and grow from a memory perspective. I was planning on re-working that to do it the same way that the default temp tab does, but development on the plugin kind of stalled until the new release was available. I found out later after writing the plugin that the tempsgraph plugin also utilizes plotly, and does have the data clipping functional already so was considering a PR against that plugin instead of releasing a new one.

5

Ahh - I was wondering about that. I noticed it after leaving the browser open for a while. Thanks for letting me know it's not 'desired behaviour' - I'll see if I can solve it in my plugin, although truth be told, I'm struggling with updates and extendTraces and whatnot at the moment, so that's a while away yet (bloomin' Javascript!).

1 Like