HW8

數位媒體概論期末心得報告

數位媒體概論這門課讓我學到了不少知識，除了BCB的視窗設計能力還有的就是練習在網路上查資料。從一開始的開BMP檔到開WAV，除了第一、二個作業，幾乎都用到網路上的資料，檔案標頭檔的讀入，第幾個BYTE到第幾個BYTE是做什麼的，真的需要網路的資料來完成。

這是我頭一次見識到BMP 、GIF、WAV的檔案是什麼樣子的結構，照這種模式可以想像也許JPEG，AVI也能如此的應用，只要知道第幾個BYTE到第幾個BYTE所表達的東西，就可以利用網路上的資源把他程現在自己的程式裡。光是作業實作的部分，在完成的那一剎那是非常有成就感的。相信所有的程式設計者都有這種感覺，看著自己做的程是成功執行的瞬間，那是多麼的欣喜若狂，因為經歷了DEBUG過程的艱苦。就拿第6個作業，我整整花了12個小時在畫波形，網路資料一直找，BUG DE很久DE不掉，資料型態不留意就讓我浪費了許多時間。

程式回顧============================

2009數位媒體概論作業程式: 下載

==================================

而自己做的這個視窗程式，從一開始到最後，就像看著自己的電子寵物慢慢成長，不斷有新功能、新配備，腦中雖然有很多想法，但是卻往往礙於自己的能力沒辦法達成而放棄了，雖然這門課程結束了，但我還是會慢慢的想到什麼功能就加上去的。

BCB這套軟體讓我覺得非常實用，雖然現在還有C#可以做視窗程設，但是這學期接觸他這麼久了多少還是會想用他繼續創造視窗程式出來。還有許多的元件我都還沒試過也沒用過，感覺有非常大的發揮空間。還有一本厚厚的教科書沒看，我想那只能拿來當字典翻了吧，遇到不會的元件才去翻，像極字典了。

最後，這學期結束了，這門課也結束了，如果之後還有BCB的課程，我想還是會再去學的吧。

HW7

這學期最後一樣作業，處理WAV音訊，例如:修改音量大小。在還沒開始研究前我只知道BCB裡的MediaPlayer元件可以播放影音檔，但是他卻沒有提供調節音量等等的功能，可能有吧，只是我不知道也不會用。於是還是花時間上網找資料了，從網頁資料得知可以用PLAYSOUND的函數來開啟WAV，但是我翻了好半天卻還是沒有明確的講解，英文的話只能說看不太懂了。再來就是waveOut/In的函數，這個函數在我逛過的討論區裡，許多人的程式碼中都有出現像是:使用waveOutWrite播放wave ，只是要理解還是要花上許多的時間，但只能硬著頭皮去看別人的程式碼了。所以要修改類似音量的那些資料的話，必須讓他讀到記憶體後做修改在播放，這是我看完的感想，WAV的頭檔資料在前次的作業就已經全部到手了，剩下的就是要怎麼讓撥放的函數去利用那些資料了。

==================================
這次新增的功能是可以調整 X軸 與Y軸的放大倍率、WAV的播放停止，還有音量的大小、音調的高低。設計上是把取樣陣列的柱標值除上某個值就可以達成X軸的縮減，把取樣陣列的值除上某數就可以 完成Y軸的縮減，概念非常簡單。但是後來值型的時候卻發生錯誤，訊息是什麼參數錯誤之類的。原來是我不想音讓那個某值為0了，分母是不能為0的，所以發生了錯誤，於是只要再按鈕那加個if判斷式就能輕鬆的解決了。



















回到修改音量的問題，在網路上找了很久都沒看到有人討論音量的修改方式，只有說sampling 與音量的關係，例如:音源檔(.wav)音量之問 。最多是找到控制系統音量的方法，就是用waveOutSetVolume函數的文章，但是我比較想要的是控制WAV音量的方法。既然有方法而且又與音量相關，我就只好將就了，畢竟我找不到資料。只要把TrackBar 的position的值給到waveOutSetVolume函數就可以利用TrackBar 來設定系統音量了，TrackBar的MAX要初始化大一點，不然聲音會小到聽不見。
再研究過程中我試著把 取樣頻率 、位元速率作加加減減的看看播放聲音時會不會有一些變化，意外的發現取樣頻率 加越多音調越高，於是我又著手做了一個TrackBar 來改變音調的高低。於是就完成了這次的作業。


