Гаджет JSDisplay - 7-сегментный дисплей


Оглавление



Введение


Гаджет JSDisplay отображает на WEB-странице 7-сегментный дисплей. Для отрисовки символов дисплея используется JavaScript и HTML5 элемент <CANVAS>. Гаджет допускает отображение произвольного количества десятичных разрядов и некоторые возможности по адаптации внешнего вида под Ваш вкус и требования путем передачи различных опций в конструктор JavaScript компонента и использования CSS оформления. Различные варианты использования и оформления гаджета можно посмотреть на примерах ниже.

Для загрузки минифицированного JavaScript файла гаджета JSDisplay перейдите по ссылке jsdisplay-1.1.1.min.js
Для загрузки исходного JavaScript файла гаджета JSDisplay перейдите по ссылке jsdisplay-1.1.1.src.js


Демонстрация


Для просмотра/сокрытия исходного HTML, CSS и JavaScript кода, воспользуйтесь кнопкой Показать/Скрыть код.
Для просмотра результата работы кода, воспользуйтесь кнопкой Показать результат.


Минимализм


В этом примере показан минимальный объем кода, необходимый для отображения простейшего 7-сегментного дисплея.

HTML

CSS

JavaScript

В начало страницы

Разрядность


В этом примере показано, как передавая различные параметры в конструктор JavaScript компонента можно управлять разрядностью дисплея.

HTML

CSS

JavaScript

В начало страницы

Цвет и тень


В этом примере показано, как передавая различные параметры в конструктор JavaScript компонента можно управлять цветом дисплея и отбрасываемой его символами тенью.

HTML

CSS

JavaScript

В начало страницы

Обрамление CSS


В этом примере показано, как с помощью CSS обрамления придать гаджету визуальное сходство с реальными 7-сегментными жидкокристаллическими LCD и светодиодными LED дисплеями.

HTML

CSS

JavaScript

В начало страницы

Динамика


В этом примере показано, как с помощью нескольких дисплеев отобразить цифровые часы с 7-сегментными LED и LCD дисплеями, показывающие локальное и UTC время.

HTML

CSS

JavaScript

В начало страницы

Описание API


Данное описание актуально для текущей версии 1.1.1 JavaScript компонента.


Пространство имен


Для уменьшения вероятности конфликта имен с другими JavaScript библиотеками, все компоненты проекта JSGadget входят в единое пространство имен JSGadget.

В начало страницы

Конструктор JSGadget.Display()


Вызов: var display = new JSGadget.Display(owner, options, val);

display - переменная, которой присваивается созданный объект.

owner - обязательный параметр, представляющий собой родительский блочный элемент HTML страницы, обычно <div>. Родитель может передаваться как в виде объекта jQuery, так и в виде строки, понятной библиотеке jQuery.

options - необязательный параметр, представляющий собой объект, определяющий различные опции. Обект options должен содержать только те поля, значения которых отличаются от значений по умолчанию. Структура объекта options и значения полей по умолчанию:

{
  digits: 1, //разрядность
  color: "black", //цвет
  shadow: { //тень от отображаемых символов
    color: null, //цвет (null - не отображать тень)
    dx: 4, //смещение тени относительно символа по горизонтали
    dy: 4 //смещение тени относительно символа по вертикали
  }
};

val - необязательный параметр, представляющий собой начальное отображаемое значение в виде строки (по умолчанию - ""). Отображаемые символы: минус, пробел, цифры с 0 по 9, десятичный разделитель (точка или запятая), остальные символы отображаются как пробел. Если данный параметр не является строкой, то предепринимается попытка преобразования его к строке. Если длина строки, без учета десятичного разделителя, меньше заданной разрядности, то она дополняется пробелами в начале. Если длина строки, без учета десятичного разделителя, больше заданной разрядности, то она усекается с конца. Если данный параметр используется, то параметр options тоже должен присутствовать, хотя бы в виде пустого объекта {}.

В начало страницы

Функция resize()


Данная функция должна вызываться после изменения размеров родительского элемента.

Вызов: display.resize();

display - переменная, которой был присвоен объект, созданный при вызове конструктора.

В начало страницы

Функция setVal()


Данная функция вызывается для установки отображаемого значения.

Вызов: display.setVal(val);

display - переменная, которой был присвоен объект, созданный при вызове конструктора.

val - новое отображаемое значение в виде строки. Отображаемые символы: минус, пробел, цифры с 0 по 9, десятичный разделитель (точка или запятая), остальные символы отображаются как пробел. Если данный параметр не является строкой, то предепринимается попытка преобразования его к строке. Если длина строки, без учета десятичного разделителя, меньше заданной разрядности, то она дополняется пробелами в начале. Если длина строки, без учета десятичного разделителя, больше заданной разрядности, то она усекается с конца.

В начало страницы

История версий


1.1.1
Первый релиз JavaScript компонента JSDisplay.

В начало страницы
Демонстрация