Iniciando uma pequena Aplicação para controlar atividades no Raspberry

Depois de concluir a faculdade, uma área que eu achei bem legal foi o desenvolvimento web, e resolvi tentar fazer um projeto pessoal na área.

Normalmente eu controlo coisas como áudio e vídeo no raspberry acessando ele remotamente via ssh, mas eu gostaria de controlar do celular ou de qualquer outro dispositivo, e uma forma de fazer isso é com uma aplicaçãozinha web. Eu ja fiz algumas coisas simples como ligar e desligar a música, videos, e apesar de só ser acessível dentro da rede interna aqui que o roteador de casa faz, eu gostaria de fazer algo mais organizado, usando senha.

O que eu quero é fazer algo assim:

Um banner superior com um menu lateral, e algumas informações acima do banner, no centro da tela então eu uma tela com os controles, de som por exemplo.

Então mais especificamente, eu quero fazer algo assim:

Se você entrar na página deslogado, eu peço uma senha, e uma vez que você tenha se autenticado:

A gente começa a aplicação, e deixa algumas informações de login, como quem está logado.

Bem, como eu não conheço muitas tecnologias, o que está mais a mão no raspberry é o php, então eu resolvi usar o php no lado do servidor e html, css e javascript para fazer algumas páginas e formulários. Além disso, vou tentar organizar tudo usando o MVC, model, view e controller.

Eu instalei o apache e o php no raspberry segundo os tutoriais da própria página do raspberry, então dentro da pasta /var/www/html eu criei uma pasta chamada rasp_apps para colocar meu código. O conteúdo dessa pasta está no repositório de mesmo nome aqui, de forma que código fica público, e é fácil administrar mudanças, backup, etc. Acho que não estou adicionando muita coisa aqui, essas são mais notas mentais do que uma explicação do que estou fazendo de verdade.

Mas tudo bem, vamos ao código em si.

Dentro da pasta inicial da minha aplicação, temos um index.php, e nele temos:

1
2
3
4
5
6
7
<?php
require_once 'Controller/controller.php';
ob_start();
session_start(['cookie_lifetime' => 86400,]);
$controller = new Controller();
$controller->init();
?>

Bem, aqui a gente inicia um cookie, que é a forma de manter alguém conectado, de outra forma, não teríamos como manter as variáveis, depois vou tentar escrever sobre a comunicação web, mas depois disso a gente cria um objeto da classe controller que criamos e iniciamos ele, com a função init.

Eu não fiz uma pasta model ainda, pois ainda não comecei a usar banco de dados, até aqui eu só fiz um formulário para entrar com usuário e senha e validar. E como eu faço isso? Para isso server o controller, ele controla tudo, e chama as visualizações.

Quando a gente roda

1
$controller = new Controller();

nos construímos o objeto, que nesse caso, tudo que a gente faz é

1
2
3
4
public function __construct() {
        ini_set('error_reporting', E_ALL);
        ini_set('display_errors', 1);
    }

Habilitar a apresentação dos erros do php, que ajudam a entender porque tudo não funciona, e depois nos rodamos o init

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
 
 public function init() {       
 
        if (isset($_SESSION['valid'])){
 
            if (isset($_GET['op'])) {
                $op = $_GET['op'];
            } else {
                $op = "";
            }
 
            switch ($op) {
            case 'cfg':
                $this->cfg();
                break;
            case 'logout':
                $this->logout();
                break;
            default:
                $this->index();
                break;
            }
 
        }else{
            $this->login();
        }
 
    }

Esse método, é basicamente um ifelse para saber se a pessoa está autenticada,

1
2
3
4
5
6
7
8
9
10
 
if (isset($_SESSION['valid'])){
 
 
             ###Código
            
 
        }else{
            $this->login();
        }

Senão nos vamos logar, e quanto estivermos logados, vamos cair num switch, que vai administrar as possibilidades da aplicação. Mas então para logar, chamamos o método login.

1
2
3
4
5
6
7
8
9
10
public function login() {
        if (isset($_POST['login']) && !empty($_POST['usuario']) && !empty($_POST['senha'])) {
                $this->valida_login();
        } else{
            if(isset($_SESSION['mensagem'])==false){
                $_SESSION['mensagem']='';
            }            
            require 'View/login.php';
        }
    }

O login, vai olhar se foi enviado algo pelo método post, se o usuário enviou algum dado, como é a primeira entrada no método, nenhuma dessas variáveis existem, então vamos ao else, que olhar se tem alguma mensagem, para apaga-la, e como não tem nada, ele só chama a tela de login.

O que de fato interessa na tela de login é o seguinte:

1
2
3
4
5
6
7
8
9
<?php echo $_SESSION['mensagem']?>
 
	<form action="?op=''" method="post" ?>
 
	    <input type = "text"  name = "usuario" placeholder = "Usuário = teste" required autofocus></br>
	    <input type = "password"  name = "senha" placeholder = "Senha = 1234" required>
	    <button type = "submit" name = "login">Login</button>
 
	</form>

Aquela mensagem, ela vai ser exibida, se tiver algo nela, e temos um formulário, que preenche exatamente aquelas informações de usuário e senha e tem um botão que envia essas informações ao controller, veja que a gente preenche duas coisas, o usuário e a senha, enviando via post.

Agora, vamos denovo passar pelo init, não estamos autenticados ainda, o que nos leva para o método login, mas agora temos um usuário e senha então vamos para o método valida_login

1
2
3
4
5
6
7
8
9
10
11
public function valida_login() {
            if ($_POST['usuario'] == 'teste' && $_POST['senha'] == '1234') {
                $_SESSION['valid'] = true;
                $_SESSION['timeout'] = time();
                $_SESSION['usuario'] = 'Rasp_levins';
            }else {
                unset($_POST);
                $_SESSION['mensagem'] = 'Usuário ou senha incorreto!';
            }
            $this->init();
    }

Agora a gente pode finalmente testar se o usuário e senha conferem, e nesse caso, validar a sessão, ou se o usuário digitou o conjunto usuário e senha errados, nós geramos uma mensagem de erro, e não validamos a sessão.

A princípio, é tudo bem simples, e temos somente um usuário e senha no método de avaliação. Agora o próximo passo é criar uma base de dados com usuário e senha para fazer essa consulta, de forma a não ficar os usuários e senhas ali no meio do código, bem existem muitas coisas a serem feitas ainda, mas fazer a conexão com um banco de dados já possibilita várias outras coisas.

Bem é isso ai, o script vai estar la no repositório rasp_aaps, e se eu escrevi alguma bobeira, algo errado, deixe um comentário corrigindo ou mande um e-mail.

Raspberry em modo Kiosk

Opa, não é que fazem 2 meses que eu não posto nada aqui, que vergonha de mim mesmo heheh.

Bem, eu tenho um computador chamado Raspberry pi, basicamente é um computador que é apenas um placa única, ele é bem fraquinho, não vai ser seu notebook, mas da para fazer muitas coisas legais com ele, além de ser muito barato. Eu tenho tentando usar esse tipo de computador, assim como placas de microcontrolador desde a época que escrevi sobre isso aqui e aqui. Bem, você ter essas coisas, arduinos e raspberrys, na maior parte das vezes, é mais fácil que tornar eles em algo útil. Mas vou tentar mostrar como tenho usado o meu, até para eu ter um lembrete de como consertar ele quando eu fizer alguma cagada, porque vira e mexe, eu consigo fazer ele parar de funcionar, mas a experimentação é muito legal.

