4. Paper

This tutorial will teach you how to use the Paper component to draw images in your app yourself.

Introduction

The Paper component is a view that you can draw whatever you want on yourself, so it's similar to the Image component, but instead of specifying the URL of the image, you specify how the image should be drawn using lines, circles, rectangles, etc.

Creating a Paper component instance

To create a new Paper component, simply write Paper.

class StartPage extends Page{
	
	createGui(){
		return Paper.backgroundColor(`gold`)
	}
	
}

Dimensioning the Paper

Often when you draw something on the paper, you expect the paper to be of a certain size, so you don't risk drawing something too big on it that doesn't fit. So, often when you use the Paper component, you use it in a Box layout, so you can give it a specific size.

class StartPage extends Page{
	
	createGui(){
		return Box.width(30).height(50).child(
			Paper.backgroundColor(`gold`),
		)
	}
	
}

The coordinate system

To draw something on the Paper, you need to specify where on the Paper it should be drawn. To specify that, you need to know how the coordinate system the Paper is using works.

The Paper component uses a coordinate system with an x-axe and a y-axe:

• The x-axe starts at the left side of the Paper component (x = 0 at the left side) and increases towards the right
• The y-axes starts at the bottom side of the Paper component (y = 0 at the bottom side) and increases towards the top

1 unit in the coordinate system represents 1 millimeter on the screen (although this can be changed, learn more about that in next tutorial).

Showing the coordinate system

To show the coordinate system, call the configuraiton method showCoordinates() on the Paper component. When you call this method, the following will be drawn on the Paper:

• Horizontal lines every 10 millimeters
• Vertical lines every 10 millimeters
• The mouse's position in the upper right corner

This is something you can use during development, but after you have fininshed writing your code, you probably want to remove the call to showCoordinates(), since you don't want your users to see it.

class StartPage extends Page{
	
	createGui(){
		return Box.width(30).height(50).child(
			Paper.showCoordinates().backgroundColor(`gold`),
		)
	}
	
}

Drawing things on the Paper

To draw various things on the Paper component, call the configuration method children(), and pass it the various components that can be drawn on the Paper. The components that can be drawn on the Paper component all have names starting with Paper, such as:

• PaperLine for drawing a line
• PaperCircle for drawing a circle
• PaperRectangle for drawing a rectangle

Learn more about how to use these next. Ordinary GUI components, such as Text and Button, can't be used as children in the Paper component.

Drawing a line

Use the GUI component PaperLine to draw a line on the Paper component. It has default values for all different properties (position, color, etc.), so you can use it as it is.

class StartPage extends Page{
	
	createGui(){
		return Box.width(30).height(50).child(
			Paper.backgroundColor(`gold`).children(
				PaperLine,
			),
		)
	}
	
}

Call various configuration methods on the PaperLine component to change where and how it's drawn on the Paper:

• Call start(x, y) to indicate the position of the start of the line
• Call end(x, y) to indicate the position of the end of the line
• Call thickness(theNumber) to indicate how thick the line should be
• Call backgroundColor(theColor) to indicate the color of the line

class StartPage extends Page{
	
	createGui(){
		return Box.width(30).height(50).child(
			Paper.backgroundColor(`gold`).children(
				PaperLine.start(10, 10).end(20, 20).thickness(2).backgroundColor(`blue`),
				PaperLine.start(10, 20).end(20, 10).thickness(5).backgroundColor(`pink`),
			),
		)
	}
	
}

Drawing a circle

Use the GUI component PaperCircle to draw a circle on the Paper component. It has default values for all different properties (position, color, etc.), so you can use it as it is.

class StartPage extends Page{
	
	createGui(){
		return Box.width(30).height(50).child(
			Paper.backgroundColor(`gold`).children(
				PaperCircle,
			),
		)
	}
	
}

Call various configuration methods on the PaperCircle component to change where and how it's drawn on the Paper:

• Call center(x, y) to indicate the position of the center of the circle
• Call radius(theRadius) to indicate the radius of the circle
• Call backgroundColor(theColor) to indicate the color of the circle

class StartPage extends Page{
	
	createGui(){
		return Box.width(30).height(50).child(
			Paper.backgroundColor(`gold`).children(
				PaperCircle.center(0, 0).radius(10).backgroundColor(`blue`),
				PaperCircle.center(15, 30).radius(3).backgroundColor(`lime`),
			),
		)
	}
	
}

Drawing a rectangle

Use the GUI component PaperRectangle to draw a rectangle on the Paper component. It has default values for all different properties (position, color, etc.), so you can use it as it is.

class StartPage extends Page{
	
	createGui(){
		return Box.width(30).height(50).child(
			Paper.backgroundColor(`gold`).children(
				PaperRectangle,
			),
		)
	}
	
}

Call various configuration methods on the PaperRectangle component to change where and how it's drawn on the Paper:

• Call center(x, y) to indicate the position of the center of the rectangle
• Call width(theWidth) to indicate the width of the rectangle
• Call height(theHeight) to indicate the height of the rectangle
• Call backgroundColor(theColor) to indicate the color of the rectangle

class StartPage extends Page{
	
	createGui(){
		return Box.width(30).height(50).child(
			Paper.backgroundColor(`gold`).children(
				PaperRectangle.center(15, 30).height(30).width(20).backgroundColor(`blue`),
				PaperRectangle.center(15, 15).height(10).width(15).backgroundColor(`lime`),
			),
		)
	}
	
}

That's it!

Woho! 🥳 Now you know how to use images in your BagaWork apps, goor work!