Forum Rule: Always post complete source code & details to reproduce any issue!
Results 1 to 19 of 19

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

  1. #1
    Senior Member PaulStoffregen's Avatar
    Join Date
    Nov 2012
    Posts
    22,647

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

    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.

  2. #2
    Senior Member
    Join Date
    Nov 2012
    Posts
    275
    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)
    Last edited by HWGuy; 11-07-2015 at 09:59 AM.

  3. #3
    Senior Member PaulStoffregen's Avatar
    Join Date
    Nov 2012
    Posts
    22,647
    Thanks!! I've added these changes.

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

  4. #4
    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/

    Code:
    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)

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

  5. #5
    Senior Member
    Join Date
    Jul 2014
    Posts
    2,747
    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.

  6. #6
    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).

  7. #7
    Junior Member Samuel's Avatar
    Join Date
    Nov 2015
    Posts
    16
    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.

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

  9. #9
    Senior Member PaulStoffregen's Avatar
    Join Date
    Nov 2012
    Posts
    22,647
    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

  10. #10
    Senior Member
    Join Date
    Nov 2012
    Posts
    275
    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.

  11. #11
    Senior Member fms1961's Avatar
    Join Date
    Jul 2015
    Location
    Northern Germany
    Posts
    154
    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 ...

  12. #12
    Senior Member
    Join Date
    Nov 2012
    Posts
    275
    window.location does reload the page.


    Code:
    	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.
    Last edited by HWGuy; 01-10-2016 at 11:16 PM.

  13. #13
    Senior Member fms1961's Avatar
    Join Date
    Jul 2015
    Location
    Northern Germany
    Posts
    154
    Quote Originally Posted by HWGuy View Post
    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.

  14. #14
    Junior Member
    Join Date
    Feb 2015
    Posts
    5
    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.

  15. #15
    Senior Member PaulStoffregen's Avatar
    Join Date
    Nov 2012
    Posts
    22,647
    Quote Originally Posted by HWGuy View Post
    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?

    Quote Originally Posted by fms1961 View Post
    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.


    Quote Originally Posted by RickInTexas View Post
    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.

  16. #16
    Senior Member PaulStoffregen's Avatar
    Join Date
    Nov 2012
    Posts
    22,647
    Oh, I see you've got the solution...

    Code:
    		if (!((document.origin == 'null') && (window.chrome))) {
    Does anyone see any reason this should be used?

  17. #17
    Senior Member PaulStoffregen's Avatar
    Join Date
    Nov 2012
    Posts
    22,647

  18. #18
    Senior Member
    Join Date
    Nov 2012
    Posts
    275
    Quote Originally Posted by PaulStoffregen View Post
    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.

    Code:
    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...

    Code:
    function selectNode(name) {
    		window.location.hash  = 'info=' + name;
    }
    And change line 177 in main.js to
    Code:
    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.
    Last edited by HWGuy; 01-11-2016 at 08:07 AM.

  19. #19
    Senior Member fms1961's Avatar
    Join Date
    Jul 2015
    Location
    Northern Germany
    Posts
    154
    @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.

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •