exscale.se

Bye, bye exscale!

Saturday, July 18, 2009

It's a bit overdue but I thought I'd write an "official" final post on exscale.se.

As you've probably noticed AndreasLagerkvist.com is live so when I have spare time I put stuff on there instead.

I've quit my job and will be moving to Thailand in a few months. Once I'm there and have chilled out for at least 2 months I thought I'd take some time to finally work on my own projects again :)

I've got a massive todo-list and prolly won't finish half of it, but here's some:

• -Brush-up all the old exscale-styles and go live with them (even the horrible ones) (just for fun :)-
• Fix quite a few annoying bugs with andreaslagerkvist.com
• Finish aFramework's admin and debug modes as well as the drag-n-drop page-builder and the installer
• Build:
  • aWiki
  • aWebShop
  • aForum
  • aGallery
• Fine-tune every site's every module, give them all hijaxed admins etc
• Create a site for aFramework, make sure everything from download to install to finished site runs smoothly on most systems and browsers and write good documentation
• Do something fun with the 3d-engine.. been thinking about a "guide" for aFramework-sites.. kindof like Dustin Diaz's mosquito (click "Tour") only I'd do something with the 3d-engine... we'll see what happens here :)
• Brush up some of the jquery plugins (color picker, image viewer, pixastic editor)

Also I've started playing around with a little more advanced coding (than html/css at least :) again. Really interested in getting into 3D and games again.

Depending on what I feel like in January I may skip the previous todo-list entirely and focus on this one:

• Create an Arkanoid-type game from scratch in Java and OpenGL
• Create a Pacman-clone in the same
• Get a 3D-object and a flat ground rendered on the screen that can be moved with an input-device

After that we'll see. If I'm lucky I might have time to do all of it and still come home with a tan :)

Those are the plans. In the future; check out AndreasLagerkvist.com instead, that's where it's all happening ;)

Adieu!

Update

All the old styles have been added again. Most could do with some brushing up though...

• Comments (0)
• Filed under Site News

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

jQuery Pixastic Editor

Friday, April 17, 2009

I started playing around with the Pixastic JS Library a few days ago and thought it was really cool.

For those that don't know it's a JS library that allows you to apply different effects to images using the canvas)-element.

So, naturally I had to create a jQuery plug-in that wraps all this cool functionality in a neat little package :)

The jQuery Pixastic Editor can be applied to any image in your document and inserts a completely stylable toolbar next to the image in question.

Have a look at an example

As usual I've set up a simple example-page, please have a look at the source for how to implement it. It requires a few other jQ-plugs and the options-form works best if you have the UI slider installed as well.

Without some sort of server-side script it's not possible to save the altered image as a new file, but the plug-in allows the user to click the modified canvas to open its dataURL in a new tab which allows him to then use the browser's save-functionality to save the image to their local machine.

It's dynamic like hell :)

The toolbar is automatically generated from all the actions currently in Pixastic.Actions. This means that your can download your own build of Pixastic and the plug-in will automatically adapt to whatever effects you've chosen.

Most of the effects require the you to set certain options, to avoid hard-coding each of the options for every effect I wrote a little PHP-script that parses the Pixastic website for information about each effect. When a new effect is added I run the script again and get the latest updates.

This means, however, that the options-form isn't exactly tailor made. Some of the options could very well be converted to drop-downs for usability, but it'll have to wait till next release.

I do look for certain things in the description of the option though like for example if anything like "X to|and Y" occurrs in the text I interpret that as min and max values for the option.

Any option with a min and max-value will get a jQuery UI Slider inserted beneath it (but only if the user of the plug-in has UI Slider installed).

Also, if the string "defaults to Z" occurrs I set Z to the default-value for that option.

I could (and will) probably solve the drop-down issue by looking for something like "one of "foo", "bar" and "baz"" as that is how the author of Pixastic most commonly describes options with several possible values.

Finally

There are a few more features I haven't mentioned like different styles etc also it's highly in beta and a lot could be added but do have a look and let me know what you think.

