World-wide whiteboard

RS 2002-08-29 - Purpose: to document the evolution of a whiteboard function in tkchat.


WikiDbImage chatcanvas.jpg

"cool" and "handwriting" by dkf in Manchester, "very" by RS in Constance, "Bye" by stevel in Perth, all in a few minutes...

In the Tcl chatroom we wanted to exchange drawings too, so here's how it all began:


dkf It is at this point that I could do with a shared whiteboard for the chat. Don't need it normally, but just sometimes...

suchenwi One could transmit coords of line objects, wrapped as: "$c create line ..." filled in the color of the sender. Browser users could manually pick them up, while Tkchat could directly filter them out and render them on a canvas $c.

dkf By the time I've written the add-on, I don't think I'll want to draw the picture any more.

suchenwi Looks like about 10 lines of code...

dkf Not $c, $white_board. That'd be more unique to search for.

suchenwi

        (1) scan incoming lines for "^$c create"
        (2) if not exist, make canvas $c toplevel;
        (3) eval $line; bind $white_board <B1-Release> {transmit "\$white_board create line [[$white_board coords $current]]"}

dkf Refinements. The tkchat version should colour lines with the colour of the person who made them. The line scanner should watch out for code that matches but is malicious. Need a "clear the whiteboard" action too.

arjen Execute it in a safe interp!

suchenwi (The binding is of course only needed once, at canvas creation)

dkf Otherwise things might get messy after I've been running tkchat for a few months...

arjen This does fit in with my "saluticons"

dkf You also need a binding to see where the line starts, and also monitoring of <B1-Motion>

suchenwi I think clearing the canvas should be done locally - otherwise each of us can wipe out everybody's display...

