atom.xml

<?xml version="1.0" encoding="utf-8"?>
<feed xmlns="http://www.w3.org/2005/Atom">
 
 <title>Learn MicroView</title>
 <link href="http://learn.microview.io/" rel="self"/>
 <link href="http://learn.microview.io"/>
 <updated>2014-06-14T08:41:37+10:00</updated>
 <id>http://learn.microview.io</id>
 <author>
   <name>Geek Ammo</name>
   <email></email>
 </author>

 
 <entry>
   <title>Creating Fonts for MicroView</title>
   <link href="http://learn.microview.io/font/creating-fonts-for-microview.html"/>
   <updated>2014-06-11T00:00:00+10:00</updated>
   <id>http://learn.microview.io/font/creating-fonts-for-microview</id>
   <content type="html">&lt;p&gt;From the previous article &lt;a href=&quot;/intro/general-overview-of-microview.html&quot;&gt;General Overview of MicroView&lt;/a&gt;, we have covered how the &lt;a href=&quot;https://github.com/geekammo/MicroView-Arduino-Library&quot;&gt;MicroView library&lt;/a&gt; allocated 384 bytes of RAM as screen buffer from ATmega328P to perform graphic operations before transferring this block of memory to the SSD1306 OLED controller’s memory.
The following diagram shows how two 5x8 pixel characters are drawn on the screen buffer.&lt;/p&gt;

&lt;p&gt;&lt;img src=&quot;/images/MicroView_5x8_FontMapping.png&quot; alt=&quot;MicroView 5x8 Font Mapping&quot; /&gt;&lt;/p&gt;

&lt;p&gt;From the diagram, “O” character appeared on ROW0 took up 5 bytes of RAM from the screen buffer in the following order:&lt;/p&gt;

&lt;pre&gt;&lt;code&gt;BYTE0 = 0x7e
BYTE1 = 0x81
BYTE2 = 0x81
BYTE3 = 0x81
BYTE4 = 0x7e
&lt;/code&gt;&lt;/pre&gt;

&lt;p&gt;Character “A” that was shown on ROW1 took up 5 bytes of RAM from the screen buffer in the following order:&lt;/p&gt;

&lt;pre&gt;&lt;code&gt;BYTE64 = 0xfc
BYTE65 = 0x22
BYTE66 = 0x21
BYTE67 = 0x22
BYTE68 = 0xfc
&lt;/code&gt;&lt;/pre&gt;

&lt;p&gt;A 8x16 font will take up 16 bytes of RAM from the screen buffer as shown in the next diagram:&lt;/p&gt;

&lt;p&gt;&lt;img src=&quot;/images/MicroView_8x16_FontMapping.png&quot; alt=&quot;MicroView 8x16 Font Mapping&quot; /&gt;&lt;/p&gt;

&lt;p&gt;With 8x16 font taking up RAM from screen buffer’s ROW0 and ROW1, the data of the above diagram will occupy the screen buffer’s BYTE0 – BYTE7 and BYTE64 – BYTE71.&lt;/p&gt;

&lt;pre&gt;&lt;code&gt;BYTE0 = 0xf8
BYTE1 = 0xfc
BYTE2 = 0x06
BYTE3 = 0x03
BYTE4 = 0x03
BYTE5 = 0x06
BYTE6 = 0xfc
BYTE7 = 0xf8
BYTE64 = 0xff
BYTE65 = 0xff
BYTE66 = 0x06
BYTE67 = 0x06
BYTE68 = 0x06
BYTE69 = 0x06
BYTE70 = 0xff
BYTE71 = 0xff
&lt;/code&gt;&lt;/pre&gt;

&lt;p class=&quot;info&quot;&gt;Manually plotting fonts and text is very tedious! It&#39;s much easier to use the font printing functions within the MicroView library. Displaying text in MicroView is as simple as:&lt;/p&gt;

&lt;pre&gt;&lt;code&gt;uView.print(&quot;Hello&quot;);
&lt;/code&gt;&lt;/pre&gt;

&lt;p&gt;Although MicroView’s library includes 4 different types of font, these fonts might not suit every user’s need.  By following these steps you can make your own fonts and include them within the MicroView library:&lt;/p&gt;

&lt;ol&gt;
  &lt;li&gt;Convert fonts to bitmap.&lt;/li&gt;
  &lt;li&gt;Generate font source file from bitmap.&lt;/li&gt;
  &lt;li&gt;Add font source file to MicroView library.&lt;/li&gt;
&lt;/ol&gt;

&lt;h1 id=&quot;converting-fonts-to-bitmap&quot;&gt;Converting Fonts to Bitmap&lt;/h1&gt;
&lt;p&gt;Once we understand how a character is being mapped to the MicroView’s screen buffer, we can choose to manually draw the font we like to the screen buffer or we can use a converter to convert computer’s font to bitmap and then convert the bitmap into &lt;code&gt;C char&lt;/code&gt; definition used by the MicroView library.&lt;/p&gt;

