Henrique

19/11/2022

Formulário com Bootstrap em HTML

<!-- FORMULÁRIOS -->
<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Bootstrap</title>

    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/
bootstrap.min.css" 
    rel="stylesheet" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5
IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi"
    crossorigin="anonymous">    
    <meta http-equiv="refresh" content="5"><!--atualiza a página a cada 3 segundos-->

</head>
<body class="container pt-5"> <!--text inverte a cor do texto-->
    <!-- tag de formulários -->
    <form action="">
        <p>Com Bootstrap</p>
        <input type="text" placeholder="Digite seu texto aqui" 
class="form-control">
        <input type="checkbox" class="form-check-input">
        <input type="radio" class="form-check-input">
        <input type="range" class="form-range">
        <select class="form-select">
            <option value="">Opção 1</option>
            <option value="">Opção 2</option>
        </select>
        <textarea class="form-comtrol">Com Bootstrap</textarea><!--form-control-->

        <br><br><p>Sem Bootstrap</p>
        <input type="text" placeholder="Digite seu texto aqui"><br>
        <input type="checkbox">
        <input type="radio">
        <input type="range">
        <select>
            <option value="">Opção 1</option>
            <option value="">Opção 2</option>
        </select>
        <textarea name="" id="" cols="30" rows="10">Sem Bootstrap</textarea>
    </form>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/
bootstrap.bundle.min.js" 
    integrity="sha384-OERcA2EqjJCMA+/3y+gxIOqMEjwtxJY7qPCqsdltbNJuaOe923+
mo//f6V8Qbsw3"
    crossorigin="anonymous">
    </script>
</body>
</html>

Saída gerada no navegador

17/11/2022

Colunas com Bootstrap em HTML

<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Bootstrap</title>

    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/
bootstrap.min.css" rel="stylesheet" integrity="sha384-Zenh87qX5JnK2Jl
0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi"
    crossorigin="anonymous">    
    <meta http-equiv="refresh" content="3"><!--atualiza a página a cada 3 s-->

</head>
<body> <!--text inverte a cor do texto-->
    <div class="container-fluid"> <!-- Centraliza todo o conteúdo dessa div-->
    
        <h1>Blog da engenharia cotidiana</h1>
        <div class="row bg-primary">
            <div class="col bg-warning col-12 col-xxl-2 
            col-xl-4 col-lg-6 col-md-8 col-sm-10"><!--xl=em 1 resolução de 6 espaço ocupe apenas 4-->
                <p>1</p>
                <p>2</p>
                <p>3</p>
                <p>4</p>
                <p>5</p>
                <p>6</p>
            </div>
            <div class="col bg-danger col-12 col-xxl-2 
            col-xl-4 col-lg-6 col-md-8 col-sm-10">
                <p>1</p>
                <p>2</p>
                <p>3</p>
                <p>4</p>
                <p>5</p>
                <p>6</p>
            </div>
            
        </div>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/
bootstrap.bundle.min.js" 
    integrity="sha384-OERcA2EqjJCMA+/3y+gxIOqMEjwtxJY7qPCqsdltbNJuaOe923+
mo//f6V8Qbsw3"
    crossorigin="anonymous">
    </script>
</body>
</html>

Saída gerada

16/11/2022

Grade com Bootstrap em HTML

<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Bootstrap</title>

    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/
    css/bootstrap.min.css" rel="stylesheet" 
    integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/
    et3URy9Bv1WTRi" crossorigin="anonymous">
    
    <!--atualiza a página a cada 3 segundos-->
    <meta http-equiv="refresh" content="3">

</head>
<body> <!--text inverte a cor do texto-->
    <h1>Blog da engenharia cotidiana</h1>
    <div class="row bg-dark">
        <div class="col bg-warning">
            <p>Linha 1 | Coluna 1</p>
        </div>
        <div class="col bg-danger">
            <p>Linha 1 | Coluna 2</p>
        </div>
        <div class="col bg-info">
            <p>Linha 1 | Coluna 3</p>
        </div>
    </div>

    <div class="row bg-primary">
        <div class="col bg-info">
            <p>Linha 2 | Coluna 1</p>
        </div>
        <div class="col bg-success">
            <p>Linha 2 | Coluna 2</p>
        </div>
        <div class="col bg-warning">
            <p>linha 2 | coluna 3</p>
        </div>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/
    bootstrap.bundle.min.js" integrity="sha384-OERcA2EqjJCMA+/3y+gxIOqME
    jwtxJY7qPCqsdltbNJuaOe923+mo//f6V8Qbsw3" crossorigin="anonymous">
    </script>
