Pesquisar neste blog

06/07/2024

Atalhos de comandos em HTML5

1. div(header>ul>li*3)+section+footer>p

<div></div>
<header>
    <ul>
        <li></li>
        <li></li>
        <li></li>
    </ul>
</header>
<section></section>
<footer>
    <p></p>
</footer>


2. div(header>ul>p*2>li*5)+section+footer*2>p+(div*2)

<div></div>
<header>
    <ul>
        <p>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </p>
        <p>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </p>
    </ul>
</header>
<section></section>
<footer>
    <p></p>
    <div></div>
    <div></div>
</footer>
<footer>
    <p></p>
    <div></div>
    <div></div>
</footer>


4   .div$*4

<div class="div1"></div>
<div class="div2"></div>
<div class="div3"></div>
<div class="div4"></div>


5.    .div*4

<div class="div"></div>
<div class="div"></div>
<div class="div"></div>
<div class="div"></div>


6.    .div*5>p

<div class="div">
    <p></p>
</div>
<div class="div">
    <p></p>
</div>
<div class="div">
    <p></p>
</div>
<div class="div">
    <p></p>
</div>
<div class="div">
    <p></p>
</div>


7.   .div$*4>(p$)

<div class="div1">
    <p1></p1>
</div>
<div class="div2">
    <p2></p2>
</div>
<div class="div3">
    <p3></p3>
</div>
<div class="div4">
    <p4></p4>
</div>


05/06/2024

Bateria Carregando em HTML


Código em HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Bateria</title>
    <link href="" rel="" integrity="" crossorigin="">
</head>
<style>
  .battery-top {
    width: 30px;
    height: 10px;
    background: black;
    margin: 0 auto;
    border: 3px solid silver;
    border-top-right-radius: 8px;
    border-top-left-radius: 8px;
  }
  .battery-content {
    width: 150px;
    height: 250px;
    background: black;
    position: relative;
    margin: 0 auto;
    border: 3px solid silver;
    border-radius: 18px;
  }
  .charge {
    width: 100%;
    position: absolute;
    bottom: 0;
    border-radius: 14px;
    animation: battery 8s linear infinite;
  }
  @keyframes battery {
    0% {
      height: 0%;
      background: red;
    }
    25% {
      height: 25%;
      background: orange;
    }
    50% {
      height: 50%;
      background: rgb(7, 195, 241);
    }
    75% {
      height: 75%;
      background: blue;
    }
    100%{
      height: 100%;
      background: rgb(0, 255, 0);
    }
  }
</style>
<body>
  <div class="main">
    <div class="battery-top"></div>
    <div class="battery-content">
    <div class="charge"></div>
  </div>
</body>
</html>


02/06/2024

Animação com Hélice rotacional em HTML















