Stand alone Audio Design Tool (please help, browswer testing)

[PaulStoffregen]

I'm trying to improve the audio library design tool to work stand-alone from hard drives, without any internet access required.

Until today, only Firefox worked. I just committed a change that seems to make Safari work.

Chrome on Linux now sort-of works (previously it just hung), but dragging objects onto the canvas results in 2 copies, one of which does very wrong things. Hosted from a web server, it works perfectly. I have no idea why it's doing this from only the local files. Anyone know Chrome's javascript & local file restrictions?

If you have access to other browser / operating system combinations, please let me know how it works? Just click the link above for the web hosted copy. To try it locally from your hard drive, download the latest from github:

https://github.com/PaulStoffregen/Audio

Then just open the index.html file in the gui folder. Ideally, both should allow you to drag objects from the left pallet onto the center panel, and wire them together, and properly update the documentation as you click on each item, and export code for Arduino.

[HWGuy]

I can see two errors in the console (chrome+win7) one only shows up with the local index.html file:

Uncaught SecurityError: Failed to execute 'pushState' on 'History': A history state object with URL 'file:///C:/Users/XXX/Downloads/Audio-master/Audio-master/gui/index.html?info=AudioInputI2S' cannot be created in a document with origin 'null'.

comment outwindow.history.pushState(null, null, window.location.protocol + "//" + window.location.pathname + '?info=' + name); from selectNode in red/node.js.

the 2nd error:

XMLHttpRequest cannot load file:///C:/Users/XXX/Downloads/Audio-master/Audio-master/gui/library/flows. Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https, chrome-extension-resource.

The audio gui tool doesn't use the "flows" library: The web hosted audio gui can't load files from http://www.pjrc.com/teensy/gui/library/flows and they are not included in the github repo. But this error doesn't break anything and is only visible in the console.
To remove the error, comment outloadFlowLibrary(); from red/ui/library.js line 68.

Not the cleanest solution(s), but you can see where the problem is.

(the gui works now with chrome and win7)

[PaulStoffregen]

Thanks!! I've added these changes.

https://github.com/PaulStoffregen/Au...d6f19b0e8f932a

[jjrh]

