librelist archives

« back to archive

Green Shoes: Simple code, some questions

Green Shoes: Simple code, some questions

From:
Eduardo Argollo
Date:
2011-08-20 @ 19:15
Hi guys,

I have some free time this summer and, triggered by the minimize to tray 
from Green Shoes, I decided to go on an old project of mine (it feels I 
am always starting this project over and over).

I have most of the ruby code for the main quizzing functions done (at 
https://github.com/eargollo/Quizzer if anyone is interested) and I was 
just starting to do the interface.

I would like very much it to look like the Shoes example at 
http://the-shoebox.org/apps/145. The problem is that I am not being able 
to put this app, neither mine, to work properly in Green Shoes.

A practical example is the code:

Shoes.app :width => 600 do
   stack :margin => 20 do
     label = "Click me"
     col = rgb(0.8, 0.8, 0.8)
     flow :margin => 20 do
       background col, :curve => 20
       para label, :align => 'center'
       para label, :align => 'center'
       para label, :align => 'center'
       para label, :align => 'center'
       para label, :align => 'center'
       para label, :align => 'center'
       click { exit }
     end
   end
end

The result of this code can be seen in the attached pic.

Some of the problems I am facing are:
1) The "click { exit }" does not apply to the flow, but actually to the 
stack
2) The flow with the para's is putting each para over the other, not 
side by side
3) The flow grows only to fit half of the para's
4) The right margin is at least twice the left one.

Anybody can help me fixing my interface?

Thanks,
Eduardo.

PS.: Environment: Windows 7, Ruby 1.9.2p290, Green Shoes (1.0.273, 0.263.0)

Re: [shoes] Green Shoes: Simple code, some questions

From:
ashbb
Date:
2011-08-20 @ 23:21
Hi Eduardo,

Thank you for trying to write an app with Green Shoes!!

Green Shoes is following Red Shoes api, but doesn't have a full compatible
behavior. :-P

Try out the following I've edited a little bit.

require 'green_shoes'
Shoes.app :width => 600 do
  stack :margin => 20 do
    label = "Click me "
    col = rgb(0.8, 0.8, 0.8)
    flow do
      background col, :curve => 20
      para label * 6, :align => 'center'
    end.click { exit }
  end
end


> 1) The "click { exit }" does not apply to the flow, but actually to the
stack
Green Shoes doesn't change self within the slot.

> 2) The flow with the para's is putting each para over the other, not side
by side
Look at this: http://ashbb.github.com/green_shoes/vs.RedShoes.html

> 3) The flow grows only to fit half of the para's
Yeah,... but not always. I've been trying to find the good way to decide
(calculate) the height length of slot, but no luck yet.

> 4) The right margin is at least twice the left one.
Oh, really? Umm,.. I couldn't notice that in your snippet...

Hope this helps,
ashbb

Re: [shoes] Green Shoes: Simple code, some questions

From:
Eduardo Argollo
Date:
2011-08-21 @ 10:52
Hi ashbb,

Thank you very much for the explanation.

I got the idea on that. So I decided to go slowly to get the feeling of 
the interface.

I have another question. I am trying to do the hover effect as shown in 
http://ashbb.github.com/green_shoes/Events.html but without being 
radical and clearing the whole of the stack.

So, I got this code (I add a background and take it out):

Shoes.app do
    s = stack width: 200, height: 200 do
      background red, :curve => 20
      para "Click me", :align => "center"
    end
    s.hover do |me|
      puts "Enter"
      me.append { @hoverbg = background blue, :curve => 20 }
    end
    s.leave do |me|
      puts "Leave"
      @hoverbg.remove
    end
  end

This code works on the first run and stop working from the second 
execution on. Any idea on how to do the hovering effect without clearing 
the stack?

Again, thank you very much,
Eduardo

