Rony's

Using table in HTML and font size issue with IE

Rony — Fri, 26 Mar 2010 21:28:19 +0000

I don’t really understand why people don’t like to use table these days. I’m not a wise HTML guru or something but as far I understand table is a pretty little thing with some handy features, which does my work without much trouble. At least as long as you don’t have a very complex layout where it needs the use of several colspan and rowspans, table is really handy. I don’t have to bother about floats, breaking in browsers etc.

But there is a issue with the font size I faced in IE and Safari. If I define a font size in the parent element it doesn’t effect the content of the table. That was really confusing for me.

So, whenever using a table, it needs to define the font size for the table explicitely.

table{ font-size: 12px; }

Bookmark:

IE8 Issue with CSS margin:0 auto

Rony — Thu, 25 Mar 2010 19:40:02 +0000

It is a common practice to use the CSS style – margin:0 auto to make a content centered. This very simple effect gave me a really hard time for last couple of days. This works pretty fine on FF-3.x, Opera-9.x, Safari-3.x, IE-6(!) and IE-7. But when I load it with IE-8, the element is left aligned, not centered!!! I was just thundered and had not idea what to do.

So what was happening?! Is it another bug of IE-8 to make us hate it more?! Not exactly. After finding out what was happening, I think that was pretty much my fault and I can forgive IE for this one time.

Enough bullshit, let’s come to the point. There are three possible solutions for this problem.

First one:

Make sure that the page header has this: “http://www.w3.org/TR/html4/strict.dtd”>

If we don’t say IE how to render the page, it may fail to render the page properly. Its foolish and all other browser can do it OK, but we can forgive IE for that.

Second one:

If the content where the style is added isn’t a block content (e.g. input element), this might happen. In that case adding display:block might work. Another way to work around in this case is put it inside a block content (e.g. div element) and set text-align:center. (I didn’t try this myself)

I can forgive IE for this too, as W3 also suggests that for non block element the rendering of margin:0 auto is undetermined.

Third one:

With the property margin: 0 auto also define a width explicitly (e.g. width:300px) and this should work. I didn’t try this either as the first solution worked for me and didn’t have any more patience left.

If anyone have tried the second and third solution and found any certain result, let me know

Bookmark:

আশাবাদী হতে ইচ্ছে করে

Rony — Thu, 25 Mar 2010 19:08:37 +0000

২৫মার্চ সকালে ঘুম থেকে উঠে ইচ্ছে করল দেখি আশাবাদী হবার মত একটা খবর অন্তত খুঁজে বের করি। চারিদিকে তো শুধু নেই নেই রব। কোথাও আশা নেই। ভাবলাম খুব ছোট্ট একটা আশার বানী অন্তত খুঁজে বের করি। পত্রিকাটা নিয়ে মনটা সত্যিই খুবই খারাপ হয়ে গেল। সারা দেশে ১৪কোটি মানুষের ভিড়ে কি একটাও ভাল খবর নেই। রোজই হয়ত পত্রিকাটার পাতা একই রকম থাকে, কিন্তু আজ ব্যাপারটা খুব চোখে লাগলো।পত্রিকার প্রথম দুটি পাতা এইরকমঃ

এত সংবাদের ভীড়ে একটাও ভাল খবর নেই। স্বাধীনতা দিবসের প্রাক্বালে মনটা খুব খারাপ হয়ে গেল।

Bookmark:

Get image data from client side using javascript

Rony — Tue, 15 Dec 2009 19:02:17 +0000

Well, I had a requirement to show a preview of image, whenever client selects an image inside a form. First I thought it was just a easy task… But it really took about one hour of me to figure the way out…

As it was an input element with type=file, I simply tried to get the value and push it to an image element’s source attribute attaching ‘file://’ at the beginning. But life’s not that easy! The value only returns the file name not the full path. How can I get the full path??!! I can see the path on the input box, but I can’t get it!!!

Next approach, go to our best friend, Google! Well, I guess she wasn’t very pleased with me and didn’t help me very much…

Now what?! Well, let’s try the DOM inspector of Firefox. There I found three functions for the file input element.

