Я обратил внимание, что довольно часто спрашивают, как работает обычный калькулятор. Думал, что в интернете должно быть много статей по этому поводу, но что-то мне ничего дельного не попалось. Википедия, как обычно, слишком мудрит, и я подумал, что будет неплохо, если вкратце опишу принцип его работы.
Существует огромное количество всевозможных моделей калькуляторов. Есть простые, есть сложные. С питанием от солнечных батарей или от сети. Есть обычные, программируемые, бухгалтерские, специализированные модели. Порой, и не найдешь той грани, которая отделяет калькулятор от компьютера.
Я буду описывать работу самой простой модели калькулятора.
Это калькулятор CASIO HS-8LU. Они примерно все работают одинаково. По большому счету, в простых моделях ничего не меняется уже лет тридцать.
Калькулятор состоит из корпуса, клавиатуры с резиновыми кнопками и платы.
В данной модели плата сделана в виде пленки с нанесенными на нее проводниками. Питание — от солнечной батареи. Над солнечной батареей расположен жидкокристаллический индикатор.
На задней крышке корпуса расположены токопроводящие контакты. При нажатии на кнопку она прижимает пленку к задней крышке и происходит электрический контакт. Часто токопроводящий контакт наносят на обратную сторону кнопки. В том случае сама кнопка прижимается к плате для создания контакта.
С обратной стороны под солнечной батареей расположен чип микропроцессора. Он управляет работой калькулятора.
Как работает индикатор на жидких кристаллах.
Жидкие кристаллы — это специальные молекулы, которые при приложении между ними напряжения поворачиваются и меняют поляризацию света.
Это картиночка для одного пиксела цветного ЖКИ, но в монохромных там то же самое, только нет светофильтра.
Спереди и сзади жидких кристаллов ставят так называемый поляризационный фильтр. Он обычный свет преобразует в поляризованный (например, образно говоря, в «вертикальный»). Если напряжение не приложено, то «вертикально» поляризованный свет проходит через жидкие кристаллы, поворачивает плоскость поляризации, отражается от задней поверхности и идет обратно.
видим прозрачный экран. На стекле индикатора спереди нарисованы прозрачные токопроводящие линии в форме сегментов цифр, точек или других символов. Сзади также есть токопроводящая область. Когда возникает напряжение между токопроводящими проводниками (спереди и сзади), то между ними жидкие кристаллы поворачиваются и меняют свою плоскость поляризации так, что через задний поляризационный фильтр уже не проходят. Оттого на том сегменте, где есть напряжение между передней и задней поверхностью стекла, возникает невидимая область — сегмент «светится».
Если приглядеться под определенным углом, то в отраженном свете будут видны эти прозрачные проводники.
На самом деле ориентация поляризации не «вертикальная» и «горизонтальная», а «наклоненная» под углом в 45 градусов «вправо» или «влево». Если взять светофильтр и перевернуть вверх ногами, то поляризация будет не «вправо», а «влево». И изначально он будет не пропускать свет, а задерживать.
Для экономии количества один проводник отображает и подведен не к одному сегменту, а к нескольким сразу. Чтобы они не зажигались сразу все, с задней стороны стекла рисуют не один общий проводник, а тоже несколько. Получается, что спереди контакты подведены к нескольким сегментами по вертикали, а с задней стороны по горизонтали. На схеме ниже показана схема индикатора.
Там есть еще такая хитрость, что напряжение нужно прикладывать не постоянное, а переменное (прямоугольные импульсы частотой 20-40 Гц). Иначе деградирует индикатор.
Для простых индикаторов с одним общим проводником импульсы совпадают по фазе, когда не надо отображать сегмент (спереди и сзади разность потенциалов будет одинаковой) и не совпадают по фазе, когда надо отобразить (тогда спереди будет «0», и сзади «1», а через некоторое время полярность поменяется, и будет спереди «1», а сзади — «0», и так далее). В тех индикаторах на общий проводник подается меандр (просто частота), а на отображаемые сегменты — совпадение логического уровня с общим (не горит) и не совпадение (горит).
В индикаторе нашего калькулятора используется три общих проводника. Там все сложнее. Простыми логическими уровнями не обойдешься. Чтобы обеспечить переменное напряжение и отсутствие постоянной составляющей используются уровни напряжений в 1/3 и 2/3 от максимума. В итоге форма импульсов будет ступенчатой. На схеме ниже показаны эпюры таких импульсов.
А теперь самое главное и самое интересное — микросхема процессора.
Это фотографии кристаллов отечественных калькуляторов, сделанных на микросхемах К145ИП7 (слева) и К145ИП11 (справа). Фотографии взяты с интересного сайта «Радиокартинки».
Микропроцессор калькулятора принципом работы очень мало отличается от обычного персонального компьютера с процессором, памятью, клавиатурой и видеокартой.
Если быстро посмотреть на фото кристаллов, то можно примерно поделить на три области: область постоянного запоминающего устройства (ПЗУ) с программной («прошивкой»), область оперативного запоминающего устройства (ОЗУ), где хранятся регистры памяти калькулятора, и остальные цепи процессора, которые включают арифметическо-логическое устройство (АЛУ), драйвер индикатора, драйвер клавиатуры, преобразователи напряжения и другие вспомогательные цепи.
Это структурная схема процессора калькулятора МК-62.
В верхней части мы видим, что есть блоки:
— генератор опорной частоты (ГОЧ), который задает частоту, с которой регенерируется изображение на индикаторе;
— схема удвоения напряжения, умножающая напряжение солнечное батареи на два, чтобы хватило для индикатора;
— генератор, формирователь импульсов общих электродов и регистр-формирователь сегментного кода постоянно выводят заданные для вывода сегменты на индикатор.
м есть специальный регистр памяти, куда микропроцессор записывает информацию, какие надо отображать сегменты, а какие не надо. После этого процессор не отвлекается на отображение, и эти блоки выводят все сами;
— ОЗУ с регистрами данных и ПЗУ с прошивкой;
— и узел с процессором, состоящим из АЛУ с обвязкой. Счетчик адреса АЛУ выбирает очередное слово программы из ПЗУ. Разрядность этого слова может быть разной в разных калькуляторах. Отдельные биты в слове определяют работу АЛУ: например, сложить два 4-х битных числа из регистров, или считать из ОЗУ цифру, или сравнить два числа, или сдвинуть на один разряд и т. д.
Как работает микропроцессор.
Сначала срабатывает сброс по питанию. При подаче электричества специальный узел заставляет программу работать с начального адреса. Команда за командой извлекается из ПЗУ и исполняется. Вначале происходит обнуление регистров, формирование числа «0.», сброс всяких признаков переполнения, операций и прочее. После сброса программа ожидает события от клавиатуры (нажатие кнопки).
Когда нажата кнопка, то процессор через некоторое время еще раз опрашивает клавиатуру, чтобы подавить дребезг кнопок (когда из-за плохого контакта может произойти одновременно несколько нажатий).
А дальше, в зависимости от предыдущих состояний, он по программе определяет, что с этим нажатием делать. Например, если идет ввод числа и введена цифра, то продолжить ввод.
ли нажата кнопка операции, то выполнить операцию.
Сам алгоритм и логика выполнения операций целиком лежит на ПЗУ и программистах, которые писали прошивки.
Что интересно, все простые операции выполняются так, как их учат в школе.
— сложение и вычитание. В столбик. Выравниваются порядки двух введенных чисел и происходит сложение или вычитание.
— умножение и деление. Так же в столбик. Разряд за разрядом. Сначала последовательным сложением умножают на младшую цифру множителя, затем вторую и так далее до старшей. Деление — последовательным вычитанием.
После выполнения операции отдельная подпрограмма нормализует результат: отбрасывает незначащие нули и сдвигает его вправо.
Если в калькуляторе есть тригонометрические функции, то они также выполняются, как их запрограммировал программист. Есть разные способы вычисления элементарных функций: разложение в ряд Тейлора или по методу «Cordic».
Вот примерно так работает калькулятор.
Я вам дам ссылку на несколько сайтов. В одном вы можете еще прочитать про то, как они работают: http://datamath.org/Story/Intel.htm#The.
А еще две ссылки — очень познавательный интерактивный сайт, где обратным реверсом считали прошивку и сделали симулятор. Там можно «прогнать» работу процессора реального калькулятора.
http://files.righto.com/calculator/TI_calculator_simulator.html и
http://files.righto.com/calculator/sinclair_scientific_simulator.html.
А также заходите в мой музей, где я собираю советскую цифровую электронику: http://www.leningrad.su/museum/
Вот, наверно, и все. Надеюсь, я вас не сильно утомил. 🙂
engineering-ru.livejournal.com
Пример простого калькулятора для сайта на PHP + JS
Итак, если вы решите сами создать калькулятор, то знайте, что овладеть хотя бы базовыми знаниями языков программирования JavaScript и PHP все же придется.
Лично я с JavaScript мало знаком поэтому покажу позаимствованную структуру построения самого простого калькулятора, который может складывать два числа и выводить конечный результат по запросу.
Форма счетчика будет создана с помощью тегов
<form> … </form>
Для реализации ввода значений используем теги <input>
Функция Onchange — убирает значения при добавлении их в форму.
Функция Onkeyup — убирает значения при добавлении их в форму кроме цифр.
Далее добавляем переменные в форму для тегов input, например, первое значение это латинская «x», второе вводимое значение в поле это латинская «y», а выходное значение это «summa».
Теперь чтобы форма заработала надо ее наделить разумом, то есть создать скрипт с помощью Java, который и будет вести расчеты.
Словом calculators можно изменить на любое, так как им мы даем только название функции.
А для x, y, z задаем переменные, которые были созданные ранее.
Далее переходим обратно к форме и для тега input задаем функцию, отвечающую за расчет значений.
Для этого добавляем в инпут команду onclick =»calculators (this.form)» которая и запустить алгоритма калькулятора.
Как видите все не, так и сложно как может показать, теперь можно скачать в интернете чужие калькуляторы и редактировать их под себя, например, добавить другие значения и функции.
Как установить калькулятор на сайт
Весь принцип работы калькулятора завязан на выполнении скрипта, поэтому каким-то из способов надо добавить скрипт на страницу записи WordPress.
Сразу скажу, что если тот код что был создан выше закинуть в текстовый редактор записи, то ничего работать не будет, форма калькулятора отобразится, но вот расчет значений не произойдет.
В сети я нашел несколько путей как подключить JS скрипты к записям:
Шорткод. Данный способ основан на редактировании файла темы functions.php.
Здесь вам придется между < ?php … ? > вставить специальный код:
где вместо КОД вставляем свой скрипт, а для вызова шорткода на странице используем [ myJavascript1 ].
Функция wp_enqueue_script. С ее помощью можно подключить скрипт для конкретной страницы. Данный способ популярен, но требует больших знаний движка и его структуры.
Правка header.php. Один из наихудших методов, основанный на добавлении специального кода перед закрывающим тегом </ head> с номером страницы, в которой надо отобразить скрипт.
Конструкция iframe. Один из простейших способов, где надо создать новый файл и закинуть в него скрипт.
Далее загружаем этот файл к себе на хостинг, а в статье в том месте, где будет выводиться калькулятор размещаем код iframe, через который и будет отображаться содержимое из внешних файлов.
- ссылка — адрес где расположен файл с готовым калькулятором;
- параметры width и height — задают размеры формы;
- параметр frameborder — присваивает толщину границы фрейма;
- параметр scrolling — задает или убирает полосу прокрутки.
Лично я изначально вставлял калькулятор на блог последним способом, но этот метод стал неэффективным после появления мобильной версии сайта, так как выводимая форма не адаптирована под другие разрешения экранов.
В этом случае все равно приходится прибегать к помощи фрилансеров, я нахожу их за копейки в сервисе Kwork, чтобы они все подправили и вставили калькулятор в запись традиционным способом, а на хостинг отдельно загружается только сам скрипт.
Но можно пойти и другим путем, об этом далее.
seoslim.ru
Стилизуем все классы у калькулятора.
Добавим рамку у калькулятора border: 3px solid #b641b0 и отступы по бокам padding: 20px 20px.
Цена будет #price большими буквами и font-weight: bold.
У изображений card-pic img отключим видимость display: none, но изначально будет видна первая #card1 картинка визитки черно-белая односторонняя display: inline-block.
Отступ сверху будет как у калькулятора padding-top: 20px.
Класс form-control будет на всю ширину width: 100% и с рамкой синего цвета.
Код в main.sass.
Скрипт для калькулятора в common.js.
Вначале проверим изменялись ли значения select у элемента с классом calc $(.calc).change (function ().
Если одно из полей меняется применяем функцию.
Присваиваем переменной тираж $card значение select#card и вытаскиваем это значение функцией val ().
Также находим значение для типа бумаги $paper = $(select#paper).val ().
Какую цветность визитки выбрал покупатель, определим $color = $(select#color).val ().
Функция изменения картинки относительно выбора цветности.
Определим, какую цветность выбрал пользователь, чтобы подставить соответствующую картинку, для этого используем логическую функцию if.
Для каждого option у цветности создадим дата атрибуты data=1,2,3,4,5 в index.html.
В скрипте добавим переменную $color1, которая будет брать селект с идентификатором select#color, с выбранным option:selected на данный момент.
И у этого option достаем определенный атрибут командой attr (data).
Теперь проверим, если if переменная $color1 равна 1, то скрываем все картинки функцией $(.pic img).hide (), а первое изображение покажем $(#card1).show (slow).
Делаем по аналогии для других пяти изображений и проверяем в браузере.
Напишем формулу расчета стоимости визитки.
- Стандартный формат визитки 9 на 5 сантиметров. Таких визиток на целый лист формата А3 поместится 30 штук $viz = 30, поэтому итоговый тираж будем делить на 30 $fin = $card / $viz.
- Теперь итоговый тираж умножим на цену за бумагу $price = $fin * $tb. Добавим атрибут к option у бумаги tb=9,18,21 в index.html это цена в зависимости от типа бумаги. Теперь в скрипте зададим переменную, которая вытащит атрибут attr (tb) из выбранного типа бумаги select#paper option:selected.
- Третий параметр, который влияет на цену это цветность, зададим атрибуты дата цены у option селекта с именем color. clpr=5,10,10,20,15 цена каждой цветности в index.html. В common.js переменная $clpr равна выбранной option, в select с идентификатором color и вытаскиваем атрибут attr (clpr).
Общая формула будет умножение атрибутов цены всех выбранных option $price = $fin * $tb * $clpr.
Для вывода стоимости тиража $(span#price).text ($price).
Код в common.js.
sdelatlending.ru
Процедура создания калькулятора
Особенно насущной данная задача становится в случае необходимости постоянно проводить однотипные вычисления и расчеты, связанные с определенным видом деятельности. В целом все калькуляторы в Excel можно разделить на две группы: универсальные (используются для общих математических вычислений) и узкопрофильные. Последняя группа делится на множество видов: инженерные, финансовые, кредитные инвестиционные и т.д. Именно от функциональных возможностей калькулятора, в первую очередь, зависит выбор алгоритма его создания.
Способ 1: использование макросов
Прежде всего, рассмотрим алгоритмы создания пользовательских калькуляторов. Начнем с создания простейшего универсального калькулятора. Данный инструмент будет выполнять элементарные арифметические действия: сложение, умножение вычитание, деление и т. д. Он реализован с помощью макроса. Поэтому прежде, чем приступить к процедуре создания, нужно удостовериться, что у вас включены макросы и панель разработчика. Если это не так, то обязательно следует активировать работу макросов.
- После того, как указанные выше предварительные настройки выполнены, перемещаемся во вкладку «Разработчик». Жмем на иконку «Visual Basic», которая размещена на ленте в блоке инструментов «Код».
- Запускается окно редактора VBA. Если центральная область у вас отобразилась серым цветом, а не белым, то это означает, что поле введения кода отсутствует. Для включения его отображения переходим в пункт меню «View» и жмем по надписи «Code» в появившемся списке. Можно вместо этих манипуляций нажать функциональную клавишу F7. В любом случае поле для ввода кода появится.
- Тут в центральной области нам нужно записать сам код макроса. Он имеет следующий вид:
Sub Calculator()
Dim strExpr As String
' Введение данных для расчета
strExpr = InputBox("Введите данные")
' Вычисление результата
MsgBox strExpr & " = " & Application.Evaluate(strExpr)
End Sub
Вместо словосочетания «Введите данные» вы можете записать любое другое более приемлемое для вас. Именно оно будет располагаться над полем введения выражения.
После того, как код введен, файл нужно перезаписать. При этом его следует сохранить в формате с поддержкой макросов. Жмем на иконку в виде дискеты на панели инструментов редактора VBA.
- Запускается окно сохранения документа. Переходим в ту директорию на жестком диске или съемном носителе, где хотим его сохранить. В поле «Имя файла» присваиваем документу любое желаемое наименование или оставляем то, которое присвоено ему по умолчанию. В обязательном порядке в поле «Тип файла» из всех доступных форматов выбираем наименование «Книга Excel с поддержкой макросов (*.xlsm)». После данного шага клацаем по кнопке «Сохранить» в нижней части окна.
- После этого можно закрывать окно редактора макросов, просто нажав на стандартный значок закрытия в виде красного квадрата с белым крестиком в его правом верхнем углу.
- Чтобы запустить вычислительный инструмент при помощи макроса, находясь во вкладке «Разработчик», клацаем по значку «Макросы» на ленте в блоке инструментов «Код».
- После этого запускается окно макросов. Выбираем наименование того макроса, который мы только что создавали, выделяем его и жмем на кнопку «Выполнить».
- После выполнения данного действия запускается калькулятор, созданный на основе макроса.
- Для того, чтобы произвести в нем вычисление, записываем в поле необходимое действие. Удобнее всего использовать для этих целей числовой блок клавиатуры, который расположен справа. После того, как выражение введено, жмем на кнопку «OK».
- Затем на экране появляется небольшое окошко, которое содержит в себе ответ решения заданного выражения. Для его закрытия жмем на кнопку «OK».
- Но согласитесь, что довольно неудобно каждый раз, когда потребуется произвести вычислительные действия, переходить в окно макросов. Давайте упростим реализацию запуска окна вычислений. Для этого, находясь во вкладке «Разработчик», щелкаем по уже знакомой нам иконке «Макросы».
- Затем в окне макросов выбираем наименование нужного объекта. Щелкаем по кнопке «Параметры…».
- После этого запускается окошко ещё меньше предыдущего. В нем мы можем задать сочетание горячих клавиш, при нажатии на которые будет запускаться калькулятор. Важно, чтобы данное сочетание не использовалось для вызова других процессов. Поэтому первые символы алфавита использовать не рекомендуется. Первую клавишу сочетания задает сама программа Эксель. Это клавиша Ctrl. Следующую клавишу задает пользователь. Пусть это будет клавиша V (хотя вы можете выбрать и другую). Если данная клавиша уже используется программой, то будет автоматически добавлена ещё одна клавиша в комбинацию – Shift. Вписываем выбранный символ в поле «Сочетание клавиш» и жмем на кнопку «OK».
- Затем закрываем окно макросов, нажав на стандартный значок его закрытия в верхнем правом углу.
Теперь при наборе выбранной комбинации горячих клавиш (в нашем случае Ctrl+Shift+V) будет запускаться окно калькулятора. Согласитесь, это намного быстрее и проще, чем каждый раз вызывать его через окно макросов.
Урок: Как создать макрос в Экселе
Способ 2: применение функций
Теперь давайте рассмотрим вариант создания узкопрофильного калькулятора. Он будет предназначен для выполнения конкретных, специфических задач и размещен непосредственно на листе Excel. Для создания этого инструмента будут применяться встроенные функции Эксель.
Для примера создадим инструмент конвертации величин массы. В процессе его создания нами будет использована функция ПРЕОБР. Данный оператор относится к инженерному блоку встроенных функций Эксель. Его задачей является преобразование величин одной меры измерения в другую. Синтаксис данной функции следующий:
=ПРЕОБР(число;исх_ед_изм;кон_ед_изм)
«Число» — это аргумент, имеющий вид числового значения той величины, которую надо конвертировать в другую меру измерения.
«Исходная единица измерения» — аргумент, который определяет единицу измерения величины, подлежащую конвертации. Он задается специальным кодом, который соответствует определенной единице измерения.
«Конечная единица измерения» — аргумент, определяющий единицу измерения той величины, в которую преобразуется исходное число. Он также задается с помощью специальных кодов.
Нам следует подробнее остановиться на этих кодах, так как они нам понадобятся в дальнейшем при создании калькулятора. Конкретно нам понадобятся коды единиц измерения массы. Вот их перечень:
- g – грамм;
- kg – килограмм;
- mg – миллиграмм;
- lbm – английский фунт;
- ozm – унция;
- sg – слэг;
- u – атомная единица.
Нужно также сказать, что все аргументы данной функции можно задавать, как значениями, так и ссылками на ячейки, где они размещены.
- Прежде всего, делаем заготовку. У нашего вычислительного инструмента будет четыре поля:
- Конвертируемая величина;
- Исходная единица измерения;
- Результат конвертации;
- Конечная единица измерения.
Устанавливаем заголовки, под которыми будут размещаться данные поля, и выделяем их форматированием (заливкой и границами) для более наглядной визуализации.
В поля «Конвертируемая величина», «Исходная граница измерения» и «Конечная граница измерения» нами будут вводиться данные, а в поле «Результат конвертации» — выводиться конечный результат.
- Сделаем так, чтобы в поле «Конвертируемая величина» пользователь мог вводить только допустимые значения, а именно числа больше нуля. Выделяем ячейку, в которую будет вноситься преобразуемая величина. Переходим во вкладку «Данные» и в блоке инструментов «Работа с данными» кликаем по значку «Проверка данных».
- Запускается окошко инструмента «Проверка данных». Прежде всего, выполним настройки во вкладке «Параметры». В поле «Тип данных» из списка выбираем параметр «Действительное». В поле «Значение» также из списка останавливаем выбор на параметре «Больше». В поле «Минимум» устанавливаем значение «0». Таким образом, в данную ячейку можно будет вводить только действительные числа (включая дробные), которые больше нуля.
- После этого перемещаемся во вкладку того же окна «Сообщение для ввода». Тут можно дать пояснение, что именно нужно вводить пользователю. Он его увидит при выделении ячейки ввода величины. В поле «Сообщение» напишем следующее: «Введите величину массы, которую следует преобразовать».
- Затем перемещаемся во вкладку «Сообщение об ошибке». В поле «Сообщение» нам следует написать ту рекомендацию, которую увидит пользователь, если введет некорректные данные. Напишем следующее: «Вводимое значение должно быть положительным числом». После этого, чтобы завершить работу в окне проверки вводимых значений и сохранить введенные нами настройки, жмем на кнопку «OK».
- Как видим, при выделении ячейки появляется подсказка для ввода.
- Попробуем ввести туда некорректное значение, например, текст или отрицательное число. Как видим, появляется сообщение об ошибке и ввод блокируется. Жмем на кнопку «Отмена».
- А вот корректная величина вводится без проблем.
- Теперь переходим к полю «Исходная единица измерения». Тут мы сделаем так, что пользователь будет выбирать значение из списка, состоящего из тех семи величин массы, перечень которых был приведен выше при описании аргументов функции ПРЕОБР. Ввести другие значения не получится.
Выделяем ячейку, которая находится под наименованием «Исходная единица измерения». Снова клацаем по иконке «Проверка данных».
- В открывшемся окне проверки данных переходим во вкладку «Параметры». В поле «Тип данных» устанавливаем параметр «Список». В поле «Источник» через точку с запятой (;) перечисляем коды наименований величин массы для функции ПРЕОБР, о которых шел разговор выше. Далее жмем на кнопку «OK».
- Как видим, теперь, если выделить поле «Исходная единица измерения», то справа от него возникает пиктограмма в виде треугольника. При клике по ней открывается список с наименованиями единиц измерения массы.
- Абсолютно аналогичную процедуру в окне «Проверка данных» проводим и с ячейкой с наименованием «Конечная единица измерения». В ней тоже получается точно такой же список единиц измерения.
- После этого переходим к ячейке «Результат конвертации». Именно в ней будет содержаться функция ПРЕОБР и выводить результат вычисления. Выделяем данный элемент листа и жмем на пиктограмму «Вставить функцию».
- Запускается Мастер функций. Переходим в нем в категорию «Инженерные» и выделяем там наименование «ПРЕОБР». Затем клацаем по кнопке «OK».
- Происходит открытие окна аргументов оператора ПРЕОБР. В поле «Число» следует ввести координаты ячейки под наименованием «Конвертируемая величина». Для этого ставим в курсор в поле и кликаем левой кнопкой мыши по этой ячейке. Её адрес тут же отображается в поле. Таким же образом вводим координаты в поля «Исходная единица измерения» и «Конечная единица измерения». Только на этот раз кликаем по ячейкам с такими же названиями, как у этих полей.
После того, как все данные введены, жмем на кнопку «OK».
- Как только мы выполнили последнее действие, в окошке ячейки «Результат конвертации» тут же отобразился результат преобразования величины, согласно ранее введенным данным.
- Давайте изменим данные в ячейках «Конвертируемая величина», «Исходная единица измерения» и «Конечная единица измерения». Как видим, функция при изменении параметров автоматически пересчитывает результат. Это говорит о том, что наш калькулятор полностью функционирует.
- Но мы не сделали одну важную вещь. Ячейки для ввода данных у нас защищены от введения некорректных значений, а вот элемент для вывода данных никак не защищен. А ведь в него вообще нельзя ничего вводить, иначе формула вычисления будет просто удалена и калькулятор придет в нерабочее состояние. По ошибке в эту ячейку можете ввести данные и вы сами, не говоря уже о сторонних пользователях. В этом случае придется заново записывать всю формулу. Нужно заблокировать любой ввод данных сюда.
Проблема состоит в том, что блокировка устанавливается на лист в целом. Но если мы заблокируем лист, то не сможем вводить данные в поля ввода. Поэтому нам нужно будет в свойствах формата ячеек снять возможность блокировки со всех элементов листа, потом вернуть эту возможность только ячейке для вывода результата и уже после этого заблокировать лист.
Кликаем левой кнопкой мыши по элементу на пересечении горизонтальной и вертикальной панели координат. При этом выделяется весь лист. Затем кликаем правой кнопкой мыши по выделению. Открывается контекстное меню, в котором выбираем позицию «Формат ячеек…».
- Запускается окно форматирования. Переходим в нем во вкладку «Защита» и снимаем галочку с параметра «Защищаемая ячейка». Затем клацаем по кнопке «OK».
- После этого выделяем только ячейку для вывода результата и кликаем по ней правой кнопкой мыши. В контекстном меню клацаем по пункту «Формат ячеек».
- Снова в окне форматирования переходим во вкладку «Защита», но на этот раз, наоборот, устанавливаем галочку около параметра «Защищаемая ячейка». Затем щелкаем по кнопке «OK».
- После этого перемещаемся во вкладку «Рецензирование» и жмем на иконку «Защитить лист», которая расположена в блоке инструментов «Изменения».
- Открывается окно установки защиты листа. В поле «Пароль для отключения защиты листа» вводим пароль, с помощью которого при необходимости в будущем можно будет снять защиту. Остальные настройки можно оставить без изменений. Жмем на кнопку «OK».
- Затем открывается ещё одно небольшое окошко, в котором следует повторить ввод пароля. Делаем это и жмем на кнопку «OK».
- После этого при попытке внесения любых изменений в ячейку вывода результата действия будут блокироваться, о чем сообщается в появляющемся диалоговом окне.
Таким образом, мы создали полноценный калькулятор для конвертации величины массы в различные единицы измерения.
Кроме того, в отдельной статье рассказывается о создании ещё одного вида узкопрофильного калькулятора в Экселе для расчета платежей по кредитам.
Урок: Расчет аннуитетного платежа в Экселе
Способ 3: включение встроенного калькулятора Excel
Кроме того, в Экселе имеется собственный встроенный универсальный калькулятор. Правда, по умолчанию кнопка его запуска отсутствует на ленте или на панели быстрого доступа. Рассмотрим, как активировать её.
- После запуска программы Excel перемещаемся во вкладку «Файл».
- Далее в открывшемся окне переходим в раздел «Параметры».
- После запуска окошка параметров Excel перемещаемся в подраздел «Панель быстрого доступа».
- Перед нами открывается окно, правая часть которого разделена на две области. В правой ее части расположены инструменты, которые уже добавлены на панель быстрого доступа. В левой представлен весь набор инструментов, который доступен в Excel, включая отсутствующие на ленте.
Над левой областью в поле «Выбрать команды» из перечня выбираем пункт «Команды не на ленте». После этого в списке инструментов левой области ищем наименование «Калькулятор». Найти будет просто, так как все названия расположены в алфавитном порядке. Затем производим выделения данного наименования.
Над правой областью находится поле «Настройка панели быстрого доступа». Оно имеет два параметра:
- Для всех документов;
- Для данной книги.
По умолчанию происходит настройка для всех документов. Этот параметр рекомендуется оставить без изменений, если нет предпосылок для обратного.
После того, как все настройки совершены и наименование «Калькулятор» выделено, жмем на кнопку «Добавить», которая расположена между правой и левой областью.
- После того, как наименование «Калькулятор» отобразилось в правой области окна, жмем на кнопку «OK» внизу.
- После этого окно параметров Excel будет закрыто. Чтобы запустить калькулятор, нужно кликнуть на одноименный значок, который теперь располагается на панели быстрого доступа.
- После этого инструмент «Калькулятор» будет запущен. Функционирует он, как обычный физический аналог, только на кнопки нужно нажимать курсором мышки, её левой кнопкой.
Как видим, в Экселе существует очень много вариантов создания калькуляторов для различных нужд. Особенно эта возможность полезна при проведении узкопрофильных вычислений. Ну, а для обычных потребностей можно воспользоваться и встроенным инструментом программы.
lumpics.ru
Беглый анализ открытых данных показывает, что ежедневно в среднем 5 человек оставляют заявки на создание калькулятора на биржах фриланса — а еще несколько сотен интересуются вопросом в поиске. Часто запросы стандартны — и, конечно, на рынке сложился целый набор готовых предложений: от плагинов для конкретных CMS до калькуляторов, которые можно приобрести у студий. Рекорд, обнаруженный нами (см. в первом комментарии) — 24 999 рублей за довольно обычное решение.
Да, рынок есть рынок. Но поскольку мы в основном работаем с людьми, чьи сайты сделаны на конструкторах, у них нет 25 тысяч на один виджет. Вот и возникло желание написать калькулятор, которым они смогли бы пользоваться самостоятельно — и без изучения HTML, JS, JQuery и CSS.
В процессе работы над проектом нам удалось реализовать несколько находок в логике работы и дизайне калькулятора. Ими, а также полезными инструментами, и хотим поделиться с сообществом.
По сути, у нас получился довольно универсальный онлайн-конструктор калькуляторов, результат работы в котором можно встроить на любую платформу, поддерживающую вставку HTML.
Как устроен конструктор калькуляторов
Пишем свою адаптивность
Лайфхак: как упростить формулы до азбуки
Чистим код с GULP (а не тем, о чем вы могли подумать)
Есть ли жизнь после жизни?
Начиная проект, мы обсуждали довольно хардкорные идеи, но в итоге пришли к drag-n-drop интерфейсу сборки, плюс админке, в которой человек может хранить и настраивать свои калькуляторы.
В начале было пустое поле. Регистрируясь на сервисе впервые, человек действительно видит пустую страницу с единственной кнопкой добавления нового проекта-калькулятора.
В будущем на этой странице будут появляться снимки-ссылки на калькуляторы пользователя, вот как тут:
Для создания скриншота-превью калькулятора в кабинете мы использовали PhantomJS. Штука очень удобная, когда ты уже создал несколько калькуляторов, — при входе в кабинет сразу понятно, где какой из проектов.
Люди любят ползунок. Это стало понятно, когда мы запустили первых людей на сервис, и они стали выбирать, из каких элементов создать виджет.
Сам интерфейс создания калькулятора устроен похоже с ЛК — есть большое пустое поле, на которое можно добавлять элементы из боковой панели. Для старта мы выбрали 8 элементов. Пять отвечают непосредственно за калькулятор — это ползунок, выпадающий список, галочка, текстовое поле (для сбора почт, адресов и т.д.) и переключатель. Еще три — за привлекательность (картинка) и опцию заказа — текстовый блок и кнопка. Самым востребованным элементом из всех оказался ползунок.
Сначала для создания ползунка мы выбрали расширения jQuery Scrollbar, но штука странно себя вела на мобильных. Поэтому мы взяли и модифицировали расширение JQuery-Range-Slider. Остальные элементы написали и стилизовали сами
Манипуляции с элементами и данными калькуляторов производятся на клиентской части проекта — поэтому в процессе важно было придумать, как максимально экономить ресурсы браузера.
Этот момент стал одним из самых хлопотных при отладке. Но зато сейчас запись процессов, происходящих на странице, когда человек перетаскивает элемент в калькулятор (это самый ресурсозатратный момент), выглядит так:
Мы максимально порезали обработчики, оставив только необходимый минимум. С оптимизацией на клиентской части нам здорово помог инструмент Timeline из Google Chrome Developer Tools.
Исходно все элементы хранятся в объекте FIELDS — у каждого есть типовой HTML-шаблон и список опций. После перетаскивания элемента в рабочую область, нужные опции прилетают с сервера и подставляются в шаблон — например, на кнопку навешены отправка информации о заказе владельцу и клиенту: по почте через наш сервер, либо по смс — пока через API SmsSimple, но мы ищем другой сервис (и будем рады рекомендациям).
Чтобы подставлять опции, к прототипу строки мы написали свой метод Signe. Работает он так:
При этом мы стараемся защититься от вставки исполняемых кодов в шаблон: прежде всего на стороне сервера удаляются теги <скрипт>, а основная защита построена на экранировании спецсимволов + эскейп тегов.
Drag’n’drop по-своему. Идея «бери больше — кидай дальше», на наш взгляд, это самый удобный способ сборки чего бы то ни было для обычного пользователя. Ну хотя бы потому, что красиво.
Когда мы рассматривали существующие решения для создания калькуляторов, в них смущала некая «прибитость элементов гвоздями» — факт, что элементы можно расположить довольно строго определенным образом: например, только друг под другом, а не рядом. Хотелось уйти от этого, для чего мы придумали систему точек.
Cетка невидимых пользователю точек
Перед перетаскиванием нового элемента мы формируем карту точек, в которые можно добавить новое поле — для этого скрипт обращается ко всем элементам рабочей области и оценивает их границы.
Что это дает? Пользователь сразу может выбрать между таким:
И вот таким вариантом расположения элемента:
При движении мы постоянно проверяем, находится ли мышь над калькулятором, а под капотом запоминаем тип перетаскиваемого поля и позицию, в которую нужно его бросить.
Перетаскивание элемента само по себе не затрачивает много ресурсов браузера, однако проверка того, куда прицелился пользователь, прямо зависит от количества полей, которые уже добавлены в калькулятор. Чтобы сэкономить ресурсы браузера, мы стали определять только координаты полей, которые находятся рядом с мышью, и выявлять ближайшее к ней поле:
Для создания самих визуальных эффектов при сборке калькулятора мы использовали jQuery UI и Animate.css
Абстрагируемся от системы мер и весов. Поскольку решение хотелось сделать универсальным и простым, мы отказались от дополнительных полей, в которых при создании калькулятора человек бы выбирал метры, граммы или рубли. Условные обозначения можно вписать — но чисто для удобства и ориентира. Для всех текстовых элементов мы использовали движок Medium Editor – очень удобный и простой текстовый редактор.
Чтобы доказать, что конструктор подходит для чего угодно, мы наделали разных примеров. А один из примеров наделал шума среди первых тестеров:
«Шаблон «расчет количества мяса» — просто убил: по картинке понятно, что шашлык, а по градациям — такое впечатление, будто из всех этих людей собрались шашлык делать) Ржали всем отделом».
Пощупать калькулятор-шаблон, который развеселил целый отдел, можно здесь
Картинки — это важно. Для лучшего знакомства с товаром или услугой логично добавить изображения над теми же галочками или иным полем, отвечающем за выбор. Благодаря сетке точек, получилось реализовать вставку картинки в любую область рабочего поля. Иногда это полезно:
За тему с ёлочками спасибо Владимиру Гынгазову, автору канала “Adobe Muse по-русски”
Сама реализация загрузки картинок сделана через FileSystem API&File API — весь процесс отлично описан в этой статье.
«А поиграться с…?» Логично дать пользователю возможность подстроить цвета текстов, кнопок, фона и т.д. под цвета сайта. Для вызова и создания цветовой палитры мы использовали виджет Spectrum.
Хранение данных и автосохранение. Данные о клиентской части калькулятора хранятся в формате JSON. Вы можете увидеть их структуру, просто написав в консоли SAVER.json на сервисе.
Автосохранение происходит при каждом действии, если в калькуляторе есть активность. Изменения параллельно сохраняются и в DOM, причем каждый раз мы проверяем:
- Есть ли в JSON все данные из DOM.
- Есть ли в DOM все данные из JSON.
Если же в пределах 4 секунд ничего не происходит, калькулятор останавливает автосохранение до новых правок — так мы избавляемся от бессмысленных запросов к серверу.
Превью. Чтобы не затрачивать ресурсы браузера клиента, мы решили не анимировать интерфейс предпросмотра с помощью jQuery — поскольку с анимацией отлично справляется и CSS3: достаточно поменять класс в корне интерфейса, и у области просмотра изменится ширина и наружное оформление, стилизованное под смартфон и планшет.
Внимание на консоль
Само создание адаптивной версии калькулятора стало отдельной песней.
В конструкторе сайтов uKit, для которого исходно создавался наш проект, используется сетка Twitter Bootstrap — популярное и заслуженное решение, чтобы адаптировать веб-элементы под экран посетителя. Но бутстреп предполагает два варианта дизайна: таблицу или колонку. Поэтому мы разработали собственный вариант адаптации калькулятора.
Т.к. структура калькулятора хранится в JSON, у нас есть родительский массив со строками, а в каждой строке — массив ячеек. Помимо этого, в ячейке есть массив суб-строк (и суб-ячеек), чтобы внутри было не одно поле, а несколько. Структура ячеек показана ниже:
У калькулятора есть родительский блок со стилем display: table, внутри у него есть table-row и table-cell, соответственно. Сам калькулятор отрисовывается на сайте во фрейме. Внутри фрейма размещены стили для адаптации — и когда фрейм становится достаточно узким, калькулятор без изменения HTML-сетки перебрасывает поля на новые строки. Сделано это с помощью изменения стиля display: если на широком калькуляторе это table-cell, то на узком становится block, и наше поле оказывается на новой строке.
Исходно-десктопный вид калькулятора зависит от ширины контейнера, в котором он находится, а калькулятор стремится показать в одной строке как можно больше полей. При сужении экрана функция, которая перестраивает сетку, проходит по всем строкам калькулятора, и если в строке есть «лишние» ячейки, ниже создается новая строка.
- Если сам сайт с калькулятором адаптирован под мобильные устройства, контейнер с калькулятором будет занимать всю ширину устройства без масштабирования.
- Если же сайт не адаптирован под мобильные устройства, калькулятор будет отображаться в меньшем масштабе — а его вид повторять вид для ПК.
Аналогично и в редакторе: когда пользователь меняет ширину своего проекта, перед ним отображается фрейм с копией его калькулятора. Как только ресайз завершен, под фреймом рисуется новая сетка, фрейм незаметно для пользователя скрывается — и можно продолжать работу с полями и формулами.
Так как у нас есть полноценный кабинет управления калькулятором, мы решили отказаться от использования чего-то внешнего и экселеподобного, а в идеале — и сложных формул при создании и редактировании форм.
Вместо этого всего в отдельной вкладке есть элементы калькулятора в виде схемы. Схема содержит названия переменных и диапазоны значений для каждого из элементов калькулятора.
Чтобы задействовать какое-то поле в расчете, достаточно указать его переменную в окошке слева. Формул может быть несколько: в этом случае в калькуляторе отображается несколько результатов, например “Обычная цена” и “Цена со скидкой”.
Переменные начинаются с буквы “A”. Если полей больше, чем букв в латинском алфавите, к имени переменной добавится еще одна буква: “AA” и так далее. Каждая буква связана с числовым id конкретного поля в калькуляторе. Найти готовое решение для преобразования числа в латинские буквы и комбинации букв нам не удалось. Поэтому мы написали следующий метод:
DAT.varName(9) // I
DAT.varName(39) // AM
DAT.varName(9650215) // UCALC
Будем рады, если он вам пригодится (с вопросами можно стучаться к condor-bird).
Чем дальше, тем больше мы занимались интерфейсом сервиса. Но конечная цель — чтобы человек не только собрал у нас свой калькулятор, но и поставил его к себе на сайт в виде виджета (хотя можно и опубликовать калькулятор по ссылке и использовать в каком-нибудь соцсети).
То есть, пора было отрезать ломоть калькулятор от сервиса. Встал выбор между двумя путями:
Быстрым. В том же превью грузится виджет калькулятора — можно скрыть все элементы интерфейса конструктора, оставив поля, сетку и калькулирование — и вот он, по сути, виджет для стороннего сайта.
Но быстрый путь был отвергнут — потому что он замедлял загрузку: мы получили бы 1959 килобайт, 269 из которых заняли бы все CSS-ки, используемые в сервисе. А ведь одно из главных требований к виджету на сайте — чтобы он грузился быстро.
И правильным. Тут мы пошли к GULP — чтобы обрезать все лишнее, вроде переноса строк, и собрать один минифицированный файл с максимально чистым кодом. Почему GULP? На то есть важная причина — у нас был 41 файл (и, соответственно, 41 запрос к серверу), а мы хотели уместить все в один запрос. И мы получили то, что хотели.
Это наш дефолтный шаблон. Была скорость загрузки курильщика
Стала скорость загрузки здорового человека
Теперь мы оставляем от 140 до 180 килобайт — в зависимости от числа полей. Для каждого типа поля есть две версии: короткая и вдвое короче — для стороннего сайта.
А что насчет скорости исполнения скрипта, спросите вы?
Это огромный калькулятор расходов на свадьбу, созданный реальным пользователем. Было так.
Тот же проект. Стало так
Как видно на картинке ниже, самым тяжеловесным остается текстовое поле — его мы будем оптимизировать дальше, отдавая на сайт только опцию, которую выбрал пользователь (в настройках поля есть выбор между телефоном, почтой, текстом, числовым значением и т.д.). В остальном для каждого калькулятора мы подключаем только используемые модули.
После загрузки на стороннем сайте калькулятор больше не обращается к нашему серверу: все формулы и прочее необходимое зашиты в загруженный на сайте код.
В идеальном случае пользователь собрал калькулятор, получил код для встраивания на сайт — и наступило счастье.
Но установка на сайт не всегда значит, что человек больше не будет трогать готовый калькулятор. Самый очевидный случай, когда требуется внести изменения, — это рост или снижение цены на услугу.
Поэтому для каждого встроенного калькулятора мы делаем две версии:
- Опубликованную — ту, что непосредственно встроена на сайт.
- Редактируемую — ту, которую можно открыть и начать править в личном кабинете.
Именно для этого в системе присутствует большая зеленая кнопка «Сохранить» — пока вы её не тронули, мы не переносим на сайт изменения, сделанные в версии для редактирования, а просто запоминаем их через автосохранение.
habr.com