On 8/21/2011 1:21 AM, ashbb wrote:
> Hi Eduardo,
>
> Thank you for trying to write an app with Green Shoes!!
>
> Green Shoes is following Red Shoes api, but doesn't have a full 
> compatible behavior. :-P
>
> Try out the following I've edited a little bit.
>
> require 'green_shoes'
> Shoes.app :width => 600 do
>   stack :margin => 20 do
>     label = "Click me "
>     col = rgb(0.8, 0.8, 0.8)
>     flow do
>       background col, :curve => 20
>       para label * 6, :align => 'center'
>     end.click { exit }
>   end
> end
>
>
> > 1) The "click { exit }" does not apply to the flow, but actually to 
> the stack
> Green Shoes doesn't change self within the slot.
>
> > 2) The flow with the para's is putting each para over the other, not 
> side by side
> Look at this: http://ashbb.github.com/green_shoes/vs.RedShoes.html
>
> > 3) The flow grows only to fit half of the para's
> Yeah,... but not always. I've been trying to find the good way to 
> decide (calculate) the height length of slot, but no luck yet.
>
> > 4) The right margin is at least twice the left one.
> Oh, really? Umm,.. I couldn't notice that in your snippet...
>
> Hope this helps,
> ashbb

Re: [shoes] Green Shoes: Simple code, some questions

From:
ashbb
Date:
2011-08-21 @ 11:44
Hi Eduardo,

> This code works on the first run and stop working from the second
> execution on.
Oh, my!
Umm,... that is strange. You might find a bug. But sorry, I don't know why
right now.
Need more debugging. ;-)

> Any idea on how to do the hovering effect without clearing
> the stack?
In Green Shoes, I highly recommend to use show/hide instead of clear/remove.

How about this one?

require 'green_shoes'
Shoes.app do
  s = stack width: 200, height: 200 do
    background blue, :curve => 20
    @bg = background red, :curve => 20
    para "Click me", :align => "center"
  end
  s.hover do |me|
    puts "Enter"
    @bg.hide
  end
  s.leave do |me|
    puts "Leave"
    @bg.show
  end
end

Cheers,
ashbb

Re: [shoes] Green Shoes: Simple code, some questions

From:
Eduardo Argollo
Date:
2011-08-21 @ 11:54
Hi ashbb,

Your code works well besides not changing to the second color I want.

I just managed to do something that for me is pretty cool :) I managed 
to do my button as a widget :-)

class HoverButton < Shoes::Widget
   def initialize(label, col=nil, hovercol=nil)
     puts "Initialize"
     @col = col || rgb(rand * 0.3 + 0.7, rand * 0.3 + 0.7, rand * 0.3 + 
0.7, 0.5)
     @hovercol = hovercol || rgb(1.0,1.0,1.0,0.5)
     @label = label
     puts "creating flow"
     @st = flow do |me|
       background @col, :curve => 20
       para @label, :align => 'center'
     end
     @st.click { yield }
     @st.hover { |me|
       hb_paint(me, @hovercol)
       puts "Enter"
     }
     @st.leave { |me|
       hb_paint(me, @col)
       puts "Leave"
     }
   end

   def hb_paint(obj, col)
     obj.clear do
       background col, :curve => 20
       para @label, :align => 'center'
     end
   end
end

Shoes.app :width => 600, :height => 600 do
    stack :width => 200, :height => 200 do
      hover_button("click me") do
        alert("Good")
      end
    end
  end

My "new" problem is now to set margin properly at the flow. When I do 
:margin => 20, the text gets out of the backgound area.

Well, I keep on going and it is fun.

Once again, thank you,
Eduardo

On 8/21/2011 1:44 PM, ashbb wrote:
> Hi Eduardo,
>
> > This code works on the first run and stop working from the second
> > execution on.
> Oh, my!
> Umm,... that is strange. You might find a bug. But sorry, I don't know 
> why right now.
> Need more debugging. ;-)
>
> > Any idea on how to do the hovering effect without clearing
> > the stack?
> In Green Shoes, I highly recommend to use show/hide instead of 
> clear/remove.
>
> How about this one?
>
> require 'green_shoes'
> Shoes.app do
>   s = stack width: 200, height: 200 do
>     background blue, :curve => 20
>     @bg = background red, :curve => 20
>     para "Click me", :align => "center"
>   end
>   s.hover do |me|
>     puts "Enter"
>     @bg.hide
>   end
>   s.leave do |me|
>     puts "Leave"
>     @bg.show
>   end
> end
>
> Cheers,
> ashbb