getAsBinary()
getAsDataURL()
getAsText()

They are all self explanatory… My head was already stuck at that moment. So I didn’t see the ‘Data URL’ function first. Tried to parse binary for a while. But couldn’t find a way to push the binary data of an image inside the image tag. Then I noticed the next function. Well, it worked like a charm. I just pushed the function’s return value to the image tag’s source attribute. Done.

So, to get the file path, the call should be like:

file_input_element_id.files[0].getAsDataURL()

That’s all…

N.B. For IE, it works OK with adding the ‘file://’ before the value of input element. You just need to have proper permission level.

Bookmark:

আবোল তাবোল

Thu, 15 Oct 2009 17:57:52 +0000

কিছুই লেখা হয় না বহুদিন হল। সারা দিনের কাজ কর্ম, ক্লান্তি সব কিছুর পরে আর ধৈর্য্য হয় না। আর বাঙ্গালীর তো আজকাল এমনেতেই ধৈর্য্য কমে যাচ্ছে। পরিবেশ দূষনের প্রভাব মনে হয়!! হা হা!! ব্যাপারটা নিয়ে গবেষনা হতে পারে… কি কারণে সব ধৈর্য্য, সহনশীলতা আর ভদ্রতা হারিয়ে যাচ্ছে সবার মধ্যে থেকে… যাকগে, এসব নিয়ে গবেষনা করে বনের মোষ তাড়ানোর লোকের অভাব নেই বাংলাদেশে। আমি আপাতত আমার চারপাশ থেকে মশা তাড়াই। মশার কামড়ে অতিষ্ট হয়ে গেলাম। আচ্ছা, এই যে গত ২৪ বছর ধরে মশার কামড় খেয়ে আসছি, এতদিনে তো এটাতে অভ্যস্ত হয়ে যাওয়ার কথা। Evolution তো তাই বলে নাকি? ডারউইন সাহেব কে পেলে জিঞ্জ্বেস করা যেত। তাঁকে আর পাব কোথায়? মশার কামড় খেয়েই লিখতে থাকি। অবশ্য মশারির ভিতরে ঢুকে যাওয়া যায়, কিন্তু ল্যাপটপ নিয়ে লিখতে গেলে পিঠে ব্যাথা হয়ে যাবে। আচ্ছা, লিখতেই যে হবে এমনও কোন কথা নেই। থাক, লিখি কিছুক্ষন। অনেক দিন ধরে ব্লগটা ফাকা পড়ে আছে।

দুদিন ধরে ঘোড়া রোগ বাস কম্পানি গুলোর। সোজা রাস্তা রেখে দুনিয়া ঘুরে যাওয়া আসা করবে। প্রতিদিন পাক্কা ৪ ঘন্টা করে রাস্তায় নষ্ট হয়। ৪ এর মধ্যে ৩ ঘন্টাকে যদি কর্ম ঘন্টা ধরি, তাহলে কত টাকার ক্ষতি হচ্ছে? আউটসোর্সিং এর ক্ষেত্রে বাংলাদেশের IT ডেভেলপারের গড় rate ২০ ডলার/ঘন্টা ধরলে, ৩ ঘন্টায় ৬০ ডলার। মাসে ২০ দিন এই ভাবে মোট খরচ ১২০০ ডলার!!! হায় আল্লাহ এতো দেখি আমার মাসের বেতনের চেয়ে বেশি হয়ে যাচ্ছে!! ভালই… দেশ এগিয়ে যাচ্ছে। আমরা এখন মেগা সিটির বাসিন্দা।

সবকিছুতেই আজকাল negative দিকটাই আগে দেখছি। কারণটা কি? না মানব হয়ে যাচ্ছি নাকি? ‘না মানব’! ভাল হয়েছে তো নামকরণ টা। মাঝে চেষ্টা নিয়েছিলাম জোর করে ‘হ্যাঁ মানব’ হওয়ার। হয়ে গেলাম উল্টোটা। ভাবছি এবার জোর করে না মানব হওয়ার চেষ্টা করব। যদি অবস্থার কিছু উন্নতি হয়।

