MLB, HomeRuns

Takashi Sato posted an update — Jan 19, 2025 09:34 AM EST

Configuração do Servidor Web é essencia: Você precisa usar um servidor web como Nginx ou Apache como proxy reverso para a sua aplicação.

Conclusão:

Um servidor Linux VPS com 1GB de RAM é uma opção muito melhor e mais adequada para hospedar uma aplicação Node.js do que um servidor de 512MB. Ele oferece mais recursos para lidar com uma gama maior de aplicações, reduzindo a necessidade de utilizar o swap, além de dar mais estabilidade e um melhor desempenho para a aplicação.

É importante lembrar, mais uma vez, que o link sousato.net/mlb/index.php é um arquivo PHP. Se você está planejando usar Node.js para seu projeto, terá que escrevê-lo em javascript (que é a linguagem do Nodejs).

Se você está começando e não tem uma aplicação muito complexa, 1GB deve ser suficiente. Se você tiver uma aplicação complexa ou pretende escalar seu projeto no futuro, o ideal pode ser começar em um VPS de 2GB ou superior. Mas, sem dúvida, o VPS de 1GB é um bom ponto de partida.

Log in or sign up for Devpost to join the conversation.

Takashi Sato posted an update — Jan 18, 2025 06:24 PM EST

Instale o Node.js e npm: Faça a instalação corretamente e adicione-os ao PATH.

Instale o CMake: Instale o cmake no seu sistema e verifique a versão.

Instale as Dependências: Navegue até a pasta do server.js e execute o comando npm install express fluent-ffmpeg node-fetch opencv4nodejs

Instale as dependências do python: Execute pip install requests beautifulsoup4 mysql-connector-python.

Execute server.js: Execute node server.js para iniciar o servidor Node.js.

Execute code.py: Execute o script Python para popular a tabela jogadores_mlb (se você precisar usá-la).

Acesse a página: Acesse o seu site pelo navegador e tente fazer a busca, e verifique se o erro desapareceu.

Log in or sign up for Devpost to join the conversation.

Takashi Sato posted an update — Jan 18, 2025 06:21 PM EST

Como Corrigir (Passo a Passo):

Instale o Node.js e npm:

