Slider Update – Tab Feature Coming Together

As I finally reached a programming goal I had set – the tab hover javascript was working fairly well – I realised that users would want the option of positioning the tabs in the middle or corners of Slider’s four sides. Initially I had assumed it would be OK for users to have tabs positioned only in the center of either of the four sides.

Great, I thought. This shouldn’t be too bad – just increase the number of radio buttons available and position the tabs accordingly.

Four hours later, I “achieve” a build of Slider that exports without the dreaded Uncaught Exception 10.

None of the Javascript works, turns out that was where the final erroneous lines were. Not in the 6 other class files I combed through. Duh.

The radio buttons for selecting tab position changed from:

Ugh, these are so yesterday

Ugh, these are so yesterday

to:

Positioning Radios as they should be.

Positioning Radios as they should be.

Here is an example of the type of thing you’ll be able to do with Slider, when the rewrite is finally done:

It's getting there!

It's getting there!

Finally, I feel like the hours I’ve spent mashing my hands on my keyboard are starting to show results.

Not working, releasable results, but results all the same.

Still not working: arrows, timer, content (!), table row repositioning, titles, text shadow, effects (or any sliding at all, come to think of it), cell links.

I have another project that I will soon have to devote serious time to, but I’ll continue plugging away at Slider, I’m excited about the new version!

No comments | Trackback

The Mutations of Slider’s Tab Option Pane

During the past week, I’ve been working on Slider’s new Tab option pane.

I took screen shots before making changes to the layout.

Here they are:

Tabs Iteration #1

Tabs Iteration #2

Tabs Iteration #3

Tabs Iteration #4

I hope I’m not tempted to change things around again… I really need to get the backend going now!

No comments | Trackback

Slider Progress: Slider Styling Option Pane

During the great rewrite, I’ve been trying to focus on one section at a time. The first section to come under attack was “everything pertaining to the styling of Slider that is not Arrow-related”. After much mucking-about I decided to combine the Border, Rounded Corner, Background Image, Gradient and Background Colour onto one Pane.

I don’t know why I didn’t do this before, it is obvious and really the only logical way to present these controls – enabling some may disable others, it was confusing and clumsy when they were on different tabs.

Now users will be able to see what is being enabled/disabled without swapping between different tabs.

Here is a screenshot of the option page as it is currently:

Slider style configuration laid bare: Click to view

Slider style configuration laid bare: Click to view

This is about the 10th layout redesign, I’m quite sure there will be no major changes from now on.

Still a long way to go, but progress *is* being made.

Comments (1) | Trackback

Tile an NSImage Within an NSBezierPath

Another snippet I had to write during the great Slider rebuild.

I needed to be able to take an NSImage supplied by the user and tile it within an NSBezierPath defined by more user-set values.

The below example uses a rounded rectangle.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
NSBitmapImageRep *theImage = [[NSBitmapImageRep alloc] initWithBitmapDataPlanes:NULL pixelsWide:imageSize.width pixelsHigh:imageSize.height
 bitsPerSample:8 samplesPerPixel:4 hasAlpha:YES isPlanar:NO
 colorSpaceName:NSDeviceRGBColorSpace bytesPerRow:0 bitsPerPixel:0];
 
[NSGraphicsContext saveGraphicsState];
[NSGraphicsContext setCurrentContext:[NSGraphicsContext graphicsContextWithBitmapImageRep:theImage]];
 
//bgImage can be any NSImage
NSColor *c = [NSColor colorWithPatternImage:bgImage];
[c set];
[path appendBezierPathWithRoundedRect:NSMakeRect(0, 0, imageSize.width, imageSize.height) xRadius:10.0 yRadius:10.0];
[path fill];
 
[NSGraphicsContext restoreGraphicsState];
No comments | Trackback

Fill a Path With A Scaled Image, Ignoring Image Proportions

While continuing to rebuild Slider’s background image features, I was forced to rewrite the code that scales an image up/down to Slider’s portal size, ignoring the image’s original proportions. The image also had to be painted within a path, as Slider may have differently shaped corners compared to the image to be scaled.

The below code accomplishes the scaling and painting of the image.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
//theImage = the resulting image, that will have a scaled (proportions ignored) version of "bgImage" painted onto it
NSBitmapImageRep *theImage = [[NSBitmapImageRep alloc] initWithBitmapDataPlanes:NULL pixelsWide:imageSize.width pixelsHigh:imageSize.height
 bitsPerSample:8 samplesPerPixel:4 hasAlpha:YES isPlanar:NO
 colorSpaceName:NSDeviceRGBColorSpace bytesPerRow:0 bitsPerPixel:0];
 
[NSGraphicsContext saveGraphicsState];
[NSGraphicsContext setCurrentContext:[NSGraphicsContext graphicsContextWithBitmapImageRep:theImage]];
 
NSImage bg = [[NSImage alloc] initWithSize: imageSize];
 
//bgImage can be any NSImage
NSSize originalSize = [bgImage size];
[bg lockFocus];
[bgImage drawInRect: NSMakeRect(0, 0, imageSize.width, imageSize.height) 
fromRect: NSMakeRect(0, 0, originalSize.width, originalSize.height) 
operation: NSCompositeSourceOver fraction: 1.0];
 
[bg unlockFocus];
 
NSColor *c = [NSColor colorWithPatternImage:bg];
[c set];
[path appendBezierPathWithRoundedRect:NSMakeRect(0, 0, imageSize.width, imageSize.height) xRadius:10.0 yRadius:10.0];
[aPath fill];
 
[NSGraphicsContext restoreGraphicsState];

“path” could be any NSBezierPath.

Comments (1) | Trackback