Skip to content

Commit d64b079

Browse files
committed
Add note, format table, update modular functions based on current library
1 parent 74d5d33 commit d64b079

File tree

2 files changed

+154
-76
lines changed

2 files changed

+154
-76
lines changed

examples/docs/ex_01_hello.md

+4-1
Original file line numberDiff line numberDiff line change
@@ -168,6 +168,9 @@ The last step is sending the graphics to the device. This is accomplished by cal
168168
myOLED.display();
169169
```
170170

171-
And that's it - the graphic is displayed on the OLED device.
171+
172+
### What You Should See
173+
174+
And that's it! Select the board and COM port for your development board. Then upload the code! The graphic should display on the OLED device.
172175

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

examples/docs/ex_02_lines.md

+150-75
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
# Example 2 - Shapes
22

3-
An example that shows drawing simple shapes using the SparkFun Qwiic OLED Library.
3+
An example that shows drawing simple shapes using the SparkFun Qwiic OLED Library.
44

55
**Key Demo Features**
66

@@ -9,144 +9,216 @@ An example that shows drawing simple shapes using the SparkFun Qwiic OLED Libra
99
* Drawing and erasing graphics quickly
1010
* XOR operations using raster operators
1111

12+
13+
1214
## Setup
1315

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

21-
The user selects from one of the following classes:
2224

23-
| Class | Qwiic OLED Device |
24-
| :--- | :--- |
25-
| `QwiicMicroOLED` | [SparkFun Qwiic Micro OLED ]( https://www.sparkfun.com/products/14532)|
26-
| `QwiicNarrowOLED` | [SparkFun Qwiic OLED Display (128x32) ]( https://www.sparkfun.com/products/17153)|
27-
| `QwiicTransparentOLED` | [SparkFun Transparent Graphical OLED]( https://www.sparkfun.com/products/15173)|
28-
| `Qwiic1in3OLED` | [SparkFun Qwiic OLED 1.3" Display (128x32) ]( https://www.sparkfun.com/products/23453)|
25+
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.
26+
27+
The user selects from one of the following classes:
2928

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

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

4069
```C++
4170
QwiicMicroOLED myOLED;
71+
//QwiicTransparentOLED myOLED;
72+
//QwiicNarrowOLED myOLED;
73+
//Qwiic1in3OLED myOLED;
74+
4275
```
4376

77+
78+
!!! note
79+
As of version 1.0.2+, users will need to use the class as explained above instead of using a `#define`.
80+
81+
```C++
82+
#define MICRO
83+
//#define NARROW
84+
//#define TRANSPARENT
85+
```
86+
87+
88+
4489
## Drawing Shapes
4590

91+
!!! note
92+
As of version 1.0.2+, the modular functions have a slightly different name. Some functions defined in the example code will have the `_` removed or words spelled out. For example, version v1.0.1 and below defined the function to test the line as `line_test_1()` while version v1.0.2+ defined the function as `lineTest1()`.
93+
4694
The shapes drawn are broken into a set of functions that perform one test, which is part of the overall example.
4795

96+
97+
4898
###Lines
4999

50100
This test starts with a short, horizontal line that is animated from the top to bottom of the display. After each iteration, the line size is increased and the animating sequence repeated.
51101

52-
To animate the line, the display is erased, then the line drawn. Once the line is draw, the updated graphics is sent to the OLED device by calling the `display()` method.
102+
To animate the line, the display is erased, then the line drawn. Once the line is draw, the updated graphics is sent to the OLED device by calling the `display()` method.
53103

54104
!!! note
55-
When `display()` is called, only the range of modified pixels is sent to the OLED device, greatly reducing the data transferred for small graphic changes.
105+
When `display()` is called, only the range of modified pixels is sent to the OLED device, greatly reducing the data transferred for small graphic changes.
56106

57107
This is demonstrated by this test. When small lines are drawn, the update rate is fast, but as the line length increases, the update rate of the device is noticeably slower. A longer line requires more data to be sent to the device.
58108

