Калькулятор - числа с запятой/точкой

[laimas]

не всё мне в коде понятно

О логике кода я писал много, а по конкретике, это почитать о функциях jQuery. Что не понятно?

При вводе размеров будь то в миллиметрах или метрах - в результате я хотел бы иметь метры квадратные

Тоже не проблема. Я не буду приводить html код, только JS. Так как выводит квадраты как '²' или '.кв', это для любых единиц измерения, то данную опцию внесем из объектов массива dim в переменную sqr. Свойство mul этих объектов теперь будет выполнять иную роль - корректировать рассчитанные площади до метров кв.

Добавим единицами измерения и сантиметры. Это исключительно для примера, и можно не применять, думаю понятно будет как. Когда было две единицы, то было просто, а если три, то нужно запоминать текущие единицы, чтобы корректно преобразовывать значения в полях для выбранных единиц. Запоминание текущих единиц в переменную dir производится в момент нажатия мыши на копки выбора единиц (значения выбранной кнопки). В время смены единиц из запомненных единиц и выбранных формируется строка, по которой как свойству объекта mul получается множитель на который производится коррекция значений в полях ввода.

Код кнопок управления такой:

<label><input type="radio" name="unit" value="0" checked="" /> метры</label>
<label><input type="radio" name="unit" value="1" /> сантиметры</label>
<label><input type="radio" name="unit" value="2" /> миллиметры</label>

Расчеты прямоугольников, треугольников и ... вынесены в функции.

function rectangle(a, b) {
    return a * b
}

function triangle(a, b) {
    return a * b * .5
}

function trapeze(a, b, c) {
    return (a + b) * c * .5
}

function calculate(g, v) {
    var a, b;
    switch(g) {
        case 'rectangle': a = rectangle(v[0], v[1]), b = rectangle(v[2], v[3]);
                          return [a, b, a && b ? (a + b) * 2 : 0];
                          break;
        case 'triangle':  a = triangle(v[0], v[1]), b = trapeze(v[2], v[3], v[4]);
                          return [a, b, a && b ? (a + b) * 2 : 0];
                          break;
        case 'pyramid':   a = triangle(v[0], v[1]), b = triangle(v[0], v[2]);
                          return [a, b, rectangle(v[1], v[2]), a && b ? (a + b) * 2 : 0];                    
    }   
}

$(function() {
    var dir, //предыдущее состояние единиц измерения
        sqr = '²', //символ кдаратных значений
        mul = { //множетели единиц измерения для полей ввода в зависимости от предыдущего и нового состояния
            '01': 100,
            '12': 10,
            '02': 1000,
            '10': .01,
            '21': .1,
            '20': .001    
        },
        dim = [{unt: 'м', dec: 2, mul: 1}, {unt: 'см', dec: 0, mul: .0001}, {unt: 'мм', dec: 0, mul: .000001}],
        side = $('input:text')
        .on('keyup', function() {
            this.value = this.value.replace(/[,\.]+/,'.').replace(/[^\d.]/,'');
            
            var u = unit.filter(':checked').val();
            
            //расчет площадей для всех заполненных полей
            $('[data-area]').each(function() {
                //группу определяет атрибут data-area    
                var group = $(this).data('area'),
                    values = $.map(side.filter('.'+group), function(e) {
                        var v = parseFloat(e.value);
                        return v || 0
                    }),
                    area = calculate(group, values);
                
                $(this).find('.area').each(function(i, e) {
                    $(e).text(
                        //вывод площадей в метрах
                        area[i] ? (area[i] * dim[u].mul).toFixed(2) + ' м' + sqr : ''   
                    )
                })
            })
    }), 
    unit = $('input:radio')
        .change(function() {
            var u = this.value, //выбранные единицы измерения 
            d = dir + u; //множитель единиц в зависимоти от прежнего их состояния
            $('.unit').text(dim[u].unt); 
            side.val(function() {
                var v = parseFloat(this.value); 
                if(v) return (v * mul[d]).toFixed(dim[u].dec) 
            }).trigger('keyup');
    })
    .parent() //получить родителей - label
    .mousedown(function() { //запомнить текущие единицы измерения при нажатии мыши на label
        dir = unit.filter(':checked').val()
    }).end(); //вернуться к кнопкам radio 
});

Интересная комната, на крышу похожа. Может быть для такой конфигурации иметь высоту до конька и высоты для сторон рассчитывать, а не вводить для каждой? Ведь "на глазок" ввести значение чтобы все срослось не трудно ли будет?

[MC-XOBAHCK]

