用 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月19日 星期五
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 environmentX86 開機流程小記
Operating System Development - bootloader
2012年8月28日 星期二
[Web] Custom File Button
我們常用的 html upload file 的語法
<input type="file" value="Upload" />
會產生一個普通的按鈕
如果要保留 file chooser 功能又要美化按鈕外觀的話
可以搭配 CSS
在 html 裡, 用一個 class 為 file_button_container 的 div
包住 file button
就可以了
<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
在我的測試中, 即使修改了 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年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
其中 tab_highlight/tab_normal 是圖檔
2. 設定 TabSpec
成果如下
(3)縮短 TabWidget
1. 產生 tab 要用的 TextView
2. 利用 LayoutInflater 產生 TextView instance
3. 設定 TabSpec Indicator 為 TextView
4. 加上 tab divider
以下程式碼必須加在 create TabSpec 之前
最後的成果如下
參考
http://joshclemm.com/blog/?p=136
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
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
其實 jQuery 是用 ajax 發出 HTTP Request 向 web server
要求 HTTP Response, 所以如果 foo.txt 的內容是
Hello
World
則 myvar 內容只有 "Hello", 如果改寫為 foo.php
<?php echo "Hello\nWorld"; ?>
就可以得到有斷行的 data 了
以下是 sample code
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
- 將 <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 加入專案即可!!
#include "../../../lib/vc_lib/mswud/wx/setup.h"
- 改成
#include "vc_lib/mswud/wx/setup.h"
訂閱:
文章 (Atom)
BlueTea螢幕錄影程式
螢幕錄影新選擇:簡單、方便、免費 現在的螢幕錄影工具多樣,但安裝麻煩、操作複雜讓人卻步。我們推出了一款全新的螢幕錄影程式,專為追求簡單和效率的你設計。 1. 免安裝 無需安裝程式。解壓縮後點兩下就可以開始使用 2. 可選取錄影範圍 自由選擇全螢幕、特定視窗或自定義區域,靈活應...
-
Download nodejs tar.gz from nodejs $ unzip nodejs tar.gz $ ./configure $ sudo make install That's it! You can do a little test t...
-
本文參考自 http://code.google.com/p/webm/ 中的 README.android 並加入一些操作細節, 以解決 build error 1. Create Android application project 2. Create <...
-
基本上參考這兩篇的作法就不會錯 How to Create a SSL Certificate on Apache for Ubuntu 12.04 Apache2 SSL in Ubuntu 不過在更改 VirtualHost 時, 應改為 <VirtualHo...