Screen Capture as SVG (over serial port)

Intro

I would like to showcase part of an Arduboy paint program I am currently developing. The following is examples and code that I am using to export Arduboy’s screen buffer to a PC using the serial interface and svg image format. Please note that all images were converted from svg to gif on the PC to support the forum.

Examples

  1. Screen Cap From Chicken Cross - (Program Modified from Forum)

  2. Mini Golf Image

  3. Happy Face Image

  4. Arrow Icon

Code

in order to add screen caps to a program Arduboy.cpp needs this additional code.

void Arduboy::svgWrite()
{
  Serial.print(F("<svg width=\"641\" height=\"321\""));
  Serial.print(F(" xmlns=\"http://www.w3.org/2000/svg\" version=\"1.1\">\n"));
  Serial.print(F("  <rect width=\"641\" height=\"321\" fill=\"black\" />"));

  uint8_t i;
  uint8_t j;

  for(j = 0; j < 8; j++)
  {
    for(i = 0; i < 128; i++)
    {   
      svgByte(i, j, sBuffer[(j*WIDTH) + (uint8_t)i]);
    }
  }  

  Serial.print(F("</svg>"));
}

void Arduboy::svgByte(uint8_t x, uint8_t y, uint8_t pixel)
{
  y = y * 8;    // Bytes to bits
  if(pixel & B00000001) { svgPixel(x, y); } 
  if(pixel & B00000010) { svgPixel(x, y + 1); } 
  if(pixel & B00000100) { svgPixel(x, y + 2); }  
  if(pixel & B00001000) { svgPixel(x, y + 3); } 
  if(pixel & B00010000) { svgPixel(x, y + 4); } 
  if(pixel & B00100000) { svgPixel(x, y + 5); } 
  if(pixel & B01000000) { svgPixel(x, y + 6); } 
  if(pixel & B10000000) { svgPixel(x, y + 7); } 
}

void Arduboy::svgPixel(uint8_t x, uint8_t y)
{
  int xval = x * 5 + 1;
  int yval = y * 5 + 1;  

  Serial.print(F("  <rect rx=\"1\" ry=\"1\" width=\"4\" height=\"4\" x=\""));
  Serial.print(xval, DEC);
  Serial.print(F("\" y=\""));
  Serial.print(yval, DEC);
      Serial.print(F("\" fill=\"white\" />\n"));
}

Arduboy.h requires the addition of these lines in the public section.

  void svgWrite();
  void svgByte(uint8_t width, uint8_t height, uint8_t pixel);
  void svgPixel(uint8_t width, uint8_t height);

Screen captures can be generated by adding display.svgWrite() to the main code.

4 Likes

Usage

Once the svgWrite() method is called it will be sent out the serial interface. Then you need to copy the output to notepad and save it to a .svg file.

Possible Uses

There are many ways that this code could be possibly used.

  1. Hard code the screen cap to a section of the code. Inorder to get a specific screen.
  2. Time based - Produce an image every 50 frames or so it may take a while to get a decent screen cap but is relatively easy to implement.
  3. Serial Interface - Add a serial command that generates screen cap. This method would typically work however it may be difficult to get a screen cap if timing is important.
  4. Adding a button - Soldering an extra button to the Arduboy to preform screen caps may be over kill unless you have multiple Arduboys one specifically for development. However this is probably the best method to get a timed screencap.

Note

This code adds approximately 700 bytes to the program code.

1 Like

How can I see the serial interfase on Mac OS?
@MLXXXp @kernel