2016年8月31日 星期三

曾被我們遺忘的台電

在 Cheers 雜誌讀到:

回溯台灣的百年電力史,第一章可從1887年(清光緒13年)寫起。清朝台灣巡撫劉銘傳邀請江浙仕紳集資白銀五萬兩,於台北市東門外設立「興市公司」(建設公司),隔年裝置小型蒸氣燃煤發電機,在丹麥電氣技師協助下,才在台北城內點亮了「台灣第一盞燈」。

接下來的幾個重要里程碑,包括1905年7月,台灣第一座水力發電所──龜山發電所完工,從此讓台北市區、艋舺及大稻埕地區都進入「有電時代」。而1934年(日據昭和9年)竣工的日月潭水力發電工程,更是推動「農業台灣」進入「工業台灣」的關鍵動力。日月潭水力發電廠是當時亞洲最大、世界第八的發電工程。光是日月潭第一發電所的發電量,即足以滿足1935年時,台灣電力株式會社的全系統實際尖峰負載,還整整多出38%的備載容量。

原來台灣電力的發展史,也是這麼的迷人。跨越清朝、日治、民國三朝,可真的稱的上是「三朝元老」了,同時也參雜了台灣百年來的政經情勢。拋開政客們偏頗的口號對立,坐下來好好欣賞這曾經有無數人犧牲奉獻所換得的產物,也是令人握緊拳頭、血淚交織啊!

2016年8月29日 星期一

使用 jQuery 完成 JSON 資料的傳遞

聽到要透過 JSON 來傳遞資料,心中不免冒出:那不是要寫很多行程式?不是還要引用 JSON 相關的 javascript 模組?不是還要... 總之,就是很煩就是了!

最近看了幾篇 JSON 相關的使用文章後,發現其實不困難,也還蠻簡潔的。或許有很多小細節的地方我還沒發現,但大致上目前會用到的功能,都已經可以達到了。

首先,要先建立一個模擬後端的程式,用來產生 JSON 資料,準備給前端使用,而內容就大概長得像下面這個樣子。


{
"title":"jquery 入門",
"price":"299",
"author":"paladin lee"
}


只是最後要回傳的時候,需將物件序列化成 JSON 格式再回傳,而也只需使用下面這方法就可以了。

System.Web.Script.Serialization.JavaScriptSerializer().Serialize(stringValue)

所以我的後端程式如下:

ser01.ashx

public void ProcessRequest (HttpContext context) {

    StringBuilder sb = new StringBuilder();
    sb.Append(@"{
    ""title"":""jquery 入門"",
    ""price"":""299"",
    ""author"":""paladin lee""
}
");

    //將 sb 物件序列化成JSON格式再回傳
    context.Response.Write(new System.Web.Script.Serialization.JavaScriptSerializer().Serialize(sb.ToString()));
}


接下來要處理的,就是前端了。透過  jQuery 的 getJSON() 方法,可以讓我們輕鬆的接收回傳的 JSON 資料。再透過 $.each() 來一一處理每個項目的內容。

 $.each(data2, function (property, value) {

   //Do something...

 });


從後端所序列化的內容可知,回傳的資料裡面三筆,以第一筆為例, property 是 "title",value 則是 "jquery 入門"。這裡要特別注意,因為回傳的 JSON 資料目前只是被視為字串,要透過 $.parseJSON() 將這 JSON 字串轉為 JSON 物件才能進一步被我們使用。

前端完整的測試程式則如下所示:

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <style>
        .tb  
        {
            border-collapse:collapse ;                  
        }
        
        .tb th
        {
            border:1px solid black;
            padding:5px;
        }
        
        .tb td
        {
            border:1px solid black;
            padding:5px;
        }
        
    </style>
    <script src="js/jquery-1.10.2.min.js" type="text/javascript"></script>
    <script>
        $(function () {
            
            $.getJSON("ser01.ashx", function (data) {

                var vTable = $("<table class='tb' border='1'></table>");
                var vItem01="";

                //convert JSON string, not an object
                var data2 = $.parseJSON(data);

                $.each(data2, function (property, value) {
                    vItem01 = vItem01 + "<tr><th>" + property + "</th><td>" + value + "</td></tr>";
                });                               

                $(vTable).append(vItem01);
                $(".div01").append(vTable);

            });
        });
    </script>
