Reprogramação Interface Gráfica



  • Com base no tópico http://forum.pfsense.org/index.php/topic,48140.msg357310.html#msg357310 inventei de mexer na interface gráfica.
    Utilizei esse template http://thevectorlab.net/theme/metrolab/ e o tema do @charlie0440.
    O resultado até agora é o mostrado nas imagems.


    Há quem não goste de toda essa firola e tals… bom, eu gosto e resolvi compartilhar com vocês do fórum.
    Até então está bem funcional, sem nenhum bug aparente.



  • Interessante, gostei!

    Disponibilizou isso em algum local!? Patch? Tema!?

    att,



  • Ainda não ccesario, to aparando algumas coisinhas que ficaram fora do lugar, mas logo vou subir ele no github pro caso de alguém querer utilizar e/ou incrementar alguma coisa.



  • Parabensss cara!! Ficou muito bonito e funcional!!!

    Eu queria saber incluir alterações como essa diretamente no arquivo .iso..

    Ter um PFsense mais personalizável…



  • poxa amigão, ficou bom D+!!!!!
    quero no meu agoooora!

    é um design muito bom pois aproveita mais a tela, já que hoje em dia as telas tendem a ser mais wide né! muito bom msmo!



  • @Thiago:

    Eu queria saber incluir alterações como essa diretamente no arquivo .iso…

    Bom, até as versões anteriores, o tema parece estar compactado num sistema de arquivo, no fórum tem um tópico de alguém que tentou mais não conseguiu. Tentei uma vez tb, personalizei algumas coisas, mas o tema não.

    @UnDr3aD:

    poxa amigão, ficou bom D+!!!!!
    quero no meu agoooora!

    é um design muito bom pois aproveita mais a tela, já que hoje em dia as telas tendem a ser mais wide né! muito bom msmo!

    Vlw cara, logo disponibilizo ele.



  • @kelsen:

    Vlw cara, logo disponibilizo ele.

    Podemos até subir para o 2.2 via pull request.

    Ficou muito bom.



  • Parabéns pelo trabalho.
    Ficou muito bom.
    Seria mais uma opção de thema para o pfsense.



  • Como prometido, os arquivos estão no meu repositório https://github.com/kelsen/pfsense
    Não sei muito bem como trabalhar com o github então, qualquer coisa me desculpem.



  • Pessoal, tenho feito alterações constante na interface, gostaria do feedback de vocês mesmo que não tenha possibilidade de virar algo oficial. Pode ser que outros queiram utilizar.
    Nessa ultima alteração, clicando no ícone do canto esquerdo a tela é expandida.



  • Olá!

    Em primeiro lugar: Parabéns Kelsen, gostei muito do minimalismo e da sobriedade do tema.

    Trará um ar mais moderno ao PFSense.

    Eu pessoalmente gosto de menus suspensos no topo da página, mas… as primeiras imagens mostram uma disposição semelhante a de roteadores das principais marcas, como TP-LINK, LinkSys e etc. Então facilita a familiarização com a interface.

    PS: Fico feliz que você não tenha trocado as referências ao PFSense como havia sinalizado no outro tópico, tempos atrás.  ;)



  • @LFCavalcanti:

    Olá!

    Em primeiro lugar: Parabéns Kelsen, gostei muito do minimalismo e da sobriedade do tema.

    Trará um ar mais moderno ao PFSense.

    Eu pessoalmente gosto de menus suspensos no topo da página, mas… as primeiras imagens mostram uma disposição semelhante a de roteadores das principais marcas, como TP-LINK, LinkSys e etc. Então facilita a familiarização com a interface.

    LFCalvaanti esse é um trabalho que me custa muito tempo, fico feliz que gostem.

    PS: Fico feliz que você não tenha trocado as referências ao PFSense como havia sinalizado no outro tópico, tempos atrás.  ;)

    Acho que teria mais chance de chamar a atenção do core team se tiver muita referência ao produto.



  • Da pra publicar ele para a 2.2

    Já acertou os bugs que encontrou?



  • @marcelloc:

    Da pra publicar ele para a 2.2

    Já acertou os bugs que encontrou?

    Está funcional, falta acertar os alertas, já que a barra não existe mais, tava pensando em colocar eles naquele ícone de campainha, que no tema original é feito pra isso; ainda preciso estudar o código pra isso e achar um jeito de ativar um alerta pra testar.
    Vou refazer o repositório e aí se você quiser fazer um commit, já que você tem um grande envolvimento no projeto, deve ser mais fácil.



  • Não tenho commit direto no código do pfsense,  só nos pacotes.

    Psso te ajudar no pull request.



  • Segue a página de login customizada, contêm atalhos para o fórum, página do suporte premium, página principal do pfsense e uma referência a sua empresa.



  • Ficou muito windows 8…. :(



  • @marcelloc:

    Ficou muito windows 8…. :(

    Muito coloridinho?  ou muito quadradinho? ou os dois?! rsrs :o
    Alguma sugestão?



  • Não, só opinião mesmo.  :)



  • eu gosto desse design do windows 8, embora a usabilidade não seja muito boa! Mas acho que isso não vai influenciar no uso do pfsense não!
    é só fazer uma interface gnome-shell like pra acalmar os ânimos! kkkk



  • kkkkk, não fiquem ofendidos com o windows 8 like..
    Realmente quando terminei, vi  que estava muito colorido, algo incompatível com um trabalho sério que é administrar um Firewall.
    Vocês poderiam procurar por aí na internet uma página de login legal e postar aqui, dái a gente faz uma votação do que é melhor.



  • @kelsen:

    kkkkk, não fiquem ofendidos com o windows 8 like..
    Realmente quando terminei, vi  que estava muito colorido, algo incompatível com um trabalho sério que é administrar um Firewall.
    Vocês poderiam procurar por aí na internet uma página de login legal e postar aqui, dái a gente faz uma votação do que é melhor.

    Olá!

    Então Kelsen, a questão da interface "Windows 8 Style" envolve não só a "politica" de um software Open Source, como o PFSense é, mas também a questão dos direitos autorias da Microsoft sobre o Design. Como o PFSense é concorrente de várias soluções "UTM" da Microsoft e da CISCO, pode acabar dando margem para Exploit dessas empresas.

    Outro fator é com o perfil da aplicação e dos que trabalham com ela. O que eu mais gostei no seu projeto foi justamente a simplicidade com coloração e design atual. Pessoalmente prefiro a interface com aquele design mostrado nos primeiros posts.

    A tela de Login não precisa constar muita coisa, Usuário senha e pronto, talvez um botão com um Drop-Menu com "links interessantes".



  • @LFCavalcanti:

    @kelsen:

    kkkkk, não fiquem ofendidos com o windows 8 like..
    Realmente quando terminei, vi  que estava muito colorido, algo incompatível com um trabalho sério que é administrar um Firewall.
    Vocês poderiam procurar por aí na internet uma página de login legal e postar aqui, dái a gente faz uma votação do que é melhor.

    Outro fator é com o perfil da aplicação e dos que trabalham com ela. O que eu mais gostei no seu projeto foi justamente a simplicidade com coloração e design atual. Pessoalmente prefiro a interface com aquele design mostrado nos primeiros posts.

    A tela de Login não precisa constar muita coisa, Usuário senha e pronto, talvez um botão com um Drop-Menu com "links interessantes".

    Na verdade a interface não mudou, o dilema é só a página de login, por isso sugeri que postassem páginas pra gente ver oque ficaria melhor.



  • Bom dia.
    Eu penso que a você pode pegar uma base a tela de login do zimbra que e simples e fica bem agradavel.
    Abaixo o link da tela de login do zimbra.

    http://wiki.processmaker.com/index.php/Zimbra



  • O que tem de errado com a tela de login atual?  ???



  • @marcelloc:

    O que tem de errado com a tela de login atual?  ???

    Só achei que não combinava com o novo tema, mas talvez não seja problema.



  • Ficou boa, mas na tela de login deixe só a caixa de usuário e senha.
    Afinal ninguem vai ficar entrando na tela de login para depois acessar o forum ou o premium portal a pessoa já vai direto no site.

    Mas seria interessante uma tela de login onde você pudesse colocar o logotipo da empresa, por exemplo, vem na tela o logo da empresa embaixo o login e senha e depois em baixo um logo assim powerd by pfsense  ::)



  • @diegogyn:

    Mas seria interessante uma tela de login onde você pudesse colocar o logotipo da empresa, por exemplo, vem na tela o logo da empresa embaixo o login e senha e depois em baixo um logo assim powerd by pfsense  ::)

    Nós não vamos entrar nesse debate novamente, certo?

    Porque trocar o logotipo do PFSense por outro? Ainda mais em uma tela que só os "SysAdmins" usam?

    A não ser que você queira chamar o PFSense de "meu", colocar outro nome e vender como se você tivesse criado. Como já debatido milhões de vezes, legalmente é permitido, éticamente é outra história.



  • @LFCavalcanti:

    @diegogyn:

    Mas seria interessante uma tela de login onde você pudesse colocar o logotipo da empresa, por exemplo, vem na tela o logo da empresa embaixo o login e senha e depois em baixo um logo assim powerd by pfsense  ::)

    Nós não vamos entrar nesse debate novamente, certo?

    Porque trocar o logotipo do PFSense por outro? Ainda mais em uma tela que só os "SysAdmins" usam?

    A não ser que você queira chamar o PFSense de "meu", colocar outro nome e vender como se você tivesse criado. Como já debatido milhões de vezes, legalmente é permitido, éticamente é outra história.

    Eu não sugeri trocar o logotipo do pfSense só dei a ideia de colocar o logotipo da empresa, como ocorre com nosso ERP aqui o logotipo da empresa vem nele mas tem o logo do software embaixo. Mas como você disse vamos evitar o debate.

    Mudando de assunto, existe algum tema do pfSense para dispositivos mobile? Tentei usar aqui em um smartphone e percebi que ele muda o tema para um onde os menus ficam como a barra lateral esquerda isso e normal certo?

    []´s



  • Sim, normal e certo.

    Este tema não depende de javascript para mostrar os menus e também da acesso direto a qualquer tela.



  • E aí pessoal,
        O trabalho continua, agora tem a função de adicionar colunas como mostra as imagens abaixo, ainda algumas coisas a serem ajustadas!



  • @kelsen:

    E aí pessoal,
        O trabalho continua, agora tem a função de adicionar colunas como mostra as imagens abaixo, ainda algumas coisas a serem ajustadas!

    Finalmente posso aproveitar o monitor Wide corretamente. kk



  • Segue abaixo o link para baixar o tema:
    http://www.4shared.com/archive/NtOiCneC/metrolabtar.html

    • mv themes/twitter_bootstrap_fs /usr/local/www/themes/

    • mude o tema na interface gráfica

    • cp * /usr/local/www/

    Importante: sempre faça backup dos arquivos originais antes, obedeça a ordem acima para não quebrar a interface gráfica.



  • Consegue transformar isso em um pacote ou publicar para o pfsense 2.2 como tema nativo?

    Precisa de ajuda?



  • Então @marcelloc, iria procurar a sua ajuda mesmo pra tentar construir um pacote, como eu fiz um fork do 2.1 e não do master, talvez eu tenha que refazer o trabalho e com tantas alterações que fiz, os outros temas não funcionam, provavelmente não vai ser aceito como um tema nativo mesmo.



  • Entendi. Estou passando isso com uma atualização para o  dhcp.

    Fiz na 2.1, tive que refazer para a 2.2 e ainda incluí uma função que já existia… :(



  • Cansera né, mas então, acho que a melhor alternativa por agora pra quem quiser utilizar essa interface é fazendo um pacote mesmo.
    Basicamente só precisa fazer backup dos arquivos originais, copiar o tema pro diretório /usr/local/www/themes/, porém o tema tem que ser aplicado antes de copiar os outros arquivos pro /usr/local/www/ do contrário a interface vai ficar toda desconfigurada.
    O processo de desinstalação deve voltar os arquivos originais e depois aplicar o tema padrão pfsense_ng.
    Não tenho experiência nenhuma em fazer pacotes, se você (marcelloc) quiser dar uma força, do contrário vai demorar um tempo até lá.
    Abraço!



  • @kelsen:

    Segue a página de login customizada, contêm atalhos para o fórum, página do suporte premium, página principal do pfsense e uma referência a sua empresa.

    Fantastic Kelsen trabalho …... o melhor trabalho que eu já vi até agora!

    Eu vou ter algum tempo em algumas semanas a partir de agora e vai te dar uma mão em fazer alguma codificação.



  • Olha só, alguém gostou da pagina de login windows 7 8 like, rsrsrs
    @Clear-Pixel, toda contribuição é bem vinda, obrigado!
    @marcelloc, por acaso já teve tempo de olhar sobre fazer um pacote?



  • Alguns vão te odiar por usar o tema Metro Microsoft ….. Eu não gosto da idéia, mas hey , ele funciona e sua muito mais interessante que os temas padrão chatas que vêm com pfsense ..... Do ponto de vista de design é um design moderno bastante simples que exige o mínimo de esforço para unir.

    Então, eu sou tudo para ela como sendo uma nova base de ponto de partida para um tema pfSense . Tenha em mente que ao modificar e criar um novo código certifique-se a estrutura do código pode ser facilmente modificado para criar diferentes estilos de tema mais tarde.

    Como eu já disse não estar preocupado com explodir os atuais temas padrão que vêm com o pfSense . Em algum momento o tema vai estar em um pacote que pode voltar a velha escola , se o usuário deseja .

    P.S.
    O que sempre você faz ...... por favor, mantenha o menu expansível vertical. Há muitas razões técnicas e de produtividade para mantê-lo verticais ...... não vai conseguir as razões mas terá retorno em melhorar a usabilidade móvel e, claro, a produtividade desktop.

    Google fez um péssimo trabalho de traduzir de forma que há problemas com palavras e sturcture.