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

+420 773_ 536 710 Чехия

Этот адрес электронной почты защищён от спам-ботов. У вас должен быть включен JavaScript для просмотра.

Сайты

Услуги

IVENC B2B

О компании

  Поддержка интерактивного калькулятора прекращена

Скачать интерактивный калькулятор для WordPress

Скачать интерактивный калькулятор автономный

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

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="<a href="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=10">http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=10</a>,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 для просмотра..

Наши клиенты

  • 1