HippoCanvas

From OLPC
Jump to navigation Jump to search
This article is a stub. You can help the OLPC project by expanding it.

HippoCanvas is a generic user interface element that can draw Cairo graphics, respond to key and mouse events, and lay out other widgets. It is currently used to implement a number of Sugar's custom widgets (toolbars, rounded buttons, etc.) and to lay out the screen.

On the OLPC, HippoCanvas is a GTK widget and it can contain other GTK widgets, so the programmer can freely combine HippoCanvas and other widgets. While Sugar does not require that activities be written using HippoCanvas, those that do can look more visually consistent with other activities.

Rationale

HippoCanvas was originally designed to be a cross-platform UI layer built on top of other windowing systems. It is used in Sugar to work around deficiencies in GTK's layout system. [1] HippoCanvas also makes it easier to prototype custom widgets, and its Python interface can be somewhat simpler than native GTK widgets.

Classes and Interfaces

Canvas object

Derives from GtkContainer. This is a GTK widget that hosts a root CanvasItem.

CanvasItem interface

CanvasContext interface

CanvasBox object

Derives from GObject, implements CanvasItem, CanvasContext.

CanvasWidget object

Derives from CanvasBox.

CanvasImage object

Derives from CanvasBox.

CanvasText object

Derives from CanvasBox.

CanvasLink object

Derives from CanvasText.

Enumerations

PackFlags enumeration

CascadeMode enumeration

StockColor enumeration

CanvasPointer enumeration

ItemAlignment enumeration

CanvasSizeMode enumeration

ScrollbarPolicy enumeration

EventType enumeration

MotionDetail enumeration

Key enumeration

Orientation enumeration

Side enumeration

Gravity enumeration

Internal objects

Event object

Encapsulates information about a mouse action or keypress. It is currently only used internally.

Rectangle object

Describes a rectangle on the screen in integer coordinates. It is currently only used internally.

Fields:

  • x
  • y
  • width
  • height

Methods:

  • rectangle.intersect(rect2, dest)
  • rectangle.equals(rect2) => boolean

Links