আচ্ছা, আমি তো আমার দেশটা কে অনেক বেশি ভালবাসি। তাহলে কেন সব খারাপ দিক গুলোই চোখে পড়ে? ভাল দিক যে পড়ে না তা নয়। আসলে দেশের খারাপ দিক না। মনে হয় দেশের মানুষ এর। আমার দেশটায় চুড়ান্ত রকমের দূষন দেখা দিয়েছে। মানব দূষন। আমিও বেচে নেই এই দূষন থেকে। মাঝে মাঝে পালাতে ইচ্ছে করে। কিন্তু আবার ভাবি, ধ্যাত, পালাব কেন? আসলে হয়ত পালানোর জায়গাও নেই। তাই একটু হিরোগিরি দেখানোর চেষ্টা।

আজকাল সারাক্ষনই মেজাজ খারাপ হয়ে থাকে। বাসায় থাকা চাচাতো ভাইটাকে গত ৩ বছরে কখনো বকিনি। কিন্তু কাল প্রথমবারের মত বকা দিলাম। কিন্তু সেটাও অকারণে। বাইরে বের হলেতো কথাই নেই। মনে হয় নিজে ছাড়া আর সবাই উলটো পথে চলছে। আসলে হয়ত আমি নিজেই সোজা পথটা দেখতে পাচ্ছি না।

মেজাজ খারাপের কোন কারণ খুঁজে পাই না। খুঁজতে যাইও না অবশ্য। সেটা খুঁজে বের করতে গেলে মনবিঞ্জানে PHDর থিসিস পেপার হয়ে যাবে।

কি সব আবোল তাবোল লিখে যাচ্ছি। এটা অবশ্য মজাই। যাই লেখো না কেন, কেউ কিছু বলবে না। অর্থহীন হলেতো আরও ভাল। সবার মাথার উপর দিয়ে যাবে। কেউ কিছু না বুঝে উলটো বাহবা দিয়ে যাবে! খাসা হয়েছে বৎস, চমৎকার লিখেছ। কিন্তু লিখেছি যে কাকের ঠ্যাং আর বকের ঠ্যাং তা তো শুধু আমিই জানি। যে বাহবা দিচ্ছে সে ও জানে। কিন্তু বলে না। হাজার হোক মেগা সিটির বাসিন্দা। নাগরিক সভ্যতা বলে একটা ব্যাপার আছে না?!

সকল সুনারগিকদের শুভেচ্ছা। আর যারা এইযে ৩০ মিনিট নষ্ট করে এই লেখা টা পরলেন তাদের অনেক ধন্যবাদ। এই ৩০ মিনিটের মূল্য উপরের সূত্র অনুসারে ১০ ডলার = প্রায় ৭০০ টাকা। হা হা… বেশ বেশ… ভাল একটা সূত্র আবিস্কার করে ফেলেছি। আগামী বছর নোবেলের জন্য মনোনয়ন পেয়ে যেতে পারে। কিন্তু কোন বিভাগে পাবে এই ব্যাপারে একটু confusion আছে। এই confusion টার জন্য নোবেলটা আবার মিস না হয়ে যায়!!

Bookmark:

Advanced object selection using Mootools

Mon, 03 Aug 2009 19:30:25 +0000

Mootools’ “Selectors” utility has some really strong feature. It really saves a lot of time and sweat. Using this property, one can select a tag (any one can!), tag with specific name, id or any other attribute (huh!) and most amazingly part of a property value matching to some string…

Say you want to select all the div tags which has ID starting with ‘my’. How can you do that? Select all the div in the document, parse everyone’s id? Well, here this is a one line code in Mootools using the getElements function. It actually uses the general RegEx symbols to match property values.

To select the div with id starting with ‘my’ it would use getElements(‘div[id^=my]‘);

Some other examples from Mootools documentation:

//Returns all anchors within myElement. $('myElement').getElements('a');

//Returns all input tags with name "dialog". $('myElement').getElements('input[name=dialog]');