</body>
</html>

Saída gerada no navegador

15/11/2022

Multiplexação por divisão de frequência no MATLAB

Código feito no Matlab

% test_orthogonality.m

% Verificar a ortogonalidade entre alguns sinais senoidais

% com diferentes frequências/fases

clear, clf

T=1.6; ND=1000; nn=0:ND; ts=0.002; tt=nn*ts; % Intervalo de tempo

Ts = 0.1; M = round(Ts/ts); %Período de amostragem em tempo contínuo/discreto

nns = [1:M:ND+1]; tts = (nns-1)*ts; % Índices e tempos de amostragem

ks = [1:4 3.9 4]; tds = [0 0 0.1 0.1 0 0.15]; % Frequências e atrasos

K = length(ks);

for i=1:K

k=ks(i); td=tds(i); x(i,:) = exp(j*2*pi*k*(tt-td)/T);

if i==K, x(K,:) = [x(K,[302:end]) x(K-3,[1:301])]; end

subplot(K,2,2*i-1), plot(tt,real(x(i,:))),

hold on, plot(tt([1 end]),[0 0],'k'), stem(tts,real(x(i,nns)),'.')

end

N = round(T/Ts); xn = x(:,nns(1:N));

xn*xn'/N % verificar ortogonalidade

Xk = fft(xn.').'; kk = 0:N-1;

for i=1:K, k=ks(i); td=tds(i); subplot(K,2,2*i), stem(kk,abs(Xk(i,:)),'.')end

Saída gerada no Matlab online

14/11/2022

Salvar em outra planilha com Google Sheets

Salvar dados de 1 planilha para outra planilha no Google Sheets com mais de 1 linha

const ss = SpreadsheetApp.getActiveSpreadsheet();
const sheet1 = ss.getSheetByName("Dados");

// Link da planilha para qual deseja salvar
const ssId = "1Y7MX60VaqL9fQEd3ej3hvqvfKP0LE5w2IXBsws4WZcM";
const ssBase = SpreadsheetApp.openById(ssId);
// Nome da guia que deseja salvar
const sheetBase = ssBase.getSheetByName("BASE");

function copiareColarOutraPlanilha(){

  let validacao = sheetBase.getRange("A1").getValue();

  if(validacao == ""){

    var rowInicio = 1;
    var lastRow = 1;

  }else{

    var rowInicio = 2;
    var lastRow = sheetBase.getRange("A1").getNextDataCell(SpreadsheetApp.Direction.DOWN).getRow() + 1;

  }
  
  let area = sheet1.getRange("A" + rowInicio + ":B").getValues();
  sheetBase.getRange("A" + lastRow + ":B" + (lastRow + area.length - 1)).setValues(area);

}

13/11/2022

Divs em HTML5

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Div</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }

        #div1{
            background-color: red;
            width: 100px;
            height: 100px;
        }

        #div2{
            background-color: rgb(229, 255, 0);
            width: 100px;
            height: 100px;
            padding: 20px; /* Modifica apenas a distancia do texto para as bordas,
            aumenta o tamanho total da div */
            /*margin: 20px; /* Altera as instÂncias da div inteira */
        }
    </style>
</head>
<body>
    <div id="div1">Div 1</div>
    <div id="div2">Div 2</div>
</body>
</html>

12/11/2022

