exscale.se

Kukk3D - Javascript 3D Engine

Thursday, April 30, 2009

I had so much fun playing around with canvas when I built the Pixastic Editor that I decided to port my really old 3D-engine, Kukk3D, to JS.

Click the image to view a demo

At the moment it's really basic even though it has support for faces (something that the old one never had) as well as lines and vectors.

You can add any type of object you like to the scene, move it around and re-render it. To animate you'd wanna do this X times per second, usually through a setTimeout.

A basic example:

<canvas id="kukk3d"></canvas>

<script type="text/javascript">
// Initiate the engine, pass in the canvas-ID and set width and height
Kukk3D.init('kukk3d', 640, 480);

// Create an object
// You can create any object you like or use one of the presets in objectSkeletons
var cube = Kukk3D.addObject(Kukk3D.objectSkeletons.cube());

// Now that the scene contains something, let's render it
// You can pass in a color-object as the only argument to render
// in order to fill the scene with a background-color
Kukk3D.render({r: 0, g: 0, b: 0, a: 1});

// To animate we simply move about the object and re-render
// the scene in a setInterval that runs every 50 ms
setInterval(function () {
    cube.rotation.y += 2;
    cube.rotation.z += 1;
    Kukk3D.render();
}, 50); // 50 ms = 20 fps
</script>

What you reckon?

• Comments are off
• Filed under Development, Javascript, Old School

More than one draggable scroll container in jQuery UI

Thursday, March 12, 2009

jQuery UI's draggable plug-in has a scroll-setting which, if set to true, automatically scrolls the container of a draggable object.

The plug-in looks for the first parent-element with overflow set to either auto or scroll of the draggable element if the scroll-option is set to true.

But if you have one area with elements that you can drag onto another area you might want both the draggable and the droppable area to scroll when dragging occurrs.

Thus, I've made a few small changes to the scroll-function of the draggable plug-in which allows for the scroll-option to be a comma-separated list of CSS-selectors which will act as scroll container(s).

What I basically had to do was just wrap the whole functionality in a loop and store more than one overflow-object in an array.

The stuff you want to change to allow this starts with:

