colmeia

Colmeia RGB com LEDs Endereçáveis e BlackBoard Edge H

Neste projeto vamos montar uma Colmeia iluminada com LEDs RGB endereçáveis, utilizando peças impressas em 3D e uma BlackBoard Edge H para controlar toda a iluminação.

A estrutura foi desenvolvida de forma modular. Cada Colmeia possui suporte para a fita de LED, passagem inferior para os fios e uma tampa que esconde a fita e dá acabamento à iluminação.

Além do controle das cores, a programação permite configurar pela própria interface Web quantas Colmeias existem e como elas estão posicionadas. Com isso, efeitos como chuva e varredura podem considerar a disposição física de toda a estrutura.

Estrutura da Colmeia utilizada no projeto.

Lista de materiais

BlackBoard Edge H
Fita de LED RGB Endereçável WS2812B 5050 - 1 m
Mini Protoboard
Fios individuais para as ligações
Fonte de alimentação de bancada de 5 V
Fita dupla face
Filamento para impressão 3D
Ferro de solda e estanho

É interessante utilizar fios de cores diferentes para alimentação, GND e sinal. Isso facilita bastante a montagem e também futuras manutenções.

Arquivos para impressão 3D

As peças utilizadas neste projeto estão disponíveis no arquivo 3MF abaixo.

Baixar Colmeia20.3mf

O arquivo pode ser aberto em um programa de fatiamento compatível com 3MF para preparar as peças para impressão.

Se quiser procurar outros projetos ou arquivos relacionados à impressão 3D, acesse também a página de busca da RoboCore e pesquise por STL.

Pesquisar STL na RoboCore

Estrutura da Colmeia

A Colmeia é formada por módulos hexagonais que podem ser posicionados lado a lado.

Como a estrutura é modular, podemos montar diferentes formatos e quantidades de Colmeias. A posição de cada módulo é posteriormente informada à programação através da própria interface Web.

Colmeia montada — Módulos hexagonais formando a Colmeia.

Suporte da fita de LED

A fita de LED não fica instalada diretamente sobre a estrutura principal. Foi criada uma peça específica para servir como suporte.

Na parte inferior desse suporte existe uma passagem destinada à fiação. Dessa maneira, os fios podem passar de uma Colmeia para outra sem permanecer visíveis na parte frontal.

Suporte da fita de LED — Suporte para a fita de LED e passagem inferior dos fios.

Passe os fios pelas aberturas antes de fechar definitivamente as peças. Isso facilita bastante a montagem.

Fita de LED endereçável

Neste projeto utilizamos uma fita RGB endereçável WS2812B .

Diferentemente de uma fita RGB convencional, a WS2812B permite controlar os LEDs individualmente através de uma linha de dados.

Isso possibilita criar animações que percorrem diferentes partes da Colmeia, além de efeitos baseados na posição física de cada módulo.

Fixação da fita

A fita de LED foi instalada sobre os suportes impressos em 3D. A fita dupla face também pode ser utilizada para auxiliar na fixação das peças durante a montagem.

Antes da fixação, limpe a superfície para remover poeira ou resíduos da impressão.

Caso seja necessário cortar a fita WS2812B, utilize somente os pontos de corte indicados na própria fita.

Tampa da iluminação

Depois da instalação da fita, o conjunto recebe uma tampa impressa em 3D.

Essa peça esconde diretamente os LEDs e melhora o acabamento visual da Colmeia.

Tampa da fita de LED — Tampa utilizada para esconder a fita de LED.

Ligação elétrica

A fita WS2812B é alimentada por uma fonte externa de bancada de 5 V. A corrente necessária para os LEDs não deve ser fornecida diretamente pela BlackBoard Edge H.

O sinal de controle utilizado neste projeto está conectado ao GPIO 13.

GPIO 13 da BlackBoard Edge H ligado ao DIN da primeira fita WS2812B;
5 V da fonte externa ligado ao 5 V da fita;
GND da fonte externa ligado ao GND da fita;
GND da fonte externa ligado ao GND da BlackBoard Edge H.

O GND da fonte, da fita e da BlackBoard Edge H deve ser comum. Sem essa referência elétrica compartilhada, o sinal de dados pode não funcionar corretamente.

BlackBoard Edge H

GPIO 13
   |
   |
   +----------------------- DIN da fita WS2812B


Fonte de bancada 5 V

5 V
   |
   +----------------------- 5 V da fita WS2812B


GND
   |
   +----------------------- GND da fita WS2812B
   |
   +----------------------- GND da BlackBoard Edge H

Como funciona a configuração das Colmeias

Um dos recursos principais deste projeto é a possibilidade de informar à BlackBoard Edge H como as Colmeias estão fisicamente posicionadas.

Na interface Web existe um botão chamado CONFIGURAÇÃO. Ao abrir essa área, podemos definir a quantidade de linhas e colunas da malha.

A interface apresenta uma grade hexagonal. Basta clicar somente nas posições onde realmente existem Colmeias.

A ordem dos cliques também define a sequência elétrica.

Primeiro clique: Colmeia 1
Segundo clique: Colmeia 2
Terceiro clique: Colmeia 3
Quarto clique: Colmeia 4

Essa ordem deve acompanhar a ligação física das fitas.

Por exemplo:

       [1] [2]

    [3] [4] [5]

       [6] [7]

O programa passa a conhecer duas informações diferentes:

Ordem elétrica: indica qual Colmeia é a primeira, segunda, terceira e assim por diante.
Posição física: indica a linha e a coluna ocupadas por cada Colmeia.

Isso permite criar tanto efeitos sequenciais quanto efeitos que consideram a geometria completa do painel.

Efeitos disponíveis

Cor fixa

Acende todas as Colmeias com a mesma cor escolhida na interface.

Sequência

Utiliza a numeração configurada e acende progressivamente as Colmeias.

Ao chegar à última Colmeia, o efeito reinicia.

Movimento

Uma luz percorre a sequência numérica das Colmeias.

O módulo principal permanece com maior intensidade e os módulos anteriores formam uma pequena cauda luminosa.

Chuva

Pontos luminosos surgem na parte superior da estrutura e percorrem as Colmeias de cima para baixo.

Esse efeito utiliza a posição física dos módulos e não somente sua numeração.

Varredura espacial

A Varredura Espacial também utiliza a geometria definida no painel.

Podemos selecionar os seguintes movimentos:

Esquerda para direita;
Direita para esquerda;
Cima para baixo;
Baixo para cima;
Centro para as bordas;
Bordas para o centro.

Acessando a interface Web

Depois de carregar o programa na BlackBoard Edge H, procure no celular ou computador pela rede Wi-Fi criada pela própria placa.

COLMEIA_EDGE

A senha utilizada no programa é:

robocore

Depois de conectado à rede, abra o navegador e digite:

http://192.168.0.1

A interface permite controlar a cor, brilho, velocidade, efeitos e configuração física das Colmeias.

A configuração das Colmeias é armazenada na memória da BlackBoard Edge H. Assim, não é necessário configurar novamente a disposição dos módulos cada vez que o sistema for ligado.

Bibliotecas necessárias

O programa utiliza as seguintes bibliotecas:

WiFi.h
WebServer.h
Adafruit NeoPixel
Preferences.h

A biblioteca Adafruit NeoPixel pode ser instalada através do Gerenciador de Bibliotecas da Arduino IDE.

As bibliotecas WiFi, WebServer e Preferences fazem parte do pacote de suporte do ESP32.

Código

Carregue o programa abaixo na BlackBoard Edge H utilizando a Arduino IDE.

O programa imprime no Monitor Serial o mapeamento das portas utilizadas, a quantidade de Colmeias configuradas, a quantidade de LEDs e a posição de cada módulo.

/*******************************************************************************
 * PROJETO: COLMEIA RGB - BLACKBOARD EDGE H
 *
 * Controle de modulos hexagonais com fita LED enderecavel WS2812B.
 *
 * HARDWARE:
 * - BlackBoard Edge H
 * - Fita WS2812B
 * - GPIO 13: DATA
 * - Fonte externa 5 V
 * - GND comum
 *
 * RECURSOS:
 * - Interface Web
 * - Configuracao visual das Colmeias
 * - Malha hexagonal
 * - Ordem eletrica definida pelos cliques
 * - Quantidade de LEDs por Colmeia configuravel
 * - Configuracao salva na memoria do ESP32
 * - Pagina Web sem cache
 *
 * EFEITOS:
 * - Cor fixa
 * - Sequencia
 * - Movimento
 * - Chuva
 * - Varredura espacial
 *
 * Conceito e direcao: Alexandre Casemonstro
 * Desenvolvimento: Alexandre Casemonstro & Clio
 *******************************************************************************/


// ============================================================================
// 1. BIBLIOTECAS
// ============================================================================

#include <WiFi.h>
#include <WebServer.h>
#include <Adafruit_NeoPixel.h>
#include <Preferences.h>
#include <math.h>


// ============================================================================
// 2. MAPEAMENTO DE PINOS
// ============================================================================

#define PIN_LED_DATA 13


// ============================================================================
// 3. LIMITES DO PROJETO
// ============================================================================

#define MAX_COLMEIAS 40
#define MAX_COLUNAS 12
#define MAX_LINHAS 12
#define MAX_LEDS_POR_COLMEIA 120

#define BRILHO_MAXIMO 180


// ============================================================================
// 4. CONFIGURACAO WI-FI
// ============================================================================

const char* WIFI_AP_NOME = "COLMEIA_EDGE";
const char* WIFI_AP_SENHA = "robocore";

IPAddress IP_LOCAL(192, 168, 0, 1);
IPAddress GATEWAY(192, 168, 0, 1);
IPAddress SUBNET(255, 255, 255, 0);


// ============================================================================
// 5. OBJETOS
// ============================================================================

WebServer server(80);

Preferences preferences;

Adafruit_NeoPixel strip(
  1,
  PIN_LED_DATA,
  NEO_GRB + NEO_KHZ800
);


// ============================================================================
// 6. ESTRUTURA DAS COLMEIAS
// ============================================================================

struct Colmeia {

  uint8_t linha;
  uint8_t coluna;

};


Colmeia colmeias[MAX_COLMEIAS];

uint8_t quantidadeColmeias = 0;

