Mobile-Web-App

Wednesday, May 23, 2012

SIGGRAPH 2012 : Technical Papers Preview Trailer

The SIGGRAPH Technical Papers program is the premier international forum for disseminating new scholarly work in computer graphics and interactive techniques. SIGGRAPH 2012 brings together more than 20,000 professionals from 5 continents, 5-9 August 2012 in Los Angeles, California, USA. Learn more at www.siggraph.org/s2012.

Tuesday, May 22, 2012

Sample of RGraph LED Grids

<!DOCTYPE html >
<html>
<head>
 <title>RGraph LED Grids</title>
 <script src="http://www.rgraph.net/libraries/RGraph.common.core.js" ></script>
 <script src="http://www.rgraph.net/libraries/RGraph.led.js" ></script>
 
 <script>
  window.onload = function ()
  { var led = new RGraph.LED('led_canvas', 'Mobile-Web-App');
   led.Set('chart.light', '#0F0');
   led.Draw();
  }
 </script>

</head>
<body>
<h1>Mobile-Web-App: LED Grids</h1>
<canvas id="led_canvas" width="450" height="100">
Sorry! Canvas not supported on your browser.
</canvas>

</body>
</html>

Reference: RGraph LED Grid documentation

Monday, May 21, 2012

Crowd-Sourced Android CookBook

The O'Reilly Android Cookbook is a crowd-sourced reference to all aspects of developing successful Android applications. It is not an application to manage your food recipes under Android! You can view the recipes online, and also contribute recipes, comment on them.

Visit: http://androidcookbook.com/home.seam

~ We are building a community-written web site which has also been used to create an O'Reilly Cookbook, both about how to build great Android applications. It is full of how-to information along with code snippets that illustrate the ideas presented. It features both how-to's that overlap with the official documentation, and material that goes beyond this to be more tutorial, more in-depth, or explaining "lessons from the trenches": what actually works to get the application functioning well. Unlike most books written by one, two or a few individuals, this one has input from dozens of contributors, who were all able to view and comment on each others' recipes before the book was published. The published version(s) include printed books, eBooks, and other uses. And long after the book was first published in 2012, this site will continue to exist - with a larger collection of recipes than will fit in the published book - and serve as an Android developer resource site long after. ~

HTML5: Remotely vibrate a phone with morse code!

Use the HTML5 Vibrate API in Mobile Firefox Beta Example showing how to use the vibrate API to vibrate a device from a web page. For more information on how to accomplish this: http://www.smartjava.org/content/html5-remotely-vibrate-phone-morse-code-using-web-sockets-and-vibrate-api

wysihtml5 - an open source rich text editor based on HTML5

wysihtml5 is an open source rich text editor based on HTML5 technology and the progressive-enhancement approach. It uses a sophisticated security concept and aims to generate fully valid HTML5 markup by preventing unmaintainable tag soups and inline styles.

Features:

It's fast and lightweight (smaller than TinyMCE, Aloha, ...)
Auto-linking of urls as-you-type
Generates valid and semantic HTML5 markup (even when the content is pasted from MS Word)
Uses class names instead of inline styles
Unifies line break handling across browsers
Uses sandboxed iframes in order to prevent identity theft through XSS
Speech-input for Chrome
No jQuery required

Simple example of RGraph 3D bar chart

<!DOCTYPE html >
<html>
<head>
 <title>RGraph 3D Bar chart example</title>
 <script src="http://www.rgraph.net/libraries/RGraph.common.core.js" ></script>
 <script src="http://www.rgraph.net/libraries/RGraph.common.dynamic.js" ></script>
 <script src="http://www.rgraph.net/libraries/RGraph.bar.js" ></script>
 
 <script>
  window.onload = function ()
  {     var barchart = new RGraph.Bar(
     'barchart_canvas', [[17], [13], [12], [11], [3], [2], [2], [2], [2], [2]]);
    barchart.Set('chart.colors', ['#0000FF']); 
    barchart.Set('chart.labels', 
     ['US', 'China', 'Russia', 'Netherlands', 'Ukraine', 
     'Germany', 'United Kingdom', 'South Korea', 'Denmark', 'Brazil']);
    barchart.Set('chart.ymax', 20);
    barchart.Set('chart.ylabels.count', 5);
    barchart.Set('chart.gutter.left', 35);
    barchart.Set('chart.variant', '3d');
    barchart.Set('chart.strokestyle', 'rgba(0,0,0,0.1)');
    barchart.Set('chart.scale.round', true);
    barchart.Set('chart.text.angle', 15);
    barchart.Set('chart.text.size', 6);
    barchart.Draw();
  }
 </script>

</head>
<body>
<h1>Mobile-Web-App: RGraph 3D Bar Chart</h1>
<canvas id="barchart_canvas" width="450" height="300">
Sorry! Canvas not supported on your browser.
</canvas>

</body>
</html>

Reference: RGraph Bar charts documentation

Saturday, May 19, 2012

Google Chart Tools Geochart

Google Chart Tools provide visualization of Geochart. You can easy to embed map of a country, a continent, or a region with tregion mode or marker mode.

NCC Group has released its Origin of Hacks report for the first quarter of 2012, tracking the countries from which global computer hacking originated throughout the first three months of the year. The data will be used as a example to demonstrate Geochart.

Please note that that data in the chart is roughly. Hi-resolution map and top-10 table available on request, please refer http://www.nccgroup.com/newsandevents/latest/12-05-17/Origins_of_Global_Hacks_UK_leaps_up_hacking_league_table.aspx

<html>
  <head>
    <script type='text/javascript' src='https://www.google.com/jsapi'></script>
    <script type='text/javascript'>
     google.load('visualization', '1', {'packages': ['geochart']});
     google.setOnLoadCallback(drawRegionsMap);

      function drawRegionsMap() {
        var data = google.visualization.arrayToDataTable([
          ['Country', '%'],
    ['US', 17],
    ['China', 13],
    ['Russia', 12],
    ['Netherlands', 11],
    ['Ukraine', 3],
    ['Germany', 2],
    ['United Kingdom', 2],
    ['South Korea', 2],
    ['Denmark', 2],
    ['Brazil', 2]
        ]);

        var options = {};

        var chart = new google.visualization.GeoChart(document.getElementById('chart_div'));
        chart.draw(data, options);
    };
    </script>
  </head>
  <body>
    <div id="chart_div" style="width: 900px; height: 500px;"></div>
  </body>
</html>