$.ui.plugin.add("draggable", "scroll", {

And you want to change it into (I've commented by changes)

$.ui.plugin.add("draggable", "scroll", {
    start: function(e, ui) {
        var o = ui.options;
        var i = $(this).data("draggable");
        var j = 0; // Added this for looping

        o.scrollSensitivity    = o.scrollSensitivity || 20;
        o.scrollSpeed        = o.scrollSpeed || 20;
        i.overflows            = []; // Added this to hold all the overflow elements

        // If the scroll-option is a string
        if (typeof(o.scroll) == 'string') {
            // Break out all the selectors and store the elements in the overflows-array
            var selectors = o.scroll.split(',');

            for (j = 0; selectors[j]; j++) {
                i.overflows.push({
                    overflowY: $(selectors[j]), 
                    overflowX: $(selectors[j])
                });
            }
        } else {
            // This is the same as before except I put it all in the first element of the overflows-array
            i.overflows[0] = {
                overflowY: function(el) {
                    do { if(/auto|scroll/.test(el.css('overflow')) || (/auto|scroll/).test(el.css('overflow-y'))) return el; el = el.parent(); } while (el[0].parentNode);
                    return $(document);
                }(this), 
                overflowX: function(el) {
                    do { if(/auto|scroll/.test(el.css('overflow')) || (/auto|scroll/).test(el.css('overflow-x'))) return el; el = el.parent(); } while (el[0].parentNode);
                    return $(document);
                }(this)
            };
        }

        // Added the loop so that this happens to all overflow-elements
        for (j = 0; i.overflows[j]; j++) {        
            if(i.overflows[j].overflowY[0] != document && i.overflows[j].overflowY[0].tagName != 'HTML') i.overflows[j].overflowYOffset = i.overflows[j].overflowY.offset();
            if(i.overflows[j].overflowX[0] != document && i.overflows[j].overflowX[0].tagName != 'HTML') i.overflows[j].overflowXOffset = i.overflows[j].overflowX.offset();
        }
        
    },
    drag: function(e, ui) {
        var o = ui.options;
        var i = $(this).data("draggable");
        var j = 0; // Added this for looping

        // Added this for-loop as well as put everything in the overflows-array
        for (j = 0; i.overflows[j]; j++) {        
            if(i.overflows[j].overflowY[0] != document && i.overflows[j].overflowY[0].tagName != 'HTML') {
                if((i.overflows[j].overflowYOffset.top + i.overflows[j].overflowY[0].offsetHeight) - e.pageY < o.scrollSensitivity)
                    i.overflows[j].overflowY[0].scrollTop = i.overflows[j].overflowY[0].scrollTop + o.scrollSpeed;
                if(e.pageY - i.overflows[j].overflowYOffset.top < o.scrollSensitivity)
                    i.overflows[j].overflowY[0].scrollTop = i.overflows[j].overflowY[0].scrollTop - o.scrollSpeed;
            } else {
                if(e.pageY - $(document).scrollTop() < o.scrollSensitivity)
                    $(document).scrollTop($(document).scrollTop() - o.scrollSpeed);
                if($(window).height() - (e.pageY - $(document).scrollTop()) < o.scrollSensitivity)
                    $(document).scrollTop($(document).scrollTop() + o.scrollSpeed);
            }

            if(i.overflows[j].overflowX[0] != document && i.overflows[j].overflowX[0].tagName != 'HTML') {
                if((i.overflows[j].overflowXOffset.left + i.overflows[j].overflowX[0].offsetWidth) - e.pageX < o.scrollSensitivity)
                    i.overflows[j].overflowX[0].scrollLeft = i.overflows[j].overflowX[0].scrollLeft + o.scrollSpeed;
                if(e.pageX - i.overflows[j].overflowXOffset.left < o.scrollSensitivity)
                    i.overflows[j].overflowX[0].scrollLeft = i.overflows[j].overflowX[0].scrollLeft - o.scrollSpeed;
            } else {
                if(e.pageX - $(document).scrollLeft() < o.scrollSensitivity)
                    $(document).scrollLeft($(document).scrollLeft() - o.scrollSpeed);
                if($(window).width() - (e.pageX - $(document).scrollLeft()) < o.scrollSensitivity)
                    $(document).scrollLeft($(document).scrollLeft() + o.scrollSpeed);
            }
        }
    }
});

So to use more than one scroll container simply specify the scroll options like so:

$('li').draggable({scroll: '#drop-area, #drag-area', refreshPositions: true});

I'm also setting refreshPositions to true so that the droppable's positions are recalculated when user drags (you can try it without to see the problem otherwise).

jQuery.com has this to say about refreshPositions: "Caution: This solves issues on highly dynamic pages, but dramatically decreases performance." so use with care.

Note that this is for version 1.5.3, not sure if this is fixed or if it looks even remotely similar in latest version.

• Comments are off
• Filed under Development, jQuery

aFramework Install

Thursday, November 13, 2008

Last few weeks I've been working on aFramework's installation wizard whenever I've had some spare time.

The entire config-handling has been rewritten and is now completely dynamic. This allows the installation wizard to adapt to whatever sites the user selects for installation.

I've set up a demo-page so please have a look and tell me what you think. The demo won't actually install anything but it looks and behaves exactly the same as the real thing.

I should mention that both the logo and the icons are temporary (possibly even the entire design). A mate of mine is working on some new stuff but I kind of liked those dark icons I found on iconspedia.com so I felt it was time to stick it online.

• Comments are off
• Filed under aFramework, Design, Development

aFramework drag n drop admin

Wednesday, August 27, 2008

I've been working hard all night coding a drag n drop admin for aFramework. It allows you to add and remove modules to the page you are currently at.

Just like every other admin in aFramework this one is run directly on the site. You just log in and that allows you to customize the page as well as eventually add and remove articles etc (this is already possible in v2, just have to convert it to v3).

Update

aFramework v3 requires PHP 5.3 to work, something my host does not offer (yet, it's only in beta) but I've set up a static example of the drag-n-drop admin so you can at least get a feel for how it works.

After adding a module it will never stop loading. This is where aFramework would actually run and render the module using AJAX. Since this is just a hard-coded version in pure HTML, CSS and JS the AJAX:ing won't work.

You can try disabling JS if you like - it works without as well. You won't be able to either add nor remove modules without JS in the static version though (for the same reasons as the AJAX-calls don't work).

Ok, check it out!

• Comments are off
• Filed under aFramework, Development

aFramework progress

Friday, August 15, 2008

I've finished most of the actual framework-code now. There's some left but nothing I really need to build a project.

All that's left now is to build all the modules that make up aBlog (there's like 40 of them).

Here's a screenshot of aFramework's debug-panel. As you can see some of the module's are from aFramework itself, some from aCMS. This is possible thanks to aFramework's site-hierarchy feature.

You may also note that the module I'm hovering with my mouse (Navigation) is highlighted on the site (well actually low lighted as I set opacity to .2).

The next step is to start building modules. AndreasLagerkvist.com should hopefully be up and running in about a month.

Ciao

• Comments are off
• Filed under aFramework, Development

aFramework version 3

Friday, July 25, 2008

The reason I've been so ridiculously quiet the last few weeks is because I've been working on version 3 of my framework, aFramework. The one that the blogging-software exscale.se runs on.

Version 3 will include loads of new features and enhancements but still be focused on making things as simple and logical as possible to both the user and the developer.

I've set up a new category for aFramework-related articles and I'm going to start documenting a lot more there.

Some of the things you can look forward to in version 3 include:

• Super-simple yet powerful routing allows for complete URL-restructuring with the change of one line of code. Also works without MOD_REWRITE and from any sub-directory.
• Even more powerful CSS constants and variables. Auto-prefixing of selectors for module and controller CSS-files. Caching!
• Cached modules.
• All sites now also have the ability to inherit from any number of parent sites. This means that if you want to set up your own web-shop/blog you can simply create a MySite that extends aBlog and aWebShop as well as aFramework and URLs, controllers, modules, styles and scripts will be merged into one. If you're happy with just a blog you can download a release of aBlog or you could check out the svn repo, create MyBlog and extend aBlog from it. That way you can make changes to the blog without having to touch aBlog's source-code.
• Version 3 includes a new feature that allows you to include additional template-code before or after a module's template simply by creating a BeforeModule.tpl.php or AfterModule.tpl.php
• Nicer debugging with loads more information.

The biggest things are really the routing (which I think turned out pretty nice) and the whole new site inheritance-thing.

The way it works is that you specify a SITE_HIERARCHY constant on site-level that tells aFramework which sites your site is built from. The value of the constant is a space-separated string of site-names starting with the one with highest priority and could look something like: 'MySite aBlog aWebShop aFramework'.

Now, every time aFramework requests a controller, or a module-class, or a stylesheet, or a template-file, or a route (etc) it starts by looking in the site highest in the hierarchy and works its way down.

This way you can create totally customized sites without writing more than a couple of lines of code.

Using the BeforeTemplate.tpl.php and AfterTemplate.tpl.php files you can easily customize default modules to your liking. If you want to override the entire module-template simply create a file by the same name.

That's what's been keeping me quiet (and off sleep). There's no deadline for v3 but I've actually set up a sprint backlog which should be finished in a couple of weeks so maybe something to show then.

Stay tuned.

• Comments are off
• Filed under aFramework, Development

Prefix CSS-selectors PHP Class

Thursday, April 24, 2008

Recently at work I had to combine a site's existing design and a PHPBB-template.
If you've ever worked with PHPBB (front or back-end) you'll know it's no dream.

The hardest part with combining PHPBB (or any other third-party-software) with your own code is to make sure your CSS-rules (well JS as well I suppose) don't collide.

PHPBB styles h1:s, you style h1:s, PHPBB styles a:s, you style a:s. It's a right mess when both are trying to style elements on such a general level.

As most websites nowadays, most of PHPBB's themes has a wrapper-div around the entire website so I had an idea to manipulate all of PHPBB's CSS-code before output and add that wrapper-div's ID-name in front of every selector.

So instead of PHPBB styling all the h1:s in a document, it would only style (in this case) #wrap h1:s (#wrap is the name of the wrapper-div in the prosilver-theme).

Recent versions of PHPBB include a similar type of CSS-compression as I've explained before in CSS compression and constants PHP-class so you have access to every line of CSS code in a variable before it's outputted. The merging of CSS happens in PHPBB3/style.php. Look at the very bottom and you'll see something like echo $theme['themedata']; The themedata-index in the $theme-array is what contains all of the CSS for that theme. What you want to do here is run my function on that variable before output:

So instead of:

echo $theme['theme_data'];

You want:

require_once 'CSSSelectorPrefixer.php';
echo prefixCSSSelectors($theme['theme_data'], '#wrap');

The function will then add #wrap at the beginning of every selector in the string.

One problem with this though is that #wrap isn't the root-element of the document, the html-element is. So any styling on body or html will have no effect as they will be changed to #wrap body and #wrap html. I believe this is what you want in most cases as you've probably styled both elements in your own CSS.

The function will also remove duplicate #wrap:s (if the PHPBB-style contained something like #wrap a the function will turn it in to #wrap #wrap a, but before it returns the new code it will remove all duplicate #wrap:s (or whatever you set)).

This really simplified the design-move and hopefully it will help someone looking to do the same thing.

You can as usual get the code from my Google Code repository.

Laters

• Comments are off
• Filed under CSS, Development, PHP

More to the Console than just Log

Friday, January 04, 2008

I just recently found out that the Firebug console has quite a lot more to offer than just its log-method.

If you want to dump an entire object you can use console.dir() (works very similar to PHP's var_dump() if you're familiar with it).

You can also time the execution of a certain part of your script by running console.time('Timing this and that'); and console.timeEnd();

There's even more goodness so check out Firebug and Logging unless you have already, and sorry if this is old news to you.

• Comments are off
• Filed under Development