Novo ebook com Métodos, Técnicas e Processos Revolucionários de Estudo para te ajudar a estudar melhor!


organização

Como criar um painel (dashboard) no obsidian

painel de avião

Como criar um painel dashboard no obsidian

Continuo na labuta diária para conseguir ser mais organizado, mais ativo, mais calmo e mais produtivo. Por esse motivo tive a ideia de construir um dashboard de controle que integrasse minhas obrigações e demandas de estudo, trabalho, organização da casa, coisas das crianças e tudo mais que precisa estar sempre na mente.

E foi assim que montei esse painel. Ele está evoluindo ainda, mas parece que pode tornar-se uma bela ferramenta de organização e como está no mesmo aplicativo que uso para estudar, organizar meus livros e coleções e controlar minhas tarefas, acho que pode ser mais útil que usar programas de terceiros.

Espero que ele possa te dar ideias para ser mais organizado e possa ajudar na sua jornada de melhora contínua, como tem ajudado na minha.

O que é um painel ou dashboard?

Primeiro, dashboard é o nome chique para painel de controle, o qual é qualquer tipo de interface gráfica que fornece visualizações rápidas dos principais indicadores de desempenho relevantes para um determinado objetivo ou processo de negócios. É uma tela que traz as informações mais importantes para um indivíduo, empresa ou organização. É uma tela que resume e mostra o que está acontecendo e permite, geralmente, acompanhar o que é mais importante. Usarei dashboard e painel como sinônimos, intercambiáveis.

Um dashboard é uma apresentação visual de suas informações, visíveis de forma clara, direta com o objetivo de ajudar a acompanhar e decidir mais rapidamente.

A importância do painel

Esses painéis permitem que se monitore desempenho, se tome decisões e sejam percebidos riscos e oportunidades de forma rápida. Isso continua sendo verdade também para o estudante! Imagine estudar 14 disciplinas, resolver coisas da casa, agendar boletos e pagamentos, organizar os eventos infantis, guardar receitas, acompanhar hábitos e, ainda por cima, dormir bem, meditar e se exercitar. Ufa! Cansou só de ler, não é? Um painel pode te ajudar a verificar as demandas, os prazos e os ciclos de estudo de forma mais rápida.

Este é um guia que estou criando à medida que meu painel sai do papel e espero que, ao chegarmos ao fim, seja útil, para mim e para você.

Portanto, vamos aos preparativos!

Preparativos

Estou usando a versão mais recente do obsidian para montar esse painel, que espero funcionar bem com os demais sistemas que já uso, mas que deve funcionar para quem está começando também.

Instalação dos códigos CSS

O obsidian permite que façamos a inserção de CSS personalizado para alterar a visualização do aplicativo. Para nos aproveitarmos dessa possibilidade, coloquemos aqui um CSS que realiza pequenas alterações visuais no obsidian. Suas anotações não serão afetadas. Além disso, você pode fazer seus próprios ajustes ao código abaixo para que seu painel fique com a sua cara.

CSS é a sigla para Cascading Style Sheets, ou seja, Folhas de Estilo em Cascatas. É uma maneira de dar estilo ao código criado por linguagens como HTML, XML ou XHTML, por exemplo. De forma prática, ela funciona como uma camada de personalização do conteúdo visível.

Vamos agora criar um CSS e habilitá-lo para que a página da biblioteca fique mais agradável. Comece criando um arquivo painel_dashboard.css na pasta /.obsidian/snippets/ do seu cofre com o código abaixo dentro:


.dashboard {
    padding-left: 25px !important;
    padding-right: 25px !important;
    padding-top: 20px !important;
}

.dashboard .markdown-preview-section {
    max-width: 100%;
}

.dashboard .markdown-preview-section .title {
    top: 60px;
    position: absolute;
    font-size: 26pt !important;
    font-weight: bolder;
    letter-spacing: 8px;
}

.dashboard h1 {
    border-bottom-style: dotted !important;
    border-width: 1px !important;
    padding-bottom: 3px !important;
}

.dashboard div > ul {
    list-style: none;
    display: flex;
    column-gap: 50px;
    flex-flow: row wrap;
}

.dashboard div > ul > li {
    min-width: 250px;
    width: 15%;
}

Além do CSS acima, recomendo esse pequenino, que aumenta a largura da área de leitura útil. Coloque o código abaixo no arquivo largura_linhas_painel.css, na mesma pasta do arquivo acima.

 .dashboard .markdown-preview-section {
    width: 100% !important;
    max-width: 100% !important;
 }

Os arquivos CSS devem ser criados usando um editor de texto estilo notepad diretamente na pasta, fora do obsidian. Olhe meu explorador de arquivos, o dolphin, quando mostro a pasta /.obsidian/snippets/.

explorador de arquivos: pasta css

Depois, na aba de Aparência que fica na tela de configurações do obsidian é só ligar os dois arquivos:

configurações > aparência > ligar css

Abaixo é possível ver como fica o painel sem o CSS (à esquerda) e com o CSS ligado (à direita). Você pode escolher o que achar melhor, mas a mim me parece melhor com o novo estilo que carregamos no passo anterior.

com e sem o CSS ligado

Agora, vamos aos plugins. É possível preparar seu painel sem esses plugins, é verdade, mas com eles ficarão muito melhores!

Instalação dos plugins

Plugins são definidos como todo programa, ferramenta ou extensão que se encaixa a outro programa principal para adicionar ou modificar funções e recursos a ele. Assim sendo, os plugins podem efetuar alterações no aplicativo principal, ajustando seu funcionamento ou permitindo alterações de funções e do próprio fluxo de trabalho originalmente concebido. E os plugins do obsidian são lindões!

Para começar é necessário instalar e habilitar seis plugins da comunidade, os chamados “não-oficiais”. São eles:

  • Dataview, da comunidade, é um dos melhores plugins do obsidian, serve como compilador e apresentador de dados contidos em notas do seu cofre;
  • Homepage, permite que você escolha uma anotação para ser a página inicial do seu obsidian;
  • Banners, deixa que coloque imagens no topo das anotações;
  • Emoji-toolbar, serve para selecionar e inserir emojis rapidamente,
  • Hover-editor, melhora uma opção já existente, de mostrar uma prévia da anotação ao colocarmos o mouse em cima do wikilink; e

Já tratamos da instalação de plugins da comunidade em artigos anteriores, neste inclusive. Mas, para facilitar, mostrarei rapidamente como fazê-lo. Vamos aos passos:

  1. Acesse a área de configurações, clicando na engrenagem do lado esquerdo, assim:

    acessar área de configuração do obsidian

  2. Depois, desative o modo seguro, para permitir a instalação de plugins da comunidade. Atente que todos os plugins são verificados e possuem código aberto, mas há sempre algum risco na instalação desses itens.

    desligar modo seguro para permitir plugins não oficiais

  3. Clique no botão de “procurar” para acessar os plugins comunitários disponíveis:

    busque pelos plugins desejados

  4. E pesquise pelos plugins comunitários que usaremos aqui, o dataview, o homepage, o banners, o emoji-toolbar, o hoover-editor e o templater:

    busque por cada um dos plugins desejados

  5. Instale-os e depois habilite-os, na própria tela de plugins não oficiais.

    habilitação dos plugins não oficiais

  6. Repita esse passo para todos eles.

  7. No final de instalá-los e habilitá-los, a tela de plugins não oficiais ficará assim:

    tela de plugins habilitados

Configurando os plugins

Emoji Toolbar

A configuração do Emoji Toolbar é simples e opcional. Fiz um atalho para chamar a tela de emojis, mas se você quiser é só iniciar a paleta de comando, pressionando ctrl + p, escrever emoji e clicar no open emoji picker. Achei que colocar o alt + i era mais fácil.

configurações do atalho para o emoji toolbar

Banners

Só há necessidade de configuração de duas coisinhas no plugin de banners: primeiro, o tamanho do banner em si. Recomendo entre 120 e 160, a depender do seu gosto. Esta configuração é a primeira na aba do plugin:

configurando o banners

Depois, mais pra baixo, escolha a pasta de imagens. No meu caso é só imagens:

escolhendo a pasta de imagens

A seguir criamos o primeiro painel e escolheremos a imagem do banner.

Criando o primeiro painel

Para começarmos, de fato, é só criar uma anotação em seu cofre. Essa anotação será seu painel principal, o que quer dizer ser inteiramente possível montar outros painéis depois, especializados. Chamei minha nota de início, mas você pode chamar do que quiser. Depois, lá na página de configuração do plugin Homepage é só selecionar essa nota como sua página inicial.

configurando o homepage

Nela criei categorias, de acordo com meu fluxo de trabalho, com as anotações principais de cada uma. Algumas dessas categorias vão ter dashboards específicos mais tarde. É só preencher com os títulos e com os links das anotações. Ah, lembre-se de chamar o CSS que criamos lá em cima, no frontmatter da anotação, simplesmente colando esse YML no topo da nota:

---
cssclass: dashboard
---

E, claro, se você for usar um banner é necessário chamá-lo no frontmatter também. Editaremos esse código para que fique assim:

---
cssclass: dashboard
banner: "![[dashboard_de_avião.jpg]]"
banner_x: 0.5
banner_y: 0.52516
---

Veja que coloquei uma imagem chamada de dashboard_de_avião.jpg e o x e y são indicadores de posição. Tento deixar sempre com cerca de 0,5 para ficar centralizado.

Vamos ver como ficou a primeira versão desse painel?

O painel com todos os itens fechados:

painel com itens fechados

E, agora, com a abertura padrão:

painel com itens abertos

