Skip to content

Commit 74d5d33

Browse files
committed
Fix Broken Image, remove "hide" function from Grid Card, Update Example 1 to Reference v1.0.2+, Format Table
1 parent 21e1280 commit 74d5d33

File tree

2 files changed

+90
-35
lines changed

2 files changed

+90
-35
lines changed

docs/introduction.md

+3-3
Original file line numberDiff line numberDiff line change
@@ -38,7 +38,7 @@ A full [API Reference](../api_device) is also provided for the library.
3838

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

41-
<div class="grid cards hide col-4" markdown>
41+
<div class="grid cards col-4" markdown>
4242
<!-- ----------WHITE SPACE BETWEEN PRODUCTS---------- -->
4343
- <a href="https://www.sparkfun.com/products/22495">
4444
<figure markdown>
@@ -70,7 +70,7 @@ The SparkFun Qwiic OLED Arduino Library supports the following SparkFun products
7070
<!-- ----------WHITE SPACE BETWEEN PRODUCTS---------- -->
7171
- <a href="https://www.sparkfun.com/products/15173">
7272
<figure markdown>
73-
<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)">
73+
<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)">
7474
</figure>
7575
</a>
7676

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

116116
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.
117117

118-
<div class="grid cards hide col-4" markdown>
118+
<div class="grid cards col-4" markdown>
119119
<!-- ----------WHITE SPACE BETWEEN PRODUCTS---------- -->
120120
- <a href="https://www.sparkfun.com/products/15574">
121121
<figure markdown>

examples/docs/ex_01_hello.md

+87-32
Original file line numberDiff line numberDiff line change
@@ -10,40 +10,85 @@ A simple example to show the basic setup and use of the SparkFun Qwiic OLED Libr
1010
* Using the current font to center text on the screen.
1111
* Displaying the graphics on the screen
1212

13+
14+
1315
## Setup
1416

1517
After installing this library in your local Arduino environment, begin with a standard Arduino sketch, and include the header file for this library.
18+
19+
1620
```C++
17-
// Include the SparkFun qwiic OLED Library
21+
// Include the SparkFun Qwiic OLED Library
1822
#include <SparkFun_Qwiic_OLED.h>
1923
```
20-
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.
2124

22-
The user selects from one of the following classes:
2325

24-
| Class | Qwiic OLED Device |
25-
| :--- | :--- |
26-
| `QwiicMicroOLED` | [SparkFun Qwiic Micro OLED ]( https://www.sparkfun.com/products/14532)|
27-
| `QwiicNarrowOLED` | [SparkFun Qwiic OLED Display (128x32) ]( https://www.sparkfun.com/products/17153)|
28-
| `QwiicTransparentOLED` | [SparkFun Transparent Graphical OLED]( https://www.sparkfun.com/products/15173)|
29-
| `Qwiic1in3OLED` | [SparkFun Qwiic OLED 1.3" Display (128x32) ]( https://www.sparkfun.com/products/23453)|
26+
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.
3027

31-
The Example code supports all of the SparkFun Qwiic OLED boards. To select the board being used, uncomment the `#define` for the demo board.
28+
The user selects from one of the following classes:
29+
30+
<div style="text-align: center;">
31+
<table>
32+
<tr>
33+
<th style="text-align: center; border: solid 1px #cccccc;">Class
34+
</th>
35+
<th style="text-align: center; border: solid 1px #cccccc;">Qwiic OLED Device
36+
</th>
37+
</tr>
38+
<tr>
39+
<td style="text-align: center; border: solid 1px #cccccc;"><code>QwiicMicroOLED</code>
40+
</td>
41+
<td style="text-align: center; border: solid 1px #cccccc;"><a href="https://www.sparkfun.com/products/14532">SparkFun Qwiic Micro OLED</a>
42+
</td>
43+
</tr>
44+
<tr>
45+
<td style="text-align: center; border: solid 1px #cccccc;"><code>QwiicTransparentOLED</code>
46+
</td>
47+
<td style="text-align: center; border: solid 1px #cccccc;"><a href="https://www.sparkfun.com/products/15173">SparkFun Transparent Graphical OLED</a>
48+
</td>
49+
</tr>
50+
<tr>
51+
<td style="text-align: center; border: solid 1px #cccccc;"><code>QwiicNarrowOLED</code>
52+
</td>
53+
<td style="text-align: center; border: solid 1px #cccccc;"><a href="https://www.sparkfun.com/products/17153">SparkFun Qwiic OLED Display (128x32)</a>
54+
</td>
55+
</tr>
56+
<tr>
57+
<td style="text-align: center; border: solid 1px #cccccc;"><code>Qwiic1in3OLED</code>
58+
</td>
59+
<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>
60+
</td>
61+
</tr>
62+
</table>
63+
</div>
64+
65+
66+
67+
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.
3268

33-
For this example, the Qwiic Micro OLED is used.
34-
```C++
35-
#define MICRO
36-
//#define NARROW
37-
//#define TRANSPARENT
38-
```
39-
Which results in myOLED being declared as:
4069

4170
```C++
4271
QwiicMicroOLED myOLED;
72+
//QwiicTransparentOLED myOLED;
73+
//QwiicNarrowOLED myOLED;
74+
//Qwiic1in3OLED myOLED;
75+
4376
```
77+
78+
79+
!!! note
80+
As of version 1.0.2+, users will need to use the class as explained above instead of using a `#define`.
81+
82+
```C++
83+
#define MICRO
84+
//#define NARROW
85+
//#define TRANSPARENT
86+
```
87+
88+
4489
## Initialization
4590

46-
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.
91+
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.
4792

4893
```C++
4994
void setup()
@@ -68,42 +113,52 @@ void setup()
68113

69114
Serial.println("- Begin Success");
70115

116+
// Do a simple test - fill a rectangle on the screen and then print hello!...
117+
118+
}
71119
```
72120

121+
122+
73123
## Drawing Graphics
74124

75-
Once the device is enabled, the rest of the setup() function is devoted to drawing a simple graphic on the target device.
125+
Once the device is enabled, the rest of the `setup()` function is devoted to drawing a simple graphic on the target device.
126+
127+
76128

77129
### Filled Rectangle
78130

79131
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.
80132

81133
```C++
82-
// fill a rectangle on the screen that has a 4 pixel board
83-
myOLED.rectangleFill(4, 4, myOLED.getWidth()-4, myOLED.getHeight()-4);
134+
// Fill a rectangle on the screen that has a 4 pixel board
135+
myOLED.rectangleFill(4, 4, myOLED.getWidth() - 8, myOLED.getHeight() - 8);
84136
```
85-
### Centered Text
86137

87-
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.
88138

89-
Once the position is determined, the message is drawn on the display in black (0 for a color value).
139+
140+
### Centered Text
141+
142+
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).
90143

91144
```C++
92145
String hello = "hello"; // our message
93146

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

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

98-
// starting x position - width minus string length (font width * number of characters) / 2
99-
int x0 = (myOLED.getWidth() - pFont->width * hello.length())/2;
100-
101-
int y0 = (myOLED.getHeight() - pFont->height)/2;
153+
// starting y position - screen height minus string height / 2
154+
int y0 = (myOLED.getHeight() - myOLED.getStringHeight(hello)) / 2;
102155

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

160+
161+
107162
### Displaying the Graphics
108163

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

116-
And that's in - the graphic is displayed on the OLED device.
171+
And that's it - the graphic is displayed on the OLED device.
117172

118-
![Hello!](img/ex01_hello.png "Hello")
173+
![Hello!](img/ex01_hello.png "Hello")

0 commit comments

Comments
 (0)