Vá para o site oficial do Node.js (https://nodejs.org/) e baixe o instalador para Windows ou Linux (de acordo com seu servidor).

Execute o instalador e siga as instruções, marcando a opção "Add to PATH" (para que o comando node seja reconhecido no terminal) ou adicione as variáveis de ambiente necessárias.

Abra um novo terminal (prompt de comando ou PowerShell no Windows, ou o terminal do Linux), e digite node -v e npm -v. Se a instalação estiver ok, você deverá ver as versões instaladas.

Instale o CMake:

Acesse o site oficial do CMake (https://cmake.org/download/) e baixe a versão apropriada para o seu sistema operacional (windows ou linux).

• Siga as instruções para instalar o CMake e adicionar o seu binário no PATH.
• Verifique se a versão foi instalada corretamente através do comando cmake --version.

Instale as Dependências do server.js:

Abra o Prompt de Comando ou PowerShell (no Windows) ou o terminal (Linux) como administrador.

Navegue até o diretório onde o server.js está salvo.

Execute o comando npm install express fluent-ffmpeg node-fetch opencv4nodejs para instalar as bibliotecas necessárias para o seu código Node.js.

Instale as Dependências do code.py:

Abra o Prompt de Comando ou PowerShell (no Windows) ou o terminal (Linux) como administrador.

Execute o comando pip install requests beautifulsoup4 mysql-connector-python.

Caso precise de mais dependências, utilize o pip install para instala-las.

Execute o server.js:

No mesmo terminal, execute o comando node server.js (ou o comando usado para colocar seu servidor online, ex: pm2 start server.js) e verifique se ele está rodando corretamente, sem nenhum erro.

A mensagem "Server running on port 3001" deverá ser impressa no terminal.

Execute o code.py:

Execute o seu script python, para que os dados do seu banco sejam populados (caso seja necessário utilizar esse script).

Acesse a Página: Acesse o seu site www.sousato.net/mlb/index.php no seu navegador e veja se as funcionalidades estão funcionando corretamente.

Faça uma busca para verificar a tabela de resultados, a exibição do video, da trajetoria e do volume.

Próximos Passos:

Instale o Node.js e npm: Faça a instalação corretamente e adicione-os ao PATH.

Instale o CMake: Instale o cmake no seu sistema e verifique a versão.

Instale as Dependências: Navegue até a pasta do server.js e execute o comando npm install express fluent-ffmpeg node-fetch opencv4nodejs

Instale as dependências do python: Execute pip install requests beautifulsoup4 mysql-connector-python.

Execute server.js: Execute node server.js para iniciar o servidor Node.js.

Execute code.py: Execute o script Python para popular a tabela jogadores_mlb (se você precisar usá-la).

Acesse a página: Acesse o seu site pelo navegador e tente fazer a busca, e verifique se o erro desapareceu.

Log in or sign up for Devpost to join the conversation.

Takashi Sato posted an update — Jan 18, 2025 06:02 PM EST

Como Corrigir (Passo a Passo):

Instale o Node.js e o npm:

Acesse o site oficial do Node.js: https://nodejs.org/

Baixe a versão LTS (Long Term Support) recomendada para o seu sistema operacional Windows.

Execute o instalador e siga as instruções. Certifique-se de que a opção "Add to PATH" esteja selecionada durante a instalação, ou adicione as variáveis de ambiente do Nodejs manualmente ao seu PATH.

Verifique a instalação do Node.js e do npm:

Abra um novo prompt de comando ou janela do PowerShell como administrador.

Digite os comandos node -v e npm -v e pressione Enter.

Você deverá ver as versões instaladas do Node.js e do npm, caso esteja tudo correto.

Instale o CMake:

Acesse o site do CMake e baixe o instalador apropriado para Windows: https://cmake.org/download/.

Execute o arquivo .msi e siga as instruções da instalação.

Você pode adicionar o diretório da sua instalação do CMake na variável de ambiente Path do seu sistema, para que o mesmo esteja disponível globalmente para o seu terminal.

Verifique a instalação utilizando o comando cmake --version.

Navegue até a pasta do projeto Node.js:

No Prompt de Comando ou PowerShell, use o comando cd para navegar até a pasta onde o arquivo server.js está salvo (ex: D:\SITE\SOUSATO\web\mlb).

Instale as dependências do projeto Node.js:

Execute o comando:

npm install express fluent-ffmpeg node-fetch opencv4nodejs Use code with caution. Bash Este comando irá instalar as bibliotecas necessárias para o seu server.js funcionar corretamente, dentro da pasta node_modules no seu diretório.

Verifique a instalação

Certifique-se de que a pasta node_modules foi criada corretamente e que as dependências estão instaladas dentro dela.

Execute o server.js:

Use o comando:

node server.js Use code with caution. Bash Você deverá ver a mensagem "Server running on port 3001" no console.

Observações:

Privilégios de Administrador: É necessário executar o instalador do Node.js e os comandos npm e o node server.js como administrador para garantir que o ambiente seja configurado corretamente.

Caminhos Absolutos: Ao configurar o PATH, use caminhos absolutos (ex: C:\Program Files\nodejs) para evitar problemas.

Versão do Node.js: É recomendável utilizar uma versão LTS (Long Term Support) para evitar problemas de compatibilidade.

Firewall Seu firewall pode estar bloqueando o acesso à sua API que está rodando na porta 3001.

Próximos Passos:

Instale o Node.js: Baixe e instale o Node.js.

Adicione ao PATH: Adicione os caminhos para os executáveis do Node.js (e do CMake, se necessário) na variável Path do sistema.

Instale o CMake: Baixe e instale o CMake.

Abra o terminal: Abra um novo terminal (Prompt ou PowerShell) como administrador e navegue até a pasta do seu projeto.

Instale as dependências: Execute o comando npm install express fluent-ffmpeg node-fetch opencv4nodejs

Execute o servidor: Execute o comando node server.js.

Verifique a execução do servidor: Acesse o endereço http://localhost:3001 ou http://seu_ip_servidor:3001 pelo navegador para ver se ele responde corretamente.

Execute o código python: Execute o seu code.py novamente, para preencher os dados do seu banco de dados.

Teste a página: Após esses passos, acesse a página www.sousatonet/mlb/index.php e tente fazer a busca, a exibição do video, e da trajetoria para confirmar que ela está funcionando corretamente.

Com esses passos, você deverá conseguir configurar o seu servidor corretamente, e poderá testar o seu site, garantindo que todas as funcionalidades estão operando como o esperado. Se algum problema persistir, me informe os resultados dos testes e os logs para que eu possa te ajudar.

Log in or sign up for Devpost to join the conversation.

Takashi Sato posted an update — Jan 18, 2025 03:12 PM EST

Próximos Passos:

Salve todos os arquivos:

Garanta que os arquivos index.php, modulo.php e server.js estejam salvos com os códigos acima.

Execute o code.py: Execute o script code.py para popular a tabela jogadores_mlb.

Execute o servidor Node.js: Execute o script server.js no terminal do seu sistema.

Acesse a página: Acesse a página www.sousato.net/mlb/index.php diretamente no seu navegador (sem parâmetros de busca).

Teste a página: Digite um nome de jogador na caixa de texto e clique em "Buscar", e tente executar todas as funcionalidades do seu site.

Analise as respostas: Se o erro persistir, compartilhe os resultados das suas verificações com as ferramentas de desenvolvedor do navegador (console e rede), e a saida dos seus logs, para que eu possa te auxiliar a diagnosticar corretamente.

Log in or sign up for Devpost to join the conversation.

Takashi Sato posted an update — Jan 18, 2025 06:50 AM EST

Como o Site Exibe o Resultado da Busca (Etapas):

Entrada do Usuário:

O usuário digita um nome de jogador em uma caixa de texto na página.

O usuário clica no botão "Buscar".

Requisição ao Servidor (JavaScript):

O JavaScript captura o nome do jogador digitado.

O JavaScript envia uma requisição para o servidor (usando fetch ou similar).

Essa requisição inclui o nome do jogador como um parâmetro na URL (por exemplo, index.php?nome=NomeDoJogador).

Processamento no Servidor (PHP):

O servidor recebe a requisição e identifica que é uma requisição de busca por jogador (pelo parâmetro nome).

O PHP se conecta ao banco de dados e executa uma query (consulta) SQL para buscar os home runs relacionados ao nome do jogador (a query também retorna a URL do vídeo do home run).

O PHP recebe os resultados da query, formata-os em JSON e envia essa resposta de volta para o navegador.

Recebimento da Resposta (JavaScript):

O JavaScript recebe a resposta JSON do servidor (contendo os dados do home run, incluindo o link do vídeo).

Exibição dos Resultados (JavaScript/HTML):

O JavaScript extrai a URL do vídeo da resposta JSON.

O JavaScript altera o atributo src do elemento na página, fazendo com que o navegador exiba o vídeo.

O Javascript extrai outras informações do home run (nome, distância, velocidade, ângulo) e exibe abaixo do vídeo, em um elemento div especifico.

Resumindo os passos principais:

Usuário interage: Digita o nome do jogador e clica em "Buscar".

JavaScript busca os dados: Faz uma requisição para o servidor com o nome do jogador.

Servidor processa: Busca os dados no banco de dados e retorna o resultado em JSON.

JavaScript exibe: Utiliza o JSON para preencher os campos do vídeo e as informações abaixo dele, exibindo o vídeo e os dados na tela.

Conceitos Importantes:

AJAX: O JavaScript usa AJAX (fetch nesse caso) para fazer requisições ao servidor sem precisar recarregar a página inteira.

JSON: O servidor retorna os dados em formato JSON, que é uma maneira fácil de representar dados estruturados que podem ser facilmente lidos pelo JavaScript.

Query SQL: O PHP usa queries SQL para buscar os dados no banco de dados.

URL do Vídeo: O banco de dados armazena a URL do vídeo do home run (por exemplo, em uma coluna link_video), que é utilizada pelo JavaScript para exibir o vídeo.

Para corrigir o problema de "nenhum resultado":

Verifique a requisição AJAX: Veja se o JavaScript está enviando o nome do jogador corretamente para o servidor.

Verifique o JSON: Veja se a resposta do servidor está sendo enviada em JSON válido e com os campos corretos.

Verifique os dados no PHP: Veja se os dados que você espera são retornados pela função PHP.

Verifique a query no PHP: Certifique-se de que a query está funcionando corretamente e buscando os dados esperados.

Verifique os nomes dos campos: Verifique se os nomes dos campos que você está usando no JavaScript para acessar o JSON correspondem aos nomes que você está usando no PHP para enviar o JSON (ex: dados.nome, dados.hit_distance)

Com este resumo, você poderá focar nos pontos chaves para diagnosticar o seu problema.

Log in or sign up for Devpost to join the conversation.

Takashi Sato posted an update — Jan 18, 2025 05:38 AM EST

Verifique se o PHP está habilitado: Consulte a configuração do seu servidor web.

Teste com um arquivo PHP simples: Tente acessar um arquivo php simples e ver se o php está sendo executado corretamente.

Comente o .htaccess: Se houver um .htaccess, comente todas as linhas e teste novamente.

Verifique os logs: Veja se há algum erro específico nos logs.

Log in or sign up for Devpost to join the conversation.

Takashi Sato posted an update — Jan 17, 2025 04:18 PM EST

while (($data = fgetcsv($handle, 1000, ",")) !== FALSE) { var_dump($data); // Verifique os dados lidos do CSV $sql = "INSERT INTO $nomeTabela (game_date, nome, hit_distance, exit_velocity, launch_angle, link_video) VALUES (?, ?, ?, ?, ?, ?)";

    $stmt = $conn->prepare($sql);

    if ($stmt === false) {
        echo "Erro na preparação da query: ".$conn->error;
        return false;
    }

    $date = DateTime::createFromFormat('m/d/Y', $data[0]);
    if($date)
        $dateFormatted = $date->format('Y-m-d');
    else
        $dateFormatted = null;


    $stmt->bind_param("ssdsss", $dateFormatted, $data[1], $data[2], $data[3], $data[4], $data[5]);

     if($stmt->execute() === FALSE)
        {
           var_dump($stmt->error); // verificar erros na execução da query
            echo "Erro ao executar query: ".$stmt->error;
          return false;
       }
   $stmt->close();
 }  teste de conexão antes de uma possivel falha no python.

Log in or sign up for Devpost to join the conversation.

Takashi Sato posted an update — Jan 17, 2025 04:13 PM EST

CSV importado com sucesso utilizando método alternativo!

SQL ainda nulo.

Log in or sign up for Devpost to join the conversation.

Takashi Sato posted an update — Jan 17, 2025 03:59 PM EST

<?php

ini_set('display_errors', 1); ini_set('display_startup_errors', 1); error_reporting(E_ALL);

include 'modulo.php';

/* try { $conn = new mysqli($servidor, $usuario, $senha, $dbname); if ($conn->connect_error) { die("Erro de conexão: " . $conn->connect_error); } } catch (Exception $e) { die("Erro de conexão: " . $e->getMessage()); }

$caminhoArquivo = 'home_runs.csv'; $nomeTabela = 'HomeRuns';

$sqlImport = "LOAD DATA LOCAL INFILE '" . $caminhoArquivo . "' INTO TABLE " . $nomeTabela . " FIELDS TERMINATED BY ',' ENCLOSED BY '\"' LINES TERMINATED BY '\n' IGNORE 1 ROWS";

if ($conn->query($sqlImport) === TRUE) { echo "CSV importado com sucesso!"; } else { echo "Erro ao importar CSV: " . $conn->error; }

$conn->close(); */ try { $conn = new mysqli($servidor, $usuario, $senha, $dbname); if ($conn->connect_error) { die("Erro de conexão: " . $conn->connect_error); } } catch (Exception $e) { die("Erro de conexão: " . $e->getMessage()); }

$caminhoArquivo = 'home_runs.csv'; $nomeTabela = 'HomeRuns';

function importCsv($conn, $caminhoArquivo, $nomeTabela) { if (($handle = fopen($caminhoArquivo, "r")) !== FALSE) { fgetcsv($handle); // Ignorar a primeira linha (cabeçalho) while (($data = fgetcsv($handle, 1000, ",")) !== FALSE) { $sql = "INSERT INTO $nomeTabela (game_date, nome, hit_distance, exit_velocity, launch_angle, link_video) VALUES (?, ?, ?, ?, ?, ?)";

        $stmt = $conn->prepare($sql);

        if ($stmt === false) {
            echo "Erro na preparação da query: ".$conn->error;
            return false;
        }

         $date = DateTime::createFromFormat('m/d/Y', $data[0]);
        if($date)
             $dateFormatted = $date->format('Y-m-d');
         else
             $dateFormatted = null;

        $stmt->bind_param("ssdsss", $dateFormatted, $data[1], $data[2], $data[3], $data[4], $data[5]);

        if($stmt->execute() === FALSE)
         {
              echo "Erro ao executar query: ".$stmt->error;
              return false;
         }
       $stmt->close();
    }
    fclose($handle);
    return true;
} else {
    echo "Erro ao abrir o arquivo CSV.";
    return false;
}

}

if(importCsv($conn, $caminhoArquivo, $nomeTabela)) echo "CSV importado com sucesso utilizando método alternativo!"; else echo "Erro ao importar CSV utilizando método alternativo!"; $conn->close();

// 3. Função para buscar home runs (será chamada pelo JavaScript) function buscarHomeRun($conn, $nomeJogador) { $sql = "SELECT id, game_date, nome, hit_distance, exit_velocity, launch_angle, link_video FROM HomeRuns WHERE nome LIKE ? ORDER BY hit_distance DESC, exit_velocity DESC LIMIT 5"; $stmt = $conn->prepare($sql); $nome_like = "%" . $nomeJogador . "%"; $stmt->bind_param("s", $nome_like); $stmt->execute(); $resultado = $stmt->get_result(); $homeRuns = []; while ($row = $resultado->fetch_assoc()) { $homeRuns[] = $row; } $stmt->close(); return $homeRuns; }

// 4. Função para buscar home runs por ID para trajetoria (será chamada pelo JavaScript) function buscarHomeRunPorID($conn, $homeRunID) { $sql = "SELECT hit_distance, exit_velocity, launch_angle FROM HomeRuns WHERE id = ?"; $stmt = $conn->prepare($sql); $stmt->bind_param("i", $homeRunID); $stmt->execute(); $resultado = $stmt->get_result(); $homeRun = $resultado->fetch_assoc(); $stmt->close(); return $homeRun; }

// 5. Configurar cabeçalhos para requisições AJAX header('Content-Type: application/json');

// 6. Verificar se a solicitação é para buscar home runs ou trajetória if (isset($_GET['nome'])) { try { $conn = new mysqli($servidor, $usuario, $senha, $dbname); if ($conn->connect_error) { die(json_encode(["error" => "Erro de conexão: " . $conn->connect_error])); }

    $nomeJogador = $_GET['nome'];
    $homeRuns = buscarHomeRun($conn, $nomeJogador);
    echo json_encode($homeRuns);
    $conn->close();
} catch (Exception $e) {
    die(json_encode(["error" => "Erro ao buscar home runs: " . $e->getMessage()]));
}

} else if (isset($_GET['homeRunID'])) { try { $conn = new mysqli($servidor, $usuario, $senha, $dbname); if ($conn->connect_error) { die(json_encode(["error" => "Erro de conexão: " . $conn->connect_error])); } $homeRunID = $_GET['homeRunID']; $homeRun = buscarHomeRunPorID($conn, $homeRunID); echo json_encode($homeRun); $conn->close(); } catch (Exception $e) { die(json_encode(["error" => "Erro ao buscar trajetória: " . $e->getMessage()])); } } ?>

