Пишем калькулятор самазамеса жидкости

Здравствуйте, дорогие читатели!
ВНИМАНИЕ: Статья рассчитана на новичка (или не новичка), который что-то читал о самозамесе, хотел перейти на него, но не знает в каких пропорциях ему всё смешивать.
Бoльшая часть новичков в парении задумывается о переходе с готовой жидкости на самозамес.
Рассмотрим тот случай, когда новичок покупает глицерин (VG), пропиленгликоль (PG), дистиллированную воду и никотиновую основу. Купив всё это появляются вопросы: «А как всё это смешивать, если в основе 40% глицерина, а я хочу на выходе 80% глицерина, сохранив при этом объём 100мл?», «В основе 12мг/мл никотина, а я хочу 3мг/мл. Как мне этого добиться?». Некоторые, благодаря знаниям математики, начинают рассчитывать пропорции смешивания составляющих итоговой жидкости. Кто-то забивает на это дело и начинает снова покупать дорогую готовую жидкость. А кто-то находит в интернете калькулятор смешивания жидкости, благодаря которому и рассчитывает пропорции.
Калькулятор это хорошо, но человек же так и не узнает, почему нужно смешивать именно в таких пропорциях.
Я познакомлю Вас с алгоритмом расчёта пропорций смешивания жидкости. Давайте сделаем всё интереснее? Согласны? Тогда напишем калькулятор самозамеса, который возможно вам пригодится в дальнейшем.
Для максимальной простоты и наглядности будем использовать HTML (язык разметки), CSS (язык описания внешнего вида документа) и JavaScript (сценарный язык программирования). Не пугайтесь, тут ничего сложного нету.
Начать нам нужно с создания основного документа index.html. Вы можете создать такой файл в обычном блокноте, но при сохранении выбрать кодировку UTF-8 и формат файла html.

Создали? Хорошо, поехали дальше.
Создадим структуру документа:

Калькулятор

Здесь мы указали какой тип будет у документа, какая кодировка, а также открыли блок с классом «content». Не будем углубляться в программирование, но скажу, что класс мы задали блоку для дальнейшего его визуального оформления.
Далее нам необходимо добавить в документ форму, в которой мы будем выбирать нужные нам значения для смешивания жидкости.

Рассчитать

Здесь мы добавили форму, которая будет находиться в таблице. Тег

……..

…….

var vars = new Array();

function res(form1){
var inputs = form.getElementsByTagName(‘input’);
for (var i = 0; i inputs.length; i++) vars[inputs[i].name] = parseFloat(inputs[i].value);
sum = vars[t_pg] + vars[t_vg] + vars[t_h2o];
if(sum != 100) alert(Вы выбрали неверное сооношение PV/VG/H2O);
osnova = parseFloat(vars[t_nic] / (vars[o_nic] / vars[t_count])).toFixed(2);
o_pg = osnova * (vars[o_pg] / 100);
o_vg = osnova * (vars[o_vg] / 100);
o_h2o = osnova * (vars[o_h2o] / 100);
d_pg = parseFloat((vars[t_count] * (vars[t_pg] / 100)) — o_pg).toFixed(2);
d_vg = parseFloat((vars[t_count] * (vars[t_vg] / 100)) — o_vg).toFixed(2);
d_h2o = parseFloat((vars[t_count] * (vars[t_h2o] / 100)) — o_h2o).toFixed(2);
if(d_h2o 0) d_h2o = 0;
count = parseFloat(osnova) + parseFloat(d_pg) + parseFloat(d_vg) + parseFloat(d_h2o);
result = Добаить никотиновой основы: + osnova + мл
;
result += Добаить PG: + d_pg + мл
;
result += Добаить VG: + d_vg + мл
;
result += Добаить H2O: + d_h2o + мл
;
result += Результат: + count + мл.
;
if(count vars[t_count]) result += Рузультат превышает требуемое количество жидкости.
Если вас это не устраивает, то измените параметры в форме, которые вы заполнили неверно!
Возможно это произошло из-за наличия воды в основе при требуемом отсутствии её в итоговой жидкости.
Если это так, то не переживайте и начинайте смешивать жидкость!
;
document.getElementById(result).innerHTML = resu
}

