librelist archives

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

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

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
>

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