+7 915_ 972 8010 Россия

+420 773_ 536 710 Чехия

Сайты

Услуги

IVENC B2B

О компании

Интерактивный калькулятор - IVENC Calculator

Предложения по расширению функционала IVENC Calculator ждем по адресу Этот адрес электронной почты защищен от спам-ботов. У вас должен быть включен JavaScript для просмотра. .
Suggestions for increasing functional IVENC Calculator waiting at Этот адрес электронной почты защищен от спам-ботов. У вас должен быть включен JavaScript для просмотра. .

Ключевые особенности
Установка IVENC Calculator
Установка IVENC Calculator на сайт
Установка IVENC Calculator на WordPress сайт
Настройка IVENC Calculator
Файл настройки калькулятора widget-calc-data.xml. Структура файла
Узел no
Параметры узла no. Компоненты IVENC Calculator
Узел styles
Параметры узла styles. Настройка визуального отображения IVENC Calculator
Узел prm
Параметры узла prm. Глобальные настройки IVENC Calculator
Пример настройки xml-файла калькулятора

IVENC Calculator (Online Calculator) — это гибкий инструмент для создания интерактивных калькуляторов, сочетающих в себе наглядность представления данных и удобство использования пользователями на Вашем сайте. Online Calculator распространяется бесплатно (по лицензии GPLv2). При помощи этого калькулятора пользователи Вашего ресурса смогут быстро оценить стоимость товаров или услуг, рассчитать стоимость страховки, проценты по депозиту, расход калорий или банковские услуги, то есть online-калькулятор универсален. Пользователи Вашего ресурса смогут быстро оценить преимущества Вашей компании или проекта. Ведь у них пропадет необходимость рассчитывать стоимость «вручную» или пользоваться сложными таблицами. Online-калькулятор разрабатывается, чтобы сделать различные расчёты более прозрачными и удобными для пользователей.


Расчет стоимости сруба	Currency Converter

Перевод единиц измерения	Перевод единиц измерения

Щелкните по картинке, чтобы оценить работу IVENC Calculator.

Ключевые особенности

Вся настройка в одном XML-файле;
4 вида компонент ввода данных;
Возможность задания сложной формулы расчёта;
Настраиваемый внешний вид;
Встроенный стиль для быстрого подключения;
Настройка порядка отображения строк и колонок;
Возможность добавления дополнительных колонок описания;
Опция запрета кэширования, загружаемого XML-файла.

Программирование калькуляторов, приведенных для примера, рассматривается на нашем блоге http://www.ivenc.com/blog/.

Установка IVENC Calculator

Установка IVENC Calculator на сайт

Скачать IVENC Calculator для HTML (архив);
Распаковать архив;
Настроить необходимый Вам калькулятор в файле "widget-calc-data.xml";
Скопировать папку с файлами: "ivenc_calculator_1.0.0.swf" и "widget-calc-data.xml" на сервер;
Открыть необходимую html-страницу и вставить следующий код:

<object height="300" width="400"
codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=10,0,0,0"
classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000">
<param value="***/ivenc_calculator_1.0.0.swf" name="src">
<param value="xmlcalc=***/widget-calc.xml&amp;cachexml=cache" name="FlashVars">
<embed height="300" width="400"
flashvars="xmlcalc=***/widget-calc.xml&amp;cachexml=cache"
src="/***/ivenc_calculator_1.0.0.swf" type="application/x-shockwave-flash">
</object>

в параметрах width и height указать ширину и высоту вставляемого калькулятора;
в параметре src вместо "***/ivenc_calculator_1.0.0.swf" указать путь к файлу ivenc_calculator_1.0.0.swf;
в параметре xmlcalc вместо "***/widget-calc.xml" указать путь к xml-файлу с настройками (если параметр xmlcalc отсутствует, то калькулятор будет пробовать загрузить файл "widget-calc-data.xml" из того же каталога что и swf-файл калькулятора);

Установка IVENC Calculator на WordPress сайт

Вариант 1:

В администрировании Wordpress открыть вкладку "Плагины";
Нажать кнопку "Добавить новый";
Найти плагин "IVENC Calculator";
Нажать кнопку "Установить";
Активировать плагин "IVENC Calculator".

Вариант 2:

Скачать IVENC Calculator для WordPress (архив zip);
Нажать кнопку "Добавить новый";
Выбрать пункт "Загрузка";
Указать путь к архиву zip (на вашем компьютере);
Нажать кнопку "Установить";
Активировать плагин "IVENC Calculator".

Настройка IVENC Calculator