function outputUpdate(name, val) {
document.querySelector(# + name + _id).value = val;
}

………

Теперь всё по порядку! Для начала создадим массив vars, который будет содержать в себе названия полей из формы и их значения. var vars = new Array()
Далее необходимо создать функцию res, которая будет принимать значения из формы. function res(form1){
В следующем шаге необходимо создать переменную «inputs», в которую поместим все поля из формы. Далее через цикл записываем в наш массив «vars» поля формы в виде: «поле[»имя поля] = значение поля. for (var i = 0; i inputs.length; i++) vars[inputs[i].name] = parseFloat(inputs[i].value);
Теперь начинается самое вкусное. Далее мы будет рассчитывать пропорции для смешивания жидкости. Сначала нужно проверить — а не ввели ли нам неверные значения в поле, например, могли ввести, что требуется получить на выходе 90% глицерина, 100% пропиленгликоля и 80% дистиллированной воды. Это в сумме составляет более 100% от общей жидкости, что не есть правильно. Поэтому мы сознаём переменную «sum», в которой храним сумму процентов. В следующей строке делаем проверку, описанную выше. if(sum != 100) alert(«Вы выбрали неверное соотношение PV/VG/H2O»). Тут написано: «если сумма не равна 100, то выводим сообщение с текстом „Вы выбрали неверное соотношение PV/VG/H2O“».
Далее рассчитываем количество добавляемой никотиновой жидкости. osnova = parseFloat(vars[«t_nic»] / (vars[«o_nic»] / vars[«t_count»])).toFixed(2). Тут простая формула: количество добавляемой никотиновой основы = требуемое количество никотина / (никотина в основе / требуемый объём жидкости). После расчёта никотиновой жидкости, нужно рассчитать количество глицерина, пропиленгликоля и воды в добавляемой основе. Для всех трёх параметров будет похожая формула: количество параметра в основе = количество добавляемой никотиновой основы / (содержание нужного параметра в основе / 100). Например, для воды в коде написано так: o_h2o = osnova * (vars[«o_h2o»] / 100).
Теперь посчитаем количество глицерина, пропиленгликоля и воды, которое необходимо добавить к полученному объёму никотиновой основы. Формула для каждого параметра: количество добавляемого параметра в никотиновую основу = (требуемый объём жидкости * (требуемое количество параметра в итоговой жидкости / 100)) — количество параметра в никотиновой основе. Пример кода для расчёта добавляемого глицерина d_vg = parseFloat((vars[«t_count»] * (vars[«t_vg»] / 100)) — o_vg).toFixed(2).
При выборе значений в форме может быть такое, что в требуемой жидкости мы не захотим видеть воду, а в основе она присутствует, следовательно, вода будет присутствовать и в конечной жидкости. В таком случае, при расчёте воды, переменная для воды в результате у нас будет иметь отрицательное значение. Чтобы от этого избавиться, нужно обнулить значение переменной с водой. Такой случай может случиться и с глицерином, и с пропиленгликолем, но я не стал добавлять проверки на это, т.к. на практике таких случаев может просто не быть. Главное, что я Вам сообщил об этом нюансе.
Считаем количество полученной жидкости и записываем его в переменную «count». Далее необходимо записать весь результат в переменную «result» и вывести его. Можно заметить, что, при формировании текста вывода, присутствует условие (if(count vars[«t_count»]) result += …..), которое означает, что если количество полученной жидкости больше требуемого количества жидкости, то выводим подсказку, в которой расписано с чем это может быть связано (например, с отсутствием воды в требуемой жидкости, но присутствием её в никотиновой основе). Далее просто выводим весь результат в блок с идентификатором «result».
Вы заметили, что в JS коде есть ещё одна функция «outputUpdate», которая принимает в качестве параметров имя и значение поля. Эта функция создана для того, чтобы при движении ползунка отображать текущее его значение.
Давайте протестируем получившийся код. Укажем в форме желаемое количество жидкости 100мл, желаемое содержание никотина 3мг/мл, желаемое содержание PG — 25%, желаемое содержание VG — 65%, желаемое содержание воды 10%. Также укажем параметры основы: содержание никотина в основе 36мг/мл, содержание PG в основе — 55%, содержание VG в основе — 35% и содержание воды в основе — 10%. Жмём на кнопку «Рассчитать» и получаем результат:

Работает, но выглядит не очень красиво. Теперь добавим код, представленный ниже, в тег «head» в нашем документе, который чуточку украсит это всё.

body{
background-color: #2b3944;
color: #fff;
font-size: 20px;
}

.content{
text-align: center;
}

#result{
text-shadow: 0 0 2px #00f;
}

.btn{
background: #fff;
display: inline-block;
padding: 5px 10px;
border-radius: 10px;
cursor: pointer;
color: #000;
font-weight: bolder;
}
.btn:hover{
background: #000;
color: #fff;
box-shadow: 0px 0px 10px #fff;
}
.btn:active{
opacity: 0.8;
}

table{
margin: 0 auto;
}
tr td:first-child{
text-align: right;
}
tr td:nth-child(2){
text-align: center;
}
tr td:nth-child(3){
text-align: left;
}

Получаем теперь такую картину:

Так намного лучше. Не правда ли? Правда.
Вот собственно мы и написали калькулятор самозамеса, а также разобрались в алгоритме его работы. Калькулятор очень простой и в нём есть что доделать, например, добавить некоторые проверки, добавить поля, в которых можно выбрать количество ароматизатора в жидкостях и т.д.
Калькулятор Вы можете использовать у себя на компьютере, на мобильном телефоне и на планшете. Он является кроссплатформенным и подстраивается под различные разрешения экрана. Всё, что Вам нужно, так это файлindex.html

Представляю полный код калькулятора:

Калькулятор

body{
background-color: #2b3944;
color: #fff;
font-size: 20px;
}

.content{
text-align: center;
}

#result{
text-shadow: 0 0 2px #00f;
}

