From b980268ba7fd1fb5083546ca3f0b20f3390fe128 Mon Sep 17 00:00:00 2001 From: ubkp <118854183+ubkp@users.noreply.github.com> Date: Sun, 16 Jul 2023 08:07:29 -0300 Subject: [PATCH] [example] Core Input Gestures for Web (#3172) * [example] Core Input Gestures for Web * Fix Doubletap for web * Changes TAP_TIMEOUT and rgGetCurrentTime to seconds --- examples/Makefile | 1 + examples/Makefile.Web | 26 +- examples/core/core_input_gestures_web.c | 330 ++++++++++++++++++++++ examples/core/core_input_gestures_web.png | Bin 0 -> 8937 bytes src/rcore.c | 6 + src/rgestures.h | 16 +- 6 files changed, 360 insertions(+), 19 deletions(-) create mode 100644 examples/core/core_input_gestures_web.c create mode 100644 examples/core/core_input_gestures_web.png diff --git a/examples/Makefile b/examples/Makefile index 15edf1b36..1a4d5f06c 100644 --- a/examples/Makefile +++ b/examples/Makefile @@ -405,6 +405,7 @@ CORE = \ core/core_input_gamepad \ core/core_input_multitouch \ core/core_input_gestures \ + core/core_input_gestures_web \ core/core_2d_camera \ core/core_2d_camera_platformer \ core/core_2d_camera_mouse_zoom \ diff --git a/examples/Makefile.Web b/examples/Makefile.Web index 499eb3eaa..e65351e07 100644 --- a/examples/Makefile.Web +++ b/examples/Makefile.Web @@ -386,6 +386,7 @@ CORE = \ core/core_input_gamepad \ core/core_input_multitouch \ core/core_input_gestures \ + core/core_input_gestures_web \ core/core_2d_camera \ core/core_2d_camera_platformer \ core/core_2d_camera_mouse_zoom \ @@ -558,12 +559,15 @@ core/core_input_multitouch: core/core_input_multitouch.c core/core_input_gestures: core/core_input_gestures.c $(CC) -o $@$(EXT) $< $(CFLAGS) $(INCLUDE_PATHS) $(LDFLAGS) $(LDLIBS) -D$(PLATFORM) +core/core_input_gestures_web: core/core_input_gestures_web.c + $(CC) -o $@$(EXT) $< $(CFLAGS) $(INCLUDE_PATHS) $(LDFLAGS) $(LDLIBS) -D$(PLATFORM) + core/core_2d_camera: core/core_2d_camera.c $(CC) -o $@$(EXT) $< $(CFLAGS) $(INCLUDE_PATHS) $(LDFLAGS) $(LDLIBS) -D$(PLATFORM) core/core_2d_camera_platformer: core/core_2d_camera_platformer.c $(CC) -o $@$(EXT) $< $(CFLAGS) $(INCLUDE_PATHS) $(LDFLAGS) $(LDLIBS) -D$(PLATFORM) - + core/core_2d_camera_mouse_zoom: core/core_2d_camera_mouse_zoom.c $(CC) -o $@$(EXT) $< $(CFLAGS) $(INCLUDE_PATHS) $(LDFLAGS) $(LDLIBS) -D$(PLATFORM) @@ -618,10 +622,10 @@ core/core_custom_frame_control: core/core_custom_frame_control.c core/core_window_should_close: core/core_window_should_close.c $(CC) -o $@$(EXT) $< $(CFLAGS) $(INCLUDE_PATHS) $(LDFLAGS) $(LDLIBS) -D$(PLATFORM) - + # NOTE: To use multi-threading raylib must be compiled with multi-theading support (-s USE_PTHREADS=1) # WARNING: For security reasons multi-threading is not supported on browsers, it requires cross-origin isolation (Oct.2021) -# WARNING: It requires raylib to be compiled using -pthread, so atomic operations and thread-local data (if any) +# WARNING: It requires raylib to be compiled using -pthread, so atomic operations and thread-local data (if any) # in its source were transformed to non-atomic operations and non-thread-local data core/core_loading_thread: core/core_loading_thread.c $(CC) -o $@$(EXT) $< $(CFLAGS) $(INCLUDE_PATHS) $(LDFLAGS) $(LDLIBS) -D$(PLATFORM) -s USE_PTHREADS=1 @@ -745,7 +749,7 @@ textures/textures_sprite_explosion: textures/textures_sprite_explosion.c $(CC) -o $@$(EXT) $< $(CFLAGS) $(INCLUDE_PATHS) $(LDFLAGS) $(LDLIBS) -D$(PLATFORM) \ --preload-file textures/resources/explosion.png@resources/explosion.png \ --preload-file textures/resources/boom.wav@resources/boom.wav - + textures/textures_textured_curve: textures/textures_textured_curve.c $(CC) -o $@$(EXT) $< $(CFLAGS) $(INCLUDE_PATHS) $(LDFLAGS) $(LDLIBS) -D$(PLATFORM) \ --preload-file textures/resources/road.png@resources/road.png @@ -857,8 +861,8 @@ models/models_cubicmap: models/models_cubicmap.c models/models_draw_cube_texture: models/models_draw_cube_texture.c $(CC) -o $@$(EXT) $< $(CFLAGS) $(INCLUDE_PATHS) $(LDFLAGS) $(LDLIBS) -D$(PLATFORM) \ - --preload-file models/resources/cubicmap_atlas.png@resources/cubicmap_atlas.png - + --preload-file models/resources/cubicmap_atlas.png@resources/cubicmap_atlas.png + models/models_first_person_maze: models/models_first_person_maze.c $(CC) -o $@$(EXT) $< $(CFLAGS) $(INCLUDE_PATHS) $(LDFLAGS) $(LDLIBS) -D$(PLATFORM) \ --preload-file models/resources/cubicmap.png@resources/cubicmap.png \ @@ -889,7 +893,7 @@ models/models_loading_vox: models/models_loading_vox.c models/models_loading_gltf: models/models_loading_gltf.c $(CC) -o $@$(EXT) $< $(CFLAGS) $(INCLUDE_PATHS) $(LDFLAGS) $(LDLIBS) -D$(PLATFORM) -s TOTAL_MEMORY=67108864 \ --preload-file models/resources/models/gltf/robot.glb@resources/models/gltf/robot.glb - + models/models_loading_m3d: models/models_loading_m3d.c $(CC) -o $@$(EXT) $< $(CFLAGS) $(INCLUDE_PATHS) $(LDFLAGS) $(LDLIBS) -D$(PLATFORM) -s TOTAL_MEMORY=67108864 \ --preload-file models/resources/models/m3d/cesium_man.m3d@resources/models/m3d/cesium_man.m3d @@ -1010,16 +1014,16 @@ shaders/shaders_texture_outline: shaders/shaders_texture_outline.c $(CC) -o $@$(EXT) $< $(CFLAGS) $(INCLUDE_PATHS) $(LDFLAGS) $(LDLIBS) -D$(PLATFORM) \ --preload-file shaders/resources/shaders/glsl100/outline.fs@resources/shaders/glsl100/outline.fs \ --preload-file shaders/resources/fudesumi.png@resources/fudesumi.png - + shaders/shaders_write_depth: shaders/shaders_write_depth.c $(CC) -o $@$(EXT) $< $(CFLAGS) $(INCLUDE_PATHS) $(LDFLAGS) $(LDLIBS) -D$(PLATFORM) \ --preload-file shaders/resources/shaders/glsl100/write_depth.fs@resources/shaders/glsl100/write_depth.fs - + shaders/shaders_hybrid_render: shaders/shaders_hybrid_render.c $(CC) -o $@$(EXT) $< $(CFLAGS) $(INCLUDE_PATHS) $(LDFLAGS) $(LDLIBS) -D$(PLATFORM) \ --preload-file shaders/resources/shaders/glsl100/hybrid_raymarch.fs@resources/shaders/glsl100/hybrid_raymarch.fs \ --preload-file shaders/resources/shaders/glsl100/hybrid_raster.fs@resources/shaders/glsl100/hybrid_raster.fs - + # Compile AUDIO examples audio/audio_module_playing: audio/audio_module_playing.c $(CC) -o $@$(EXT) $< $(CFLAGS) $(INCLUDE_PATHS) $(LDFLAGS) $(LDLIBS) -D$(PLATFORM) \ @@ -1040,7 +1044,7 @@ audio/audio_sound_loading: audio/audio_sound_loading.c audio/audio_stream_effects: audio/audio_stream_effects.c $(CC) -o $@$(EXT) $< $(CFLAGS) $(INCLUDE_PATHS) $(LDFLAGS) $(LDLIBS) -D$(PLATFORM) -s TOTAL_MEMORY=67108864 \ --preload-file audio/resources/country.mp3@resources/country.mp3 - + audio/audio_mixed_processor: audio/audio_mixed_processor.c $(CC) -o $@$(EXT) $< $(CFLAGS) $(INCLUDE_PATHS) $(LDFLAGS) $(LDLIBS) -D$(PLATFORM) -s TOTAL_MEMORY=67108864 \ --preload-file audio/resources/country.mp3@resources/country.mp3 \ diff --git a/examples/core/core_input_gestures_web.c b/examples/core/core_input_gestures_web.c new file mode 100644 index 000000000..0ee3d1c5e --- /dev/null +++ b/examples/core/core_input_gestures_web.c @@ -0,0 +1,330 @@ +/******************************************************************************************* +* +* raylib [core] example - Input Gestures for Web +* +* 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 ubkp (@ubkp) +* +********************************************************************************************/ + +#include "raylib.h" +#include "math.h" // Required for the protractor angle graphic drawing + +#if defined(PLATFORM_WEB) + #include // Required for the Web/HTML5 +#endif + +//-------------------------------------------------------------------------------------- +// Global definitions and declarations +//-------------------------------------------------------------------------------------- + +// Common variables definitions +//-------------------------------------------------------------------------------------- +int screenWidth = 800; +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; + } +} +Color gestureColor = BLACK; +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 +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--; + TextCopy( gestureLog[gestureLogIndex], GetGestureName(currentGesture) ); // Copy the gesture respective name to the gesture log array + } + + // 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 + //-------------------------------------------------------------------------------------- + Vector2 touchPosition[touchCount]; + 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 + //-------------------------------------------------------------------------------------- + #if defined( PLATFORM_WEB ) + const int canvasWidth = EM_ASM_INT( return document.getElementById('canvas').getBoundingClientRect().width; ); // Using Emscripten EM_ASM_INT macro, get the page canvas width + if (canvasWidth > 400) + { + screenWidth = canvasWidth; + } + else + { + screenWidth = 400; // Set a minimum width for the screen + } + #endif + + 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; +} diff --git a/examples/core/core_input_gestures_web.png b/examples/core/core_input_gestures_web.png new file mode 100644 index 0000000000000000000000000000000000000000..dd604e84b9c831d32229a8bdefc81d4ae161189a GIT binary patch literal 8937 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 literal 0 HcmV?d00001 diff --git a/src/rcore.c b/src/rcore.c index 6fd7a4fe1..45495bb15 100644 --- a/src/rcore.c +++ b/src/rcore.c @@ -5593,8 +5593,14 @@ static void MouseButtonCallback(GLFWwindow *window, int button, int action, int gestureEvent.position[0].y /= (float)GetScreenHeight(); // Gesture data is sent to gestures-system for processing +#if defined(PLATFORM_WEB) + // Prevent calling ProcessGestureEvent() when Emscripten is present and there's a touch gesture, so EmscriptenTouchCallback() can handle it itself + if (GetMouseX() != 0 || GetMouseY() != 0) ProcessGestureEvent(gestureEvent); +#else ProcessGestureEvent(gestureEvent); #endif + +#endif } // GLFW3 Cursor Position Callback, runs on mouse move diff --git a/src/rgestures.h b/src/rgestures.h index 749f440aa..78dde76ee 100644 --- a/src/rgestures.h +++ b/src/rgestures.h @@ -127,7 +127,7 @@ void SetGesturesEnabled(unsigned int flags); // Enable a set of gestu bool IsGestureDetected(int gesture); // Check if a gesture have been detected int GetGestureDetected(void); // Get latest detected gesture -float GetGestureHoldDuration(void); // Get gesture hold time in milliseconds +float GetGestureHoldDuration(void); // Get gesture hold time in seconds Vector2 GetGestureDragVector(void); // Get gesture drag vector float GetGestureDragAngle(void); // Get gesture drag angle Vector2 GetGesturePinchVector(void); // Get gesture pinch delta @@ -181,8 +181,8 @@ float GetGesturePinchAngle(void); // Get gesture pinch ang #define FORCE_TO_SWIPE 0.0005f // Swipe force, measured in normalized screen units/time #define MINIMUM_DRAG 0.015f // Drag minimum force, measured in normalized screen units (0.0f to 1.0f) #define MINIMUM_PINCH 0.005f // Pinch minimum force, measured in normalized screen units (0.0f to 1.0f) -#define TAP_TIMEOUT 300 // Tap minimum time, measured in milliseconds -#define PINCH_TIMEOUT 300 // Pinch minimum time, measured in milliseconds +#define TAP_TIMEOUT 0.3f // Tap minimum time, measured in seconds +#define PINCH_TIMEOUT 0.3f // Pinch minimum time, measured in seconds #define DOUBLETAP_RANGE 0.03f // DoubleTap range, measured in normalized screen units (0.0f to 1.0f) //---------------------------------------------------------------------------------- @@ -209,7 +209,7 @@ typedef struct { } Touch; struct { bool resetRequired; // HOLD reset to get first touch point again - double timeDuration; // HOLD duration in milliseconds + double timeDuration; // HOLD duration in seconds } Hold; struct { Vector2 vector; // DRAG vector (between initial and current position) @@ -522,7 +522,7 @@ static float rgVector2Distance(Vector2 v1, Vector2 v2) return result; } -// Time measure returned are milliseconds +// Time measure returned are seconds static double rgGetCurrentTime(void) { double time = 0; @@ -536,7 +536,7 @@ static double rgGetCurrentTime(void) QueryPerformanceFrequency(&clockFrequency); // BE CAREFUL: Costly operation! QueryPerformanceCounter(¤tTime); - time = (double)currentTime/clockFrequency*1000.0f; // Time in miliseconds + time = (double)currentTime/clockFrequency; // Time in seconds #endif #if defined(__linux__) @@ -545,7 +545,7 @@ static double rgGetCurrentTime(void) clock_gettime(CLOCK_MONOTONIC, &now); unsigned long long int nowTime = (unsigned long long int)now.tv_sec*1000000000LLU + (unsigned long long int)now.tv_nsec; // Time in nanoseconds - time = ((double)nowTime/1000000.0); // Time in miliseconds + time = ((double)nowTime*1e-9); // Time in seconds #endif #if defined(__APPLE__) @@ -561,7 +561,7 @@ static double rgGetCurrentTime(void) mach_port_deallocate(mach_task_self(), cclock); unsigned long long int nowTime = (unsigned long long int)now.tv_sec*1000000000LLU + (unsigned long long int)now.tv_nsec; // Time in nanoseconds - time = ((double)nowTime/1000000.0); // Time in miliseconds + time = ((double)nowTime*1e-9); // Time in seconds #endif #endif