Motywy

Motywy umożliwiają dostosowywanie wyglądu i sposobu obsługi Blockly. Za pomocą klasy Themes możesz dostosować kolory bloków, kolory kategorii i niektóre komponenty. Jeśli chcesz dostosować dodatkowe komponenty, podajemy nazwę motywu jako klasę w elemencie div wstrzykiwania. Pozwala to użytkownikom zmieniać wygląd nieobsługiwanych komponentów za pomocą CSS. Naszym głównym celem w przypadku tworzenia motywów jest umożliwienie deweloperom tworzenia bardziej dostępnych narzędzi Blockly.

Właściwości motywu

Motyw to obiekt z kilkoma właściwościami: motyw podstawowy, na podstawie którego można go rozszerzyć, obiekt stylów dla bloków, kategorii, komponentów i czcionek oraz informacja, czy ma być używany w przypadku bloków startowych.

Styl bloku

Styl bloku składa się z 4 pól:

  • colourPrimary (wymagany) – kolor tła bloku.
  • colourSecondary (opcjonalnie) – kolor tła, jeśli bryła jest blokiem cienia.
  • colourTertiary (opcjonalnie) – kolor obramowania lub zaznaczenia bryły.
  • hat (opcjonalnie) – dodaje do bloku czapkę, jeśli wartość jest ustawiona na cap. Dowiedz się więcej o czapkach.

Blok ze strzałkami wskazującymi kolor podstawowy, dodatkowy i trzeci

const listBlocks = {
   'colourPrimary': '#4a148c',
   'colourSecondary':'#AD7BE9',
   'colourTertiary':'#CDB6E9',
   'hat': 'cap'
}

Motyw będzie zawierać mapowanie nazwy stylu bloku na obiekt stylu bloku:

const blockStyles = {
   'list_blocks': {
      'colourPrimary': '#4a148c',
      'colourSecondary':'#AD7BE9',
      'colourTertiary':'#CDB6E9'
   },
   'logic_blocks': {
      'colourPrimary': '#01579b',
      'colourSecondary':'#64C7FF',
      'colourTertiary':'#C5EAFF'
   }
}

Styl kategorii

Styl kategorii zawiera tylko właściwość koloru.

  • Kolor (wymagany) – kolor kategorii w przyborniku. Zazwyczaj powinny być takie same jak kolory colourPrimary w większości bloków w kategorii. Dzięki temu użytkownicy łatwo rozpoznają, które bloki należą do danej kategorii.

Zrzut ekranu przedstawiający zestaw narzędzi w różnych kolorach w kategorii

const mathCategory = {
   'colour':'290'
}

Motyw będzie zawierać mapowanie nazwy kategorii na obiekt stylu kategorii:

const categoryStyles = {
   'list_category': {
      'colour': '#4a148c'
   },
   'logic_category': {
      'colour': '#01579b',
   }
}

Style komponentów

Motyw może określać kolor lub wartość tych elementów:

  • workspaceBackgroundColour: kolor tła obszaru roboczego
  • toolboxBackgroundColour: kolor tła zestawu narzędzi
  • toolboxForegroundColour: kolor tekstu kategorii z przyborów
  • flyoutBackgroundColour: kolor tła wyskakującego okienka
  • flyoutForegroundColour: kolor tekstu etykiety wylotu
  • flyoutOpacity: nieprzezroczystość menu
  • scrollbarColour: kolor paska przewijania
  • scrollbarOpacity: nieprzezroczystość paska przewijania
  • insertionMarkerColour: kolor znacznika wstawiania (nie akceptuje nazw kolorów).
  • insertionMarkerOpacity: przezroczystość znacznika wstawiania
  • markerColour: kolor znacznika wyświetlanego w trybie nawigacji za pomocą klawiatury
  • cursorColour: kolor kursora wyświetlanego w trybie nawigacji za pomocą klawiatury

Większość innych komponentów można zmienić, korzystając z nazwy motywu w CSS. Jeśli jednak chcesz zmienić komponent, który nie znajduje się na tej liście i nie można go zmienić za pomocą usługi porównywania cen, prześlij problem z dodatkowymi informacjami.

const componentStyle = {
   'workspaceBackgroundColour': '#1e1e1e',
   'toolboxBackgroundColour': '#333'
}

Style czcionek

Styl czcionki to obiekt określający rodzinę, grubość i rozmiar czcionki.

