Difference between revisions of "OLED (use with mDesigner)"

From Microduino Wiki
Jump to: navigation, search
(OLED - Display Message)
(OLED - Draw Circle)
 
(33 intermediate revisions by the same user not shown)
Line 7: Line 7:
 
<br style="clear: left;" />
 
<br style="clear: left;" />
  
==Method 2: Connecting with Wire==
+
==Method 2: Connecting with a Wire==
 
Connecting the OLED screen to a sensor hub with a wire allows for the OLED to be positioned in different locations.<br>The following pins on the '''Hub''' or '''mCenter+'s Hub''' support this module:
 
Connecting the OLED screen to a sensor hub with a wire allows for the OLED to be positioned in different locations.<br>The following pins on the '''Hub''' or '''mCenter+'s Hub''' support this module:
 
<div style="width: 80%;">
 
<div style="width: 80%;">
Line 111: Line 111:
 
The OLED blocks "x" and "y" values reference the screen resolution with origin (0,0).<br>
 
The OLED blocks "x" and "y" values reference the screen resolution with origin (0,0).<br>
 
The origin (0, 0) is on the top left of the screen (in reference to image below).
 
The origin (0, 0) is on the top left of the screen (in reference to image below).
[[File:OLED_Coordinates.png|thumb|600px|left]]
+
[[File:OLED_Coordinates.png|thumb|400px|left]]
 
<br style="clear: left;" />
 
<br style="clear: left;" />
  
Line 118: Line 118:
 
This block displays a message on the OLED screen. '''The bottom left corner of the text is aligned to the "x" and y" input.''' Each character (default) is about 10 pixels tall.
 
This block displays a message on the OLED screen. '''The bottom left corner of the text is aligned to the "x" and y" input.''' Each character (default) is about 10 pixels tall.
  
::[[File:MDesigner_Temperature_and_Humidity_S2_Read.png]]
+
::[[File:mDesigner_OLED_Display_Message_block.png]]
 
:*'''x''' - "x" position of the message.
 
:*'''x''' - "x" position of the message.
::*'''y''' - "y" position of the message.
+
:*'''y''' - "y" position of the message.
::*'''message''' - message to display.
+
:*'''message''' - message to display.
  
 
[[File:OLED Display Message Demo.png|thumb|400px|left]]
 
[[File:OLED Display Message Demo.png|thumb|400px|left]]
Line 127: Line 127:
  
 
==OLED - Draw Line==
 
==OLED - Draw Line==
[[File:OLED Draw Line Demo.png|thumb|600px|left]]
+
This block draws a line on the OLED screen. With the starting point as (x0, y0) and the ending point as (x1, y1). The line width is about 1 pixel.
 +
 
 +
::[[File:mDesigner_OLED_Draw_Line_block.png]]
 +
:*'''line / rectangle''' - draw either a line or rectangle. Leave on '''line''' to draw a line.
 +
:*Start point - '''x0''', '''y0'''
 +
:*End point - '''x1''', '''y1'''
 +
[[File:OLED Draw Line Demo.png|thumb|400px|left]]
 
<br style="clear: left;" />
 
<br style="clear: left;" />
  
 
==OLED - Draw Rectangle==
 
==OLED - Draw Rectangle==
[[File:OLED Draw Rectangle Demo.png|thumb|600px|left]]
+
This block draws a rectangle on the OLED screen. With the top left corner point as (x0, y0) and the bottom right corner point as (x1, y1). The line width is about 1 pixel.
 +
{| class="wikitable" style="background-color:#FEF9E7;"
 +
|[[File:mDesigner_OLED_Draw_Rectangle_Select.png]]<br>'''Note:'''<br>This block uses the '''OLED - Draw Line''' block, but configured for a rectangle.
 +
 
 +
|}
 +
 
 +
::[[File:mDesigner_OLED_Draw_Rectangle_block.png]]
 +
:*'''line / rectangle''' - draw either a line or rectangle. Change to '''rectangle''' to draw a rectangle.
 +
:*Top left corner - '''x0''', '''y0'''
 +
:*Bottom right corner - '''x1''', '''y1'''
 +
 
 +