Re: [shoes] Green Shoes: Simple code, some questions

From:
ashbb
Date:
2011-08-21 @ 12:11
Hi Eduardo,

> I managed to do my button as a widget :-)
Wow, cool!

> My "new" problem is now to set margin properly at the flow. When I do
> :margin => 20, the text gets out of the backgound area.
Ah,... why do you want to add :margin => 20 at the flow?
Do you want some blank space around the label of the button?

If so, try out the following.

    @st = flow :height => 60, :margin_top => 20 do |me|
      background @col, :curve => 20
      para @label, :align => 'center'
    end

> Well, I keep on going and it is fun.
Very glad to hear that. Enjoy Ruby programming with Shoes!! :-D

ashbb

Re: [shoes] Green Shoes: Simple code, some questions

From:
Eduardo Argollo
Date:
2011-08-21 @ 12:20
Hi ashbb,

I would like actually top and bottom margin. But the thing is that I 
don't know the amount of lines of text in the label. So I would like to 
have it dynamic (meaning not fixing the height).

Two more questions:

Why these two don't work?
1
class HoverButton < Shoes::Widget
   def initialize(label, col=nil, hovercol=nil)
     @col = col || rgb(rand * 0.3 + 0.7, rand * 0.3 + 0.7, rand * 0.3 + 
0.7, 0.5)
     @hovercol = hovercol || rgb(1.0,1.0,1.0,0.5)
     @label = label
     @st = flow do |me|
#HERE
         hb_paint(me, @col)
      end
     @st.click { yield }
     @st.hover { |me|
       hb_paint(me, @hovercol)
       puts "Enter"
     }
     @st.leave { |me|
       puts me.height

       hb_paint(me, @col)
       #me.style(:height => me.height + 16)
       puts "Leave"
     }
   end

2
class HoverButton < Shoes::Widget
   def initialize(label, col=nil, hovercol=nil)
     puts "Initialize"
     @col = col || rgb(rand * 0.3 + 0.7, rand * 0.3 + 0.7, rand * 0.3 + 
0.7, 0.5)
     @hovercol = hovercol || rgb(1.0,1.0,1.0,0.5)
     @label = label
     puts "creating flow"
     @st = flow
     @st.click { yield }
     @st.hover { |me|
       hb_paint(me, @hovercol)
       puts "Enter"
     }
     @st.leave { |me|
       puts me.height

       hb_paint(me, @col)
       #me.style(:height => me.height + 16)
       puts "Leave"
     }
#HERE
     hb_paint(@st, col)
   end

Thank you,
Eduardo

On 8/21/2011 2:11 PM, ashbb wrote:
> Hi Eduardo,
>
> > I managed to do my button as a widget :-)
> Wow, cool!
>
> > My "new" problem is now to set margin properly at the flow. When I do
> > :margin => 20, the text gets out of the backgound area.
> Ah,... why do you want to add :margin => 20 at the flow?
> Do you want some blank space around the label of the button?
>
> If so, try out the following.
>
>     @st = flow :height => 60, :margin_top => 20 do |me|
>       background @col, :curve => 20
>       para @label, :align => 'center'
>     end
>
> > Well, I keep on going and it is fun.
> Very glad to hear that. Enjoy Ruby programming with Shoes!! :-D
>
> ashbb

Re: [shoes] Green Shoes: Simple code, some questions

From:
ashbb
Date:
2011-08-21 @ 13:14
Hi Eduardo,

> I would like actually top and bottom margin. But the thing is that I
> don't know the amount of lines of text in the label. So I would like to
> have it dynamic (meaning not fixing the height).
Oh, I see.
Then,... how about this one simply? May not be so cool, though...

    @label = "\n" + label + "\n"
    puts "creating flow"
    @st = flow do |me|
      background @col, :curve => 20
      para @label, :align => 'center'
    end

> Two more questions:
> Why these two don't work?

1st: Sorry, Green Shoes doesn't pass self into the block.
So, even if you write the code like this:

    flow{|me| ... }

The `me` is always nil.

2nd: Umm,... seems to work well...
If you mention about showing the black background at first,
replace from `col` to `@col` like this:

    hb_paint(@st, col) ====> hb_paint(@st, @col)