IVENC Calculator состоит из 2-х файлов: "ivenc_calculator_1.0.0.swf" и "widget-calc-data.xml". SWF-файл - это ядро калькулятора. XML-файл отвечает за настройку алгоритма расчета и внешнего вида онлайн-калькулятора. Именно в этом файле мы и будем настраивать наш калькулятор. Рассмотрим программирование калькулятора на примере "Расчет стоимости сруба". Работу калькулятора можно посмотреть на примерах приведённых в начале статьи. Полный текст кода для калькулятора "Расчет стоимости сруба" приведен ниже.

Файл настройки калькулятора widget-calc-data.xml. Структура файла

XML-файл настройки калькулятора имеет следующую структуру:

<?xml version="1.0" encoding="utf-8"?>
<calc>
    <styles>
             //Настройка визуального отображения online-калькулятора 
    </styles>
    <prm>
             //Глобальные настройки калькулятора  
    </prm>
    <no>
             //Используемые компоненты и порядок вычисления            
    </no>
</calc>

В узле styles настраивается визуальное отображение online-калькулятора. Здесь можно задать цвет строк, "шапки" таблицы, результата расчета (строка с суммой), отдельных строк (например, строки "дополнительные параметры").

В узле prm распологаются глобальные настройки калькулятора. Здесь описываются типы колонок, их ширина, указыватся стиль и цвет, используемые "по умолчанию".

Узел no описывает используемые компоненты (выпадающие списки, чекбоксы, радиобатоны и др.) их настройку и формулу вычислений для калькулятора.

Рассмотрим данные узлы подробнее.

Узел «no»

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

    <no>
             //Используемые компоненты (выпадающие списки, чекбоксы, радиобатоны и др.)           
    </no>

Изучим используемые компоненты и их свойства на примере калькулятора "Расчет стоимости сруба". В данном калькуляторе стоимость сруба рассчитывается по формуле:

База = 1000 * Размер * Высота * Тип бревна(коэффициент) * Диаметр бревна;

Коэффициенты = Рубка + 5-я стена + Рубленный фронтон + Сложный сруб + Сборка сруба;

Итог = База + База * Коэффициенты;

Один из вариантов расчёта описывается следующей структурой узла no:

<no>
    <lbl t='Опция;Ваш выбор;Примечание' loc='header' stl='header'/>
    <sm id='res' rounddig='-2'>
        <ml id='mult' dlev='4'>
            <num v='1000'/>
            <dl v='6;9;12;15;18;24' labs='2х3;3х3;3х4;3x5;3x6;4x6' t='Размер' outimg='Home.jpg'/>
            <ns v='1' t='Высота' min='2' max='3' st='0.2'/>                
            <dl v='1;1.5;2' labs='окоренное;строганое;оцилиндрованое' t='Тип бревна'/>
            <dl v='1;1.5;2' labs='22-24 см;24-28 см;28-30 см' t='Диаметр бревна'/>
        </ml>
        <ml>
            <var rf='mult'/>
            <sm>
                <rb v='0;0.2' labs='в лапу;в чашу' t='Рубка; в лапу(0%),в чашу(20%)'/>
                <lbl t='Дополнительные параметры' stl='special'/>
                <ch v='0.3' t='5-я стена;+30%'/>
                <ch v='0.3' t='Рубленный фронтон;+30%'/>
                <ch v='0.2' t='Сложный сруб;более 4-х углов (+20%)'/>
                <ch v='0.5' t='Сборка сруба;+50%'/>
            </sm>
        </ml>
    </sm>
    <out rf='res' t='Сумма:' loc='footer' stl='footer' triadsep=' ' decimalsep=',' currency=' р.'/>
</no>

Параметры узла «no». Компоненты IVENC Calculator

Общие параметры для отображаемых компонентов

Параметр	Назначение	Примеры
t	значения текстовых колонок слева-направо	t='Опция;Ваш выбор;Примечание' t='Высота' У компонента lbl (Label) на одну текстовую колонку больше, чем у остальных визуальных компонентов
loc	размещение компонента	loc='header' ("заголовок" онлайн калькулятора) loc='footer' ("подвал") Если параметр отсутствует то компонент размещается в центральной части
stl	стиль визуального отображения строки компонента	stl='special' Имена стилей и их количество может быть различно Подробнее описано в разделе описания стилей ниже
v	вес компонента, в зависимости от типа компонента используется по-разному	v='1.25' ; v='1035' (одно значение) v='6;9;12;15;18;24' (список значений, используется компонентами dl и rb)
labs	отображение списка значений	labs='2х3;3х3;3х4;3x5;3x6;4x6' labs='в лапу;в чашу'
outimg	файл изображения	outimg='Home.jpg'

Используемые компоненты и их параметры

Компонент	Параметры	Пример
lbl (Label) текстовая строка	t, loc, stl, outimg	см. общие параметры
num (Number) константа (число целое или дробное) не визуальный компонент	v - значение константы	v='1000' v='1.25'
dl (DropDownList) выпадающий список	t, loc, stl, outimg, v, labs	v='6;9;12;15;18;24'
ns (NumericStepper) цифровой счётчик	t, loc, stl, outimg, v, labs	v='1'
	min/max - минимальное и максимальное значение	min='2' max='3'
	st - шаг значений	st='0.2'
