Show page Old revisions Backlinks Export to PDF This page is read only. You can view the source, but not change it. Ask your administrator if you think this is wrong. ===== Componentes de um laboratório no RELLE ===== Um experimento é composto de três módulos: a interface web, o servidor de experimento e o próprio experimento físico, como ilustrado na figura abaixo. Esta página traz informações para desenvolvedores de laboratórios remotos criarem interfaces e hospedar seus experimentos no RELLE. {{ :loading.png |}} ===== Pacote de arquivos ===== Este pacote contém os arquivos para a desenvolver a interface web de um experimento. [[https://github.com/RExLab/lab_package]] ===== Dependências disponíveis para a interface de usuário ===== Obrigatórios - já são carregados na interface, não é necessário adicionar qualquer código para usar suas funcionalidades: * Biblioteca jQuery 2.1.3 [[https://jquery.com/download/]] * Framework CSS BootStrap [[http://getbootstrap.com/]] * Tema Flat UI [[http://designmodo.github.io/Flat-UI/]] Opcionais - não são carregados na interfaçe, é necessário adicionar códigos para usar suas funcionalidades: * Biblioteca Shepherd. Tutoriais: [[http://github.hubspot.com/shepherd/docs/welcome/]]. Código:[[http://relle.ufsc.br/js/shepherd.js]] * ChartJS: Esta biblioteca é usada para criação de diversos tipos de gráficos dinâmicos em HTML5 utilizando canvas. [[http://www.chartjs.org/| Documentação]] [[http://relle.ufsc.br/js/Chart.js| Chart.js]] * Biblioteca mlens[[http://mlens.musings.it/]]: Ampliação de imagens Código: [[http://relle.ufsc.br/js/lens.js]] * Biblioteca ZoomJS [[https://github.com/marcaube/bootstrap-magnify]]: Ampliação de imagens Código: [[http://relle.ufsc.br/js/zoom.js]] * Biblioteca RoundSlider [[http://roundsliderui.com/]] http://relle.ufsc.br/js/ Como exemplo, observe o código abaixo, ele deve estar no arquivo exp_script.js. <code javascript> $.getScript('http://relle.ufsc.br/js/Chart.js', function () { // Ajustar parâmetros necessários, etc... }); </code> ===== pt.html ===== Este arquivo é carregado quando o usuário tem acesso ao experimento. Somente é obrigatório manter a div DivExp, o restante fica a critério de cada desenvolvedor. <code html pt.html> <div id='DivExp' class="container"> <center> <h3>Nome do Experimento</h3> <div class="row"> <!-- Classes container, row e col-xx fazem parte do framework bootstrap e são usados para organizar os elementos na página --> <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12" > <img class="cam" src='http://relle.ufsc.br:8072' width="100%"/> <!-- Inserir endereço da câmera IP --> <div class='row'> <div class='col-lg-2 col-lg-offset-2 col-md-3 col-sm-3 col-xs-3'> <!-- Aqui podem ser inseridos quaisquer controles do experimento que ficarão abaixo da imagem --> </div> </div> </div> <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12"> <!-- Aqui podem ser inseridos controles e retorno de sensores --> </div> <div id="report"></div> <!--remover tag se não houver relatório de experiência --> <div id="csv"></div> <!--remover tag se não houver exportação dos dados em formato csv--> </div> </center> </div> <script> <!-- Strings traduzidas que serão utilizadas no exp_script.js --> var lang = { showme: 'Mostre-me como funciona', showmeshort: 'Como funciona', next: "Próximo", previous: "Anterior", done: "Pronto", leave: "Sair", intro:"Insira texto para o tutorial" , introcamera: "Esta transmissão de vídeo", report: "Salve os resultados de sua experiência..." }; </script> </code> ===== en.html ===== Este arquivo possui as mesmas características do pt.htlm, diferenciando-se do conteúdo para o usuário, que por sua vez deve estar em inglês ===== exp_style.css ===== É usado para definir como serão exibidos os elementos contidos no código de uma página da internet. <code css exp_style.css> h1{ text-align: center; padding-bottom: 20px; } #cam{ margin-top:7%; } // Insira aqui quantas regras css forem necessárias. </code> ===== exp_script.js ===== Este é um template para aplicações de laboratório escritas em node.js. <code javascript exp_script.js> var rpi_server = "http://painelcc1.relle.ufsc.br"; // URL para conexão com o servidor do experimento $(function () { $.getScript(rpi_server + '/socket.io/socket.io.js', function () { socket = io.connect(rpi_server); socket.emit('new connection', {pass: $("#pass").html()}); socket.on('new message', function (data) { console.log(data); }); socket.on('data received', function (data) { }); $.getScript('http://relle.ufsc.br/exp_data/{ID}/welcome.js', function () { $('#return').append('<button id="btnIntro" class="btn btn-sm btn-default"> <span class="long">' + lang.showme + '</span><span class="short">' + lang.showmeshort + '</span></button>'); var shepherd = setupShepherd(); $('#btnIntro').on('click', function (event) { event.preventDefault(); shepherd.start(); }); }); }); }); function report(id) { } </code> ===== Adicionando tutoriais ===== Em alguns casos pode ser necessário mostrar ao usuário como usar a interface de seu experimento. A biblioteca [[http://github.hubspot.com/shepherd/docs/welcome/|Shepherd]] permite criar guias que indicam o elemento da página com texto explicativo associado. Além disso, é possível inserir código javascript para serem chamados durante a transição entre uma mensagem e outra. \\ O pacote de arquivos traz um template para configuração dos guias no arquivo welcome.js. Este arquivo deve estar na pasta do seu experimento **(/exp_data/{ID})** e é carregado pelo arquivo exp_script.js (ver linhas 21 a 30). \\ Os tutoriais dependem de um arquivo CSS. A seguinte linha de código deve ser incluída na primeira linha do arquivo exp_script.js ou também adicionado outro arquivo equivalente customizado. <code javascript> $('head').append('<link rel="stylesheet" href="http://relle.ufsc.br/css/shepherd-theme-arrows.css" type="text/css"/>'); </code> <code javascript welcome.js> var setupShepherd = function () { var shepherd = new Shepherd.Tour({ defaults: { classes: 'shepherd-element shepherd-open shepherd-theme-arrows', showCancelLink: true, scrollTo: true } }); shepherd.on('cancel', function () { // função chamada ao cancelar ou sair do tutorial }); shepherd.on('start', function () { // função chamada ao iniciar o tutorial }); // Primeira mensagem do tutorial shepherd.addStep('shep_intro', { text: [lang.intro], classes: 'shepherd shepherd-open shepherd-theme-arrows shepherd-transparent-text', buttons: [ { text: lang.leave, classes: 'shepherd-button-secondary', action: function () { // Função chamada ao clicar no primeiro botão. // Se necessário, escrever seu código aqui shepherd.cancel(); } }, { text: lang.next, action: function () { // Função chamada ao clicar no segundo botão. // Se necessário, escrever seu código aqui shepherd.next(); }, classes: 'shepherd-button-example-primary' } ] }); // Tour no meio shepherd.addStep('shep_cam', { text: [lang.introcamera], attachTo: 'img.cam center', // A primeira string indica o elemento focado, isto é, uma tag img com classe cam. A string após o espaço indica a posição da mensagem será no centro deste elemento // Sem este campo attachTo, a mensagem aparecerá no meio da página classes: 'shepherd shepherd-open shepherd-theme-arrows shepherd-transparent-text', buttons: [ { text: lang.previous, classes: 'shepherd-button-secondary', action: function () { shepherd.back(); } }, { text: lang.next, action: function () { shepherd.next(); }, classes: 'shepherd-button-example-primary' } ] }); shepherd.addStep('shep_report', { text: [lang.report], classes: 'shepherd shepherd-open shepherd-theme-arrows shepherd-transparent-text', buttons: [ { text: lang.previous, classes: 'shepherd-button-secondary', action: function () { shepherd.back(); } }, { text: lang.done, action: function () { shepherd.cancel(); }, classes: 'shepherd-button-example-primary' } ] }); return shepherd; }; </code> Para configurações adicionais ou customização pode ser consultada documentação da biblioteca Shepherd e seguir as instruções lá presentes.