Да, Вы правильно поняли - это крыша. Я в 28-ом посте делал примечание что для удобства понимания заменил крышу комнатами (чтобы не распугать помощь форума). Теперь я понял что коньками с ендовыми вас не запугать : )
Навсяк случай скажу что проект некоммерческий и в калькуляторе НИКОГДА НЕ БУДЕТ денежных единиц измерений. Я не коммерс, крыши моё хобби.
Что касается высот, то пока такой расчёт не намечается. Через высоты можно отдельный собрать калькулятор для создания проекта крыши, где за исходные данные брать коробку дома и высоты. Возможно через года два у меня будут знания чтобы реализовать подобное с визуализацией проекта.
А пока первая цель - площади для типовых крыш.
В размерах я делаю варианты отталкиваясь не только от высот скатов, но и просто по сторонам скатов крыши (более удобно для обывателя), где вся арифметика идёт через полупириметры.
Изначально я себе ставил срок сделать калькулятор до Нового Года, но Вы мне всю логику собрали. Осталось малость - внести формулы, сделать раскладки скатов с указаниями для вводимых размеров и общие планы крыш + вёрстку оформить, чтобы удобно было под все типы устройств.

Второй целью стоит расчёт кровельных материалов согласно выбранного покрытия. Там уже сложность в том что их очень много и у каждого свои модели, размеры, вес, комплектующие и т.д. и т.п. Собрать их все и вбить - очень нудноватая работа. Но зато я эту тематику знаю достаточно хорошо и знаю все ньюансы. Поэтому вторая цель вполне достижима и почему бы не прийти к ней.


Спасибо за новую версию с функциями - я в ней понимаю куда добавлять новые фигуры и как делать расчёт. Сейчас начну собирать всё в единый калькулятор.

[laimas]

Что касается высот, то пока такой расчёт не намечается.

Дело хозяйское, но может я чего и не понимаю, но как угадать высоту смежного ската.... Вообще-то многие стороны уже автоматом можно просчитать (при воде других), единственное останется указать основание стороны. В общем геометрия в помощь.

А вообще при сложной конфигурации крыши такой калькулятор будет неудобен, слишком длинная портянка получится. Тут нужен интерактивный - щелкнули мышью по любому скату, появились поля ввода его параметров. Ввели параметры, расчет, и скат подсвечивается, при этом подсвечивается и противоположный равный ему скат. При наведении мыши на такие скаты форма появляется с ранее введенными параметрами и расчетом. Для смежных скатов, у которых стороны при этом будут рассчитываться автоматически, форма будет так же отображать автоматом рассчитанные параметры, останется ввести оставшиеся.

Примерно так, иначе сложно будет охватить сразу все.

[MC-XOBAHCK]

Я с вами согласен полностью и по смежным сторонам и во всём остальном. Я прекрасно понимаю эту логику. Но я адекватно отталкиваюсь от своих возможностей и знаний в программировании. На данный момент они у меня самые минимальные: я только начинаю осмысленно читать код, но ещё не могу его писать. А то что Вы предложили - это цель ради которой я изучаю javascript.
Как написано в вступлении сайта - жаль что времени очень мало... Я сутками напролёт неотрываясь сижу и буду сидеть ещё несколько месяцев только за javascript. Вот нашёл хорошую поляну для обучения и форум. Здесь в учебнике лучше чем на ютубе. Сейчас решаю самые простые задания из учебника сайта - мне нужно научиться начать писать код, а не только читать. Вы мне и так помогли во многом уделив на меня своё время. А злоупотреблять вашим вниманием на свои просьбы сделать вместо меня это и то, для меня сейчас неуместно. К вам как к профи можно будет в будущем обратиться, если у меня возникнут проблемы. А попадать к вам в игнор из за постоянных просьб с решениями я не хочу. Вы мне и так очень сильно помогли и я этим дорожу.

[laimas]

Но я адекватно отталкиваюсь от своих возможностей и знаний в программировании.

Ну тут знание геометрии скорее всего нужно, чтобы определять автоматом смежные стороны. С программной же точки зрения в этом может помочь image map, посредством которого на изображении можно определить "горячие области", которые как и любые элементы могут иметь события и стили. То есть, посредством их каждый скат крыши можно сделать активным, щелчок по которому и будет вызывать то, что я описывал. А это означает, что за каждым скатом можно закрепить объект, который будет описывать введенные для ската размеры.

Есть онлайн редакторы image map, добавить для изображения карту будет не сложно.

[MC-XOBAHCK]

Круто Вы меня пнули в image map, а главное во время. Признаюсь - не знал. Для меня это будет очень полезно не только в плане калькулятора. Я бегло ознакомился, теперь постараюсь нагуглить толковый работающий онлайн редактор и изучить более подробно сам принцип.
С геометрией у меня всё отлично - ручаюсь. Что такое высоты и как их применять я знаю. Вы уж простите, но пока я их в расчёты не беру. А вот построить луч (угол) на их значениях, чтобы он прорисовывался с нужным градусом - буду реализовывать как только натолкнусь на решение. Догадываюсь что это линии нужно рисовать в css и при помощи javascript задавать координаты. Но это пока только мИсли : )