//Returns all input tags with names ending with 'log'. $('myElement').getElements('input[name$=log]');
//Returns all email links (starting with "mailto:"). $('myElement').getElements('a[href^=mailto:]');

//Adds events to all Elements with the class name 'email'. $(document.body).getElements('a.email').addEvents({ 'mouseenter': function(){ this.href = 'real@email.com'; }, 'mouseleave': function(){ this.href = '#'; } });

Mootools documentation on Selectors utility is here: http://mootools.net/docs/core/Utilities/Selectors

Bookmark:

Mootools Basics

Wed, 29 Jul 2009 17:54:21 +0000

Mootools is a great JavaScript library and I feel really comfortable using it. There are lot other libraries, like JQuery, DoJo, ExtJS. They have their own features, but I feel strong with Mootools. ExtJs is really good, but very much heavyweight. On the other hand Mootools is really lightweight. Including all the core features, it is only around 64KB. Special effects may weight around 100KB more.

Most used function of Mootools is the $ function. Its a bit confusing with JQuery and that’s why conflicts with JQuery, if used on the same page. $ selects a dom element from the document by its id. The syntax is $(‘element_id’). There is another pretty good function that I like is $$ function. It selects elements by class name or tag etc. More on this functions are available at Mootools documentation.

Mootools Request feature is another great thing to have. This AJAX calling function is capable of sending AJAX request either in GET or POST method.

These are the basic functions one may need to develop a regular web application. There are also other common helper functions for Array, String, Number, Cookie etc. For detail idea about Mootools it is suggested to visit Mootools Documentation at: http://docs.mootools.net/

One thing to keep in mind. Whenever you are adding some JavaScript code on your documents HEAD, make sure it is inside a document onReady or onLoad function. Otherwise you’ll get stuck with JS errors. Most of the cases, the common mistake is like using the JS code to get an element at the HEAD, but the body is still loading… So the script couldn’t find the element and through error.

For Mootools, this onLoad wrapping syntax is like this:

window.addEvent('domready', function(){ //Your Code Here });

Bookmark:

একটি মৃত আত্মা

Wed, 17 Jun 2009 15:33:54 +0000

অফিস থেকে ফিরছিলাম। রোজকার মতই চরম বিরক্তি আর ক্লান্তি নিয়ে। বাস থেকে নেমে কোন রিকশা পাওয়া যায় না। হেঁটেই বাসা পর্যন্ত আসছিলাম। অন্ধকার, ভাঙ্গা ফুটপাথ মাড়িয়ে। হাঁটার ক্লান্তি দূর করার জন্য নিজের মধ্যেই মগ্ন হয়ে ছিলাম। কিন্তু হঠাৎ করেই সামনে কি যেন পড়ায় থমকে দাঁড়াতে হল। সেই ভাঙ্গা ফুটপাথের অন্ধকারেই একটা মানুষ। প্রায় উলংগ। শুয়ে আছে। ঘুমিয়ে আছে?

বাস গুলো রাস্তায় পার্ক করা শুরু করার পর থেকে এই ফুটপাথটা খারাপ হয়ে গেছে। নেশাখোরদের আখড়া হয়ে গেছে। নিশ্চয়ই তেমন কেউ। মাত্রাতিরিক্ত নেশা করে বেহুঁশ হয়ে আছে। আমাদের এই ঘুনে ধরা দেশে এইসব নিয়ে মাথা ঘামানোর কিছুই নেই। পড়ে আছে, সকালে উঠে চলে যাবে। পড়ে থাকা শরীরটা ডিঙ্গিয়ে চলে আসলাম। কিন্তু তবুও কেন যেন মনে হল, মরে গেছে মানুষটা।

একবার ভাবলাম পুলিশ কে একটা ফোন করে দিলেই তো হয়। ওরাই যা করার করবে। তবু কেন যেন করলাম না।

সকালে অফিসে যাওয়ার সময় একই অবস্থায় পড়ে থাকতে দেখলাম লোকটাকে। তখনও ফোন করলাম না। কেন করলাম না? দায়িত্ব থেকে পালিয়ে গেলাম??

সত্যিই কি পালিয়ে যেতে পেরেছিলাম? সারাদিনই মনের মধ্যে একটা কিসের যেন খোঁচা লাগছিল! সন্ধ্যায় ফেরার পথে আবারও বাঁধা। এবার তার পাশে কয়েকজন পুলিশও আছে। জিজ্ঞেশ করে জানতে পারলাম, বেওয়ারিশ লাশ, তাই আঞ্জুমানের গাড়ির জন্য অপেক্ষা করছে। কেমন যেন একটা কষ্টবোধ ভেতরে। কেন কালই কোন ব্যবস্থা নিলাম না? তাহলে হয়ত মৃত মানুষটাকে দুইটা দিন রাস্তায় পড়ে থাকতে হত না।

আচ্ছা, এই মানুষটার জন্মের সময় কেউ কি ভাবতে পেরেছিল তার এমন পরিণতি হবে? তার মা হয়ত কত আদরেই না আগলে রাখত ছোট্ট বাচ্চাটাকে। তার জীবনের এত গুলো বছরে সে নিজে কি কখনো ভেবেছিল? আচ্ছা, কার উপর তার এত অভিমান ছিল যে নেশার হাতে নিজেকে সপে দিয়ে জীবনের এমন পরিণতি টেনে আনল? কিসের এত অভিমান ছিল তার?

তাকে যদি ঈশ্বর জিজ্ঞেশ করে কার প্রতি তোমার এত অভিমান? সেই তালিকায় আমার নামটাও কি থাকবে না? হয়ত সর্বশেষ নামটা হবে আমার। সে হয়ত অভিমান করে বলবে, সেদিন সন্ধ্যায়ই যদি কোন ব্যবস্থা নিতাম, তাহলে তার মৃতদেহটা নর্দমার পাশে দুই দিন পরে থাকত না।

Bookmark:

একটা সন্ধ্যা

Fri, 12 Jun 2009 20:30:28 +0000

অনেক দিন পর আজ বৃষ্টির সাথে দেখা। হঠাৎ করেই এসে সামনে হাজির। তার এমন অপরূপ রূপ বহুদিন হল দেখি না। আজকাল তার সাথে দেখাই হয় না। খবরই রাখিনা কখন এসে সে ফিরে চলে যায়। আসলেই অনেক বদলে গেছি আমি। তাইতো এত নিষ্ঠুর হতে পারি! তোমায় বলেছিলাম না, বৃষ্টি আমার প্রথম প্রেম। আমি তোমাকে বলেছিলাম, সে আমাকে সবার চেয়ে বেশি ভালোবাসে।

হতে পারে অনেক নিষ্ঠুর হয়ে গেছি আমি। ভেতরটা পাথর হয়ে গেছে। কিন্তু তারপরও আজ যখন ওকে দেখলাম মনটা কেমন যেন করে উঠল। কেন বলতো? আমার তো বিচলিত হবার কথা না!! কিন্তু ওকে দেখেই ভেতরের ঘুমিয়ে থাকা পাগলটা যেন লাফিয়ে উঠল! এতদিনের সাধনায় পাগলটাকে ঘুম পাড়িয়েছিলাম!! কিন্তু ওর একটা ডাকেই সে জেগে উঠল!

জান? আজ অফিস থেকে বের হবার সাথে সাথেই ধুলি মেশানো দমকা বাতাসটা যখন ধাক্কা দিল, তখনই মনটা কেমন যেন করে উঠেছিল। সবকিছুই যেন ছিল একদম গোছানো! আজ আমার সাথে তার দেখা হবার জন্য!! গুলশান নেমে যখন রিকশাওয়ালাকে ভাংতির অভাবে ভাড়া দিতে পারছিলাম না, তখন একটুও বিরক্ত লাগেনি। নিজে থেকেই দোকানে গেলাম ভাংতি করতে!!! তুমি ভাবতে পারো? আমি ফুরফুরে মনে রিকশাওয়ালার জন্য টাকা ভাংতি করতে জাচ্ছি? যখন দোকানীটা টাকা গুনে দেওয়ার সময় গল্প করে আমার দেরি করিয়ে দিচ্ছিল, তখনো বিরক্ত হইনি! মজা করে তার গল্প শুনছিলাম! যেন কোনই তাড়া নেই আজ আমার!

তখনও কি জানতাম তার সাথে দেখা করিয়ে দেওয়ার জন্য এটা প্রকৃতির একটা সাজানো খেলা!! আচ্ছা, যদি জানতাম, তাহলে কি আমি পালিয়ে চলে আসতাম? কি করতাম আমি বল তো? তুমি তো আমাকে বেশ চেন।

রাস্তাটা পার হয়ে গুলশান মার্কেটের সামনে দাঁড়িয়েছি আর বৃষ্টির ডাক শুনতে পেলাম। প্রথমে বিশ্বাসই হতে চাচ্ছিল না! বৃষ্টি আমাকে ডাকছে? আমি ওকে এত অবহেলা করার পরেও? আর জানো, আমি না এবার উপেক্ষা করতে পারলাম না! হঠাৎ করেই পাগলটা জেগে উঠল। সামান্যতম চিন্তা করার সুযোগও আমাকে দিল না! ছুটে চলে গেল ওর কাছে।

তারপর অনেকটা পথ আজ হেঁটেছি ওর সাথে। কিন্তু জানো কার কথা ভাবছিলাম তখন? অবিশ্বাস্য!! আমি তোমার কথাই ভাবছিলাম!! কি নিষ্ঠুর রকমের ধোঁকাবাজ আমি! বৃষ্টির সাথে হাঁটছি আর ভাবছি তোমার কথা! কিন্তু কি করব বলো? সারাক্ষন মনে হচ্ছিল, এমন একটা সন্ধ্যা তুমি আমার কাছে অনেক চেয়েছ। কিন্তু না না অজুহাতে আমি তোমায় দেইনি। কিন্তু আজ বৃষ্টি একবার ডাকতেই ওকে দিয়ে দিলাম?

এর ঘন্টা খানেক পরে যখন কাঁপতে কাঁপতে বাসায় ঢুকলাম, তখনো তুমি মাথার ভিতরে। বৃষ্টির স্নিগ্ধ ছোঁয়া সারা গায়ে। কিন্তু তবুও অস্বস্তি… স্যান্ডেলটা পুরোনো হয়ে গেছে। রাস্তার কাঁদা পানিতে চপচপ করছে। তোমার দেওয়া নীল টি-শার্ট টায় হয়ত দাগ পরে যাবে। তোমার দেওয়া ব্যাগটা চুঁইয়ে পানি ধুকেছে ভেতরে। মোবাইলটা ভিজে গেছে। মাথাটা ব্যাথা করছে খুবই।

আচ্ছা বলতো তোমাকে এমন একটা সন্ধ্যা দিলে কি এমন ক্ষতি হত? আসলে এটাই হয়ত ভালোবাসা।

আমি তোমাকে বলেছিলাম, সে আমাকে সবার চেয়ে বেশি ভালোবাসে। তুমি বলেছিলে, না হতেই পারে না। বৃষ্টি তোমাকে সবচে বেশি ভালবাসে। তোমার কথাই ঠিক জানো? নাহলে সে আসলে শুধু তোমারই কথা কেন মনে করিয়ে দেয়?

Bookmark:

Load Mesh from External File and Operation on It

Sun, 01 Feb 2009 23:16:52 +0000

What I did in this project is quite simple but a little out of the track. In this project I have all those regular graphical tasks like rotation, lightning, projection etc. But the main thing I did is to build a communication between DirectX, the platform I’ve used, and other graphics libraries and 3D modeling software.

This is a well discussed and pretty advanced way of DirectX. I’ve just studied on it and found some way to implement. Nothing new I’ve proposed here, but learned a lot.

I’ve worked on popular DirectX file format – .x and rendered the graphics information from .x to the screen.

I’ve used Microsoft Visual C# as programming language.

I’ve become interested about this .x file format while I was thinking of modeling my bedroom in 3D. That seemed to me like an amazing project, but it was a bit complex and large scale. Then I found this bridge between renowned 3D modeling software and DirectX. It’s possible to make a 3D model of almost anything using those software (e.g. 3D Studio Max, Maya, Poser etc.) and then I can export that model in DirectX format.

Most of the 3D modeling software supports this format. For 3D Studio Max I’ve used “PandaDXExport” plug-in.

I’d like to leave the discussion about the modeling process of 3D Studio Max or Maya to their own tutorials or documents. When I’ve been able to export the model in .x format, it’s now my job to extract the information from the file and display on screen.

First we need to know the format of X File.

Well, it’s not as hard like the unsolved case of FBI in the TV serial – X Files. It’s not even related. The .x file format is pretty simple. Some tag based information storing system. It is template-driven file format and is used by Direct3D Retained Mode to describe geometry data, frame hierarchies, and animations. In short, we store all information of a Mesh in an .x file.

Each file is lead by a header which contains the file format (e.g. text or binary), float length etc.

Then the templates are defined. Templates define how the data stream is interpreted—the data is modulated by the template definition.

Then data is defined. Data objects contain the actual data or a reference to that data. Each has a corresponding template that specifies the data type.

For more detail about .x file format, following website can be a good resource:

http://local.wasp.uwa.edu.au/~pbourke/dataformats/directx/

Mesh can hold all the Material and Texture information you need to draw an object. As an example, we could again put our whole 3D city into one mesh, have it optimized and displayed.

While loading a file that stores Mesh, it would be too complex to call individual function for individual type of object. So I’ve built a generic Mesh loading function where the file name is passed as argument.
LoadMesh(string file_path, string file_name)
Then I have loaded the Mesh file using the LoadMesh() function of Direct3D.
this.m_Mesh = Mesh.FromFile(file_name, MeshFlags.Managed, m_Device, out exmaterials)
Then I have extracted the material and texture information in separate arrays with the following code:

for (int i = 0; i < exmaterials.Length; i++) { string texture_file = exmaterials[i].TextureFilename; if (texture_file != null) { if (texture_file.Length > 0) { try { m_Textures[i] = TextureLoader.FromFile(m_Device, file_path + texture_file); } catch { MessageBox.Show("Error loading texture " + texture_file, "Error"); } } } this.m_Materials[i] = exmaterials[i].Material3D; this.m_Materials[i].Ambient = m_Materials[i].Diffuse; }

After this point I have all the material and texture information.

Now I have to draw the 3D object with the information I have in my hand. For this purpose, I have initialized the graphics earlier with the InitializeGraphics() function.

public bool InitializeGraphics() { PresentParameters parms = new PresentParameters(); parms.Windowed = true; parms.SwapEffect = SwapEffect.Discard; parms.EnableAutoDepthStencil = true; // Depth stencil on. parms.AutoDepthStencilFormat = DepthFormat.D16; try { this.m_Device = new Device(0, DeviceType.Hardware, this.viewPort, CreateFlags.SoftwareVertexProcessing, parms); } catch { MessageBox.Show("Hardware initialization failed", "Exception"); } // Turn on D3D lighting. m_Device.RenderState.Lighting = true; // Turn on the Z-buffer. m_Device.RenderState.ZBufferEnable = true; // Cull triangles that are oriented counter clockwise. m_Device.RenderState.CullMode = Cull.CounterClockwise; // Make points bigger so they're easy to see. m_Device.RenderState.PointSize = 4; // Start in solid mode. m_Device.RenderState.FillMode = FillMode.Solid; // Make the lights. SetupLights(); return true; }

Then in the paint function, first I have to setup the world and view matrixes, setup the camera and the lights. I have done this inside the function: SetupMatrices().

Inside the function, I have checked the user’s input and determined the rotation axes, camera position etc. The function definition of SetupMatrices() is like this:

private void SetupMatrices() { // World Matrix: const int TICKS_PER_REV = 10000; double angle = Environment.TickCount * (2 * Math.PI) / TICKS_PER_REV; switch (this.rotationAxes) { case 1: //X Axes this.m_Device.Transform.World = Matrix.RotationX((float)angle); break; case 2: //Y Axes this.m_Device.Transform.World = Matrix.RotationY((float)angle); break; case 3: //Z Axes this.m_Device.Transform.World = Matrix.RotationZ((float)angle); break; } // View Matrix: Vector3 camera_position = new Vector3(this.camXPos, this.camYPos, -20); camera_position.Normalize(); camera_position.Multiply(this.m_Range); this.m_Device.Transform.View = Matrix.LookAtLH( camera_position, new Vector3(0, 0, 0), new Vector3(0, 1, 0)); // Projection Matrix: this.m_Device.Transform.Projection = Matrix.PerspectiveFovLH((float)(Math.PI / 4), 1, 1, 100); }

And finally when all the setups are done, I draw all the Mesh and subsets from the .x file.
// Draw the mesh's subsets. for (int i = 0; i < this.m_NumSubSets; i++) { this.m_Device.Material = m_Materials[i]; this.m_Device.SetTexture(0, m_Textures[i]); this.m_Mesh.DrawSubset(i); }

That’s all except for the last line inside the OnPaint() function.

this.Invalidate();

This line refreshes the viewport on each tick and displays the new object position.

That described the flow of my work – how I have processed the .x file and printed the 3D Mesh on the screen.

Except the above codes, I have some user input handling methods. I have handled input for zoom in/out, moving the camera about X axes and Y axes, changing the .X File on the go etc.

The project loads .X file and renders it perfectly. Only has some problem with animation template. There has to be some more complex handling. I could not do it here but wish to. I had developed a sample animation in 3D Studio Max and added the exported .X file (Truck.x) in the project. But it does not load properly.

I had the plan to develop a 3D model of my bedroom and display it, but could not finish processing all those images to develop a 3D view. As a sample I have added a 3D view of a lobby which I found on the internet.

The .X files I have used here are from Microsoft’s ® sample file and from internet. Some are exported from 3D Studio Max.

Methods Used

	public displayX()	The constructor. This initializes the form.
	public bool InitializeGraphics()	Initializes graphics variables.
	public void LoadMesh(string file_path, string file_name)	Loads the Mesh from file (.x file).
	protected override void OnPaint(System.Windows.Forms.PaintEventArgs e)	The paint method. Renders the object on viewport.
	private void SetupMatrices()	Sets up the matrices required for 3D rendering.
	private void SetupLights()	Sets up the lights.
	private void InitializeComponent()	Initializes the form components like buttons, combo boxes etc.
	private void FillMode_CheckedChanged(object sender, EventArgs e)	Method handles the change of fill mode. Three options are available – filled, wire frame and point.
	private void zoomIn_Click(object sender, EventArgs e)	Handles the zoom in operation.
	private void zoomOut_Click(object sender, EventArgs e)	Handles the zoom out operation.
	private void xPlusButton_Click(object sender, EventArgs e)	Moves camera to the positive X axes.
	private void xMinusButton_Click(object sender, EventArgs e)	Moves camera to the negative X axes.
	private void yPlusButton_Click(object sender, EventArgs e)	Moves camera to the positive Y axes.
	private void yMinusButton_Click(object sender, EventArgs e)	Moves camera to the negative Y axes.
	private void XFile_SelectedIndexChanged(object sender, EventArgs e)	Handles the change of selected .x file and loads the new Mesh from file on the go.
	private void dispalyX_Load(object sender, EventArgs e)	This method is called on the form load. This lists all the available .x files and populates the combo box.
	private void xButton_Click(object sender, EventArgs e)	Changes the rotation axes according to the X axes.
	private void yButton_Click(object sender, EventArgs e)	Changes the rotation axes according to the Y axes.
	private void zButton_Click(object sender, EventArgs e)	Changes the rotation axes according to the Z axes.

The Code

There are several files and a lot of code in them. Most are for initializing the forms and UI development. All the codes and project files are available inside the download archive. The main code file required to render Mesh from external .X file is display.cs file. Code is commented for better understanding.

External Resources Used

Plug-in to export .x from 3D Studio Max