Graphical Painter

written 14 Nov 1999 being revised May 2006

Google site search

You need the Tcl Plugin to read this page. If this spot  is not green (v2) or cyan (v3)you may want to download the latest Tcl Plugin.

1   Introduction

This project is a close analogue to the Text Editor Project.

There are basically two different kinds of image painters. There are painters which embed changes into a single image such as MS Paint, and all photo editors, and there are painters which place objects onto a canvas that retain their identity, such as CorelDraw.

This project is for a painter of the later type which has the power of MS Paint and better.

A Tk widget is again used to do most of the hard work, so that the project is not as difficult as one might at first suppose. And like the Text Editor, the result gives students a basis which they can then use to develop more specific applications that use image manipulation. This may include games and teaching tools for young children, or disabled persons.

The benefits of this exercise are comparable to the benefits of the Text Editor exercise. What is not so clear in this case is the usefuleness of the application that the student is being asked to build. With many extremely sophisticated image processing packages available with very advanced features few children even bother to use the MS Windows Paint program. About the only place it is used actively in a creative manner is as part of NetMeeting so that you can draw diagrams of ideas to comminate across the net. How to do this using Tcl is a later project. But this painter can be extended in personal ways to create art work, to create colour combination systems, and using Tcl's time mechanism, even moving pictures, cartoons and presentations and displays.

Another important part of this project is learning about the reuse of other projects to quickly create a frame work. This involves several skills :- recognising similar problems and solutions, learning techniques for code reuse that do not require the original code to be changed, learning how to write code that can be easily reused, learning how to write reuseable code that can be easily maintained and part of several different projects.

This project is large enough for a small group of 2 to maybe 5 people. In which case it is a good project to use. This is because the project can be split up into several independant fucntional components.

As a one person project it can be implemented a stage at a time and stages designed as they are attempted in sequence. Even if only the first few stages are successfully completed a useful program will be produced that the student can elaborate later.

As a group project much more care is required. Group projects can fail due to the group not getting its act together.

A group implementation of a project like this could take longer than a one-person implementation. And it also has greater risk of total failure. But this is a large enough small project for a project team development and for the students to learn about project skills, such as management (Project Management Software package could be used such as MS Project), project component design, subcomponent testing techniques, quailty control of the source code and reliability of the final product. All tese factors mulitply the complexity of this project to at least 3 times what it might appear to be at first.

Also the teacher must give careful thought to what qualifies as successful completion of the project on the part of each individual.

Because of the big difference in the structure of the implementation, two implementation schemes will be given here. The first is the one person implementation. In describing this, the technical details of the project will be discussed and a sample implementation presented. However, be prepared to see somewhat different designs being implemented in the classroom. The paradigms for painting programs are not yet well understood and there is plenty of scope for new solution ideas to be invented tested and appraised yet. The second implementation structure is more concerned with the group aspects of the project, and assumes that you understand the technical details as outlined in the first implementation structure.

2   Single Person implementation

2.1   Introduction - Overview, resources required, prerequisite knowledge

2.1.1   Overview

This is a major programming project for 1st, 2nd or 3rd Year High School Students specialising in learning about computer programming.

Each student works alone to produce his/her own graphical painter program. The source of this program can then be used as a basis for other more complex programs.

This project can be done as a single student as a personal project, or by a small class of 3 to 5.

As a small project

Most of the project tuition is taken up in explaining computer user interface concepts such as windows, selection, focus, widgets, and file access. The project shows how these ideas are implemented in the programming language Tcl."

2.1.2   Resources Required

A PC type computer and the freely available Tcl interpreter are required. A small slow computer is adequate for this project for a small group of students. Any of the Linux, Windows or Mac operating systems can be used and the product will port and run on all these systems.

2.1.3   Prerequisite knowledge

However, the application being developed here is not as primitive as Paint or the NetMeeting Whiteboard. This painter retains memory of the objects in it and behaves like a cut-down version of Corel-Draw, so that you can go back and adjust or change the objects you have painted, move them about, resize them or change their characteristics.

Because of this students should look at some of the paradigm products and assess there virtues and failings before desinging their own painter.

The design issues revolve around the functions that are to be performed with or on the objects. These are creating, moving, resizing, deleting, altering characteristics. The kinds of items that can be painted are : arcs, bitmaps, gif images, lines, ovals, polygons, rectangles and text. Some of these cannot be usefully resized, such as text which would have its font characteristics changed instead. The modes of operation of the mouse within the drawing canvas need to be carefully thought out and planned.

2.2   Lesson 1 - Designing Stage 1

Image objects cannot be easily modified on a canvas and can be left out of Stage 1.

Only one each of the other object kinds should be included so as to limit the size and scope of the exercise, but not the complexity. A good choice is rectangle, line and text. The painter resulting from stage 1 can then be used to draw diagrams that can be included in documents, web pages etc.