這次的程式對我來說算是非常艱難的，因為看了許多網友們的程式並研究，卻沒有很懂，哪些函數是做什麼的也不知道，但是就照著他們的做法去實作，感覺很不實在。可能自己的程式功力要再加強才能看懂網友們的程式碼吧。

HW6

經過前幾次BMP及GIF的作業之後，對於這次讀WAV的檔案資料就會先假設 : 是不是WAV也跟BMP及GIF的讀檔一樣呢?的確。而要先讀檔案的頭檔就要先找到他的BYTE是怎麼分配的，Resource Interchange File Format :wave wav byte的資料在維基百科好難找，好不容易才找到有說明所有頭檔byte的網頁。不過還是有許多討論區發表過類似的文章Delphi.ktop，查資料的能力真的要好，不然時間都花在上面真的很吃不消。
=================================
bytes # contains
0-3 4 "RIFF" in ASCII
4-7 4 Total bytes minus 8
8-15 4+4 "WAVE fmt" Eigth character is a space
16-19 4 16 for PCM format
20-21 2 for PCM format
22-23 2 channels
24-27 4 sampling frequency
28-31 4 bytes per second
32-33 2 bytes by capture
34-35 2 bits per sample
36-39 4 "data"
40-43 4 int4 bytes in data
===================================
頭檔byte總算到手，接下來把頭檔讀入在顯示出來就不是難事了。以下是我程式的設計界面與執行結果。程式是集合了前幾次的作業慢慢堆出來的，也修改了前次的介面讓他更乾淨俐落。合併BMP的灰階影像元件，新增BMP影像清除功能及簡易說明。這次的頭檔讀入我開始嘗試使用資料結構的方式，因為44個BYTE有點多，我看了都懶了，因此才決定使用資料結構的方式讀入標頭資料，不在是一直用fseek然後再fread了。


typedef struct {
char chuid[4];
byte wavsize[4];
char rifftype[4];
char sing[4];
byte flen[4];
byte ftag[2];
byte chan[2];
byte samr[4];
byte bsec[4];
byte bla[2];
byte bisa[2];
byte data[4];
byte len[4];
}WAV_header;
頭檔顯示成功!!雖然達到目標但這只是半成品而已，程式上面的黑色框框是我準備要來放音訊波形的地方，這裡讓我思考了很久，第一是要如何取得音訊的資料。第二是用取得資料後如何畫成波形。由上面的資料網頁可以得知，在44個byte之後就是所有音頻取樣的資料了，所以在這我想到用陣列來存放音頻的取樣資料。再來就剩下畫圖了，老實說我對BCB的元件還不熟，上網查了很久，有些人說用paintbox元件有些人說用CHART元件，但有些人的程就直接畫在FORM上。看完後我嘗試用CHART作波形，但由於他是本身就寫好專門畫的元件，雖然介面很漂亮也有3D的樣式，但感覺拿來畫音頻的波有點不適合，更重要的是他的X軸我不會設定，結果所有的線都擠成一團，看不出來波形，所以我放棄了CHART。


再來我轉戰paintbox他就好像影像元件，用Canvas->MoveTo和Canvas->LineTo 就可以來話波形了，看起來非常的簡單。但由於paintbox只要我一換視窗畫好的波形就不見了!!這令我很懊惱，想想他既然像Image元件，Image也有Canvas->MoveTo和Canvas->LineTo 所以就決定用他了。
執行完發現這圖形似乎怪怪的 就算把X放大 他也只會縮成一個破碎的長方形。這問題也讓我耗費了不少時間，原來是我取樣資料的資料形態設錯了!!比起4byte 的int還是2byte的short來的好。如此以來就算不縮放X，Y軸波形還是看得出來。














再來我試著讓所有的波形可以一次看到就不斷的放大X軸，結果發現後面似乎是沒有資料的，可是陣列卻開到了這麼大。我是以總取樣個數來當他的柱標值，但卻發生錯誤。後來發現用總取樣個數來當陣列總數是沒錯的，上面的資料網頁告訴我，錯的是我沒把SizeOfData除BlockAlignment來當總取樣個數，難怪會如此的龐大。




接著我想讓它的波形維持某個適當的大小，可以藉由捲軸來看想看的地方。SCROLLBAR元件研究許久我還是不會用，最後想到的方式是把Image放進SCROLLBOX裡然後讓Image的width可以放大到和總取樣各數相同，這樣才達成了我的最終目標。麻煩的是Image的原件必須先自己delete後再new一個新的出來設定，不然他不會乖乖的把width拉長，重複開檔也會一直複寫上去。




