Skip to content

Commit

Permalink
Fix Broken Image, remove "hide" function from Grid Card, Update Examp…
Browse files Browse the repository at this point in the history 
…le 1 to Reference v1.0.2+, Format Table
  • Loading branch information
@bboyho
bboyho committed May 22, 2024
1 parent 21e1280 commit 74d5d33
Show file tree
Hide file tree
Showing 2 changed files with 90 additions and 35 deletions.
6 changes: 3 additions & 3 deletions docs/introduction.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -38,7 +38,7 @@ A full [API Reference](../api_device) is also provided for the library.

The SparkFun Qwiic OLED Arduino Library supports the following SparkFun products.

<div class="grid cards hide col-4" markdown>
<div class="grid cards col-4" markdown>
<!-- ----------WHITE SPACE BETWEEN PRODUCTS---------- -->
- <a href="https://www.sparkfun.com/products/22495">
<figure markdown>
Expand Down Expand Up @@ -70,7 +70,7 @@ The SparkFun Qwiic OLED Arduino Library supports the following SparkFun products
<!-- ----------WHITE SPACE BETWEEN PRODUCTS---------- -->
- <a href="https://www.sparkfun.com/products/15173">
<figure markdown>
<img src="https://cdn.sparkfun.com/assets/parts/2/4/9/6/3/LCD-24606-Qwiic-OLED-Display-Action-11-Blue.jpg" style="width:140px; height:140px; object-fit:contain;" alt="SparkFun Transparent Graphical OLED Breakout (Qwiic)">
<img src="https://cdn.sparkfun.com//assets/parts/1/3/5/8/8/15173-SparkFun_Transparent_Graphical_OLED_Breakout__Qwiic_-01a.jpg" style="width:140px; height:140px; object-fit:contain;" alt="SparkFun Transparent Graphical OLED Breakout (Qwiic)">
</figure>
</a>

Expand Down Expand Up @@ -115,7 +115,7 @@ The following architectures are supported in the Arduino Library.