</head>
<body>
    <form id="form1" runat="server">   
    <div class="div01">
    </div>
    </form>
</body>
</html>


而畫面結果就會長成這樣子:


這時,或許你可能會說,我其實想要的,是類似好幾本書的資訊,而不是單單某一本書的詳細內容ㄟ!這其實也不難,首先來產生後端的資料,其內容大概如下:
[
 {
 "title":"jquery 入門",
 "price":"299",
 "author":"paladin lee"
 },
 {
 "title":"html5 入門",
 "price":"199",
 "author":"Nikki"
 },
 {
 "title":"麻將",
 "price"":"99",
 "author"":"jason"
 }
]

同樣地,將他序列化後,就可以直接送出去了。

server02.ashx

public void ProcessRequest (HttpContext context) {
 StringBuilder sb = new StringBuilder();
 sb.Append(@"[
 {
 ""title"":""jquery 入門"",
 ""price"":""299"",
 ""author"":""paladin lee""
 },
 {
 ""title"":""html5 入門"",
 ""price"":""199"",
 ""author"":""Nikki""
 },
 {
 ""title"":""麻將"",
 ""price"":""99"",
 ""author"":""jason""
 }
 ]
 ");
 //將 sb 物件序列化成JSON格式再回傳
 context.Response.Write(new System.Web.Script.Serialization.JavaScriptSerializer().Serialize(sb.ToString()));
}


至於前端的部份,我們則是透過兩次的 $.each() 來把回傳的 JSON 資料解析出來。
$.each(data, function () { 
 //處理每一筆的資料
 $.each(this,function(property, value){
  //處理每一個欄位的資料
 });                    
});



完整前端程式如下:

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <style>
        .tb  
        {
            border-collapse:collapse ;                  
        }
        
        .tb th
        {
            border:1px solid black;
            padding:5px;
        }
        
        .tb td
        {
            border:1px solid black;
            padding:5px;
        }
        
    </style>
    <script src="js/jquery-1.10.2.min.js" type="text/javascript"></script>
    <script>
        $(function () {

            // test ser01
            $.getJSON("server02.ashx", function (data) {

                var vTable = $("<table class='tb' border='1'></table>");
                var vItem01 = "";

                //convert JSON string, not an object
                var data2 = $.parseJSON(data);

                //header
                vItem01 += "<tr><th>title</th><th>price</th><th>author</th></tr>";                               

                $.each(data2, function () { 
                    vItem01+="<tr>";
                    $.each(this,function(property, value){
                        vItem01+="<td>"+value+"</td>";
                    });
                    vItem01 += "</tr>";                    
                    
                });

                $(vTable).append(vItem01);
                $(".div01").append(vTable);

            });
        });
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div class="div01">
    </div>
    </form>
</body>
</html>


希望透過以上簡單範例,會讓你對於 jQuery 與 JSON 資料傳遞會有更親切的感覺。

2016年8月26日 星期五

用Aspose替 PDF 加上底圖


如果一張獎狀的 PDF 檔,內容長得如上圖,會不會覺得哪裡怪怪的?沒錯,少了「框線」。

接下來想要透過 Aspose 工具,來把這張 PDF 檔加上框線。而這原理,可以簡單的想成把 PDF 檔案加上底圖。

首先,先找好一個有框的底圖。大概像下面這樣:

BackGround.png
接著,就可以透過 Aspose 的 Document 物件,來取得原先的 PDF 檔案。這時候的 Document ,可以視為 PDF 的代表。
Document pdfDocument = new Document("PDF來源");

一份 PDF 檔案,可能會有很多頁(Page),所以,透過 Page 物件,可以讓我們指定要控制第幾個頁面。而這裡的頁面標示,則是從 1 開始算起。
Page pdfPage = pdfDocument.Pages[1];

ImageStamp 則是接下來的主角,他就好比我們的橡皮圖章一樣,待會會蓋在每個頁面上。若用圖層的觀點來看,就有所謂的上下之分,這時,可以利用 ImageStamp 的 Background 屬性來決定,決定這個橡皮圖章的內容是要完全蓋過原先的內容,還是只是當個背景。如果需要微調 ImageStamp 的大小,則有 Width、Height 可以設定。
ImageStamp imgStamp = new ImageStamp(strStampFullPath);