耗費了長達12小時的奮鬥，終於完成這個程式，有非常大的成就感，雖然這只是微不足道的小東西。但是在寫程式中學習到的卻是非常可貴的。

HW5

開完BMP圖檔，這次要開的是GIF的調色盤，GIF的頭檔資料大致上就跟BMP差不多，讀取的方式也都大同小異，只要把他一個BYTE一個BYTE抓出來顯示就可以知道他頭檔的資訊了。一開始寫的時候就很直覺的依照Graphics Interchange Format 的格式去 fseek、fread，而不用結構的方式讀入標頭檔，就像BMP的讀檔一樣。就是參照維基百科裡訊息 :(Graphics Interchange Format)
===================================
byte# hex value Meaning
----- -------- ------ ----------------
0: 47 49 46 38 39 61 GIF89a Header
6: 03 00 3 - canvas width in pixels
8: 05 00 5 - canvas height in pixels
A: F7 - GCT follows
B: 00 0 - background color #0
C: 00 - default pixel aspect ratio
D: 00 00 00 0 0 0 - color #0 black
: :
: :
30A: FF FF FF 255 255 255 - color #255 white
==========================================
只要知道這些資訊要讀入GIF的頭檔就很簡單了。
以下是這次設計的程式:















這次的程式設計是把上次的程式增加功能，多了PAGE分頁，可以區分BMP和GIF的開檔。
想要用分頁的時候，一直沒辦法把全部的原件加到PAGE裡，用了好久才發現，我是根本沒放進PAGE過，因為我增加PAGECONTROL原件卻沒有NEW一個PAGE出來，所以導致放不進去。所有元件準備好後就要開始把調色盤讀出來了，這裡也和BMP一樣做了一個色盤結構。
typedef struct {
Byte bRed;
Byte bGreen;
Byte bBlue;
}GIF_Palette;
然後把讀取位置指到第14個BYTE的地方，把RGB個一區塊一個區塊的放入影像元件裡。
imPalette->Canvas->Brush->Color =(TColor)RGB(crPalette[k].bRed,crPalette[k].bGreen,crPalette[k].bBlue);
實驗品當然是老師的小金龜子囉，但是我讀出來的調色盤顏色卻出現了問題!!顏色跟老師的調色盤不一樣!?
真是令我震驚，後來發現原來是我得讀取位置設錯了，其實是第13個BYTE的位址。這才是真正的調色盤囉~然後就是題目要的顏色排序了。利用灰階的明亮度決定排序的方式。依照(crPalette[k].bRed + crPalette[k].bGreen + crPalette[k].bBlue)/3;的值大小排序，而方法當然用最直覺的氣泡排序法了，
不斷的比亮度然後交換，把大的直往上推，就可以達到排序的效果，也是最簡易的排序法。C++可以直接用swap函數來進行交換，不過想了想我是在交換結構，不能圖個便利只能自己寫了。
排序的Button按下去!!感動的時刻啊~











本來還想在程式裡開一個完整的GIF檔，但BCB沒有支援，上網查了些資料說是要使用到第三元件TGIFImage V2.2 。但由於找到的此第三元件只支援到BCB5和Delphi5， 而且支援BCB5的還有少許BUG，所以我就放棄研究了。

再來就是找別的GIF檔測試了 ，他的背景顏色還是黑色的呢!!










這次的作業讓我到網路上找了許多資料，因為想顯示GIF圖檔的關係，雖然最後放棄了，但也在查資料的過程中學到很多，也很充實。

HW4

這是這次作業的程式設計，與前幾次不一樣的是我把某些功能編到主要工具列的工具選單裡，這樣可以讓程是看起來再簡單點，另外我把主要工具列的按鈕加上了快捷鍵，只要在按鈕名稱旁邊加上(&快捷鍵)就可以了。












這次的作業是要自己開圖檔，把BMP圖檔的資訊讀出來，再一個一個畫到影像元件裡，想了很久還是沒有頭緒，還是要借助範例程式的力量。但是程式打完執行時卻一直出錯，這讓我頭痛了大半天，範例程式裡:
delete imOriginal;
imOriginal = new TImage(this);
imOriginal->Parent = sbOriginalImage;
imOriginal->Left = 4;
imOriginal->Top = 4;
imOriginal->AutoSize = false;
imOriginal->Width = iImageWidth;
imOriginal->Height = iImageHeight;