<!DOCTYPE html>

<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>MLB Home Run Search</title>
<style>
    /* Estilo da barra de navegação (similar ao seu código original) */
    nav {
        background-color: #041e42;
        overflow: hidden;
        font-family: sans-serif;
    }
    nav a {
        float: left;
        display: block;
        color: white;
        text-align: center;
        padding: 14px 16px;
        text-decoration: none;
        font-size: 17px;
        font-weight: bold;
        transition: background-color 0.3s ease;
    }
    nav a:hover {
        background-color: #223f5e;
    }
    @media screen and (max-width: 768px) {
        nav a {
            float: none;
            display: block;
            text-align: left;
            width: 100%;
            margin: 0;
            padding: 14px;
        }
    }
    #mlb-logo {
        float: left;
        height: 40px;
        padding: 6px 10px;
    }

     /* Estilos adicionais para o conteúdo principal */
     #video-container {
        display: none; /* Oculto inicialmente até encontrar um home run */
        margin: 20px auto; /* Centralizar e adicionar margem */
        max-width: 80%;  /* Reduzir a largura máxima */
        width: 800px;
        /*text-align: center;*/ /* Centralizar o vídeo */
        border: 1px solid #ccc;
     }

     #video-container video {
        width: 100%;
         max-width: 100%;
         display: block;
         /*padding-top: 20px;*/
     }

    #busca {
         margin: 20px auto;
         width: 800px;
         text-align: center;
     }
     #dados-homerun {
        margin-top: 20px;
        width: 800px;
        padding: 10px;
        border: 1px solid #eee;
        background-color: #f9f9f9;

     }
    #resultado {
        text-align: center;
        margin: 10px;
     }

     #canvas-container {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.8);
        justify-content: center;
        align-items: center;
     }

      #canvas-container  > div {
         display: flex;
        flex-direction: column;
        align-items: center;
    }

     canvas {
            background: white;
        }
     #result-table {
         width: 800px;
          margin: 0 auto;
            border-collapse: collapse;
            margin-bottom: 20px;
     }
     #result-table th, #result-table td {
            border: 1px solid black;
            padding: 8px;
        }
     #result-table th {
            background-color: #f2f2f2;
        }

