Warna blok

Sebagian besar aplikasi Blockly menggunakan berbagai warna blok untuk mengelompokkan blok secara visual ke dalam kategori. Blok yang dikirimkan dengan Blockly mencakup beberapa kategori, dengan warna yang dicerminkan oleh berbagai kategori toolbar dalam demo:

Screenshot ruang kerja dengan contoh setiap warna blok.

Warna tambahan pada blok berasal dari warna utama. Misalnya, blok bayangan adalah versi terdesaturasi dari warna utama, dan warna batas adalah versi yang lebih gelap.

Menetapkan warna blok

Warna blok dapat ditentukan dalam notasi JSON atau JavaScript:

JSON

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

JavaScript

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

Perhatikan ejaan bahasa Inggris. Jika warna tidak disetel, warna akan menjadi blok hitam.

Format warna

Nilai colour dapat diberikan dalam format HSV atau Hex.

Nilai-Saturasi-Rona

Cara termudah untuk menentukan warna blok adalah angka antara 0-360, yang menentukan hue blok dalam model warna nilai saturasi hue (HSV).

Spektrum warna HSV

Menggunakan HSV dengan saturasi dan nilai yang ditetapkan untuk semua warna blok memungkinkan Anda memilih warna blok sekaligus memastikan semua blok berbagi palet yang kohesif.

Saturasi dan nilai dapat disesuaikan untuk setiap aplikasi dengan memanggil fungsi berikut:

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

Beberapa pemilih warna menawarkan ruang warna HSV, seperti alat pilih HSV. Masukkan saturasi dan konstanta nilai Blockly (default masing-masing adalah 45% dan 65%), lalu geser hue ke warna yang dipilih. Gunakan nomor hue ini sebagai nilai colour.

Heksadesimal

Menggunakan ruang warna HSV sangat direkomendasikan, tetapi Blockly mendukung warna blok yang ditentukan sebagai heksadesimal #RRGGBB. Meskipun hal ini dapat memfasilitasi koordinasi dengan warna aplikasi lainnya (mis., gaya dalam CSS) dan aplikasi desain (mis., Photoshop), merupakan risiko desain yang dapat menyebabkan blok yang tidak terkoordinasi jika tidak dipilih dengan hati-hati.

Contoh warna yang dipilih dengan buruk.

Kecuali Anda memiliki resource desain visual khusus, sebaiknya bekerja dalam batasan ruang warna HSV. Jika mencoba menentukan ulang semua warna dengan cara ini, pertimbangkan referensi Desain Material Google tentang warna.

Referensi warna

Sering kali, beberapa blok memiliki warna yang sama, dan memusatkan definisi warna akan menyederhanakan pengelolaan warna dan penambahan blok baru dari warna yang benar. Warna blok dapat menggunakan referensi tabel string untuk melakukannya.

Blockly menyertakan sembilan konstanta warna dalam tabel string, yang sesuai dengan kategori toolbox, ditambah warna yang berbeda untuk variabel dinamis:

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

Nilai string ini dapat digunakan dalam definisi JSON dan block.setColour(..).

Anda dapat menambahkan konstanta warna Anda sendiri dengan menambahkan ke Blockly.Msg:

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

Menyimpan warna dalam tabel string pelokalan mungkin tampak tidak biasa, tetapi mudah mengingat notasi JSON sudah memiliki dukungan untuk referensi. Hal ini juga memungkinkan warna dilokalkan, jika diperlukan.

Masalah aksesibilitas

Blockly menggunakan warna sebagai petunjuk kuat tentang peran setiap blok, dan untuk mengelompokkan blok bersama-sama. Untuk blok yang disertakan, kemampuan ini bersifat sekunder untuk teks pada blok, sehingga bukan atribut penting. Namun, ketika memilih palet warna blok, buta warna harus menjadi pertimbangan.

Blockly menyediakan beberapa tema sebagai upaya untuk mengakomodasi beberapa jenis gangguan penglihatan warna. Halaman ini berisi contoh 7, 12, dan 15 palet warna yang berupaya memaksimalkan perbedaan di berbagai bentuk kebutaan warna yang paling umum. Perhatikan bahwa ini tidak akan dipetakan ke 7, 12, atau 15 blok kategori di Blockly, karena beberapa bayangan harus dicadangkan untuk blok dan kolom bayangan.