Error in capture demo

[jywarren]

Seeing this error on the capture demo at: https://publiclab.github.io/spectral-workbench.js/examples/capture/

Uncaught Error: Invalid dimensions for plot, width = 0, height = 200
    at getCanvasDimensions (jquery.flot.js:803)
    at setupCanvases (jquery.flot.js:853)
    at new Plot (jquery.flot.js:224)
    at Function.$.plot (jquery.flot.js:2690)
    at getRow (capture.js:341)

cc @sidntrivedi012 @starkblaze01

[sidntrivedi012]

The jquery.flot.js file has this snippet at 135 line :

		if (width <= 0 || height <= 0) {
			throw new Error("Invalid dimensions for plot, width = " + width + ", height = " + height);
		}

This is the error that is being shown on the console.
The line that is causing error in the capture.js file :

$W.plot = $.plot($("#graph"),$W.data,flotoptions); 

There is something wrong with the plotting of the graph. Looking into it.

[starkblaze01]

The jquery.flot.js file has this snippet at 135 line :

		if (width <= 0 || height <= 0) {
			throw new Error("Invalid dimensions for plot, width = " + width + ", height = " + height);
		}

This is the error that is being shown on the console.
The line that is causing error in the capture.js file :

$W.plot = $.plot($("#graph"),$W.data,flotoptions); 

There is something wrong with the plotting of the graph. Looking into it.

Cool!
Can you verify why width = 0 is passed in the data

[jywarren]

So the line where the error is originating (from the last line of the pasted error above) is:

spectral-workbench.js/examples/capture/capture.js

Line 341 in a062b8d

$W.plot = $.plot($("#graph"),$W.data,flotoptions);

Tracking down these lines and getting the permalink and inline code display is really helpful for leaving good notes about your progress, so I recommend it!

[jywarren]

Perhaps the thing to do is to try logging out flotoptions above this line. Then to as @starkblaze01 suggests, trace back to where width is being generated.

[sidntrivedi012]

So the line where the error is originating (from the last line of the pasted error above) is:

spectral-workbench.js/examples/capture/capture.js

Line 341 in a062b8d

$W.plot = $.plot($("#graph"),$W.data,flotoptions);

Tracking down these lines and getting the permalink and inline code display is really helpful for leaving good notes about your progress, so I recommend it!

Sure, will keep in mind from the next time.Thanks 🙂

[sidntrivedi012]

Whenever I am changing the width here to like a px value like 100 px, it is working fine. But in case of width:100%, it is giving errors.

spectral-workbench.js/examples/capture/index.html

Line 215 in a062b8d

<div id="graph" style="width:100%;height:200px;margin:10px 0;"></div>

[jywarren]

Hi, what are the errors exactly? This is odd. But... wait, is flot using a canvas? this could be the issue. Can you look at how it's working on spectralworkbench.org for comparison?

…

On Mon, Jun 17, 2019 at 4:35 PM Siddhant N Trivedi ***@***.***> wrote: Whenever I am changing the width here to like a px value like 100 px, it is working fine. But in case of width:100%, it is giving errors. https://github.com/publiclab/spectral-workbench.js/blob/a062b8d45bacfe5e2c202a3a60deca8c60d9c65c/examples/capture/index.html#L215 — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub <#95?email_source=notifications&email_token=AAAF6JY4MLW6S4XZ4572RDDP27YN3A5CNFSM4HXB433KYY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGODX4LZ7Y#issuecomment-502840575>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AAAF6JYB477JA22RHZRD4KDP27YN3ANCNFSM4HXB433A> .

[sidntrivedi012]

Sure @jywarren. Also, adding to this there's also one more error popping up :

Access to XMLHttpRequest at 'file:///capture/recent_calibrations.json?calibration_id=undefined' from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https.

[jywarren]

OK, that one is where it's trying to fetch recent calibrations from the server. So we'll need to refactor it to accept a constructor parameter on this line:

spectral-workbench.js/examples/capture/index.html

Lines 340 to 346 in a062b8d

	$W.initialize({
	calibrated: false,
	interface:"capture",
	mode:"combined",
	flipped: false,
	width: 640
	})

And then save it in the initialize method:

spectral-workbench.js/examples/capture/capture.js

Lines 34 to 37 in a062b8d

	initialize: function(args) {
	this.mobile = args['mobile'] || false
	this.flipped = args['flipped'] == true || false
	this.interface = args['interface'] || false

And then on the line where it's requested, maybe if there is no provided URL, we don't actually send this AJAX request at all:

spectral-workbench.js/examples/capture/capture.js

Lines 385 to 389 in a062b8d

	getRecentCalibrations: function(selector) {
	$.ajax({
	url: "/capture/recent_calibrations.json?calibration_id=" + $W.calibration_id,
	type: "GET",
	success: function(data) {

Actually the method is getRecentCalibrations() and it's run here:

spectral-workbench.js/examples/capture/capture.js

Lines 72 to 76 in a062b8d

	setInterval(function() {
	$W.getRecentCalibrations('.select-calibration');
	}, 10000); // every 10 seconds

So we could say if ($W.recentCalibrationsUrl !== false)

and in initialize, we could have it default to false:

    this.recentCalibrationsUrl = args['recentCalibrationsUrl'] || false

[cryptoclidus]

I think I got why it's defaulting to 0 when you set width to 100%:

On the html, there are two divs with class="tab pane", with id="settings" and id="capture". the tab pane "settings" is by default active, so capture is inactive (screenshot). So by default, "display:none" for the entire capture tab pane.

This means that any div with no specified width, or min width, (e.g. the elements with width:100%) will default to 0 when display:none. Since the #graph is inside the "capture" tab pane, which is inactive, it's width is default 0.

One possible fix can be to set a min-width of 1 px for the #graph div.

[cryptoclidus]

That's also why when you click "Begin Capturing" and the display switches to the "capture" tab pane, the error goes away

[jywarren]

Thanks so much for your help! Siddhant how does this look?

…

On Fri, Jun 21, 2019 at 12:58 PM Jasmine Mah ***@***.***> wrote: That's also why when you click "Begin Capturing" and the display switches to the "capture" tab pane, the error goes away — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#95?email_source=notifications&email_token=AAAF6JY7JVPWDVSNW3C6JDDP3UCBVA5CNFSM4HXB433KYY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGODYJAHAQ#issuecomment-504497026>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AAAF6J6UJKGBQ3XP347IXV3P3UCBVANCNFSM4HXB433A> .

[cryptoclidus]

Another thought on this: while setting the min-width:1 px is a quick and easy fix, this error is evidence that the program is repeatedly trying to draw the graph, when the graph isn't even being displayed. While it might not really have a substantial effect on performance, is it really necessary to draw the graph when the user is not on the "capture" tab pane? So a more complex fix might be to find all the graph-related and waterfall-related code and put them inside an "if" statement or an event listener that only runs when the "capture" tab pane is active. What do you think?

[jywarren]

@sidntrivedi012 can you please check in on this? Thanks @cryptoclidus !!!

[jywarren]

Solved in #102!!!

@sidntrivedi012 great work.