3D Image Howto – A Simple Technique To Create 3D Vision

3D has been popular recently and become common ever since James Cameron filmed Avatar in 3D. Nobody can resist its marvellous effects. If the visual effect has already been impressive then 3D vision will make it double.

Well, 3D movie is not easy to make in contrast to 3D still picture. With photoshop, you can easily make your picture/photo shown on 3D. Of course, to gain the 3D vision, you have to get a red-cyan 3D glasses first. You can even make it yourself, but trust me, it’s cheap just search on eBay.

First of all, you need to know a little bit about the color channel system and layer system in photoshop. In a word, if you know photoshop well, making 3D still picture is just a piece of sushi. :)

Normally we need to take 2 photo (towards the same object or view) to simulate the left and right eye vision, then render them (project them) into the same place, We need to use the red-cyon glasses to filter the different color to cheat human’s eye that there is a depth of the object to form 3D vision. But In our case, we just have one photo, so need to use some powerful tool like photoshop to separate the color channel and combine them together.

Let’s do it now. First of all, you need to get a photo which you would like to make it 3D. Well, theoretically can be any picture. But better use some simple for practicing at the first time. You need to adjust detailed part of picture to make the depth of vision vary ( make it more 3D)

In this example I would like to use Ninja Gaiden Sigma II poster, I am fascinate in Ninja Gaiden series ever since XBOX age. It is considered to be the great action game in the world, even now, I don’t think there is an action game can beat it. But believe me it’s more vicious and violent when comes to episode 2 (Ninja Gaiden II and Ninja Gaiden Sigma II), please play this game with parent guided. :)

Download this picture(wallpaper from Tecmo official website):

Open it on photoshop, of course, you can DIY some decoration on this photo first.

1. Duplicate the image into 2 layers. Select the 1st layer, and go to channel panel, and delete whole red channel to create left eye vision, like the picture shown below:

2. Select the 2nd layer and do the same thing, but this time, remove Green and Blue channel to create right eye vision:

3. Select the top layer ( in this case, “layer 1 copy”), and then select “Multiply” color bending to combine those 2 layers:

Now you should be able to preview your picture using the red-cyon glasses. But, the 3D vision is not so strong, because we are not using 2 pictures and we just simulate these pictures are captured by both eyes. So need to adjust the detail part of the image to create more real vision.

Just take the Ryu Hayabusa’s foot as an example. As the picture shows, the foot should be closer to the camera, so we need to adjust the right eye vision a little bit, to create closer look:

4. Select the foot part of the body:

Use move tool to move the distance right a little bit, like 2 pixels. After moving the foot part, you can see there is a while gap between ankle and leg, So we need to fix this:

5. Select smudge tool to blur the gap:

6. Repeat the detailed adjustment like head, hand and the sword.

7. Finally: (Click to open to see the full image)

More :)

Gallery CMS MOD: View As HTML or Partial HTML

Gallery CMS  provides an easy-manage CMS (Content Management System) framework for gallery. I like the way they manage data, all the data are exposed as XML or JSON. It is not a complete solution of photo gallery online, but if you need to integrate photo gallery on your website that would be a very good start: you can easily develop or integrate. And guess what is the exciting part? It’s free! For more information, please feel free to download @ http://www.gallerycms.com/

It’s easily integrate but sometime you might need more convenience when integrate it to your website. Of course using XML or JSON which is the basic data structure is not that difficult, but I think most of time, for the integration itself, the most easiest and convenient is managing HTML. On the view if you are rendering the content partially, later you can use AJAX to replace the partial HTML content dynamically other than managing JSON on client side: we need rich client application, but if it lose weight a little bit, why don’t we make it lighter?

So, let us apply the MOD to it. It’s MIT license, so, no harm to mod it. Just pay a little attention to it’s license file: Gallery CMS comes with 2 licenses, one license is MIT license which represent itself, and the other license is derived from CodeIgniter which the basic framework.

1.\application\controllers\view.php //Add the following codes to it:

function html() {
$data['row'] = $this->gallery_xml->viewXML();
$this->load->model(‘settings_tbl’);
$data['settings'] = $this->settings_tbl->viewSettings();
$this->load->view(‘view_html’, $data);
}

2. On\application\views\ folder, create a file view_html.php

Please note that, you can make the view html a full html or you can partially render it like this:

<?php if(isset($row)) {?>
<div>
<?php foreach($row as $r){?>
<?php if(isset($r->images)) {
foreach($r->images as $img) { ?>
<div>
<div><a href=”<?php echo base_url();?>uploads/<?php echo $img->filename;?>” target=”_blank” title=”<?php echo $img->caption;?>”><img src=”<?php echo base_url();?>uploads/<?php echo $img->thumbnail;?>” border=”0″ align=”absmiddle” width=”<?php echo $settings[0]->thumb_width; ?>” height=”<?php echo $settings[0]->thumb_height; ?>”/></a></div>
<div><?php echo $r->title;?></div>
<div><?php echo $r->description;?></div>
</div>
<?php } ?>
<?php } //if  ?>
<?php } ?>
<div style=”clear:both”></div>
</div>
<?php }?>

After that, you can use: http://<GALLERY_CMS_WEBSITE>/index.php/html  to retrieve the HTML content. In our mod above, it is just partial HTML, so you can jQuery it:

$.get(‘http://<GALLERY_CMS_WEBSITE>/index.php/html ‘, null, new function(resp){$(‘#html-container’).html(resp);});

Nice and easy.

ASP.NET MVC Whole Site 301 Permanent Redirect

For some reasons, we need to permanently redirect the whole website to another website. It would be much easier that you are the owner of the server. But most of time you just host your website on the server out there. It wouldn’t be a big problem that your hosting company will support you to do some simple 301 redirect or may you have enough privilege to do it yourself. Is it possible to redirect permanently the website to other website by programming a little bit?

Sure you can. With MVC routing facilities, you can define your customized redirect logic: CREATE AN EMPTY MVC PROJECT, MODIFY GLOBAL.ASPX.CS FILE ONLY ON THIS EXAMPLE:

First of all, define two objects which implemented IRouteHandler and IHttpHandler, you can feel free to define those two objects on Global.aspx.cs file:

//@Implements IRouteHandler
class RedirectRouteHandler : IRouteHandler
{
private string newUrl;
public RedirectRouteHandler(string newUrl) { this.newUrl = newUrl; }
public IHttpHandler GetHttpHandler(RequestContext requestContext)
{
return new RedirectHandler(newUrl);
}
}

//@object implements IHttpHandler
class RedirectHandler : IHttpHandler
{
private string newUrl;

public RedirectHandler(string newUrl) { this.newUrl = newUrl; }

public bool IsReusable { get { return true; } }

public void ProcessRequest(HttpContext httpContext)
{
httpContext.Response.Status = “301 Moved Permanently”;
httpContext.Response.StatusCode = 301;
httpContext.Response.AppendHeader(“Location”, newUrl);
return;
}
}

Then add one line on RegisterRoutes(RouteCollection routes) method (in Global.aspx.cs):

routes.Add(new Route(“{*pathInfo}”, new RedirectRouteHandler(@”http://koumei.net”));

Now all request to the website will redirect to “koumei.net” permanently. :)

An Experimental Html5 Drama

After reading through all useful articles about Html5 and CSS3, I try to create a new Html5 template for my blog. If you would like to see something new about html5 and css3, have a look at this article:
70 Must-Have CSS3 and HTML5 Tutorials and Resources

Koumei’s experimental page is available here: http://koumei.net/html5.html

Nothing much currently. I am quite interested in creating the gradient background and rounded corner.

This page will be kept updating.

Say Hello to koumei.net on HelloVPS

Yesterday koumei.net was condemned due to bring down the whole hosting server for harmful scripts, according to the server support. Not easy to contact them since they are in states. I am desperate to stay on their server without any secure. I would rather move to another server than to explain I am innocent. So I will move out from their server, I don’t like their service as well. How come they close down my website so suddenly without 1 day or 2 days notice?

Thanks to Howie from states who provides me a shelter at this moment. koumei.net is homeless, desperate and depressed last night, but because of his kindly help that make me home again. Now let us say hello to koumei.net again on HelloVPS (HelloVPS.com).

hellovps

hellovps

MVC2 Bug on Data Binding in Listbox?

Seems MVC and MVC 2 don’t realize that there is an issue when binding the data on the view:

Given an extension on HtmlHelper: this extension will generate a list box in view based on the collection “cakes”. (Because I like cake, so I use dessert object as example :)

public static MvcHtmlString MyDropDownList(this HtmlHelper target, string controlName, IQueryable<Cake> cakes, object htmlAttr)
{
if (cakes== null)
return MvcHtmlString.Empty;
var cakesList = new SelectList(cakes, “Id”, “CakesName”);
return target.ListBox(controlName, cakesList, htmlAttr);
}

It is okay, but the main issue is if the when I specify the Model data on control name, it IS SUPPOSED to generate the list box with the data which retrieved from database are selected. Yes.  IT IS SUPPOSED TO BE. But, unfortunately, MVC fail to automatically bind data for us…  The data “cakesList” is showing properly, but with no preselect options. In most of the business logic, it’s not gonna work, because it is no point for user to re-select the options every time before save the data.

In this case, MVC is not gonna auto-bind the data for us, we just need to figure out another way to display and manipulate the data properly. So we will change something on the extension, view and the controller:

1. On the view, don’t specify the name to model’s name, For example, the data which will be weaved to list box is CakeViewData.CakeList, the data related to database is CakeViewData.Dessert.Cakes. Normally, we will use the extension to weave the data:

<%=Html.MyDropDownList(“Dessert.Cakes”, Model.CakeList, new { @class = “multiselect”, size = 5 })%>

Since MVC is not gonna take care of the data binding, The name (on parameter controlName) should and NEED to use other name instead. Change “Cakes” to any other name, for example, change to “MyCakes”:

<%=Html.MyDropDownList(“Dessert.MyCakes”, Model.CakeList, new { @class = “multiselect”, size = 5 })%>

2. Extension is changed to:

public static MvcHtmlString MyListBoxWithSelectedList(this HtmlHelper target, string name, IQueryable<Cake> cakes, List<string> selected, object htmlAttr)
{
if (interests == null)
return MvcHtmlString.Empty;
var cakeList = new MultiSelectList(cakes, “Id”, “CakeName”, selected);
return target.ListBox(name, cakeList, htmlAttr);
}

I just add a parameter “List<string> selected” in the extension which will be used in MultiSelectList object that can be bind to the the items to be selected.

3. In controller, before saving the data, need to use FormCollection or Request["Dessert.MyCakes"] to obtain the data “MyCakes” manually.

string myCakes = Request["Dessert.MyCakes"];
Dessert dessert = new Dessert{Cake = myCakes};

It might not be a bug actually. And in this example you can feel how flexibility that MVC can bring you: the way to manipulate the model or data varies!  :)

Happy programming in MVC 2!