JSExpertMax Gesture Controller - Semana JS Expert 7.0

Seja bem vindo(a) stima Semana Javascript Expert. Este o cdigo inicial para iniciar nossa jornada.

Marque esse projeto com uma estrela

Live demo

• Para testar o projeto final clique aqui

Preview

Pre-reqs

• Este projeto foi criado usando Node.js v19.6
• O ideal que voc use o projeto em ambiente Unix (Linux). Se voc estiver no Windows, recomendado que use o Windows Subsystem Linux pois nas aulas so mostrados comandos Linux que possam no existir no Windows.

Importante

• Todo dia s 18hrs estou subindo o cdigo das aulas do dia corrente em classes. Se voc for iniciar o projeto, remova a pasta classes para iniciar do zero!

Running

• Execute npm ci na pasta que contm o arquivo package.json para restaurar os pacotes
• Execute npm start e em seguida v para o seu navegador em http://localhost:3000 para visualizar a pgina acima

Checklist Features

• Titles List

  • [] - Campo para pesquisa no deve travar ao digitar termo de pesquisa
  • [] - Deve desenhar mos na tela e fazer com que elementos em segundo plano continuem sendo clicveis
  • [] - Deve disparar scroll up quando usar a palma das mos abertas
  • [] - Deve disparar scroll down quando usar a palma das mos fechadas
  • [] - Deve disparar click no elemento mais prximo quando usar gesto de pina
  • [] - Ao mover elementos na tela, deve disparar evento :hover em elementos em contexto

• Video Player

  • [] - Deve ser possivel de reproduzir ou pausar videos com o piscar de olhos
  • [] - Todo processamento de Machine Learning deve ser feito via Web worker

Desafios

• [] - Aula 01 - Diferenciar piscada de olhos entre olho direito e esquerdo e atualizar log para mostrar qual olho que piscou.
• [] - Aula 02 - Reconhecer gestos de mos individuais e printar no log
• [] - Aula 03 - Corrigir Banner de titulo de video, para ficar atrs do desenho das mos e se tornar clicvel
• [] - Aula 04 - Usar as mos virtuais tambm no Video Player

Desafio plus: implementar testes unitrios e alcanar 100% de coverage (avanado)

Links mostrados nos aulas:

• Reuni todos os links em referncias

Consideraes

• Tire suas dvidas sobre os desafios em nossa comunidade, o objetivo voc aprender de forma divertida. Surgiu dvidas? Pergunte por l!

• Ao completar qualquer um dos desafios, envie no canal #desafios da comunidade no Discord

FAQ

• browser-sync est lanando erros no Windows e nunca inicializa:
  • Soluo: Trocar o browser-sync pelo http-server.
    1. instale o http-server com npm i -D http-server
    2. no package.json apague todo o comando do browser-sync e substitua por npx http-server .
    3. agora o projeto vai estar executando na :8080 ento v no navegador e tente acessar o http://localhost:8080/
       A unica coisa, que o projeto no vai reiniciar quando voce alterar algum cdigo, vai precisar dar um F5 na pgina toda vez que alterar algo
• Erro no navegador de Webgl is not supported on this device
  • Digite chrome://gpu/ no Chrome para verificar se o webgl est habilitado.
  • Possveis solues:
    1. Opo 1: Habilitar a acelerao de hardware quando dispponvel
    • Chrome => Settings > System > Use hardware acceleration when available
    • Firefox => Browser options > Performance > Use hardware acceleration when available
    2. Opo 2: Atualizar driver da placa de vdeo
    • Veja detalhes no webgl-is-not-supported-on-chrome-firefox
    3. Opo 3: Trocar de WebGL para CPU (mais lento) ou Web Assembly
    • https://blog.tensorflow.org/2020/03/introducing-webassembly-backend-for-tensorflow-js.html
  • (agradecimentos ao usuario Volpin em nossa comunidade do Discord)

Crditos ao Layout

• Interface baseada no projeto Streaming Service de gunnarhawk