Como poderá ser visto no markdown dessa anotação, o painel nada mais é do que uma lista de anotações divididas em categorias. Tenho categorias para Estudos, Trabalho, Pessoal, Compras e uma meta categoria chamada de Informações que traz dados sobre o cofre. Cada uma dessas categorias é uma seção que começa com a marcação de título 1 em um callout, assim: > [!note] # Estudos, por exemplo; além disso, cada categoria pode ter diversos tópicos ou subcategorias, que são listas com subitens. Estes, por sua vez, são as anotações em destaque naquele conjunto.

O fluxo é, de modo geral, esse aqui:

fluxo de informações

Sendo a estrutura básica do painel essa aqui:

# Categoria 1
- Tópico 1
    - nota 1
    - nota 2
    - (...)
- Tópico 2
    - nota 3
    - nota 4
    - (...)
# Categoria 2
- Tópico 3
    - Nota 5
    - Nota 6
    - (...)
(...)

E, tudo isso é um arquivo markdown, fácil de editar e de fazer backup. Olha como é o markdown do painel principal:

markdown do painel principal

Simples assim! E você pode complicar ou simplificar sempre que desejar!

Os Callouts

Já há algum tempo é possível incluir exortações no código do obsidian. Essas exortações são chamadas de callouts, admonitions ou alertas e são interessantes para trazer destaques a seções específicas.

dicionário: exortação

São diversos os tipos de callouts, que são chamados utilizando o comando > [!nome do callout] # Título Opcional do callout. Olhe os exemplos:

> [!note]
> [!info]
> [!abstract]
> [!todo]
> [!tip]
> [!success]
> [!question]
> [!warning]
> [!failure]
> [!danger]
> [!bug]
> [!exemple]
> [!quote]

Que, ao serem renderizados, com a devida quebra de linha entre cada um, ficarão assim:

tipos de callouts

Alguns usos diferentes

Uma das categorias que coloquei é a de compras e ela difere um pouco das demais por ser uma função do dataview. Se você costuma ler meus artigos sabe que** sou doido nesse plugin**, já que ele permite transformar o cofre do obsidian em um banco de dados, apresentando as informações disponíveis de forma clara e dinâmica. Certamente ele não é a coisa mais fácil de aprender, mas eu fui na tentativa-e-erro e consegui fazer umas coisas interessantes.

Nessa categoria de compras, portanto, eu chamo o dataview e tenho a lista completa de itens a serem comprados, nas diversas categorias que decidi criar. Olha como ficou:

lista de compras

O código é bem simples e é só colá-lo e ajustá-lo a suas demandas específicas para ter experiência desejada. O código é esse:

> [!Exemple]- # Compras
> `$=dv.taskList(dv.pages('"Tarefas/Compras"').file.tasks .where (t => !t.completed))`

Um dos meus outros tópicos é Receitas. Decidi criar uma página principal para este tópico e, para isso, foi necessário apenas uma anotação, na qual inseri um banner e um código dataview para listar todas as receitas existentes. Olha só:

aba de receitas

Ao renderizar, ficará assim:

aba de receitas renderizada

E por falar em dataview, no painel principal há uma seção com meta informações sobre o cofre. Coloquei as seguintes:

  • Anotações alteradas recentemente;
  • Anotações marcadas com a etiqueta #importante;
  • Estatísticas
    • Total de arquivos no cofre;
    • Semanas de estudo planejadas;
    • Tarefas concluídas; e
    • Tarefas em aberto.

Para incluir uma seção similar apenas insira o código abaixo:

> [!danger]+ # Informações
> - 🗄️ Anotações alteradas recentemente
 `$=dv.list(dv.pages('').sort(f=>f.file.mtime.ts,"desc").limit(4).file.link)`
> - 🔖 Tag:  importante 
 `$=dv.list(dv.pages('#importante').sort(f=>f.file.name,"desc").limit(4).file.link)`
> - 〽️ Estatística
>	-  Total de arquivos: `$=dv.pages().length`
>	-  Semanas de estudo planejadas: `$=dv.pages('"Estudos/Planejamento"').length`
>	- Tarefas concluídas: `$=dv.span(dv.pages('"Tarefas"').file.tasks.where(t => t.completed).length);`
>	-  Tarefas em aberto: `$=dv.span(dv.pages('"Tarefas"').file.tasks.where(t => !t.completed).length);`

Um exemplo deste cofre, em sua versão mais atualizada, pode ser baixado no repositório do github. É só fazer um git clone ou baixar o .zip e abri-lo com seu obsidian para começar a usar.

E o mais importante é começar a usar. Veja se esse painel serve para você, para ajudar na organização e na capacidade de ter uma ideia geral das suas anotações, dos estudos, do trabalho, das contas e das tarefas em uma tela só.

Sucesso e dopamine-se!!

Comentários, Dúvidas, Críticas e Sugestões