uint8_t numeroColunas = 5;
uint8_t numeroLinhas = 3;

uint16_t ledsPorColmeia = 1;
uint16_t totalLeds = 1;


// ============================================================================
// 7. COR
// ============================================================================

uint8_t corR = 255;
uint8_t corG = 120;
uint8_t corB = 0;


// ============================================================================
// 8. AJUSTES DOS EFEITOS
// ============================================================================

uint8_t brilho = 120;

uint16_t velocidade = 150;


// ============================================================================
// 9. MODOS
// ============================================================================

enum ModoEfeito {

  EFEITO_DESLIGADO,
  EFEITO_FIXO,
  EFEITO_SEQUENCIA,
  EFEITO_MOVIMENTO,
  EFEITO_CHUVA,
  EFEITO_VARREDURA

};


ModoEfeito efeitoAtual = EFEITO_DESLIGADO;


// ============================================================================
// 10. DIRECAO DA VARREDURA
// ============================================================================

enum DirecaoVarredura {

  VARRE_ESQ_DIR,
  VARRE_DIR_ESQ,
  VARRE_CIMA_BAIXO,
  VARRE_BAIXO_CIMA,
  VARRE_CENTRO_FORA,
  VARRE_FORA_CENTRO

};


DirecaoVarredura direcaoVarredura = VARRE_ESQ_DIR;


// ============================================================================
// 11. CONTROLE DOS EFEITOS
// ============================================================================

unsigned long ultimoFrame = 0;

int passoSequencia = 0;

int cabecaMovimento = 0;

float posicaoVarredura = 0;


// ============================================================================
// 12. CHUVA
// ============================================================================

struct Gota {

  bool ativa;
  int linha;

};


Gota gotas[MAX_COLUNAS];


// ============================================================================
// 13. HTML DA INTERFACE WEB
// ============================================================================

const char PAGINA_HTML[] PROGMEM = R"HTML(

<!DOCTYPE html>

<html lang="pt-br">

<head>

<meta charset="UTF-8">

<meta
  name="viewport"
  content="width=device-width, initial-scale=1.0">

<meta
  http-equiv="Cache-Control"
  content="no-cache, no-store, must-revalidate">

<meta
  http-equiv="Pragma"
  content="no-cache">

<meta
  http-equiv="Expires"
  content="0">

<title>Colmeia RGB</title>


<style>

*{
  box-sizing:border-box;
}

body{

  margin:0;
  padding:20px;

  background:#121212;
  color:#eeeeee;

  font-family:Arial, Helvetica, sans-serif;

}

h1{

  margin-top:0;
  font-size:25px;

}

h2{

  font-size:19px;
  margin-top:25px;

}

.painel{

  max-width:900px;
  margin:auto;

}

.card{

  background:#1e1e1e;

  border:1px solid #333;

  border-radius:12px;

  padding:18px;

  margin-bottom:15px;

}

.botoes{

  display:flex;

  flex-wrap:wrap;

  gap:8px;

}

button{

  border:0;

  border-radius:8px;

  padding:11px 16px;

  background:#333;

  color:white;

  cursor:pointer;

  font-size:14px;

}

button:hover{

  background:#444;

}

button.config{

  background:#275d92;

}

button.aplicar{

  background:#087f5b;

}

button.limpar{

  background:#8b3030;

}

input,
select{

  padding:8px;

  border-radius:6px;

  border:1px solid #555;

  background:#252525;

  color:white;

}

input[type="number"]{

  width:75px;

}

input[type="range"]{

  width:220px;

}

.linha-controle{

  display:flex;

  flex-wrap:wrap;

  align-items:center;

  gap:12px;

  margin:12px 0;

}

#areaConfiguracao{

  display:none;

}

#mapa{

  position:relative;

  margin-top:20px;

  min-height:180px;

  overflow:auto;

  padding:20px;

  border:1px solid #333;

  background:#171717;

}

.hex{

  position:absolute;

  width:60px;
  height:52px;

  display:flex;

  justify-content:center;
  align-items:center;

  cursor:pointer;

  user-select:none;

  background:#333;

  color:#aaa;

  font-weight:bold;

  clip-path:polygon(
    25% 0%,
    75% 0%,
    100% 50%,
    75% 100%,
    25% 100%,
    0% 50%
  );

}

.hex:hover{

  background:#555;

}

.hex.selecionada{

  background:#087f5b;
  color:white;

}

.status{

  color:#aaa;

  font-size:14px;

  line-height:1.5;

}

.aviso{

  padding:10px;

  border-left:4px solid #d39e00;

  background:#2b2617;

  margin-top:15px;

}

</style>

</head>


<body>


<div class="painel">


<h1>Colmeia RGB</h1>


<div class="card">


<h2>Iluminacao</h2>


<div class="botoes">

<button onclick="efeito('off')">
DESLIGAR
</button>

<button onclick="efeito('fixo')">
COR FIXA
</button>

<button onclick="efeito('sequencia')">
SEQUENCIA
</button>

<button onclick="efeito('movimento')">
MOVIMENTO
</button>

<button onclick="efeito('chuva')">
CHUVA
</button>

<button onclick="efeito('varredura')">
VARREDURA ESPACIAL
</button>

</div>


<div class="linha-controle">

<label>

Cor:

<input
  type="color"
  id="cor"
  value="#ff7800">

</label>

</div>


<div class="linha-controle">

<label>
Brilho:
</label>

<input
  type="range"
  id="brilho"
  min="1"
  max="180"
  value="120">

<span id="valorBrilho">
120
</span>

</div>


<div class="linha-controle">

<label>
Velocidade:
</label>

<input
  type="range"
  id="velocidade"
  min="30"
  max="800"
  value="150">

<span id="valorVelocidade">
150 ms
</span>

</div>


<div class="linha-controle">

<label>
Varredura:
</label>

<select id="direcao">

<option value="lr">
Esquerda para Direita
</option>

<option value="rl">
Direita para Esquerda
</option>

<option value="tb">
Cima para Baixo
</option>

<option value="bt">
Baixo para Cima
</option>

<option value="co">
Centro para Bordas
</option>

<option value="oc">
Bordas para Centro
</option>

</select>

</div>


<button
  class="config"
  onclick="abrirConfiguracao()">

CONFIGURACAO

</button>


</div>



<div
  class="card"
  id="areaConfiguracao">


<h2>Configuracao das Colmeias</h2>


<div class="linha-controle">


<label>

Colunas:

<input
  id="colunas"
  type="number"
  min="1"
  max="12"
  value="5">

</label>


<label>

Linhas:

<input
  id="linhas"
  type="number"
  min="1"
  max="12"
  value="3">

</label>


<label>

LEDs por Colmeia:

<input
  id="ledsPorColmeia"
  type="number"
  min="1"
  max="120"
  value="1">

</label>


<button onclick="criarMapa()">

ATUALIZAR MAPA

</button>


</div>


<div class="aviso">

Clique nas Colmeias seguindo a ordem fisica da fita.

<br><br>

Primeiro clique: Colmeia 1<br>
Segundo clique: Colmeia 2<br>
Terceiro clique: Colmeia 3

</div>


<div id="mapa"></div>


<br>


<div class="botoes">


<button
  class="limpar"
  onclick="limparMapa()">

LIMPAR

</button>


<button
  class="aplicar"
  onclick="aplicarConfiguracao()">

APLICAR CONFIGURACAO

</button>


</div>


<p
  class="status"
  id="infoMapa">
</p>


</div>



<div class="card">

<h2>Estado</h2>

<div
  id="status"
  class="status">

Carregando...

</div>

</div>


</div>


<script>


let selecionadas = [];


function abrirConfiguracao(){

  const area =
    document.getElementById(
      "areaConfiguracao"
    );

  area.style.display =
    area.style.display === "block"
    ? "none"
    : "block";

}


function criarMapa(){

  const colunas =
    Number(
      document.getElementById(
        "colunas"
      ).value
    );

  const linhas =
    Number(
      document.getElementById(
        "linhas"
      ).value
    );

  const mapa =
    document.getElementById(
      "mapa"
    );

  mapa.innerHTML = "";

  const altura =
    linhas * 56 + 70;

  mapa.style.height =
    altura + "px";


  for(
    let r = 0;
    r < linhas;
    r++
  ){

    for(
      let c = 0;
      c < colunas;
      c++
    ){

      const hex =
        document.createElement(
          "div"
        );

      hex.className =
        "hex";

      hex.dataset.r =
        r;

      hex.dataset.c =
        c;

      const x =
        c * 64 +
        ((r % 2) * 32);

      const y =
        r * 56;

      hex.style.left =
        (x + 15) +
        "px";

      hex.style.top =
        (y + 15) +
        "px";

      hex.onclick =
        () =>
          selecionar(r,c);

      mapa.appendChild(hex);

    }

  }

  atualizarMapa();

}


function selecionar(r,c){

  const indice =
    selecionadas.findIndex(
      item =>
        item.r === r &&
        item.c === c
    );


  if(indice >= 0){

    selecionadas.splice(
      indice,
      1
    );

  }

  else{

    selecionadas.push({
      r:r,
      c:c
    });

  }

  atualizarMapa();

}


function atualizarMapa(){

  document
    .querySelectorAll(".hex")
    .forEach(hex => {

      hex.classList.remove(
        "selecionada"
      );

      hex.textContent = "";

    });


  selecionadas.forEach(
    (item,indice) => {

      const seletor =
        '.hex[data-r="' +
        item.r +
        '"][data-c="' +
        item.c +
        '"]';

      const hex =
        document.querySelector(
          seletor
        );

      if(hex){

        hex.classList.add(
          "selecionada"
        );

        hex.textContent =
          indice + 1;

      }

    }
  );


  const leds =
    Number(
      document.getElementById(
        "ledsPorColmeia"
      ).value
    );


  document.getElementById(
    "infoMapa"
  ).innerHTML =

    "Colmeias: " +
    selecionadas.length +

    "<br>LEDs por Colmeia: " +
    leds +

    "<br>Total de LEDs: " +
    (selecionadas.length * leds);

}


function limparMapa(){

  selecionadas = [];

  atualizarMapa();

}