Bem, uma coisa que eu acho legal, é o que eles chamam de Kiosk Mode, que é deixar uma tela mostrando alguma informação, em muitos lugares a gente vê monitores mostrando propagandas, números de fila, essas coisas, basicamente, o Kiosk Mode é ter um monitor mostrando alguma informação. Como o meu Raspberry fica ligado na tv, eu achei que ao invés de uma tela preta, eu poderia mostrar algo mais legal, deixando ele ligado.

A primeira coisa, é instalar o SO nele, eu uso o Raspbian, mas não instale a versão Lite, pois vamos precisar usar um Brownser, no caso o chromium, que vem com o SO.
As instalação do SO é so seguir o tutorial da página do raspberry, que é um mega projeto legal, mas instalando ele, criando um arquivo ssh sem nada no boot para poder acessar ele remotamente, e colocando ele na rede interna do roteador de casa com um ip fixo, que não cabe aqui explicar, eu faço o seguinte:

Primeiro, após um update, eu instalo o emacs, pois é o melhor editor para o terminal.

1
2
3
sudo apt-get update
sudo apt-get upgrade
sudo apt-get install emacs

Dai o que vamos fazer é ligar o raspberry e depois automaticamente ligar o navegador e modo tela cheia em uma página de interesse nosso.

Bem, um pacote que vamos precisar é o unclutter, que basicamente faz o ponteiro do mouse sumir.

1
sudo apt-get install unclutter

Agora, toda vez que o raspberry é iniciado, ele roda um arquivo chamado autostart, então nesse arquivo, a gente pode colocar comandos para que quando o raspberry seja iniciado, a gente rode esses comandos, iniciar um programa qualquer, mais especificamente, a gente quer iniciar o navegador em modo de tela cheia. Então eu uso o emacs para alterar esse arquivo.

1
emacs ~/.config/lxsession/LXDE-pi/autostart

Detalhe, que o modo gráfico inicia automaticamente, e inicia como o usuário pi, que é padrão da instalação, por isso usamos o autostart do usuário pi, mas cada usuário pode ter um autostart diferente, ou seja, esse autostart não é independente de do usuário ativo. Mas vamos comentar duas linhas dele(o autostart do usuário pi), que é a que liga o protetor de tela, porque ter alguma informação por 5 minutos e depois tela preta não é o intuito aqui, e tirar o comando que move o ponteiro para o iniciar do menu gráfico.

Agora as linhas do xset são para desligar o controle de economia de energia para com o desligamento da tela após um período de inatividade.
A próxima linhas do @sed é para o caso do raspberry reiniciar sem usar o shutdown corretamente, por exemplo em pique de energia, e a próxima linha é para iniciar o navegador, em kiosk mode, que é tela cheia.

Para experimentar, primeiro colocamos a página do google, e iniciamos no modo incognito e desabilitamos aquelas mensagens chatas de traduzir a página.

1
2
3
4
5
6
7
8
9
10
11
12
13
@lxpanel --profile LXDE-pi
@pcmanfm --desktop --profile LXDE-pi
 
##Kiosk	Mode
 
#@xscreensaver -no-splash
#@point-rpi
 
@xset s off
@xset -dpms
@xset s noblank
@sed -i 's/"exited_cleanly": false/"exited_cleanly": true/' ~/.config/chromium-browser Default/Preferences
@chromium-browser --noerrdialogs --kiosk http://google.com --incognito --disable-translate

Bem, agora já estamos começando o raspberry rodando o chromium em tela cheia na página do google, mas não é isso que queremos ainda.

Vamos instalar o lamp, para podermos construir uma página que mostre alguma informação útil.

A primeira coisa que fiz foi extrair algumas informações básicas do raspberry e exibir usando um script de php da seguinte forma.

O meu raspberry principal eu chamo de rasp_levins em homenagem ao Richard Levins, que uma pena ter falecido, o sonho da minha vida foi ter ido fazer algum tipo de trabalho com ele, ainda mais que ele era super gente boa respondendo email de perguntas estupidas minhas, mas tudo bem.

