Mashing In Some Graphics

August 2nd 12:30

by why

Okay, so, all these samples so far have used stacks and flows to get all the text and buttons and stuff into place. This way it all happily resizes just like a browser would.

It's samples/rect.rb.

But it all ultimately just gets pasted in the square. And, so, Shoes offers a NodeBox-like set of methods for painting in the window bounds. Check this out. (And see below for updated code!)

rectangles = proc do
  20.times do
    nostroke
    fill rand(0.6) + 0.4, rand(0.1) + 0.9,
      rand(0.2) + 0.8, rand(0.4) + 0.1
    r = rand(300) + 60
    rect rand(100), rand(200), r, r
  end
  button "OK", :x => 300, :y => 400 do
    clear &rectangles
  end
end

Shoes.app :width => 400, :height => 500, &rectangles

These calls aren’t just inspired by NodeBox. I tried to match things as close as possible. In retrospect, however, I might end up using an options hash. (So rectangles would be: rect :x => 10, :y => 10, :height => 50, :width => 50. Not too sure yet.)

The hacketiest part about this sample though is the clear method. That method there. It wipes the window. And if you pass it a block, it’ll use that to rebuild the window. Anyway, there are lots of ways to alter and clear out elements. Or swap in new ones. (Sorry I got no docs. Experimental shoes season ends September 1st.)

Update: This sample has changed in recent builds of Shoes. Try:

Shoes.app :width => 400, :height => 500 do
  rectangles = proc do
    20.times do
      nostroke
      fill rgb(rand(0.6) + 0.4, rand(0.1) + 0.9, rand(0.2) + 0.8, rand(0.4) + 0.1)
      r = rand(300) + 60 # radius
      rect rand(100), rand(200), r, r
    end
    button "OK", :top => 300, :left => 400 do
      # clear wipes out the window and uses the passed block to repaint
      # it again.
      clear &rectangles
    end
  end
  rectangles.call
end

Now begin the comments …

8 comments

Jon Leighton

said on August 2nd 13:16

You realise that rand(0.6) can return a value greater than 0.6 because the argument is converted to_i?

Other than that, cool. Have you looked at Scribble lately? Our syntax is nicer than NodeBox :)

Jon Leighton

said on August 2nd 13:19

Just to be uber-correct, the actual reason it can be great than 0.6 is because Kernel#rand “converts max to an integer using max1 = max.to_i.abs. If the result is zero, returns a pseudorandom floating point number greater than or equal to 0.0 and less than 1.0.”

Drew Olson

said on August 2nd 13:58

I’m very intrigued by the project, but for some reason the last two samples aren’t working for me on my windows system. The simple editor will not update when I press keys and in today’s sample there is no color differentiation between rectangles. Plus I get some bizarre error when I click “OK”.

Don’t mean to rant, I absolutely love your projects and enjoy following this blog. Just thought you might like to know that I’m getting some weird behavior on the windows end.

_why

said on August 2nd 14:08

Jon Leighton: I couldn’t seem to find Scribble last I checked. Anyway, good tips on rand.

Drew Olson: If you’re using the binary builds, they’re a bit behind. I’m working on getting a new one out today, but the only way to keep up is to build shoes yourself. Which has become much easier as of today.

Jon Leighton

said on August 2nd 14:50

We don’t have a website yet but we have:

Mailing list: http://groups.google.com/group/scribbl
Launchpad: https://launchpad.net/scribble
Campfire: http://scribblers.campfirenow.com/login

Progress is a bit slow at the moment because both Nathan and I are quite busy, but when we get a 0.1 out the door we intend to push for some more developers in order to keep the ball rolling.

Stuff I particularly like about Scribble syntax:

brush.fill = :red / 2 # => 50% opacity red
brush.stroke = :red + :yellow # => orange

raggi

said on August 2nd 22:33

You can build with the latest Windows SDK, you may need to copy SetEnv.cmd to vcvars32.bat inside of the Microsoft SDKs\Windows\v6.0\Bin directory. (Add this one to the rakefile?)

This evening I’ve been mostly playing around with:




	stack do


		LiveCode::Context = Proc.new{}.binding


	end

Allowing one to:




    when :alt_r


    	begin


    		debug.replace LiveCode.run(str)


  	rescue Exception => e


  		debug.replace e.message


	end

Which does:




	def LiveCode.run str


		Shoes.escape(eval(str, Context).to_s)


	end

Or something to that effect anyway…

Been suffering a few crashes here and there, but it’s all fun and games at this early stage!

Muchos gracias _why.

hgs

said on August 3rd 05:43

I’d recommend going with the options hash, for consistency with the shoes command itself.

Looking at that Scribble syntax above, I think Scribble and Shoes need to jump into Martin Brundle’s teleporter at the same time… :-)

Maz

said on August 3rd 09:07

Great code to make simple dialogs, been waiting for something like shoes for years.

While I was trying to get a grip on stacks and flows, I ran into a few problems.

The doc does not say how you specify either fixed width, or percentage. Even if I figured it out myself, you could add a quick note about Integer and Float.

From now, I’m only talking on win32 0.r27, I don’t have others systems to test, nor can I compile the latest version.

After some time, if I resize the window too many times, or for too long, it stops drawing background and text, however, buttons and keystroke still works.

There is also a problem with stacks and flows, I think. Let’s take the example :



label = “Shoes is a very informal GUI toolkit. It’s for making regular old windowing apps.\


 It’s a blend of my favorite things from the Web, some Ruby style, and a sprinkling of cross-platform widgets.\


 (More in the README.)”
Shoes.app :height => 800, :width => 600 do


  background “240, 250, 208)”


  stack :width => 0.50 do


    button “foo”


    button “bar”


    button “baz”


    text label


  end


  stack :width => 0.20 do


    text label


  end


end

From what I understand, the second stack should be aligned with the top of the canvas, while it is aligned with the top of the other text. Same with a stack followed by a flow. If I use 2 flows, the first text can go weird, and print on the other half of the canvas, on a single line. Same with a flow followed by a stack.

It acts the same with fixed widths.

If I try with multiple text, results are also strange.



label = “Shoes is a very informal GUI toolkit. It’s for making regular old windowing apps.\


 It’s a blend of my favorite things from the Web, some Ruby style, and a sprinkling of cross-platform widgets.\


 (More in the README.)”
Shoes.app :height => 400, :width => 600 do


  background “240, 250, 208)”


  stack :width => 200 do


    text label


    text label


  end


  stack :width =>–400 do


    text label


    text label


  end


end

Comments are closed for this entry.