async function aplicarConfiguracao(){

  const colunas =
    Number(
      document.getElementById(
        "colunas"
      ).value
    );

  const linhas =
    Number(
      document.getElementById(
        "linhas"
      ).value
    );

  const leds =
    Number(
      document.getElementById(
        "ledsPorColmeia"
      ).value
    );

  const layout =
    selecionadas
      .map(
        p =>
          p.r + "," + p.c
      )
      .join(";");


  const dados =
    new URLSearchParams();


  dados.set(
    "cols",
    colunas
  );

  dados.set(
    "rows",
    linhas
  );

  dados.set(
    "leds",
    leds
  );

  dados.set(
    "layout",
    layout
  );


  const resposta =
    await fetch(
      "/config",
      {

        method:"POST",

        headers:{

          "Content-Type":
          "application/x-www-form-urlencoded"

        },

        body:dados

      }
    );


  const json =
    await resposta.json();


  alert(
    json.msg
  );


  carregarEstado();

}


async function efeito(nome){

  await fetch(
    "/cmd?e=" +
    encodeURIComponent(nome)
  );

  carregarEstado();

}


function hexParaRgb(hex){

  const valor =
    parseInt(
      hex.substring(1),
      16
    );

  return {

    r:(valor >> 16) & 255,

    g:(valor >> 8) & 255,

    b:valor & 255

  };

}


async function enviarAjustes(){

  const rgb =
    hexParaRgb(
      document.getElementById(
        "cor"
      ).value
    );


  const brilho =
    document.getElementById(
      "brilho"
    ).value;


  const velocidade =
    document.getElementById(
      "velocidade"
    ).value;


  const direcao =
    document.getElementById(
      "direcao"
    ).value;


  const url =
    "/settings" +

    "?r=" + rgb.r +

    "&g=" + rgb.g +

    "&b=" + rgb.b +

    "&brilho=" +
    brilho +

    "&vel=" +
    velocidade +

    "&dir=" +
    direcao;


  await fetch(url);

}


document
  .getElementById(
    "cor"
  )
  .addEventListener(
    "input",
    enviarAjustes
  );


document
  .getElementById(
    "brilho"
  )
  .addEventListener(
    "input",
    function(){

      document.getElementById(
        "valorBrilho"
      ).textContent =
        this.value;

      enviarAjustes();

    }
  );


document
  .getElementById(
    "velocidade"
  )
  .addEventListener(
    "input",
    function(){

      document.getElementById(
        "valorVelocidade"
      ).textContent =
        this.value +
        " ms";

      enviarAjustes();

    }
  );


document
  .getElementById(
    "direcao"
  )
  .addEventListener(
    "change",
    enviarAjustes
  );


document
  .getElementById(
    "ledsPorColmeia"
  )
  .addEventListener(
    "input",
    atualizarMapa
  );


function rgbParaHex(r,g,b){

  return "#" +

    [r,g,b]
      .map(
        x =>
          Number(x)
            .toString(16)
            .padStart(2,"0")
      )
      .join("");

}


async function carregarEstado(){

  try{

    const resposta =
      await fetch(
        "/status",
        {
          cache:"no-store"
        }
      );


    const s =
      await resposta.json();


    document.getElementById(
      "colunas"
    ).value =
      s.cols;


    document.getElementById(
      "linhas"
    ).value =
      s.rows;


    document.getElementById(
      "ledsPorColmeia"
    ).value =
      s.leds;


    document.getElementById(
      "brilho"
    ).value =
      s.brilho;


    document.getElementById(
      "valorBrilho"
    ).textContent =
      s.brilho;


    document.getElementById(
      "velocidade"
    ).value =
      s.velocidade;


    document.getElementById(
      "valorVelocidade"
    ).textContent =
      s.velocidade +
      " ms";


    document.getElementById(
      "cor"
    ).value =
      rgbParaHex(
        s.r,
        s.g,
        s.b
      );


    document.getElementById(
      "direcao"
    ).value =
      s.direcao;


    selecionadas = [];


    if(s.layout.length){

      const partes =
        s.layout.split(";");


      partes.forEach(
        item => {

          const valores =
            item.split(",");


          selecionadas.push({

            r:Number(
              valores[0]
            ),

            c:Number(
              valores[1]
            )

          });

        }
      );

    }


    criarMapa();


    document.getElementById(
      "status"
    ).innerHTML =

      "Efeito: " +
      s.efeito +

      "<br>Colmeias: " +
      s.quantidade +

      "<br>LEDs por Colmeia: " +
      s.leds +

      "<br>Total de LEDs: " +
      s.total;

  }

  catch(e){

    document.getElementById(
      "status"
    ).textContent =
      "Erro de comunicacao.";

  }

}


carregarEstado();


</script>


</body>

</html>

)HTML";


// ============================================================================
// 14. CONFIGURACAO
// ============================================================================

void setup() {


  // ------------------------------------------------------------------------
  // MONITOR SERIAL
  // ------------------------------------------------------------------------

  Serial.begin(115200);

  delay(500);


  // ------------------------------------------------------------------------
  // MAPA DO PROJETO
  // ------------------------------------------------------------------------

  Serial.println();

  Serial.println(
    "================================================"
  );

  Serial.println(
    "          ROBOCORE - COLMEIA RGB"
  );

  Serial.println(
    "================================================"
  );

  Serial.println();

  Serial.println(
    "MAPEAMENTO DE PORTAS"
  );

  Serial.println(
    "--------------------------------"
  );


  Serial.print(
    "WS2812B DATA        : GPIO "
  );

  Serial.println(
    PIN_LED_DATA
  );


  Serial.println(
    "WS2812B 5V          : FONTE EXTERNA 5V"
  );

  Serial.println(
    "WS2812B GND         : GND FONTE"
  );

  Serial.println(
    "EDGE H GND          : GND FONTE"
  );


  Serial.println(
    "--------------------------------"
  );


  Serial.println(
    "IMPORTANTE:"
  );

  Serial.println(
    "A fita nao deve ser alimentada pela Edge H."
  );

  Serial.println();


  // ------------------------------------------------------------------------
  // LEDS
  // ------------------------------------------------------------------------

  strip.begin();

  strip.setBrightness(
    brilho
  );

  strip.show();


  // ------------------------------------------------------------------------
  // CARREGA CONFIGURACAO SALVA
  // ------------------------------------------------------------------------

  carregarConfiguracao();


  // ------------------------------------------------------------------------
  // WI-FI
  // ------------------------------------------------------------------------

  WiFi.mode(
    WIFI_AP
  );


  WiFi.softAPConfig(
    IP_LOCAL,
    GATEWAY,
    SUBNET
  );


  WiFi.softAP(
    WIFI_AP_NOME,
    WIFI_AP_SENHA
  );


  Serial.println(
    "WI-FI"
  );

  Serial.println(
    "--------------------------------"
  );


  Serial.print(
    "Rede: "
  );

  Serial.println(
    WIFI_AP_NOME
  );


  Serial.print(
    "Senha: "
  );

  Serial.println(
    WIFI_AP_SENHA
  );


  Serial.print(
    "Interface Web: http://"
  );

  Serial.println(
    WiFi.softAPIP()
  );


  Serial.println(
    "--------------------------------"
  );


  // ------------------------------------------------------------------------
  // SERVIDOR WEB
  // ------------------------------------------------------------------------

  server.on(
    "/",
    HTTP_GET,
    paginaPrincipal
  );


  server.on(
    "/cmd",
    HTTP_GET,
    comandoEfeito
  );


  server.on(
    "/settings",
    HTTP_GET,
    alterarAjustes
  );


  server.on(
    "/config",
    HTTP_POST,
    receberConfiguracao
  );


  server.on(
    "/status",
    HTTP_GET,
    enviarStatus
  );


  server.onNotFound(
    paginaNaoEncontrada
  );


  server.begin();


  Serial.println();

  Serial.println(
    "Servidor Web iniciado."
  );


  imprimirConfiguracao();


  // ------------------------------------------------------------------------
  // RANDOM
  // ------------------------------------------------------------------------

  randomSeed(
    micros()
  );


  // ------------------------------------------------------------------------
  // INICIA DESLIGADO
  // ------------------------------------------------------------------------

  efeitoAtual =
    EFEITO_DESLIGADO;


  limparLeds();

}


// ============================================================================
// 15. LOOP PRINCIPAL
// ============================================================================

void loop() {

  server.handleClient();

  atualizarEfeito();

  delay(2);

}


// ============================================================================
// 16. CONFIGURACAO SALVA
// ============================================================================

void carregarConfiguracao() {

  preferences.begin(
    "colmeia",
    true
  );


  numeroColunas =
    preferences.getUChar(
      "cols",
      5
    );


  numeroLinhas =
    preferences.getUChar(
      "rows",
      3
    );


  ledsPorColmeia =
    preferences.getUShort(
      "leds",
      1
    );


  String layout =
    preferences.getString(
      "layout",
      ""
    );


  preferences.end();


  if(
    numeroColunas < 1 ||
    numeroColunas > MAX_COLUNAS
  ){

    numeroColunas = 5;

  }


  if(
    numeroLinhas < 1 ||
    numeroLinhas > MAX_LINHAS
  ){

    numeroLinhas = 3;

  }


  if(
    ledsPorColmeia < 1 ||
    ledsPorColmeia >
      MAX_LEDS_POR_COLMEIA
  ){

    ledsPorColmeia = 1;

  }


  quantidadeColmeias = 0;


  int inicio = 0;


  while(
    inicio <
      layout.length() &&
    quantidadeColmeias <
      MAX_COLMEIAS
  ){

    int fim =
      layout.indexOf(
        ';',
        inicio
      );


    if(fim < 0){

      fim =
        layout.length();

    }


    String parte =
      layout.substring(
        inicio,
        fim
      );


    int virgula =
      parte.indexOf(',');


    if(virgula > 0){

      int r =
        parte.substring(
          0,
          virgula
        ).toInt();


      int c =
        parte.substring(
          virgula + 1
        ).toInt();


      if(
        r >= 0 &&
        r < numeroLinhas &&
        c >= 0 &&
        c < numeroColunas
      ){

        colmeias[
          quantidadeColmeias
        ].linha =
          r;


        colmeias[
          quantidadeColmeias
        ].coluna =
          c;


        quantidadeColmeias++;

      }

    }


    inicio =
      fim + 1;

  }


  atualizarQuantidadeLeds();

}


