A maioria dos apps da Blockly usa uma variedade de cores de bloco para agrupar visualmente os blocos em categorias. Os blocos enviados com o Blockly incluem várias categorias, com as cores espelhadas pelas diversas categorias da barra de ferramentas nas demonstrações:
As cores adicionais do bloco são derivadas da cor principal. Por exemplo, blocos sombra são uma versão dessaturada da cor principal, e as cores de borda são uma versão mais escura.
Definir cor do bloco
A cor do bloco pode ser definida nas notações JSON ou JavaScript:
JSON
{
// ...,
"colour": 160,
}
JavaScript
init: function() {
// ...
this.setColour(160);
}
Observe a grafia britânica. Se a cor não for definida, o resultado será um bloco preto.
Formatos de cores
O valor colour pode ser fornecido nos formatos HSV ou hexadecimal.
Valor da saturação da matiz
A maneira mais simples de definir a cor de um bloco é um número entre 0 e 360, definindo a matiz do bloco no modelo de cor matiz-saturação-valor (HSV, na sigla em inglês).
O uso de HSV com saturação e valor fixos para todas as cores de blocos permite selecionar uma cor de bloco e garantir que todos os blocos compartilhem uma paleta coesa.
A saturação e os valores podem ser adaptados para cada aplicativo chamando as seguintes funções:
Blockly.utils.colour.setHsvSaturation(0.45) // 0 (inclusive) to 1 (exclusive), defaulting to 0.45
Blockly.utils.colour.setHsvValue(0.65) // 0 (inclusive) to 1 (exclusive), defaulting to 0.65
Vários seletores de cores oferecem o espaço de cores HSV, como o seletor
HSV. Insira as constantes de
saturação e valor do Blockly (os padrões são 45% e 65%, respectivamente) e
deslize o matiz até uma cor escolhida. Use esse número de matiz como o valor colour.
Codificação
O uso do espaço de cor HSV é altamente recomendado, mas o Blockly oferece suporte a cores
de bloco especificadas como hexadecimais #RRGGBB. Embora isso possa facilitar
a coordenação com outras cores de aplicativos (por exemplo, estilos em CSS) e aplicativos
de design (por exemplo, Photoshop), isso é um risco de design que pode levar a
bloqueios descoordenados se não forem escolhidos com cuidado.
A menos que você tenha recursos de design visual dedicados, é recomendável trabalhar dentro das restrições do espaço de cores HSV. Se estiver tentando redefinir todas as cores dessa maneira, considere usar os recursos do Material Design do Google sobre cores.
Referências de cores
Muitas vezes, vários blocos compartilham a mesma cor, e a centralização das definições de cores simplifica o gerenciamento das cores e a adição de novos blocos da cor correta. As cores de bloco podem usar referências de tabelas de strings para fazer exatamente isso.
O Blockly inclui nove constantes de cores na tabela de strings, correspondentes às categorias da caixa de ferramentas, além de uma cor distinta para variáveis dinâmicas:
'%{BKY_LOGIC_HUE}'
'%{BKY_LOOPS_HUE}'
'%{BKY_MATH_HUE}'
'%{BKY_TEXTS_HUE}'
'%{BKY_LISTS_HUE}'
'%{BKY_COLOUR_HUE}'
'%{BKY_VARIABLES_HUE}'
'%{BKY_VARIABLES_DYNAMIC_HUE}'
'%{BKY_PROCEDURES_HUE}'
Esses valores de string podem ser usados nas definições de JSON e em
block.setColour(..).
Você pode adicionar suas próprias constantes de cor adicionando a Blockly.Msg:
// Define the colour
Blockly.Msg.EVERYTHING_HUE = 42;
// Use in a block or block definition:
block.setColour('%{BKY_EVERYTHING_HUE}');
Armazenar as cores na tabela de strings de localização pode parecer incomum, mas é conveniente, já que a notação JSON já é compatível com as referências. Ele também permite que as cores sejam localizadas, se necessário.
Questões de acessibilidade
O Blockly usa a cor como uma forte dica sobre a função de cada bloco e para agrupar blocos. Para os blocos incluídos, essa funcionalidade é secundária ao texto no bloco e, portanto, não é um atributo crítico. No entanto, ao escolher uma paleta de cores em bloco, é preciso considerar o daltonismo.
O Blockly oferece vários temas em um esforço para acomodar alguns tipos de deficiência de visão de cores. Esta página inclui os exemplos de paletas de cores 7, 12 e 15 que tentam maximizar a distinção entre as formas mais comuns de daltonismo. Isso não seria mapeado para 7, 12 ou 15 categorias de bloco no Blockly, porque algumas tonalidades precisam ser reservadas para campos e blocos de sombra.