[[File:OLED Draw Rectangle Demo.png|thumb|400px|left]]
 
<br style="clear: left;" />
 
<br style="clear: left;" />
  
 
==OLED - Draw Circle==
 
==OLED - Draw Circle==
[[File:OLED Draw Circle Demo.png|thumb|800px|left]]
+
This block draws a circle on the OLED screen. With the center of the on the "x" and "y" inputs with a radius of "r".
 +
 
 +
::[[File:mDesigner_OLED_Draw_Circle_block.png]]
 +
:*center of circle - '''x''', '''y'''
 +
:*'''r''' - radius of the circle.
 +
 
 +
[[File:OLED Draw Circle Demo.png|thumb|650px|left]]
 
<br style="clear: left;" />
 
<br style="clear: left;" />
  
 
==OLED - Clear==
 
==OLED - Clear==
 +
This block clears the contents of the OLED screen of any drawn contents, such as text, shapes, etc.
 +
::[[File:mDesigner_OLED_Clear.png]]

Latest revision as of 23:53, 12 July 2018

The organic light-emitting diode (OLED) module is a display module capable of displaying information, shapes, images, etc on its 0.96-inch 128x64 (pixel) screen. Support for this trinket is found in mDesigner.

Connectivity

The OLED module can be connected to a project in two ways. Either stacking or connecting to a sensor hub using a wire.

Method 1: Stacking

Stack directly onto an mBattery or mCenter+.

OLED Connectivity Stacked.png


Method 2: Connecting with a Wire

Connecting the OLED screen to a sensor hub with a wire allows for the OLED to be positioned in different locations.
The following pins on the Hub or mCenter+'s Hub support this module:

OLED Connectivity Wired.png
Pin Name Compatibility Notes
Pin 0 No
Pin 1 No
Pin 2 No
Pin 3 No
Pin 4 No
Pin 5 No
Pin 6 No
Pin 7 No
Pin 8 No
Pin 9 No
Pin 10 No
Pin 11 No
Pin 12 No
Pin 13 No
Pin A0 No
Pin A1 No
Pin A2 No
Pin A3 No
Pin A6 No
Pin A7 No
Pin I2C Yes Any I2C / IIC pin.


Coordinates

The OLED screen has a screen resolution of 128 pixel wide by 64 high.
The OLED blocks "x" and "y" values reference the screen resolution with origin (0,0).
The origin (0, 0) is on the top left of the screen (in reference to image below).

OLED Coordinates.png


Blocks

OLED - Display Message

This block displays a message on the OLED screen. The bottom left corner of the text is aligned to the "x" and y" input. Each character (default) is about 10 pixels tall.

MDesigner OLED Display Message block.png
  • x - "x" position of the message.
  • y - "y" position of the message.
  • message - message to display.
OLED Display Message Demo.png


OLED - Draw Line

This block draws a line on the OLED screen. With the starting point as (x0, y0) and the ending point as (x1, y1). The line width is about 1 pixel.

MDesigner OLED Draw Line block.png
  • line / rectangle - draw either a line or rectangle. Leave on line to draw a line.
  • Start point - x0, y0
  • End point - x1, y1
OLED Draw Line Demo.png


OLED - Draw Rectangle

This block draws a rectangle on the OLED screen. With the top left corner point as (x0, y0) and the bottom right corner point as (x1, y1). The line width is about 1 pixel.

MDesigner OLED Draw Rectangle Select.png
Note:
This block uses the OLED - Draw Line block, but configured for a rectangle.
MDesigner OLED Draw Rectangle block.png
  • line / rectangle - draw either a line or rectangle. Change to rectangle to draw a rectangle.
  • Top left corner - x0, y0
  • Bottom right corner - x1, y1
OLED Draw Rectangle Demo.png


OLED - Draw Circle

This block draws a circle on the OLED screen. With the center of the on the "x" and "y" inputs with a radius of "r".

MDesigner OLED Draw Circle block.png
  • center of circle - x, y
  • r - radius of the circle.
OLED Draw Circle Demo.png


OLED - Clear

This block clears the contents of the OLED screen of any drawn contents, such as text, shapes, etc.

MDesigner OLED Clear.png