rb (RadioButton) зависимый переключатель	t, loc, stl, outimg, v, labs	v='0;0.2'
ch (CheckBox) независимый переключатель	t, loc, stl, outimg, v, labs	v='0.3'
out (Output) вывод результата	t, loc, stl, outimg
	rf - ссылка на узел, содержащий значение	rf='res'
	triadsep - разделитель триад	triadsep=' '
	decimalsep - десятичный разделитель	decimalsep=','
	currency - обозначение валюты (меры и т.д.)	currency=' р.'

Узел «styles»

Узел отвечает за настройку визуального отображения калькулятора. Важно отметить, что в онлайн калькуляторе любая строка может иметь свой стиль. В нашем примере выделены 4 типа строк: заголовок калькулятора header (опция, ваш выбор, примечание), строки калькулятора body, строка для вывода суммы footer и стиль special для определения строки "Дополнительные параметры".

Узел в файле widget-сalc-data.xml выглядит так:

<styles chrmclr='CCD890'>
    <stl id='body' chrmclr='CCD890'>
        <fnt sz='13' clr='444444'/>
        <state nm='normal'>
            <bck clrs='0xFFFFCC;0xEEEECC' alphs='1;1' rts='0.5;1' rot='90'/>
        </state>
        <state nm='over'>
            <bck clrs='f5f672;fCcEaC' rot='270'/>
        </state>
    </stl>
    <stl id='header'>
        <fnt sz='13' clr='444444'/>
        <state nm='normal;over'>
            <bck clrs='ECAE8C;F5D652' rot='90'/>
            <shp tlx='0' trx='1'/>
        </state>
    </stl>
    <stl id='footer'>
        <fnt sz='13' clr='444444'/>
        <state nm='normal;over'>
            <bck clrs='F5D652;ECAE8C' rot='270'/>
            <shp brx='0' />
        </state>
    </stl>
    <stl id='special'>
        <fnt sz='13' clr='444444'/>
        <state nm='normal;over'>
            <bck clrs='F5D652;ECAE8C' rot='270'/>
        </state>
    </stl>
</styles>

Параметры узла «styles». Настройка визуального отображения IVENC Calculator

Параметр	Описание	Пример
id идентификатор стиля	название стиля указывается в узле no при настройке компонентов и прописывается в строке stl='header'	id='body';id='header';id='footer';
chrmclr (ChromColor) цвет	задается в шестнадцатеричном формате	chrmclr='CCD890';
fnt (font)	настройка шрифта (sz-размер шрифта, clr-цвет шрифта)	sz='13' clr='444444'
state nm	оформление строки в различных состояниях normal(обычное) и over(при наведении мышью). оформление в этих состояниях может быть различным (тогда надо записать state nm='normal' state nm='over') или одинаковым (state nm='normal;over')	nm='normal;over'; nm='normal'; nm='over';
bck (back)	настройка фона у строки. Может быть сплошным цветом (clrs='F5F672') или градиентным (clrs='F5F672;FCCEAC'). alphs - массив значений альфа-канала. rts (ratios) - массив смещений цвета. rot - угол поворота градиентной заливки.	clrs='0xFFFFCC;0xEEEECC' alphs='1;1' rts='0.5;1' rot='90'

Узел «prm»

Узел включает в себя глобальные настройки онлайн калькулятора.

Узел в файле widget-calc-data.xml выглядит так:

<prm sep=';'
    colTypes='Label;Comp;Label' 
    colWidths='100%;140'
    clrs='FFFFFF' rot='90' rts='0;1'
    bpath='images/' outimgw='210' defimg='Home.jpg' useImg='false'
    stl='body'>
</prm>

Параметры узла «prm». Глобальные настройки IVENC Calculator

Параметр	Описание	Пример
sep (separator)	разделитель, используемый для выделения отдельных значений в последовательностях значений при настройке калькулятора. Если значение не задано, то используется ';' (точка с запятой) также он используется в данной статье во-всех примерах. В списке значений заданный разделитель ставиться строго между значениями и не ставиться в конце последнего значения.	sep=';'
colTypes	типы колонок: Label(текст) или Comp (компонент). В нашем примере 3 столбца: colTypes='Label;Comp;Label' Колонок Label может быть несколько, тогда как колонка Comp может быть только одна. В зависимости от количества колонок типа Label в параметре t визуальных компонентов указывается соответствующее число значений, разделённых разделителем. Например для значения 'Label;Comp;Label' нужно будет задавать t c 2-мя значениями t='Название;Примечание' (кроме компонента lbl, где нужно будет задать 3 значения)	colTypes='Label;Comp; Label' colTypes='Comp;Label'
colWidths	ширина колонок калькулятора. задается в процентах или пикселях. из нашего примера видно. что 2-я колонка будет шириной 140 пикселей, а первая и третья будут одинаковой ширины ((100%-140px)/2). Для 3-й колонки в примере не задана ширина, это означает что ширина будет задана 100% (процент задаётся от свободного пространства). Если 2 (и более) колонок имеют ширину 100% это означает что свободное пространство будет разделено между ними поровну	colWidths='100%;140'
clrs rot rts	настройка цвета (по умолчанию). clrs - цвет фона. rot - угол поворота для градиентной заливки. rts (ratios) - массив смещений цвета clrs='FFFFFF' rot='90' rts='0;1'	clrs='FFFFFF' rot='90' rts='0;1'
bpath outimgw defimg useImg	подключение изображений (отображается слева от калькулятора). bpath - папка, где хранятся изображения. outimgw - ширина изображений. defimg - изображение, используемое по умолчанию. useImg - (true - включить изображение) или (false - выключить изображения)	bpath='images/' outimgw='210' defimg='Home.jpg' useImg='false'
stl	стиль, используемый по умолчанию (настраивается в узле styles)	stl='body'

Пример настройки xml-файла калькулятора

Далее представлен пример полного текста настройки для компонента IVENC Calculator.

<?xml version="1.0" encoding="utf-8"?>
<calc>
    <styles chrmclr='CCD890'>
        <stl id='body' chrmclr='CCD890'>
            <fnt sz='13' clr='444444'/>
            <state nm='normal'>
                <bck clrs='0xFFFFCC;0xEEEECC' alphs='1;1' rts='0.5;1' rot='90'/>
            </state>
            <state nm='over'>
                <bck clrs='f5f672;fCcEaC' rot='270'/>
            </state>
        </stl>
        <stl id='header'>
            <fnt sz='13' clr='444444'/>
            <state nm='normal;over'>
                <bck clrs='ECAE8C;F5D652' rot='90'/>
                <shp tlx='0' trx='1'/>
            </state>
        </stl>
        <stl id='footer'>
            <fnt sz='13' clr='444444'/>
            <state nm='normal;over'>
                <bck clrs='F5D652;ECAE8C' rot='270'/>
                <shp brx='0' />
            </state>
        </stl>
        <stl id='special'>
            <fnt sz='13' clr='444444'/>
            <state nm='normal;over'>
                <bck clrs='F5D652;ECAE8C' rot='270'/>
            </state>
        </stl>
    </styles>
    <prm sep=';'
        colTypes='Label;Comp;Label' 
        colWidths='100%;140'
        clrs='FFFFFF' rot='90' rts='0;1'
        bpath='images/' outimgw='210' defimg='Home.jpg' useImg='false'
        stl='body'>
    </prm>
    <no>
        <lbl t='Опция;Ваш выбор;Примечание' loc='header' stl='header'/>
        <sm id='res' rounddig='-2'>
            <ml id='mult' dlev='4'>
                <num v='1000'/>
                <dl v='6;9;12;15;18;24' labs='2х3;3х3;3х4;3x5;3x6;4x6' t='Размер'/>
                <ns v='1' t='Высота' min='2' max='3' st='0.2' outimg='Height.jpg'/>                
                <dl v='1;1.5;2' labs='окоренное;строганое;оцилиндрованое' t='Тип бревна'/>
                <dl v='1;1.5;2' labs='22-24 см;24-28 см;28-30 см' t='Диаметр бревна'/>
            </ml>
            <ml>
                <var rf='mult'/>
                <sm>
                    <rb v='0;0.2' labs='в лапу;в чашу' t='Рубка; в лапу(0%),в чашу(20%)'/>
                    <lbl t='Дополнительные параметры' stl='special'/>
                    <ch v='0.3' t='5-я стена;+30%' outimg='5Wall.jpg'/>
                    <ch v='0.3' t='Рубленный фронтон;+30%' outimg='Fronton.jpg'/>
                    <ch v='0.2' t='Сложный сруб;более 4-х углов (+20%)' outimg='ComplexFrame.jpg'/>
                    <ch v='0.5' t='Сборка сруба;+50%' outimg='Home.jpg'/>
                </sm>
            </ml>
        </sm>
        <out rf='res' t='Сумма:' loc='footer' stl='footer' triadsep=' ' decimalsep=',' currency=' р.'/>
    </no>
</calc>

Примеры программирования различных калькуляторов рассмотрены на нашем блоге: http://ivenc.com/blog/.

Если у Вас возникли вопросы по работе и программированию IVENC Calculator, пишите нам на адрес Этот адрес электронной почты защищен от спам-ботов. У вас должен быть включен JavaScript для просмотра. .