// ---------------------------------------------------------------------------

void salvarConfiguracao() {

  preferences.begin(
    "colmeia",
    false
  );


  preferences.putUChar(
    "cols",
    numeroColunas
  );


  preferences.putUChar(
    "rows",
    numeroLinhas
  );


  preferences.putUShort(
    "leds",
    ledsPorColmeia
  );


  String layout = "";


  for(
    int i = 0;
    i < quantidadeColmeias;
    i++
  ){

    if(i > 0){

      layout += ";";

    }


    layout +=
      String(
        colmeias[i].linha
      );


    layout += ",";


    layout +=
      String(
        colmeias[i].coluna
      );

  }


  preferences.putString(
    "layout",
    layout
  );


  preferences.end();

}


// ---------------------------------------------------------------------------

void atualizarQuantidadeLeds() {

  totalLeds =
    quantidadeColmeias *
    ledsPorColmeia;


  if(totalLeds < 1){

    totalLeds = 1;

  }


  strip.updateLength(
    totalLeds
  );


  strip.setBrightness(
    brilho
  );


  strip.clear();

  strip.show();

}


// ============================================================================
// 17. CONTROLE DOS LEDS
// ============================================================================

void limparLedsSemShow() {

  for(
    uint16_t i = 0;
    i < totalLeds;
    i++
  ){

    strip.setPixelColor(
      i,
      0
    );

  }

}


// ---------------------------------------------------------------------------

void limparLeds() {

  limparLedsSemShow();

  strip.show();

}


// ---------------------------------------------------------------------------

void pintarColmeia(
  int numero,
  uint8_t escala
){

  if(
    numero < 1 ||
    numero > quantidadeColmeias
  ){

    return;

  }


  uint8_t r =
    (
      uint16_t(corR) *
      escala
    ) /
    255;


  uint8_t g =
    (
      uint16_t(corG) *
      escala
    ) /
    255;


  uint8_t b =
    (
      uint16_t(corB) *
      escala
    ) /
    255;


  uint16_t inicio =
    (numero - 1) *
    ledsPorColmeia;


  uint16_t fim =
    inicio +
    ledsPorColmeia;


  for(
    uint16_t led = inicio;
    led < fim;
    led++
  ){

    strip.setPixelColor(
      led,
      strip.Color(
        r,
        g,
        b
      )
    );

  }

}


// ---------------------------------------------------------------------------

int encontrarColmeia(
  int linha,
  int coluna
){

  for(
    int i = 0;
    i < quantidadeColmeias;
    i++
  ){

    if(
      colmeias[i].linha ==
        linha &&
      colmeias[i].coluna ==
        coluna
    ){

      return i + 1;

    }

  }


  return -1;

}


// ============================================================================
// 18. CONTROLE DOS EFEITOS
// ============================================================================

void atualizarEfeito() {

  unsigned long agora =
    millis();


  if(
    agora -
    ultimoFrame <
    velocidade
  ){

    return;

  }


  ultimoFrame =
    agora;


  switch(
    efeitoAtual
  ){

    case EFEITO_DESLIGADO:

      break;


    case EFEITO_FIXO:

      efeitoFixo();

      break;


    case EFEITO_SEQUENCIA:

      efeitoSequencia();

      break;


    case EFEITO_MOVIMENTO:

      efeitoMovimento();

      break;


    case EFEITO_CHUVA:

      efeitoChuva();

      break;


    case EFEITO_VARREDURA:

      efeitoVarredura();

      break;

  }

}


// ============================================================================
// 19. EFEITO COR FIXA
// ============================================================================

void efeitoFixo() {

  limparLedsSemShow();


  for(
    int i = 1;
    i <= quantidadeColmeias;
    i++
  ){

    pintarColmeia(
      i,
      255
    );

  }


  strip.show();

}


// ============================================================================
// 20. EFEITO SEQUENCIA
// ============================================================================

void efeitoSequencia() {

  if(
    quantidadeColmeias == 0
  ){

    return;

  }


  limparLedsSemShow();


  passoSequencia++;


  if(
    passoSequencia >
    quantidadeColmeias
  ){

    passoSequencia = 1;

  }


  for(
    int i = 1;
    i <= passoSequencia;
    i++
  ){

    pintarColmeia(
      i,
      255
    );

  }


  strip.show();

}


// ============================================================================
// 21. EFEITO MOVIMENTO
// ============================================================================

void efeitoMovimento() {

  if(
    quantidadeColmeias == 0
  ){

    return;

  }


  limparLedsSemShow();


  cabecaMovimento++;


  if(
    cabecaMovimento >
    quantidadeColmeias
  ){

    cabecaMovimento = 1;

  }


  pintarColmeia(
    cabecaMovimento,
    255
  );


  int cauda1 =
    cabecaMovimento - 1;


  int cauda2 =
    cabecaMovimento - 2;


  if(cauda1 < 1){

    cauda1 +=
      quantidadeColmeias;

  }


  if(cauda2 < 1){

    cauda2 +=
      quantidadeColmeias;

  }


  pintarColmeia(
    cauda1,
    100
  );


  pintarColmeia(
    cauda2,
    35
  );


  strip.show();

}


// ============================================================================
// 22. EFEITO CHUVA
// ============================================================================

void efeitoChuva() {

  limparLedsSemShow();


  for(
    int c = 0;
    c < numeroColunas;
    c++
  ){

    if(
      !gotas[c].ativa &&
      random(100) < 22
    ){

      gotas[c].ativa =
        true;


      gotas[c].linha =
        0;

    }

  }


  for(
    int c = 0;
    c < numeroColunas;
    c++
  ){

    if(
      !gotas[c].ativa
    ){

      continue;

    }


    int numero =
      encontrarColmeia(
        gotas[c].linha,
        c
      );


    if(numero > 0){

      pintarColmeia(
        numero,
        255
      );

    }


    int numeroCauda =
      encontrarColmeia(
        gotas[c].linha - 1,
        c
      );


    if(numeroCauda > 0){

      pintarColmeia(
        numeroCauda,
        70
      );

    }


    gotas[c].linha++;


    if(
      gotas[c].linha >=
      numeroLinhas
    ){

      gotas[c].ativa =
        false;

    }

  }


  strip.show();

}


// ============================================================================
// 23. POSICAO ESPACIAL
// ============================================================================

float posicaoX(
  int indice
){

  float deslocamento =
    (
      colmeias[indice].linha %
      2
    )
    ? 0.5
    : 0.0;


  return
    colmeias[indice].coluna +
    deslocamento;

}


// ---------------------------------------------------------------------------

float posicaoY(
  int indice
){

  return
    colmeias[indice].linha *
    0.8660254;

}


// ---------------------------------------------------------------------------

void calcularLimites(
  float &minX,
  float &maxX,
  float &minY,
  float &maxY
){

  if(
    quantidadeColmeias == 0
  ){

    minX = 0;
    maxX = 0;
    minY = 0;
    maxY = 0;

    return;

  }


  minX =
    maxX =
      posicaoX(0);


  minY =
    maxY =
      posicaoY(0);


  for(
    int i = 1;
    i < quantidadeColmeias;
    i++
  ){

    float x =
      posicaoX(i);


    float y =
      posicaoY(i);


    if(x < minX){

      minX = x;

    }


    if(x > maxX){

      maxX = x;

    }


    if(y < minY){

      minY = y;

    }


    if(y > maxY){

      maxY = y;

    }

  }

}


// ============================================================================
// 24. EFEITO VARREDURA ESPACIAL
// ============================================================================

void efeitoVarredura() {

  if(
    quantidadeColmeias == 0
  ){

    return;

  }


  float minX;
  float maxX;
  float minY;
  float maxY;


  calcularLimites(
    minX,
    maxX,
    minY,
    maxY
  );


  float centroX =
    (
      minX +
      maxX
    ) /
    2.0;


  float centroY =
    (
      minY +
      maxY
    ) /
    2.0;


  float distanciaMaxima =
    0;


  for(
    int i = 0;
    i < quantidadeColmeias;
    i++
  ){

    float dx =
      posicaoX(i) -
      centroX;


    float dy =
      posicaoY(i) -
      centroY;


    float d =
      sqrt(
        dx * dx +
        dy * dy
      );


    if(
      d >
      distanciaMaxima
    ){

      distanciaMaxima =
        d;

    }

  }


  float maximo =
    1;


  switch(
    direcaoVarredura
  ){

    case VARRE_ESQ_DIR:
    case VARRE_DIR_ESQ:

      maximo =
        maxX -
        minX;

      break;


    case VARRE_CIMA_BAIXO:
    case VARRE_BAIXO_CIMA:

      maximo =
        maxY -
        minY;

      break;


    case VARRE_CENTRO_FORA:
    case VARRE_FORA_CENTRO:

      maximo =
        distanciaMaxima;

      break;

  }


  limparLedsSemShow();


  for(
    int i = 0;
    i < quantidadeColmeias;
    i++
  ){

    float x =
      posicaoX(i);


    float y =
      posicaoY(i);


    float valor =
      0;


    switch(
      direcaoVarredura
    ){

      case VARRE_ESQ_DIR:

        valor =
          x -
          minX;

        break;


      case VARRE_DIR_ESQ:

        valor =
          maxX -
          x;

        break;


      case VARRE_CIMA_BAIXO:

        valor =
          y -
          minY;

        break;


      case VARRE_BAIXO_CIMA:

        valor =
          maxY -
          y;

        break;


      case VARRE_CENTRO_FORA:
      {

        float dx =
          x -
          centroX;


        float dy =
          y -
          centroY;


        valor =
          sqrt(
            dx * dx +
            dy * dy
          );

        break;

      }


      case VARRE_FORA_CENTRO:
      {

        float dx =
          x -
          centroX;


        float dy =
          y -
          centroY;


        float distancia =
          sqrt(
            dx * dx +
            dy * dy
          );


        valor =
          distanciaMaxima -
          distancia;

        break;

      }

    }


    float distanciaFaixa =
      fabs(
        valor -
        posicaoVarredura
      );


    if(
      distanciaFaixa <
      0.40
    ){

      pintarColmeia(
        i + 1,
        255
      );

    }


    else if(
      distanciaFaixa <
      1.00
    ){

      pintarColmeia(
        i + 1,
        55
      );

    }

  }


  strip.show();


  posicaoVarredura +=
    0.45;


  if(
    posicaoVarredura >
    maximo + 1
  ){

    posicaoVarredura =
      0;

  }

}


