[Date Prev][Date Next][Thread Prev][Thread Next][Date Index][Thread Index]
Re: [kidsUI] Alfredo's idea
On Tue, 11 Apr 2000, Doug Loss wrote:
Hi
I liked the idea of the storybook creator and started
thinking about a prototype. I took a look at Ted, but
although it seemed to be a good word processing
application it seems to be quite large and written
in the Motif toolkit. While that's not exactly a problem,
I am not proficient with that toolkit (don't know about
other people on the list) and modifying a relatively
large project like Ted to suit our needs can be quite
a lot of work. So, instead of using an already existing
program, I'd like to suggest the use of a rapid prototyping
environment, such as Tcl/Tk. The language is not very
good for writing real applications, but is easy to
use and ideal for our case, where we will need to be
constantly modifying the interface. There is a graphical
interface construction program for it, called vtcl, where
you can design the interface without any programming
knowledge, which can also be good for people who have
ideas about how should be the interface design, but
don't have programming knowledge.
I have made a quick prototype of the interface in vtcl,
which I have attached. To view it, you just need to
save it and run as (assuming you have Tcl/Tk installed):
wish -f storybook.tcl
I have tried to make things as simple and readily accessible
as I could:
- the "canvas", which corresponds to a page of the story
book is always fully visible, with no scrollbars or possibility
of zooming;
- the text area is the white rectangle in the canvas. It would
always have the "input focus", so that you dont need to
first click on it to be able to type, as is common with
most applications. I think it shouldnt be scrollable too;
- the scrollable area on the top of the canvas is where the
pages of the book will be stored. Each page that has been
drawn is stored there. To switch to another page you click
in the desired one (a scaled down image of each page should
be drawn on each of those squares representing the pages)
There is always a blank, white page at the end of the list,
so, to create a new page you just click there. It would
be also good to show an animation of current drawing/page
shrink and go to the small representations and the new
page grow and take place of the canvas area when you switch
pages, to visually show what's happening. Im not sure, but
maybe it would be good to remove the scrollbar from the
page list, as it could be a bit confusing, but it would
limit the number of pages possible (dont know if thats
an important limitation). There also could be other ways
of representing pages that dont fit there...
- all tools for drawing (brush, fill and eraser) are
in the top/left corner. I put text there, but in
a working version they would be pretty graphical icons
(with a small text in the bottom of the button too, maybe).
I dont know about what tools would be nice to have.
- the box below the toolbox would have a few color
crayons/paint brushes or whatever (maybe depending on
the selected tool) where you would choose the paint color.
I know children love having many colors, so maybe it
could be enlarged :) Perhaps a little label in the bottom
of that box, showing the name of the selected color
would be nice too.
- the box below the crayonbox would have some image-stamps.
They would work as another tool, you click there and
whenever you click on the canvas, it will 'print' the
selected image. The button labeled "stamp box" would
open a window with many more images. I think it could
give a selection of stamp-sets, where the whole group
of image-buttons would be replaced with the ones in
the chosen stamp-set.
- gray box at the right of the list of books is for administrative
tasks, or creating new storybooks and loading old books. Saving
would be performed automatically, whenever you load a new
book or quit the application. Whenever you create a new book,
it asks for a name of the story you will start. They would also
have graphical icons, instead of (or in addition to) text.
The load dialog would show a simplified list of the stories
by name and have a box with a preview area, showing a quick
view of the contents of the story book. No directories, paths
or anything.. Maybe a way to throw away a book would be good
there. I'll try to make a mockup of this dialog later.
The application would always occupy the whole screen, so that
children won't get confused/detracted by other things that could
be present on screen, such as panels, docks, other apps etc.
I tried avoiding using complex widgets, such as menus and anything
that involves more than one or at most two physical actions
(clicking and dragging many times, such as with pulldown menus)
to be able to perform something. There are a few exceptions but
I couldnt think of anything to replace them. The buttons are also
quite big (I hate those MS-Word style micro-buttons even for
conventional interfaces..)
Open questions:
- undo? Thats an important feature in usual applications, but I
dont know how could that be presented in our case or even if
we should have it.
- the design of the graphical icons is important, as we already
know..
Im sure the basic design could be much improved. If you want to
play with it by modifying the design, you can open it with
vtcl (I dont remember the url for it, but if you go to
freshmeat.net or google, you should be able to find it.
Just look for vtcl and tcl/tk).
Oh another thing.. I forgot about printing, but I think it
could be just another button near the New and Load buttons.
Opinions, suggestions or alternatives apreciated.
This is, of course, just a pretty basic idea..
Once it's ready (which shouldnt take much time
to be), we could start adding intelligent
agents, tutoring systems etc :)
--
Alfredo
> Alfredo Kojima mentioned that we probably ought to start some sort of
> "stalking horse" program, a program for kids that we can use to
> experiment with on our ideas of UI concepts appropriate for them. We
> never got much beyond that point, but I think the idea's a good one and
> I'd like to propose such a program.
>
> Something I'd like to see for Linux is a program of the type I'll call
> "storybook creators." A storybook creator would have elements of a
> simple wordprocessor and of a simple graphics program. It would present
> the child with a page (and the on-screen presentation probably ought to
> be very close or identical to the printed representation) where a
> section would be set aside for a picture and a section would be for
> text. The child could draw the picture from scratch, or select from
> stored background images and stored "stamps". The background/stamp
> possibility would be similar to a child's sticker book. For each page
> the child could then write a few sentences of text to describe the
> picture and tell a story. Text-to-speech and background music audio
> additions could also be possible.
>
> If we decide to work on something like this as a textbed, I suggest we
> use an existing text editor engine rather than developing one
> ourselves. That would allow us to concentrate on the UI questions we're
> interested in, and might give us the chance to investigate the
> "expandable" UI concept I've mentioned once or twice. If we agree to do
> this, I suggest we consider Ted <http://www.nllgg.nl/Ted/> as the editor
> we start with.
>
> --
> Doug Loss Even if you're on the right track,
> Data Network Coordinator you'll get run over if you just
> Bloomsburg University sit there.
> dloss@bloomu.edu Will Rogers
>
>
#!/usr/bin/wish
#############################################################################
# Visual Tcl v1.20 Project
#
#################################
# GLOBAL VARIABLES
#
global widget;
#################################
# USER DEFINED PROCEDURES
#
proc init {argc argv} {
}
init $argc $argv
proc {main} {argc argv} {
}
proc {Window} {args} {
global vTcl
set cmd [lindex $args 0]
set name [lindex $args 1]
set newname [lindex $args 2]
set rest [lrange $args 3 end]
if {$name == "" || $cmd == ""} {return}
if {$newname == ""} {
set newname $name
}
set exists [winfo exists $newname]
switch $cmd {
show {
if {$exists == "1" && $name != "."} {wm deiconify $name; return}
if {[info procs vTclWindow(pre)$name] != ""} {
eval "vTclWindow(pre)$name $newname $rest"
}
if {[info procs vTclWindow$name] != ""} {
eval "vTclWindow$name $newname $rest"
}
if {[info procs vTclWindow(post)$name] != ""} {
eval "vTclWindow(post)$name $newname $rest"
}
}
hide { if $exists {wm withdraw $newname; return} }
iconify { if $exists {wm iconify $newname; return} }
destroy { if $exists {destroy $newname; return} }
}
}
#################################
# VTCL GENERATED GUI PROCEDURES
#
proc vTclWindow. {base} {
if {$base == ""} {
set base .
}
###################
# CREATING WIDGETS
###################
wm focusmodel $base passive
wm geometry $base 1x1+0+0
wm maxsize $base 1585 1170
wm minsize $base 1 1
wm overrideredirect $base 0
wm resizable $base 1 1
wm withdraw $base
wm title $base "vt.tcl"
###################
# SETTING GEOMETRY
###################
}
proc vTclWindow.top17 {base} {
if {$base == ""} {
set base .top17
}
if {[winfo exists $base]} {
wm deiconify $base; return
}
###################
# CREATING WIDGETS
###################
toplevel $base -class Toplevel \
-background #aecfae
wm focusmodel $base passive
wm geometry $base 1024x768+170+271
wm maxsize $base 1585 1170
wm minsize $base 1 1
wm overrideredirect $base 0
wm resizable $base 1 1
wm deiconify $base
wm title $base "StoryBook"
frame $base.fra29 \
-relief raised -width 30
scrollbar $base.fra29.01 \
-background #bebebe -command {.top17.fra29.03 xview} -orient horiz \
-troughcolor #bebebe -width 10
canvas $base.fra29.03 \
-background #efe8bc -borderwidth 2 -height 100 -relief sunken \
-width 26 -xscrollcommand {.top17.fra29.01 set}
frame $base.fra29.03.fra53 \
-background #000000 -borderwidth 2 -height 75 -width 125
frame $base.fra29.03.fra54 \
-background #fefefe -borderwidth 2 -height 75 -width 125
label $base.fra29.03.fra54.lab59 \
-background #bebebe -borderwidth 1 -relief raised \
-text {some page
here}
frame $base.fra29.03.fra57 \
-background #000000 -borderwidth 2 -height 75 -width 125
frame $base.fra29.03.fra58 \
-background #fefefe -borderwidth 2 -height 75 -width 125
label $base.fra29.03.fra58.lab60 \
-background #bebebe -borderwidth 1 -relief raised \
-text {blank, new
page}
frame $base.fra31 \
-background #90ccc8 -borderwidth 2 -height 75 -relief groove \
-width 125
button $base.fra31.but32 \
-background #cfaadf -highlightthickness 0 -padx 9 -pady 3 -text brush
button $base.fra31.but34 \
-background #cfaadf -highlightthickness 0 -padx 9 -pady 3 -text fill
button $base.fra31.but47 \
-background #cfaadf -highlightthickness 0 -padx 9 -pady 3 \
-text eraser
frame $base.fra38 \
-background #90ccc8 -borderwidth 2 -height 75 -relief groove \
-width 125
button $base.fra38.01 \
-background #cfaadf -highlightthickness 0 -padx 9 -pady 3 -text brush
button $base.fra38.03 \
-background #cfaadf -highlightthickness 0 -padx 9 -pady 3 -text brush
button $base.fra38.04 \
-background #cfaadf -highlightthickness 0 -padx 9 -pady 3 -text brush
button $base.fra38.05 \
-background #cfaadf -highlightthickness 0 -padx 9 -pady 3 -text brush
button $base.fra38.but43 \
-background #cfaadf -highlightthickness 0 -padx 9 -pady 3 -text brush
button $base.fra38.but44 \
-background #cfaadf -highlightthickness 0 -padx 9 -pady 3 -text brush
button $base.fra38.but45 \
-background #cfaadf -highlightthickness 0 -padx 9 -pady 3 \
-text {stamp box}
button $base.fra38.but62 \
-background #cfaadf -highlightthickness 0 -padx 9 -pady 3 -text brush
button $base.fra38.but63 \
-background #cfaadf -highlightthickness 0 -padx 9 -pady 3 -text brush
canvas $base.can41 \
-background #fefefe -borderwidth 2 -height 207 -relief sunken \
-width 295
text $base.can41.tex48 \
-background #e8dee4 -font {times 24 {}} -foreground black \
-insertbackground black -selectbackground black \
-selectforeground white
frame $base.fra61 \
-borderwidth 2 -height 75 -relief groove -width 125
button $base.fra61.but64 \
-padx 9 -pady 3 -text {Load Book}
button $base.fra61.but65 \
-padx 9 -pady 3 -text {New Book}
frame $base.fra66 \
-background #90ccc8 -borderwidth 2 -height 75 -relief groove \
-width 125
button $base.fra66.but67 \
-background #74db8a -highlightthickness 0 -padx 9 -pady 3
button $base.fra66.but72 \
-background #589adf -highlightthickness 0 -padx 9 -pady 3
button $base.fra66.but73 \
-background #dfdb40 -highlightthickness 0 -padx 9 -pady 3
button $base.fra66.but74 \
-background #df7ea2 -highlightthickness 0 -padx 9 -pady 3
button $base.fra66.but76 \
-highlightthickness 0 -padx 9 -pady 3
button $base.fra66.but77 \
-background #5278b0 -highlightthickness 0 -padx 9 -pady 3
button $base.fra66.but78 \
-background #56db92 -highlightthickness 0 -padx 9 -pady 3
button $base.fra66.but79 \
-background #df246c -highlightthickness 0 -padx 9 -pady 3
button $base.fra66.but80 \
-highlightthickness 0 -padx 9 -pady 3
button $base.fra66.but81 \
-highlightthickness 0 -padx 9 -pady 3
button $base.fra66.but82 \
-highlightthickness 0 -padx 9 -pady 3
button $base.fra66.but83 \
-highlightthickness 0 -padx 9 -pady 3
###################
# SETTING GEOMETRY
###################
place $base.fra29 \
-x 190 -y 5 -width 700 -height 102 -anchor nw
grid columnconf $base.fra29 0 -weight 1
grid rowconf $base.fra29 0 -weight 1
grid rowconf $base.fra29 1 -minsize 24
grid $base.fra29.01 \
-in .top17.fra29 -column 0 -row 1 -columnspan 1 -rowspan 1 \
-sticky nesw
grid $base.fra29.03 \
-in .top17.fra29 -column 0 -row 0 -columnspan 1 -rowspan 1 \
-sticky nesw
place $base.fra29.03.fra53 \
-x 15 -y 15 -width 85 -height 50 -anchor nw -bordermode ignore
place $base.fra29.03.fra54 \
-x 10 -y 10 -width 85 -height 50 -anchor nw -bordermode ignore
place $base.fra29.03.fra54.lab59 \
-x 10 -y 10 -anchor nw -bordermode ignore
place $base.fra29.03.fra57 \
-x 115 -y 15 -width 85 -height 50 -anchor nw -bordermode ignore
place $base.fra29.03.fra58 \
-x 110 -y 10 -width 85 -height 50 -anchor nw -bordermode ignore
place $base.fra29.03.fra58.lab60 \
-x 10 -y 10 -anchor nw -bordermode ignore
place $base.fra31 \
-x 10 -y 5 -width 175 -height 165 -anchor nw -bordermode ignore
place $base.fra31.but32 \
-x 10 -y 75 -width 77 -height 76 -anchor nw -bordermode ignore
place $base.fra31.but34 \
-x 90 -y 75 -width 77 -height 76 -anchor nw -bordermode ignore
place $base.fra31.but47 \
-x 10 -y 15 -width 157 -height 46 -anchor nw -bordermode ignore
place $base.fra38 \
-x 10 -y 365 -width 175 -height 395 -anchor nw -bordermode ignore
place $base.fra38.01 \
-x 10 -y 10 -width 77 -height 76 -anchor nw -bordermode ignore
place $base.fra38.03 \
-x 90 -y 10 -width 77 -height 76 -anchor nw -bordermode ignore
place $base.fra38.04 \
-x 10 -y 90 -width 77 -height 76 -anchor nw -bordermode ignore
place $base.fra38.05 \
-x 90 -y 90 -width 77 -height 76 -anchor nw -bordermode ignore
place $base.fra38.but43 \
-x 10 -y 170 -width 77 -height 76 -anchor nw -bordermode ignore
place $base.fra38.but44 \
-x 90 -y 170 -width 77 -height 76 -anchor nw -bordermode ignore
place $base.fra38.but45 \
-x 10 -y 335 -width 157 -height 51 -anchor nw -bordermode ignore
place $base.fra38.but62 \
-x 10 -y 250 -width 77 -height 76 -anchor nw -bordermode ignore
place $base.fra38.but63 \
-x 90 -y 250 -width 77 -height 76 -anchor nw -bordermode ignore
place $base.can41 \
-x 190 -y 115 -width 825 -height 643 -anchor nw -bordermode ignore
place $base.can41.tex48 \
-x 20 -y 475 -width 788 -height 155 -anchor nw -bordermode ignore
place $base.fra61 \
-x 900 -y 5 -width 115 -height 100 -anchor nw -bordermode ignore
place $base.fra61.but64 \
-x 10 -y 50 -width 97 -height 41 -anchor nw -bordermode ignore
place $base.fra61.but65 \
-x 10 -y 5 -width 97 -height 41 -anchor nw -bordermode ignore
place $base.fra66 \
-x 10 -y 175 -width 175 -height 180 -anchor nw -bordermode ignore
place $base.fra66.but67 \
-x 10 -y 10 -width 32 -height 51 -anchor nw -bordermode ignore
place $base.fra66.but72 \
-x 50 -y 10 -width 32 -height 51 -anchor nw -bordermode ignore
place $base.fra66.but73 \
-x 92 -y 10 -width 32 -height 51 -anchor nw -bordermode ignore
place $base.fra66.but74 \
-x 132 -y 10 -width 32 -height 51 -anchor nw -bordermode ignore
place $base.fra66.but76 \
-x 10 -y 65 -width 32 -height 51 -anchor nw -bordermode ignore
place $base.fra66.but77 \
-x 50 -y 65 -width 32 -height 51 -anchor nw -bordermode ignore
place $base.fra66.but78 \
-x 92 -y 65 -width 32 -height 51 -anchor nw -bordermode ignore
place $base.fra66.but79 \
-x 132 -y 65 -width 32 -height 51 -anchor nw -bordermode ignore
place $base.fra66.but80 \
-x 133 -y 120 -width 32 -height 51 -anchor nw -bordermode ignore
place $base.fra66.but81 \
-x 92 -y 120 -width 32 -height 51 -anchor nw -bordermode ignore
place $base.fra66.but82 \
-x 50 -y 120 -width 32 -height 51 -anchor nw -bordermode ignore
place $base.fra66.but83 \
-x 10 -y 120 -width 32 -height 51 -anchor nw -bordermode ignore
}
Window show .
Window show .top17
main $argc $argv