Formulários com HTML5

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Reccebendo dados por formulário</title>
</head>
<body>
    <form action="processa.php" method="post">
        <label>Text</label>
        <input type="text" name="texto1" placeholder="Text">
        <br>

        <label>password</label>
        <input type="password" name="senha">
        <br><br>

        <label>Oculto</label>
        <input type="hidden" name="informacao_oculta" value="mensagem oculta">

        <label>Select</label>
        <select name="selecao">
            <option value="1">Opção 1</option>
            <option value="2">Opção 2</option>
        </select>
        <br><br>

        <label>Radio</label><br>
        <input type="radio" name="radio1" value="1">Valor 1 <br>
        <input type="radio" name="radio1" value="2">Valor 2 <br>
        
        <br>
        <input type="checkbox" name="ck1" value="1">Valor 1 <br>
        <input type="checkbox" name="ck1" value="2">Valor 2 <br>
        <input type="checkbox" name="ck1" value="3">Valor 3 <br>
        <br>
        
        <input type="submit" value="Enviar" name="submit">
    </form> <!--tag form-->

</body>
</html>

11/11/2022

Motor DC com PIC 16F877A

Controle de velocidade do motor DC

Botão 1: gira 90°

Botão 2: gira 45°

Botão 3: gira 15°

Código feito em CCS C Compiler

#include <16F877A.h>

#fuses XT, NOWDT, NOPROTECT, PUT, BROWNOUT

#use delay(clock = 4MHz)

#define BOTAO1 PIN_B1

#define BOTAO2 PIN_B2

#define BOTAO3 PIN_B3