// ============================================================================
// 25. PAGINA PRINCIPAL
// ============================================================================

void paginaPrincipal() {

  server.sendHeader(
    "Cache-Control",
    "no-store, no-cache, must-revalidate, max-age=0"
  );


  server.sendHeader(
    "Pragma",
    "no-cache"
  );


  server.sendHeader(
    "Expires",
    "0"
  );


  server.send(
    200,
    "text/html; charset=utf-8",
    PAGINA_HTML
  );

}


// ============================================================================
// 26. COMANDO DE EFEITO
// ============================================================================

void comandoEfeito() {

  if(
    !server.hasArg("e")
  ){

    server.send(
      400,
      "application/json",
      "{\"ok\":false}"
    );

    return;

  }


  String efeito =
    server.arg("e");


  efeito.toLowerCase();


  passoSequencia =
    0;


  cabecaMovimento =
    0;


  posicaoVarredura =
    0;


  for(
    int c = 0;
    c < MAX_COLUNAS;
    c++
  ){

    gotas[c].ativa =
      false;


    gotas[c].linha =
      0;

  }


  if(
    efeito == "off"
  ){

    efeitoAtual =
      EFEITO_DESLIGADO;


    limparLeds();

  }


  else if(
    efeito == "fixo"
  ){

    efeitoAtual =
      EFEITO_FIXO;


    efeitoFixo();

  }


  else if(
    efeito == "sequencia"
  ){

    efeitoAtual =
      EFEITO_SEQUENCIA;

  }


  else if(
    efeito == "movimento"
  ){

    efeitoAtual =
      EFEITO_MOVIMENTO;

  }


  else if(
    efeito == "chuva"
  ){

    efeitoAtual =
      EFEITO_CHUVA;

  }


  else if(
    efeito == "varredura"
  ){

    efeitoAtual =
      EFEITO_VARREDURA;

  }


  server.send(
    200,
    "application/json",
    "{\"ok\":true}"
  );

}