Então três informações úteis são a quanto tempo o rasp_levins ta ligado, quanto foi o último boot, a temperatura do processador e o uso do CPU, essas informações a gente consegue usando comandos do terminal, que basta dar um shell_exec no php e dar um parse na saída.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<h2>rasp_levins Status</h2>
 
 
<p><b>Tempo Ligado:</b><br>
    <?php echo shell_exec('uptime -p');?></p>
 
<p><b>Último boot:</b><br>
    <?php echo shell_exec('uptime -s');?></p>
 
<p><b>Temperatura:</b><br>
    <?php
    $temperatura = intval(shell_exec('cat /sys/class/thermal/thermal_zone0/temp'))/1000.00;
    echo round($temperatura,2);
    ?> graus celsius.
</p>
 
<p><b>CPU:</b><br>
    <?php
    $uso_cpu = sys_getloadavg();
    echo number_format($uso_cpu[0],2);
    ?>%.
</p>

Então esses script exibe o seguinte:

Como e tenho mais de um raspberry na rede, o outro eu tenho o mesmo script dentro dele, mas ai no rasp_levins eu fiz o seguinte script:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<?php
 
try {
    $homepage = file_get_contents('http://192.168.0.4/info_padrao.php');
 
 
if ($homepage===false) {
    echo "<h2>rasp_hanski Status</h2>";
    echo "<p><b>Offline</b></p>";
}
 
}catch (Exception $e) {
    /*Lembrete
      Keep in mind that if you use a URL as the filename attribute, and the external
      resource is not reachable, the function will not return FALSE but instead an
      exception will be thrown.
    */
    echo '<p>Exceção capturada: ',  $e->getMessage(), "</p>";
}
echo $homepage;
?>

Ilkka Hanski é meu outro idolo das teoria de metapopulações. Bem aqui eu tento acessar ele para pegar as informações, se não conseguir, eu deixo apenas exibo a informação que ele está offline.

Agora é so colocar essas informações numa página, no caso eu uso o index.php de uma pasta dentro do apache.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<!DOCTYPE html>
<html>
 
  <head>
 
    <title>Quarto</title>
    <meta http-equiv="refresh" content="7200">
    <link rel="stylesheet" type="text/css" href="estilo.css">
    <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
    <script type="text/javascript" src="scripts.js"></script>
 
  </head>
 
  <body>
 
 
    <div class="info_status">
      <div id="levins_info_padrao" class="levins_info_padrao">
	<p>Iniciando!!!</p>    
      </div>
 
      <div id="hanski_info_padrao" class="hanski_info_padrao">
	<p>Iniciando!!!</p>    
      </div>
    </div>
 
 
  </body>
</html>

E veja que nessa página chamamos um script chamado script.js no cabecalho, que basicamente vai escrever em um div a saída daqueles scripts de php com um intervalo de tempo.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
function update_levins_info_padrao () {
    $('#levins_info_padrao').load('info_padrao.php');
}
 
function update_hanski_info_padrao () {
    $('#hanski_info_padrao').load('hanski_info_padrao.php');
}
 
function update_info_padrao () {
    update_levins_info_padrao();
    update_hanski_info_padrao();
}
 
var tempo_info_padrao  = setInterval(update_info_padrao, 5000);

E agora temos algumas informações legais ao ligar a TV, temos uma página padrão sendo exibida, com algumas informações sobre o raspberry.

E o rasp_levins está do lado da TV, eu deixo um hd externo ligado nele, pois uso ele para guardar arquivos, principalmente para arquivos via P2P usando Torrent e backups o meu roteador.

Bem é isso ai, eu fiz um repositório especifico para esse projetinho do kiosk mode no https://github.com/Squiercg/kiosk_mode, mais porque ainda quero expandir ele, primeiramente medindo a temperatura ambiente do meu quarto usando um arduino e um esp8266, e se eu escrevi alguma bobeira, algo errado, deixe um comentário corrigindo ou mande um e-mail.