Below are a few of those processors populated on Arduino boards from the [SparkFun catalog](https://www.sparkfun.com/categories/242). You will need to make sure to check the associated hookup guides for additional information about compatible cables, drivers, or board add-ons.

<div class="grid cards hide col-4" markdown>
<div class="grid cards col-4" markdown>
<!-- ----------WHITE SPACE BETWEEN PRODUCTS---------- -->
- <a href="https://www.sparkfun.com/products/15574">
<figure markdown>
Expand Down
119 changes: 87 additions & 32 deletions examples/docs/ex_01_hello.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,40 +10,85 @@ A simple example to show the basic setup and use of the SparkFun Qwiic OLED Libr
* Using the current font to center text on the screen.
* Displaying the graphics on the screen



## Setup

After installing this library in your local Arduino environment, begin with a standard Arduino sketch, and include the header file for this library.


```C++
// Include the SparkFun qwiic OLED Library
// Include the SparkFun Qwiic OLED Library
#include <SparkFun_Qwiic_OLED.h>
```
The next step is to declare the object for the SparkFun qwiic OLED device used. Like most Arduino sketches, this is done at a global scope (after the include file declaration), not within the ```setup()``` or ```loop()``` functions.

The user selects from one of the following classes:

| Class | Qwiic OLED Device |
| :--- | :--- |
| `QwiicMicroOLED` | [SparkFun Qwiic Micro OLED ]( https://www.sparkfun.com/products/14532)|
| `QwiicNarrowOLED` | [SparkFun Qwiic OLED Display (128x32) ]( https://www.sparkfun.com/products/17153)|
| `QwiicTransparentOLED` | [SparkFun Transparent Graphical OLED]( https://www.sparkfun.com/products/15173)|
| `Qwiic1in3OLED` | [SparkFun Qwiic OLED 1.3" Display (128x32) ]( https://www.sparkfun.com/products/23453)|
The next step is to declare the object for the SparkFun Qwiic OLED device used. Like most Arduino sketches, this is done at a global scope (after the include file declaration), not within the ```setup()``` or ```loop()``` functions.

The Example code supports all of the SparkFun Qwiic OLED boards. To select the board being used, uncomment the `#define` for the demo board.
The user selects from one of the following classes:

<div style="text-align: center;">
<table>
<tr>
<th style="text-align: center; border: solid 1px #cccccc;">Class
</th>
<th style="text-align: center; border: solid 1px #cccccc;">Qwiic OLED Device
</th>
</tr>
<tr>
<td style="text-align: center; border: solid 1px #cccccc;"><code>QwiicMicroOLED</code>
</td>
<td style="text-align: center; border: solid 1px #cccccc;"><a href="https://www.sparkfun.com/products/14532">SparkFun Qwiic Micro OLED</a>
</td>
</tr>
<tr>
<td style="text-align: center; border: solid 1px #cccccc;"><code>QwiicTransparentOLED</code>
</td>
<td style="text-align: center; border: solid 1px #cccccc;"><a href="https://www.sparkfun.com/products/15173">SparkFun Transparent Graphical OLED</a>
</td>
</tr>
<tr>
<td style="text-align: center; border: solid 1px #cccccc;"><code>QwiicNarrowOLED</code>
</td>
<td style="text-align: center; border: solid 1px #cccccc;"><a href="https://www.sparkfun.com/products/17153">SparkFun Qwiic OLED Display (128x32)</a>
</td>
</tr>
<tr>
<td style="text-align: center; border: solid 1px #cccccc;"><code>Qwiic1in3OLED</code>
</td>
<td style="text-align: center; border: solid 1px #cccccc;"><a href="https://www.sparkfun.com/products/23453">SparkFun Qwiic OLED 1.3" Display (128x32)</a>
</td>
</tr>
</table>
</div>



The example code supports all of the SparkFun Qwiic OLED boards. By default, the Qwiic Micro OLED is selected. To select a different board being used, add a single line comment (i.e. `//`) in front of "`QwiicMicroOLED myOLED;`" and uncomment the device being used for the demo board.

For this example, the Qwiic Micro OLED is used.
```C++
#define MICRO
//#define NARROW
//#define TRANSPARENT
```
Which results in myOLED being declared as:

```C++
QwiicMicroOLED myOLED;
//QwiicTransparentOLED myOLED;
//QwiicNarrowOLED myOLED;
//Qwiic1in3OLED myOLED;

```


!!! note
As of version 1.0.2+, users will need to use the class as explained above instead of using a `#define`.

```C++
#define MICRO
//#define NARROW
//#define TRANSPARENT
```


## Initialization

In the ```setup()``` function of this sketch, like all of the SparkFun qwiic libraries, the device is initialized by calling the ```begin()``` method. This method returns a value of ```true``` on success, or ```false``` on failure.
In the ```setup()``` function of this sketch, like all of the SparkFun Qwiic Arduino libraries, the device is initialized by calling the ```begin()``` method. This method returns a value of ```true``` on success, or ```false``` on failure.

```C++
void setup()
Expand All @@ -68,42 +113,52 @@ void setup()

Serial.println("- Begin Success");

// Do a simple test - fill a rectangle on the screen and then print hello!...

}
```



## Drawing Graphics

Once the device is enabled, the rest of the setup() function is devoted to drawing a simple graphic on the target device.
Once the device is enabled, the rest of the `setup()` function is devoted to drawing a simple graphic on the target device.



### Filled Rectangle

First, draw a filled rectangle on the screen - leave a 4 pixel boarder at the end of the screen. Note that the `getWidth()` and `getHeight()` method are used to get the devices screen size.

```C++
// fill a rectangle on the screen that has a 4 pixel board
myOLED.rectangleFill(4, 4, myOLED.getWidth()-4, myOLED.getHeight()-4);
// Fill a rectangle on the screen that has a 4 pixel board
myOLED.rectangleFill(4, 4, myOLED.getWidth() - 8, myOLED.getHeight() - 8);
```
### Centered Text

The next part of our graphic is a message centered in the drawn rectangle. To do the centering, the current font is accessed from the device, and the size of a character in the font is used to calculate the text position on the screen.

Once the position is determined, the message is drawn on the display in black (0 for a color value).

### Centered Text

The next part of our graphic is a message centered in the drawn rectangle. To do the centering, the current font is accessed from the device, and the size of a character in the font is used to calculate the text position on the screen. Once the position is determined, the message is drawn on the display in black (0 for a color value).

```C++
String hello = "hello"; // our message

// Lets center our message on the screen. We need to current font.
// Center our message on the screen. Get the screen size of the "hello" string,
// calling the getStringWidth() and getStringHeight() methods on the oled

QwiicFont * pFont = myOLED.getFont();
// starting x position - screen width minus string width / 2
int x0 = (myOLED.getWidth() - myOLED.getStringWidth(hello)) / 2;

// starting x position - width minus string length (font width * number of characters) / 2
int x0 = (myOLED.getWidth() - pFont->width * hello.length())/2;

int y0 = (myOLED.getHeight() - pFont->height)/2;
// starting y position - screen height minus string height / 2
int y0 = (myOLED.getHeight() - myOLED.getStringHeight(hello)) / 2;

// Draw the text - color of black (0)
myOLED.text(x0, y0, hello, 0);
```



### Displaying the Graphics

The last step is sending the graphics to the device. This is accomplished by calling the `display()` method.
Expand All @@ -113,6 +168,6 @@ The last step is sending the graphics to the device. This is accomplished by cal
myOLED.display();
```

And that's in - the graphic is displayed on the OLED device.
And that's it - the graphic is displayed on the OLED device.

![Hello!](img/ex01_hello.png "Hello")
![Hello!](img/ex01_hello.png "Hello")

0 comments on commit 74d5d33

Please sign in to comment.