imOriginal->Picture->Bitmap->PixelFormat = pf24bit;
imOriginal->Picture->Bitmap->Height = iImageHeight;
imOriginal->Picture->Bitmap->Width = iImageWidth;
這段 我把
delete imOriginal;
imOriginal = new TImage(this);
imOriginal->Parent = sbOriginalImage;
imOriginal->Left = 4;
imOriginal->Top = 4;
imOriginal->AutoSize = false;

刪去就可以執行了，真是神奇，不知道是因為我哪段程是沒寫好導致的，不過他能成功把圖畫出來真是讓我非常感動。

















這是執行的成果，這一刻真是讓人欣喜諾狂，在這裡遇到了以前的問題，就是只要再載入圖片前滑鼠移到灰階轉換的那個影像元件裡，灰階轉換就會出問題，下像下面的圖片一樣。

















最後是把那個影像元件的事件全部去除，才可以保證他不出問題。這樣就解決了長期衣來的問題，但是就沒辦法把灰階影像元件滑鼠指到的那格資訊給讀出來了，還滿可惜的，不過之後有辦法會再來把它完成。
















隨著程式功能越來越多，介面的設計也越來越重要了，要善用各種工具來完成，BCB也越來越好玩了!

HW3

這次作業是要把BMP的圖檔讀出，這是我設計的程式草稿。用上一次作業的程式改的，看著程式功能越來越多，就會有種得意的感覺，但這些都只是一些皮毛而已。 由於沒吸收到課堂上的資訊，程式打起來非常吃力，只能看著範例程式，慢慢研究了解。

上網看了BMP圖檔的頭檔資料，從0開始的2個位元組是顯示點陣圖文件的標示符BM，再來是4個位元組來顯示各項資料，維基百科標示了15組，而我簡單顯示8組資料。bsize[0]+bsize[1]*256+bsize[2]*256*256+bsize[3]*256*256*256可以把以4個位元組顯示的資料顯現在程式裡。

這是執行的結果，一開始執行的時候遇到一點困難，就是頭檔資料顯示一直不正確，dword 一直都只有第一個數字有值，其他都0。後來發現是我fread函數參數設錯，果然寫程式前要先了解函式的結構啊，這次還用到了fopen 和fseek C語言的函式，學的越來越多要記的也越來越多，這也是好事啊!

HW2

這次的作業是把彩色圖片轉換成灰階圖片，這是設計成品。











把RGB 三原色相加除以3就能實現灰階的想法了。
Gray=(GetRValue(Image1->Canvas->Pixels[X][Y])+GetGValue(Image1->Canvas->Pixels[X][Y])+GetBValue(Image1->Canvas->Pixels[X][Y]))/3;
過程中遇到點小問題，沒辦法顯示轉換過後超出範圍的部分，這讓我想了許多時間，最後是把Image2的大小再開檔時就定程Image1的大小，這樣才解決。












在這裡我一直想再轉換過後的圖也能塗鴉，想法是實現了，但是卻產生很多的BUG。像是先在Image2塗鴉過在載入圖片，就會發生圖片被放大的情況。思考了很久，最後還是放棄了這個想法。此外還遇到一個問題，就是如果執行程式後滑鼠移到了要轉換的那個影像元件上，他會自動變白，載入圖片後，就發生轉成灰階圖片只有看到的部分，其他部分還是空白的。這個問題我用了很久還是沒有解決。

HW1

過了好久終於拿到BCB的軟體了

這是我的設計
到測試完成的過程











程式大致上都是上課教過的，我把塗鴉筆加上了粗細選項，離小畫家又更近了。
本來還想再加進一些像小畫家的功能但迫於所學不夠，工具都只能做到一半就做不下去，有待於日後所學有成才能完成了。















有些比視窗還大的圖檔，超出的範圍就沒辦法看到，本來還在想捲軸元件在哪，找到之後卻用了很久，結果在別的工具頁看到捲軸箱的元件可以用。果然要先摸熟BCB裡的元件，設計程式才比較輕鬆。

































做到一半想把過大的圖片一次看全部，想了一些方法，最後是簡單的讓Image大小的最大值設限，就可以在範圍內一次瀏覽了。















但是後來發現了小BUG，全圖模式下塗鴉會有錯誤，塗鴉的圖案會集中在左上角，真令人不解阿。用了很久也沒辦法修正錯誤，可能用限制影像元件的大小來呈現完整圖片是無法正確塗鴉的吧。


BCB真的很好用，也很好玩，有許多貼心的設計。對自己的程式會有越來越多的想法想加進去，只礙於自己所學不夠阿。