Criando um tema para o Plasma do KDE – Parte 2

Neste artigo segue a segunda parte do tutorial de criação de temas para o Plasma do KDE. Aqui vamos detalhar cada elemento descrito no artigo anterior, descrevendo em detalhes cada parte do seu tema.

Conteúdo

  • Definição, estrutura e localização do tema
  • Imagens
  • Papeis de parede
  • Reação à mudanças do tema
  • Cores
  • Formato da imagem de fundo
    • Usando as cores do sistema
  • Elementos do tema
  • A pasta “Opaque”
  • A pasta “translucent”
  • A pasta “icons”

Definição, estrutura e localização do tema

Os temas são armazenados em share/apps/desktoptheme. Um tema é descrito por um arquivo .desktop nesta pasta.  O conteúdo desse arquivo se parece com isso:

[Desktop Entry]
Name=Oxygen
Comment=Theme done in the Oxygen style
X-KDE-PluginInfo-Author=The Oxygen Project
X-KDE-PluginInfo-Email=kde-artists@kde.org
X-KDE-PluginInfo-Name=default
X-KDE-PluginInfo-Version=pre0.1
X-KDE-PluginInfo-Website=http://plasma.kde.org
X-KDE-PluginInfo-Category=
X-KDE-PluginInfo-Depends=
X-KDE-PluginInfo-License=GPL
X-KDE-PluginInfo-EnabledByDefault=true

Dentro desse diretório existirá a seguinte estrutura de diretórios e arquivos:

  • colors: [opcional] define uma arquivo de configuração que fornece um esquema de cores compativel com as imagens
  • dialogs/’: as imagens para as caixas de dialogo
  • wallpapers/: papeis de parede
  • widgets/: as imagens para os widgets
  • opaque/: diretório opcional que contém as imagens compativeis com ambientes que não possuem suporte a composição
  • locolor/: diretório opcional contendo as imagens compativeis com ambientes que usem cores de 8 bits

Imagens

Os elementos do tema são acessados pelo seu caminho. Se são mapeados pelo caminho literal ou não, isso não é garantido e considerado um detalhe da implementação do Plasma::Theme.
Dessa forma, para acessar  as imagens, pode-se criar um svg dessa maneira:

  1. Plasma::Theme theme;
  2. QSvgRenderer svg(theme.image(“dialogs/background”));

É geralmente recomendado usar o Plasma::Svg ao invés do QSvgRendere diretamente. Lembre de chamar resize()  em Plasma::Svg antes de desenhar as imagens.

  1. Plasma::Svg svg(“dialogs/background”);
  2. svg.resize(size());

Papeis de parede

Os temas podem opcionalmente fornecer papeis de parede para serem usados pelo tema. Esses papeis de parede devem estar no diretório wallpaper/ dentro da pasta do tema.
Um tema também pode definir um papel de parede padrão, tamanho do papel de parede e extensão de arquivo do mesmo, que serão usados junto com o tema. O papel de parede padrão pode ser instalado no local padrão ou ser carregado com o próprio tema. A configuração padrão para papeis de parede devem estar no arquivo metadata.desktop do tema e conter as seguintes entradas:

[Wallpaper]
defaultWallpaperTheme=<name of default wallpaper package>
defaultFileSuffix=<wallpaper file suffix, e.g. .jpg>
defaultWidth=<width in pixels of default wallpaper file>
defaultHeight=<height in pixels of default wallpaper file>

Reações à mudanças do tema

Se você usa o Plasma::Svg, as mudanças no tema são automaticamente ativadas. Não sendo assim, você pode conectar-se ao sinal changed() da classe Plasma::Theme. Esse sinal é emitido cada vez que o tema é alterado, e pode ser disparado pelo usuário ao mudar o tema ou por mudanças do sistema como a disponibilidade de um gerenciador de composição.

Cores

