MicroPython On WebIDE 2. LCD. Graphics

Dimi

This lesson focuses on the integrated LCD display. We will look at the basic functions on the MicroPython language for graphics M5Stack.

The color value is specified as 24-bit integers, 8-bit color. For example: 0xFF0000 is red. Use only the upper 6 bits of the color component value.
The following constants are defined colors, and can be used as arguments colors: BLACK, NAVY, DARKGREEN, DARKCYAN, MAROON, PURPLE, OLIVE, LIGHTGREY, DARKGREY, BLUE, GREEN, CYAN, RED, MAGENTA, YELLOW, WHITE, ORANGE, YELLOW, PINK.
The following font constants are defined and can be used as arguments to font: FONT_Default, FONT_DefaultSmall, FONT_DejaVu18, FONT_Dejavu24, FONT_Ubuntu, FONT_Comic, FONT_Minya, FONT_Tooney, FONT_Small, FONT_7seg.
Also an unlimited number of options of fonts can be used from external files.

List 1. Standard methods for working with graphics

lcd.pixel(x, y [,clr]) to paint the pixel located at the coordinates x, y, color clr. If clr is not specified, it will use the current text color;
lcd.readPixel(x, y) - get the pixel color located at x, y coordinates;
lcd.line(x, y, x1, y1 [,clr]) to draw a line from the point with coordinates x,y to coordinates x1, y1. If clr is not specified, it will use the current text color;
lcd.lineByAngle(x, y, start, length, angle [,clr]) to draw a line in the point with coordinates x, y, long length, inclination angle and color clr.
If clr is not specified, it will use the current text color. If fillcolor is not specified, the figure will not be filled. The range of values of the angle specified in degrees from 0 to 359;
lcd.triangle(x, y, x1, y1, x2, y2 [,clr, fillcolor]) draw a triangle outline color clr, color fillcolor with coordinates x,y, x1,y1 and x2, y2.
If clr is not specified, it will use the current text color. If fillcolor is not specified, the figure is shaded;
lcd.circle(x, y, r [,clr, fillcolor]) draw a circle with center in the point with coordinates x, y and radius r;
lcd.ellipse(x, y, rx, ry [opt, clr, fillcolor]) draw oval with centre at the point with coordinates x, y and elongated region rx, ry. opt - argument indicating which edges will be displayed, the default value of 15 - all segments. You can display certain segments simultaneously, it is necessary to use the logical OR operator to the values of opt: 1 - first quarter 2 first quarter 4 - second quarter, 8 in the fourth quarter. If clr is not specified, it will use the current text color. If fillcolor is not specified, the figure is shaded;
lcd.arc(x, y, r, thick, start, end, [clr, fillcolor]) draw an arc with a thickness thick with the center with coordinates x, y, radius, start angle start and end end. If clr is not specified, it will use the current text color. If fillcolor is not specified, the figure is shaded;
lcd.poly(x, y, r, sides, thick, [clr, fillcolor, rotate]) is to draw the polyhedron with the center with coordinates x, y, radius, number of sides sides, outline width thik, color clr, fill color, fillcolor, rotate rotate. If clr is not specified, it will use the current text color. If fillcolor is not specified, the figure will not be filled. The range of values of the angle specified in degrees from 0 to 359;
lcd.rect(x, y, w, h, [clr, fillcolor]) draw a rectangle with coordinates x, y, width w, height h, color clr, fill color fillcolor. If clr is not specified, it will use the current text color. If fillcolor is not specified, the figure is shaded;
lcd.roundrect(x, y, w, h, r [clr, fillcolor]) draw a rectangle with rounded edges with a bend radius r from the point with coordinates x, y, width w, height h, color clr, fill color fillcolor. If clr is not specified, it will use the current text color. If fillcolor is not specified, the figure will not be filled. The range of values of the angle specified in degrees from 0 to 359;
lcd.clear([clr]) to clear the screen. If clr is not specified, it will use the current text color;
lcd.clearWin([clr]) - clear the current window. If clr is not specified, it will use the current background color;
lcd.orient(orient) set the orientation of the display. Can be used the following constants: lcd.PORTRAIT - portrait lcd.LANDSCAPE - landscape, lcd.PORTRAIT_FLIP - portrait is reversed, lcd.LANDSCAPE_FLIP - infinity inverted;
lcd.font(font [,rotate, trsprt, fixedw, dist, w, outline, clr]) to set the font and its parameters. Where font is the name of the constant font or the font file name, rotate (optional) - angle; trsprt transparency; fixedw - to set a fixed character width, dist (only for seven-segment font) is the distance between familiarity, w (only for-segment font) - width familiarity, outline (only for the seven-segment font) - the delineation of the contour, clr - color of the text;
lcd.attrib7seg(dist, w, outline, clr) set parameters seven-segment font. Where dist is the distance between familiarity, w - the width of familiarity,
outline - the outline color, clr - color of the text;
lcd.fontSize () returns the height and width of the current text;
lcd.text(x, y, text [, clr]) to display the text with color clr to the point with coordinates x, y. If clr is not specified, it will use the current text color. You can also use constants: X: CENTER - align text center,
RIGHT - align text on the right side, LASTX - continue from the last values of the X coordinates, you can also use the view offset LASTX + n. For Y: CENTER - align center, BOTTOM - align the bottom of the screen, LASTY - continue from the last values of the Y coordinates, so you can use the view offset LASTY + n.
Characters from a CR (0x0D) - clears to EOL, LF (ox0A) - continues to the new line.
lcd.textW(text) - returns the width of the string with the current installed font;
lcd.textClear(x, y, text [, clr]) - clears the text area of the text located at x, y coordinates, and then fills in with color clr. If clr is not specified, it will use the current background color;
lcd.image(x, y, file [,sc, tp]) - displays an image from a file with coordinates x, y. Supported image types are BMP and JPG.
Use constants lcd.CENTER, lcd.BOTTOM lcd.RIGHT, and Boolean operators such as X&Y. X and Y can be negative numbers. Scaling JPG: value sc may be within the range of integers from 0 to 3; If sc > 0, then the image will be scaled according to the formula 1 / (2 ^ sc), etc. (1/2, 1/4 or 1/8).
Scaling of the BMP: value sc may be within the range of integer number from 0 to 7; If sc > 0, then the image will be scaled according to the formula 1 / (sc + 1).
tp (optional) - specifies the type of image: lcd.JPG or lcd.BMP. If not specified, to determine the type of image will use the file extension and/or contents of the file;
lcd.setwin(x, y, x1, y1) - set the size of the display window as a rectangle (x, y) to (x1, y1);
lcd.resetwin() - set the full screen window size;
lcd.savewin() - save window size;
lcd.restorewin() - restore the window size stored function savewin();
lcd.screensize() - get the size of the display;
lcd.winsize() - get the size of the active window;
lcd.hsb2rgb(hue, saturation, brightness) - convert HSB to RGB. Returns a 24-bit integer color value. Arguments: tint (fractional) - any number, half that number is subtracted from it to create a fraction between 0 and 1. This fractional number is then multiplied by 360 to get the angle of hue in a color model in the HSB system.
Saturation (fractional), takes value in the range from 0 to 1.0.
Brightness (fractional), takes value in the range from 0 to 1.0.
lcd.compileFont(file_name [,debug]) - compile the font from source file (.C) in binary code (.fon). If needs report output for debugging use debug = True. If you want to get the file source code font, then use the app

Step 1. Write the same algorithm that was used in lesson 2.1 to the Arduino IDE (Fig. 1) but now use language of MicroPython for WebIDE. To do this, create a new project in the IDE (Fig. 2) and write the following code (Fig. 3);

alt text
Figure 1. Code for Arduino IDE in C