Plugging 3D Libraries into Netbeans Platform (part 1 : Java3D)

by slurp Posted on August 28, 2013

This will be the first post of a series of trying and hitting some 3D libraries in Java. So far I know two of them, JOGL – the more primitive one, and Java3D, which wraps the former.

Good tutorial on how to start using JOGL with Netbeans Platform’s window system has been written by Netbeans Platform guru GJ on here. I’ve tried that and successfully stuck on AMD_64.dll problem. It turns out that the culprit was merely a Java-32-bit-on-64-bit-OS problem.

In this post I will put a different, brighter story than that of JOGL integration. At least I could make it works.

Yay!
Yay!

Before we start, here are some stuffs to get

  1. Java3D examples source code : Pull SVN described here
  2. Java3D binary : Get the appropriate one for your OS here. I personally picked j3d-1_5_2-windows-i586.exe
  3. Netbeans. I use Netbeans 7.3

Cheat Sheet


Load pulled Java3D examples source code into Netbeans. You’ll see that this Freeform project contains a vast array of packages and seemingly useful examples.j3dexamples
Expand the org.jdesktop.j3d.examples.print_canvas3d packages and right-click PrintCanvas3D.java then select “Run File”. If you have correctly installed aforementioned Java3D binary, JFrame will appear. Try to click “File” menu on the top left. You’ll see that those three menu items will appear on top of the blue canvas behind.
jframe

 

Create Module

 


Create New Project -> NetBeans Modules -> Module. Right-click on module’s node on project explorer, select “New”->”Window”. If the “Window” option was not there, you can select “New” -> “Other” -> Module Development -> Window. Put window position field on “editor”. Click Next. Put any prefix you like (I use j3dCanvas). Click Finish.

On the Matisse editor (Design mode), add a new JPanel to the TopComponent, and set its layout as “BorderLayout”. Next, change JPanel’s variable name to drawingPanel.
tc2

First, refactor copy OffScreenCanvas3D.java from PrintCanvas3D.java‘s package to the same package as the TopComponent (this point onward, I’ll call it TC). Also, create new package and name it “resources”. Copy beethoven.obj from resources directory of j3d example to this package. You can find beethoven.obj using “Files” window.
beethoven
Next, go to the Source mode of our TC, and copy some lines of code from PrintCanvas3D’s constructor into TC’s constructor. If a prompt pops and asks to resolve import elements, just click OK.
tccons
Copy createOffScreenCanvas, createSceneGraph, createUniverse method and variables declaration from PrintCanvas3D.java to TC. Modify filename variable declaration such that it points to the correct location of beethoven.obj. In my case, it is private URL filename = j3dCanvasTopComponent.class.getResource("/com/java3d/print/resources/beethoven.obj");

Right click on module’s node, and choose Run. If our TC is not opened yet, you can open it through Window menu. After TC is shown up, try click “File” menu on the top left and see what happens.
menuback

We’ll solve that glitch on the next post.

Posted in netbeans platform | Leave a comment

Removing a Row on jQuery DataTables

by slurp Posted on June 5, 2013

So I tried Charisma, a Bootstrap-based admin panel and implemented a server-side code using CodeIgniter. Charisma uses DataTables, a jQuery plugin that “is a highly flexible tool, based upon the foundations of progressive enhancement, which will add advanced interaction controls to any HTML table”. At least that’s what DataTables said.

datatables

Good template (thanks Mr. Usman!). Now let’s put some javascript codes into that red, delete button. Here I used Bootbox library to show confirmation dialog, as well as noty to show error notification.

I used DOM as data source for my DataTables :

<?php foreach ($order_data as $row) { >
     <tr id="ordrrow-<?php echo $row->orders_id; ?>">
     ...
     </tr>
<?php }?>

Here’s the code for that red button :

<a class="btn btn-danger order-delete" href="" id="<?php echo "btn-$row->orders_id"; ?>">
     <i class="icon-trash icon-white"></i>Delete
</a>

$('.order-delete').click(function(e) {
    var id = $(this).attr('id').substr(4);
    e.preventDefault();
    bootbox.confirm("Are you sure? ", function(r) {
        if (r) {
            //sent request to delete order with given id
            $.ajax({
                type: 'post',
                url: site_url + 'order/delete_order',
                data: {order_id: id},
                success: function(b) {
                    if (b) {
                        //delete row
                        orTable.fnDeleteRow($('tr#ordrrow-' + id)[0]);
                    } else {
                        //failed to delete, sent noty in
                        noty({
                            text: "Failed to delete, please try again later",
                            layout: "topCenter",
                            type: "alert",
                            timeout: 3
                        });
                    }
                }
            });
        }
    });
});

It works. Here’s few things to notice in this javascript code :

  1. Line 3 is important! You have to write it down or otherwise the page will reload (since we normally put href="#")
  2. Line 9 is where we use global javascript variable site_url, which has been defined somewhere as echo site_url()
  3. Line 14 : I choose DOM (the simplest one) since I don’t think my table will grow into million of rows. This line wasted most of my time googling since I didn’t realize on the first time that I have to use that index selector [0]. If you just write orTable.fnDeleteRow($('tr#ordrrow-'+id)), the row will be removed successfully but the counter (on the lower left of the table) will not decrement.
Posted in CodeIgniter | Tagged , , | 2 Comments