librelist archives

« back to archive

Adding text to image() element

Adding text to image() element

From:
Michael Dopheide
Date:
2015-02-16 @ 23:24
I'm building a Shoes app that is a set of 50x50 image tiles.  The tiles
have different Shoes-generated art in them based on given data (example
image below).  In some cases I'd like to add simple text to the middle of
the image as well, but I can't figure out a way from the manual that allows
me to specify a 'font' and add text directly within the image block.


Example image:

 def img_octagon(resp_rgb,orig_rgb,border_rgb)
    @img = image 60,60 do
      translate(5,5)
      strokewidth 0
      fill resp_rgb
      rect(0,0,50,50)

      strokewidth 1

      fill orig_rgb
        lw = 12   #line length for each side of the octagon
        lws = lw*Math.sin(45)
        lwx = (50-(lw+2*lws))/2
        shape do
          move_to( lwx, lwx+lws)
          line_to( lwx+lws, lwx)
          line_to( lwx+lws+lw, lwx)
          line_to( lwx+2*lws+lw, lwx+lws)
          line_to( lwx+2*lws+lw, lwx+lws+lw)
          line_to( lwx+lws+lw, lwx+2*lws+lw)
          line_to( lwx+lws, lwx+2*lws+lw)
          line_to( lwx, lwx+lws+lw)
          line_to( lwx, lwx+lws)
        end

        nofill
        strokewidth 3
        stroke border_rgb
        rect(0,0,50,50)

      ###  WOULD LIKE TO ADD TEXT TO THE IMAGE HERE.

    end
  return @img
 end

Thanks,
Dop

Re: [shoes] Adding text to image() element

From:
Tobias Pfeiffer
Date:
2015-03-01 @ 12:07
Hi there,

sorry for long time no answer :(

There is no predefined way in shoes to do this (that I'm aware of).

You can try to take a text and place it over the image. like

title "Interesting text", left: 100, top: 50

Another way that could help you, but that I'm not very familiar with, is
shape do .. end or image do .. end (the latter one unimplemented in shoes4)

Hope that helps, I'll also add an issue to shoes4 so we can think of
ways to support your use case!

Thanks,
Tobi
On 02/17/2015 12:24 AM, Michael Dopheide wrote:
> I'm building a Shoes app that is a set of 50x50 image tiles.  The
> tiles have different Shoes-generated art in them based on given data
> (example image below).  In some cases I'd like to add simple text to
> the middle of the image as well, but I can't figure out a way from the
> manual that allows me to specify a 'font' and add text directly within
> the image block.
>
>
> Example image:
>
>  def img_octagon(resp_rgb,orig_rgb,border_rgb)
>     @img = image 60,60 do
>       translate(5,5)
>       strokewidth 0
>       fill resp_rgb
>       rect(0,0,50,50)
>
>       strokewidth 1
>     � � 
>       fill orig_rgb
>         lw = 12   #line length for each side of the octagon
>         lws = lw*Math.sin(45)
>         lwx = (50-(lw+2*lws))/2
>         shape do
>           move_to( lwx, lwx+lws)
>           line_to( lwx+lws, lwx)
>           line_to( lwx+lws+lw, lwx)
>           line_to( lwx+2*lws+lw, lwx+lws)
>           line_to( lwx+2*lws+lw, lwx+lws+lw)
>           line_to( lwx+lws+lw, lwx+2*lws+lw)
>           line_to( lwx+lws, lwx+2*lws+lw)
>           line_to( lwx, lwx+lws+lw)
>           line_to( lwx, lwx+lws)
>         end
>
>         nofill
>         strokewidth 3
>         stroke border_rgb
>         rect(0,0,50,50) 
>
>       ###  WOULD LIKE TO ADD TEXT TO THE IMAGE HERE.
> *    end*
> *  return @img*
> * end*
> *
> *
> *Thanks,*
> *Dop*
> **

Re: Adding text to image() element

From:
Michael Dopheide
Date:
2015-03-01 @ 14:36
Yeah, I've been doing everything with image/do/end.  It's a little
concerning to hear it's not in Shoes 4.  Will it be?

Thanks,
Dop

On Sunday, March 1, 2015, Tobias Pfeiffer <pragtob@gmail.com> wrote:

>  Hi there,
>
> sorry for long time no answer :(
>
> There is no predefined way in shoes to do this (that I'm aware of).
>
> You can try to take a text and place it over the image. like
>
> title "Interesting text", left: 100, top: 50
>
> Another way that could help you, but that I'm not very familiar with, is
> shape do .. end or image do .. end (the latter one unimplemented in shoes4)
>
> Hope that helps, I'll also add an issue to shoes4 so we can think of ways
> to support your use case!
>
> Thanks,
> Tobi
> On 02/17/2015 12:24 AM, Michael Dopheide wrote:
>
>  I'm building a Shoes app that is a set of 50x50 image tiles.  The tiles
> have different Shoes-generated art in them based on given data (example
> image below).  In some cases I'd like to add simple text to the middle of
> the image as well, but I can't figure out a way from the manual that allows
> me to specify a 'font' and add text directly within the image block.
>
>
>  Example image:
>
>   def img_octagon(resp_rgb,orig_rgb,border_rgb)
>     @img = image 60,60 do
>       translate(5,5)
>       strokewidth 0
>       fill resp_rgb
>       rect(0,0,50,50)
>
>        strokewidth 1
>     � �
>       fill orig_rgb
>         lw = 12   #line length for each side of the octagon
>         lws = lw*Math.sin(45)
>         lwx = (50-(lw+2*lws))/2
>         shape do
>           move_to( lwx, lwx+lws)
>           line_to( lwx+lws, lwx)
>           line_to( lwx+lws+lw, lwx)
>           line_to( lwx+2*lws+lw, lwx+lws)
>           line_to( lwx+2*lws+lw, lwx+lws+lw)
>           line_to( lwx+lws+lw, lwx+2*lws+lw)
>           line_to( lwx+lws, lwx+2*lws+lw)
>           line_to( lwx, lwx+lws+lw)
>           line_to( lwx, lwx+lws)
>         end
>
>          nofill
>         strokewidth 3
>         stroke border_rgb
>          rect(0,0,50,50)
>
>        ###  WOULD LIKE TO ADD TEXT TO THE IMAGE HERE.
> *    end*
> *  return @img*
> * end*
>
>  *Thanks,*
> *Dop*
>
>
>

Re: [shoes] Adding text to image() element

From:
Scott Lane
Date:
2015-03-02 @ 19:06
Thanks Tobias,I think I sent a different question and got somebody elses 
email.the shoe is on the wrong foot!
but thanks for the reply!
Scott Check out khanacademy.org - it’s my favorite place to learn!
      From: Tobias Pfeiffer <pragtob@gmail.com>
 To: shoes@librelist.com 
 Sent: Sunday, March 1, 2015 4:07 AM
 Subject: Re: [shoes] Adding text to image() element
   
  Hi there,
 
 sorry for long time no answer :(
 
 There is no predefined way in shoes to do this (that I'm aware of).
 
 You can try to take a text and place it over the image. like
 
 title "Interesting text", left: 100, top: 50
 
 Another way that could help you, but that I'm not very familiar with, is 
shape do .. end or image do .. end (the latter one unimplemented in 
shoes4)
 
 Hope that helps, I'll also add an issue to shoes4 so we can think of ways
to support your use case!
 
 Thanks,
 Tobi
 On 02/17/2015 12:24 AM, Michael Dopheide wrote:
  
  I'm building a Shoes app that is a set of 50x50 image tiles.  The tiles 
have different Shoes-generated art in them based on given data (example 
image below).  In some cases I'd like to add simple text to the middle of 
the image as well, but I can't figure out a way from the manual that 
allows me to specify a 'font' and add text directly within the image 
block. 
  
  Example image: 
    def img_octagon(resp_rgb,orig_rgb,border_rgb)     @img = image 60,60 
do       translate(5,5)       strokewidth 0       fill resp_rgb       
rect(0,0,50,50) 
        strokewidth 1     � �        fill orig_rgb         lw = 12   #line
length for each side of the octagon         lws = lw*Math.sin(45)         
lwx = (50-(lw+2*lws))/2         shape do           move_to( lwx, lwx+lws) 
         line_to( lwx+lws, lwx)           line_to( lwx+lws+lw, lwx)       
   line_to( lwx+2*lws+lw, lwx+lws)           line_to( lwx+2*lws+lw, 
lwx+lws+lw)           line_to( lwx+lws+lw, lwx+2*lws+lw)           
line_to( lwx+lws, lwx+2*lws+lw)           line_to( lwx, lwx+lws+lw)       
   line_to( lwx, lwx+lws)         end 
          nofill         strokewidth 3         stroke border_rgb
          rect(0,0,50,50)  
        ###  WOULD LIKE TO ADD TEXT TO THE IMAGE HERE.     end   return 
@img  end  
  Thanks, Dop