Масштабирование сигналов онлайн

Диапазон Входа		Вход	Диапазон Выхода		Выход
от	до		от	до

Если датчик температуры, например, может выдавать температуру от 0 до 100 градусов, а его физический сигнал на выходе может быть 4-20 мА, то при температуре 30 градусов, сколько миллиампер он будет выдавать на выходе?

На самом деле подсчитать не сложно: Нужно всего лишь высчитать процентное соотношение и решить пропорцию. Если 30 градусов это 30% в диапазоне от 0 до 100, то теперь чтобы рассчитать выход нужно найти те же 30%, но в диапазоне от 4 до 20. Для этого от 20 отнимаем 4 = 16, умножаем 16 на 0,3 (30%) = 4,8, и теперь прибавим это значение к 4, т.к. у нас диапазон начинается с 4. В итоге на выходе будем иметь сигнал величиной 8,8 мА . 

Но если диапазон входной немного изменится, или выходной, или сам сигнал, то рассчитать быстро не так-то просто, поэтому будем писать калькулятор на javascript. 

PS еще одна версия этого калькулятора чуть красивее https://boolkin.github.io/html/Unicalc/

Исходный код https://github.com/boolkin/html/tree/master/Unicalc

 

На самом деле я не знаток javascript, всему научился через инет, поэтому буду писать так как делал я. Сначала я нарисовал таблицу, где мы будем вводить наши переменные,диапазоны входных и выходных сигналов, а также сам входной сигнал. Таблицу генерировал онлайн 6 столбцов диапазоны от и до + выход и 3 строки, так как некоторые столбцы объединены для наглядности. В последней строке 5 полей для ввода и одно для вывода

    <tr style="background-color: rgba(245, 245, 245, 0.9)">
        <td><input type="number" id="inputmin" title="Вход от" style="width: 100px;"></td>
        <td><input type="number" id="inputmax" title="Вход до" style="width: 100px;"></td>
        <td><input type="number" id="inputvalue" title="На входе" style="width: 100px;"></td>
        <td><input type="number" id="outmin" title="Выход от" style="width: 100px;"></td>
        <td><input type="number" id="outmax" title="Выход до" style="width: 100px;"></td>
        <td align="center" title="На выходе"><output id="outvalue"></output></td>
    </tr>

Для того чтобы при вводе чисел таблица заполнялась автоматически (не нужно нажимать кнопку посчитать) таблица обрамляется конструкцией <form onsubmit="return false;" oninput="calc()"> </form>

То есть вызывается скрипт calc() при вводе значений внутри таблицы

Сам скрипт собирает все значения из 5 полей в переменные, а потом по формуле высчитывает выходной сигнал, аналогично тому как мы это сделали сами в начале

Сначала рассчитываем сколько процентов (точнее какая часть) приходится на входной сигнал в заданном диапазоне:

xval = (ival-imin)/(imax-imin); //значение на входе - минимум делится на весь диапазон (разница между минимумом и максимом). i - это input вход

Теперь найдем такую же часть на выходе, по аналогии с первым примером про температуру:

oval = (xval*(omax-omin) + omin).toFixed(2); // o - output, умножаем коэффициент на диапазон выхода и прибавляем минимальное значение

В итоге финальная версия всей функции выглядит вот так:

<script>
function calc() {
imin = Number(document.getElementById('inputmin').value);
imax = Number(document.getElementById('inputmax').value);
ival = Number(document.getElementById('inputvalue').value);
omin = Number(document.getElementById('outmin').value);
omax = Number(document.getElementById('outmax').value);
xval = (ival-imin)/(imax-imin); 
oval = (xval*(omax-omin) + omin).toFixed(2);
document.getElementById('outvalue').innerHTML = oval;
}
</script>

То есть сначала присваиваем переменным введенные в поля данные, а потом уже делаем вычисления с этими переменными, в конце записывая в outvalue значение oval.

А вот и сам калькулятор, который также и формула масштабирования аналогового сигнала онлайн. Если в нем вбить вход 4-20, значение 8,8, а на выход 0-100, то получим те самые 30%. Так же в нем можно преобразовать минуты в десятичные значения. Если на вход подать 30 секунд (диапазон 0-60) а выход заключить в один час (0-1), то получим 0,5 часа.