Fonts, arcs and images (ti_graphics): TI-84 Evo Python

Text in three sizes, text measurement, arcs, pie slices, colors by hue and image files. 6 functions in ti_graphics, each with a working example.

Try any of these in CalcPlex PRGM, a browser code editor, which sends your program to a calculator over USB.

ti_graphics.drawArc(

ti_graphics.drawArc(x, y, w, h, start, sweep)

Draws part of a circle or oval. Angles are in tenths of a degree.

(x, y, w, h) is the box the circle fits in: x and y are its top-left corner and w and h its size. A square box gives a circle, a wider box an oval. start is the angle where the arc begins and sweep is how far it goes, both in tenths of a degree, so 900 is 90 degrees and 3600 is a full turn.

Angle 0 is at 3 o'clock, and the arc runs counter-clockwise from there.

ti_graphics counts rows from the very top of the screen, including the status bar, so its y is 30 more than the ti_draw value for the same spot. It uses the color from ti_draw.set_color() and the pen from ti_draw.set_pen().

Watch out

drawArc takes the top-left corner of a box, not a center point like draw_circle. For an arc around a center (cx, cy) with radius r in ti_draw coordinates, the box is (cx - r, cy - r + 30, 2 * r, 2 * r).

import ti_draw
import ti_graphics
import ti_system

ti_draw.set_color(0, 0, 0)
ti_draw.set_pen("thick", "solid")

# the head: a full turn inside a 120 by 120 box
# (row 75 here is row 45 in ti_draw terms)
ti_graphics.drawArc(100, 75, 120, 120, 0, 3600)

# the smile: from 180 to 360 degrees, the bottom half of a smaller oval
ti_graphics.drawArc(130, 115, 60, 50, 1800, 1800)

# the eyes, drawn with ti_draw
ti_draw.fill_circle(135, 80, 5)
ti_draw.fill_circle(185, 80, 5)

ti_system.wait_key()

A smiley face: a full-turn arc for the head, a half-turn arc for the smile, and two filled circles for the eyes.

ti_graphics.drawImage(

ti_graphics.drawImage("name", x, y)

Draws a picture from an image file on the calculator, with its top-left corner at (x, y).

name is an image file (an image AppVar) that is already on the calculator, sent from a computer the same way as a program. A Python program can't make one itself.

Like every ti_graphics call, y counts from the very top of the screen, status bar included, so it is 30 more than the ti_draw value for the same spot.

An image can have a see-through color, so it draws over any background without a box around it. Parts that go past the edge of the screen are cut off, with no error. A whole picture draws about as fast as one fill_rect.

Watch out

The image files have to be on the calculator along with the program. If name isn't there, drawImage raises ValueError: missing image appvar.

import ti_draw
import ti_graphics
import ti_system

# a sky blue background
ti_draw.set_color(120, 190, 255)
ti_draw.fill_rect(-1, -1, 321, 211)

# the image file BIRD has to be on the calculator already
# top-left corner at ti_draw (100, 80), so y is 80 + 30
ti_graphics.drawImage("BIRD", 100, 110)

ti_system.wait_key()

A sky blue screen with the BIRD picture on it. The parts of the picture around the bird are see-through.

ti_graphics.fillArc(

ti_graphics.fillArc(x, y, w, h, start, sweep)

Fills a pie slice. Same arguments as drawArc.

Fills the wedge from the center of the box out to the arc, like a slice of pie. (x, y, w, h) is the box the whole circle would fit in, start is where the slice begins and sweep is how wide it is, in tenths of a degree. A sweep of 3600 is the full circle, which gives a solid disc.

Angle 0 is at 3 o'clock and the slice runs counter-clockwise. The y counts from the top of the screen including the status bar, 30 more than the ti_draw value.

Uses the color from ti_draw.set_color().

import ti_draw
import ti_graphics
import ti_system

# percentages for a pie chart, and a color for each
parts = [50, 30, 20]
colors = [(220, 60, 60), (60, 160, 220), (240, 200, 60)]

start = 0
for i in range(3):
    r, g, b = colors[i]
    ti_draw.set_color(r, g, b)

    # 100 percent is a full turn of 3600
    sweep = parts[i] * 36
    ti_graphics.fillArc(100, 75, 120, 120, start, sweep)
    start = start + sweep

ti_system.wait_key()

A three-slice pie chart. Each percent becomes a sweep of 36, so the three slices add up to exactly one turn.

ti_graphics.hsv_to_rgb(

r, g, b = ti_graphics.hsv_to_rgb(hue, s, v)

Turns a hue angle into red, green and blue values. The easy way to make a rainbow.

Picks a color by angle instead of by mixing red, green and blue yourself. hue goes around the color wheel in degrees: 0 is red, 120 is green, 240 is blue, and 360 is back to red. s (how strong the color is) and v (how bright) are both from 0 to 1.

It returns three numbers ready for ti_draw.set_color().

Stepping the hue in a loop gives a rainbow, or a smooth fade from one color to another.

Watch out

s and v must be between 0 and 1: hsv_to_rgb(120, 100, 100) is a TypeError. And hsv_to_rgb(0.5, 1, 1) is not half way around the wheel, it is a hue of half a degree, which is still red.

import ti_draw
import ti_graphics
import ti_system

# 12 bars, stepping around the color wheel 30 degrees at a time
for i in range(12):
    r, g, b = ti_graphics.hsv_to_rgb(i * 30, 1, 1)
    ti_draw.set_color(r, g, b)
    ti_draw.fill_rect(8 + i * 25, 60, 26, 90)

ti_system.wait_key()

A rainbow of 12 bars. Only the hue changes between them.

ti_graphics.setFont(

ti_graphics.setFont(font)

Changes the size of text drawn with draw_text. Three sizes to choose from.

ti_draw.draw_text() always draws in the same medium font unless you change it here. Call setFont once and every draw_text after it uses the new size, until the program ends.

The fonts, by number:

0 small: narrower letters, about 40 per line
1 medium: the default, 10 pixels per character, 31 per line
2 large: 12 pixels per character, 26 per line
4 small bold: the same widths as small, darker letters

You can write names instead of numbers: ti_graphics.Font.SMALL, ti_graphics.Font.MEDIUM, ti_graphics.Font.LARGE.

Small letters are not all the same width, so the 160 - 5 * len(text) centering trick only works for the medium font. Use string_size() to measure text in any font.

Watch out

The font only goes back to medium when a program starts, not when you call ti_draw.clear(). If the score in your game suddenly comes out huge, a setFont(2) from the title screen is still in effect. Set it back to 1 when you are done with the big text.

import ti_draw
import ti_graphics
import ti_system

ti_draw.set_color(0, 0, 0)

ti_graphics.setFont(0)
ti_draw.draw_text(10, 40, "Small: about 40 letters fit on a line")

ti_graphics.setFont(1)
ti_draw.draw_text(10, 90, "Medium is the default")

ti_graphics.setFont(2)
ti_draw.draw_text(10, 140, "LARGE for titles")

ti_system.wait_key()

Three draw_text calls, one in each size.

ti_graphics.string_size(

w, h = ti_graphics.string_size("text", font)

Measures text: how many pixels wide and tall it will be in a font.

Returns the width and the height in pixels that draw_text would use for the string, as two numbers. Nothing is drawn.

Pass the font number as the second argument: 0 small, 1 medium, 2 large.

This is how to center text in any font: x = 160 - w // 2.

Watch out

string_size(msg) with no font measures the medium font, even right after setFont(2), so the text lands off-center. Pass the font both times.

import ti_draw
import ti_graphics
import ti_system

msg = "Level 2"

ti_graphics.setFont(2)

# measure it in the large font (font 2)
w, h = ti_graphics.string_size(msg, 2)

# half the width to the left of the middle
x = 160 - w // 2

ti_draw.set_color(0, 0, 0)
ti_draw.draw_text(x, 115, msg)

ti_system.wait_key()

Centers a large-font message. The width comes from measuring, not from counting characters.