RSS

Category Archives: HTML 5

audio and video streaming with StageWebView and html5

The StageWebView object  is a powerful way to integrate the elements that AIR is lacking today. Do you need a list with perfect scrolling ? AAC audio streaming ? H.264 streaming ? Well you can use a StageWebView to load “HTML5″ code inside the AIR app and integrate this kind of content. Let’s do a simple example:

var webView = new StageWebView();
webView.stage = this.stage;
webView.viewPort = new Rectangle( 0, 0, stage.stageWidth, stage.stageHeight);
var path:String = new File(new File("app:/html/service.htm").nativePath).url;
webView.loadURL(Path);

This code will open a fullscreen instance of the native browser (without UI) and load a locally stored .html file (notice that it is necessary in iOS to use some hack like that at line 4 to obtain a valid url to access local html). Now you can easily understand that the best is to mix AIR UI and this windowed browser to exploit HTML5 capabilities especially for media streaming. A simple <video> tag inside the html code can do the job and offer perfect H.264 progressive and streaming playback to your AIR apps both in window and at fullscreen.

Link

 

Game Engines

This table contains primarily HTML5 based game engines and frameworks. You might also want to check out these pages: Feature MatrixGame Resources.

 

 

 
Leave a comment

Posted by on September 11, 2011 in GAME, HTML 5

 

RGraph: Javascript charts library

Faster websites with javascript charts

RGraph is a Javascript charts library. By using the HTML5 canvas tag, these javascript charts are created in the web browser, meaning quicker charts and less web server load. RGraph is an easy way of speeding up your website.

RGraph uses the HTML5 canvas tag to produce a wide variety of javascript charts and graph types. It is covered by the RGraph License.

 
Leave a comment

Posted by on September 11, 2011 in HTML 5

 

HTML 5 canvas game

http://www.html5canvastutorials.com/canvas-hero/

 
Leave a comment

Posted by on July 5, 2011 in GAME, HTML 5

 

drag and drop with html5

  <script>

  var eat = ['yum!', 'gulp', 'burp!', 'nom'];
  var yum = document.createElement('p');
  var msie = /*@cc_on!@*/0;
  yum.style.opacity = 1;

  var links = document.querySelectorAll('li > a'), el = null;
  for (var i = 0; i < links.length; i++) {
    el = links[i];

    el.setAttribute('draggable', 'true');

    addEvent(el, 'dragstart', function (e) {
      e.dataTransfer.effectAllowed = 'copy'; // only dropEffect='copy' will be dropable
      e.dataTransfer.setData('Text', this.id); // required otherwise doesn't work
    });
  }

  var bin = document.querySelector('#bin');

  addEvent(bin, 'dragover', function (e) {
    if (e.preventDefault) e.preventDefault(); // allows us to drop
    this.className = 'over';
    e.dataTransfer.dropEffect = 'copy';
    return false;
  });

  // to get IE to work
  addEvent(bin, 'dragenter', function (e) {
    this.className = 'over';
    return false;
  });

  addEvent(bin, 'dragleave', function () {
    this.className = '';
  });

  addEvent(bin, 'drop', function (e) {
    if (e.stopPropagation) e.stopPropagation(); // stops the browser from redirecting...why???

    var el = document.getElementById(e.dataTransfer.getData('Text'));

    el.parentNode.removeChild(el);

    // stupid nom text + fade effect
    bin.className = '';
    yum.innerHTML = eat[parseInt(Math.random() * eat.length)];

    var y = yum.cloneNode(true);
    bin.appendChild(y);

    setTimeout(function () {
      var t = setInterval(function () {
        if (y.style.opacity <= 0) {
          if (msie) { // don't bother with the animation
            y.style.display = 'none';
          }
          clearInterval(t);
        } else {
          y.style.opacity -= 0.1;
        }
      }, 50);
    }, 250);

    return false;
  });

  </script>

http://html5demos.com/drag

 
Leave a comment

Posted by on June 27, 2011 in HTML 5

 

Progress bar with html5

http://pastehtml.com/view/1d80e6t.html

Let’s start with a substrate, which will be filled with progress. We are going to round the angles of the rectangle with the help of arc () function, so in this case the rectangle will always be rounded at the angles in a way of semicircles. To create an arbitrary rounding (as when using a border-radius) it is sufficient to use two Bezier curves (Bezier and quadratic curves) and direct interval between them (degenerating to a point in a semicircle, as in our case). Thus, the function of creation of the substrate’s filled outline will look in the following way:

1
2
3
4
5
6
7
8
9
10
function roundRect(ctx, x, y, width, height, radius) {
    ctx.beginPath();
    ctx.moveTo(x + radius, y);
    ctx.lineTo(x + width - radius, y);
    ctx.arc(x+width-radius, y+radius, radius, -Math.PI/2, Math.PI/2, false);
    ctx.lineTo(x + radius, y + height);
    ctx.arc(x+radius, y+radius, radius, Math.PI/2, 3*Math.PI/2, false);
    ctx.closePath();
    ctx.fill();
}

Then we add shadows and volume to the substrate. Create volume using a linear gradient with three stops, the shadows – with the standard properties of the context:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
function progressLayerRect(ctx, x, y, width, height, radius) {
    ctx.save();
    // Define the shadows
    ctx.shadowOffsetX = 2;
    ctx.shadowOffsetY = 2;
    ctx.shadowBlur = 5;
    ctx.shadowColor = '#666';
     // first grey layer
    ctx.fillStyle = 'rgba(189,189,189,1)';
    roundRect(ctx, x, y, width, height, radius);
    // second layer with gradient
    // remove the shadow
    ctx.shadowColor = 'rgba(0,0,0,0)';
    var lingrad = ctx.createLinearGradient(0,y+height,0,0);
    lingrad.addColorStop(0, 'rgba(255,255,255, 0.1)');
    lingrad.addColorStop(0.4, 'rgba(255,255,255, 0.7)');
    lingrad.addColorStop(1, 'rgba(255,255,255,0.4)');
    ctx.fillStyle = lingrad;
    roundRect(ctx, x, y, width, height, radius);
    ctx.restore();
}

Two layers are being used here – the lower solid gray and the top white with gradients of transparency. In my opinion it provides more precise boundaries of the substrate and looks more realistic, in any case you can always experiment with all the color settings.

Read More

 
Leave a comment

Posted by on June 27, 2011 in HTML 5

 

geolocation with html5

The Geolocation API provides a method to locate the user’s exact (more or less – see below) position. This is useful in a number of ways ranging from providing a user with location specific information to providing route navigation.

Although it’s not actually part of the HTML5 specification, as it was developed as a separate specification by the W3C, rather than the WHATWG, if the esteemed HTML5 Doctors Remy Sharp and Bruce Lawson felt it was fitting enough to include in their book, then it’s perfectly ok to write about it here.

The API is actually remarkably simple to use and this article aims to introduce the API and show just how easy it is.

 

Browser Compatibility

Currently the W3C Geolocation API is supported by the following desktop browsers:

  • Firefox 3.5+
  • Chrome 5.0+
  • Safari 5.0+
  • Opera 10.60+
  • Internet Explorer 9.0+

There is also support for the W3C Geolocation API on mobile devices:

  • Android 2.0+
  • iPhone 3.0+
  • Opera Mobile 10.1+
  • Symbian (S60 3rd & 5th generation)
  • Blackberry OS 6
  • Maemo

Read More

 

 
Leave a comment

Posted by on June 26, 2011 in HTML 5