Picture Shoes

August 9th 15:13
by why

A cheap, little shadow is all you get today, folks.

Sorry, the Shoes repo is pure shrapnel right now. I suck!

On with the lesson. It seems like a big part of knowing HTML involves background image hacks. Take the above window. The gradient has to tile and reposition against the window edges. That’s going to take some work!

To make this stuff easier, I wanted Shoes to allow stacks and flows to each have multiple backgrounds. And for backgrounds to simply be pattern elements that can be resized and individually positioned.

The shade edge in the above window has five images involved. The top side, the left side, the right side, and the two corners.

Shoes.app do
  background "static/menu-gray.png"
  background "static/menu-top.png", :height => 50
  background "static/menu-left.png", :top => 50, :width => 55
  background "static/menu-right.png", :top => 50, :right => 0, :width => 55
  image "static/menu-corner1.png", :top => 0, :left => 0
  image "static/menu-corner2.png", :top => 0, :right => 0
  # ... form stuff here ...

Oh, wait, six images. The plain gray in the back.

Take a look at these. With the sides of the app, I’m able to limit the widths and heights of the backgrounds to get them to repeat only within a certain size.

And, like HTML, you can specify a right offset rather than a left, if you want the image or background to stay against the right size.



said on August 10th 11:46

Nice. Do all these images float and therefore affected by each other, or does it use absolute positioning? How about an option for either one?


said on August 10th 13:24

Well, Shoes doesn’t use the notion of “float” like CSS does. The images do change position as the window size changes, if that’s what you’re asking. They are absolutely positioned, albeit against different origins.

You could also accomplish this layout by using a flow. It’s sort of like floating, in that all the elements fill in space horizontally before moving down. So, the top side would be three images: corner1.png, top.png and corner2.png. The widths of these three images would have to be: 55, -110 and 55. The -110 means expand to 100% minus 110 pixels.

So, some things are obviously taken from HTML, but other things stem from ideas I had while working on HTML that just wouldn’t do what I wanted.


said on August 10th 14:16

_why could you provide the 6 images you used? It would really help with understanding. [And in my case debugging my misunderstanding :) ]


said on August 10th 14:35

Why not just allow for gradients to be specified directly, instead of using pngs to simulate them?


said on August 10th 15:42

datatec: They are checked into Subversion. See samples/form.rb.

dan: Sure, you could do that once I get the patterns stuff done. I don’t know, maybe sometimes programming a gradient is harder to get perfect when compared to just painting it.


said on August 14th 03:19

Maybe you could use one image and specify widths/heights for the outside non repeating bits.

Shoes.app do
  background "little_bacground.png", :top_rect => 50,
                                     :left_rect => 55,
                                     :bottom_rect => 0,
                                     :right_rect => 55

It’s nothing some ASCII art couldn’t explain!


said on August 14th 11:04


Comments are closed for this entry.