&lt;p&gt;We have had good results using &lt;a href=&quot;http://www.codehead.co.uk/cbfg&quot;&gt;Codehead’s Bitmap Font Generator&lt;/a&gt; to convert a font into a bitmap. If you have had success in using other tools, please let us know and we’ll update this article.&lt;/p&gt;

&lt;p&gt;&lt;img src=&quot;/images/Codehead_Bitmap_Font_Generator.png&quot; alt=&quot;MicroView Custom Font - Codehead Bitmap Font Generator&quot; /&gt;&lt;/p&gt;

&lt;p&gt;Let’s quickly run through a few simple steps to convert a Computer’s font into a bitmap. Assuming we need the numbers 0 to 9 of the Courier font in 12x24 pixels, the following steps will generate the required bitmap:&lt;/p&gt;

&lt;ol&gt;
  &lt;li&gt;Select “Courier” from the Font Details drop down combo box.&lt;/li&gt;
  &lt;li&gt;Enter 48 as the Cell Height&lt;/li&gt;
  &lt;li&gt;Enter 12 as the Cell Width&lt;/li&gt;
  &lt;li&gt;Enter 128 x 32 as the Image Size (this Image Size need to be larger than 12x24x10(number of characters))&lt;/li&gt;
  &lt;li&gt;Enter 48 as the Start Character ( 48 ASCII code is the number 0)&lt;/li&gt;
  &lt;li&gt;Enter 200% as the Zoom&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;&lt;img src=&quot;/images/Codehead_To_Much_Space.png&quot; alt=&quot;MicroView Custom Font - Codehead To Much Space&quot; /&gt;&lt;/p&gt;

&lt;p&gt;From the generated result, it is clear that there is too much space on the left of the numbers and the glyphs are not taking full advantage of the 12x48 cells.&lt;/p&gt;

&lt;p&gt;Let’s further enhance the effect of the font:&lt;/p&gt;

&lt;ul&gt;
  &lt;li&gt;Enter or slowly increase Font Height to a suitable value, in this case, 26&lt;/li&gt;
  &lt;li&gt;Adjust the Position (X,Y) using the arrow button with option “Adjust All” selected (in this case, X=-4, Y=-1)&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;After the adjustment, we should see the following result:&lt;/p&gt;

&lt;p&gt;&lt;img src=&quot;/images/Codehead_Center_Cell.png&quot; alt=&quot;MicroView Font Hack - Codehead Center Cell&quot; /&gt;&lt;/p&gt;

&lt;p&gt;This result is almost perfect except there is still empty space on the right of the 9 glyph, and at the bottom of all the numbers. We can’t correct this space further because Codehead Font Generator does not allow for a custom image size, so we will correct this with an image editor later.&lt;/p&gt;

&lt;p&gt;Click File, then Export Bitmap (BMP), save the file as &lt;code&gt;12x24Font.bmp&lt;/code&gt;&lt;/p&gt;

&lt;p&gt;Using an image editor like Photoshop or GIMP, open the &lt;code&gt;12x24Font.bmp&lt;/code&gt; file, then make a selection to crop a 120 x 24 frame from the image.&lt;/p&gt;

&lt;p&gt;&lt;img src=&quot;/images/Codehead_Crop.png&quot; alt=&quot;MicroView Custom Font - Codehead Crop&quot; /&gt;&lt;/p&gt;

&lt;p&gt;If you want a &lt;code&gt;WHITE&lt;/code&gt; text on &lt;code&gt;BLACK&lt;/code&gt; background, you will need to &lt;code&gt;INVERT&lt;/code&gt; the color now. &lt;/p&gt;

&lt;p&gt;Save the image and then proceed to next step. You can also save the hassle by downloading the &lt;a href=&quot;/images/12x24Font.bmp&quot;&gt;12x24Font.bmp&lt;/a&gt; already prepared by us.&lt;/p&gt;

&lt;p class=&quot;success&quot;&gt;You have now successfully created a customised bitmap font.&lt;/p&gt;

&lt;h1 id=&quot;generating-font-source-file-from-bitmap&quot;&gt;Generating Font Source File from Bitmap&lt;/h1&gt;

&lt;p&gt;In order to convert the font from bitmap to &lt;code&gt;C char&lt;/code&gt; definition, we will be using &lt;a href=&quot;http://en.radzio.dxp.pl/bitmap_converter&quot;&gt;LCD Assistant&lt;/a&gt; for this job. Run LCD Assistant and load the &lt;code&gt;12x24Font.bmp&lt;/code&gt; file previously saved.&lt;/p&gt;

&lt;p&gt;&lt;img src=&quot;/images/LCD_Assistant.png&quot; alt=&quot;Using LCD Assistant to convert font for MicroView&quot; /&gt;&lt;/p&gt;

&lt;p&gt;Make sure that following options are correct:&lt;/p&gt;

