Çoğu Blockly uygulaması, blokları kategorilere göre görsel olarak gruplandırmak için çeşitli blok renkleri kullanır. Blockly ile gönderilen bloklar, demolardaki çeşitli araç çubuğu kategorilerinin yansıttığı renklerle birkaç kategori içerir:
Bloktaki diğer renkler ana renkten türetilmiştir. Örneğin, gölge blokları ana rengin doygunluğu azaltılmış, kenarlık renkleri ise daha koyu bir versiyondur.
Blok rengini belirle
Blok rengi, JSON veya JavaScript gösterimlerinde tanımlanabilir:
JSON
{
// ...,
"colour": 160,
}
JavaScript
init: function() {
// ...
this.setColour(160);
}
İngiliz İngilizcesine dikkat edin. Renk belirlenememesi siyah blok olarak sonuçlanır.
Renk biçimleri
colour değeri, HSV veya Onaltılık biçimde verilebilir.
Ton-Doygunluk-Değeri
Bir bloğun rengini tanımlamanın en basit yolu, 0 ile 360 arasında bir sayıdır. Bu, blokun tonunu Ton Doygunluğu-Değeri (HSV) renk modelinde tanımlar.
HSV'yi tüm blok renkleri için doygunluk ve sabit değer ile kullanmak, bir blok rengi seçmenize ve tüm blokların uyumlu bir palet korumasını sağlamanıza olanak tanır.
Doygunluk ve değerler, aşağıdaki işlevler çağrılarak her bir uygulamaya uyarlanabilir:
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
HSV seçici gibi birçok renk seçici, HSV renk alanını sunmaktadır. Blockly'nin doygunluğunu ve değer sabitlerini girin (varsayılan değerler sırasıyla% 45 ve% 65'tir) ve ardından tonu seçilen bir renge kaydırın. Bu ton sayısını colour değeri olarak kullanın.
Onaltılık
HSV renk alanının kullanılması önemle tavsiye edilir ancak Blockly, #RRGGBB on altılı olarak belirtilen blok renklerini destekler. Bu, diğer uygulama renkleri (ör. CSS'deki stiller) ve tasarım uygulamalarıyla (ör. Photoshop) dikkatli seçilmezse koordinatsız bloklara yol açabilecek bir tasarım riski söz konusudur.
Özel görsel tasarım kaynaklarınız yoksa HSV renk alanının kısıtlamaları dahilinde çalışmanız önerilir. Tüm renkleri bu şekilde yeniden tanımlamaya çalışıyorsanız Google'ın renkle ilgili Materyal Tasarım kaynaklarını göz önünde bulundurun.
Renk referansları
Çoğunlukla birden fazla blok aynı rengi paylaşır ve renk tanımlarını merkezileştirmek, renkleri yönetmeyi ve doğru renkte yeni bloklar eklemeyi kolaylaştırır. Blok renklerinde tam olarak bunu yapmak için dize tablo referansları kullanılabilir.
Blockly, dize tablosunda araç kutusu kategorilerine karşılık gelen dokuz renk sabiti ve dinamik değişkenler için ayrı bir renk içerir:
'%{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}'
Bu dize değerleri hem JSON tanımlarında hem de block.setColour(..) özelliğinde kullanılabilir.
Blockly.Msg ürününe ekleyerek kendi renk sabitlerinizi ekleyebilirsiniz:
// Define the colour
Blockly.Msg.EVERYTHING_HUE = 42;
// Use in a block or block definition:
block.setColour('%{BKY_EVERYTHING_HUE}');
Renklerin yerelleştirme dizesi tablosunda depolanması alışılmadık görünebilir, ancak JSON gösteriminin referansları zaten desteklediği için kolaylık sağlar. Ayrıca gerekirse renklerin yerelleştirilmesine imkan tanır.
Erişilebilirlikle ilgili sorunlar
Blockly, her bir bloğun rolüne dair güçlü bir ipucu vermek ve blokları birlikte gruplandırmak için rengi kullanıyor. Dahil edilen bloklar için bu olanak, bloktaki metne göre ikincildir, dolayısıyla kritik bir özellik değildir. Ancak, bir blok renk paleti seçerken renk körlüğü göz önünde bulundurulmalıdır.
Blockly, bazı renk körlüğü türlerini kapsamak için birkaç tema sunar. Bu sayfa, en yaygın renk körlüğü biçimleri arasındaki farkı en üst düzeye çıkarmaya çalışan örnek 7, 12 ve 15 renk paletini içerir. Bazı gölgelerin gölge blokları ve alanlar için ayrılması gerektiğinden bunun Blockly'deki 7, 12 veya 15 blok kategorisiyle eşlenmeyeceğini unutmayın.