[George Peter Staplin]: July 5, 2004: My [Smalltick] widgets are progressing well.  I've managed to create a canvas-like widget that can be used to draw images.  Today I implemented most of a decode.png command to go with a gui.create.image (for creating XImages) and displayed my first PNG using it.  I just need to complete the < 24-bit display handling.  I will then focus on storing pixmaps with encode.png. 

I've wanted to clone [A symmetric doodler] for quite some time using [Smalltick], and I may soon achieve that goal.  I also have plans to write decode.jpeg and encode.jpeg.

Without further ado we can begin the example code:

Here's the usercode for the DrawingEditor widget/class:
 proc create.gui mw {
  [set topc [Container [new.object] $mw]] \
   -row 0 -column 0 -sticky we -map

  [set botc [Container [new.object] $mw]] \
   -row 1 -column 0 -sticky news -map
 
  [set de [DrawingEditor [new.object] $botc]] \
   -width 400 -height 450 -row 0 -column 0 -sticky news -map
 
  set i 0
  foreach col [list red green blue orange purple] {
   [Button [new.object] $topc] \
    -text $col -command [list [list $de -set.pen.color $col]] \
    -bg $col -row 0 -column $i -map
   incr i
  }
 }
 
 proc main {} {
  set mw [Widget [new.object]]
  $mw set {window-path .} \
   -column.weight [list 0 100] \
   -row.weight [list 0 100]
 
  create.gui $mw
 }
 main

----
And here we have the DrawingEditor widget/class implementation:

 proc DrawingEditor {d p} {
  Widget $d
 
  $d create.window $p
 
  $d set {drawing-editor-pixmap {}}
  $d set {drawing-editor-pen-color {}}
  $d set {drawing-editor-pen-color-string {}}
  $d set [list drawing-editor-pen-gc [gui.create.gc [$d get wid]]]
  $d set {drawing-editor-pen-start-x 0}
  $d set {drawing-editor-pen-start-y 0}
  $d set {drawing-editor-busy 0}
  $d set {drawing-editor-pixmap-width 2000}
  $d set {drawing-editor-pixmap-height 2000}
 
  $d append.destroy.command \
    [list {gui.destroy.gc [$self get drawing-editor-pen-gc]}] \
   append.destroy.command \
    [list {gui.destroy.pixmap [$self get drawing-editor-pixmap]}] \
   append.destroy.command \
    [list {gui.destroy.gc [$self get drawing-editor-pen-gc]}] \
   append.destroy.command \
    [list {gui.destroy.color [$self get drawing-editor-pen-color]}]
 
  $d : -set.pen.color color-string {
   $self ?set [list drawing-editor-pen-color-string [set color-string]]
   if {"" != [set gcol [$self get drawing-editor-pen-color]]} {
    gui.destroy.color $gcol
   }
   $self ?set \
    [list drawing-editor-pen-color [set col [gui.create.color [set color-string]]]]
   gui.set.gc.color [$self get drawing-editor-pen-gc] $col
  }
 
  $d : create.drawing.editor.pixmap {} {
   if {"" != [set p [$self get drawing-editor-pixmap]]} {
    gui.destroy.pixmap $p
   }
   $self ?set \
    [list drawing-editor-pixmap [gui.create.pixmap [$self get window-path] \
     [$self get drawing-editor-pixmap-width] \
     [$self get drawing-editor-pixmap-height]]]
 
   set gc [gui.create.gc [$self get wid]]
   gui.set.gc.color $gc [set col [gui.create.color white]]
   gui.draw.rectangle \
    [$self get drawing-editor-pixmap] \
    $gc \
    0 0 \
    [$self get drawing-editor-pixmap-width] \
    [$self get drawing-editor-pixmap-height]
 
   gui.destroy.color $col
   gui.destroy.gc $gc
  }
 
  $d : draw.drawing.editor {} {
   $self ?set {drawing-editor-busy 0}
 
   gui.copy.area \
    [$self get drawing-editor-pen-gc] \
    [$self get drawing-editor-pixmap] \
    [$self get wid] \
    0 0 \
    [winfo width [$self get window-path]] \
    [winfo height [$self get window-path]] \
    0 0 
  }
 
  $d : draw.drawing.editor.when.idle {} {
   if {[$self get drawing-editor-busy]} return
 
   $self ?set {drawing-editor-busy 1}
   after idle [list $self draw.drawing.editor]
  }
 
  $d : draw.on.pixmap {x y} {
   gui.draw.line \
    [$self get drawing-editor-pixmap] \
    [$self get drawing-editor-pen-gc] \
    [$self get drawing-editor-pen-start-x] \
    [$self get drawing-editor-pen-start-y] \
    $x $y
   $self set.initial.start.coordinates [list $x $y]
   $self draw.drawing.editor.when.idle 
  }
 
  $d : drawing.editor.configure.event {w h} {
   $self draw.drawing.editor.when.idle
  }
 
  $d : dump.structure {} {
   puts PIXMAP:[$self get drawing-editor-pixmap]
 
   puts PEN_COLOR:[$self get drawing-editor-pen-color]
 
   puts COLOR_STRING:[$self get drawing-editor-pen-color-string]
 
   puts PEN_GC:[$self  get drawing-editor-pen-gc]
 
   puts START_X:[$self get drawing-editor-pen-start-x]
  
   puts START_Y:[$self get drawing-editor-pen-start-y]
  }
 
  $d : set.initial.start.coordinates {x y} {
   $self ?set [list drawing-editor-pen-start-x $x]
   $self ?set [list drawing-editor-pen-start-y $y]
  }
  
  $d create.drawing.editor.pixmap 
 
  $d -set.pen.color red
  
  bind DrawingEditor$d <ButtonPress-1> \
   [list $d set.initial.start.coordinates {%x %y}]
 
  bind DrawingEditor$d <B1-Motion> \
   [list $d draw.on.pixmap {%x %y}]
 
  bind DrawingEditor$d <Expose> [list $d draw.drawing.editor.when.idle]
 
  bind DrawingEditor$d <Configure> \
   [list $d drawing.editor.configure.event {%w %h}]
 
  set w [$d get window-path]
 
  #bindtags $w [list $w DrawingEditor$d]
  bindtags $w [linsert [bindtags $w] end DrawingEditor$d]
  
  $d draw.drawing.editor.when.idle
 
  return $d}


----
This is what it can look like with the usercode:


[http://www.xmission.com/~georgeps/engineering/software/Smalltick/Smalltick_DrawingEditor.png]

----
[Category Widget]