dkf (and that's <ButtonRelease-1>) RS: But allowing other people to wipe it out makes it a truly shared resource.

 ...

dkf I'm really after a quick-and-dirty solution.

dkf Quick, dirty, but gets the job done and builds community.

dgp make it work now; make it good later?

arjen Well, it is almost weekend ...

dkf Yes

dkf (But now, with all this discussion, I no longer want to draw the picture I was thinking of. Which was my point. If it's not immediate, it won't happen in a highly interactive environment like this.)

suchenwi I'm coding.. (standalone prototype, linked by user copy'n'paste...)

suchenwi Here comes the first quick shot:


 proc transmit {w id} {
     set ::entry "\$white_board create line [string map {.0 {}} [$w coords $id]]"
    .e selection range 0 end
 }
 entry .e -textvar entry -bg white
 bind .e <Return> {eval $entry}
 set white_board [canvas .c -bg white]
 bind .c <1> {set entry ""; set id [%W create line %x %y %x %y]}
 bind .c <B1-Motion> {%W coords $id [concat [%W coords $id] %x %y]}
 bind .c <ButtonRelease-1> {transmit %W $id}
 pack .e .c -fill both -expand 1

suchenwi The "transmit" proc would have to be fitted into Tkchat. Well, and toplevel creation etc.

suchenwi $white_board create line 47.0 53.0 47.0 53.0 48.0 68.0 50.0 73.0 52.0 87.0 54.0 103.0 57.0 109.0 60.0 114.0 62.0 118.0 64.0 121.0 66.0 123.0 69.0 125.0 71.0 125.0 75.0 125.0 80.0 124.0 94.0 120.0 110.0 117.0 130.0 115.0 150.0 113.0 164.0 110.0 170.0 107.0 176.0 104.0 179.0 103.0 181.0 103.0 183.0 103.0 184.0 103.0 185.0 103.0 185.0 102.0

suchenwi I think we could map out the ".0", save bandwidth.

suchenwi $white_board create line 81 90 81 90 83 90 83 84 83 79 83 75 84 71 84 67 84 64 84 59 84 55 84 52 84 50 84 47 84 43 84 41 84 39 84 38 84 37 85 37 88 36 91 35 94 34 97 33 99 33 100 33 101 33 103 33 104 33 105 33 105 34 106 35 107 37 108 39 109 40 110 42 110 43 111 45 112 47 112 48 113 50 113 53 113 54 112 55 112 56 111 56 109 57 107 58 106 58 105 59 103 59 102 59 100 59 98 59 97 59 96 60 94 60 93 60 92 60 91 60 91 61 91 62 94 65 97 68 101 72 103 74 104 75 105 75 106 76 108 78 109 79 110 79 110 80 111 81 114 83 116 86 117 87 118 88 119 88

clock At the tone, the time is 17:00 on Thursday 29 Aug 2002

 ...

dgp how do I enable the tkChat console to paste in the code?

dgp (and hopefully suppress all the numbers)

dkf Well, I'm still just cut-n-paste-ing across, so integration has some way to go yet.

suchenwi It will scan for the string "$white_board create line", and intercept such messages. But presently, we manually carry them around, into the standalone canvas thingy.

dgp Ah, a separate wish for now.

suchenwi What else did you expect in 5 man-minutes ?

dgp I've seen your weekend projects.

suchenwi Yes, the code I pasted above is a standalone wish script.

arjen A minute in Tcl is worth at least half an hour in many another language

 ...

dgp For others to suppress, paste this in early in the [addMessage] proc:

        if {[string match {$white_board create line *} $str]} return

Test data:

 $white_board create line 190.0 142.0 190.0 142.0 189.0 142.0 187.0 143.0 186.0 143.0 184.0 144.0 180.0 \
  145.0 177.0 146.0 175.0 148.0 173.0 150.0 171.0 152.0 171.0 154.0 171.0 156.0 171.0 157.0 171.0 158.0 \
  171.0 160.0 172.0 161.0 173.0 162.0 174.0 163.0 175.0 163.0 176.0 164.0 178.0 164.0 179.0 164.0 181.0 \
  164.0 183.0 163.0 184.0 162.0 186.0 162.0 188.0 161.0 189.0 161.0 190.0 160.0 191.0 159.0 192.0 158.0 \
  193.0 158.0 194.0 157.0 194.0 156.0 194.0 154.0 195.0 153.0 196.0 152.0 197.0 151.0 198.0 150.0 200.0 \
  150.0 202.0 149.0 203.0 149.0 204.0 148.0 205.0 148.0 206.0 148.0 204.0 148.0 202.0 148.0 199.0 148.0 \
  196.0 148.0 195.0 149.0 193.0 150.0 191.0 150.0 191.0 152.0 191.0 153.0 191.0 154.0 191.0 156.0 192.0 \
  157.0 193.0 158.0 194.0 160.0 195.0 161.0 196.0 162.0 198.0 162.0 199.0 163.0 200.0 163.0 202.0 163.0 \
  204.0 162.0 206.0 162.0 207.0 160.0 208.0 159.0 208.0 157.0 208.0 156.0 208.0 155.0 208.0 154.0 207.0 \
  153.0 206.0 152.0 205.0 151.0 204.0 150.0 203.0 150.0 203.0 149.0 204.0 149.0 205.0 149.0 206.0 149.0 \
  207.0 149.0 209.0 149.0 211.0 150.0 214.0 150.0 217.0 150.0 219.0 150.0 220.0 150.0 221.0 149.0 223.0 \
  149.0 224.0 149.0 223.0 150.0 222.0 150.0 221.0 151.0 219.0 152.0 218.0 153.0 217.0 154.0 217.0 155.0 \
  217.0 156.0 217.0 157.0 218.0 158.0 218.0 159.0 219.0 159.0 219.0 160.0 219.0 161.0 220.0 161.0 221.0 \
  161.0 222.0 161.0 223.0 161.0 224.0 160.0 225.0 159.0 226.0 158.0 227.0 157.0 227.0 156.0 227.0 155.0 \
  226.0 154.0 226.0 153.0 225.0 152.0 223.0 151.0 222.0 150.0 221.0 150.0 220.0 150.0 221.0 150.0 222.0 \
  150.0 223.0 150.0 224.0 150.0 225.0 150.0 226.0 150.0 227.0 150.0 228.0 150.0 229.0 150.0 230.0 150.0 \
  231.0 150.0 233.0 149.0 233.0 148.0 235.0 147.0 235.0 146.0 235.0 145.0 236.0 144.0 237.0 141.0 238.0 \
  139.0 239.0 137.0 240.0 135.0 240.0 134.0 240.0 132.0 239.0 130.0 238.0 128.0 238.0 127.0 238.0 125.0 \
  237.0 124.0 236.0 126.0 235.0 129.0 235.0 132.0 235.0 135.0 235.0 138.0 235.0 140.0 236.0 142.0 236.0 \
  144.0 236.0 147.0 237.0 149.0 237.0 151.0 238.0 153.0 238.0 155.0 239.0 157.0 239.0 158.0 240.0 159.0 \
  241.0 160.0 242.0 161.0 242.0 160.0 242.0 159.0

 $white_board create line 151 86 151 86 151 87 151 88 153 91 154 93 155 95 156 96 156 97 157 98 158 101 \
 159 103 160 105 160 106 161 106 162 108 164 110 165 112 166 112 168 109 171 105 173 102 175 99 176 97 \
 176 96 176 95 176 94 177 93 177 92 177 91 177 90 177 89 178 88 178 87 178 86 178 87 179 88 181 91 182 \
 92 183 94 184 94 185 95 186 96 188 97 190 97 192 97 193 97 195 97 197 96 198 95 199 94 200 92 201 91 \
 201 90 201 89 202 87 202 85 202 84 202 83 202 82 201 82 200 82 199 82 198 82 197 82 196 82 196 83 195 \
 84 194 85 193 86 192 87 192 88 191 89 190 90 190 91 189 93 189 95 188 97 188 99 188 101 188 103 188 104 \
 188 105 188 106 190 108 192 110 193 111 194 111 195 111 197 111 198 111 199 111 200 111 202 110 204 108 \
 205 106 206 103 208 100 208 99 209 98 210 97 211 95 211 93 213 91 214 89 214 88 215 88  216 87 217 87 \
 218 87 219 87 220 87 221 87 221 88 221 89 221 90 222 92 222 94 222 95 223 97 223 99 223 101 223 104 223 \
 106 223 107 223 109 223 110 223 109 223 106 224 102 225 97 226 93 227 90 227 88 228 87 229 87 230 87 230 \
 88 231 89 232 89 232 90 233 90 234 90 235 90 236 89 237 89 239 89 240 89 241 88 242 86 243 86 244 86 244 \
 87 244 88 244 89 244 90 244 91 244 93 244 95 244 97 244 100 244 101 244 102 244 103 244 104 245 104 245 \
 103 246 102 249 102 250 102 251 99 251 97 252 95 254 94 255 94 255 93 255 90 256 88 256 87 257 88 257 90 \
 257 93 257 97 257 100 257 101 257 103 257 105 257 107 257 108 257 109 257 110 257 113 257 115 257 118 257 \
 119 257 120 257 121 257 123 258 125 258 126 258 127 257 127 257 128 257 129 256 129 255 129 254 129 253 \
 129 253 128 252 128 252 127 252 126 251 126 251 124 251 123 251 122 251 121 251 119 251 117 251 116 251 \
 114 252 113 254 111 256 110 257 108 259 107 259 106 260 105 261 104 262 102 263 101 263 100 264 98 265 96 \
 266 95 266 94 267 92 268 90 268 89 269 89 269 88 269 87 270 87

willdye Here's some more test data for the whiteboard. It's a math puzzle. If the smaller ball is of diameter seven, could it roll through the gap between the floor, the wall, and the larger ball?

 .wb.c delete all
 .wb.c create line  286    0 286 291 -width 10
 .wb.c create line    0  286 291 286 -width 10
 .wb.c create oval -120 -120 280 280 -fill blue
 .wb.c create oval  212  212 280 280 -fill red
 .wb.c create line   80   80 280  80 -fill green -width 4
 .wb.c create oval   77   77  83  83 -fill white
 .wb.c create text  180   70 -fill white -text "Radius 20 (diameter 40)"
 .wb.c create text  248  248 -fill white -text "Diameter?"

CJL - And how many genuinely different solutions can you come up with? (I only got as far as 2 before feeling obliged to return to actual work!)


TP 2008-07-09: My suggestion is to have a very minimal set of drawing functions, perhaps available on a pop-up context menu. Freehand drawing is not very useful (as shown by the sample image at the top of this page), and entering canvas code into the entry box is tedious. Perhaps the addition of some of the drawing code from A little drawing tool could be a starting point. Lines, rectangles, ovals, and text would be a big improvement.