Emoji Me - Send Emoji to OLED Display

Made this for trying to work with Windows IoT,  OLED and AWS IoT.

Function is simple: click a emoji on web page, display it on OLED.

Part 1 - Display

The major purpose is easily drawing in any font and any shape. Luckily, I found the Win2D.UWP library, with it the only job is putting the pixel to the screen.

Otherwise, I got 3 SSD1306 controlled OLED displays, 2 I2C and 1 SPI. I didn't find a library supports both these 2 interfaces, so I did some research and wrote one.

StartFragment
//initialize either SpiDevice or I2cDeviceI2cDevice device = ....//create display objectSSD1603 display = new SSD1603(Screen.OLED_128_32, device);

//font
CanvasTextFormat txtFmt = new CanvasTextFormat
{
  FontSize = 28,
  FontFamily = "Old English Five",
  LineSpacingMode = CanvasLineSpacingMode.Proportional,
};


//draw something 
if (display.State == SSD1603.States.Ready) {    
    //draw    
    using (CanvasDrawingSession ds = _displaySpi.Render.CreateDrawingSession()){             
        ds.Clear(SSD1603.BackgroundColor);        
        ds.DrawText("Jia", 0, 0, SSD1603.ForeColor,txtFmt);
    }    
    display.Display();
}
EndFragment

More detail information of the SSD1306 library, please see HERE

Part 2 - Connect to AWS IoT

It spent me some time to connect AWS IoT via MQTT, but failed. Because of I have no idea how to do X.509 authentication on Universal Windows Platform. I'll try it again later.

In this project, I just used the Restful API of AWS IoT Shadow. No MQTT no subscribe, instead, I poll the state every 2 seconds.

AWS IoT Setting

The communication process is:

1. while the display program startup, it uses Shadow/UPDATE to set the connected state to true

 "reported": {
    "connected": true
 }

2. the web page uses Shadow/GET to query the state of display every 2 second to see whether the display is ON.

3. while one Emoji is selected, the web page uses Shadow/UPDATE to set desired Emoji

"desired": {
    "code": "😈"
  },

4. display  program uses Shadow/GET to query the state, if there is a delta section then display it and update the state

{
  "desired": {
    "code": "😈"
  },
  "reported": {
    "connected": true,
    "code": "☂"
  },
  "delta": {
    "code": "😈"
  }
}

after updating

{
  "desired": {
    "code": "😈"
  },
  "reported": {
    "connected": true,
    "code": "😈"
  }
}
null

Result