.btn{
background: #fff;
display: inline-block;
padding: 5px 10px;
border-radius: 10px;
cursor: pointer;
color: #000;
font-weight: bolder;
}
.btn:hover{
background: #000;
color: #fff;
box-shadow: 0px 0px 10px #fff;
}
.btn:active{
opacity: 0.8;
}

table{
margin: 0 auto;
}
tr td:first-child{
text-align: right;
}
tr td:nth-child(2){
text-align: center;
}
tr td:nth-child(3){
text-align: left;
}

var vars = new Array();

function res(form1){
var inputs = form.getElementsByTagName(‘input’);
for (var i = 0; i inputs.length; i++) vars[inputs[i].name] = parseFloat(inputs[i].value);
sum = vars[t_pg] + vars[t_vg] + vars[t_h2o];
if(sum != 100) alert(Вы выбрали неверное соотношение PV/VG/H2O);
osnova = parseFloat(vars[t_nic] / (vars[o_nic] / vars[t_count])).toFixed(2);
o_pg = osnova * (vars[o_pg] / 100);
o_vg = osnova * (vars[o_vg] / 100);
o_h2o = osnova * (vars[o_h2o] / 100);
d_pg = parseFloat((vars[t_count] * (vars[t_pg] / 100)) — o_pg).toFixed(2);
d_vg = parseFloat((vars[t_count] * (vars[t_vg] / 100)) — o_vg).toFixed(2);
d_h2o = parseFloat((vars[t_count] * (vars[t_h2o] / 100)) — o_h2o).toFixed(2);
if(d_h2o 0) d_h2o = 0;
count = parseFloat(osnova) + parseFloat(d_pg) + parseFloat(d_vg) + parseFloat(d_h2o);
result = Добаить никотиновой основы: + osnova + мл
;
result += Добаить PG: + d_pg + мл
;
result += Добаить VG: + d_vg + мл
;
result += Добаить H2O: + d_h2o + мл
;
result += Результат: + count + мл.
;
if(count vars[t_count]) result += Рузультат превышает требуемое количество жидкости.
Если вас это не устраивает, то измените параметры в форме, которые вы заполнили неверно!
Возможно это произошло из-за наличия воды в основе при требуемом отсутствии её в итоговой жидкости.
Если это так, то не переживайте и начинайте смешивать жидкость!
;
document.getElementById(result).innerHTML = resu
}

function outputUpdate(name, val) {
document.querySelector(# + name + _id).value = val;
}

Рассчитать

Самозамес жидкости для электронных сигарет http://elec-sir.ru/

Похожие статьи:

• Визуальное проектирование калькулятора
• Почему так важно писать настрои левой рукой?
• Я бы музыку писал на шкуре зебры.