-
-
Notifications
You must be signed in to change notification settings - Fork 2.5k
/
Copy pathcore_input_gestures_web.c
332 lines (295 loc) · 16.8 KB
/
core_input_gestures_web.c
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
/*******************************************************************************************
*
* raylib [core] example - Input Gestures for Web
*
* Example complexity rating: [★★☆☆] 2/4
*
* Example originally created with raylib 4.6-dev, last time updated with raylib 4.6-dev
*
* Example contributed by ubkp (@ubkp) and reviewed by Ramon Santamaria (@raysan5)
*
* Example licensed under an unmodified zlib/libpng license, which is an OSI-certified,
* BSD-like license that allows static linking with closed source software
*
* Copyright (c) 2023-2025 ubkp (@ubkp)
*
********************************************************************************************/
#include "raylib.h"
#include "math.h" // Required for the protractor angle graphic drawing
#if defined(PLATFORM_WEB)
#include <emscripten/emscripten.h> // Required for the Web/HTML5
#endif
//--------------------------------------------------------------------------------------
// Global definitions and declarations
//--------------------------------------------------------------------------------------
// Common variables definitions
//--------------------------------------------------------------------------------------
int screenWidth = 800; // Update depending on web canvas
const int screenHeight = 450;
Vector2 messagePosition = { 160, 7 };
// Last gesture variables definitions
//--------------------------------------------------------------------------------------
int lastGesture = 0;
Vector2 lastGesturePosition = { 165, 130 };
// Gesture log variables definitions and functions declarations
//--------------------------------------------------------------------------------------
#define GESTURE_LOG_SIZE 20
char gestureLog[GESTURE_LOG_SIZE][12] = { "" }; // The gesture log uses an array (as an inverted circular queue) to store the performed gestures
int gestureLogIndex = GESTURE_LOG_SIZE; // The index for the inverted circular queue (moving from last to first direction, then looping around)
int previousGesture = 0;
char const *GetGestureName(int i)
{
switch (i) {
case 0: return "None"; break;
case 1: return "Tap"; break;
case 2: return "Double Tap"; break;
case 4: return "Hold"; break;
case 8: return "Drag"; break;
case 16: return "Swipe Right"; break;
case 32: return "Swipe Left"; break;
case 64: return "Swipe Up"; break;
case 128: return "Swipe Down"; break;
case 256: return "Pinch In"; break;
case 512: return "Pinch Out"; break;
default: return "Unknown"; break;
}
}
Color GetGestureColor(int i)
{
switch (i) {
case 0: return BLACK; break;
case 1: return BLUE; break;
case 2: return SKYBLUE; break;
case 4: return BLACK; break;
case 8: return LIME; break;
case 16: return RED; break;
case 32: return RED; break;
case 64: return RED; break;
case 128: return RED; break;
case 256: return VIOLET; break;
case 512: return ORANGE; break;
default: return BLACK; break;
}
}
int logMode = 1; // Log mode values: 0 shows repeated events; 1 hides repeated events; 2 shows repeated events but hide hold events; 3 hides repeated events and hide hold events
Color gestureColor = { 0, 0, 0, 255 };
Rectangle logButton1 = { 53, 7, 48, 26 };
Rectangle logButton2 = { 108, 7, 36, 26 };
Vector2 gestureLogPosition = { 10, 10 };
// Protractor variables definitions
//--------------------------------------------------------------------------------------
float angleLength = 90.0f;
float currentAngleDegrees = 0.0f;
Vector2 finalVector = { 0.0f, 0.0f };
char currentAngleStr[7] = "";
Vector2 protractorPosition = { 266.0f, 315.0f };
// Update
//--------------------------------------------------------------------------------------
void Update(void)
{
// Handle common
//--------------------------------------------------------------------------------------
int i, ii; // Iterators that will be reused by all for loops
const int currentGesture = GetGestureDetected();
const float currentDragDegrees = GetGestureDragAngle();
const float currentPitchDegrees = GetGesturePinchAngle();
const int touchCount = GetTouchPointCount();
// Handle last gesture
//--------------------------------------------------------------------------------------
if ((currentGesture != 0) && (currentGesture != 4) && (currentGesture != previousGesture)) lastGesture = currentGesture; // Filter the meaningful gestures (1, 2, 8 to 512) for the display
// Handle gesture log
//--------------------------------------------------------------------------------------
if (IsMouseButtonReleased(MOUSE_BUTTON_LEFT))
{
if (CheckCollisionPointRec(GetMousePosition(), logButton1))
{
switch (logMode)
{
case 3: logMode=2; break;
case 2: logMode=3; break;
case 1: logMode=0; break;
default: logMode=1; break;
}
}
else if (CheckCollisionPointRec(GetMousePosition(), logButton2))
{
switch (logMode)
{
case 3: logMode=1; break;
case 2: logMode=0; break;
case 1: logMode=3; break;
default: logMode=2; break;
}
}
}
int fillLog = 0; // Gate variable to be used to allow or not the gesture log to be filled
if (currentGesture !=0)
{
if (logMode == 3) // 3 hides repeated events and hide hold events
{
if (((currentGesture != 4) && (currentGesture != previousGesture)) || (currentGesture < 3)) fillLog = 1;
}
else if (logMode == 2) // 2 shows repeated events but hide hold events
{
if (currentGesture != 4) fillLog = 1;
}
else if (logMode == 1) // 1 hides repeated events
{
if (currentGesture != previousGesture) fillLog = 1;
}
else // 0 shows repeated events
{
fillLog = 1;
}
}
if (fillLog) // If one of the conditions from logMode was met, fill the gesture log
{
previousGesture = currentGesture;
gestureColor = GetGestureColor(currentGesture);
if (gestureLogIndex <= 0) gestureLogIndex = GESTURE_LOG_SIZE;
gestureLogIndex--;
// Copy the gesture respective name to the gesture log array
TextCopy(gestureLog[gestureLogIndex], GetGestureName(currentGesture));
}
// Handle protractor
//--------------------------------------------------------------------------------------
if (currentGesture > 255) // aka Pinch In and Pinch Out
{
currentAngleDegrees = currentPitchDegrees;
}
else if (currentGesture > 15) // aka Swipe Right, Swipe Left, Swipe Up and Swipe Down
{
currentAngleDegrees = currentDragDegrees;
}
else if (currentGesture > 0) // aka Tap, Doubletap, Hold and Grab
{
currentAngleDegrees = 0.0f;
}
float currentAngleRadians = ((currentAngleDegrees +90.0f)*PI/180); // Convert the current angle to Radians
finalVector = (Vector2){ (angleLength*sinf(currentAngleRadians)) + protractorPosition.x, (angleLength*cosf(currentAngleRadians)) + protractorPosition.y }; // Calculate the final vector for display
// Handle touch and mouse pointer points
//--------------------------------------------------------------------------------------
#define MAX_TOUCH_COUNT 32
Vector2 touchPosition[MAX_TOUCH_COUNT] = { 0 };
Vector2 mousePosition = {0, 0};
if (currentGesture != GESTURE_NONE)
{
if (touchCount != 0)
{
for (i = 0; i < touchCount; i++) touchPosition[i] = GetTouchPosition(i); // Fill the touch positions
}
else mousePosition = GetMousePosition();
}
// Draw
//--------------------------------------------------------------------------------------
BeginDrawing();
ClearBackground(RAYWHITE);
// Draw common
//--------------------------------------------------------------------------------------
DrawText("*", messagePosition.x + 5, messagePosition.y + 5, 10, BLACK);
DrawText("Example optimized for Web/HTML5\non Smartphones with Touch Screen.", messagePosition.x + 15, messagePosition.y + 5, 10, BLACK);
DrawText("*", messagePosition.x + 5, messagePosition.y + 35, 10, BLACK);
DrawText("While running on Desktop Web Browsers,\ninspect and turn on Touch Emulation.", messagePosition.x + 15, messagePosition.y + 35, 10, BLACK);
// Draw last gesture
//--------------------------------------------------------------------------------------
DrawText("Last gesture", lastGesturePosition.x + 33, lastGesturePosition.y - 47, 20, BLACK);
DrawText("Swipe Tap Pinch Touch", lastGesturePosition.x + 17, lastGesturePosition.y - 18, 10, BLACK);
DrawRectangle(lastGesturePosition.x + 20, lastGesturePosition.y, 20, 20, lastGesture == GESTURE_SWIPE_UP ? RED : LIGHTGRAY);
DrawRectangle(lastGesturePosition.x, lastGesturePosition.y + 20, 20, 20, lastGesture == GESTURE_SWIPE_LEFT ? RED : LIGHTGRAY);
DrawRectangle(lastGesturePosition.x + 40, lastGesturePosition.y + 20, 20, 20, lastGesture == GESTURE_SWIPE_RIGHT ? RED : LIGHTGRAY);
DrawRectangle(lastGesturePosition.x + 20, lastGesturePosition.y + 40, 20, 20, lastGesture == GESTURE_SWIPE_DOWN ? RED : LIGHTGRAY);
DrawCircle(lastGesturePosition.x + 80, lastGesturePosition.y + 16, 10, lastGesture == GESTURE_TAP ? BLUE : LIGHTGRAY);
DrawRing( (Vector2){lastGesturePosition.x + 103, lastGesturePosition.y + 16}, 6.0f, 11.0f, 0.0f, 360.0f, 0, lastGesture == GESTURE_DRAG ? LIME : LIGHTGRAY);
DrawCircle(lastGesturePosition.x + 80, lastGesturePosition.y + 43, 10, lastGesture == GESTURE_DOUBLETAP ? SKYBLUE : LIGHTGRAY);
DrawCircle(lastGesturePosition.x + 103, lastGesturePosition.y + 43, 10, lastGesture == GESTURE_DOUBLETAP ? SKYBLUE : LIGHTGRAY);
DrawTriangle((Vector2){ lastGesturePosition.x + 122, lastGesturePosition.y + 16 }, (Vector2){ lastGesturePosition.x + 137, lastGesturePosition.y + 26 }, (Vector2){ lastGesturePosition.x + 137, lastGesturePosition.y + 6 }, lastGesture == GESTURE_PINCH_OUT? ORANGE : LIGHTGRAY);
DrawTriangle((Vector2){ lastGesturePosition.x + 147, lastGesturePosition.y + 6 }, (Vector2){ lastGesturePosition.x + 147, lastGesturePosition.y + 26 }, (Vector2){ lastGesturePosition.x + 162, lastGesturePosition.y + 16 }, lastGesture == GESTURE_PINCH_OUT? ORANGE : LIGHTGRAY);
DrawTriangle((Vector2){ lastGesturePosition.x + 125, lastGesturePosition.y + 33 }, (Vector2){ lastGesturePosition.x + 125, lastGesturePosition.y + 53 }, (Vector2){ lastGesturePosition.x + 140, lastGesturePosition.y + 43 }, lastGesture == GESTURE_PINCH_IN? VIOLET : LIGHTGRAY);
DrawTriangle((Vector2){ lastGesturePosition.x + 144, lastGesturePosition.y + 43 }, (Vector2){ lastGesturePosition.x + 159, lastGesturePosition.y + 53 }, (Vector2){ lastGesturePosition.x + 159, lastGesturePosition.y + 33 }, lastGesture == GESTURE_PINCH_IN? VIOLET : LIGHTGRAY);
for (i = 0; i < 4; i++) DrawCircle(lastGesturePosition.x + 180, lastGesturePosition.y + 7 + i*15, 5, touchCount <= i? LIGHTGRAY : gestureColor);
// Draw gesture log
//--------------------------------------------------------------------------------------
DrawText("Log", gestureLogPosition.x, gestureLogPosition.y, 20, BLACK);
// Loop in both directions to print the gesture log array in the inverted order (and looping around if the index started somewhere in the middle)
for (i = 0, ii = gestureLogIndex; i < GESTURE_LOG_SIZE; i++, ii = (ii + 1) % GESTURE_LOG_SIZE) DrawText(gestureLog[ii], gestureLogPosition.x, gestureLogPosition.y + 410 - i*20, 20, (i == 0 ? gestureColor : LIGHTGRAY));
Color logButton1Color, logButton2Color;
switch (logMode)
{
case 3: logButton1Color=MAROON; logButton2Color=MAROON; break;
case 2: logButton1Color=GRAY; logButton2Color=MAROON; break;
case 1: logButton1Color=MAROON; logButton2Color=GRAY; break;
default: logButton1Color=GRAY; logButton2Color=GRAY; break;
}
DrawRectangleRec(logButton1, logButton1Color);
DrawText("Hide", logButton1.x + 7, logButton1.y + 3, 10, WHITE);
DrawText("Repeat", logButton1.x + 7, logButton1.y + 13, 10, WHITE);
DrawRectangleRec(logButton2, logButton2Color);
DrawText("Hide", logButton1.x + 62, logButton1.y + 3, 10, WHITE);
DrawText("Hold", logButton1.x + 62, logButton1.y + 13, 10, WHITE);
// Draw protractor
//--------------------------------------------------------------------------------------
DrawText("Angle", protractorPosition.x + 55, protractorPosition.y + 76, 10, BLACK);
const char *angleString = TextFormat("%f", currentAngleDegrees);
const int angleStringDot = TextFindIndex(angleString, ".");
const char *angleStringTrim = TextSubtext(angleString, 0, angleStringDot + 3);
DrawText( angleStringTrim, protractorPosition.x + 55, protractorPosition.y + 92, 20, gestureColor);
DrawCircle(protractorPosition.x, protractorPosition.y, 80.0f, WHITE);
DrawLineEx((Vector2){ protractorPosition.x - 90, protractorPosition.y }, (Vector2){ protractorPosition.x + 90, protractorPosition.y }, 3.0f, LIGHTGRAY);
DrawLineEx((Vector2){ protractorPosition.x, protractorPosition.y - 90 }, (Vector2){ protractorPosition.x, protractorPosition.y + 90 }, 3.0f, LIGHTGRAY);
DrawLineEx((Vector2){ protractorPosition.x - 80, protractorPosition.y - 45 }, (Vector2){ protractorPosition.x + 80, protractorPosition.y + 45 }, 3.0f, GREEN);
DrawLineEx((Vector2){ protractorPosition.x - 80, protractorPosition.y + 45 }, (Vector2){ protractorPosition.x + 80, protractorPosition.y - 45 }, 3.0f, GREEN);
DrawText("0", protractorPosition.x + 96, protractorPosition.y - 9, 20, BLACK);
DrawText("30", protractorPosition.x + 74, protractorPosition.y - 68, 20, BLACK);
DrawText("90", protractorPosition.x - 11, protractorPosition.y - 110, 20, BLACK);
DrawText("150", protractorPosition.x - 100, protractorPosition.y - 68, 20, BLACK);
DrawText("180", protractorPosition.x - 124, protractorPosition.y - 9, 20, BLACK);
DrawText("210", protractorPosition.x - 100, protractorPosition.y + 50, 20, BLACK);
DrawText("270", protractorPosition.x - 18, protractorPosition.y + 92, 20, BLACK);
DrawText("330", protractorPosition.x + 72, protractorPosition.y + 50, 20, BLACK);
if (currentAngleDegrees != 0.0f) DrawLineEx(protractorPosition, finalVector, 3.0f, gestureColor);
// Draw touch and mouse pointer points
//--------------------------------------------------------------------------------------
if (currentGesture != GESTURE_NONE)
{
if ( touchCount != 0 )
{
for (i = 0; i < touchCount; i++)
{
DrawCircleV(touchPosition[i], 50.0f, Fade(gestureColor, 0.5f));
DrawCircleV(touchPosition[i], 5.0f, gestureColor);
}
if (touchCount == 2) DrawLineEx(touchPosition[0], touchPosition[1], ((currentGesture == 512)? 8 : 12), gestureColor);
}
else
{
DrawCircleV(mousePosition, 35.0f, Fade(gestureColor, 0.5f));
DrawCircleV(mousePosition, 5.0f, gestureColor);
}
}
EndDrawing();
//--------------------------------------------------------------------------------------
}
//------------------------------------------------------------------------------------
// Program main entry point
//------------------------------------------------------------------------------------
int main(void)
{
// Initialization
//--------------------------------------------------------------------------------------
InitWindow(screenWidth, screenHeight, "raylib [core] example - input gestures web");
//--------------------------------------------------------------------------------------
// Main game loop
//--------------------------------------------------------------------------------------
#if defined(PLATFORM_WEB)
emscripten_set_main_loop(Update, 0, 1);
#else
SetTargetFPS(60);
while (!WindowShouldClose()) Update(); // Detect window close button or ESC key
#endif
//--------------------------------------------------------------------------------------
// De-Initialization
//--------------------------------------------------------------------------------------
CloseWindow(); // Close window and OpenGL context
//--------------------------------------------------------------------------------------
return 0;
}