2012年10月19日 星期五

[Web] jquery + processing.js

用 JQuery + JQuery UI + javascript + PHP + Processing.js

製作這個網站 - drawall



讓網友可以隨手塗鴉, 分享彼此的大作

也可以以四格連環漫畫的方式創作

主要的繪圖介面當然是以 Processing.js 來作



現在 chrome, firefox 對 HTML 5 支援度已經作得滿不錯了

其它的 UI 部份全部由 JQuery + JQuery UI 製作



以 JQuery 建構網是滿方便快速, 但可能有 performance issue

不過一樣的呈現方式, 以 javascript 來寫可能也會滿複雜的

用 JQuery 撰寫時間真的縮短許多

2012年10月16日 星期二

How to make a bootloader and test with VirtualBox

Make a bootloader



以 x86 來說, BIOS 在執行完所有任務後, 最後一件事就是
搜尋 floppy, hard disk, cdrom 的 cylinder 0, head 0, sector 1
(在 hard disk 上稱做 MBR)並將該 sector (512 bytes) 載入記憶體的
0x0000:7C00 開始執行. 在 MBR 還會多檢查最後 2 bytes 是否為 0x55AA

所以我們最簡單的 boot code 如下


[BITS 16]
[org 0x7C00]

start:
mov si,MSG
call print_string
jmp $

print_string: ; Expects null terminated message in si
mov al,[si]
or al,al
jz .end
inc si
call print_char
jmp print_string
.end:
retn

print_char:
mov ah,0x0E ; Specifies that we want to write a character to the screen
mov bl,0x07 ; Specifies output text color. Not required, but useful to know
mov bh,0x00 ; Page number. Leave this alone.
int 0x10 ; Signal video interrupt to BIOS
retn

;data
MSG db 'Welcome My Operating System!',0x0A,0

TIMES 510 - ($ - $$) db 0  ; clear 0 between data and 0xAA55
DW 0xAA55



用 nasm build binary executable file


nasm -f bin -o boot.bin boot.asm



Test with VirtualBox (version: 4.2.0)

首先, 用VirtualBox新增一個虛擬機器, 類型跟作業系統可以選 Windows, Windows XP
建立完成後, 找到這個虛擬機器的 hard disk file (.vdi) 用 HEX Editor 打開
找到這個位址 0x0000:0150 如下



紅框內的值就代表這個 vdi file 的 MBR 在 0x0000:2000
接下來把 boot.bin 的 512 bytes 完全 copy 到 0x0000:2000~0x0000:21FF
就大功告成了, 開機畫面如下




Reference 

Using Virtualbox as a bootloader testing environment
X86 開機流程小記 
Operating System Development - bootloader

2012年8月28日 星期二

[Web] Custom File Button

我們常用的 html upload file 的語法
<input type="file" value="Upload" />
會產生一個普通的按鈕
如果要保留 file chooser 功能又要美化按鈕外觀的話
可以搭配 CSS


style.css

.file_button_container,
.file_button_container input {
  height: 48px;
  width: 48px;
}
.file_button_container {
  background: transparent url(images/choose_file.png) left top no-repeat;
}
.file_button_container input {
  opacity: 0;
  -moz-opacity: 0.0;
  filter: alpha(opacity=00);
}


在 html 裡, 用一個 class 為 file_button_container 的 div
包住 file button


<div class="file_button_container" id="userfile_div">
<input id="userfile" name="userfile" type="file" />
</div>



就可以了

2012年7月15日 星期日

[Web] PHP 大檔案傳輸

php 雖然有 readfile() 但仍存在一些問題
在我的測試中, 即使修改了 php.ini 等設定檔
傳輸 data 量還是都無法超過10mb
不過還是利用 apache module plugin 找到解法
那就是 x-sendfile

在Windows/UniformServer平台下的安裝步驟

1. 在 Windows 平台下, 可以到這裡下載
http://www.apachelounge.com/download/

2. 安裝 vc2010 redist
http://www.microsoft.com/zh-tw/download/details.aspx?id=5555


3. 下載 x-sendfile
https://tn123.org/mod_xsendfile/


4. 修改 httpd.conf
加入 LoadModule mod-xsendfile/

5. restart apache server

大功告成!