</style>

NEWS WATCH SCHEDULE STATS STANDINGS MLB.TV TICKETS SHOP TEAMS HOME RUN

 <div id="video-container">
    <video controls>
        <source src="" id="video-source">
        Seu navegador não suporta a tag de vídeo.
    </video>
    <div id="dados-homerun"></div>
</div>

<div id="busca">
     <input type="text" id="nome-jogador" placeholder="Nome do Jogador">
     <button onclick="buscarHomeRun()">Buscar</button>
</div>

<div id="resultado"></div>

 <div id="canvas-container">
    <div>
       <canvas id="trajectoryCanvas" width="600" height="400"></canvas>
       <button onclick="closeCanvas()" style="margin-top: 10px;">Fechar</button>
    </div>
</div>


<script>
  function closeCanvas() {
      document.getElementById('canvas-container').style.display = 'none';
  }

  let currentAnimationId;

  function buscarHomeRun() {
      const nomeJogador = document.getElementById('nome-jogador').value;
      const resultsDiv = document.getElementById('resultado');
      resultsDiv.innerHTML = '<p>Carregando...</p>';
      document.getElementById('video-container').style.display = 'none'; //esconder video ao buscar
        document.getElementById('dados-homerun').innerHTML = ''; //Limpar div dados-homerun

      fetch(`index.php?nome=${encodeURIComponent(nomeJogador)}`)
          .then(response => response.json())
          .then(data => {
             resultsDiv.innerHTML = ''; // Limpar mensagem de carregando

              if (data.error) {
                   resultsDiv.innerHTML = `<p style="color:red;">Erro: ${data.error}</p>`;

                } else if (data.message) {
                    resultsDiv.innerHTML = `<p>${data.message}</p>`;

                }else if (data && data.length > 0){

                    const table = document.createElement('table');
                    table.id = 'result-table';
                     // Criar cabeçalho da tabela
                    const headerRow = table.insertRow();
                    const headers = ["ID","Nome", "Data", "Distância", "Velocidade de Saída", "Ângulo de Saída", "Visualizar", "Video"];
                     headers.forEach(headerText => {
                        const th = document.createElement('th');
                        th.textContent = headerText;
                        headerRow.appendChild(th);
                     });

                     data.forEach(hr => {
                        const row = table.insertRow();

                        const idCell = row.insertCell();
                        idCell.textContent = hr.id;

                        const nameCell = row.insertCell();
                        nameCell.textContent = hr.nome;

                        const dateCell = row.insertCell();
                        dateCell.textContent = hr.game_date;

                        const distCell = row.insertCell();
                        distCell.textContent = hr.hit_distance;

                        const velCell = row.insertCell();
                        velCell.textContent = hr.exit_velocity;

                        const angleCell = row.insertCell();
                        angleCell.textContent = hr.launch_angle;

                         const viewCell = row.insertCell();
                        const viewButton = document.createElement('button');
                        viewButton.textContent = 'Visualizar';
                        viewButton.onclick = () => visualizeTrajectory(hr.id);
                        viewCell.appendChild(viewButton);

                        const videoCell = row.insertCell();
                        const videoButton = document.createElement('button');
                        videoButton.textContent = 'Video';
                        videoButton.onclick = () => exibirHomeRun(hr);
                        videoCell.appendChild(videoButton)

                    });
                   resultsDiv.appendChild(table);


                 } else {

                    resultsDiv.innerHTML = '<p>Nenhum home run encontrado para este jogador.</p>';

                 }

           })
           .catch(error => {
               console.error('Erro na requisição:', error);
                resultsDiv.innerHTML = '<p style="color:red;">Erro ao buscar home run. Tente novamente.</p>';
           });
   }


 function exibirHomeRun(dados) {

        document.getElementById('video-container').style.display = 'block';
        document.getElementById('video-source').src = dados.link_video;


         // Calcular o volume da bola (apenas para demonstração)
        const raio = 0.074; // Raio aproximado de uma bola de beisebol em metros (ajuste se necessário).
        const volume = 4/3 * Math.PI * Math.pow(raio, 3);

        document.getElementById('resultado').textContent = `Volume da bola (apenas demonstração): ${volume.toFixed(4)} metros cúbicos`;

         // Exibir dados do home run abaixo do vídeo
        const dadosHomerunDiv = document.getElementById('dados-homerun');
        dadosHomerunDiv.innerHTML = `
            <p>Nome: ${dados.nome}</p>
            <p>Exit Velocity: ${dados.exit_velocity}</p>
            <p>Hit Distance: ${dados.hit_distance}</p>
            <p>Launch Angle: ${dados.launch_angle}</p>
        `;
    }

    function visualizeTrajectory(homeRunID) {

       document.getElementById('canvas-container').style.display = 'flex';
       const canvas = document.getElementById('trajectoryCanvas');
       const ctx = canvas.getContext('2d');
       const raio = 0.5;
       let x = 0;
       let y = canvas.height;
       let tempo = 0;

       if (currentAnimationId) {
           cancelAnimationFrame(currentAnimationId);
       }

       fetch(`index.php?homeRunID=${encodeURIComponent(homeRunID)}`)
            .then(response => response.json())
            .then(data => {
                if (data.error) {
                     alert("Erro ao buscar os dados da trajetória");
                } else {

                   const distance = parseFloat(data.hit_distance);
                   const exitVelocity = parseFloat(data.exit_velocity);
                   const launchAngle = parseFloat(data.launch_angle);
                   let initialSpeedX = exitVelocity * Math.cos(launchAngle * (Math.PI / 180));
                   let initialSpeedY = -exitVelocity * Math.sin(launchAngle * (Math.PI / 180));

                    function animate() {
                        ctx.clearRect(0, 0, canvas.width, canvas.height);
                        ctx.beginPath();
                        ctx.arc(x, y, raio * 10, 0, 2 * Math.PI);
                        ctx.fillStyle = 'red';
                        ctx.fill();

                         x =  initialSpeedX * tempo;
                          y = canvas.height - (initialSpeedY * tempo + 0.5 * 9.8 * tempo * tempo);

                       tempo += 0.05;

                       if (y > canvas.height || x > canvas.width) {
                          return;
                        }

                         currentAnimationId = requestAnimationFrame(animate);

                     }
                   animate();
                 }
          })
         .catch(error => {
               alert("Erro na requisição da trajetória");
          });
    }