&lt;ul&gt;
  &lt;li&gt;Picture preview is the right bitmap&lt;/li&gt;
  &lt;li&gt;Byte orientation has Vertical selected&lt;/li&gt;
  &lt;li&gt;Width is 120 and Height is 24&lt;/li&gt;
  &lt;li&gt;Include size not selected&lt;/li&gt;
  &lt;li&gt;Size endianness has Little selected&lt;/li&gt;
  &lt;li&gt;Pixels/byte is 8&lt;/li&gt;
  &lt;li&gt;Table name is 12x14Font (can be any name)&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Once all the options are correctly selected, click File, then save the output and type in the filename as &lt;code&gt;12x24Font.h&lt;/code&gt;&lt;/p&gt;

&lt;p&gt;Using a text file editor, open &lt;code&gt;12x24Font.h&lt;/code&gt;&lt;/p&gt;

&lt;p&gt;Locate&lt;/p&gt;

&lt;pre&gt;&lt;code&gt;const unsigned char 12x24Font [] = {
&lt;/code&gt;&lt;/pre&gt;

&lt;p&gt;and replace with&lt;/p&gt;

&lt;pre&gt;&lt;code&gt;#ifndef FONT12X24_H
#define FONT12X24_H
#include &amp;lt;avr/pgmspace.h&amp;gt;
static const unsigned char font12x24 [] PROGMEM = {
// first row defines - FONTWIDTH, FONTHEIGHT, ASCII START CHAR, TOTAL CHARACTERS, FONT MAP WIDTH HIGH, FONT MAP WIDTH LOW (2,56 meaning 256)
    12,24,48,10,1,20,
&lt;/code&gt;&lt;/pre&gt;

&lt;p&gt;Then replace&lt;/p&gt;

&lt;pre&gt;&lt;code&gt;};
&lt;/code&gt;&lt;/pre&gt;

&lt;p&gt;with&lt;/p&gt;

&lt;pre&gt;&lt;code&gt;};
#endif
&lt;/code&gt;&lt;/pre&gt;

&lt;p&gt;You should get the following result:&lt;/p&gt;

&lt;pre&gt;&lt;code&gt;//------------------------------------------------------------------------------
// File generated by LCD Assistant
// http://en.radzio.dxp.pl/bitmap_converter/
//------------------------------------------------------------------------------

#ifndef FONT12X24_H
#define FONT12X24_H
#include &amp;lt;avr/pgmspace.h&amp;gt;
static const unsigned char font12x24 [] PROGMEM = {
    // first row defines - FONTWIDTH, FONTHEIGHT, ASCII START CHAR, TOTAL CHARACTERS, FONT MAP WIDTH HIGH, FONT MAP WIDTH LOW (2,56 meaning 256)
    12,24,48,10,1,20,   
    0x1F, 0x1F, 0xE7, 0xE7, 0xE7, 0xE7, 0xE7, 0xE7, 0x1F, 0x1F, 0xFF, 0xFF, 0x9F, 0x9F, 0x9F, 0x9F,
    0x07, 0x07, 0xFF, 0xFF, 0xFF, 0xFF, 0xFF, 0xFF, 0x9F, 0x9F, 0xE7, 0xE7, 0xE7, 0xE7, 0xE7, 0xE7,
    0x1F, 0x1F, 0xFF, 0xFF, 0x9F, 0x9F, 0xE7, 0xE7, 0xE7, 0xE7, 0xE7, 0xE7, 0x1F, 0x1F, 0xFF, 0xFF,
    0xFF, 0xFF, 0xFF, 0xFF, 0x1F, 0x1F, 0x07, 0x07, 0xFF, 0xFF, 0xFF, 0xFF, 0x07, 0x07, 0xE7, 0xE7,
    0xE7, 0xE7, 0xE7, 0xE7, 0xE7, 0xE7, 0xFF, 0xFF, 0x7F, 0x7F, 0x9F, 0x9F, 0xE7, 0xE7, 0xE7, 0xE7,
    0xFF, 0xFF, 0xFF, 0xFF, 0x87, 0x87, 0xE7, 0xE7, 0xE7, 0xE7, 0xE7, 0xE7, 0x07, 0x07, 0xFF, 0xFF,
    0x1F, 0x1F, 0xE7, 0xE7, 0xE7, 0xE7, 0xE7, 0xE7, 0x1F, 0x1F, 0xFF, 0xFF, 0x1F, 0x1F, 0xE7, 0xE7,
    0xE7, 0xE7, 0xE7, 0xE7, 0x1F, 0x1F, 0xFF, 0xFF, 0x00, 0x00, 0xFF, 0xFF, 0xFF, 0xFF, 0xFF, 0xFF,
    0x00, 0x00, 0xFF, 0xFF, 0xFF, 0xFF, 0xFF, 0xFF, 0x00, 0x00, 0xFF, 0xFF, 0xFF, 0xFF, 0xFF, 0xFF,
    0xFF, 0xFF, 0x7F, 0x7F, 0x9F, 0x9F, 0xE7, 0xE7, 0xF8, 0xF8, 0xFF, 0xFF, 0xFF, 0xFF, 0xFF, 0xFF,
    0xE7, 0xE7, 0xE7, 0xE7, 0x18, 0x18, 0xFF, 0xFF, 0x1F, 0x1F, 0x61, 0x61, 0x7E, 0x7E, 0x00, 0x00,
    0x7F, 0x7F, 0xFF, 0xFF, 0xE0, 0xE0, 0xE7, 0xE7, 0xE7, 0xE7, 0xE7, 0xE7, 0x1F, 0x1F, 0xFF, 0xFF,
    0x00, 0x00, 0xE7, 0xE7, 0xE7, 0xE7, 0xE7, 0xE7, 0x1F, 0x1F, 0xFF, 0xFF, 0xFF, 0xFF, 0xFF, 0xFF,
    0x1F, 0x1F, 0xE1, 0xE1, 0xFE, 0xFE, 0xFF, 0xFF, 0x18, 0x18, 0xE7, 0xE7, 0xE7, 0xE7, 0xE7, 0xE7,
    0x18, 0x18, 0xFF, 0xFF, 0xF8, 0xF8, 0xE7, 0xE7, 0xE7, 0xE7, 0xE7, 0xE7, 0x00, 0x00, 0xFF, 0xFF,
    0xF8, 0xF8, 0xE7, 0xE7, 0xE7, 0xE7, 0xE7, 0xE7, 0xF8, 0xF8, 0xFF, 0xFF, 0xE7, 0xE7, 0xE7, 0xE7,
    0xE0, 0xE0, 0xE7, 0xE7, 0xE7, 0xE7, 0xFF, 0xFF, 0xE1, 0xE1, 0xE6, 0xE6, 0xE7, 0xE7, 0xE7, 0xE7,
    0xE7, 0xE7, 0xFF, 0xFF, 0xF9, 0xF9, 0xE7, 0xE7, 0xE7, 0xE7, 0xE7, 0xE7, 0xF8, 0xF8, 0xFF, 0xFF,
    0xFE, 0xFE, 0xFE, 0xFE, 0xE6, 0xE6, 0xE0, 0xE0, 0xE6, 0xE6, 0xFF, 0xFF, 0xF9, 0xF9, 0xE7, 0xE7,
    0xE7, 0xE7, 0xE7, 0xE7, 0xF8, 0xF8, 0xFF, 0xFF, 0xF8, 0xF8, 0xE7, 0xE7, 0xE7, 0xE7, 0xE7, 0xE7,
    0xF8, 0xF8, 0xFF, 0xFF, 0xFF, 0xFF, 0xE1, 0xE1, 0xFE, 0xFE, 0xFF, 0xFF, 0xFF, 0xFF, 0xFF, 0xFF,
    0xF8, 0xF8, 0xE7, 0xE7, 0xE7, 0xE7, 0xE7, 0xE7, 0xF8, 0xF8, 0xFF, 0xFF, 0xFF, 0xFF, 0xE7, 0xE7,
    0xE7, 0xE7, 0xF9, 0xF9, 0xFE, 0xFE, 0xFF, 0xFF, 
};
#endif
&lt;/code&gt;&lt;/pre&gt;