there is something called electron ( https://github.com/atom/electron ) which from what I understand is for writing desktop applications in javascript/html

I don't have any experience with it myself, but it is part of the https://github.com/atom/atom editor.
My assumption is for a existing webapp it would be fairly easy to port.

I can take a stab at porting the audio tool to electron - I have been meaning to try something with it.

I have had no issues previously or just now when I tried the webhosted tool.


trying now with: http://www.pjrc.com/teensy/gui/

SVG's SMIL animations (<animate>, <set>, etc.) are deprecated and will be removed. Please use CSS animations or Web animations instead.
http://www.pjrc.com/teensy/gui/library/flows Failed to load resource: the server responded with a status of 404 (Not Found)
nodes.js:56 getUniqueCppName, n.type=AudioOutputI2S, n._def.shortName=i2s
nodes.js:58 getUniqueCppName, using basename=i2s
nodes.js:41 checkID, nodes[i].id = adc1
nodes.js:41 checkID, nodes[i].id = fft1024_1
nodes.js:41 checkID, nodes[i].id = dac1
nodes.js:67 getUniqueCppName, unique name=i2s1
nodes.js:56 getUniqueCppName, n.type=AudioInputI2Sslave, n._def.shortName=i2ss
nodes.js:58 getUniqueCppName, using basename=i2ss
nodes.js:41 checkID, nodes[i].id = adc1
nodes.js:41 checkID, nodes[i].id = fft1024_1
nodes.js:41 checkID, nodes[i].id = dac1
nodes.js:41 checkID, nodes[i].id = i2s1
nodes.js:67 getUniqueCppName, unique name=i2ss1

(dragging a bit of stuff around and loading the page - just the console log , everything works fine)

 % google-chrome --version
Google Chrome 46.0.2490.80 
% cat /etc/issue
Ubuntu 15.04 \n \l

[WMXZ]

While not expert on Audio Design Tool (or Node-Red) I only post a quick note:

I'm using IE 11.0.24

-left panel shows now icons. (did not before)
-dragging I2S, ADC etc to workspace , start with number 1. This may be intended but IMO confusing as on MCU the devices start with zero I2S0, ADC0

Look forward to program Teensy audio with AuDesTool.

[iwanders]

Seems to work fine (no errors observed in the console window, behaviour is as expected) on Chromium Version 37.0.2062.120 Ubuntu 12.04 (281580) (64-bit).

[Samuel]

Seems to work fine on the latest Firefox on Windows 8. I get a few warnings in the console, most notably jQuery raising some "Empty string sent to getElementById()" warnings whenever the export window is opened or closed. Also, the export window has both an "Ok" and a "Cancel" button, but they both seem to do the exact same thing...? Might want to look at that.

[addictedtobass]

The console seems to work ok, Chrome on Windows 8.1 64 bits.

[PaulStoffregen]

Yeah, there are several known bugs and *many* little shortcomings of the design tool. This work was only meant to get it working locally on all browsers as well as it does online.

Here's all the open issues related to the design tool. Eventually I want to work on all of these, someday......

https://github.com/PaulStoffregen/Audio/issues/92
https://github.com/PaulStoffregen/Audio/issues/87
https://github.com/PaulStoffregen/Audio/issues/59
https://github.com/PaulStoffregen/Audio/issues/58
https://github.com/PaulStoffregen/Audio/issues/57
https://github.com/PaulStoffregen/Audio/issues/56
https://github.com/PaulStoffregen/Audio/issues/55

[HWGuy]

The problem with chrome and the local copy of the Audio GUI is back and I can see why you did revert the quick and dirty fix (https://github.com/PaulStoffregen/Audio/issues/140)

There is probably no way to use history.pushState in local files with Google chrome (Here is why: https://code.google.com/p/chromium/i...?id=528681#c15). Even specialized javascript libraries like history.js do not fix this.

[fms1961]

Perhaps a change to "window.location=index.html?info=AudioInputI2S ;" could help as fix ...

I will look for a solution, there must be a possibility to solve this issue ...

[HWGuy]

window.location does reload the page.

	function selectNode(name) {
			if(!((document.origin == 'null') && (window.chrome))) {
			window.history.pushState(null, null, window.location.protocol + "//"
			+ window.location.host + window.location.pathname + '?info=' + name);
		} 
	}

is the best I could come up with. The URL in the address bar is updated in all browsers except for local stored pages in chrome.

[fms1961]

window.location does reload the page.

Indeed, and the history will be set ... and as your example fails with local files, we have the same situation except that no error is thrown.

[RickInTexas]

Paul,
Not sure how helpful it is, but it *seems* to work fine in Chrome on my Note 4, i.e. generates some simple code.

I've not much used Node-RED at all, but all the effort you have put into all this, I really need to get an audio board!

I wish Microcenter stocked them.

Rick.

[PaulStoffregen]

The problem with chrome and the local copy of the Audio GUI is back and I can see why you did revert the quick and dirty fix

Yeah, we really do need the address bar to update, so people can copy/paste links to documentation.

I did test on Chrome with Linux and it seemed to work, even though nasty warnings appear in the console window.

Which operating system & versions are you using?

I will look for a solution, there must be a possibility to solve this issue ...

Thanks!

Maybe just detecting Chrome and a file:/ url is ok?

If possible, I'd really like to keep this feature working on Firefox with file:/, because that's where I do most testing.

I've not much used Node-RED at all, but all the effort you have put into all this, I really need to get an audio board!

I wish Microcenter stocked them.

Not sure how who you can send feedback to at Microcenter, but I can tell you customer feedback has much more sway over distributor decisions than anything we can say.

If you have a Teensy 3.1 or 3.2, you can use the audio lib without the shield. Almost all the examples are written for the shield, but it's pretty simple to change. Just delete the SGTL5000 stuff, and replace the I2S output object with the DAC output (or AudioOutputI2S with AudioOutputAnalog). Then you'll get sound on the DAC pin. It's only mono and 12 bit quality, but still sounds pretty good. There's also a ADC input object, but honestly the built-in ADC isn't great. You get much better sound input with the audio shield.

[PaulStoffregen]

Oh, I see you've got the solution...

		if (!((document.origin == 'null') && (window.chrome))) {

Does anyone see any reason this should be used?

[PaulStoffregen]

I've committed HWGuy's fix.

https://github.com/PaulStoffregen/Au...4449f629251230

[HWGuy]

Which operating system & versions are you using?

Windows 7 Professional with Service Pack 1

dragging a mixer object onto the center panel results in a wrong object (with only one input), after a random mouse click on the panel a second mixer object appears. Reloading the page removes the first object.

if (!((document.origin == 'null') && (window.chrome))) {

document.origin : for server hosted pages it returns 'http://www.pjrc.com/', but for local files with a file:/ in the url it contains 'null'
window.chrome : is one way to detect chrome


Another idea...

function selectNode(name) {
		window.location.hash  = 'info=' + name;
}

And change line 177 in main.js to

var query = window.location.hash.substring(1);

The URL for the specific documentation is now : file:///C:/xampp/htdocs/Audio-master/gui/index.html#info=AudioMixer4
For me, this works with Firefox and Chrome for local and server hosted files.

[fms1961]

@HWGui: I think your solution is more sophisticated than the orginal one ...

But anyway: using the brwoser history is worthless in this context, because it changes the URL's parameter, but will not refresh the help data and won't select the previous/next selected button.