Kolor bloku

Większość aplikacji Blockly korzysta z różnych kolorów bloków, aby wizualnie grupować bloki według kategorii. Bloki udostępniane w Blockly są podzielone na kilka kategorii, a kolory odzwierciedlają różne kategorie pasków narzędzi widocznych w wersjach demonstracyjnych:

Zrzut ekranu obszaru roboczego z przykładami koloru każdego bloku.

Dodatkowe kolory na bloku pochodzą z koloru głównego. Na przykład bloki cieni to pozbawiona nasycenia wersja koloru głównego, a kolory obramowania – ciemniejsza wersja.

Ustaw kolor bloku

Kolor bloku możesz określić w notacjach JSON lub JavaScript:

JSON

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

JavaScript

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

Zwróć uwagę na brytyjską pisownię. Jeśli kolor nie zostanie ustawiony, powstanie czarny blok.

Formaty kolorów

Wartość colour może być podana w formacie HSV lub szesnastkowym.

Wartość odcienia-nasycenia

Najprostszym sposobem określenia koloru bryły jest podanie liczby od 0 do 360. Określa ona odcień bryły w modelu kolorów odcień-nasycenia (HSV).

Spektrum kolorów HSV

Użycie HSV ze stałą wartością nasycenia i stałej wartości dla wszystkich kolorów bloków pozwala wybrać kolor bloku, a jednocześnie zadbać o to, by wszystkie bloki współpracowały ze spójną paletą.

Nasycenie i wartości można dostosować do każdej 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

Kilka selektorów kolorów udostępnia przestrzeń kolorów HSV, np. selektor HSV. Wpisz stałe wartości nasycenia i wartości Blockly (wartości domyślne to odpowiednio 45% i 65%), a następnie przesuń barwę do wybranego koloru. Użyj tej liczby barw jako wartości colour.

Wartość szesnastkowa

Zdecydowanie zalecamy użycie przestrzeni kolorów HSV, ale Blockly obsługuje kolory blokowe określone jako wartości szesnastkowe #RRGGBB. Może to ułatwiać koordynację z innymi kolorami aplikacji (np. stylami w CSS) i aplikacjami do projektowania (np. może to prowadzić do nieskoordynowanych bloków, które jeśli nie zostaną dobrze wybrane.

Przykład słabo wybranych kolorów.

Jeśli nie masz dedykowanych zasobów do projektowania wizualnego, zalecamy przestrzeganie ograniczeń przestrzeni kolorów HSV. Jeśli próbujesz zmienić kolory wszystkich kolorów w ten sposób, rozważ wykorzystanie zasobów Google Material Design na temat kolorów.

Odniesienia do kolorów

Często wiele bloków jest tego samego koloru, a scentralizowanie definicji kolorów upraszcza zarządzanie kolorami i dodawanie nowych bloków prawidłowego koloru. Kolory bloków mogą robić to właśnie za pomocą odwołań do tabel z ciągami znaków.

Blockly zawiera w tabeli ciągów 9 stałych kolorów, które odpowiadają kategoriom z zestawu narzędzi, oraz niepowtarzalny kolor 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}'

Tych wartości w postaci ciągów znaków można używać zarówno w definicjach JSON, jak i w block.setColour(..).

Możesz dodać własne stałe kolorów, dodając do parametru 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 z lokalnymi ciągami znaków może wydawać się nietypowe, ale jest wygodne, ponieważ notacja JSON już obsługuje odwołania. Umożliwia też lokalizowanie kolorów w razie potrzeby.

Kwestie związane z ułatwieniami dostępu

Blockly wykorzystuje kolor jako wyraźną wskazówkę o roli każdej bryły oraz jako wyraźną wskazówkę o roli każdej bryły. W przypadku uwzględnionych bloków ta afordancja jest drugorzędna względem tekstu w bloku, więc nie jest atrybutem krytycznym. Przy wyborze palety kolorów bloków należy jednak wziąć pod uwagę ślepotę barw.

Blockly udostępnia kilka motywów, aby pomóc w obsłudze niektórych typów zaburzeń rozpoznawania barw. Na tej stronie znajdziesz przykładowe palety kolorów 7, 12 i 15, które próbują zmaksymalizować rozróżnienie między najczęstszymi formami daltonizmu. Pamiętaj, że nie spowoduje to mapowania 7, 12 lub 15 kategorii blokowych w Blockly, ponieważ niektóre odcienie powinny być zarezerwowane dla bloków i pól cieni.