ashbb

Re: [shoes] Green Shoes: Simple code, some questions

From:
Eduardo Argollo
Date:
2011-08-21 @ 23:53
Hi ashbb,

I used your idea of adding '\n's.

Here is how my interface cod looks like (I added stacks for the margin 
between elements). The only problem is that it is quite slow on the 
hoovering. Any hint on fastening it up? Any way to just change the 
background without doing the clear?

class HoverButton < Shoes::Widget
   def initialize(properties = {} )
     @col = properties[:color] || green
     @hovercol = properties[:hover_color]
     @label = "\n#{properties[:label]}\n" || ""
     @margin = properties[:margin]
     @height = properties[:height] || 0
     puts "creating flow labeled #{@label}"
     if @margin
       stack :height => @margin do
         para ""
       end
     end
     @st = flow :height => @height do
       background @col, :curve => 20
       para @label, :align => 'center'
     end
     if @margin
       stack :height => @margin do
         para ""
       end
     end
     @st.click { yield }
     if @hovercol
       @st.hover { |me|
         hb_paint(me, @hovercol)
         puts "Enter #{@label}"
       }
       @st.leave { |me|
         puts me.height

         hb_paint(me, @col)
         #me.style(:height => me.height + 16)
         puts "Leave #{@label}"
       }
     end
   end

   def hb_paint(obj, col)
     puts obj.style.inspect
     obj.clear do
       background col, :curve => 20
       para @label, :align => 'center'
     end
   end
end

Shoes.app :width => 600, :height => 600 do
   question_color = rgb(rand * 0.5 + 0.25, rand * 0.5 + 0.25, rand * 0.5 
+ 0.25)
   button_color = rgb(rand * 0.3 + 0.7, rand * 0.3 + 0.7, rand * 0.3 + 
0.7)#, 0.5)
   hover_color = rgb(0.5,0.5,0.5)#,0.5)
   background :black
   @title_stack = stack do
     hover_button(:label => "Asking a question", :color => 
question_color, :margin => 5) do
       alert("Good")
     end
   end

    @question_stack = stack do
      hover_button(:label => "First answer", :color => button_color, 
:hover_color => hover_color, :margin => 5) do
        alert("First")
      end
      hover_button(:label => "Second answer", :color => button_color, 
:hover_color => hover_color, :margin => 5) do
        alert("Second")
      end
      hover_button(:label => "Third answer", :color => button_color, 
:hover_color => hover_color, :margin => 5) do
        alert("Third")
      end
      hover_button(:label => "Fourth answer", :color => button_color, 
:hover_color => hover_color, :margin => 5) do
        alert("Fourth")
      end
    end
  end


Thanks,
Eduardo

On 8/21/2011 3:14 PM, ashbb wrote:
> Hi Eduardo,
>
> > I would like actually top and bottom margin. But the thing is that I
> > don't know the amount of lines of text in the label. So I would like to
> > have it dynamic (meaning not fixing the height).
> Oh, I see.
> Then,... how about this one simply? May not be so cool, though...
>
>     @label = "\n" + label + "\n"
>     puts "creating flow"
>     @st = flow do |me|
>       background @col, :curve => 20
>       para @label, :align => 'center'
>     end
>
> > Two more questions:
> > Why these two don't work?
>
> 1st: Sorry, Green Shoes doesn't pass self into the block.
> So, even if you write the code like this:
>
>     flow{|me| ... }
>
> The `me` is always nil.
>
> 2nd: Umm,... seems to work well...
> If you mention about showing the black background at first,
> replace from `col` to `@col` like this:
>
>     hb_paint(@st, col) ====> hb_paint(@st, @col)
>
> ashbb

Re: [shoes] Green Shoes: Simple code, some questions

From:
ashbb
Date:
2011-08-22 @ 11:08
Hi Eduardo,

> The only problem is that it is quite slow on the
> hoovering. Any hint on fastening it up? Any way to just
> change the background without doing the clear?
Using show/hide is better.
And omit debug lines. hahaha. ;-)

     @st = flow :height => @height do
       background @col, :curve => 20
       @bg = background @hovercol, :curve => 20 if @hovercol
       para @label, :align => 'center'
     end


     if @hovercol
       @st.hover { |me| @bg.hide }
       @st.leave { |me| @bg.show }