&lt;p class=&quot;success&quot;&gt;You have now successfully converted the bitmap font to a C header file.&lt;/p&gt;

&lt;h1 id=&quot;adding-font-source-file-to-microview-library&quot;&gt;Adding Font Source File to MicroView Library&lt;/h1&gt;

&lt;p&gt;Move the edited &lt;code&gt;12x24Font.h&lt;/code&gt; file to MicroView’s library folder. You should be able to see the &lt;code&gt;12x24Font.h&lt;/code&gt; in the same folder as the rest of the MicroView’s files.&lt;/p&gt;

&lt;p&gt;&lt;img src=&quot;/images/Move_Font_To_Library.png&quot; alt=&quot;MicroView Save Custom Font To Library&quot; /&gt;&lt;/p&gt;

&lt;p&gt;Using a text file editor, open &lt;code&gt;MicroView.cpp&lt;/code&gt; and perform the following steps:&lt;/p&gt;

&lt;p&gt;Locate&lt;/p&gt;

&lt;pre&gt;&lt;code&gt;// Add header of the fonts here.  Remove as many as possible to conserve FLASH memory.
&lt;/code&gt;&lt;/pre&gt;

&lt;p&gt;Add after this line&lt;/p&gt;

&lt;pre&gt;&lt;code&gt;#include &amp;lt;12x24Font.h&amp;gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;p&gt;Locate&lt;/p&gt;

&lt;pre&gt;&lt;code&gt;// Change the total fonts included
#define TOTALFONTS      7
&lt;/code&gt;&lt;/pre&gt;

&lt;p&gt;Change to &lt;/p&gt;

&lt;pre&gt;&lt;code&gt;// Change the total fonts included
#define TOTALFONTS      8
&lt;/code&gt;&lt;/pre&gt;

&lt;p&gt;Locate&lt;/p&gt;

&lt;pre&gt;&lt;code&gt;const unsigned char *MicroView::fontsPointer[]={
    font5x7
    ,font8x16
    ,sevensegment
    ,fontlargenumber
    ,space01
    ,space02
    ,space03
};
&lt;/code&gt;&lt;/pre&gt;

&lt;p&gt;Change to&lt;/p&gt;

