Integrate screen APIs from common packages (#343)

* starting screen api intergration

* Further image integration

* Aligning with new screen apis

* Build fixes

* Adjust to common screen state

* Fix unpackPNG

* Add game library

* Optimize screen rendering

* bumping common packages

* updated shims

* moving images into ev3

* upgrading to common packages

* added try/use

* cap

* fixed tryp age

libs/screen/pxt.json

@@ -0,0 +1,3 @@
+{
+    "additionalFilePath": "../../node_modules/pxt-common-packages/libs/screen"   
+}

libs/screen/shims.d.ts

@@ -0,0 +1,128 @@
+// Auto-generated. Do not edit.
+
+
+declare interface Image {
+    /**
+     * Get the width of the image
+     */
+    //% property shim=ImageMethods::width
+    width: int32;
+
+    /**
+     * Get the height of the image
+     */
+    //% property shim=ImageMethods::height
+    height: int32;
+
+    /**
+     * True iff the image is monochromatic (black and white)
+     */
+    //% property shim=ImageMethods::isMono
+    isMono: boolean;
+
+    /**
+     * Set pixel color
+     */
+    //% shim=ImageMethods::set
+    set(x: int32, y: int32, c: int32): void;
+
+    /**
+     * Get a pixel color
+     */
+    //% shim=ImageMethods::get
+    get(x: int32, y: int32): int32;
+
+    /**
+     * Fill entire image with a given color
+     */
+    //% shim=ImageMethods::fill
+    fill(c: int32): void;
+
+    /**
+     * Return a copy of the current image
+     */
+    //% shim=ImageMethods::clone
+    clone(): Image;
+
+    /**
+     * Flips (mirrors) pixels horizontally in the current image
+     */
+    //% shim=ImageMethods::flipX
+    flipX(): void;
+
+    /**
+     * Flips (mirrors) pixels vertically in the current image
+     */
+    //% shim=ImageMethods::flipY
+    flipY(): void;
+
+    /**
+     * Every pixel in image is moved by (dx,dy)
+     */
+    //% shim=ImageMethods::scroll
+    scroll(dx: int32, dy: int32): void;
+
+    /**
+     * Stretches the image horizontally by 100%
+     */
+    //% shim=ImageMethods::doubledX
+    doubledX(): Image;
+
+    /**
+     * Stretches the image vertically by 100%
+     */
+    //% shim=ImageMethods::doubledY
+    doubledY(): Image;
+
+    /**
+     * Replaces one color in an image with another
+     */
+    //% shim=ImageMethods::replace
+    replace(from: int32, to: int32): void;
+
+    /**
+     * Stretches the image in both directions by 100%
+     */
+    //% shim=ImageMethods::doubled
+    doubled(): Image;
+
+    /**
+     * Draw given image on the current image
+     */
+    //% shim=ImageMethods::drawImage
+    drawImage(from: Image, x: int32, y: int32): void;
+
+    /**
+     * Draw given image with transparent background on the current image
+     */
+    //% shim=ImageMethods::drawTransparentImage
+    drawTransparentImage(from: Image, x: int32, y: int32): void;
+
+    /**
+     * Check if the current image "collides" with another
+     */
+    //% shim=ImageMethods::overlapsWith
+    overlapsWith(other: Image, x: int32, y: int32): boolean;
+}
+declare namespace image {
+
+    /**
+     * Create new empty (transparent) image
+     */
+    //% shim=image::create
+    function create(width: int32, height: int32): Image;
+
+    /**
+     * Create new image with given content
+     */
+    //% shim=image::ofBuffer
+    function ofBuffer(buf: Buffer): Image;
+
+    /**
+     * Double the size of an icon
+     */
+    //% shim=image::doubledIcon
+    function doubledIcon(icon: Buffer): Buffer;
+}
+
+// Auto-generated. Do not edit. Really.

libs/screen/targetoverrides.ts

@@ -0,0 +1,107 @@
+/**
+ * Tagged image literal converter
+ */
+//% shim=@f4 helper=image::ofBuffer
+//% groups=["0.,","1#*"]
+function img(lits: any, ...args: any[]): Image { return null }
+
+
+let screen = image.create(DAL.LCD_WIDTH, DAL.LCD_HEIGHT)
+
+namespace _screen_internal {
+    //% shim=pxt::updateScreen
+    function updateScreen(img: Image): void {}
+
+    control.addFrameHandler(200, () => {
+        updateScreen(screen)
+    })
+
+    updateScreen(screen)
+
+    export function _stats(msg: string) {
+        // show the msg somewhere - it contains frame rate etc
+    }
+}
+
+
+namespace brick {
+    export const LINE_HEIGHT = 12;
+
+    /**
+     * Show text on the screen at a specific line.
+     * @param text the text to print on the screen, eg: "Hello world"
+     * @param line the line number to print the text at, eg: 1
+     */
+    //% blockId=screen_print block="show string %text|at line %line"
+    //% weight=98 group="Screen" inlineInputMode="inline" blockGap=8
+    //% help=brick/show-string
+    //% line.min=1 line.max=10
+    export function showString(text: string, line: number) {
+        const NUM_LINES = 9;
+        const offset = 5;
+        const y = offset + (Math.clamp(0, NUM_LINES, line - 1) / (NUM_LINES + 2)) * DAL.LCD_HEIGHT;
+        screen.print(text, offset, y);
+    }
+
+    /**
+     * Shows a number on the screen
+     * @param value the numeric value
+     * @param line the line number to print the text at, eg: 1
+     */
+    //% blockId=screenShowNumber block="show number %name|at line %line"
+    //% weight=96 group="Screen" inlineInputMode="inline" blockGap=8
+    //% help=brick/show-number
+    //% line.min=1 line.max=10
+    export function showNumber(value: number, line: number) {
+        showString("" + value, line);
+    }
+
+    /**
+     * Shows a name, value pair on the screen
+     * @param value the numeric value
+     * @param line the line number to print the text at, eg: 1
+     */
+    //% blockId=screenShowValue block="show value %name|= %text|at line %line"
+    //% weight=96 group="Screen" inlineInputMode="inline" blockGap=8
+    //% help=brick/show-value
+    //% line.min=1 line.max=10
+    export function showValue(name: string, value: number, line: number) {
+        value = Math.round(value * 1000) / 1000;
+        showString((name ? name + ": " : "") + value, line);        
+    }
+
+    /**
+     * Show an image on the screen
+     * @param image image to draw
+     */
+    //% blockId=screen_show_image block="show image %image=screen_image_picker"
+    //% weight=100 group="Screen" blockGap=8
+    //% help=brick/show-image
+    export function showImage(image: Image) {
+        if (!image) return;
+        screen.drawImage(image, 0, 0)
+    }
+
+    /**
+     * An image
+     * @param image the image
+     */
+    //% blockId=screen_image_picker block="%image" shim=TD_ID
+    //% image.fieldEditor="images"
+    //% image.fieldOptions.columns=6
+    //% image.fieldOptions.width=600
+    //% group="Screen" weight=0 blockHidden=1
+    export function __imagePicker(image: Image): Image {
+        return image;
+    }
+
+    /**
+     * Clear the screen
+     */
+    //% blockId=screen_clear_screen block="clear screen"
+    //% weight=90 group="Screen"
+    //% help=brick/clear-screen
+    export function clearScreen() {
+        screen.fill(0)
+    }
+}