UPDATE:
在 ubuntu 環境下, 要修改 /etc/apache2/sites-available/default
加入以下兩行

XSendFile on
XSendFilePath  /path_to_folder

2012年5月22日 星期二

2012.05.21 日環蝕



(F5.6 1/30~1/80 135mm ISO800)

地點
新竹-茄苳景觀大道

器材
Canon 400D + Tamron 18-200mm + 太陽瀘鏡

2012年5月7日 星期一

[iAudio] 音樂圖片播放器



  
軟體資訊

    iAudio Version 1.5 (x86/x64)

 

 

 

 

軟體特色

自製的一個簡單小巧的音樂圖片播放器,只要將電腦裡的音樂照片拖曳到iAudio就會加入播放列自動播放,還可以釘在Windows桌面上,讓你在瀏覽網頁或逛BBS時順便看看在電腦裡塵封已久的照片。

軟體功能


    ◎拖曳音樂檔至本程式即可播放,自動順序重覆播放一群音樂檔
    ◎拖曳圖片檔至本程式即可播放,自動順序重覆播放一群圖檔
    ◎支援的音樂檔案格式包括mp3、wma、midi、ogg、asf等
    ◎支援的圖片檔案格式包括jpg、png、bmp、tga、ico等



在極簡模式更省桌面空間

    釘選在桌面上一段時間後還會有驚喜喔~!



軟體下載

    x64 安裝檔

    x86 安裝檔

    x64 zip免安裝檔

    x86 zip免安裝檔

附註

本著作依據 Creative Commons 姓名標示-非商業性-相同方式分享 授權條款為授權
http://creativecommons.org/licenses/by-nc-sa/2.5/tw/

2012年5月3日 星期四

[Android] Custom TabHost

(1)基本的 Android Tabs 教學
http://jimmy319.blogspot.com/2011/08/android-tab-view-content.html

(2)讓 TabWidget 有 highlight/normal 模式的方法
1. 產生 tab_style.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_selected="true" android:drawable="@drawable/tab_highlight" />
    <item android:state_focused="true" android:drawable="@drawable/tab_highlight" />
    <item android:state_pressed="true" android:drawable="@drawable/tab_highlight" />
    <item android:state_selected="false" android:drawable="@drawable/tab_normal" />
</selector>

其中 tab_highlight/tab_normal 是圖檔

2. 設定 TabSpec

TabSpec tab = tabHost.newTabSpec("tab1");
tab.setIndicator("TAB1", getResources().getDrawable(R.drawable.tab_style));
tab.setContent(new Intent(this, MyTabActivity.class));
tabHost.addTab(tab);

成果如下


(3)縮短 TabWidget
1. 產生 tab 要用的 TextView

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:gravity="center"
    android:orientation="vertical">

<TextView android:id="@+id/tabsText"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:textSize="20dip"
    android:textColor="@drawable/tab_text_style"/>
</LinearLayout>


2. 利用 LayoutInflater 產生 TextView instance

private View createTabView(final Context context, final String text)
{
    View view = LayoutInflater.from(context).inflate(R.layout.tabs_text_only, null);
    TextView tv = (TextView) view.findViewById(R.id.tabsText);
    tv.setText(text);
    return view;
}


3. 設定 TabSpec Indicator 為 TextView

View tabView = createTabView(this, tag);
TabSpec tabSpec = tabHost.newTabSpec(tag).setIndicator(tabView)

4. 加上 tab divider
以下程式碼必須加在 create TabSpec 之前
tabHost.getTabWidget().setDividerDrawable(R.drawable.tab_divider);
最後的成果如下



參考
http://joshclemm.com/blog/?p=136

2012年4月26日 星期四

[Android] Custom ListView

介紹如何使用 ListView
ListView之一:Adapter介紹與使用

如何產生 separated header
Separating Lists with Headers in Android 0.9

當我們使用 custom background 時, 如果 scroll ListView
會發現出現黑色的背景, 這個問題的原因如下:

ListView 使用 transparent background, 但是在 scroll 時
會用 cache color hint 來當作背景以加速繪圖
詳細的說明在此 http://developer.android.com/resources/articles/listview-backgrounds.html

因此, 我們可以用 ListView::setColorHint() 或是 xml 來改變 scroll 時
會出現的背景色, 或設為 #00000000


