Incendiary Software

Syntax highlighting using Trac WikiFormatting

August 16, 2010 Murph No comments

We’re getting to the point where we want to start writing tutorials on how to extend ShinyMUD to add custom features, and we started by creating a wiki page on our Trac site. We are currently using Trac 0.11.7, on ubuntu 9.10, and it is supposed to work out of the box using Pygments for syntactical highlighting of code posted in the wiki. But, when we look at the wiki page, all of our sample code is lifeless and colorless. We made sure that we had Pygments installed using

sudo apt-get install python-pygments
or
easy_install Pygments

But the colors still weren’t showing up. Finally, we were looking at the examples at trac.edgewall.org and noticed on my machine the colors showed up, but on Surrey’s they didn’t. That’s when we realized that Surrey has AdBlock activated in her browser, and I did not, so it had to be a javascript issue.

It turns out that Trac uses JQuery to handle a lot of it’s UI based features, and when we installed Trac through Ubuntu’s “apt-get install” command JQuery didn’t come with it. Whether it was missing as a requirement, or we missed a step in the setup process, we found ourselves without it, and didn’t know that we needed it . If you don’t already have JQuery installed, the javascript will just fail nicely, and you won’t know what is wrong. The command:

sudo apt-get install libjs-jquery

installed JQuery, and then we had to make sure that Trac had a soft link to it from where we had installed it

sudo ln -s /usr/share/pyshared/trac/htdocs/js/jquery.js /usr/lib/python2.6/dist-packages/trac/htdocs/js

and all of the colors magically worked! see example.

Uncategorized none

Simple ScrollBars in Pure ActionScript3

August 4, 2009 surrey No comments

Lately I’ve found myself needing scroll bars for applications large on content but small on space. Enter the Spiffy Sliders, two very simple classes for easily creating horizontal or vertical scrollbars in pure AS3! All you have to do is:

Create a sprite container to hold the content you want to scroll
Create a mask to define your viewing area
Pass mask and container to the SpiffySlider constructor.

// Make a container
var horizontalContainer:Sprite = new Sprite();

// Fill your container with content
 for(var i:int = 0; i<25; i++) {
     var hSprite:Sprite = new Sprite();
     hSprite.graphics.lineStyle(1, 0x000000);
     hSprite.graphics.beginFill(0x252525);
     hSprite.graphics.drawRect((i * 110), 0, 100, 100);
     hSprite.graphics.endFill();
     horizontalContainer.addChild(hSprite);
 }

// Create a mask to define the viewing area
 var hMask:Shape = new Shape();
 hMask.graphics.beginFill(0x000000);
 hMask.graphics.drawRoundRect(0, 0, 300, 101, 15);
 hMask.graphics.endFill();
 horizontalContainer.mask = hMask;

// Create a SpiffySlider and pass it your container and your mask
 var hSlider:HorizontalSpiffySlider;
 hSlider = new HorizontalSpiffySlider(horizontalContainer, hMask);

// Add your objects to the display area
 addChild(hSlider);
 addChild(horizontalContainer);

Now you’re ready to scroll! This produces the following with some rather uninspiring boxy content:

horizontal_image

HorizontalSpiffySliders will be auto-placed beneath your container and be set to the entire width of your mask. VerticalSpiffySliders will be auto-placed to the right of your container and be the entire height of your mask:

vertical_slider

If you like, you can customize the position, size, and color scheme of your spiffy bars. For example, if we added on to our previous snippet:

hSlider.setColorScheme(0xE9ECFF, /*Fill color of the track*/
                       0x000033, /*Color of the track border*/
                       0x0066FF /*Fill color of the handle*/);

 hSlider.setSize(200, 35);
 hSlider.setPosition(100, 150);

we would get the following changes:

blue_slider

NOTE that the SpiffySliders require TweenLite as the tweening engine for the sliding animation. Go get it for free from GreenSock. Of course, it would be very trivial to change this to use whatever tweening engine you wish.