Rectangle 27 17

I'm surprised no one has mentioned WebGL, and frameworks built on it. I would consider it high on the list for state-of-the-art for 3D GPU-accelerated graphics and complex animation on HTML canvas / javascript.

WebGL is a cross-platform, royalty-free web standard for a low-level 3D graphics API based on OpenGL ES 2.0, exposed through the HTML5 Canvas element as Document Object Model interfaces. ...

WebGL brings plugin-free 3D to the web, implemented right into the browser. Major browser vendors Apple (Safari), Google (Chrome), Mozilla (Firefox), and Opera (Opera) are members of the WebGL Working Group.

WebGL is very solid in its support for GPU-accelerated graphics. Check out these GLSL shader demos. :-) And see ChemDoodle as an example of user interaction.

I've been working on an app using Google's O3D framework, which manages the scene graph, and uses WebGL for rendering (it used to use its own plug-in). O3D is a work in progress, and its documentation is not completely up to date, but it is under active development, and there are some good demos out there. 3D Pool may be most up your alley. The Google developers are very responsive to questions in the discussion group.

There are a number of other frameworks built on WebGL; see here. Ones that mention game development and scene graphs include Copperlicht, SceneJS, X3DOM.

WebGL runs in recent development builds of several browsers, but not IE. I've been using Firefox ("Minefield") and Chromium with good results. You will need one of these to run the above demos.

However if your requirements are that it must have no dependencies beyond HTML 5 canvas / js, WebGL may not be the right choice. It doesn't look like IE will support it anytime soon.

@nube: good point. Three.js can render on WebGL, SVG, or plain (2D) canvas.

What is the current state of the art in HTML canvas JavaScript librari...

javascript frameworks html5 canvas
Rectangle 27 0

The most obvious example I can see for pushState, replaceState, and window.onpopstate is Ajax navigation for a site.

Say your site or web app has fixed nav & footer.. That way you can load content of new pages into a specific container, say the new <main> element.

You probably won't want to be reloading the page, and just load what you need from the new page.

Using the pushState method means you'll be able to use your browser's Back and Forward buttons to navigate, even though you're not reloading the page.

HTML5 introduced the history.pushState() and history.replaceState() methods, which allow you to add and modify history entries, respectively. These methods work in conjunction with the window.onpopstate event.

Using history.pushState() changes the referrer that gets used in the HTTP header for XMLHttpRequest objects created after you change the state. The referrer will be the URL of the document whose window is this at the time of creation of the XMLHttpRequest object.

I think the question was specific about the use of STATE. history.pushState(THIS, title, page);

html5 - pushState: what exactly is the state object for? - Stack Overf...

html5 object history state pushstate
Rectangle 27 0

You can save a JSON object or the state of your program inside html5 local storage by using the following javascript:

if(localStorage)
 localStorage.setItem("NAME", JSON/XML Object);

then you can fetch it later on by using

var savedGame = localStorage["NAME"];

One warning though, it will work on all browsers except for IE because they use something else as local storage.

Thanks for the quick response, but I am still a bit lost when it comes to how to accomplish this. Just to clarify, could I simply enter the code above in my javascript then activate it with onClick in a button or onRefresh, for example? Or is there more to it? And can the "NAME" parameter be anything I choose?

Definitely! And yes, you can replace the name with whatever you want to name your your object. "NAME" is the key value.

javascript - Save user input on HTML page using HTML5 web storage - St...

javascript html5 web-storage
Rectangle 27 0

The specification doesn't set out a limit, however the various browser do have their own limits.

Firefox's is well documented and as you said, it's 640kB ("as much RAM as anybody will ever need").

I couldn't find Chrome or Internet Explorer's listed anywhere, but some quick testing shows:

IE hitting the limit at 1MB (in IE11, which is all I have handy).

So, to summarise for the people of the future: history.state object size limit is: 640kB for Firefox, 1MB for Internet Explorer 11 and at least 10Mb for Chrome.

EDIT: Versions tested: IE: 11, Chrome: 33, Firefox: Irrelevant as they document the max size on MDN for you :).

The 640K reference is to this: "640K ought to be enough for anybody -- Bill Gates, 1981" "So what happened, Bill?" "Do you realize the pain the industry went through while the IBM PC was limited to 640K? The machine was going to be 512K at one point, and we kept pushing it up. I never said that statement I said the opposite of that. "Gates talks" (20 August 2001) U.S. News & World Report"

javascript - HTML5 History API - What is the max size the state object...

javascript html5 pushstate
Rectangle 27 0

You have a page where a user can select a color. Every time they do, we generate a new history entry:

function doPushState(color) {
    var state = {},
        title = "Page title",
        path  = "/" + color;

    history.pushState(state, title, path);
};

We leave the state object blank for now and set the URL to the color name (don't reload the page - that URL doesn't exist, so you will get a 404).

Now click on a red, green and blue once each. Note that the URL changes. Now what happens if you click the back button?

The browser does indeed go back in history, but our page doesn't notice that - the URL changes from '/blue' back to '/green', but our page stays at 'You have selected blue'. Our page has gone out of sync with the URL.

This is what the window.onpopstate event and the state object are for:

  • we include our selected color in our state object function doPushState(color) { var state = { selectedColor: color }, title = "Page title", path = "/" + color; history.pushState(state, title, path); };
  • then we listen for the popstate event, so that we know when we have to update the selected color: $(window).on('popstate', function(event) { var state = event.originalEvent.state; if (state) { selectColor( state.selectedColor ); } });

Try the updated example: run fiddle (editor view): our page now updates accordingly when the user navigates back through history.

This is all well and good but what happens when my user shares the myawesomewebsite.com/blue uri with their friend saying look at how awesome the blue theme is on this website and the theme isn't applied because the friend doesn't have the state object stored in their browser, I still have to have some other mechanism in my app to restore state for first time visitors to a uri making this functionality redundant or am I missing something here?

@HelderRoem you're right in that your app has to provide the initial state, but it's not redundant because with the state on the client the app can avoid hitting the server every time the user goes back to /blue

html5 - pushState: what exactly is the state object for? - Stack Overf...

html5 object history state pushstate
Rectangle 27 0

User agents may limit the number of state objects added to the session history per page.

As you can see on this example the specification generally avoids mentioning any hard limits and leaves them at the discretion of browser makers. So even if the spec is revised at some point in future to consider the possibility of data size limits, it is unlikely to give you a real number. Instead it will be "big enough for common use cases".

javascript - HTML5 History API - What is the max size the state object...

javascript html5 pushstate
Rectangle 27 0

You have deal with Javascript Closure. onreadystatechange see filename,id,xhr of the lastest invoke of send_file_to_server function. To change this rewrite your function like this:

var xhr = Array();
function send_file_to_server(file,id)
   {
     console.log('send_file_to_server id received = ' + id);
     var filename = file.name;
     var container_name = $("#gs-file-upload-container").find(':selected').text();
     xhr[filename] =  new XMLHttpRequest();    
     xhr[filename].upload.onprogress = function(e)
      {
         console.log(' bytes loaded =  '+e.loaded + ' remaining = ' +  e.total);  
      }
    (function(localFilename, localId, localXhr){
        localXhr[localFilename].onreadystatechange = function(){  
           if(localXhr[localFilename].status == 200 && localXhr[localFilename].readyState == 4){
                    on_upload_complete(localFilename, localId, localXhr);
            }
     }
    })( filename,id,xhr)

     var queryString = 'http://upload_files?filename='+filename+'&cname='+container_name;
         xhr[filename].open("POST", queryString, true);
         xhr[filename].setRequestHeader("X-Requested-With", "XMLHttpRequest");
         xhr[filename].setRequestHeader("X-File-Name", encodeURIComponent(filename));
         xhr[filename].setRequestHeader("Content-Type", "application/octet-stream");
         xhr[filename].send(file);
 }
filename,id,xhr
localFilename, localId, localXhr

thanks a lot. have a lovely life. :)

php - how to track the ready state for each file with html5 xmlhttpreq...

php jquery html5 xmlhttprequest
Rectangle 27 0

HTML 5 Storage Engine Only the most recent versions of browsers support HTML 5 storage: FireFox 3, Safari 4, and IE 8; IE 8 allows 10 MB of storage, but other browsers only allow 5 MB;

Their storage module provides some info you might be after, they have a lite version in YUI3, the module uses several fallback methods.

javascript - HTML5 History API - What is the max size the state object...

javascript html5 pushstate