Students should write up a help file which explains what menubuttons there are - how to use them. What actions to take to create the various objects. How to select existing objects for modification or select modification operations, and how to make modifications. Detail exactly what object options are available for modification.

2.3   Lesson 2 - Implement and test Stage 1

2.4   Lesson 3 - Designing Stage 2 - Tag and Selection Functions

Each object on the canvas has a unique name called a tag. In addition an object may be given any number of additional tags which can be used to classify groups of objects. The tag order determines the layering order of objects in the canvas, which object is "on top".

In this stage the operations of the Painter are extended to work on tags, or groups of elements as well as single elements. In addition the canvas provides two methods of selection by drawing a box. Selection of objects contained in the box, and select of objects intersecting with the box. This together with inverse selection ( objects not currently selected ) provides a comprehensive topolgical base for selecting groups of objects. (The relevance of Topology theory was mentioned in the Information Technology Introduction Section)

2.5   Lesson 4 - Implementing Tag and Selection Functions

This should be relatively easy, since the canvas commands have been designed to generalise to tag functions in any case. In most cases, a carefully designed program should need little change over and above providing the graphical interface to the select commands.

2.6   Lesson 5 - Node Editing

The line and polygon widgets can be improved by provided better access to editing the nodes. This is typically done by overlaying the widget nodes with marker widgets which can be moved and the nodes are kept in synch. This is a small but interesting extension exercise.

2.7   Lesson 6 - Implementing the rest of the canvas widgets

It should now be a simple job to implement the rest of the canvas objects.

2.8   Lesson 7 - Object Extensions to the Painter

The basic Painter is complete at this point. At this stage in the completion of the Text Editor Project we looked at different ways that the editor could be extended to be used. This was by using the basic text editor for things other than ordinary text.

The Painter can be extended as it is by adding more complex and functional rather than simply pictorial objects to the canvas. The first "functional" object that can be added is the graph. This is a collection of similar looking points connected by edges which is used to display relationships between objects. The graph object is a basic mathematical object describing relationships and can be used in a wide variety of computational ways which are well suited to computer use.

Typically only one graph is displayed in a canvas at any time, though the graph can be in several disconnected parts. So it is reasonable to define just one kind of node type to apply for the whole canvas. And again all the edges will be of the same properties. But the graph should be able to exist amidst the other objects already implemented.

The nodes and edges should have create, move and delete functions (methods) and the nodes and edges have modifiable attributes up to some level.

A useful computational function to apply to the graph is the "Maximal Flow" problem.

This is a mini-project with major Mathematics Content which is more appropriate to students of Computer Science or Mathematics.

2.9   Lesson 8 - Possibilities for specialist programs based on the Painter

This is an additional brainstorming session which may come up with some ideas for a Class project for a Senior High School , Undergraduate, Graduate year project or for more modest projects for one person.

While the text editor project is so simple it can only be used as a basis to build and specialise on, the painter can be mofidied in a wide varitey of ways. The canvas widget provides a forum for many different kinds of activities, from simple to complex games, teaching aids and so forth. The canvas can be given many different kinds of behaviour and can be used for animations, programmed instruction, testing and test verification.

Because the canvas communicates by images in relatively complex ways, the way that people interact with it cannot be so readily assumed as with the text widget which uses a restricted and well understood universe of objects and methods.

Students should each write down various ideas for spin-offs for the painter. These may be personal projects or may be programs with a useful function in the school, or on WEBSCOOL, for example an appointment book or timetable system.

Care should be taken not to object painting applications and not to be side-tracked into the area of image processing applications.

3   Group Implementation

3.1   Setting up the Project Management/Coordination

The teacher needs to decide if he or a student will be the project manager or coordinator. One way of accomplishing this and passing on project management skills is for the teacher to do the management process but to assign one student to maintain the Project Schedule using software such as MS Project. This then becomes a mentor process. Project Management Software is very complex and there is a large learning curve involved, so this student role should not be underestimated. Given MS Project as a management tool the student may be able to do much of the follow up, but Project Maganement is very much a human resource skill and all sorts of problems will be encountered which will require reference back to the teacher.

3.2   Lesson B - Designing the Implementation Structure

This may need to be defined by the teacher, but students will learn a lot about how to implement a group project by attempting to define this themselves as a group, and the Project Manager translating the decisions into a formal Project Management structure. This process should produce a Project Plan which looks something like this:-

As a point of interest the above diagram was drawn using the first stage of the Painter which can be produced in this project. And I included the code for dragging objects around by clicking with the right mouse button, though there is no way to save the changes. Any slightly odd gaps are caused by slightly different font sizes being used by the browser compared to the painter.

©2000 - 2006 WEBSCOOL This page last updated 14 May 2006. All rights reserved - including copying or distribution of any portion of this document in any form or on any medium without authorisation. For more regarding the copyright.