O arquivo de cores segue o padrão do arquivo de esquema de cores do KDE e permite que um tema defina que cores funcionam melhor com seus elementos. As cores deste arquivo podem ser editadas com o módulo de definição de cores padrão.

  • Crie um nove esquema de cores usando o editor padrão: SystemSettings >> Appearance >> Colors
  • Salve com um nome único.
  • Abra o arquivo do esquema de cores com o kate ou kwrite.
    • Salvo em /home/[user]/.kde/share/apps/color-schemes/[unique name].colors
  • Copie tudo para seu arquivo de cores do plasma exceto as seções “[ColorEffects:Disabled]” and “[ColorEffects:Inactive]”.

O uso mais comum do arquivo de cores é garantir que o texto possa ser lido em vários fundos de tela.
Abaixo segue uma lista de entradas do arquivo de cores que são atualmente bastante usadas em um tema do Plasma:

  • [Colors:Window]
    • ForegroundNormal a cor do texto a ser aplicado em textos sob os elementos que representam imagens de fundo padrão; mapeado para Theme::TextColor
    • DecorationHover A cor usada para seleções de texto; mapeado em Theme::HighlightColor
    • BackgroundNormal a cor de fundo padrão, para itens que desenham seu próprio fundo, permitindo que eles misturem-se com o tema; mapeado em Theme::BackgroundColor
  • [Colors:Button]
    • ForegroundNormal a cor do texto dos botões; mapeados em Theme::ButtonTextColor
    • BackgroundNormal usada para botões; mapeado com Theme::ButtonBackgroundColor
    • ForegroundActive cor usada para a matiz BackgroundNormal para a cor final dos botões
  • [Colors:View]
    • ForegroundLink cor da fonte do texto de links
    • ForegroundVisited cor da fonte do texto de links já visitados

Outras cores do arquivo podem ser usadas por widgets individuais ou usadas no futuro, então não machuca fornecer um arquivo de esquema completo e é a estratégia mais segura.
Atualmente também é usada por widgets individuais, o que deve dar um boa idéia do uso adicional dos padrões:

  • [Colors:View]
    • ForegroundActive usado por relógios digitais para a cor padrão do texto, dicionários para a cor do texto do resultado, microblog para a cor do texto do status
    • ForegroundInactive usado pelo pager para desenhar as janelas e frames inativos, microblogs para nomes de usuários
    • ForegroundNormal usado pelo microblog para a cor de fundo da área de entrada do status de atualização

Formatos da imagem de fundo

Todos os svg’s das imagens de fundo (exceto papeis de parede) precisam ter os seguintes elementos, todos os quais serão desenhados no seu tamanho nativo (e podem até ser bitmaps), exceto para o center que será escalonado:

  • topleft: o canto superior esquerdo
  • topright: o canto superior direito
  • bottomleft: o canto inferior esquerdo
  • bottomright: o canto inferior direito
  • top: a barra do topo entre os dois cantos superiores
  • left: as barras da esquerda entre os dois cantos esquerdos
  • right: as barras da direita entre os dois cantos direitos
  • bottom: as barra de baixo entre os dois cantos inferiores
  • center: o preenchimento do centro; será escalonado, então deve ser um elemento SVG

Alguns componentes do plasma podem usar os elementos acima nomeados com prefixos. Por exemplo, o painel localizado no lado esquerdo da tela usa o prefixo “west”.
Adicionalmente, os seguintes elementos podem ser usados para controlar a renderização do fundo:

  • hint-stretch-borders: se existir, as bordas não serão colocadas lado a lado mas ao invés disso serão esticadas para se encaixar
  • hint-tile-center: se existir, o centro não será escalonado mais será colocado lado a lado para preencher o widget.
  • hint-no-border-padding:  se esse elemento existir, não haverá espaços próximo as bordas, e o texto será capaz de usar toda a área do widget (bordas inclusive)
  • hint-apply-color-scheme: se esse elemento existir, o svg será colorizado usando o esquema de cores. A colorização é aplicada em 100%, e afunilada em cada lado, de um valor/intensidade de cor de 127.
  • current-color-scheme: se um elemento de estilo com  essa id existir, será substituido por um estilo css com cores do esquema de cores atual.
  • [prefix]-hint-[direction]-margin: Use esse recurso opcional se você quiser usar diferentes margens e tamanhos de bordas. A parte [prefix] é opcional e identifica o prefixo do painel que você quer especificar as margens. [direction] pode ser top, bottom, left ou right e indica a borda que você quer configurar. Para as margens top e bottom a altura será alterada por esse recurso, e para as margens left e right será a largura.