59109
```C++
60-
void line_test_1(void){
61-
110+
void lineTest1(void)
111+
{
62112
int x, y, i;
63113

64-
int mid = width/2;
65-
int delta = mid/8;
66-
67-
for(int j =1; j < 8; j++ ){
114+
int mid = width / 2;
115+
int delta = mid / 8;
116+
117+
for (int j = 1; j < 8; j++)
118+
{
68119

69-
x = delta*j;
120+
x = delta * j;
70121

71-
for(i=0; i < height*2; i++){
122+
for (i = 0; i < height * 2; i++)
123+
{
72124

73125
y = i % height;
74126
myOLED.erase();
75-
myOLED.line(mid-x, y, mid+x, y);
127+
myOLED.line(mid - x, y, mid + x, y);
76128
myOLED.display();
77129
}
78130
}
79131
}
80132
```
133+
134+
135+
81136
This test is followed up with a series of lines that span from a single point to the bottom of the screen, showing the flexibility of the line to raster algorithm used by the library.
82137
83138
```C++
84-
void line_test_2(void){
85-
86-
for(int i=0; i < width; i +=6){
87-
myOLED.line(0, 0, i, height-1);
139+
void lineTest2(void)
140+
{
141+
for (int i = 0; i < width; i += 6)
142+
{
143+
myOLED.line(0, 0, i, height - 1);
88144
myOLED.display();
89145
}
90146
delay(200);
91147
myOLED.erase();
92-
for(int i=width-1; i >= 0; i -=6){
93-
myOLED.line(width-1, 0, i, height-1);
148+
for (int i = width - 1; i >= 0; i -= 6)
149+
{
150+
myOLED.line(width - 1, 0, i, height - 1);
94151
myOLED.display();
95-
}
152+
}
96153
}
97154
```
155+
156+
157+
98158
And the last line test draws a series of lines to test all three internal line drawing algorithms. Specifically:
159+
99160
* Angled lines drawn by the general purpose line algorithm
100161
* Vertical lines drawn by an optimized line routine
101162
* Horizontal lines draw by an optimized line routine
102163

103164
The test animates to show a growing box, giving an idea of the speed and flexibility of the system.
104165

105166
```C++
106-
// Iterator function - called to animate graphic
107-
void line_test_vert_iter(uint8_t y0, uint8_t y1){
108-
109-
for(int i=0; i < width; i += 8)
110-
myOLED.line( i, y0, i, y1);
167+
void lineTestVerticalIterative(uint8_t y0, uint8_t y1)
168+
{
169+
for (int i = 0; i < width; i += 8)
170+
myOLED.line(i, y0, i, y1);
111171

112172
// end off the vertical lines
113-
myOLED.line( width-1, y0, width-1, y1);
173+
myOLED.line(width - 1, y0, width - 1, y1);
114174

115175
// End lines and cross lines
116-
myOLED.line(0, y0, width-1, y0);
117-
myOLED.line(0, y1, width-1, y1);
118-
myOLED.line(0, y0, width-1, y1);
119-
myOLED.line(0, y1, width-1, y0);
176+
myOLED.line(0, y0, width - 1, y0);
177+
myOLED.line(0, y1, width - 1, y1);
178+
myOLED.line(0, y0, width - 1, y1);
179+
myOLED.line(0, y1, width - 1, y0);
120180
}
121181

122182
// Entry point for test
123-
void line_test_vert(void){
124-
125-
int mid = height/2;
183+
void lineTestVertical(void)
184+
{
185+
int mid = height / 2;
126186

127-
for(int i=0; i < height; i+=4){
187+
for (int i = 0; i < height; i += 4)
188+
{
128189

129190
myOLED.erase();
130-
line_test_vert_iter( mid - i/2, mid + i/2 );
191+
lineTestVerticalIterative(mid - i / 2, mid + i / 2);
131192
myOLED.display();
132193
delay(10);
133194
}
134195
}
135196
```
136197
198+
199+
137200
### Rectangles
138201
139-
Several rectangle routines are shown in this example. A key test is a fast drawing routine which animates a small rectangle being drawn diagonally across the screen.
202+
Several rectangle routines are shown in this example. A key test is a fast drawing routine which animates a small rectangle being drawn diagonally across the screen.
140203
141204
In this test, the rectangle is drawn, sent to the device via using `display()`, then the rectangle is drawn again, but this time in black. This effectively erases the rectangle. The position is incremented and the process loops, causing the rectangle to appear to fly across the screen.
142205
143206
The animation is quick, since only the portions of the screen that need updated are actually updated.
144207
145-
The animation algorithm:
208+
The animation algorithm is listed in the `rectangleTestMove() function.
146209
147210
```C++
148-
for(int i = 0; i < steps; i++){
149-
211+
void rectangleTestMove(void)
212+
{
213+
float steps = height;
214+
float xinc = width / steps;
215+
float yinc = height / steps;
216+
int side = 10;
217+
float x = 0;
218+
float y = 0;
219+
220+
for (int i = 0; i < steps; i++)
221+
{
150222
// Draw the rectangle and send it to device
151223
myOLED.rectangle(x, y, side, side);
152224
myOLED.display(); // sends erased rect and new rect pixels to device
@@ -155,45 +227,48 @@ The animation algorithm:
155227
myOLED.rectangle(x, y, side, side, 0);
156228
157229
x += xinc;
158-
y += yinc;
230+
y += yinc;
159231
}
232+
}
160233
```
161234

235+
236+
162237
The next rectangle test draws a series of filled rectangles on the screen. The unique aspect of this test is that is uses the XOR functionally to overlay a rectangle on the device, presenting a alternating color pattern.
163238

164-
The XOR raster operation is set by calling the `setDrawMode()` method on the OLED device, and providing the `grROPXOR` code. This switch the device into a XOR drawing mode. Graphic operations are restored to normal by calling `setDrawMode()` and providing the `grROPCopy` code, which copies the new pixel value to the destination.
239+
The XOR raster operation is set by calling the `setDrawMode()` method on the OLED device, and providing the `grROPXOR` code. This switch the device into a XOR drawing mode. Graphic operations are restored to normal by calling `setDrawMode()` and providing the `grROPCopy` code, which copies the new pixel value to the destination.
165240

166241
Filled rectangles and XOR operations:
167242

168243
```C++
169-
void rect_fill_test(void){
170-
171-
myOLED.rectangleFill(4, 4, width/2-8, height-8);
244+
void rectangleFillTest(void)
245+
{
246+
myOLED.rectangleFill(4, 4, width / 2 - 8, height - 8);
172247

173-
myOLED.rectangleFill(width/2+4, 4, width/2-8, height-8);
248+
myOLED.rectangleFill(width / 2 + 4, 4, width / 2 - 8, height - 8);
174249

175-
myOLED.setDrawMode(grROPXOR); // xor
176-
myOLED.rectangleFill(width/4, 8, width/2, height-16);
177-
myOLED.setDrawMode(grROPCopy); // back to copy op (default)
250+
myOLED.setDrawMode(grROPXOR); // xor
251+
myOLED.rectangleFill(width / 4, 8, width / 2, height - 16);
252+
myOLED.setDrawMode(grROPCopy); // back to copy op (default)
178253
}
179254
```
180255
181-
### Circles
182256
183-
The final shape drawn by this example is a series of circles and filled circles. Using the geometry of the screen, a set of circles are drawn and displayed.
184257
185-
```C++
186-
void circle_test(void){
258+
### Circles
187259
188-
// Lets draw some circles that fit on the device
189-
myOLED.circle(width/4, height/2, height/3);
260+
The final shape drawn by this example is a series of circles and filled circles. Using the geometry of the screen, a set of circles are drawn and displayed.
190261
191-
myOLED.circleFill(width - width/4, height/2, height/3);
262+
```C++
263+
void circleTest(void)
264+
{
265+
// Let's draw some circles that fit on the device
266+
myOLED.circle(width / 4, height / 2, height / 3);
192267
193-
myOLED.circle(4, height/2, height/3);
268+
myOLED.circleFill(width - width / 4, height / 2, height / 3);
194269
195-
myOLED.circleFill(width - width/2 , height/2, height/4);
270+
myOLED.circle(4, height / 2, height / 3);
196271
272+
myOLED.circleFill(width - width / 2, height / 2, height / 4);
197273
}
198-
199-
```
274+
```

0 commit comments

Comments
 (0)