Colore blocco

La maggior parte delle app Blockly utilizza una serie di colori per raggruppare visivamente i blocchi in categorie. I blocchi spediti con Blockly includono diverse categorie, con i colori speculari dalle varie categorie delle barre degli strumenti presenti nelle demo:

I colori aggiuntivi del blocco derivano dal colore principale. Ad esempio: blocchi ombra sono versione desaturata del colore principale e i colori dei bordi sono una versione più scura.

Suggerimento: se vuoi un maggiore controllo sui colori dei blocchi con ombreggiatura o dei bordi, scopri come definire un tema.

Imposta colore blocco

Il colore del blocco può essere definito nelle notazioni JSON o JavaScript:

JSON

{
  // ...,
  "colour": 160,
}

JavaScript

init: function() {
  // ...
  this.setColour(160);
}

Nota l'ortografia britannica. Se il colore non viene impostato, viene visualizzato un blocco nero.

Formati colore

Il valore colour può essere specificato in formato HSV o esadecimale.

Tonalità-saturazione-valore

Il modo più semplice per definire il colore di un blocco è un numero compreso tra 0 e 360, che definisce la tonalità del blocco nel modello di colore tinta-saturazione-valore (HSV).

L'utilizzo di HSV con saturazione e valore fissi per tutti i colori dei blocchi ti consente di selezionare un colore del blocco garantendo al contempo che tutti i blocchi condividano una tavolozza coerente.

La saturazione e i valori possono essere adattati a ogni applicazione chiamando le seguenti funzioni:

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

Diversi selettori di colori offrono lo spazio di colore HSV, ad esempio il selettore di colori HSV. Inserisci il nome di Blockly di saturazione e costanti di valore (i valori predefiniti sono rispettivamente 45% e 65%), quindi far scorrere la tonalità su un colore scelto. Usa questo numero di tonalità come valore colour.

Esadecimale

L'utilizzo dello spazio colore HSV è vivamente consigliato, ma Blockly supporta i colori dei blocchi specificati come esadecimali #RRGGBB. Sebbene questo possa facilitare la coordinazione con altri colori dell'applicazione (ad es. stili in CSS) e applicazioni di design (ad es. Photoshop), è un rischio di progettazione che potrebbe blocchi non coordinati se non scelti con cura.

A meno che tu non disponga di risorse di progettazione visiva dedicate, ti consigliamo di lavorare rispettando le limitazioni dello spazio colore HSV. Se tenti di ridefinire tutti i colori in questo modo, prendi in considerazione le risorse di Material Design di Google colore.

Riferimenti ai colori

Spesso più blocchi condividono lo stesso colore e la centralizzazione delle definizioni di colore semplifica la gestione dei colori e l'aggiunta di nuovi blocchi del colore corretto. I colori dei blocchi possono utilizzare la tabella delle stringhe riferimenti per fare esattamente questo.

Blockly include nove costanti di colore nella tabella di stringhe, corrispondenti alla categorie di strumenti, oltre a un colore distinto per le variabili dinamiche:

'%{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}'

Questi valori di stringa possono essere utilizzati sia nelle definizioni JSON che block.setColour(..)

Puoi aggiungere le tue costanti di colore aggiungendo a Blockly.Msg:

// Define the colour
Blockly.Msg.EVERYTHING_HUE = 42;
// Use in a block or block definition:
block.setColour('%{BKY_EVERYTHING_HUE}');

L'archiviazione dei colori nella tabella delle stringhe di localizzazione può sembrare insolito, ma è conveniente poiché la notazione JSON supporta già i riferimenti. Inoltre, consente di localizzare i colori, se necessario.

Problemi di accessibilità

Blockly utilizza il colore come un forte indizio sul ruolo di ciascun blocco e per raggruppare i blocchi. Per i blocchi inclusi, questa attrattiva è secondaria al testo sul blocco, e quindi non un attributo fondamentale. Tuttavia, quando scegli una tavolozza di colori a blocchi, devi tenere conto della cecità ai colori.

Blockly fornisce diversi temi nel tentativo per adattarsi ad alcuni tipi di discromatopsia. Questa pagina include le palette di colori degli esempi 7, 12 e 15 che tentano di massimizzare la distinzione tra le forme più comuni di daltonismo. Tieni presente che questo non corrisponderebbe a 7, 12 o 15 categorie di blocchi in Blockly, perché alcune tonalità devono essere riservate a blocchi e campi in ombra.