Skip to content

nicobell/react-leap-flipbook

Repository files navigation

Leap motion React FlipBook

L'applicazione è sviluppata in React perchè l'unica libreria funzionante che ho trovato per realizzare un libro digitale (react-pageflip), è supportata da React.
La trovi qui https://nodlik.github.io/react-pageflip/

Software Leap da installare

Installa i segunti software dal sito LeapMotion cercando il software per il Leap Motion Controller 2: https://leap2.ultraleap.com/downloads/leap-motion-controller-2/

  • TouchFree v2.6.1 : software scaricabile dal sito di LeapMotion per effettuare la configurazione del dispositivo (posizione, distanza, tipo di interazione), crea un processo in background e un servizio da lasciare acceso sul pc.
  • Ultraleap Gemini v5.20.0 : ultima versione del software Ultraleap Gemini, che esegue l'effettivo hand tracking. Avvia un processo in background dal cui pannello si possono vedere le mani trackate (right click sull'icona del processo minimizzato di Windows > Open Control Panel).
    Installa un programma (Ultraleap Tracking) da avviare prima del UltraleapTrackingWebSocket, col quale comunica per inviare dati all'app web.

Nella cartella /tools

  • LeapMotion-old-docs : vecchia documentazione di Leap, non più reperibile e ricevuta direttamente dal supporto, utile dato che il software utilizzato e la libreria Leapjs sono di vecchie versioni.
  • leap.js : ultima versione di leap.js funzionante con il web (leap 1.1.1), da cui ho preso la libreria inclusa nel progetto. Al suo interno c'è la cartella /examples con diversi utilizzi possibili (basta avere il software Leap acceso e aprirli come HTML nel browser).
    Il più utile è /examples/dumper.html che mostra come stampare tutti i dati della mano che arrivano da Leap.
  • UltraleapTrackingWebSocket : software da compilare con cmake che rende compatibile il moderno software di Leap con le vecchie API tramite un socket (community patch fornita dal supporto, di seguito i passaggi per compilare su Windows).

Compilare UltraleapTrackingWebSocket con MSYS2 e CMake GUI

Il progetto originale e clonato si trova qui: https://github.com/ultraleap/UltraleapTrackingWebSocket

Warning

Nella versione in locale sono state apportate delle modifiche al CMakeLists.txt per rendere la build compatibile con Windows e sistemare le dipendenze. Se su un sistema diverso, prima prova la build ri-clonando la repo e seguendo la guida.

Per le modifiche eseguite vedi infondo alla documentazione!

Passaggi e software da installare su Windows:

  1. Installa MSYS2 : https://www.msys2.org/
    Ambiente di sviluppo per Windows che fornisce un sistema di pacchetti Unix-like, mantendo dipendenze sincronizzate e compatibili.
  2. Apri il terminale MSYS2 ed aggiorna i pacchetti con il comando seguente (la prima volta ti farà chiudere il terminale, riaprilo e riesegui il comando fino a che vedi tutti i pacchetti installati).
    pacman (package manager) è il gestore dei pacchetti di MSYS2.
pacman -Syu
  1. Ora installa i pacchetti necessari alla build del progetto: CMake, GCC, OpenSSL, libwebsocket e pkg-config
pacman -S mingw-w64-x86_64-gcc \
  mingw-w64-x86_64-cmake \
  mingw-w64-x86_64-make \
  mingw-w64-x86_64-openssl \
  mingw-w64-x86_64-libwebsockets \
  mingw-w64-x86_64-pkg-config
  1. Controlla che la cartella C:\msys64\mingw64\bin non sia vuota, e aggiungila al PATH nelle Environment Variables > System variables.
    Verifica le versioni installate con i seguenti comandi, per verificare che le variabili siano configurate:
gcc --version
cmake --version
  1. Crea una cartella build dentro UltraleapTrackingWebSocket, entra ed apri il terminale (GitBash o Cmd, non più MSYS2) per eseguire i seguenti comandi:
cmake -G "MinGW Makefiles" -DCMAKE_C_COMPILER=gcc -DCMAKE_PREFIX_PATH="C:/msys64/mingw64" ..
mingw32-make
  1. Se tutto va a buon fine, ora nella cartella build è stato creato un eseguibile UltraleapTrackingWebSocket.exe, da lanciare dopo il software di tracking LeapMotion per far comunicare vecchia libreria e nuovo software.
    Anche senza eseguire alcun progetto, muovendo le mani dovresti vedere degli output nel terminale del nuovo eseguibile lanciato.

