Większość aplikacji Blockly używa różnych kolorów bloków, aby wizualnie pogrupować je w kategorie. Bloki wysyłane z Blockly składają się z kilku kategorii, wraz z kolorami odpowiadającymi różnym kategoriom pasków narzędzi w prezentacji:
Dodatkowe kolory na bloku są tworzone na podstawie koloru głównego. Na przykład bloki cienia to wersja o przytłumionym kolorze, a kolory obramowania to ciemniejsza wersja.
Ustaw kolor bloku
Kolor bloku możesz zdefiniować w notacjach JSON lub JavaScript:
JSON
{
// ...,
"colour": 160,
}
JavaScript
init: function() {
// ...
this.setColour(160);
}
Uwaga: pisownia brytyjska. Jeśli kolor nie zostanie ustawiony, wyświetli się czarny blok.
Formaty kolorów
Wartość colour może być podana w formacie HSV lub szesnastkowym.
Barwa-nasycenie-Wartość
Najprostszym sposobem na zdefiniowanie koloru bloku jest podanie liczby z zakresu 0–360, która określa odcień bloku w modelu kolorów hue-saturation-value (HSV).
Użycie HSV z nasyceniem i wartością dla wszystkich kolorów bloku pozwala wybrać kolor bloku, zapewniając jednocześnie spójność palety dla wszystkich bloków.
Nasycenie i wartości można dostosować do poszczególnych aplikacji, wywołując te funkcje:
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
Wiele selektorów kolorów oferuje przestrzeń kolorów HSV, np. selektor HSV. Wpisz stałe wartości nasycenia i wartości Blockly (domyślnie odpowiednio 45% i 65%), a następnie przesuń barwę do wybranego koloru. Użyj tego numeru odcienia jako wartości colour.
Wartość szesnastkowa
Zdecydowanie zalecamy używanie przestrzeni kolorów HSV, ale Blockly obsługuje też kolory określone jako #RRGGBB szesnastkowe. Może to ułatwić koordynację z innymi kolorami aplikacji (np. stylami w CSS) i aplikacji do projektowania (np. Photoshop), to ryzyko związane z projektowaniem, które może prowadzić do nieskoordynowanych bloków, jeśli nie zostanie wybrane ostrożnie.
Jeśli nie masz wyspecjalizowanych zasobów do projektowania wizualnego, zalecane są ograniczenia przestrzeni kolorów HSV. Jeśli chcesz zmienić definicję wszystkich kolorów w ten sposób, zapoznaj się z zasobami Google dotyczącymi systemu Material Design na temat kolorów.
Odwołania do kolorów
Często wiele brył ma ten sam kolor i jest centralnym kolorem upraszczają zarządzanie kolorami i dodawanie nowych bloków odpowiednich barwy. Kolory bloków mogą używać tabeli ciągów znaków referencje i to właśnie robimy.
W tabeli ciągów znaków w Blockly znajduje się 9 konstant kolorów odpowiadających kategoriom w narzędziowniku oraz osobny kolor dla zmiennych dynamicznych:
'%{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}'
Wartości te mogą być używane zarówno w definicjach JSON, jak i w block.setColour(..).
Możesz dodać własne stałe koloru, dodając do Blockly.Msg:
// Define the colour
Blockly.Msg.EVERYTHING_HUE = 42;
// Use in a block or block definition:
block.setColour('%{BKY_EVERYTHING_HUE}');
Przechowywanie kolorów w tabeli ciągów lokalizacji może się wydawać nietypowe, ale jest wygodne, ponieważ notacja JSON obsługuje już odwołania. it umożliwia również dostosowanie kolorów zlokalizowane, w razie potrzeby.
Problemy z ułatwieniami dostępu
Blockly używa kolorów jako silnej wskazówki dotyczącej roli każdego bloku i grupuje nowe bloki. W przypadku bloków dołączonych ta funkcja jest drugorzędna w stosunku do tekstu w bloku, dlatego nie jest atrybutem krytycznym. Wybierając jednak paletę kolorów blokowych, należy wziąć pod uwagę problem niedowidzenia.
Blockly oferuje kilka motywów, aby uwzględnić różne rodzaje ślepoty barw. Ta strona zawiera przykładowe palety 7, 12 i 15 kolorów, które mają na celu zmaksymalizowanie możliwości rozróżnienia kolorów w przypadku najczęstszych form ich rozpoznawania. Pamiętaj, że nie będzie to odpowiadać 7, 12 ani 15 kategoriom bloków w Blockly, ponieważ niektóre odcienie powinny być zarezerwowane dla bloków i pól cieni.