Usando as cores do sistema

É possivel aplicar as cores de um esquema a um gráfico. Uma maneira fácil de fazer isso é adicionando um elemento com a id hint-apply-color-scheme ao svg. Nesse caso, os gráficos renderizados serão convertidos em monocromáticos e colorizados com a cor da janela do fundo.
Para aplicar uma cor de uma classe a um elemento, seu atributo fill ou stroke precisa ser currentColor e naturalmente o nome da classe que se quer usar tem de estar no atributo classe. Atenção especial deve ser dada a gradientes, já que nem as tags de gradientes nem as tags de parada aceitam classes. Para ainda ter o resultado desejado, você pode colocar uma tag-g em volta delas e aplicar a classe a esta.

Elementos do tema

Os temas são instalados em share/apps/desktoptheme. Cada tema é armazenado em um sub-diretório com a seguinte estrutura de arquivos:

  • /dialogs: elementos para caixa de dialogos
    • /background.svg: o fundo de caixa de dialogo genéricas que são usadas pela tela de senha da proteção de senha, etc.
    • /krunner.svg: o fundo da caixa de dialogo usada pelo “Executar Comando”
    • /shutdowndlg.svg: fundo e botões para a tela de saída do sistema
      • background: fundo da tela de logout
      • button-normal: fundo do botão
      • button-hover: fundo do botão quando o mouse está pressionado sobre ele
      • button-small-normal: fundo do botão pequeno
      • button-small-hover: fundo do botão pequeno quando o mouse está pressionado sobre ele
    • /kickoff.svgz : fundo para o lançador de aplicações, precisa de um frame, com o prefixo ‘ plain’
  • /widgets: fundo de um  widget de desktop genérico
    • /action-overlays.svgz: sobrepõe os ícones que indicam ações (desde o  KDE 4.4)
      • add-normal: ícone usado para adicionar o ícone pai a uma seleção de elementos (usando por exemplos em folderview), estado normal; existem também add-hover e add-pressed
      • remove-normal: ícone usado para remover o ícone pai de uma seleção de elementos, existem também o remove-hover e remove-pressed.
    • /analog_meter.svg: um widget para um medidor analógico
      • background: o corpo do instrumento analógico
      • foreground: o pino onde o braço rotaciona
      • pointer: o braço do instrumento
      • rotateminmax: quanto o braço pode rotacionar, o width é o ângulo máximo em graus e height é o ângulo mínimo
      • label0: o espaço para o primeiro label
      • label1: o espaço para o segundo label
    • /arrows.svg: setas que combinam com o tema. Quatro elementos devem existir nesse svg: up-arrow, down-arrow,left-arrow, right-arrow.
    • /background.svg: uma imagem de fundo para os plasmoids
    • /bar_meter_horizontal.svg: um medidor horizontal tipo uma barra de progresso
      • background: o fundo da barra de progresso
      • foreground: sobrepõe o primeiro plano da barra de progresso
      • bar: a barra em si
      • label0, label1 and label2: espaços para 3 campos de texto.
    • /bar_meter_vertical.svg: um medidor vertical tipo uma barra de progresso vertical. Tem o mesmo formato de bar_meter_horizontal.svg
    • /branding.svgz: um pequeno logo do KDE que pode ser personalizado pelos distribuidores como um elemento de marca. Contém um único elemento chamado brilliant
    • ‘/busywidget.svgz: Usado para indicar o estado de ocupado, é uma imagem circular que será animada com uma rotação.
      • busywidget: o girador principal
      • paused: o estado em pausa
    • /button.svg:  elementos gráficos para um botão, precisa dos seguintes prefixos:
      • normal botão normal
      • pressed botão pressionado
      • hover elemento que será o fundo de um widget, atuará como uma borda
      • shadow uma sombra para o botão
      • focus retângulo que indica foco do teclado imposto a um botão gráfico
    • /calendar.svg: gráficos para o widget do calendário
      • weeksColumn: fundo das colunas verticais com o número das semanas
      • weekDayHeader: fundo das linhas com o dias da semana
      • active: fundo para o número do dia do mês atual
      • inactive: fundo para o número do dia dos meses anteriores e posteriores
      • hoverHighlight: fundo para o dia sob o cursor do mouse
      • today: borda da célula do dia atual
      • selected: borda para a célula do dia selecionado
      • red: borda para feriados em domingos
      • green: borda para feriados em dias úteis
    • /clock.svg: um relógio analógico. Precisa ter os seguintes elementos:
      • ClockFace: o fundo do relógio, usualmente contento os números, etc
      • HourHand: o ponteiro das horas, apontando para baixo no svg
      • MinuteHand: o ponteiro dos minutos, apontando para baixo no svg
      • SecondHand: o ponteiro dos segundos, apontando para baixo o svg
      • HandCenterScrew: o pino que une os ponteiros no centro
      • Glass: uma camada final que permite coisas como a aparência de vidro
      • Nota: no svg, os elementos dos ponteiros precisam estar em uma posição que indicam a hora 6:30:30. A posição do eixo y desses elementos em relação ao centro do ClockFace determinaa renderização deles no applet.
    • /configuration-icons: é um conjunto de ícones simples que são atalhos para ações de configuração. Precisam conter os seguintes elementos:
      • close: um ícone de fechar
      • configure: um ícone de configuração
      • move mover
      • resize-vertical: redimensiona o eixo y
      • resize-horizontal: redimensiona o eixo x
      • size-diagonal-tl2br: redimensiona na diagonal, usualmente uma flecha do canto superior esquerdo ao canto inferior direito
      • size-diagonal-tr2bl: redimensiona na diagonal, usualmente uma flecha do canto superior direito ao canto inferior esquerdo
      • rotate rotação
      • help ajuda
      • maximize maximizar
      • unmaximize desfaz a maximização
      • collapse: deixa alguma coisa em um estado colapsado, mínimo
      • restore: desfaz o estado minimizado
      • status: refere-se ao estado de algo, logs ou monitoramento do sistema em geral
    • /containment-controls.svg: Alças usadas para controlar o redimensionamento do painel. Os seguintes elementos são necessários:
      • maxslider
      • minslider
      • offsetslider
      • cada um desses elementos precisa estar presente com os prefixos north, south, east e west para cada posição do painel
    • /extender-background.svgz: Precisa ter os mesmos elementos dos outros fundos.
    • /frame.svgz : um frame genérico, usado por recipientes de widgets, para visualizar grupos de widgets juntos, precisa ter os seguintes prefixos, para diferentes aspectos 3d:
      • sunken
      • plain
      • raised
    • /glowbar.svgz : um frame sem prefixos,  representa um brilho, usado para instânciar no Plasma Desktop os modos de auto-ocultação do painel
    • /line.svgz : uma linha simples usada para separar itens em layouts, contém os elementos vertical-line e horizontal-line
    • /monitor.svgz : representa uma tela, é usada em locais como a caixa de dialogo de configuração do papel de parede. Contém um frame sem prefixos e os seguintes elementos:
      • glass : reflexo de vidro sobre a tela
      • base : uma base para o monitor
    • /pager.svgz : elementos gráficos para as pequenas telas do pager, precisa ter 3 frames com os seguintes prefixo:
      • normal : todos os desktops virtuais
      • active : desktop virtual ativo
      • hover : desktop virtual sob o mouse
    • /panel-background.svg: a imagem de fundo dos painéis
      • se você quiser criar diferentes fundos para os painéis localizados na parte superior, inferior, esquerda ou direita, então crie conjuntos de elementos de fundos com os seguintes prefixos: north, south, west e east respectivamente.
      • Todos os prefixos viram uma versão sem prefixo quando não disponível
      • se uma prefixo shadow estiver disponível, será usado como uma sombra do painel caso a composição estiver disponível.
    • /plot-background.svg: um fundo para os widgets onde são desenhados objetos, com o widgetmdo ksysguard
    • /scrollbar.svgz : a clássica barra de rolagem, precisa ter os seguintes elementos: arrow-up, mouseover-arrow-up, sunken-arrow-up, mesmos 3 elementos para  arrow-left, arrow-right and arrow-bottom’. Precisa ter frames com os seguintes prefixos:
      • slider
      • mouseover-slider
      • sunken-slider
      • background-vertical
      • background-horizontal
    • /systemtray.svg: uma imagem de fundo para a bandeja do sistema. Desde o KDe 4.2 contém também o prefixo lastelements, usado para elementos da última posição da bandeja e os quatro elementos expander-right/up/left/bottom, usados para os ícones que mostram/escondem os demais ícones da bandeja. Desde o KDE 4.3 existe o horizontal-separator e vertical-separator, usados como borda para separar os últimos elementos.
    • /tasks.svg: imagens de fundo para os itens da barra de tarefas. Os seguintes prefixos são necessários:
      • focus
      • hover
      • attention
      • normal
      • minimized
      • O svg deverá conter elementos 5 prefixos, se um prefixo estiver ausente esse elementos não será desenhado.
    • /toolbox.svgz : elementos gráficos  para a caixa de ferramentas da área de trabalho, precisa ter um frame sem prefixos mais os seguintes elementos:
      • desktop-northwest, desktop-northeast, desktop-southwest, desktop-southeast: os quatro cantos da caixa de ferramentas
      • panel-north, panel-south, panel-west, panel-east : elementos para o painel da caixa de ferramentas
    • /tooltip.svg: fundo para as dicas usada por instâncias da barra de tarefas e com ícones.
    • /translucentbackground.svg: uma imagem de fundo padrão para plasmoids que por sua natureza são grandes e não possuem muito texto. Nesse caso, um fundo translúcido ficaria melhor. Precisa ter os mesmo elementos de background.svg. Se não existir, o plasmoid usará o background.svg.