Código feito em HTML:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<style>
  body{
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

img{
    border: 20px solid aqua;
    padding: 50px;
    border-radius: 50%;
    animation: fananim linear infinite;
}

button{
    cursor: pointer;
    width: 100px;
    height: 100px;
    padding: 20px 30px;
    margin: 0 20px;
    font-size: 25px;
    font-weight: 550;
    border: none;
    background-color: silver;
    border-radius: 50%;
    transition: 0.1s;
}

button:active{
    box-shadow: 0px 10px 10px black;
    transform: scale(0.95);
}

.main button:nth-last-child(5){
    background-color: rgb(0, 255, 0);
}

.main button:nth-last-child(4){
    background-color: red;
}
@keyframes fananim {
    100%
    {
        transform: rotate(360deg);
    }
}
</style>
<body>
  <div>
    <img id="img" src="Fan.png" alt="" srcset="">
    <button onclick="myfunon()">ON</button>
    <button onclick="myfunoff()">OFF</button>
    <button onclick="myfun1()">1</button>
    <button onclick="myfun2()">2</button>
    <button onclick="myfun3()">3</button>
  </div>  
 
</body>
  <script>
    let a=document.getElementById("img");
    function myfunon()
    {a.style.animationDuration = 3+"s";}
    function myfunoff()
    {a.style.animationDuration=0+"s";}
    function myfun1()
    {a.style.animationDuration=1+"s";}
    function myfun2()
    {a.style.animationDuration=0.5+"s";}
    function myfun3()
    {a.style.animationDuration=0.1+"s";}
  </script>
</html>


Palavras chave:

Animation with Rotational Helix in HTML
Animación con Hélice Rotacional en HTML
Animasi karo Rotational Helix ing HTML
Animasjon med Rotational Helix i HTML
HTMLдеги Rotational Helix менен анимация
Анимация с использованием вращающейся спирали в HTML
אנימציה עם Rotational Helix ב-HTML
Animation leh Helix Rotational oo HTML ah
HTML의 회전 나선을 사용한 애니메이션

16/12/2023

Sensor DTH22 com ESP32




CÓDIGO

#include <WiFi.h>
#include <Wire.h>
#include "DHTesp.h"
#include <Adafruit_Sensor.h>
#include <Adafruit_BME280.h>

#define DHT_PIN 4  // Pin onde o sensor DHT22 está conectado

float temperatura, umidade;

DHTesp dht;
Adafruit_BME280 bme;

const char* ssid = "USUARIO";
const char* password = "SENHA";

void setup() {
  Serial.begin(115200);
  delay(1000);
  
  // Inicializa o sensor DHT22
  dht.setup(DHT_PIN, DHTesp::DHT22);

   //Inicializa o sensor BME280
  
  //Código acima esta como comentario para fins de simulação

   //Conecta-se à rede Wi-Fi
  WiFi.begin(ssid, password);
  while (WiFi.status() != WL_CONNECTED) {
    delay(1000);
    Serial.println("Conectando à rede WiFi...");
  }
  Serial.println("Conectado à rede WiFi");
}

void loop() {
  // Leitura do sensor DHT22
  temperatura = dht.getTemperature();
  umidade = dht.getHumidity();
  
  Serial.print("Temperatura: ");
  Serial.print(temperatura);
  Serial.println(" °C");
  Serial.print("Umidade: ");
  Serial.print(umidade);
  Serial.println(" %");

  delay(5000);
}

02/12/2023

Inserindo dados na tablela com PHP + ESP32 #10

Saída gerada no phpMyAdmin4















<?php
    $hostname = "localhost";
    $username = "root";
    $password = "";
    $database = "sensor_db";

    $conn = mysqli_connect($hostname, $username, $password, $database);

    if (!$conn) {
        die("Connection failed: ".mysqli_connect_error());
    }

    echo "Database connection is OK";
    echo ('<br>');

    $sql = "INSERT INTO dht11 (temperature, humidity) VALUES (24, 45)";

    if (mysqli_query($conn, $sql)) {
        # code...
        echo "\n";
        echo "\nNovo registro criado com sucesso !";
    }else {
        echo "\nErro: ". $sql . "<br>" .mysqli_error($conn);
    }
?>



Código em linguagem C para o ESP32:

//https://www.youtube.com/watch?v=VEN5kgjEuh8&ab_channel=AhmadLogs

#include <WiFi.h>
#include <HTTPClient.h>

String URL = "http://192.168.1.12/5 Esp32-Temperatura/test_data.php";

const char* ssid = "XXXX";
const char* password = "XXX";

int temperature = 50;
int humidity = 70;

void setup(){
  Serial.begin(115200);
  connectWiFi();
  
}

void connectWiFi(){
  WiFi.mode(WIFI_OFF);
  delay(1000);

  WiFi.mode(WIFI_STA);

  WiFi.begin(ssid, password);
  Serial.println("Conectando no WiFi");

  while(WiFi.status() != WL_CONNECTED){
    delay(500);
    Serial.print(".");
  }

  Serial.print("Conectado em: "); Serial.println(ssid);
  Serial.print("IP address: "); Serial.println(WiFi.localIP());
  delay(1000);
  
}

void loop(){
  if(WiFi.status() != WL_CONNECTED){
    connectWiFi();
 }

  String postData = "Temperatura = "+String(temperature)+"&humidity="+ String(humidity);

  HTTPClient http;
  http.begin(URL);

  int httpCode = http.POST(postData);
  String payload = http.getString();
  http.addHeader("Content-Type", "application/x-www-form-urlencoded");
  
  Serial.print("URL: ");Serial.print(URL);
  Serial.print("Data: ");Serial.print(postData);
  Serial.print("httpCode: ");Serial.print(httpCode);
  Serial.print("payload: ");Serial.print(payload);
  Serial.println("-------------------");
  delay(4000);
}

26/11/2023

Fonte linear retificadora

Objetivo: Desenvolver 1 fonte retificadora de 5 V .




Dados: 

Trafo = 24 V
Itrafo = 1 A
30% de Vcp


VCP:

Vp = Vs x 2 = 24 x √2
Vp = 33,94 V

Vcp = Vp - 2 x 0,7 = 33,94 - 2 x 0,2
Vcp = 32,54 V


CAPACITÂNCIA:

C = I / ( 2 x f x Vpp )
C = 1 / ( 2 x 60 (32,54 x 30% )
C = 853 uF = 900 uF

TENSÃO DE ISOLAÇÃO DO CAPACITOR:

Vcap = ( 32,54 x 50% ) + 32,43
Vcap = 48,81 V = 50 V


FUSÍVEL:

Psec = Vsec x Ic = 24 x 1
Psec = 24 W

Ipri = Vpri / Vpri = 24 / 127
Ipri = 378 mA


Saída gerada















09/07/2023

LCD CGRAM com método avançado

Objetivo: Fazer uma animação no LCD cgram utilizando matriz para reduzir linhas de código.

LCD cgram com matriz





















Código feito em CCS C Compiler

#include <16F877A.h>
#use delay(clock = 20MHz)
#include <lcd.c>
#define LIN 12 // limite que a RAM consegue processar
#define COL 8

int matriz[LIN][COL] = {
{0b00000, 0b00000, 0b00000, 0b00000, 0b00000, 0b00000, 0b00000},
{0b00000, 0b01000, 0b00000, 0b00000, 0b00000, 0b00000, 0b00000},
{0b00000, 0b01110, 0b00000, 0b00000, 0b00000, 0b00000, 0b00000},
{0b00000, 0b01110, 0b00001, 0b00000, 0b00000, 0b00000, 0b00000},
{0b00000, 0b01110, 0b00001, 0b00001, 0b00001, 0b00000, 0b00000},
{0b00000, 0b01110, 0b00001, 0b00001, 0b00001, 0b00001, 0b00000},
{0b00000, 0b01110, 0b00001, 0b00001, 0b00001, 0b00001, 0b00010},
{0b00000, 0b01110, 0b00001, 0b00001, 0b00001, 0b00001, 0b01110},
{0b00000, 0b01110, 0b00001, 0b00001, 0b00001, 0b10001, 0b01110},
{0b00000, 0b01110, 0b00001, 0b00001, 0b10001, 0b10001, 0b01110},
{0b00000, 0b01110, 0b00001, 0b10001, 0b10001, 0b10001, 0b01110},
{0b00000, 0b01110, 0b10001, 0b10001, 0b10001, 0b10001, 0b01110}  
};

void main(){
   lcd_init();
         
   while(TRUE){
   /*
      //matriz[0][i];
      lcd_set_cgram_char(0, matriz[i]);
      printf(lcd_putc, "\f%c \t\ni = %d", 0, i);
      delay_ms(1000);
      
      i++;
      if(i >= LIN){ i = 0;}*/
      for(int i = 0; i < COL; i++){        
         for(int j = 0; j < LIN; j++){
            
            lcd_set_cgram_char(0, matriz[j]);
            lcd_gotoxy(1, 1);
            printf(lcd_putc, "\f%c \t[%d][%d]", 0, i, j);
            
            delay_ms(500);
            
         }
      }
   }
}

29/06/2023

CRUD com PHP

Objetivo: Fazer um CRUD em PHP

Saída do designer em PHP














Arquivo 1: cadastrar_pessoa.php

<?php
// 6 funções
Class Pessoa{


    private $pdo;
    // CONEXÃO COM O BANCO DE DADOS
    public function __construct($dbname, $host, $user, $senha) // tudo ok
    {
        try
        {
            $this->pdo = new PDO("mysql:dbname=".$dbname.";host=".$host,$user);
        }
        catch (PDOException $e) {//erro para o PDO
            echo "Erro com o Banco de Dados: ".$e->getMessage();
            exit();
        }
        catch(Exception $e){ // Erros genéricos
            echo "Erro genérico: ".$e->getMessage();
            exit();
        }
    }
    //------- BUSCAR DADOS E EXIBIR NO LADO DIREITO DA TELA ----------
    public function buscarDados() // tudo ok
    {
        $res = array();
        $cmd = $this->pdo->query("SELECT * FROM pessoa ORDER BY id");
        $res = $cmd->fetchAll(PDO::FETCH_ASSOC);// economiza memória
        return $res;
    }
    // FUNÇÃO DE CADASTRAR PESSOAS NO BANCO DE DADOS
    public function cadastrarPessoa($nome, $telefone, $email)
    {
        // Antes de cadastrar verificar se já tem o EMAIL cadastrado
        $cmd = $this->pdo->prepare("SELECT id FROM pessoa WHERE email = :e");
        $cmd->bindValue(":e", $email);
        $cmd->execute();
        if ($cmd->rowCount() > 0)  //se > 0 email já existe no BD
        {
            return false;
        }else  // não foi encontrado no BD
        {
            $cmd = $this->pdo->prepare("INSERT INTO pessoa(nome, telefone, email)
            VALUES (:n, :t, :e)");
            $cmd->bindValue(":n", $nome);
            $cmd->bindValue(":t", $telefone);
            $cmd->bindValue(":e", $email);
            $cmd->execute();
            return true;
        }
    }
    // MÉTODO PARA EXCLUIR PESSOA
    public function excluirPessoa($id) // tudo ok
    {
        $cmd = $this->pdo->prepare("DELETE FROM pessoa WHERE id = :id");
        $cmd->bindValue(":id", $id);
        $cmd->execute();
    }

    // BUSCAR DADOS DE UMA PESSOA
    public function buscarDadosPessoa($id) // tudo ok
    {
        $res = array();
        $cmd = $this->pdo->prepare("SELECT * FROM pessoa WHERE id = :id");
        $cmd->bindValue(":id", $id);
        $cmd->execute();
        $res = $cmd->fetch(PDO::FETCH_ASSOC);//economiza memória
        return $res;
    }

    // ATUALIZAR DADOS NO BANCO DE DADOS
   
    public function atualizarDados($id, $nome, $telefone, $email){ // tudo ok
       
        $cmd = $this->pdo->prepare("UPDATE pessoa SET nome = :n, telefone = :t,
        email = :e WHERE id = :id");
        $cmd->bindValue(":n", $nome);
        $cmd->bindValue(":t", $telefone);
        $cmd->bindValue(":e", $email);
        $cmd->bindValue(":id", $id);
        $cmd->execute();
    }
}
?>


Arquivo 2: index.php

<?php
require_once 'classe_pessoa.php';
$p = new Pessoa("crudpdo", "localhost", "root", "");
?>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Cadastro de Pessoa</title>
    <link rel="stylesheet" href="estilo.css">
</head>
<body>
    <?php
    if (isset($_POST['nome']))
    //CLICOU NO BOTÃO CADASTRAR OU EDITAR
    {
        if (isset($_GET['id_up']) && !empty($_GET['id_up']))
        {
            $id_upd = addslashes($_GET['id_up']);
            $nome = addslashes($_POST['nome']);
            $telefone = addslashes($_POST['telefone']);
            $email = addslashes($_POST['email']);
            if (!empty($nome) && !empty($telefone) && !empty($email))
            {
                $p->atualizarDados($id_upd, $nome, $telefone, $email);
               
                header("location: index.php");
            }
            else
            {
                ?>
                    <div class="aviso">
                        <img src="aviso.png" alt="">
                        <h4>Preencha todos os campos !</h4>
                    </div>
                <?php
            }
        }
        // ---------------------------- CADASTRAR ----------------------------
        else
        {
            $nome = addslashes($_POST['nome']);
            $telefone = addslashes($_POST['telefone']);
            $email = addslashes($_POST['email']);
            if(!empty($nome) && !empty($telefone) && !empty($email))
            {
                //cadastrar
                if (!$p->cadastrarPessoa($nome, $telefone, $email))
                {
                    ?>
                        <div>
                            <img src="aviso.png" alt="">
                            <h4>Email já está cadastrado !</h4>
                        </div>
                    <?php
                }
            }
            else
            {
                ?>
                    <div class="aviso">
                        <img src="aviso.png" alt="">
                        <h4>Preencha todos os campos !</h4>
                    </div>
                <?php
            }
        }
    }
    ?>
    <?php
        if (isset($_GET['id_up'])) //SE A PESSOA CLICOU EM EDITAR
        {
            $id_update = addslashes($_GET['id_up']);
            $res = $p->buscarDadosPessoa($id_update);
        }

    ?>
    <section id = "esquerda">
        <form action="" method = "POST">
            <h2>CADASTRAR PESSOA</h2>
            <label for="nome">Nome</label>
            <input type="text" name = "nome" id = "nome"
            value="<?php if(isset($res)){echo $res['nome'];} ?>">
           
            <label for="telefone">Telefone</label>
            <input type="text" name="telefone" id="telefone"
            value="<?php if(isset($res)){echo $res['telefone'];} ?>">

            <label for="email">Email</label>
            <input type="email" name="email" id="email"
            value= "<?php if(isset($res)) {echo $res['email']; } ?>">

            <input type="submit"
            value= "<?php if (isset($res)) { echo "Atualizar"; }else { echo
    "Cadastrar"; } ?>">
        </form>
    </section>
    <section id="direita">
        <table>
            <tr id="titulo">
                <td>NOME</td>
                <td>TELEFONE</td>
                <td colspan="2">EMAIL</td>
            </tr>
            <?php
                $dados = $p->buscarDados();
                if(count($dados) > 0)//TEM PESSOAS NO BANCO DE DADOS
                {
                    for($i=0; $i < count($dados); $i++)
                    {
                        echo "<tr>";
                        foreach ($dados[$i] as $k => $v)
                        {
                            if($k != "id")
                            {
                                echo "<td>".$v."</td>";
                            }
                        }
                        ?>
                            <td>
                                <?php echo $dados[$i]['id'] ?>                              
                                <a href="index.php?id_up=<?php echo $dados[$i]['id']; ?>">Editar</a>
                                <a href="index.php?id=<?php echo $dados[$i]['id']; ?>">Excluir</a>
                            </td>
                        <?php
                        echo "</tr>";
                    }                    
                }
                else // O BANCO DE DADOS ESTÁ VAZIO
                {
                    ?>
                    </table>

                        <div class="aviso">
                            <h4>Ainda não há pessoas cadastradas !</h4>
                        </div>
                    <?php
                }
            ?>
        </table>
    </section>
</body>
</html>

<?php
    if (isset($_GET['id'])) {
        $id_pessoa = addslashes($_GET['id']);
        $p->excluirPessoa($id_pessoa);
        header("location: index.php");//atualiza a página após o clique
    }
?>


Arquivo 3: estilo.css

*{
    padding: 0px;
    margin: 0px;
    font-family: arial;
}

label, input{
    display: block;
    line-height: 30px;
    height: 30px;
    outline: none;
    font-size: 13pt;
    width: 100%;
}

form{
    width: 330px;
    background-color: rgba(0, 0, 0, 0.2);
    padding: 20px;
    margin: 30px auto; /*automático dos lados*/
}

input[type="submit"]{
    margin-top: 10px;
    cursor: pointer;
}

#esquerda{
    width: 35% ;
    height: 500px;
    float: left;
}

h2{
    text-align: center;
}

#direita{
    margin-top: 30px;
    width: 65%;
    height: 500px;
    float: left;

}

table {
    background-color: rgba(0, 0, 0, 0.2);
    width: 90%;
    margin: auto;
}

tr{
    line-height: 30px;
}

tr#titulo{
    font-weight: bold;
    background-color: rgba(0,0,0, .6);
    color: white;
}

td{
    padding: 0px 5px;
}

a{
    background-color: white;
    color: black;
    padding: 5px;
    margin: 0px 5px;
    float: left;
}

.aviso {
   
    width: 90%;
    height: 50px;
    margin: 30px auto 0px auto; /* margin no auto */
}
img {
    width: 50px;
    display: block;
    float: left; /*flutuar à esquerda*/
}
h4{
    float: left;
    line-height: 50px;
}


Créditos para: Mirian TechCod