This shows you the differences between two versions of the page.
Both sides previous revision Previous revision Next revision | Previous revision Next revision Both sides next revision | ||
tutorials:gfx [2012/04/05 04:50] pburgess [Drawing lines] |
tutorials:gfx [2012/04/05 04:54] pburgess [Coordinate System and Units] |
||
---|---|---|---|
Line 9: | Line 9: | ||
====== Coordinate System and Units ====== | ====== Coordinate System and Units ====== | ||
- | Pixels — picture elements, the blocks comprising a digital image — are addressed by their horizontal (X) and vertical (Y) coordinates. The coordinate system places the origin (0,0) at the top left corner, with positive X increasing to the right and positive Y increasing downward. This is upside-down relative to the standard Cartesian coordinate system of mathematics, but is established practice in many computer graphics systems (a throwback to the days of raster-scan CRT graphics, which worked top-to bottom). To use a tall “portrait” layout rather than wide “landscape” format, or if physical constraints dictate the orientation of a display in an enclosure, one of four rotation settings can also be applied, indicating which corner of the display represents the top left. | + | Pixels — picture elements, the blocks comprising a digital image — are addressed by their horizontal (X) and vertical (Y) coordinates. The coordinate system places the origin (0,0) at the top left corner, with positive X increasing to the right and positive Y increasing downward. This is upside-down relative to the standard Cartesian coordinate system of mathematics, but is established practice in many computer graphics systems (a throwback to the days of raster-scan CRT graphics, which worked top-to-bottom). To use a tall “portrait” layout rather than wide “landscape” format, or if physical constraints dictate the orientation of a display in an enclosure, one of four rotation settings can also be applied, indicating which corner of the display represents the top left. |
Also unlike the mathematical Cartesian coordinate system, points here have dimension — they are always one full integer pixel wide and tall. | Also unlike the mathematical Cartesian coordinate system, points here have dimension — they are always one full integer pixel wide and tall. | ||
Line 71: | Line 71: | ||
void fillRect(uint16_t x0, uint16_t y0, uint16_t w, uint16_t h, uint16_t color);</code> | void fillRect(uint16_t x0, uint16_t y0, uint16_t w, uint16_t h, uint16_t color);</code> | ||
+ | |||
+ | {{ :tutorials:gfx:rect.png?nolink& |}} | ||
[[http://www.ladyada.net/images/18tftbreakout/st7735squares.jpg|{{ http://www.ladyada.net/images/18tftbreakout/st7735squares_t.jpg?nolink&500x309 |}}]] | [[http://www.ladyada.net/images/18tftbreakout/st7735squares.jpg|{{ http://www.ladyada.net/images/18tftbreakout/st7735squares_t.jpg?nolink&500x309 |}}]] | ||
Line 83: | Line 85: | ||
void fillCircle(uint16_t x0, uint16_t y0, uint16_t r, uint16_t color);</code> | void fillCircle(uint16_t x0, uint16_t y0, uint16_t r, uint16_t color);</code> | ||
+ | |||
+ | {{ :tutorials:gfx:circle.png?nolink& |}} | ||
[[http://www.ladyada.net/images/18tftbreakout/st7735circles.jpg|{{ http://www.ladyada.net/images/18tftbreakout/st7735circles_t.jpg?nolink&500x311 |}}]] | [[http://www.ladyada.net/images/18tftbreakout/st7735circles.jpg|{{ http://www.ladyada.net/images/18tftbreakout/st7735circles_t.jpg?nolink&500x311 |}}]] | ||
Line 94: | Line 98: | ||
void fillRoundRect(uint16_t x0, uint16_t y0, uint16_t w, uint16_t h, uint16_t radius, uint16_t color);</code> | void fillRoundRect(uint16_t x0, uint16_t y0, uint16_t w, uint16_t h, uint16_t radius, uint16_t color);</code> | ||
- | (Image will go here) | + | {{ :tutorials:gfx:roundrect.png?nolink& |}} |
Here’s an added bonus trick: because the circle functions are always drawn relative to a center pixel, the resulting circle diameter will always be an odd number of pixels. If an even-sized circle is required (which would place the center point //between// pixels), this can be achieved using one of the rounded rectangle functions: pass an identical width and height that are even values, and a corner radius that’s exactly half this value. | Here’s an added bonus trick: because the circle functions are always drawn relative to a center pixel, the resulting circle diameter will always be an odd number of pixels. If an even-sized circle is required (which would place the center point //between// pixels), this can be achieved using one of the rounded rectangle functions: pass an identical width and height that are even values, and a corner radius that’s exactly half this value. | ||
Line 105: | Line 109: | ||
void fillTriangle(uint16_t x0, uint16_t y0, uint16_t x1, uint16_t y1, uint16_t x2, uint16_t y2, uint16_t color);</code> | void fillTriangle(uint16_t x0, uint16_t y0, uint16_t x1, uint16_t y1, uint16_t x2, uint16_t y2, uint16_t color);</code> | ||
- | (Image will be added here) | + | {{ :tutorials:gfx:triangle.png?nolink& |}} |
===== Characters and text ===== | ===== Characters and text ===== | ||
Line 112: | Line 115: | ||
<code C>void drawChar(uint16_t x, uint16_t y, char c, uint16_t color, uint8_t size);</code> | <code C>void drawChar(uint16_t x, uint16_t y, char c, uint16_t color, uint8_t size);</code> | ||
+ | |||
+ | {{ :tutorials:gfx:char.png?nolink& |}} | ||
Text is very flexible but operates a bit differently. Instead of one procedure, the text size, color and position are set up in separate functions and then the ''print()'' function is used — this makes it easy and provides all of the same string and number formatting capabilities of the familiar ''Serial.print()'' function! | Text is very flexible but operates a bit differently. Instead of one procedure, the text size, color and position are set up in separate functions and then the ''print()'' function is used — this makes it easy and provides all of the same string and number formatting capabilities of the familiar ''Serial.print()'' function! |