A pasta “Opaque”

Na pasta share/apps/desktoptheme/opaque a mesma hierarquia pode ser encontrada: quando a composição está desativada os arquivos dessa pasta são preferencialmente usados ao invés de seus correspondentes listados acima. Apenas os fundos para as janelas de alto nível são apropriadas para essa pasta.
Since top-level windows will be shaped according to the transparency of the svg and window shapes don’t support alpha-blending, if the svg has rounded borders they should have a shape that don’t require antialiasing, like the following example.
Já que janelas de alto nível serão desenhadas de acordo com a transparência do svg e o desenho das janelas não suportam alpha-blending, se o svg tem bordas arredondadas elas devem ter uma forma que não exiga anti-aliasing, como no exemplo abaixo.

 

A pasta “translucent”

Na pasta share/apps/desktoptheme/translucent as mesma hierarquia é usada: quando o efeito luerbehind do KWin é  ativado os arquivos dessa pasta serão usados se encontrados. Como para os elementos da pasta “opaque”, apenas elementos que serão renderizados como fundos de janelas precisam mestar presentes nesta pasta, então será a pasta dialogs, mais o painel e fundos das dicas. Quando for possivel ofuscar o fundo da janela, os gráficos pode ser mais transparentes, mantendo o texto da janela legíveis.

“icons” folder

Na pasta share/apps/desktoptheme/icons, os arquivos SVG que contém ícones escalonáveis para ícones da bandeja do sistema são encontrados.
O tema padrão contém os seguintes SVG’s:

  • audio.svgz
  • battery.svgz
  • device.svgz
  • klipper.svgz
  • kwalletmanager.svgz
  • nepomuk.svgz
  • network.svgz
  • notification.svgz
  • preferences.svgz
  • wallet.svgz

Traduzido de http://techbase.kde.org/Projects/Plasma/Theme