void main(){

setup_timer_2(T2_DIV_BY_1, 249, 1);

setup_ccp1(CCP_PWM);

disable_interrupts(GLOBAL);

port_b_pullups(TRUE);

while(TRUE){

if(!input(BOTAO1)){

set_pwm1_duty(255);// 90°

}else if(!input(BOTAO2)){// 45°

set_pwm1_duty(153);

}else if(!input(BOTAO3)){ // 15°

set_pwm1_duty(51);

}else{

set_pwm1_duty(0);

}

Crédito para: https://docplayer.com.br/84893568-Omicrocontrolador-pic16f877a-apresenta-dois-modulos.html

Tabelas com HTML

<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Tabelas</title>
</head>
<body>
    <table>
        <tr><th>A1</th> <th>A2</th> <th>A3</th> </tr>
        <tr><th>B1</th> <th>B2</th> <th>B3</th> </tr>
        <tr><th>C1</th> <th>C2</th> <th>C3</th> </tr>
    </table>
</body>
</html>

10/11/2022

Linhas horizontais e listas com HTML

<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Aprendendo sobre tags</title>
</head>
<body>
    <p>Olá mundo!</p>
    <hr>
    <h1>Título 1</h1>
    <h2>Título 2</h2>
    <h3>Título 3</h3>
    <h4>Título 4</h4>
    <h5>Título 5</h5>
    <p>Texto comum</p>
    <hr>

    <!--Lista ordenada-->
    <ol>
        <li>Primeiro elemento</li>
        <li>Segundo elemento</li>
        <li>Terceiro elemento</li>
    </ol>
    <!-- Lista não ordenada -->
    <ul>
        <li>Primeiro elemento</li>
        <li>Segundo elemento</li>
        <li>Terceiro elemento</li>
    </ul>
</body>
</html>

Saída gerada no navegador

09/11/2022

Parágrafos e formatações com HTML5

<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Minha primeira página</title>
</head>
<body>
    <header></header>
    <div>Olá mundo!</div>
    <footer></footer>
    <p>
        <b>Texto em negrito</b><br>
        <i>Texto em itálico</i><br>
        <u>Texto sublinhado</u><br>
        <sub>Texto subscrito</sub><br>
        <sup>Texto sobrescrito</sup><br>
        <big>Texto com fonte maior do que o padrão</big><br>
        <small>Texto com fonte menor do que o padrão</small><br>
        <em>Texto em itálico</em><br>
        <strong>Texto em negrito</strong>
        <style>
            p {color: greenyellow;} /*texto em verde limão*/
            body{background-color: red; }/*plano de fundo*/
        </style>
    </p>
</body>
</html>

Saída gerada no navegador

07/11/2022

Inserir linhas em outra planilha no google sheets

Objetivo: Inserir quantidade x de linhas em outra planilha com google sheets

Planilha atual

Script para inserir várias linhas em outra planilha

function InserirLinhasNovaPlanilha(){
  var ss = SpreadsheetApp.getActiveSpreadsheet();
  var sheet1 = ss.getSheetByName("Rota"); // Guia da planilha usada
  
  //link da planilha onde deseja inserir
  var ssBase = SpreadsheetApp.openById("1kVaDyY_vSwNQbjCyuKKWczucfpWInhNSU0arlOnuN_4");
  var sheetBase = ssBase.getSheetByName("H1");// nome da aba que deseja salvar
  var ultimaLinha = guiaMenu.getLastRow();
  
  for (let i = 0; i < ultimaLinha; i++){
    ssBase.getRange('1:1').activate();
    ssBase.getActiveSheet().insertRowsBefore(ssBase.getActiveRange().getRow(), 1);
    ssBase.getActiveRange().offset(0, 0, 1, ssBase.getActiveRange().getNumColumns()).activate();
  }
}

Saída gerada

01/11/2022

Ciclo com PIC 16F877A

Objetivo: Fazer um frequenciometro com pic 16F877A e exibe em tela seu pulso.

Resolução feita em CCS C Compiler

#include <16F877A.h>

#fuses xt, nowdt, noprotect, put, brownout

#use delay(clock = 4M)

#define RS PIN_E0

#define EN PIN_E1

void Inicializa(void);

void Lcd_Inst(char dado);

void Lcd_Dado(char dado);

int16 periodo1, periodo2;

int32 periodo;

boolean flag = 0;

void main(){

Inicializa();

Lcd_Inst(0x82);

printf(lcd_dado, "\fPeriodo\n");

while(TRUE){

//TODO: User Code

Lcd_Inst(0xC2);

printf(lcd_dado, "TEMPO = %lu us", periodo);

}

#int_ccp1

void ccp1_int(){

if (flag == 0){

periodo1 = CCP_1;

flag = 1;

}else{

periodo2 = CCP_1;

periodo = ((periodo2 - periodo1) * 2);

Set_Timer1(0);

flag = 0;

}

void Inicializa(void){

Setup_Timer_1(T1_INTERNAL|T1_DIV_BY_2);

Setup_ccp1(CCP_CAPTURE_RE);

Enable_Interrupts(GLOBAL);

Enable_Interrupts(INT_CCP1);

Lcd_Inst(0x38);

delay_ms(1);

Lcd_Inst(0x38);

Lcd_Inst(0x0C);

Lcd_Inst(0x06);

Lcd_Inst(0x01);

delay_ms(1);

}

void Lcd_Inst(char dado){

Disable_Interrupts(GLOBAL);

output_low(RS);

output_d(dado);

delay_cycles(2);

output_high(EN);

delay_ms(1);

output_low(EN);

Enable_Interrupts(GLOBAL);

}

void Lcd_Dado(char dado){

Disable_Interrupts(GLOBAL);

output_high(RS);

output_d(dado);

delay_cycles(2);

output_high(EN);

delay_ms(1);

output_low(EN);

Enable_Interrupts(GLOBAL);

}

Software: Proteus 7.9

Créditos para: https://docplayer.com.br/84893568-Omicrocontrolador-pic16f877a-apresenta-dois-modulos.html

17/10/2022

Contador LDR com CI 555 + 74LS90,47

Objetivo: Realizar um contador através de um LDR com CI 555

Componentes:

1 Resistor 220 Ω

1 Resistor 2,2 KΩ

1 Resistor 10 KΩ

1 CI 555

1 CI 74LS90

1 LDR

1 CI 74LS47

1 Display anodo

1 Capacitor cerâmico 47 uF

Simulação no software Proteus versão 7.9

Pesquisar neste blog

19/11/2022

Formulário com Bootstrap em HTML

17/11/2022

Colunas com Bootstrap em HTML

16/11/2022

Grade com Bootstrap em HTML

15/11/2022

Multiplexação por divisão de frequência no MATLAB

14/11/2022

Salvar em outra planilha com Google Sheets

13/11/2022

Divs em HTML5

12/11/2022

Formulários com HTML5

11/11/2022

Motor DC com PIC 16F877A

Tabelas com HTML

10/11/2022

Linhas horizontais e listas com HTML

09/11/2022

Parágrafos e formatações com HTML5

07/11/2022

Inserir linhas em outra planilha no google sheets

01/11/2022

Ciclo com PIC 16F877A

17/10/2022

Contador LDR com CI 555 + 74LS90,47

Total de visualizações de página

Marcadores

Translate