2012年4月16日 星期一

[Android] google map api



要開發一個 google map activity 最先要繼承 MapActivity
拉一個有<com.google.android.maps.MapView /> 的 layout
在使用 MapView 時你會先要先註冊 api key

以下是常用的方法

初始化 MapView

MapController mc = mMapView.getController(); mc.setZoom(INITIAL_ZOOM_LEVEL); mc.setCenter(new GeoPoint(INITIAL_LATITUDE, INITIAL_LONGITUDE));
從螢幕座標取得地圖上的經緯度

GeoPoint tap = mapView.getProjection().fromPixels()
取得附近景點經緯度

Geocoder geoCoder = new Geocoder(this); List<Address> list = geoCoder.getFromLocationName("景點", 10);
靜態擷圖

URL url = new URL("http://maps.google.com/maps/api/staticmap?size=64x64&sensor=true&language=zh-tw&markers=color:purple|size:small|" + latitude + "," + longitude + "&zoom=15&scale=2");
URLConnection urlConn = url.openConnection();
urlConn.connect();
InputStream is = urlConn.getInputStream();
Bitmap thumb = BitmapFactory.decodeStream(is);
is.close();

直接使用 Google Map, 可以參考
http://jax-work-archive.blogspot.com/2011/07/google-maps.html
[example http://maps.google.com/maps?q=7-11&near=24.8039455,120.9646866&z=15]


其它參考資料
http://code.google.com/intl/zh-TW/android/add-ons/google-apis/reference/com/google/android/maps/MapView.html
http://www.myandroid.tw/bbs-topic-962.sea
http://itpower.blueshop.com.tw/?p=345 規劃導航路徑 Directions Route

2012年3月12日 星期一

javascript read server-side file

使用 jQuery 是最簡單的方法
jQuery 是一套強大的 javascript library
以下簡單幾行就可以讀取 server-side text file

$.get('foo.txt', function(data) {
var myvar = data;
alert(data);
});

其實 jQuery 是用 ajax 發出 HTTP Request 向 web server
要求 HTTP Response, 所以如果 foo.txt 的內容是
    Hello
    World
則 myvar 內容只有 "Hello", 如果改寫為 foo.php
    <?php echo "Hello\nWorld"; ?>
就可以得到有斷行的 data 了

以下是 sample code

<html>
<head>
<meta charset="utf-8">
<title>Demo</title>
</head>
<body>
<a href="http://jquery.com/">jQuery</a>
<script src="jquery-1.7.1.min.js"></script>
<script>
$(document).ready(function(){
$.get('foo.php', function(data) {
var myvar = data;
alert(data);
});
});

</script>
</body>
</html>

2012年2月17日 星期五

Build WxWidgets with VC++


wxWidgets 是一個跨平台(Windows, Linux...)的 c++ application framework
已經有許多專案都用它來開發自己的 application, 以下是我用VC2008的
wxWidget build 流程
  • 首先當然要先到 wxWidgets 下載最新版本的 release package
  • 解壓縮後到 <wx>/build/msw/wx.dsw  開啟專案
  • 選擇<Solution Configuration> (以下為選擇 Unicode Debug 的步驟)
  • Build all
  • Build 好的 libraries會放在 <wx>/lib/vc_lib
  • Copy <wx>/include/wx to <Project>/include/wx
  • Copy <wx>/lib/vc_lib/*.lib to <Project>/lib
  • Copy <wx>/include/msvc/wx/setup.h to <Project>/include/wx
  • 修改 setup.h
  • #include "../../../lib/vc_lib/mswud/wx/setup.h"
      改成
    #include "vc_lib/mswud/wx/setup.h"
  • <wx>/lib/vc_lib/mswud/wx/setup.h 放到 <Project>/include/vc_lib/mswud/wx
  • 還要在專案的<Addtional Dependences>加入
    comctl32.lib (for InitCommonControls()...等)
    rpcrt4.lib (for UuidToString()...等)
  • 將 Hello World WxWidget source code 加入專案即可!!

Python Tkinter First Example

import tkinter as tk def on_closing():     root.destroy() class MainWindow(tk.Tk):     def __init__(self, *args, **kwargs):         tk.Tk.__...