Colore blocco

La maggior parte delle app Blockly utilizza una varietà di colori dei blocchi per raggruppare visivamente i blocchi in categorie. I blocchi forniti con Blockly includono diverse categorie, i colori sono rispecchiati dalle varie categorie della barra degli strumenti nelle demo:

I colori aggiuntivi del blocco derivano dal colore principale. Ad esempio, i blocchi ombra sono una versione desaturata del colore principale, mentre i colori del bordo sono una versione più scura.

Suggerimento: se vuoi un maggiore controllo sui colori dei blocchi di ombra 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);
}

Prendi nota della grafia inglese. Se il colore non viene impostato, viene visualizzato un blocco nero.

Formati colore

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

Valore di saturazione della tonalità

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 del valore di saturazione della tonalità (HSV).

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

La saturazione e i valori possono essere adattati per ogni applicazione richiamando 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 colore offrono lo spazio colore HSV, ad esempio il selettore HSV. Inserisci le costanti di saturazione e dei valori di Blockly (i valori predefiniti sono rispettivamente del 45% e del 65%), quindi fai scorrere la tonalità su un colore scelto. Utilizza questo numero di tonalità come valore colour.

Esadecimale

È vivamente consigliato utilizzare lo spazio colore HSV, ma Blockly supporta i colori a blocchi specificati come #RRGGBB esadecimali. Questo può facilitare il coordinamento con altri colori dell'applicazione (ad es. con gli stili in CSS) e con le applicazioni di progettazione (ad es. Photoshop), è un rischio di progettazione che potrebbe portare a blocchi non coordinati se non scelti con attenzione.

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

Riferimenti cromatici

Spesso, più blocchi condividono lo stesso colore e centralizzare le definizioni di colore semplifica la gestione dei colori e l'aggiunta di nuovi blocchi del colore corretto. Per farlo, i colori del blocco possono utilizzare i riferimenti delle tabelle di stringhe.

Blockly include nove costanti di colore nella tabella delle stringhe, corrispondenti alle categorie degli 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 in 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 è pratico dato che la notazione JSON supporta già i riferimenti. Inoltre, consente anche di localizzare i colori, se necessario.

Problemi di accessibilità

Blockly usa il colore come suggerimento evidente sul ruolo di ogni blocco e per raggrupparli. Per i blocchi inclusi, questa offerta è secondaria rispetto al testo nel blocco e quindi non è un attributo fondamentale. Tuttavia, quando si sceglie una tavolozza dei colori in blocchi, occorre tenere in considerazione il daltonismo.

Blockly offre diversi temi nel tentativo di risolvere alcuni tipi di problemi relativi alla visione dei colori. Questa pagina include tavolozze di esempio con 7, 12 e 15 colori che cercano di massimizzare la distinzione nelle più comuni forme di daltonismo. Tieni presente che questo non viene mappato a 7, 12 o 15 categorie di blocchi in Blockly, perché alcune ombre devono essere riservate ai campi e ai blocchi shadow.