&lt;pre&gt;&lt;code&gt;const unsigned char *MicroView::fontsPointer[]={
    font5x7
    ,font8x16
    ,sevensegment
    ,fontlargenumber
    ,space01
    ,space02
    ,space03
    ,font12x24
};
&lt;/code&gt;&lt;/pre&gt;

&lt;p&gt;The font that we have just added is at the 7th position starting from position 0 (font5x7) in the &lt;code&gt;MicroView::fontsPointer&lt;/code&gt; array, therefore the new font is now fontType 7. Save &lt;code&gt;MicroView.cpp&lt;/code&gt; once you have made your changes.&lt;/p&gt;

&lt;p&gt;Run the following sketch to test your new font:&lt;/p&gt;

&lt;pre&gt;&lt;code&gt;#include &amp;lt;MicroView.h&amp;gt;

void setup() {
  uView.begin();
  uView.clear(PAGE);
  uView.setFontType(7);
  uView.print(&quot;1234&quot;);
  uView.display();
}

void loop () {
}
&lt;/code&gt;&lt;/pre&gt;

&lt;p class=&quot;success&quot;&gt;You have now successfully hacked MicroView&#39;s library to add your own custom font.&lt;/p&gt;
</content>
 </entry>
 
 <entry>
   <title>General Overview of MicroView</title>
   <link href="http://learn.microview.io/intro/general-overview-of-microview.html"/>
   <updated>2014-06-04T00:00:00+10:00</updated>
   <id>http://learn.microview.io/intro/general-overview-of-microview</id>
   <content type="html">&lt;p&gt;&lt;img src=&quot;/images/MicroView_Hero.jpg&quot; alt=&quot;MicroView Image&quot; /&gt;&lt;/p&gt;

&lt;p&gt;The MicroView is the first chip-sized Arduino compatible that lets you see what your Arduino is thinking by using a built-in OLED display. In the heart of MicroView there is an ATMEL’s ATmega328P, 5V &amp;amp; 3.3V LDO and a 64x48 pixel OLED display, together with other passive components that allow the MicroView to operate without any external components other than a power supply.&lt;/p&gt;

&lt;p class=&quot;info&quot;&gt;MicroView is 100% code compatible with Arduino Uno (ATmega328P version), meaning the code that runs on an Arduino Uno will also be able to run on the MicroView if the IO pins used in the code are externally exposed on the MicroView.&lt;/p&gt;

&lt;h1 id=&quot;hardware-specifications&quot;&gt;Hardware Specifications&lt;/h1&gt;
&lt;ul&gt;
  &lt;li&gt;Display : 64x48 OLED Display&lt;/li&gt;
  &lt;li&gt;Microcontroller : ATmega328P &lt;/li&gt;
  &lt;li&gt;Operating Voltage : 5V&lt;/li&gt;
  &lt;li&gt;Input Voltage : 3.3VDC - 16VDC&lt;/li&gt;
  &lt;li&gt;Digital I/O Pins : 12 (of which 3 provide PWM output)&lt;/li&gt;
  &lt;li&gt;Analog Input Pins : 6&lt;/li&gt;
  &lt;li&gt;Flash Memory : 32 KB&lt;/li&gt;
  &lt;li&gt;SRAM : 2 KB&lt;/li&gt;
  &lt;li&gt;EEPROM : 1 Kilobyte&lt;/li&gt;
  &lt;li&gt;Clock Speed : 16 Mhz&lt;/li&gt;
  &lt;li&gt;No other components required&lt;/li&gt;
&lt;/ul&gt;

&lt;h1 id=&quot;pin-configuration&quot;&gt;Pin Configuration&lt;/h1&gt;
&lt;p&gt;&lt;img src=&quot;/images/MicroView_pinout.png&quot; alt=&quot;MicroView pinout&quot; /&gt;&lt;/p&gt;

&lt;h1 id=&quot;oled-memory-map&quot;&gt;OLED Memory Map&lt;/h1&gt;
&lt;p&gt;The &lt;a href=&quot;http://www.solomon-systech.com/en/product/display-ic/oled-driver-controller/ssd1306/&quot;&gt;SSD1306&lt;/a&gt; is the controller built into the MicroView’s OLED display. It has flexible yet complex segment and common drivers. One requires vast knowledge on memory addressing in order to use the SSD1306 controller.&lt;/p&gt;

&lt;p&gt;MicroView’s library was written to hide away the complexities of the SSD1306 controller, so that users can issue simple commands to control the display. Although the SSD1306 has a built-in RAM (memory) for the screen, when connected using the SPI method, the ATmega328P is not able to read the RAM (memory) of the SSD1306. Therefore the software will not be able to manipulate the screen buffer to perform mathematical operations.&lt;/p&gt;

&lt;p&gt;MicroView’s library overcomes this by allocating 384 bytes ( (64 x 48)/8 bits) of memory from ATmega328P as buffer. The library can now manipulate the screen buffer and then perform a bulk transfer from the ATmega328P’s memory to the internal memory of the SSD1306 controller.&lt;/p&gt;

&lt;p&gt;The 384 bytes of screen buffer are declared in MicroView’s library as&lt;/p&gt;

