Виджет chart

Этот виджет основан на библиотеках Chartjs.org library и Angular Chart library

Виджет chart бывает нескольких типов: line, bar, horizontalBar, radar, polarArea, doughnut, pie, и bubble.

Скриншот

HTML код

<canvas></canvas>

Параметры

Особенности

Этот виджет может принимать как обычные статус сообщения, например: { "status" : 22 }, так и массивы для построения нескольких графиков на одном виджете: { "status": [22, 33, 44] }

Параметры в разделе widgetConfig:

maxCount - integer, необязательный: максимальое количество значений для отображения

type - string, необязательный, тип: line, bar, horizontalBar, radar, polarArea, doughnut, pie, and bubble

labels - array of string, необязательный: labels = [ 'one', 'two', 'three']

series - array of string, необязательный: series = [ 'kitchen temp', 'bedroom temp' , 'outdoor temp' ]

colors - array of string, необязательный: colors : [ '#803690', '#00ADF9', '#DCDCDC', '#46BFBD', '#FDB45C', '#949FB1', '#4D5360']

datasetOverride - array of string, необязательный: chartjs.org и Angular Chart library

options - object, необязательный: chartjs.org и Angular Chart library

width - numeric, необязательный, поведение зависит от модели телефона: высота в пикселях или %, например width:100%

height - numeric, необязательный, поведение зависит от модели телефона: высота в пикселях или %, например height:200px

Общие

id - integer, обязательный. Уникальный идентификатор сенсора в устройстве. Используется в том числе и для сортировки виджетов на экране

page - string, необязательный. название страницы (группы виджетов), например kitchen. Используется для разделения виджетов на группы, когда вы не хотите, чтобы все отображалось “кучей” на одном экране.

pageId - integer, необязательный. Идентификатор страницы. Используется в том числе и для сортировки страниц. Всегда должен быть больше нуля, 0 зарезервирован для страницы “Все”. Например: 1 или 7.

pageTopic - string, необязательный. IoT Manager будет публиковать значение pageId в топик prefix + pageTopic после каждого клика на ярлык страницы в панели управления. Для системной страницы “Все”, у которой pageId = 0, в топик prefix+"/page" будет отправлен 0, если хотя бы одна другая страница содержит свойство pageTopic. Если Вы хотите получать эти сообщения на своих устройствах, то Вы должны подписаться на этот топик. Например, если pageTopic="/page" и prefix = "/IoTmanager" тогда IoT Manager будет публиковать значение pageId в топик /IoTmanager/page.

Дополнительные опции в config

Пользователи

user - string, необязательный. Если эта опция присутствует в config, то IoT Manager сравнивает имя пользователя брокера и поле user. Если они совпадают, то config обрабатывается далее, если нет, то пропускается.

users - string, необязательный. Список пользователей, разделенных пробелаами. Если эта опция присутствует в config, то IoT Manager ищет имя пользователя брокера в строке users. Если имя пользователя присутствует в списке, то config обрабатывается далее, если нет, то пропускается.

Эти дополнительные поля не предназначены для управлением контроля доступа. Для усуществления контроля доступа на уровне пользователей используйте стандартные возможности брокера - ACL.

UUID

uuid - string, необязательный. Если данная опция присутствует, то сообщение будет обрабатываться только устройством с указанным UUID.

minWidth и maxWidth (как @media в CSS)

minWidth - integer, необязательный. Если присутствует, то парсер сравнивает ширину экрана устройства и значение minWidth. Если device_width >= minWidth, то config обрабатывается далее, если нет, то пропускается.

maxWidth - integer, необязательный. Если присутствует, то парсер сравнивает ширину экрана устройства и значение maxWidth. Если device_width <= maxWidth, то config обрабатывается далее, если нет, то пропускается.

Дополнительные опции status сообщения

Обычно, сообщение status содержит только значение виджета, например: { status: 50 } или { status: "50" }.

Но, в некоторых случаях возможно, что вы захотите использовать дополнительное информирование пользователя:

vibrate

vibrate - включает вибрацию при приеме данного сообщения, например: { status: 50, vibrate: 100 }, где 100 - время вибрации в миллисекундах.

toast

toast - отображает кратковременное всплывающее сообщение, так называемый toast, при получении сообщения, например: { status: 50, toast: "Alert!" }, где Alert! - отображаемое сообщение.

toastLong - - отображает более продолжительное всплывающее сообщение, так называемый toastLong, при получении сообщения, например: { status: 50, toastLong: "Alert!" }, где Alert! - отображаемое сообщение.

beep

beep - звуковой сигнал при получении сообщения, например: { status: 50, beep: 1 }, где 1 - количество звуковых сигналов.

text2speech

speech - string, текст для голосового синтезатора, например: { status: 50, speech: 'hello'}

rate - float, от 0 до 1 скорость, например: { status: 50, speech: 'hello', rate: 0.7 }

locale - string, язык, например: { status: 50, speech: 'hello', rate: 0.7, locale: 'fr-FR' }. Если язык не задан, то используется en-US. Русский и украинский языки не поддерживается.

Пример 1

{
config[1] = {
  id     : "1",
  widget : "chart",
  topic  : prefix + "/" + deviceID + "/" + widget + id,
  widgetConfig: {
      type: 'line', // line, bar, horizontalBar, radar, polarArea, doughnut, pie, bubble
      maxCount: 20
  }
}

Пример 2

config[2] = {
  id     : "2",
  widget : "chart",
  topic  : prefix + "/" + deviceID + "/" + widget + id,
  widgetConfig: {
      type: 'line', // line, bar, horizontalBar, radar, polarArea, doughnut, pie, bubble
      maxCount: 10
  }
};

Пример 3

config[3] = {
  id     : "3",
  widget : "chart",
  topic  : prefix + "/" + deviceID + "/" + widget + id,
  widgetConfig: {
      type: 'bar', // line, bar, horizontalBar, radar, polarArea, doughnut, pie, bubble
      maxCount: 5
  }
};

Другие примеры

Demo sketches for Arduino IDE, Platformio, NodeJS, python, bash