</script>

tentaiva nº2 para inserir o home_runs.csv no servidor a plataforma não permite este tipo de carregamento de metadados, esperamos que uma busca linha por linha assim como indicado na IA possa resolver.

Log in or sign up for Devpost to join the conversation.

Takashi Sato posted an update — Jan 17, 2025 11:06 AM EST

LOAD DATA LOCAL INFILE forbidden: O erro indica que o comando SQL LOAD DATA LOCAL INFILE está proibido pelo servidor MySQL.

check mysqli.allow_local_infile: A mensagem sugere que você verifique a configuração mysqli.allow_local_infile no seu PHP.

Log in or sign up for Devpost to join the conversation.

Takashi Sato started this project — Jan 17, 2025 10:32 AM EST

Leave feedback in the comments!

Log in or sign up for Devpost to join the conversation.

Takashi Sato posted an update — Jan 17, 2025 01:34 AM EST

// ... dentro da função exibirHomeRun(dados) ...

const canvas = document.createElement('canvas'); canvas.width = 600; // Largura do canvas canvas.height = 400; // Altura do canvas videoContainer.appendChild(canvas); // Adiciona o canvas ao container

const ctx = canvas.getContext('2d');

// Dados da bola (ajuste conforme necessário) const raio = 0.074; // Raio da bola em metros const xInicial = 50; // Posição x inicial const yInicial = canvas.height - 50; // Posição y inicial (próximo ao fundo do canvas)

