Un campo de color almacena una string como su value y una string como su text. Su value es una string con el formato #rrggbb, mientras que su text puede ser una string con el formato #rgb, si es posible.
Campo de color
Campo de color con el editor abierto
Campo de color en un bloque contraído
Creación
JSON
{
"type": "example_colour",
"message0": "colour: %1",
"args0": [
{
"type": "field_colour",
"name": "FIELDNAME",
"colour": "#ff4040",
"colourOptions":
['#ff4040', '#ff8080', '#ffc0c0',
'#4040ff', '#8080ff', '#c0c0ff'],
"colourTitles":
['dark pink', 'pink', 'light pink',
'dark blue', 'blue', 'light blue'],
"columns": 3
}
]
}
JavaScript
Blockly.Blocks['example_colour'] = {
init: function() {
this.appendDummyInput()
.appendField('colour:')
.appendField(new Blockly.FieldColour('#ff4040',
{
"colourOptions":
['#ff4040', '#ff8080', '#ffc0c0',
'#4040ff', '#8080ff', '#c0c0ff'],
"colourTitles":
['dark pink', 'pink', 'light pink',
'dark blue', 'blue', 'light blue'],
"columns": 3
}), 'FIELDNAME');
}
};
El constructor de color incluye lo siguiente:
- un
valueopcional - un validator opcional
- un mapa opcional de opciones, que incluye las siguientes opciones:
colourOptionscolourTitlescolumns
El value debe ser una string con el formato #rrggbb. Si no se proporciona ningún value o si el value especificado no es válido, se usará la primera entrada del array de colores predeterminado.
Las siguientes opciones también se pueden configurar en JSON:
colourOptionscolourTitlescolumns
También se pueden configurar mediante hooks de JavaScript.
Serialización
JSON
El archivo JSON para un campo de color tiene el siguiente aspecto:
{
"fields": {
"FIELDNAME": "#ff0000"
}
}
En la que FIELDNAME es una cadena que hace referencia a un campo de color y el valor es el valor que se aplica al campo. El valor sigue las mismas reglas que el valor del constructor.
XML
El XML de un campo de color tiene el siguiente aspecto:
<field name="FIELDNAME">#ff0000</field>
El atributo name del nodo field contiene una cadena que hace referencia a un campo de color, y el texto interno del nodo es el valor que se debe aplicar al campo. El valor de texto interno sigue las mismas reglas que el valor del constructor.
Ten en cuenta que, después de deserializar y volver a serializar, todos los valores de texto internos tendrán el formato #rrggbb. A veces, esto es importante cuando hay lugares de trabajo con diferencias.
Personalización
Opciones del editor
La función setColours se puede usar para configurar las opciones de color de un campo de color. Esta toma un array de strings de color, que debe definirse en formato #rrggbb, y un array opcional de información sobre la herramienta. Si no se proporciona, se usará el arreglo predeterminado.
La información sobre la herramienta y los colores coinciden en función del índice del array, no del valor. Si el array de colores es más largo que el array de la información sobre la herramienta, la información sobre la herramienta de los colores adicionales será su valor de #rrggbb.
La función setColumns establece la cantidad de columnas en el selector de color.
JSON
{
"type": "example_colour",
"message0": "colour: %1",
"args0": [
{
"type": "field_colour",
"name": "COLOUR",
"colour": "#ff4040"
}
],
"extensions": ["set_colours_extension"]
}
Blockly.Extensions.register('set_colours_extension',
function() {
var field = this.getField("COLOUR");
field.setColours(
['#ff4040', '#ff8080', '#ffc0c0',
'#4040ff', '#8080ff', '#c0c0ff'],
['dark pink', 'pink', 'light pink',
'dark blue', 'blue', 'light blue']);
field.setColumns(3);
});
Para ello, se usa una extensión JSON.
JavaScript
Blockly.Blocks['example_colour'] = {
init: function() {
var field = new Blockly.FieldColour('#ff4040');
field.setColours(
['#ff4040', '#ff8080', '#ffc0c0',
'#4040ff', '#8080ff', '#c0c0ff'],
['dark pink', 'pink', 'light pink',
'dark blue', 'blue', 'light blue']);
field.setColumns(3);
this.appendDummyInput()
.appendField('colour:')
.appendField(field, 'COLOUR');
}
};
De manera opcional, los colores, la información sobre la herramienta y las columnas predeterminados se pueden anular de forma global. Esto significa que afectarán a todos los campos de colores, en lugar de a un campo específico.
Blockly.FieldColour.COLOURS = [
'#ff4040', '#ff8080', '#ffc0c0',
'#4040ff', '#8080ff', '#c0c0ff'];
Blockly.FieldColour.TITLES = [
'dark pink', 'pink', 'light pink',
'dark blue', 'blue', 'light blue'];
Blockly.FieldColour.COLUMNS = 3;
Cómo crear un validador de color
El valor de un campo de color es una string de formato #rrggbb, por lo que cualquier validador debe aceptar una string de formato #rrggbb y mostrar una string de formato #rrggbb, null o undefined.
Este es un ejemplo de un validador que cambia el color del bloque para que coincida con el color del campo.
function(newValue) {
this.getSourceBlock().setColour(newValue);
return newValue;
}
Bloque que cambia de color según su campo de color
