Graphic Monochrome Display Simulator at Graphviz

In electronics development, debugging is often done with graphical monochrome displays such as the SSD1306.

There are completely finished devices with graphic screens: scientific calculators, voice recorders, walkie-talkies, car dashboards, photo flashes, uninterruptible power supplies and maybe something else.

Here is an example LoRa transceiver TTGO T-Beam with a graphic display.

What are the difficulties when working with graphic screens?

1. The problem is that if we want to debug the code for complex graphics on a large computer, we will be surprised to find that the C language for PC does not have a built-in library for drawing bitmaps in a separate window on the canvas, like it is in python or C# . At the same time, the firmware is written in C, and not in Python and C #.

2. To write support for complex graphics (dashboard, on-screen menu, on-screen keyboard, QR code) on graphic screens, many iterations of flashing microcontrollers are needed. This is a long time, you have to wait for the end of the compilation process, then the end of the flashing process, in order to finally see the result.

3. Debugging graphics on the device also requires the Target device itself and additional equipment: programmer, power supply, USB-UART cables. This is especially difficult in R&D conditions, when boards are developed in parallel with writing firmware, and programmers simply do not have an electronic board for debugging code for half a year.

Is there a way to debug GUI graphics code directly on LapTop(e) without changing the C programming language? Answer: yes.

What do you need from the software?

How to debug graphics in C while working on LapTop(e)?

The point is simple. Consists of three steps.

Phase 1

In C(s), generate Graphviz code as a separate Display.gv file to lay out the position of 1024 pixels and their colors.

static bool display_render_segment(uint16_t x, int16_t p, uint8_t segment, DisplayHandle_t* Node){
    bool res = false;
    if (segment) {
        LOG_DEBUG(DISPLAY, "(%d,%d):RenderSegment 0x%x=%s",x,p*8,segment, utoa_bin8(segment));
    }
    int8_t sy = 0;
    for(sy=0; sy<=7; sy++) {
        int16_t y = - sy - p*8;
        char CommonAttributes[200] = "";
        sprintf(CommonAttributes,"[height=%f][width=%f][shape=square][label=\"\"][style=filled]",Node->pixel_size,Node->pixel_size);
        if(    segment&(1<<sy)    ) {
            /*Pix On*/
            fprintf(Node->file_ptr, "node_%u %s[color=%s][pos =\"%f,%f!\"];\n",Node->pix_cnt,CommonAttributes,DataMatrixVal2Color(0),((double)x)*Node->pixel_size,((double)y)*Node->pixel_size);
        } else {
            /*Pix Off*/
            fprintf(Node->file_ptr, "node_%u %s[color=%s][pos =\"%f,%f!\"];\n",Node->pix_cnt,CommonAttributes,DataMatrixVal2Color(1),((double)x)*Node->pixel_size,((double)y)*Node->pixel_size);
        }
        Node->pix_cnt++;
    }
    return res;
}

Phase 2

Convert *.gv file to *.svg or *.gv to *.png using the dot.exe utility. For rendering, you need to use the engine neato. This engine respects the desired coordinates of the Graphviz shapes.

        char CmdCommand[200] = "";
        sprintf(CmdCommand, "start /B dot.exe -Kneato -Tpng  %s -o %s", FileNameGv,FileNamePng);
        res = win_cmd_run(CmdCommand);

Phase 3

Display picture *.svg or *.png browser(s). For example chrome.exe.

Phase 4

Make auto-refresh of the browser tab with the Easy Auto Refresh plugin.

After that, the display will be rendered in real time. As if in front of you is a real electronic board with an SSD1306 display

At the same time, you can change the color of the pixels, change the stroke of the pixels, insert inscriptions inside the pixels, and so on. All this can be done using the syntax of the Graphviz markup language.

Usually FPS is about 0.33 Hz.

That’s the gist of this whole method.

Your firmware simulator can work with Win console, simulating UART-CLI. You can directly at run-time through the console order to display text or a figure on the display simulator.

By the way, I am very surprised that in Russia (MSK and SPB) among microcontroller programmers, almost no one knows about the existence of the Graphviz / Dot language. But Dot is also very useful for drawing up finite state machine diagrams, describing Toolchain(s), auto generating documentation, and so on and so forth.

Conclusion

Graphic monochrome displays can be easily modeled on a large computer. This allows you to debug complex graphics and save time on flashing the microcontroller.

Links

https://habr.com/en/articles/337078/
https://habr.com/ru/articles/499170/
https://habr.com/en/articles/688542/
https://habr.com/ru/articles/662561/