const fontStyle = {
   'family': 'Georgia, serif',
   'weight': 'bold',
   'size': 12
}

Kapelusze startowe

Jeśli ustawisz startHats: true bezpośrednio w obiekcie motywu, do wszystkich bloków bez poprzednich połączeń lub połączeń wyjściowych zostanie dodany element hat. Jeśli chcesz mieć większą kontrolę nad tym, które bloki mają otrzymać kapelusz, możesz użyć właściwości block style.

Motywy niestandardowe

Aby dodać motyw do aplikacji Blockly, wykonaj te czynności:

  1. Tworzenie motywu
  2. Dodawanie nazw stylów
  3. Ustawianie motywu w obszarze roboczym

Tworzenie motywu

Motyw można utworzyć za pomocą konstruktora lub defineTheme. Za pomocą funkcji defineTheme można łatwo rozszerzyć istniejący motyw oraz ustawić wszystkie wartości za pomocą jednego obiektu. Temat ma nazwę i jest obiektem z stylem bloku, stylem kategorii i innymi właściwościami, o których mowa powyżej.

Motyw może też mieć motyw podstawowy, który będzie zawierać wartości domyślne dla wszystkich wartości nieokreślonych w motywie niestandardowym.

const theme = Blockly.Theme.defineTheme('themeName', {
   'base': Blockly.Themes.Classic,
   'blockStyles': {
      'logic_blocks': {
         'colourPrimary': '#4a148c'
      },
      'math_blocks': {...}
   },
   'categoryStyles': {...},
   'componentStyles': {...},
   'fontStyle': {...},
   'startHats': true
});

Oto przykład użycia funkcji defineTheme.

Dodawanie nazw stylów

Po utworzeniu motywu musimy dodać nazwy stylów do definicji bloku i kategorii.

Kategorie

Sposób zdefiniowania zestawu narzędzi określa sposób dodania nazwy stylu. Więcej informacji znajdziesz na stronie narzędzi.

Bloki

Sposób dodawania nazwy stylu zależy od tego, jak zdefiniujesz blok. Więcej informacji o definicjach blokad znajdziesz na naszej stronie Blokady niestandardowe. Przypiszesz do swojego bloku jeden ze stylów bloku zdefiniowanych we właściwości blockStyles motywu.

JSON

"style":"logic_blocks"

JavaScript

this.setStyle('logic_blocks');

Ustawianie motywu

Musisz też poinformować Blockly, którego motywu użyć. Definiując kilka motywów, które korzystają z tego samego stylu bloku i nazw kategorii, możesz umożliwić użytkownikowi wybór motywu, który najlepiej do niego pasuje, i dynamiczną zmianę go bez konieczności zmiany definicji blokad.

Temat początkowy

Najlepszym sposobem na ustawienie początkowego tematu jest dodanie options.theme do wywołania funkcji wstrzyknięcia. Motyw możesz podać w formacie JSON lub JavaScript.

JSON

{
   theme: {
      "blockStyles" : {
         "list_blocks": {
            "colourPrimary": "#4a148c",
            "colourSecondary":"#AD7BE9",
            "colourTertiary":"#CDB6E9"
         }
      },
      "categoryStyles" : {
         "list_category": {
            "colour": "#4a148c"
         }
      },
      "componentStyles" : {
         "workspaceBackgroundColour": "#1e1e1e"
      }
   }
}

JavaScript

{
   theme: Blockly.Theme.defineTheme('themeName', {
      'blockStyles': blockStyles,
      'categoryStyles': categoryStyles,
      'componentStyles': componentStyles
   })
}

Więcej informacji o opcjach znajdziesz na stronie konfiguracji. Jeśli nie zostanie podany żaden motyw, domyślnie zostanie wybrany motyw klasyczny.

Motywy dynamiczne

Jeśli chcesz dynamicznie zmieniać motyw (np. zezwalać użytkownikom na wybór motywu z menu), możesz wywołać funkcję yourWorkspace.setTheme(theme).

Skrypt do tworzenia stylów bloków

Blockly zawiera skrypt, który pobiera mapę barw lub wartości szesnastkowych i oblicza dla nich barwę drugorzędną i trzeciorzędną. Skrypt znajdziesz w folderze scripts/themes.

Wbudowane motywy

Blockly udostępnia wiele motywów z ułatwieniami dostępu, a zwłaszcza niektóre rodzaje zaburzeń rozpoznawania barw:

Mamy też: