Simple pie chart & doughnut chart with SVG + CSS

You can draw a simple pie chart & doughnut chart with SVG + CSS. This is quite simple and straight forward. But the limitation is that it is able to show 2 sections only.

To change the value of the section, look for stroke-dasharray and change the first value.

.pie2 {

        fill: yellow;

        stroke: green;

        /* max=50 (radius x 2) */

        stroke-width: 50;

        /* 158 = (radius x 2) x 3.142 = 25 x 2 x 3.142 */

        stroke-dasharray: 40 158;

    }

    .chart2 {

        background-color: yellow;

        border-radius: 50%;

        -webkit-transform: rotate(-90deg);

                transform: rotate(-90deg);

    }

    <svg width="100" height="100" class="chart2">    

        <circle r="25" cx="50" cy="50" class="pie2"/>  

    </svg>

To draw a doughnut chart,  

    .doghnut {

        fill: yellow;

        stroke: green;

        stroke-width: 20;

        stroke-dasharray: 180 251;

    }

    .doghnut_chart {

        background-color: yellow;

        border-radius: 50%;

        -webkit-transform: rotate(-90deg);

                transform: rotate(-90deg);

    }

    <svg width="100" height="100" class="doghnut_chart">    

        <circle r="40" cx="50" cy="50" class="doghnut"/>  

    </svg>

Printing HTML with JavaScript

You want to allow the user from printing current page directly to the printer and here is the recipe:


1. A print button that calls your print function (written in JavaScript).

2. In your print function, you need to do the following thing:

2.1. Inject a hidden iFrame.

2.2. Set the "src" to the page that you have to print. If you are developing a POS (Point of Sales), you may specify the URL of the receipt page to the "src" together with the  receipt number in the query string. For example,

<iframe id="receipt-frame" style="display:none;" src="myReceipt.aspx?refno=123456"/>

Note: the page that you call should return the contents to be printed out. You have two choices to merge the data into the receipt format: (1) do everything at the server side (2) execute client side JavaScript upon page loaded.

2.3. Once you have the content to be printed, you need to call the following function (upon page loaded). This function will send the content to the printer.

  window.onafterprint = function() {
      window.parent.myPrintJobCompleted();
  }

  window.print();

In case you want to inform the parent page that the user has printed the content, you must handle the window.onafterprint event. In the example above, it executes the function myPrintJobCompleted (this function will load with the main page).

Something about the z-index

In CSS, z-index is the property to control the 3D Z position of the element (for example DIV). This property is useful when you have element that has absolute or fixed position.

In the real work application, we use z-index for the date picker, time picker, numeric keypad, any popup list, prompt, etc.

Here is the find out:


1. If you set the z-index for the DIV, it works as expected. Not strange thing will happen in this simplest case.

<body>
   <div class="container1">helo</div>
<body> 

2.But, if you have the following structure, then, it might work unexpectedly.

First of all, if you set the z-index for the inner1 & inner2, the z-index is relative to container1. While container2 is relative to the body.


<body>
   <div class="container1">Container 1
      <div class="inner1">Inner 1</div>
      <div class="inner2">Inner 2</div>
   </div>

    <div class="container2">Container 2
    </div>
<body>

For example, you have the following settings for the z-index where the final output is container2 is always at the top that covers container1 and hence it covers inner1 and inner2.

container1 - z-index: 100
    inner1 - z-index: 300
    inner2 - z-index: 400

container2 - z-index: 200

All DIV elements have the following settings.

position: absolute;
top: 0;
left:0;
width:100px;
height:100px;
overflow:hidden;

User interface with HTML+CSS+JS

Let's build the user interface with HTML+CSS+JS and then build the back end program with any web programming language (ASP.Net, PHP, etc) or objective-C for iOS.

This strategy decouple the front end and back end which leads to shorter development and higher customer satisfaction.

From the front end aspect:

• We build the prototype in a shorter time.
• We build a back end program using Javascript that simulate the AJAX call between the front end and back end. This script does not rely on any database and web server. It will be loaded and running within the browser context. So, the AJAX call simulation does not required a complex development environment setup.
• The prototype can be build with any tool as simple as a text file editor + a browser to test the prototype.
• The user can "see' and "feel" the prototype. It's not talking on a "paper" and the user must "imagine" how it works.
• This prototype will be uploaded to any web server for discussion purpose.
• Now, we build a more stable front end regardless of which OS platform.
• It solves the problem with "installation".

From the back end aspect:

• The back end can be built with any programming language (ASP.Net, PHP, etc) or Objective-C for iOS.
• The back end program should only provides the correct API for AJAX request and response.
• The back end program can be build parallel with the front end.

Finally, we are reusing the HTML+CSS+JS to build front for web app, mobile app and Windows client. Now, our front end designer and back end programmer can work parallel which really cut down lots of time in sync the shared source files.

Cheers!!

Changing the URL in the address bar with JQuery

Changing the URL in the address bar with JQuery is quite straight forward. The purpose of this technique is to resolve the user support for the "single page application" (i.e., all contents were loaded by JQuery).

I have modified the technique used by the following article in order to avoid the security error raised by the browser. It appends the "anchor" to the URL.

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <script type="text/javascript">
        function ChangeUrl(page, url) {
            if (typeof (history.pushState) != "undefined") {
                var i = window.location.href.indexOf('#');
                if (i > 0) {
                    url = window.location.href.substring(0, i) + url;
                }
                else {
                    url = window.location.href + url;
                }
               
                var obj = { Page: page, Url: url };
                history.pushState(obj, obj.Page, obj.Url);
            } else {
                alert("Browser does not support HTML5.");
            }
        }
        $(function () {
            $("#button1").click(function () {
                ChangeUrl('Page1', '#Page1');
            });
            $("#button2").click(function () {
                ChangeUrl('Page2', '#Page2');
            });
            $("#button3").click(function () {
                ChangeUrl('Page3', '#Page3');
            });
        });
    </script>
    <input type="button" value="Page1" id="button1" />
    <input type="button" value="Page2" id="button2" />
    <input type="button" value="Page3" id="button3" />


Reference

http://www.aspsnippets.com/Articles/Change-URL-in-Browser-Address-Bar-without-reloading-using-JavaScript-and-jQuery.aspx

Taking photo with web camera without Flash

With HTML5, you can connect to the web cam and take photo without using Flash or any other third party component.

To connect to the web cam, you need to explore the following Javascript method:

  navigator.MediaDevices.getUserMedia()

For the detailed explanation, please refers to the following article.

    http://www.html5rocks.com/en/tutorials/getusermedia/intro/

and also refer to the up-to-date reference:

  https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getUserMedia


I found this library and the sample web pages are working (able to take photo). But, yet to write some web page to do the job:

   https://github.com/jhuckaby/webcamjs