Ещё сегодня успел бегло ознакомиться с библиотекой jQuery UI. Есть в ней Droggable и Droppable. Может подскажите - можно ли на их основе реализовать задумку "онлайн конструктор", чтобы имея шаблонные макеты скатов пользователь из них собирал свой произвольный комплект. Допустим если нет типового калькулятора, чтобы можно было произвольно из шаблончиков (заданных форм) собрать свой комплект.
Или это я протупил с такой идеей?

[laimas]

А вот построить луч (угол) на их значениях, чтобы он прорисовывался с нужным градусом - буду реализовывать как только натолкнусь на решение. Догадываюсь что это линии нужно рисовать в css и при помощи javascript задавать координаты.

Ну зачем что-то рисовать? Выбрали скат, указали ему размеры, противоположный скат также уже будет с размерами, и на карте изображения они отмечены как определенные. Если теперь выбрать скат прилегающий своими двумя сторонами к ним, то скриптом можно знать, что смежные с ним скаты имеют размеры, значит нужно получить только размер основания. После указания этого размера будет известна высота крыши до конька, и высота этого ската (медиану треугольника) скрипт может рассчитать автоматически. И т.д. для всех скатов.

Тем более такой подход "без рисования" как раз и вписывается в концепцию конструирования по заданным шаблонам. Что конечно можно сделать, причем и без jQuery UI в современных браузерах. Но если меньше парится, то jQuery UI.

[MC-XOBAHCK]

Я извиняюсь, совсем мутно написал. Я имел в виду отдельный калькулятор вычисляющий уклон крыши. По сути это прямоугольный треугольник который лежит на одном катете (горизонтально) - это заложение. Второй катет (вертикально) - это высота крыши (или разность высот между коньком и карнизом). Гипотенуза - это луч (скат крыши) определяющая уклон.
Размеры катетов задаются в инпутах пользователем. В результате выдаются: угол, наклон (i) и подходящие кровельные покрытия для этого уклона.
В посте выше я имел в виду визуализацию угла, чтобы отобразить его на мониторе.

Толковый редактор image map нашёл. Как снимать координаты понял. Сейчас определюсь как связку делать и буду тестить.

[laimas]

Я имел в виду отдельный калькулятор вычисляющий уклон крыши.

Не знаю, вам виднее, но не понятно зачем несколько калькуляторов для расчета склонов. Все правильно, застройщик основным параметром крыши выберет ее высоту. Если она конструктивно простая, то зная размеры основания ее, а они будут привязаны к потолку застройки, нужно указать еще только длину конька. Все остальное можно рассчитать по этим параметрам, включая конечно и площади скатов.

То есть, по уму на плане крыши должны быть области, размеры которых нужно обязательно задать, все остальное будет рассчитываться автоматически. Это похоже на 3D моделирование, в котором изначальная модель, это треугольный брус с дополнительными вершинами на вертикальных сторонах, например если нужна будет "горбатая" крыша. Двигая вершины и грани этой модели можно создавать более сложные. При этом все параметры модели будут рассчитываться автоматически, тут уж чистая геометрия.

[MC-XOBAHCK]

Где то накосячил, не пойму в чём. Ошибки в консоле нет, но результата площади тоже нет.
Теперь изменился тип фигуры: четыре разные трапеции.
В функцию calculate(g, v) добавил две новые переменные: c, d;
В case 'g_roof' прописал через обращение к function trapeze(a, b, c)

<div class="row plos g_roof">
            <div class="col-sm-4">
                <h4>Скат 1</h4>
                <div class="st1">Основание (карниз):</div>
                <div class="st2"><input class="g_roof" /><span class="unit"> м</span></div>
                <div class="st1">Верх:</div>
                <div class="st2"><input class="g_roof" /><span class="unit"> м</span></div>
                <div class="st1">Бок (высота):</div>
                <div class="st2"><input class="g_roof" /><span class="unit"> м</span></div> 
        </div>
</body>

Так же с image map тёмный лес. Перерыл через поиск весь форум и учебник - инфы минимально, только скользкие упоминания. Гугл тоже уводит в ненужном направлении. Может подскажите по каким поисковым запросам нужно рыть? Так как для меня это новое, все мои построения поисковых фраз приводят к одним и тем же результатам.

Пока у меня только картинки с координатами есть.
Координаты для скатов:

<img src="https://goo.gl/6pD9hJ" alt="Фигура" usemap="#Map" />
    <map name="Map" id="Map">
        <area alt="скат 1" title="" href="#" shape="poly" coords="13,10,238,9,239,55,60,55" />
        <area alt="скат 2" title="" href="#" shape="poly" coords="60,55,239,54,239,100,104,100" />
        <area alt="скат 3" title="" href="#" shape="poly" coords="60,55,103,97,104,160,60,160" />
        <area alt="скат 4" title="" href="#" shape="poly" coords="13,10,60,55,60,160,13,160" />
    </map>