RobotPictureBrowser

Want to use your own images? This is how.

Picture Browser

You can make your own gallery/picture show with help of the Robot. Put some pictures in the SD card, start the sketch, and you can see them showing up on the LCD. Use left and right button on the D-pad to go the previous or next image. Press up or down to enter the "tilt navigation" mode.

Hardware Required

  • Arduino Robot

  • Some pictures on the SD card

Instruction

  1. Upload the example. You can keep the USB plugged in for power.

  2. After the starting screen, you will see some instructions about the sketch.

  3. A picture from the gallery will show up on the screen.

  4. Press left/right/middle to navigate through the pictures

  5. Press up/down to change the mode, you'll see the current mode showing up on top of the screen.

  6. In tilt control mode, rotate your robot to navigate the gallery.

  7. If you want to add your own pictures, make them 128*160, 24-bit bmp. Name them as "PicN.bmp" (where N is a number 1-9) and copy them onto the sd card.

  8. The program only supports 10 pictures, Pic0.bmp to Pic9.bmp. Want to add more? Improve the program yourself!

Try it out

Browse pictures with the left and right buttons
Browse pictures with the left and right buttons

You can change the picture navigation mode by pressing the down button and tilt the robot to check the next picture.

Browse pictures tilting the robot
Browse pictures tilting the robot

Code

1/* Picture Browser
2
3 You can make your own gallery/picture show with the
4
5 Robot. Put some pictures on the SD card, start the
6
7 sketch, they will display on the screen.
8
9 Use the left/right buttons to navigate through the
10
11 previous and next images.
12
13 Press up or down to enter a mode where you change
14
15 the pictures by rotating the robot.
16
17 You can add your own pictures onto the SD card, and
18
19 view them in the Robot's gallery!
20
21 Pictures must be uncompressed BMP, 24-bit color depth,
22
23 160 pixels wide, and 128 pixels tall.
24
25 They should be named as "picN.bmp". Replace 'N' with a
26
27 number between 0 and 9.
28
29 The current code only supports 10 pictures. How would you
30
31 improve it to handle more?
32
33 Circuit:
34
35 * Arduino Robot
36
37 created 1 May 2013
38
39 by X. Yang
40
41 modified 12 May 2013
42
43 by D. Cuartielles
44
45 This example is in the public domain
46
47 */
48
49#include <ArduinoRobot.h> // include the robot library
50#include <Wire.h>
51
52const int NUM_PICS = 4; //Total number of pictures in Gallery
53
54// name the modes
55
56const int CONTROL_MODE_KEY = 0;
57
58const int CONTROL_MODE_COMPASS = 1;
59
60char buffer[] = "pic1.bmp"; // current file name
61int i = 1; // Current gallery sequence counter
62int mode = 0; // Current mode
63
64// text to display on screen
65char modeNames[][9] = { "keyboard", "tilt " };
66
67void setup() {
68
69 // initialize the Robot, SD card, display, and speaker
70
71 Robot.beginSD();
72
73 Robot.beginTFT();
74
75 Robot.begin();
76
77 // draw "lg0.bmp" and "lg1.bmp" on the screen
78
79 Robot.displayLogos();
80
81 // draw init3.bmp from the SD card on the screen
82
83 Robot.drawBMP("init3.bmp", 0, 0);
84
85 // display instructions
86
87 Robot.stroke(0, 0, 0);
88
89 Robot.text("The gallery\n\n has 2 modes, in\n keyboard mode, L/R\n key for switching\n pictures, U/D key\n for changing modes", 5, 5);
90
91 delay(6000);
92
93 Robot.clearScreen();
94
95 Robot.drawBMP("pb.bmp", 0, 0);
96
97 Robot.text("In tilt mode,\n quickly tilt the\n robot to switch\n pictures", 5, 5);
98
99 delay(4000);
100}
101
102void loop() {
103
104 buffer[3] = '0' + i; // change filename of the img to be displayed
105
106 Robot.drawBMP(buffer, 0, 0); // draw the file on the screen
107
108 // change control modes
109
110 switch (mode) {
111
112 case CONTROL_MODE_COMPASS:
113
114 compassControl(3);
115
116 break;
117
118 case CONTROL_MODE_KEY:
119
120 keyboardControl();
121
122 break;
123
124 }
125
126 delay(200);
127}
128
129void keyboardControl() {
130
131 //Use buttons to control the gallery
132
133 while (true) {
134
135 int keyPressed = Robot.keyboardRead(); // read the button values
136
137 switch (keyPressed) {
138
139 case BUTTON_LEFT: // display previous picture
140
141 if (--i < 1) {
142
143 i = NUM_PICS;
144
145 }
146
147 return;
148
149 case BUTTON_MIDDLE: // do nothing
150
151 case BUTTON_RIGHT: // display next picture
152
153 if (++i > NUM_PICS) {
154
155 i = 1;
156
157 }
158
159 return;
160
161 case BUTTON_UP: // change mode
162
163 changeMode(-1);
164
165 return;
166
167 case BUTTON_DOWN: // change mode
168
169 changeMode(1);
170
171 return;
172
173 }
174
175 }
176}
177
178// if controlling by the compass
179void compassControl(int change) {
180
181 // Rotate the robot to change the pictures
182
183 while (true) {
184
185 // read the value of the compass
186
187 int oldV = Robot.compassRead();
188
189 //get the change of angle
190
191 int diff = Robot.compassRead() - oldV;
192
193 if (diff > 180) {
194
195 diff -= 360;
196
197 } else if (diff < -180) {
198
199 diff += 360;
200
201 }
202
203 if (abs(diff) > change) {
204
205 if (++i > NUM_PICS) {
206
207 i = 1;
208
209 }
210
211 return;
212
213 }
214
215 // change modes, if buttons are pressed
216
217 int keyPressed = Robot.keyboardRead();
218
219 switch (keyPressed) {
220
221 case BUTTON_UP:
222
223 changeMode(-1);
224
225 return;
226
227 case BUTTON_DOWN:
228
229 changeMode(1);
230
231 return;
232
233 }
234
235 delay(10);
236
237 }
238}
239
240// Change the control mode and display it on the LCD
241void changeMode(int changeDir) {
242
243 // alternate modes
244
245 mode += changeDir;
246
247 if (mode < 0) {
248
249 mode = 1;
250
251 } else if (mode > 1) {
252
253 mode = 0;
254
255 }
256
257 // display the mode on screen
258
259 Robot.fill(255, 255, 255);
260
261 Robot.stroke(255, 255, 255);
262
263 Robot.rect(0, 0, 128, 12);
264
265 Robot.stroke(0, 0, 0);
266
267 Robot.text("Control:", 2, 2);
268
269 Robot.text(modeNames[mode], 52, 2);
270
271 delay(1000);
272}

Contribute to Arduino

Join the community and suggest improvements to this article via GitHub. Make sure to read out contribution policy before making your pull request.

Missing something?

Check out our store and get what you need to follow this tutorial.

Suggest Changes

The content on docs.arduino.cc is facilitated through a public GitHub repository. You can read more on how to contribute in the contribution policy.