&lt;pre&gt;&lt;code&gt;static uint8_t screenmemory [] = {.total 384 bytes of data..};
&lt;/code&gt;&lt;/pre&gt;

&lt;p&gt;and are arranged in a linear form representing the following 64 x 48 pixels coordinate system.&lt;/p&gt;

&lt;p&gt;&lt;img src=&quot;/images/MicroView_Coordinates.png&quot; alt=&quot;MicroView Screen Coordinate System&quot; /&gt;&lt;/p&gt;

&lt;p&gt;Based on the above illustration, for example, if a user wish to plot a pixel at the position of the black dot, where X=10 and Y=2, the would user issue the following command:&lt;/p&gt;

&lt;pre&gt;&lt;code&gt;uView.pixel(10,2);
&lt;/code&gt;&lt;/pre&gt;

&lt;p&gt;This command will then calculate the exact location of the screen buffer and set a BIT in the corresponding BYTE to the X,Y position.&lt;/p&gt;

&lt;p&gt;&lt;img src=&quot;/images/MicroView_MemoryMap.png&quot; alt=&quot;MicroView Screen Memory Map&quot; /&gt;
&lt;em&gt;Diagram showing how a linear screen buffer in the ATmega328P aligns with the OLED pixels.&lt;/em&gt;&lt;/p&gt;

&lt;p&gt;&lt;img src=&quot;/images/MicroView_DataBits.png&quot; alt=&quot;MicroView Screen Data Bits&quot; /&gt;
&lt;em&gt;Diagram showing the BITs in a BYTE of the screen buffer corresponding to the OLED’s X,Y position.&lt;/em&gt;&lt;/p&gt;

&lt;p&gt;Based on the above illustration, a pixel turned on at X=2 and Y=3 means BYTE 2 of the screen buffer has data of 0x08 (hex). &lt;/p&gt;

&lt;p&gt;Two pixels at X=2,Y=3 and X=2,Y=2 turned on means BYTE 2 of the screen buffer has data of 0x0c (hex).&lt;/p&gt;

&lt;p&gt;To draw a straight line of 5 pixels starting from 10,2 to 10,6 , the following C code show a pixel by pixel way on how to accomplish this:&lt;/p&gt;

&lt;pre&gt;&lt;code&gt;uView.pixel(10,2);
uView.pixel(10,3);
uView.pixel(10,4);
uView.pixel(10,5);
uView.pixel(10,6);
&lt;/code&gt;&lt;/pre&gt;

&lt;p&gt;the MicroView library allows you to draw lines by specifying the the start and end coordinates. The above line could be drawn with this simple one line command:&lt;/p&gt;

&lt;pre&gt;&lt;code&gt;uView.line(10,2,10,6);
&lt;/code&gt;&lt;/pre&gt;

&lt;p&gt;In order for the library to perform extremely fast mathematical operations on the screen buffer (more than 100 frames per second), calls to the drawing functions within the MicroView library does not immediately transfer the contents of screen buffer to the SSD1306 controller. A &lt;code&gt;display()&lt;/code&gt; command is required to instruct the library to perform the bulk transfer from the screen buffer to the SSD1306 controller:&lt;/p&gt;

&lt;pre&gt;&lt;code&gt;uView.display();
&lt;/code&gt;&lt;/pre&gt;

&lt;p&gt;This function takes the whole screen buffer in the ATmega328P and transfers it (via SPI bus, programmed at 8Mhz) to the internal memory of the SSD1306. As soon as the memory is being transferred, the pixels corresponding to the screen buffer will show up on the OLED display.&lt;/p&gt;
</content>
 </entry>
 
 <entry>
   <title>Getting Started with MicroView</title>
   <link href="http://learn.microview.io/intro/getting-started.html"/>
   <updated>2014-05-04T00:00:00+10:00</updated>
   <id>http://learn.microview.io/intro/getting-started</id>
   <content type="html">&lt;p&gt;In order to get your MicroView up and running, there are four easy steps to follow: &lt;/p&gt;

&lt;ol&gt;
  &lt;li&gt;Install drivers.&lt;/li&gt;
  &lt;li&gt;Prepare MicroView for programming&lt;/li&gt;
  &lt;li&gt;Choose Arduino software&lt;/li&gt;
  &lt;li&gt;Write your first sketch&lt;/li&gt;
&lt;/ol&gt;

&lt;h1 id=&quot;step-1---install-drivers&quot;&gt;STEP 1 - Install Drivers&lt;/h1&gt;
&lt;p&gt;MicroView, like the Arduino, relies on a programmer to upload sketches (Arduino code) and also communicate with the computer. This programmer often has a USB to TTL converter chip that creates a Virtual Serial Port on the computer when properly installed.  MicroView’s &lt;a href=&quot;https://www.sparkfun.com/products/12924&quot;&gt;factory USB Programmer&lt;/a&gt; uses the &lt;a href=&quot;http://www.ftdichip.com/Products/ICs/FT231X.html&quot;&gt;FTDI’s FT231X&lt;/a&gt; to send the sketches to MicroView and also act as a communication medium between MicroView and computer.&lt;/p&gt;

