tiled image


What is a tiled image? A tiled image is the behavior of a widget to display one or more repetitions of an image. The number of repetitions depends on the size of the widget and the size of the image.

When would I use a tiled image? If one wanted a background that had a textured feel to it, a small image , tiled, can provide that sort of optical illusion.

BLT and Xbit support tiled images.

The former implements tiled background images for button, checkbutton, frame, radiobutton, scrollbar, and toplevel.

With the latter,

    set tiled_image [image create gimg tiledImage -file image_file_name -tile 1]

can be used anywhere that a conventional Tk image is valid (true?).

Saverio Castellano offers,

    proc SetTiledBackground {cv img} {
      set h [image height $img]
      set w [image width $img]
      set width [$cv cget -width]
      set height [$cv cget -height]
      set row [expr $h/2]
      set col [expr $w/2]

      while {$row<$height} {
        set col [expr $w/2]
        while {$col<$width} {
           $cv create image $col $row -image $img
           incr col $w
        incr row $h

Bryan Oakley (09 July 2003) provides a different variation that can be bound to the widget's <Configure> event so it will be retiled as the widget grows.

        # usage: tile canvasWidget ?image?
        proc tile {canvas args} {

                set oldImage [$canvas itemcget tile -image]

                switch -exact [llength $args] {
                        0 {set image $oldImage}
                        1 {set image [lindex $args 0]}
                        default {
                                return -code error "usage: tile path ?image?"

                if {$image != $oldImage 
                    || [string length $image] == 0} {
                        $canvas delete all

                if {[string length $image] == 0} return

                set imageHeight [image height $image]
                set imageWidth [image width $image]

                set width [winfo width $canvas]
                set height [winfo height $canvas]
                set x 0
                while {$x < $width} {
                        set y 0
                        while {$y < $height} {
                                # see if there's already a tile here
                                set tags [$canvas gettags $x/$y]
                                if {$tags == ""} {
                                        $canvas create image $x $y \
                                            -image $image \
                                            -anchor nw \
                                            -tags [list tile $x/$y] \
                                incr y $imageHeight
                        incr x $imageWidth


Here's some code to test it:

        image create photo question -data {
        canvas .c
        tile .c question
        bind .c <Configure> [list tile %W]
        pack .c -side top -fill both -expand y

DKF: I prefer to create a single pre-tiled image of the required size when the canvas isn't too large; the memory consumption is more, but the script is much shorter...

 image create photo foo -data {...}
 $canvas create image 0 0 -anchor nw -image [image create photo foo-tiled]
 foo-tiled copy foo -to 0 0 [winfo width $canvas] [winfo height $canvas]
 # Yes, that's all it takes folks!  photo image copying tiles for you!

(Bryan Oakley sez: very impressive! Nice job, Donal)

uniquename 2014jan27

For the benefit of those who do not have the facilities or time to implement Oakley's code above, here is an image of what it creates. (I plan to use a technique like this to provide some nice GUI backgrounds ... to help make Linux Tk GUI's almost as nice as Apple and Microsoft OS Tk GUI's. )


Apparently a variation on all this is the "tile extension" [L1 ], maintained as a subproject of tktable. It "is a testing ground for an improved version of the Tk styling engine." (no, the tile extension isn't "apparently a variation on all this"; they are completely unrelated).

It apparently give the ability to create applications with native GTK looks. Is the texturing all that people mean when they talk about GTK's appearance?

Will the tile extension make it into 8.5?

ABU: Here is my little contribution.

tcanvas is a pure-tcl widget written using Snit.

Here is a sample

. http://web.tiscali.it/irrational/tcl/tcanvas1.0/demo.gif

See also

  • scanvas - Canvas with scrollbars - Download [L2 ]
  • tcanvas - Tiled Canvas - Download [L3 ]
  • tscanvas - Tiled Scrolling Canvas - Download [L4 ]
  • Snit Widget Demos - Download at [L5 ]

Start page at [L6 ]

escargo 16 Feb 2004 For some reason these direct links give me a "Forbidden" message, but when I accessed them from the supplied "Start page" the downloads worked. (This may be related to why the image above does not seem to display either.)

ABU I also experienced your problem ... sometimes.

I suppose this is because files and images are stored on a free web-space (web.tiscali.it), and and it performs a kind of filtering/redirection ...

I guess that files within that space cannot be 'referenced' directly from other sites... (only html pages, but not gif, zip, and so on ...)

If you start from the 'start page', you can navigate correctly.

If anyone can suggest me a good free web-space, I coluld move my tcl archives there.

KPV : Aric Bills posted the following code to CLT on March 23, 2003[L7 ] that tiles an image as the background to a canvas. It also sets up some bindings to retile when the canvas changes size and to clean up when it gets destroyed.

 proc initBackground {canvas bitmapFilename} {
    package require Img

    set sourceImage [image create photo -file $bitmapFilename]
    set tiledImage [image create photo]

    $canvas create image 0 0 \
        -anchor nw \
        -image $tiledImage \
        -tags {backgroundBitmap}

    $canvas lower backgroundBitmap

    bind $canvas <Configure> [list tile $canvas $sourceImage $tiledImage]
    bind $canvas <Destroy> [list image delete $sourceImage $tiledImage]
    tile $canvas $sourceImage $tiledImage

 proc tile {canvas sourceImage tiledImage} {
    $tiledImage copy $sourceImage \
        -to 0 0 [winfo width $canvas] [winfo height $canvas]