Oh and I've only tested it in FF3.

Laters!

• Comments are off
• Filed under jQuery

jQuery Drag to Select Plug-in

Monday, April 06, 2009

Use this plug-in to allow your visitors to select certain elements by dragging and dropping a "select box".

It works very similar to how most OS:es allow you to select files and folders.

I've set up a simple demo, please check the source-code for the different options. It's still in semi-beta.

All my plug-ins will be re-released on andreaslagerkvist.com once it's finished (right now I'm pretty much just waiting for PHP5.3 to be released).

• Comments are off
• Filed under Javascript, jQuery

Now with Ads!

Thursday, March 19, 2009

As you can see, unless you've got adblock installed, which you probably do.. :P, exscale.se has now got ads!

Most of the styles look like shit with the ad because it's too wide, but kubrick and aframework look fine.

AndreasLagerkvist.com is almost finished (although I don't think it'll be live for another few months) so I'm preparing to lay exscale to rest and the ads are one step in my plan towards becoming a millionaire without doing shit.

• Comments are off
• Filed under Other, Site News

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

A follow-up to "An alternative to div overlays"

Friday, February 13, 2009

"Cancel Bubble" pointed out in my previous post one thing that I hadn't thought of; users can still interact with the page behind when you don't use an actual element to cover it.

So, to solve this, but still use the same .dimmed-class on body, I simply added an empty div-element to body using JS:

.... code ...
<script type="text/javascript">
var div = document.createElement('div');
div.id = 'body-overlay';
document.body.appendChild(div);
</script>
</body>

And styled it, too, under body.dimmed:

#body-overlay {
    background: #000;
    opacity: .8;
    z-index: 1;

    position: fixed;
    left: 0;
    top: 0;

    display: none;
    width: 100%;
    height: 100%;
}

body.dimmed #body-overlay {
    display: block;
}

Together with the .dialog-styling I still only need to switch body's class to display a centered, modal dialog on top of a (now) non-interactive, dimmed page.

IE6 won't understand position: fixed; but I'm one of those that no longer care about IE6.

• Comments are off
• Filed under CSS, Javascript

An alternative to DIV overlays

Tuesday, February 10, 2009

When displaying a modal dialog it's pretty common to dim the rest of the page to focus the user's attention on the dialog in question.

A common way to solve the dimming is to overlay the entire page with a 100% wide, 100% high div-element with a little opacity and then display the dialog on top of the overlay.

Recently at work I tried a different aproach for solving the dim and it worked out quite nicely.

Instead of overlaying a semi-transparent div on top of the page I instead made the actual page semi-transparent and simply changed body's background to something a little darker.

The semi-transparent #wrapper and darker body are both styled under body.dimmed so whenever I need to dim out the page I simply give body a class of "dimmed".

The benefit here is that you don't need to play around with JS to create a div that always covers the entire viewport in every browser but instead you simply toggle a class-name on body.

Benefit number 2 is that since everything on your page (including the dialog) are contained within the body-element they too can be styled differently when body is dimmed and when it's not.

So the simple CSS turns out something like this:

/* Normal styling */
body {
    background: #369;
}

#wrapper {
    background: #fff;
    width: 960px;
    margin: 0 auto;
}

div.dialog {
    background: #fff;

    display: none;

    position: absolute;
    left: 50%;
    top: 15%;

    width: 400px;
    margin: 0 0 0 -200px;
}

/* Dimmed styling */
body.dimmed {
    background: #111;
}

body.dimmed #wrapper {
    opacity: .1;
}

body.dimmed div.dialog {
    display: block;
}

As you can see all you need to do now to display a centered dialog on top of a dimmed page is to give body a class of "dimmed". With jQuery it couldn't be easier:

$('<a href="#">toggle dialog</a>').appendTo('#content').click(function() {
    $(document.body).addClass('dimmed');
});

Happy coding!

Laters

• Comments are off
• Filed under CSS, Javascript, jQuery