&lt;p&gt;Depending on the OS (Operating System) of your computer, the drivers are installed using different methods.  Below are the installation instructions prepared by SparkFun Electronics:&lt;/p&gt;

&lt;ul&gt;
  &lt;li&gt;&lt;a href=&quot;https://learn.sparkfun.com/tutorials/how-to-install-ftdi-drivers/windows---quick-and-easy&quot;&gt;How to Install FTDI Drivers for Windows&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href=&quot;https://learn.sparkfun.com/tutorials/how-to-install-ftdi-drivers/linux&quot;&gt;How to Install FTDI Drivers for Linux&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href=&quot;https://learn.sparkfun.com/tutorials/how-to-install-ftdi-drivers/mac&quot;&gt;How to Intall FTDI Drivers for Mac&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;h1 id=&quot;step-2---prepare-microview-for-programming&quot;&gt;STEP 2 - Prepare MicroView for Programming&lt;/h1&gt;

&lt;p&gt;Once you have finished the FTDI Drivers installation, you will need to prepare the MicroView to be inserted into the computer’s USB port.&lt;/p&gt;

&lt;p&gt;If you have purchased the &lt;a href=&quot;https://www.sparkfun.com/products/12924&quot;&gt;factory USB Programmer&lt;/a&gt;, just insert the MicroView into the USB Programmer following the photo below.  Please take note that at the back of MicroView, there is a round dot marking showing the Pin 1 of the MicroView where you need to match the Pin 1 of the USB Programmer.&lt;/p&gt;

&lt;p&gt;&lt;img src=&quot;/images/MicroView_Factory_Programmer.jpg&quot; alt=&quot;MicroView Factory USB Programmer&quot; /&gt;&lt;/p&gt;

&lt;p&gt;Once you have inserted the MicroView into the USB Programmer, you can now insert the USB Programmer into the USB port of the computer as below.  If your computer does not have a right-sided USB port, please use a &lt;a href=&quot;https://www.sparkfun.com/products/517&quot;&gt;USB Cable Extension&lt;/a&gt; to extend the USB port to the front so that you can easily work with the MicroView.&lt;/p&gt;

&lt;p&gt;&lt;img src=&quot;/images/MicroView_Programmer_To_Computer.jpg&quot; alt=&quot;MicroView USB Programmer Connects to Computer&quot; /&gt;&lt;/p&gt;

&lt;p&gt;If you have not purchase the factory USB Programmer and have &lt;a href=&quot;https://www.sparkfun.com/products/9716&quot;&gt;FTDI Basic Breakout -5V&lt;/a&gt; or &lt;a href=&quot;https://www.sparkfun.com/products/9718&quot;&gt;FTDI Cable 5V&lt;/a&gt; lying around, they can also be used as a MicroView programmer. Connect the FTDI Basic Breakout board as below, and you are ready to go.&lt;/p&gt;

&lt;p&gt;&lt;img src=&quot;/images/MicroView_FTDI_Programmer.svg&quot; width=&quot;700&quot; title=&quot;MicroView FTDI Basic Programmer Connection&quot; /&gt;&lt;/p&gt;

&lt;p class=&quot;success&quot;&gt;You have now successfully prepared the MicroView for programming.&lt;/p&gt;

&lt;h1 id=&quot;step-3---choose-the-right-arduino-software-ide&quot;&gt;STEP 3 - Choose the Right Arduino Software (IDE)&lt;/h1&gt;

&lt;p&gt;There are currently two options when selecting the Arduino Sofware (IDE). The first option is to use the cloud based &lt;a href=&quot;https://codebender.cc&quot;&gt;Codebender&lt;/a&gt; and the second option is to use &lt;a href=&quot;http://arduino.cc/en/main/software&quot;&gt;Arduino IDE.&lt;/a&gt;&lt;/p&gt;

&lt;p class=&quot;info&quot;&gt;As our Learning Kit&#39;s tutorials are based on Codebender, and Codebender has already included MicroView&#39;s library in their cloud solution, we highly recommend users to use Codebender for our tutorials.&lt;/p&gt;

&lt;h2 id=&quot;using-codebender&quot;&gt;Using Codebender&lt;/h2&gt;

&lt;p&gt;Installing Codebender is really simple, the prerequisite is just Chrome or Firefox browser.  Using Chrome or Firefox, browse to &lt;a href=&quot;https://codebender.cc/static/walkthrough/page/1&quot;&gt;Codebender’s Getting Started page&lt;/a&gt; and then follow the steps below (shown using Firefox browser).&lt;/p&gt;

&lt;p&gt;&lt;img src=&quot;/images/Codebender_Step01.png&quot; alt=&quot;MicroView install Codebender Step 1&quot; /&gt;&lt;/p&gt;

&lt;p&gt;Click &lt;code&gt;Let&#39;s Go!&lt;/code&gt;&lt;/p&gt;

&lt;p&gt;&lt;img src=&quot;/images/Codebender_Step02.png&quot; alt=&quot;MicroView install Codebender Step 2&quot; /&gt;&lt;/p&gt;