const anguloLancamento = dados.launch_angle * Math.PI/180; // Converter para radianos const velocidadeInicial = dados.exit_velocity / 3.6 // Converter de km/h para m/s (aproximado).

// Adicione o spin rate ao banco de dados e ajuste este valor aqui. const spinRate = dados.spin_rate; // rotações por segundo (exemplo)

// Simulação simplificada (apenas para demonstração) let x = xInicial; let y = yInicial; let tempo = 0;

function animarTrajetoria() { // Lógica simplificada da trajetória (apenas para demonstração) - ajuste conforme necessário. // Em um projeto real, use cálculos físicos mais precisos. x += velocidadeInicial * Math.cos(anguloLancamento) * tempo ; y -= (velocidadeInicial * Math.sin(anguloLancamento) * tempo - (9.8 * tempo * tempo) / 2);

// Desenhar a bola
ctx.clearRect(0, 0, canvas.width, canvas.height); // Limpar o canvas
ctx.beginPath();
ctx.arc(x, y, raio * 20, 0, 2 * Math.PI); // Aumenta o raio para visualização
ctx.fillStyle = 'red';
ctx.fill();

tempo += 0.1; // Incrementar o tempo

// Parar a animação quando a bola sair do canvas
 if (y > canvas.height || x > canvas.width) {
       return; // sair da função de animação
 }

Log in or sign up for Devpost to join the conversation.

Takashi Sato posted an update — Jan 17, 2025 01:16 AM EST

//Algoritmo de Gravidade// 4/3 * Math.PI * Math.pow(raio, 3);

Log in or sign up for Devpost to join the conversation.

Takashi Sato posted an update — Jan 17, 2025 01:14 AM EST

function buscarHomeRun() { const nomeJogador = document.getElementById(&#39;nome-jogador&#39;).value; fetch(<code>buscar_homerun.php?nome=${nomeJogador}</code>) // Adapte o nome do arquivo PHP .then(response =&gt; response.json()) .then(dados =&gt; { if (dados &amp;&amp; dados.length &gt; 0) { exibirHomeRun(dados[0]); } else { document.getElementById(&#39;video-container&#39;).style.display = &#39;none&#39;; document.getElementById(&#39;dados-homerun&#39;).innerHTML= &#39;&#39;; //Limpar div dados-homerun document.getElementById(&#39;resultado&#39;).textContent = &#39;Nenhum home run encontrado para este jogador.&#39;; } }) .catch(error =&gt; { console.error(&#39;Erro na requisição:&#39;, error); document.getElementById(&#39;video-container&#39;).style.display = &#39;none&#39;; document.getElementById(&#39;dados-homerun&#39;).innerHTML= &#39;&#39;; //Limpar div dados-homerun document.getElementById(&#39;resultado&#39;).textContent = &#39;Erro ao buscar home run. Tente novamente.&#39;; }); }</p> <pre class="language-nolang"><code> function exibirHomeRun(dados) { document.getElementById(&#39;video-container&#39;).style.display = &#39;block&#39;; document.getElementById(&#39;video-source&#39;).src = dados.link_video; // Calcular o volume da bola (apenas para demonstração) const raio = 0.074; // Raio aproximado de uma bola de beisebol em metros (ajuste se necessário). const volume = 4/3 * Math.PI * Math.pow(raio, 3); document.getElementById(&#39;resultado&#39;).textContent = `Volume da bola (apenas demonstração): ${volume.toFixed(4)} metros cúbicos`; // Exibir dados do home run abaixo do vídeo const dadosHomerunDiv = document.getElementById(&#39;dados-homerun&#39;); dadosHomerunDiv.innerHTML = ` &lt;p&gt;Nome: ${dados.nome}&lt;/p&gt; &lt;p&gt;Exit Velocity: ${dados.exit_velocity}&lt;/p&gt; &lt;p&gt;Hit Distance: ${dados.hit_distance}&lt;/p&gt; &lt;p&gt;Launch Angle: ${dados.launch_angle}&lt;/p&gt; `; } &lt;/script&gt; </code></pre>

Log in or sign up for Devpost to join the conversation.

Takashi Sato posted an update — Jan 16, 2025 11:32 PM EST

Go working this......

<?php

// ... (código de conexão com o banco de dados) ...

$caminhoArquivo = '/caminho/para/seu/arquivo.csv'; $nomeTabela = 'nome_da_tabela';

$sql = "LOAD DATA INFILE '$caminhoArquivo' INTO TABLE $nomeTabela FIELDS TERMINATED BY ',' ENCLOSED BY '\"' LINES TERMINATED BY '\n' IGNORE 1 ROWS"; // Ignore a primeira linha se for cabeçalho

if ($conn->query($sql) === TRUE) { echo "CSV importado com sucesso."; } else { echo "Erro ao importar CSV: " . $conn->error; }

// ... (fechar a conexão com o banco de dados) ...

?>

Log in or sign up for Devpost to join the conversation.