Mano 3D

La libreria della mano 3D sovrapposta allo schermo si trova qui https://github.com/leapmotion/leapjs-rigged-hand

Warning

La versione che trovi inclusa nel progetto dentro /libs/riggedhand ha delle modifiche custom (segnate con dei commenti) per mappare correttamente la mano allo schermo e tenere un movimento scalato su tutta l'area. In alcuni punti i parametri sono modificabili per cambiare come si muove e quanto grande visualizzarla.
Quindi ATTENZIONE a sovrascrivere o aggiornare la libreria!

Email dal supporto LeapMotion

Are you trying to use TouchFree with our TouchFree Tooling for Web?
TouchFree only provides an onscreen cursor (X and Y screen position, plus a click progress value). It does not give you individual finger data. If TouchFree is what you want I can help you with it.
Alternatively you can make use of the old LeapJS code which allows you to get hand and finger data. This is only officially supported in the older Leap Motion Orion V4 hand tracking software, but just the other day we did open source a middleware program that allows Ultraleap Gemini V5 and above tracking service to work with LeapJS.
You can get the code from this repository: https://github.com/ultraleap/UltraleapTrackingWebSocket. Once built, run the executable and it will connect to your installed Ultraleap Gemini/Hyperion tracking service. Then if you run any of the LeapJS examples they should receive hand data.

No there is no micro-gesture recognition in this resurrected version of LeapJS. The API will likely still be present as the leapjs code hasn't changed, but its not supported by the open sourced websocket server.
As such the old docs are no longer available as they are very outdated, but I will attached them for you hear in case some snippets are useful.
There are no open source libraries that I'm aware of that will work for gestures with LeapJS.

Extra utility

Tracking delle modifiche a CMakeLists.txt

Originale:

set(CMAKE_THREAD_PREFER_PTHREAD TRUE)

if (WIN32)
	find_package(PThreads4W REQUIRED)
elseif (UNIX)
 	find_package(Threads REQUIRED)
endif()

find_package(Threads REQUIRED)

[...]

if (WIN32)
	target_link_libraries(
		Ultraleap-Tracking-WS
		PUBLIC
		libUtils
		PThreads4W::PThreads4W
		${LIBWEBSOCKETS_LIBS})
elseif (UNIX)
	target_link_libraries(
		Ultraleap-Tracking-WS
		PUBLIC
		libUtils
		Threads::Threads
		${LIBWEBSOCKETS_LIBS})
endif()

Modifica:

set(CMAKE_THREAD_PREFER_PTHREAD TRUE)

# Eliminate righe nel mezzo

find_package(Threads REQUIRED)

[...]

if (WIN32)
	target_link_libraries(
		Ultraleap-Tracking-WS
		PUBLIC
		libUtils
        # PThreads4W::PThreads4W eliminato
		${LIBWEBSOCKETS_LIBS}
		ws2_32  # Windows Sockets
		crypt32 # OpenSSL Certificate Management
		ssl     # OpenSSL TLS
		crypto  # OpenSSL Cryptography
	)
elseif (UNIX)
	target_link_libraries(
		Ultraleap-Tracking-WS
		PUBLIC
		libUtils
		Threads::Threads
		${LIBWEBSOCKETS_LIBS})
endif()

Note sulle modifiche

  • PThreads4W è superfluo con MSYS2, che usa Threads::Threads e supporta pthread nativamente.
  • Le librerie ws2_32, crypt32, ssl, e crypto non erano elencate nel CMakeLists.txt originale perché l'ambiente Visual Studio/vcpkg le include automaticamente.
    Quando si compila in MSYS2/MinGW, è necessario specificarle manualmente per evitare errori di linking.

Warning

Modifica non eseguita ma utile
Il file CMakeLists.txt originale utilizza:

find_package(libwebsockets CONFIG REQUIRED)

In alcuni ambienti, questa istruzione può fallire se CMake non trova automaticamente il file libwebsocketsConfig.cmake. In questi casi, una soluzione alternativa consiste nel sostituirla con:

find_library(LIBWEBSOCKETS_LIBS websockets_static PATHS "C:/msys64/mingw64/lib")

Se libwebsockets è stato installato correttamente tramite pacman e si imposta il flag -DCMAKE_PREFIX_PATH="C:/msys64/mingw64" durante la configurazione, find_package() dovrebbe funzionare correttamente e la modifica non è necessaria.

About

Digital flippable interactive book w/ LeapMotion + React + Electron

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

 
 
 

Contributors

Languages