// ============================================================================
// 27. AJUSTES DE</div>

    
                </article>
                </div>
                <aside>

                    <script>
                        $(function () {
                            $("#tabs").tabs();
                        });
                    </script>

                    <div id="tabs" style="padding: 5px 0px 0px 0px; background-color: transparent; font-weight: normal; border: 0px;" class="no-print">
                        <ul style="border: 0px; border-radius: 0px; padding: 0px 0px 0px 0px; overflow: hidden; width: 100%;">
                            <li><a href="#comentarios">Comentários</a></li>
                        </ul>

                        <div id="comentarios" style="border-top-left-radius: 0px; text-align: justify;">
    
    <script>
        (function ($) {
            $.fn.goTo = function () {
                $('html, body').animate({
                    scrollTop: $(this).offset().top - 200 + 'px'
                }, 'slow');
                return this; // for chaining...
            }
        })(jQuery);
    </script>

    <style>
        span.official_reply {
            font-weight: bold;
            background-color: #ffd741;
            padding: 2px 12px;
            border-radius: 80px;
            display: inline-block;
            color: #564407;
            position: relative;
        }
        span.official_reply::after {
            display: list-item;
            width: 100px;
            position: absolute;
            content: "Resposta Oficial";
            top: 2px;
            right: -120px;
            color: #8c8c8c;
            font-weight: normal;
            text-indent: -6px;
        }
        html:lang(en) span.official_reply::after{
            content: "Official Answer";
        }
        span.official_reply svg {
            width: 8px;
            fill: #564407;
            vertical-align: -4px;
            margin-right: 3px;
        }
        
    </style>

    <br><br>Para fazer comentários é necessário estar logado. <a href="/conta" class="menuforum">Efetuar login</a>.<br>
		<br>
		Você ainda nao é cadastrado? <a href="/modules.php?name=Your_Account&op=new_user" class="menuforum">Cadastre-se agora!</a><br><br>       
                        </div>
                    </div>
                </aside>
            </main>
    

                    </div>
                </div>
            </div><!--inner_wrapper-end-->

        </div><!-- End Body-wrapper -->

            <div class="footer no-print">

            <div class="wrapper">
                <div style="display: flex; justify-content: space-between; margin-left: 20px; margin-top: 40px; flex-wrap: wrap;">

                    <div style="display: flex; align-items: flex-start; flex-direction: column; margin-right: 40px; margin-bottom: 30px; width: 250px;">

                        <div style="float: left; font-weight: bold; font-size: 11px; margin-bottom: 10px;">ROBOCORE TECNOLOGIA</div>
                        <div style="float: left; margin-bottom: 10px;">A RoboCore foi criada em 2008 com o intuito de incentivar o desenvolvimento tecnologico, fabricando e fornecendo peças para automação e robótica de alta qualidade a preços acessíveis.</div>
                        <div style="float: left; margin-bottom: 15px;">RoboCore Tecnologia LTDA<br>CNPJ 10.383.409/0001-98<br>D-U-N-S Certified: 89-963-8833<br>Santana de Parnaiba/SP - Brasil</div>


                        <div style="float: left; margin-top: 10px;">NOSSAS REDES SOCIAIS</div>
                        <div class="social_area" style="float: left; margin-top: 0px;">

                            <ul>
                                <li><a href="http://www.instagram.com/robocore" target="_blank"><i class="fa fa-instagram" aria-hidden="true"></i></a></li>
                                <li><a href="http://www.youtube.com/robocore" target="_blank"><i class="fa fa-youtube-square" aria-hidden="true"></i></a></li>
                                <li><a href="http://www.twitter.com/robocore" target="_blank"><i class="fa fa-twitter-square" aria-hidden="true"></i></a></li>
                                <li><a href="http://www.facebook.com/robocore" target="_blank"><i class="fa fa-facebook-square" aria-hidden="true"></i></a></li>
                                <li><a href="https://www.linkedin.com/company/robocore-tecnologia/" target="_blank"><i class="fa fa-linkedin-square" aria-hidden="true"></i></a></li>

                            </ul>

                        </div>




                    </div>


                    <div style="display: flex; align-items: flex-start; flex-direction: column; margin-right: 40px; margin-bottom: 30px; width: 200px;">

                        <div style="float: left; font-weight: bold; font-size: 11px; margin-bottom: 10px;">LINKS ÚTEIS</div>
                        <div style="float: left; margin-bottom: 20px;">
                            <a href="/quem_somos">Quem somos</a><br>
                            <a href="/distribuidores">Encontre uma loja perto de você</a><br>
                            <a href="mailto:vendas@robocore.net?subject=Novo Distribuidor">Seja um distribuidor</a><br>
                        </div>

                        <div style="float: left; font-weight: bold; font-size: 11px; margin-bottom: 10px;">POLÍTICAS DA LOJA</div>
                        <div style="float: left; margin-bottom: 10px;">
                            <a href="/privacidade" style="vertical-align: text-top;">Política de Privacidade</a><br>
                            <a href="/trocas" style="vertical-align: text-top;">Política de Trocas e Devoluções</a><br>
                            <a href="/frete" style="vertical-align: text-top;">Política de Frete</a></div>

                    </div>


                    <div style="display: flex; align-items: flex-start; flex-direction: column; margin-right: 40px; width: 200px;">

                        <div style="float: left; font-weight: bold; font-size: 11px; margin-bottom: 10px;">CENTRAL DE ATENDIMENTO</div>
                        <div style="float: left; margin-bottom: 20px;">
                            Segunda à sexta das 8:00 às 17:00<br>
                            <i class="fa fa-phone" aria-hidden="true" style="color: #F0BE00;"></i> <a href="https://wa.me/message/2RJ2VJCLUMEAN1" style="text-decoration: none;"><span style="color: white;">(11) 3522-7626</span> <i class="fa fa-whatsapp" aria-hidden="true" style="margin-right: 3px;"></i> </a><br>
                            <i class="fa fa-envelope-o" aria-hidden="true" style="color: #F0BE00;"></i> vendas@robocore.net                        </div>

                        <div style="float: left; font-weight: bold; font-size: 11px; margin-bottom: 10px;">
                            
                                                        
                                                            <a href="/tutoriais/colmeia?newlang=english" class="nohover"><i class="fa fa-globe" aria-hidden="true"></i> CHANGE LANGUAGE</a>
                            </div>
                    </div>

                    <div style="display: flex; align-items: flex-start; flex-direction: column; margin-right: 40px; width: 200px;">

                        <div style="float: left; font-weight: bold; font-size: 11px; margin-bottom: 10px; text-transform: uppercase;">Formas de Pagamento</div>
                        <div style="float: left; margin-bottom: 20px; width: 200px;">
                            <i class="fa fa-credit-card-alt fa-2x" aria-hidden="true"></i>
                            <i class="fa fa-cc-mastercard fa-2x" aria-hidden="true"></i>
                            <i class="fa fa-cc-visa fa-2x" aria-hidden="true"></i>
                            <i class="fa fa-cc-paypal fa-2x" aria-hidden="true"></i>
                            <i class="fa fa-barcode fa-2x" aria-hidden="true"></i>
                            <i class="fa fa-qrcode fa-2x" aria-hidden="true"></i>
                        </div>

                        <div style="float: left; font-weight: bold; font-size: 11px; margin-bottom: 10px;">AUDITORIA DE SEGURANÇA</div>

    
                            <a style="float: left; width: 100%; margin-bottom: 10px;" rel="no follow" href="https://auditoria.siteblindado.com/consumidor/selo-blindado/?language1=pt&hostname=www.robocore.net" id="sb-shield-2" target="_blank" title="Navegue tranquilamente! Este é um Site Blindado contra ataques! Clique e confira mais detalhes.">
                                <img data-src="https://seal.siteblindado.com/www.robocore.net/seal.png" class="lazyload footer__site_blindado">
                            </a>
                        
                                                
                        <div>
                        <i class="fa fa-lock fa-3x" aria-hidden="true" style="float: left; color: #F0BE00; margin-right: 5px;"></i>
                        <div style="float: left;"><b>Site 100% Seguro</b><br><span style="font-size: 9px;">Auditado Diariamente</span></div>
                        </div>
                    
                    </div>

                </div>

            </div>

            <div class="footer__bottom"> ROBOCORE® 2026. Todos os direitos reservados</div>

            <style>
                .footer{
                    overflow: hidden;
                }

                .wrapper {
                    height: auto;
                }

                .wrapper::after {
                    display: block;
                    content: "";
                    clear: both;
                }

                .footer__bottom {
                    text-align: center;
                    margin-top: 20px;
                    background-color: rgba(0, 0, 0, 0.4);
                    line-height: 28px;
                }

                @media (max-width: 800px){
                    .footer__bottom {
                        line-height: 26px;
                    }
                }

                img.footer__site_blindado {
                    margin-top: 3px;
                    -webkit-filter: hue-rotate(180deg) invert(0.8) grayscale(1) contrast(1.1);
                    filter: invert(0.8) grayscale(1) contrast(1.1);
                    transition: all 200ms ease-in-out;
                }

                img.footer__site_blindado:hover {
                    -webkit-filter: hue-rotate(180deg) invert(0.8) grayscale(0) contrast(1.1) saturate(1.2);
                    filter: hue-rotate(180deg) invert(0.8) grayscale(0) contrast(1.1) saturate(1.2);
                }

            </style>

        </div>

        <!--    <script>
                if ("ontouchstart" in window || navigator.msMaxTouchPoints) {
                    document.getElementById('login_link').href = "#";
                }
            </script>-->



    


    <script>
        $('.disable-onclick').on('click', function () {
            $('.disable-onclick').css('background-color', 'yellow');
            $('.disable-onclick').prop('disabled', true);
            setTimeout(function () {
                $('.disable-onclick').css('background-color', '');
                $('.disable-onclick').prop('disabled', false);
            }, 2000);
        });
    </script>

    
        <script>
           
           var menuSize = 0;
           
           if (document.querySelector('.menuLV')) {
                menuSize = document.querySelector('.menuLV').querySelectorAll(':scope > li').length*31;
                //console.log(menuSize);
                if(hideMenu === false){
                    $('.menuLV').css("max-height", menuSize+"px");
                }
            }
            
            $('.menuLVbutton').hover(function () {
                $('.menuLV').css("max-height", menuSize+"px");
                $('.menuLV').css("overflow", "visible");
                $('.menuLV li.currentClass').addClass("selected");
                $('.menuLV li.currentClass ul').css("max-width", "300px");
                $('.menuLV li.currentClass ul li.currentClass').addClass("selected");

            });
                
            var menuOpened = false;
            var mouseOverMenu = true;
            
            $('.menuLV li a.catWithNoSub').hover(function () {
                $('.menuLV li ul').css("transition", "max-width 200ms ease-in");
                $('.menuLV li ul').css("max-width", "0");
                $('.menuLV li').removeClass("selected");
                menuOpened = false;
            });
            
            $('.menuLV li a.catWithSub').hover(function () {

                if(menuOpened === true){
                    $('.menuLV li ul').css("transition", "none");
                } else {
                    $('.menuLV li ul').css("transition", "max-width 200ms ease-in");
                    menuOpened = true
                }
                    
                //$('.rotate').toggleClass("rotate");
                $('.menuLV li ul').css("max-width", "0");
//                $('.menuLV li ul').css("border-style", "none solid none none");
                $('.menuLV li').removeClass("selected");

                $(this).parent().addClass("selected");
                $(this).next().css("max-width", "300px");
//                $(this).next().css("border-style", "none solid solid solid");
                //$(this).children().toggleClass("rotate");
            });

            $('.menuLVbutton').hover(function(){
                mouseOverMenu = true;
            }, function(){
                mouseOverMenu = false;
            });

            $('.menuLV').hover(function(){
                mouseOverMenu = true;
            }, function(){
                mouseOverMenu = false;
            });


            $('.menuLVbutton').on("mouseleave", function() {
                window.setTimeout(function (){
                    //console.log('over menu = '+mouseOverMenu);
                    if(mouseOverMenu === false){
                        CloseMenu();
                    }
                }, 100);
            });



            $('.menuLV').on("mouseleave", function() {
                CloseMenu();
            });
        
        function CloseMenu(){
            //$('.rotate').toggleClass("rotate");
                $('.menuLV li ul').css("transition", "max-width 200ms ease-in");
                menuOpened = false;
                $('.menuLV li ul').css("max-width", "0");
//                $('.menuLV li ul').css("border-style", "none solid none none");
                $('.menuLV li').removeClass("selected");
                
                //console.log(hideMenu);
            if(hideMenu === true){
                $('.menuLV').css("max-height", "0");
                $('.menuLV').css("overflow", "hidden");
            } 
        }
        
        </script>
    

    </div></div><div class="menuSB" style="width: 280px;" off-canvas="sb-1 left reveal">
                <!-- Left Slidebar content -->
                <ul class="menuSB" style="position: sticky; top:0px; left: 0; background-color: black; border-top: 6px solid black; padding-bottom: 0px; padding-left: 0px; padding-right: 0px;"><li class="section" style="overflow: hidden;"><div id="section_GR_LojaVirtual"><a href="#" onclick="change_menu('GR_LojaVirtual')" style="padding: 0px;"><i class="fa fa-shopping-cart fa-2x" style="margin: 6px;" aria-hidden="true"></i></a></div><div id="section_RC_Tutoriais"><a href="#" onclick="change_menu('RC_Tutoriais')" style="padding: 0px;"><i class="fa fa-graduation-cap fa-2x" style="margin: 6px" aria-hidden="true"></i></a></div><div id="section_GR_Eventos"><a href="#" onclick="change_menu('GR_Eventos')" style="padding: 0px;"><i class="fa fa-trophy fa-2x" style="margin: 6px" aria-hidden="true"></i></a></div><div id="section_More"><a href="#" onclick="change_menu('More')" style="padding: 0px;"><i class="fa fa-ellipsis-h fa-2x" style="margin: 6px" aria-hidden="true"></i></a></div></li><li id="section_name" class="section_name"></li></ul><div id="menu_RC_Tutoriais" style="display: none;"><ul class="menuSB" ><li><a href="/tutoriais"><i class="fa fa-home fa-fw justify" aria-hidden="true"></i> Pagina Inicial</a></li><li class="titulo">Categorias</li><li class=""><a href=""><i class="fa fa-bolt fa-fw justify" aria-hidden="true"></i> Kits RoboCore </a><a class="catWithSub"><span class="fa fa-caret-down" aria-hidden="true"></span></a><ul class="submenu" data-maxheight="564" style="max-height: 0px"><li class=""><a href="/tutoriais/blackboard-wisdom-introducao"><i class="fa fa-caret-right fa-fw justify" aria-hidden="true"></i> BlackBoard Wisdom</a></li><li class=""><a href="/tutoriais/iot-night-light-introducao"><i class="fa fa-caret-right fa-fw justify" aria-hidden="true"></i> IoT Night Light</a></li><li class=""><a href="/tutoriais/iot-devkit-introducao"><i class="fa fa-caret-right fa-fw justify" aria-hidden="true"></i> IoT DevKit</a></li><li class=""><a href="/tutoriais/kit-smart-arm-introducao"><i class="fa fa-caret-right fa-fw justify" aria-hidden="true"></i> Kit Smart ARM</a></li><li class=""><a href="/tutoriais/kit-robo-explorer-introducao"><i class="fa fa-caret-right fa-fw justify" aria-hidden="true"></i> Kit Robô Explorer</a></li><li class=""><a href="/tutoriais/discovery-kit-raspberry-pi-introducao"><i class="fa fa-caret-right fa-fw justify" aria-hidden="true"></i> Kit Discovery para Raspberry Pi</a></li><li class=""><a href="/tutoriais/kit-avancado-para-arduino-introducao"><i class="fa fa-caret-right fa-fw justify" aria-hidden="true"></i> Kit Avançado Arduino</a></li><li class=""><a href="/tutoriais/kit-iniciante-robotica-introducao"><i class="fa fa-caret-right fa-fw justify" aria-hidden="true"></i> Kit Iniciante Robótica</a></li><li class=""><a href="/tutoriais/kit-iniciante-v8-introducao"><i class="fa fa-caret-right fa-fw justify" aria-hidden="true"></i> Kit Iniciante V8 Arduino</a></li><li class=""><a href="/tutoriais/master-kit-introducao"><i class="fa fa-caret-right fa-fw justify" aria-hidden="true"></i> Master Kit Arduino</a></li><li class=""><a href="/tutoriais/arduino-pocket-kit-introducao"><i class="fa fa-caret-right fa-fw justify" aria-hidden="true"></i> Pocket Kit Arduino</a></li><li class=""><a href="/tutoriais/kit-iniciante-para-arduino-introducao"><i class="fa fa-caret-right fa-fw justify" aria-hidden="true"></i> Kit Iniciante V7 Arduino</a></li></ul></li><li class=""><a href="/tutoriais/kit-iniciante-para-arduino-introducao"><i class="fa icon-embarcados fa-fw justify" aria-hidden="true"></i> Placas de Desenvolvimento </a><a class="catWithSub"><span class="fa fa-caret-down" aria-hidden="true"></span></a><ul class="submenu" data-maxheight="282" style="max-height: 0px"><li class=""><a href="/tutoriais/asus-tinker-board/"><i class="fa fa-caret-right fa-fw justify" aria-hidden="true"></i> Asus Tinker Board</a></li><li class=""><a href="/tutoriais/bbc-microbit/"><i class="fa fa-caret-right fa-fw justify" aria-hidden="true"></i> BBC micro:bit</a></li><li class=""><a href="/tutoriais/franzininho/"><i class="fa fa-caret-right fa-fw justify" aria-hidden="true"></i> Franzininho</a></li><li class=""><a href="/tutoriais/vespa/"><i class="fa fa-caret-right fa-fw justify" aria-hidden="true"></i> Vespa</a></li><li class=""><a href="/tutoriais/raspberry-pi/"><i class="fa fa-caret-right fa-fw justify" aria-hidden="true"></i> Raspberry Pi</a></li><li class=""><a href="/tutoriais/arduino/"><i class="fa fa-caret-right fa-fw justify" aria-hidden="true"></i> Arduino</a></li></ul></li><li><a href="/tutoriais/briick/"><i class="fa fa-th-large fa-fw justify" aria-hidden="true"></i> BRIICK</a></li><li><a href="/tutoriais/tutoriais-em-video/"><i class="fa fa-video-camera fa-fw justify" aria-hidden="true"></i> Tutoriais em Video</a></li><li><a href="/tutoriais/novidades/"><i class="fa fa-certificate fa-fw justify" aria-hidden="true"></i> Novidades</a></li><li><a href="/tutoriais/automacao-residencial/"><i class="fa fa-home fa-fw justify" aria-hidden="true"></i> Automação Residencial</a></li><li class=""><a href="/tutoriais/arduino/"><i class="fa fa-rss fa-fw justify" aria-hidden="true"></i> Comunicação </a><a class="catWithSub"><span class="fa fa-caret-down" aria-hidden="true"></span></a><ul class="submenu" data-maxheight="94" style="max-height: 0px"><li class=""><a href="/tutoriais/bluetooth/"><i class="fa fa-caret-right fa-fw justify" aria-hidden="true"></i> Bluetooth</a></li><li class=""><a href="/tutoriais/wireless/"><i class="fa fa-caret-right fa-fw justify" aria-hidden="true"></i> Wireless</a></li></ul></li><li><a href="/tutoriais/destaques/"><i class="fa fa-fire fa-fw justify" aria-hidden="true"></i> Destaques</a></li><li><a href="/tutoriais/eletronica/"><i class="fa icon-eletronico fa-fw justify" aria-hidden="true"></i> Eletrônica</a></li><li><a href="/tutoriais/iniciante/"><i class="fa fa-thermometer-empty fa-fw justify" aria-hidden="true"></i> Iniciante</a></li><li><a href="/tutoriais/intermediario/"><i class="fa fa-thermometer-half fa-fw justify" aria-hidden="true"></i> Intermediário</a></li><li><a href="/tutoriais/internet-das-coisas/"><i class="fa icon-iot fa-fw justify" aria-hidden="true"></i> Internet das Coisas</a></li><li><a href="/tutoriais/sensores/"><i class="fa icon-sensor fa-fw justify" aria-hidden="true"></i> Sensores</a></li><li class="selected"><a href="/tutoriais/projetos-redes-sociais/"> Projetos Redes Sociais</a></li><li><a href="/tutoriais/kits-impressao-3d/"> Kits Impressão 3D</a></li></ul></div>
<div id="menu_GR_LojaVirtual" style="display: none;"><ul class="menuSB" ><li class=""><a href="/originais-robocore"><i class="fa fa-bolt fa-fw justify" aria-hidden="true"></i> Originais RoboCore </a><a class="catWithSub"><span class="fa fa-caret-down" aria-hidden="true"></span></a><ul class="submenu" data-maxheight="376" style="max-height: 0px"><li class=""><a href="/kits">     Kits Didáticos</a></li><li class=""><a href="/placa-robocore">     Placas e Módulos</a></li><li class=""><a href="/briick">     Módulos BRIICK</a></li><li class=""><a href="/acessorios-robocore">     Acessórios</a></li><li class=""><a href="/caixa-de-reducao-robocore">     Motores e Caixas de Redução</a></li><li class=""><a href="/pecas-mecanicas-robocore">     Peças Mecânicas</a></li><li class=""><a href="/roda-robocore">     Rodas e Esteiras</a></li><li class=""><a href="/tutoriais-kits-didaticos">     Tutoriais Didáticos</a></li></ul></li><li class=""><a href="/kits-didaticos"><i class="fa fa-graduation-cap fa-fw justify" aria-hidden="true"></i> Kits Didáticos </a><a class="catWithSub"><span class="fa fa-caret-down" aria-hidden="true"></span></a><ul class="submenu" data-maxheight="235" style="max-height: 0px"><li class=""><a href="/lego-education">     LEGO Education</a></li><li class=""><a href="/kits-didaticos-originais-robocore">     Originais RoboCore</a></li><li class=""><a href="/kit-microbit">     BBC micro:bit</a></li><li class=""><a href="/kit-arduino">     Arduino</a></li><li class=""><a href="/kits-didaticos-raspberry-pi">     Raspberry Pi</a></li></ul></li><li class=""><a href="/impressao-3d"><i class="fa fa-cube fa-fw justify" aria-hidden="true"></i> Impressão 3D </a><a class="catWithSub"><span class="fa fa-caret-down" aria-hidden="true"></span></a><ul class="submenu" data-maxheight="423" style="max-height: 0px"><li class=""><a href="/filamentos-impressao-3d-pla">     Filamentos PLA</a></li><li class=""><a href="/filamentos-impressao-3d-petg">     Filamentos PETG</a></li><li class=""><a href="/filamentos-impressao-3d-abs">     Filamentos ABS</a></li><li class=""><a href="/filamentos-impressao-3d-tpu">     Filamentos TPU</a></li><li class=""><a href="/filamentos-impressao-3d-especiais">     Filamentos Especiais</a></li><li class=""><a href="/impressoras-3d">     Impressoras</a></li><li class=""><a href="/kits-impressao-3d">     Kits Impressão 3D</a></li><li class=""><a href="/pecas-reposicao-impressao-3d">     Peças de Reposição</a></li><li class=""><a href="/acessorios-impressao-3d">     Acessórios</a></li></ul></li><li class=""><a href="/corte-gravacao-laser"><i class="fa fa-crop fa-fw justify" aria-hidden="true"></i> Corte e Gravação a Laser </a><a class="catWithSub"><span class="fa fa-caret-down" aria-hidden="true"></span></a><ul class="submenu" data-maxheight="141" style="max-height: 0px"><li class=""><a href="/maquinas-laser">     Máquinas a Laser</a></li><li class=""><a href="/acessorios-maquinas-laser">     Acessórios</a></li><li class=""><a href="/exaustao-purificacao">     Exaustão e Purificação</a></li></ul></li><li class=""><a href="/arduino"><i class="fa icon-arduino fa-fw justify" aria-hidden="true"></i> Arduino </a><a class="catWithSub"><span class="fa fa-caret-down" aria-hidden="true"></span></a><ul class="submenu" data-maxheight="141" style="max-height: 0px"><li class=""><a href="/placa-arduino">     Placas</a></li><li class=""><a href="/shields-arduino">     Shields</a></li><li class=""><a href="/acessorios-arduino">     Acessórios</a></li></ul></li><li class=""><a href="/raspberry-pi"><i class="fa icon-raspberry-pi fa-fw justify" aria-hidden="true"></i> Raspberry Pi </a><a class="catWithSub"><span class="fa fa-caret-down" aria-hidden="true"></span></a><ul class="submenu" data-maxheight="188" style="max-height: 0px"><li class=""><a href="/placa-raspberry-pi">     Placas</a></li><li class=""><a href="/acessorios-raspberry-pi">     Acessórios</a></li><li class=""><a href="/hat-raspberry-pi">     HATs</a></li><li class=""><a href="/kit-raspberry-pi">     Kits</a></li></ul></li><li class=""><a href="/microbit"><i class="fa icon-microbit fa-fw justify" aria-hidden="true"></i> BBC micro:bit </a><a class="catWithSub"><span class="fa fa-caret-down" aria-hidden="true"></span></a><ul class="submenu" data-maxheight="94" style="max-height: 0px"><li class=""><a href="/placa-microbit">     Placas</a></li><li class=""><a href="/acessorios-microbit">     Acessórios</a></li></ul></li><li class=""><a href="/lego"><i class="fa fa-th-large fa-fw justify" aria-hidden="true"></i> LEGO Education</a></li><li class=""><a href="/robotica-automacao"><i class="fa fa-android fa-fw justify" aria-hidden="true"></i> Robótica / Automação </a><a class="catWithSub"><span class="fa fa-caret-down" aria-hidden="true"></span></a><ul class="submenu" data-maxheight="376" style="max-height: 0px"><li class=""><a href="/baterias-fontes">     Baterias e Fontes</a></li><li class=""><a href="/motor-caixas-de-reducao">     Motores e Caixas de Redução</a></li><li class=""><a href="/atuador">     Atuadores</a></li><li class=""><a href="/driver-motor">     Controladores e Drivers</a></li><li class=""><a href="/roda">     Rodas e Esteiras</a></li><li class=""><a href="/kit-plataforma-robotica">     Kits e Plataformas</a></li><li class=""><a href="/sensor">     Sensores</a></li><li class=""><a href="/item-mecanico">     Itens Mecânicos</a></li></ul></li><li class=""><a href="/componentes-eletronicos"><i class="fa icon-eletronico fa-fw justify" aria-hidden="true"></i> Componentes Eletrônicos </a><a class="catWithSub"><span class="fa fa-caret-down" aria-hidden="true"></span></a><ul class="submenu" data-maxheight="423" style="max-height: 0px"><li class=""><a href="/conector">     Conectores</a></li><li class=""><a href="/outros-componentes-eletronicos">     Outros</a></li><li class=""><a href="/display">     Displays</a></li><li class=""><a href="/circuito-integrado">     Circuitos Integrados</a></li><li class=""><a href="/resistor-potenciometro">     Resistores e Potenciômetros</a></li><li class=""><a href="/regulador-de-tensao">     Reguladores e Conversores</a></li><li class=""><a href="/led">     LEDs e Indicadores</a></li><li class=""><a href="/capacitor-indutor">     Capacitores e Indutores</a></li><li class=""><a href="/botao-chave">     Botões e Chaves</a></li></ul></li><li class=""><a href="/livros"><i class="fa fa-book fa-fw justify" aria-hidden="true"></i> Livros </a><a class="catWithSub"><span class="fa fa-caret-down" aria-hidden="true"></span></a><ul class="submenu" data-maxheight="235" style="max-height: 0px"><li class=""><a href="/livro-raspberry-pi">     Raspberry Pi</a></li><li class=""><a href="/livro-programacao">     Programação</a></li><li class=""><a href="/livro-eletronica">     Eletrônica</a></li><li class=""><a href="/livro-arduino">     Arduino</a></li><li class=""><a href="/hqs">     HQs</a></li></ul></li><li class=""><a href="/placas-desenvolvimento"><i class="fa icon-embarcados fa-fw justify" aria-hidden="true"></i> Placas de Desenvolvimento </a><a class="catWithSub"><span class="fa fa-caret-down" aria-hidden="true"></span></a><ul class="submenu" data-maxheight="235" style="max-height: 0px"><li class=""><a href="/placa-32-bit">     32-bit</a></li><li class=""><a href="/dfrobot">     DFRobot</a></li><li class=""><a href="/placa-8-bit">     8-bit</a></li><li class=""><a href="/seeed-studio">     Seeed Studio</a></li><li class=""><a href="/sbc">     Single Board Computers</a></li></ul></li><li class=""><a href="/prototipagem-ferramentas"><i class="fa fa-wrench fa-fw justify" aria-hidden="true"></i> Prototipagem e Ferramentas </a><a class="catWithSub"><span class="fa fa-caret-down" aria-hidden="true"></span></a><ul class="submenu" data-maxheight="329" style="max-height: 0px"><li class=""><a href="/placa-circuito">     Placas de Circuito</a></li><li class=""><a href="/cabo">     Cabos</a></li><li class=""><a href="/ferramentas">     Ferramentas</a></li><li class=""><a href="/porca">     Porcas e Anéis Elásticos</a></li><li class=""><a href="/parafuso">     Parafusos</a></li><li class=""><a href="/protoboard">     Protoboards</a></li><li class=""><a href="/fonte">     Fontes de Alimentação</a></li></ul></li><li class=""><a href="/wireless"><i class="fa fa-wifi fa-fw justify" aria-hidden="true"></i> Wireless e IoT </a><a class="catWithSub"><span class="fa fa-caret-down" aria-hidden="true"></span></a><ul class="submenu" data-maxheight="235" style="max-height: 0px"><li class=""><a href="/rfid">     RFID</a></li><li class=""><a href="/bluetooth">     Bluetooth</a></li><li class=""><a href="/lorawan">     LoRaWAN</a></li><li class=""><a href="/radio-frequencia-infravermelho">     RF e Infravermelho</a></li><li class=""><a href="/wifi">     WiFi</a></li></ul></li><li class=""><a href="/presentear"><i class="fa fa-gift fa-fw justify" aria-hidden="true"></i> Ideias de Presentes </a><a class="catWithSub"><span class="fa fa-caret-down" aria-hidden="true"></span></a><ul class="submenu" data-maxheight="235" style="max-height: 0px"><li class=""><a href="/kits-presentear">     Kits</a></li><li class=""><a href="/camisetas">     Camisetas</a></li><li class=""><a href="/makerstyle">     MakerStyle</a></li><li class=""><a href="/adesivos">     Adesivos</a></li><li class=""><a href="/canecas">     Canecas</a></li></ul></li></ul></div>
<div id="menu_GR_Eventos" style="display: none;"><ul class="menuSB" ><li><a href="https://events.robocore.net" target="_blank"><i class="fa fa-trophy fa-fw justify" aria-hidden="true"></i> Eventos</a></li><li><a href="https://events.robocore.net/teams" target="_blank"><i class="fa fa-users fa-fw justify" aria-hidden="true"></i> Equipes</a></li></ul></div>
<div id="menu_More" style="display: none;"><ul class="menuSB" ><li><a href="/modules.php?name=GR_Feedback"><i class="fa fa-phone fa-fw justify" aria-hidden="true"></i> Contate-nos</a></li>
<li><a href="/distribuidores"><i class="fa fa-building fa-fw justify" aria-hidden="true"></i> Distribuidores</a></li>
</ul></div>

		</div>    <script>
        //document.getElementById("mobile-menu").innerHTML = '<div class="no-desktop" style="padding: 10px;"><div class="navicon-line" style="background-color: gray;"></div><div class="navicon-line" style="background-color: gray;"></div><div class="navicon-line" style="background-color: gray;"></div></div>';
        //$(document).ready(function () {
            change_menu('RC_Tutoriais');
        //});

        function change_menu(menu_name) {

            var section_name = '';
            var _LANG = 'pt-BR';
            
            if (menu_name == 'RC_Tutoriais') {
                if(_LANG == 'pt-BR'){
                    section_name = 'TUTORIAIS';
                } else {
                    section_name = 'TUTORIALS';
                }
            } else if (menu_name == 'GR_Eventos') {
                if(_LANG == 'pt-BR'){
                    section_name = 'EVENTOS';
                } else {
                    section_name = 'EVENTS';
                }
            } else if (menu_name == 'More') {
                    if(_LANG == 'pt-BR'){
                    section_name = 'OUTROS';
                } else {
                    section_name = 'MORE';
                }
                } else {
                menu_name = 'GR_LojaVirtual';
                if(_LANG == 'pt-BR'){
                    section_name = '<a href="/">LOJA VIRTUAL</a>';
                } else {
                    section_name = '<a href="/">ONLINE STORE</a>';
                }
            }

    document.getElementById("section_RC_Tutoriais").classList.remove('selected');
document.getElementById("menu_RC_Tutoriais").style["display"] = "none";
document.getElementById("section_GR_LojaVirtual").classList.remove('selected');
document.getElementById("menu_GR_LojaVirtual").style["display"] = "none";
document.getElementById("section_GR_Eventos").classList.remove('selected');
document.getElementById("menu_GR_Eventos").style["display"] = "none";
document.getElementById("section_More").classList.remove('selected');
document.getElementById("menu_More").style["display"] = "none";

            document.getElementById('section_' + menu_name).classList.add('selected');
            document.getElementById('menu_' + menu_name).style["display"] = "block";
            document.getElementById('section_name').innerHTML = section_name;
        }
    </script>

    <div class="menuSB" off-canvas="sb-2 right reveal">
			<!-- Right Slidebar content -->
                        <ul class="menuSB" >
             
                 </ul>
		</div><div off-canvas="sb-3 top reveal"><!-- Top Slidebar content --><ul class="menuSB" ><li><a href="/" class="">LOJA VIRTUAL</a></li><li><a href="/tutoriais" class="selected">TUTORIAIS</a></li><li><a href="https://ide.robocore.net/ui/" class="">IDE</a></li><li><a href="https://events.robocore.net" class="">EVENTOS</a></li><li><a href="/quem_somos" class="">QUEM SOMOS</a></li><li><a href="/contato" class="">CONTATO</a></li></ul></div><div off-canvas="sb-4 right overlay" style="width: 400px; padding: 0px; margin: 0px; overflow: hidden;"></div>    
    <script>
        
        var maxHeight = 0;
        
        // Create a new instance of Slidebars
            var controller = new slidebars();
            // Initialize Slidebars
            controller.init();
            // Toggle left
            $('.toggle-left').on('click', function (event) {
                // Stop default behaviour and propagation
                event.preventDefault();
                event.stopPropagation();

                // Toggle Slidebar
                controller.toggle('sb-1');
                if (controller.active('sb-1')) {
                    document.getElementById("container_overlay").style.display = "block";
                    savedScrollY = window.scrollY;
                    let x = document.getElementById("container"); 
                    x.style.position = "fixed"; 
                    x.style.top = -savedScrollY+"px";
                } else {
                    document.getElementById("container_overlay").style.display = "none";
                    let x = document.getElementById("container");
                    x.style.position = "absolute";
                    x.style.top = "";
                    window.scrollBy(0, savedScrollY);
                }
            });
            // Toggle right
            $('.toggle-right').on('click', function (event) {
                // Stop default behaviour and propagation
                event.preventDefault();
                event.stopPropagation();

                // Toggle Slidebar
                controller.toggle('sb-2');
                //$('.jtextfill').textfill({debug: false, maxFontPixels: 50});

                if (controller.active('sb-2')) {
                    document.getElementById("container_overlay").style.display = "block";
                    savedScrollY = window.scrollY;
                    let x = document.getElementById("container"); 
                    x.style.position = "fixed"; 
                    x.style.top = -savedScrollY+"px";
                } else {
                    document.getElementById("container_overlay").style.display = "none";
                    let x = document.getElementById("container");
                    x.style.position = "absolute";
                    x.style.top = "";
                    window.scrollBy(0, savedScrollY);
                }
            });
            // Toggle right 2
            $('.toggle-right2').on('click', function (event) {
                // Stop default behaviour and propagation
                //event.preventDefault();
                event.stopPropagation();

                // Toggle Slidebar
                controller.toggle('sb-4');
            });
            // Toggle top
            $('.toggle-top').on('click', function (event) {
                // Stop default behaviour and propagation
                event.preventDefault();
                event.stopPropagation();

                // Toggle Slidebar
                controller.toggle('sb-3');
            });
            $('.toggle-any').on('click', function (event) {
                
                
            });
            
            // Close any
            $('.close-any').on('click', function (event) {
                // Check if a Slidebar is open
                if (controller.active('slidebar')) {
                    // Stop default behaviour and propagation
                    event.preventDefault();
                    event.stopPropagation();

                    // Close any Slidebar
                    controller.close();

                    document.getElementById("container_overlay").style.display = "none";
                    
                    let x = document.getElementById("container");
                    x.style.position = "absolute";
                    x.style.top = "";
                    window.scrollBy(0, savedScrollY);
                }
            });




            //$('.jtextfill').textfill({debug: false, maxFontPixels: 50});

    //                $('ul#topnavsf').superfish({
    //                    onShow: function () {
    //                        $(this).parent().children('a').addClass('active');
    //                    },
    //                    onHide: function () {
    //                        $(this).parent().children('a').removeClass('active');
    //                    },
    //                    speed: 'fast',
    //                    delay: 100,
    //                    disableHI: true
    //                });

            //$("#menu").menu();


            $('.menuSB li a.catWithSub').click(function () {
                var CurrentHeight = $(this).next().height();
                var maxHeight = $(this).next().data("maxheight");

                console.log('max ' + maxHeight);
                console.log('current ' + CurrentHeight);

                if (CurrentHeight > 0) {
                    $(this).next().css("max-height", "0");
                } else {
                    $(this).next().css("max-height", maxHeight);
                }

                //$(this).next().toggleClass("show");
                $(this).children().toggleClass("rotate");
                //                $(this).parent().toggleClass("catSub");
            });


        //loadingDone();
    </script>
    </body>
</html>