完整程式可以簡述如下:
class PdfFunction
{
    public void AddBackGroundIMG(string PDFPath)
    {

        string setupFile = "BackGround.png";

        //取得執行路徑
        string strExecPath = Path.GetDirectoryName(System.Reflection.Assembly.GetExecutingAssembly().Location);
        //取得檔案的完整路徑
        string strStampFullPath = string.Format("{0}\\{1}", strExecPath, setupFile);

        //設定 license
        Aspose.Pdf.License license = new Aspose.Pdf.License();
        license.SetLicense(string.Format("{0}\\{1}",strExecPath , "Aspose.Total.lic"));


        //透過 Aspose 的 Document 物件,來取得原先的 PDF 檔案
        Document pdfDocument = new Document(PDFPath);
        Page pdfPage;
                       

        for (int i = 0; i < pdfDocument.Pages.Count; i++)
        {        
            //Aspose 是從 1 開始算的
            pdfPage = pdfDocument.Pages[i + 1];

            //取得外部圖片並指定為 ImageStamp 格式
            ImageStamp imgStamp = new ImageStamp(strStampFullPath);

            //將加入的圖片指定設為背景
            imgStamp.Background = true;

            //設定圖片長寬
            imgStamp.Width = 850;
            imgStamp.Height = 600;

            //將底圖加入到 PDF 頁面
            pdfPage.AddStamp(imgStamp);

        }


        // 產出新檔案
        pdfDocument.Save(string.Format("{0}\\{1}", strExecPath, "out.pdf"));

    }
}


要使用時,則是如下呼叫:
class Program
{
 static void Main(string[] args)
 {
  string setupFile = "award.pdf";

  //取得執行路徑
  string strExecPath = Path.GetDirectoryName(System.Reflection.Assembly.GetExecutingAssembly().Location);
  //取得檔案的完整路徑
  string strStampFullPath = string.Format("{0}\\{1}", strExecPath, setupFile);

  PdfFunction oP = new PdfFunction();
  oP.AddBackGroundIMG(setupFile);
 }
}


最後,有框的獎狀就會像下面這樣子:




Ref:
01:how to insert a watermark image into existing .pdf

2016年8月24日 星期三

透過 BlockUI 產生遮罩效果


當預期後端 Server 的處理時間會很久時,總是希望讓使用者知道系統還活著,只是正在處理中。這時,就會希望有個「遮罩」效果,讓背景呈現灰階、甚至放一個動態 .gif 圖檔來表示。

網路上蠻多推薦 BlockUI 的文章,自己實際去練習,發現還蠻容易上手的。

首先,必須先把會用到的 .js 抓回來。 (  jQueryBlockUI )
然後在網頁上引用他們。


    <script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
    <script src="Scripts/jquery.blockUI.js" type="text/javascript"></script>


而使用 BlockUI 的方法則是:
$.blockUI({ message: '<div>處理中! </div>' });  

不過,為了讓等待時不枯燥無聊,所以另外放了一個會動的 .gif 圖檔。可以到 ajaxload 去客製化自己喜歡的動態圖檔再下載使用。


完整程式如下:

Test.aspx

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
    <script src="Scripts/jquery.blockUI.js" type="text/javascript"></script>
    <style>
        .divAlert 
        {
            color:Red;
            font-size:18px;
            line-height:25px;            
            vertical-align:middle;
        }
    </style>
    <script>
        $(function () {
            $("input[id$=btn01]").click(function () {
                $.blockUI({ message: '<div class="divAlert">處理中! &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<img width="20px" src="./images/loader-red.gif"></img></div>' });  
            });

        });
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
    
        <asp:Button ID="btn01" runat="server" Text="點選" onclick="btn01_Click" />
    
       
        </div>
    </form>
</body>
</html>



Test.aspx.cs

using System.Threading;


protected void btn01_Click(object sender, EventArgs e)
{
    //讓程式跑久一點... 5 秒
    Thread.Sleep(5000);        
}

參考:
01:ajaxload
02:BlockUI Plugin - 功能完善的頁面、訊息遮罩
03:使用 jQuery 的blockUI 顯示 讀取中