A maioria dos aplicativos Blockly usa uma variedade de cores de blocos para agrupar visualmente os blocos em categorias. Os blocos fornecidos com o Blockly incluem várias categorias, com as cores espelhadas pelas várias categorias de barras de ferramentas nas demonstrações:
As cores adicionais no bloco são derivadas da cor principal. Por exemplo, blocos de sombra são uma versão desaturada da cor principal, e as cores de borda são uma versão mais escura.
Definir a 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 ortografia britânica. Uma falha ao definir a cor resulta em um bloco preto.
Formatos de cores
O valor colour pode ser fornecido no formato HSV ou Hex.
Matiz-Saturação-Valor
A maneira mais simples de definir a cor de um bloco é um número entre 0 e 360, definindo a matiz do bloco na Cor do atributo hue- variationion-value (HSV) um modelo de machine learning.
Usar HSV com saturação e valor fixo para todas as cores de bloco permite que você selecione uma cor de bloco, garantindo 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 HSV
seletor. Digite o nome de Blockly
saturação e valor (os padrões são 45% e 65%, respectivamente), depois
deslizar o matiz para uma cor escolhida. Use esse número de matiz como o valor colour.
Codificação
É altamente recomendável usar o espaço de cores HSV, mas o Blockly oferece suporte a cores
de bloco especificadas como #RRGGBB hexadecimais. Isso pode facilitar
coordenação com outras cores de aplicativo (por exemplo, estilos em CSS) e design
aplicativos (por exemplo, Photoshop), é um risco de design que pode levar a
blocos 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 tentar redefinir todas as cores dessa maneira, considere os recursos de Material Design do Google em cor.
Referências de cores
Frequentemente, vários blocos compartilham a mesma cor e centralizam a cor simplifica o gerenciamento das cores e a adição de novos blocos de anúncios cor As cores de bloco podem usar a tabela de strings referências para fazer exatamente isso.
O Blockly inclui nove constantes de cores na tabela de strings, correspondentes ao 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
block.setColour(..)
É possível adicionar suas próprias constantes de cor adicionando ao 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 porque a notação JSON já aceita as referências. Ela também permite que as cores sejam localizada, se necessário.
Preocupações de acessibilidade
O Blockly usa a cor como uma dica importante sobre a função de cada bloco e para agrupar os blocos. Para os blocos incluídos, essa affordance é secundária ao texto no bloco e, portanto, não é um atributo crítico. No entanto, ao escolher uma paleta de cores sólidas, é preciso considerar a daltonismo.
O Blockly oferece várias temas, em um esforço para acomodar alguns tipos de deficiência visual associada à percepção de cores. Esta página inclui os exemplos 7, 12 e 15 de paletas de cores 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 blocos no Blockly, porque algumas sombras precisam ser reservadas para campos e blocos de sombra.