&lt;p&gt;Click &lt;code&gt;Add to Firefox.&lt;/code&gt;&lt;/p&gt;

&lt;p&gt;&lt;img src=&quot;/images/Codebender_Step03.png&quot; alt=&quot;MicroView install Codebender Step 3&quot; /&gt;&lt;/p&gt;

&lt;p&gt;Click &lt;code&gt;Allow&lt;/code&gt; when you see the message “Firefox prevented this site (codebender.cc) from asking you to install software on your computer.”&lt;/p&gt;

&lt;p&gt;&lt;img src=&quot;/images/Codebender_Step04.png&quot; alt=&quot;MicroView install Codebender Step 4&quot; /&gt;&lt;/p&gt;

&lt;p&gt;Wait for the &lt;code&gt;Add-on downloading&lt;/code&gt; to finish.&lt;/p&gt;

&lt;p&gt;&lt;img src=&quot;/images/Codebender_Step05.png&quot; alt=&quot;MicroView install Codebender Step 5&quot; /&gt;&lt;/p&gt;

&lt;p&gt;Click &lt;code&gt;Install Now&lt;/code&gt;&lt;/p&gt;

&lt;p&gt;&lt;img src=&quot;/images/Codebender_Step06.png&quot; alt=&quot;MicroView install Codebender Step 6&quot; /&gt;&lt;/p&gt;

&lt;p&gt;Click &lt;code&gt;Restart Now&lt;/code&gt; when you see the message “Codebender.cc Plugin will be installed after you restart Firefox.”&lt;/p&gt;

&lt;p class=&quot;success&quot;&gt;You have now successfully installed Codebender on your browser. Please proceed to STEP 4 – Write Your First Sketch&lt;/p&gt;

&lt;h2 id=&quot;install-arduino-ide&quot;&gt;Install Arduino IDE&lt;/h2&gt;

&lt;p&gt;Installing Arduino IDE is normally straight forward, however it is still a bit challenging if one has never try before.  Luckily our partner SparkFun have already published step by step guides on:&lt;/p&gt;

&lt;ul&gt;
  &lt;li&gt;&lt;a href=&quot;https://learn.sparkfun.com/tutorials/installing-arduino-ide/windows&quot;&gt;Installing Arduino IDE for Windows&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href=&quot;https://learn.sparkfun.com/tutorials/installing-arduino-ide/mac&quot;&gt;Installing Arduino IDE for Mac&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href=&quot;https://learn.sparkfun.com/tutorials/installing-arduino-ide/linux&quot;&gt;Installing Arduino IDE for Linux&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;p class=&quot;info&quot;&gt;After installation of the Arduino IDE has completed, unlike Codebender, you will still need to install MicroView&#39;s library.&lt;/p&gt;

&lt;h3 id=&quot;install-microview-library&quot;&gt;Install MicroView Library&lt;/h3&gt;

&lt;p&gt;Download MicroView’s library from our github repo below:&lt;/p&gt;

&lt;p&gt;&lt;a href=&quot;https://github.com/geekammo/MicroView-Arduino-Library/archive/master.zip&quot;&gt;MicroView Library Github Repo&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Save the ZIP file to your download folder then unzip the ZIP file. Rename the folder name from &lt;code&gt;MicroView-Arduino-Library-master&lt;/code&gt; to &lt;code&gt;MicroView&lt;/code&gt;.&lt;/p&gt;

&lt;p&gt;&lt;img src=&quot;/images/MicroView_Rename_Library_Folder.png&quot; alt=&quot;MicroView Rename Library Folder&quot; /&gt;&lt;/p&gt;

&lt;p&gt;Execute Arduino IDE, click Sketch, Import Library and then Add Library.&lt;/p&gt;

&lt;p&gt;&lt;img src=&quot;/images/MicroView_Add_Library.png&quot; alt=&quot;Add MicroView Library to Arduino IDE&quot; /&gt;&lt;/p&gt;

&lt;p&gt;Browse to the &lt;code&gt;MicroView&lt;/code&gt; folder that was renamed and select that folder.  MicroView library will be automatically installed.&lt;/p&gt;

&lt;p&gt;Click File, Example, and find MicroView Example to confirm the installation.&lt;/p&gt;

&lt;p&gt;&lt;img src=&quot;/images/MicroView_Library_Installed.png&quot; alt=&quot;MicroView Library Installed&quot; /&gt;&lt;/p&gt;

&lt;h1 id=&quot;step-4---write-your-first-sketch&quot;&gt;STEP 4 - Write Your First Sketch&lt;/h1&gt;

&lt;pre&gt;&lt;code&gt;#include &amp;lt;MicroView.h&amp;gt;
 
void setup() {
  uView.begin();
  uView.clear(PAGE);
  uView.print(&quot;HelloWorld&quot;);
  uView.display();
}
 
void loop () {
}
&lt;/code&gt;&lt;/pre&gt;

&lt;p class=&quot;success&quot;&gt;Well done! You are now ready to try our other tutorials.&lt;/p&gt;
</content>
 </entry>
 
 
</feed>