LED display effect

The project address

EZLedView project address

rendering












The principle of

Billboards often see the above display effect, using LED lights to achieve text or even pictures display, so how to achieve this effect in Android?

The usual practice is to get the dot matrix information of the font, and then draw dots in the corresponding position after calculation, but this is too troublesome, so I used a lazy method, the principle is as follows:

1. Firstly, the text is converted to Bitmap to get a picture with the same effect as the text; 2. Obtain whether the corresponding pixels in the picture have colors according to certain interval points. If so, draw LED lights at this point; otherwise, no drawing.

One advantage of using this method is that even images can be easily converted to AN LED display.

Code implementation

Read the fucking source code!

Without further ado, let’s see how to implement the code.

1. First we will convert the text we are going to display into a Bitmap

    private Bitmap renderText(CharSequence text, Paint paint) {
        Bitmap bitmap = Bitmap.createBitmap(mDrawableWidth, mDrawableHeight, Bitmap.Config.ARGB_8888);
        Canvas canvas = new Canvas(bitmap);
        int yPos = (int) ((canvas.getHeight() / 2) - ((paint.descent() + paint.ascent()) / 2));
        canvas.drawText(text.toString(),0,yPos,paint);
        return bitmap;
    }Copy the code

2. Generate a List of locations of all LED lights according to the radius and spacing of LED lights. This List stores the positions of all LED lights calculated by us

   List<Point> circlePoint = new ArrayList<>();
   private void measurePoint(int width.int height) {
        int halfBound = ledRadius + ledSpace / 2;
        int x = halfBound;
        int y = halfBound;
        for(; ;) {for(; ;) { circlePoint.add(new Point(x, y));
                y += halfBound * 2;
                if (y > height) {
                    y = halfBound;
                    break;
                }
            }
            x += halfBound * 2;
            if (x > width) {
                break; }}}Copy the code

3. Generate an LED map according to the generated text Bitmap and LED location

    // Get the color of the Bitmap.
    // This is a long method, so I simplified it a little bit,
    // For details, please go to the project address to view the source code
    private int isInRange(Bitmap bitmap, int x, int y) {
        ...
        int color= bitmap.getPixel(x - ledRadius, y); .return color;
    }

    // Generate a LedBitmap based on the location of Led etc and the original TextBitmap
    private Bitmap generateLedBitmap(Bitmap src) {
        Bitmap bitmap = Bitmap.createBitmap(src.getWidth(), src.getHeight(), Bitmap.Config.ARGB_8888);
        Canvas canvas = new Canvas(bitmap);
        for (Point point : circlePoint) {
            // Detect if the px is in range of our led position
            int color = isInRange(src, point.x, point.y);
            if (color! =0) {
                    canvas.drawCircle(point.x, point.y, ledRadius, paint); }}return bitmap;
    }Copy the code

If the size of the Bitmap is larger than 4 * 1024, the OpenGL Texture can’t be larger than 4096 pixels. Therefore, check whether the size of the Bitmap exceeds when drawing. If so, divide the Bitmap into multiple bitmaps for drawing.

EZLedView project address