ashbb

Re: [shoes] Green Shoes: Simple code, some questions

From:
Eduardo Argollo
Date:
2011-08-24 @ 12:39
Hi ashbb

Once again, thank you very much. It is impressive how fast you answer 
with help. Thanks!

With the hiding the code got quite faster and I am satisfied with the 
performance.

My challenge now is to put margins between the stack where I put the 
answers and each answer. I would like to have 20 pixels on the left and 
on the right so that the round shapes dont touch one the other.

I tried putting a flow with 20 pixels before and after (using the idea I 
did put the margin top, with a stack), I tried putting :margin => 20 on 
the questions stack, but it also did not work.

Could you please also help me with this one? Once this works my 
interface is almost done :)

Here is the design code I am working with:

require 'green_shoes'

class HoverButton < Shoes::Widget
   def initialize(properties = {} )
     @col = properties[:color] || green
     @hovercol = properties[:hover_color]
     @label = "\n#{properties[:label]}\n" || ""
     @margin = properties[:margin]
     @height = properties[:height] || 0
     if @margin
       stack :height => @margin do
         para ""
       end
     end
     @st = flow :height => @height do
       @bg = background @col, :left=> 20, :curve => 20
       if @hovercol
         @hg = background @hovercol, :curve => 20
         @hg.hide
       end
       para @label, :align => 'center'
     end
     if @margin
       stack :height => @margin do
         para ""
       end
     end
     @st.click { yield }
     if @hovercol
       @st.hover { |me|
         @bg.hide
         @hg.show
       }
       @st.leave { |me|
         @bg.show
         @hg.hide
       }
     end
   end
end

Shoes.app :width => 600, :height => 600 do
   background :black
   question_color = rgb(rand * 0.5 + 0.25, rand * 0.5 + 0.25, rand * 0.5 
+ 0.25)
   r,g,b = rand * 0.3 + 0.7, rand * 0.3 + 0.7, rand * 0.3 + 0.7
   button_color = rgb(r, g, b, 0.5)
   hover_color = rgb(r, g, b, 0.9)
   @title_stack = stack do
     hover_button(:label => "Asking a question", :color => 
question_color, :margin => 5) do
       alert("Good")
     end
   end

    @question_stack = stack do
      background question_color, :curve => 20
      margin = 10
      hover_button(:label => "First answer", :color => button_color, 
:hover_color => hover_color, :margin => margin) do
        alert("First")
      end
      hover_button(:label => "Second answer", :color => button_color, 
:hover_color => hover_color, :margin => margin) do
        alert("Second")
      end
      hover_button(:label => "Third answer", :color => button_color, 
:hover_color => hover_color, :margin => margin) do
        alert("Third")
      end
      hover_button(:label => "Fourth answer", :color => button_color, 
:hover_color => hover_color, :margin => margin) do
        alert("Fourth")
      end
    end
  end


Thank you,
Eduardo

On 8/22/2011 1:08 PM, ashbb wrote:
> Hi Eduardo,
>
> > The only problem is that it is quite slow on the
> > hoovering. Any hint on fastening it up? Any way to just
> > change the background without doing the clear?
> Using show/hide is better.
> And omit debug lines. hahaha. ;-)
>
>      @st = flow :height => @height do
>        background @col, :curve => 20
>        @bg = background @hovercol, :curve => 20 if @hovercol
>        para @label, :align => 'center'
>      end
>
>
>      if @hovercol
>        @st.hover { |me| @bg.hide }
>        @st.leave { |me| @bg.show }
>
> ashbb
>

Re: [shoes] Green Shoes: Simple code, some questions

From:
ashbb
Date:
2011-08-24 @ 14:13
Hi Eduardo,

Try out this one: https://gist.github.com/1168132

In Green Shoes, flow(margin: 20){ ... } means that all elements within the
block are added `margin: 20` automatically.

The sample34 may help you... hopefully. ;-)

https://github.com/ashbb/green_shoes/blob/master/samples/sample34.rb

ashbb