Онлайн конструктор шкалы прибора

[soulmare 2]

Может, кому-то пригодится простой онлайн конструктор шкалы прибора, позволяющий в браузере по заданным параметрам сгенерировать шкалу с делениями и цифровыми метками. Собственно, вот он: http://shopcms-moduli.com/scale_constructor/scale_constructor.php

Чтобы сохранить шкалу как рисунок, можно сделать скриншот, и потом в графическом редакторе дорисовать или подправить что нужно.

Программа делалась за вечер, для собственных небольших потребностей, ради которых не хотелось устанавливать профессиональные векторные пакеты вроде CorelDraw. Скрипт полусырой, но может быть при желании и умении пользователя доработан - исходник прилагаю.

Лично у меня остались такие нерешенные в скрипте проблемы:

• шкалы с нелинейным изменением
• точная подгонка делений под снятый с показателей прибора шаблон

Это все реализуемо, но простого способа не придумал, а сложные займут слишком много времени, которое неизвестно когда появится.

scale_constructor.source.zip

[Adver 256]

[mvkarp 3 757]

1 час назад, soulmare сказал:

можно сделать скриншот

Скрин не дает необходимой четкости. Это будет минусом программы.

Загляните еще сюда. Может, натолкнет на какую мысль для доработки Вашей программы.

[Adver 167]

JLCPCB — 10 плат всего за 2$ + 2 дня время изготовления

Крупнейший Китайский производитель печатных плат - 300 тыс. заказов для 10 тыс. заказчиков каждый день

Онлайн расчет на JLCPCB.com

Смотрите видео о фабрике JLCPCB: https://youtu.be/_XCznQFV-Mw

[soulmare 2]

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

[1YHAIhwx 3]

Что на Земле мешает сделать функцию сохранения изображения? Кроме того, размеры указываются в пикселях, что совсем неудобно, когда потребуется эту шкалу напечатать и на прибор наклеить. Аналогично с линиями. Отталкиваться можно от стандартных разрешений принтеров - 600 - 720 dpi.

Если целью ставился не академический интерес поупражняться в php, можно вообще интерактивную рисовалку на JavaScript запилить.

Quote

шкалы с нелинейным изменением

Увеличивать угол не линейно, но логарифмически?

Quote

Скрин не дает необходимой четкости.

Если сохранялось в jpg, неудивительно.

[Adver 167]

Найдите миллионы труднодоступных

электронных компонентов

[Dr. West 3 128]

Дело не в jpg, а в том, что картинка строится и сохраняется с экранным разрешением (72-96 dpi), что сводит на нет все возможности принтера. У того же Старичка картинка 600 dpi и никаких проблем с тонкими линиями нет.

зы. Гнаться за микронной точностью и 100500 делениями не имеет смысла, т.к. сами стрелочные приборы высой точностью не отличаются, как и линейностью.
Плюс к тому, бумага непредсказуемо меняет свои геометрические размеры после прохода через печку принтера и в процессе приклеивания.

Изменено 1 октября, 2017 пользователем Dr. West

[soulmare 2]

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

Изменено 1 октября, 2017 пользователем soulmare

[Adver 795]

[soulmare 2]

В 9/30/2017 в 21:56, 1YHAIhwx сказал:

 

Цитата

шкалы с нелинейным изменением

Увеличивать угол не линейно, но логарифмически?

Даже не знаю, логарифмическая или какая характеристика у таких приборов - например, вот такая шкала амперметра, где до 2 ампер относительно узкий угол делений, между 2 и 6 - широкий, и дальше снова узкий. Если есть здесь одинаковая закономерность у такого типа приборов - логаримическая или другая - можно ее реализовать в коде программы. Но если для каждого прибора свои характеристики - тут разве что делать фото шаблон, и как-то пихать это изображение в программу как полупрозрачную подложку шкалы, чтобы подгонять углы делений.

 

Изменено 2 октября, 2017 пользователем soulmare
уменьшение фото

[Dr. West 3 128]

Эту нелинейность пытаются конструктивно компенсировать, поэтому вывести универсальную формулу расчета для таких шкал вряд ли получится.

Цитата

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

 

[soulmare 2]

Конструктор шкалы прибора - первая полноценная версия

Только что выложил 2-ю (0.2) версию на сайт, доступна по адресу http://shopcms-moduli.com/scale_constructor/ . Исходный код во вложении. Хотел было вообще отказаться от PHP, чтобы можно было сохранить страницу у себя на компьютере и пользоваться программой без доступа к интернет. Но не вышло - PHP нужен для прописки в файле правильного разрешения при печати. Кстати, у меня дома не все программы берут к сведению значение разрешения из файла - иногда приходится вручную в диалоге печати указывать ширину изображения в миллиметрах. Поэтому при скачивании файла он именуется в виде "scale_ШИРИНАxВЫСОТА_РАЗРЕШЕНИЕ.png" - чтобы из названия файла было понятно, как его печатать.

Программа тестировалась в браузерах Chrome и Firefox. Буду признателен за сообщения об ошибках - кроме описания ошибки желательно присылать ссылку на страницу, где была ошибка, и название-версию браузера. Также приветствуются любая помощь, предложения и критика

Шаблоны для измерительных головок взял из рисовалки шкал автора Starichok , за что ему и разработавшим шаблоны большое спасибо.

scale_constructor.v0.2.zip

 

Известные проблемы:

Скрытый текст

- размещение изображения не по центру по вертикали при предварительном просмотре

- автомасштаб не всегда полностью умещает изображение в область просмотра

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

- особо большие файлы не скачиваются, выводя белый экран

 

Изменено 2 октября, 2017 пользователем soulmare
список багов

[soulmare 2]

А вот насчет квадратичной характеристики шкалы - не знал, это интересно. Универсальную-то формулу не придумаешь, но вполне можно сделать гибко настраиваемую - ведь подвинуть или искривить график, это лишь значит изменить в каком-то месте формулы коэффициент. На самом деле, шкала прибора из фотографии которую я прикреплял, очень похожа на график y=x² , разве что может не симметричная.

[1YHAIhwx 3]

Уже лучше.

Quote

Эту нелинейность пытаются конструктивно компенсировать, поэтому вывести универсальную формулу расчета для таких шкал вряд ли получится.

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

Сценарий: пользователь имеет непроградуированный прибор и хочет для него нелинейную шкалу. Выполняет измерение прибором, записывает угол, переносит в редактор.

Quote

Но не вышло - PHP нужен для прописки в файле правильного разрешения при печати

Можно не записывать разрешение в заголовок png, но отталкиваться от размера бумаги формата А4 и стандартных разрешений принтеров. Кроме того, для работы с png уже есть либа png.js, не знаю, может ли она в правку заголовков, правда. Но это привяжет приложение к формату png.

Багрепорты:

- подвал поехал, см. рисунок. (Firefox 54.0)

Фич-реквесты:

- линию отреза выполнять тонким курсивом, чтобы не перепутать эти линии с линиями маркировки. Из приложенного рисунка неясно, следует ли обрезать ушки у квадратика или нет.

[soulmare 2]

14 часа назад, 1YHAIhwx сказал:

Можно не записывать разрешение в заголовок png, но отталкиваться от размера бумаги формата А4 и стандартных разрешений принтеров.

К сожалению, при выводе такого "сырого" изображения, принтер всегда решает его печатать в разрешении 72ppi, что есть очень плохо. И даже сам уменьшает это число, если картинка не влезает в формат бумаги. Если же генерировать изображение, исходя из 72ppi - оно будет печататься в правильном размере, но нечетко, кубиками - потому что нужно хотя бы 300ppi для нормального качества.

Технические проблемы (JavaScript, PHP, PNG):

Скрытый текст

Размеры результирующей картинки в пикселах вычисляются скриптом, исходя из требуемого при печати разрешения, например 300ppi. Принтер не находит в метатегах файла ничего о его физическом размере в миллиметрах, потому что встроенная JavaScript функция HTMLCanvasElement.toDataURL(), генерирующая бинарный код в формате PNG (единственный возможный формат), не прописывает такой информации в файле - ни физических размеров, ни разрешения - ничего. И печатает файл в разрешении 72ppi, если только позволяет размер бумаги.

Начитавшись инфы по теме, было решено отправлять файл на сервер, где PHP пропишет нужный заголовок (разрешение=300ppi), и отправит файл назад юзеру, что и было сделано. Но оказалось, что 4 строчками кода можно обойтись только при наличии на хостинге библиотеки ImageMagick, или же PHP версии >= 7.2.0, чего в моем случае не оказалось. Поэтому пришлось разбираться в том, как устроены заголовки PNG и решить проблему "в лоб" - сгенерировать двоичный код метатега pHYs (информация о физическом размере картинки), и вставить его в нужном месте файла. Обычно на хостингах действуют строгие ограничения на размер загружаемых файлов и используемую память, которые не всегда можно изменить в скрипте. Из-за этого получаем белый экран при попытке отправить на сервер очень большое изображение.

Указанная библиотека png.js, насколько я понял, не умеет менять метаданные изображения, и занимается лишь перекодированием файла в массив пикселей. С другой стороны, в ее коде есть разбор некоторых заголовков PNG. И это меня натолкнуло на идею: перевести процедуру вставки метатега с PHP на JavaScript "строка в строку" - и тогда абсолютно все будет делаться в браузере, и не понадобится наличия соединения с интернет для работы с программой. Предстоит проверить, реализуемо ли это на практике, ведь обрабатываемое изображение может иметь размер в несколько мегабайт.

 

Изменено 3 октября, 2017 пользователем soulmare

[soulmare 2]

Представляю новую версию данной  программы для создания шкал аналоговых приборов: https://soulmare.github.io/scale_master/

Возможности:

• неограниченное количество шкал для одной стрелки
• настройка делений и меток как группами, так и по отдельности
• выделение секторов цветом
• изменение положения, прозрачности, цвета и других параметров элементов изображения
• наложение растровых изображений - для работы по сканированному шаблону, или декорации шкалы готовыми шильдиками
• экспорт шкалы в SVG
• загрузка родных SVG файлов для редактирования
• экспорт в PNG для печати
• библиотека примеров

Требования: достаточно новая версия браузера Chrome или Firefox. Пока что не тестировались Internet Explorer и Opera.

Краткая инструкция:

Скрытый текст

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

Интерфейс программы напоминает векторные графические редакторы. Слева находится список объектов с кнопками для управления ими. Порядок объектов в списке влияет на их перекрытие при наложении друг на друга. При выборе объекта вокруг него появляется рамка, а справа отображается список свойств. Если рабочая область в фокусе, стрелки клавиатуры двигают объект. Изменение масштаба - прокруткой колесика при зажатой клавише Ctrl.

Готовую шкалу можно скачать в удобном формате. SVG подходит, если изображение потом нужно загрузить в векторный графический редактор для доработки. Только этот формат является родным для программы, и такой файл можно будет в нее снова загрузить для редактирвоания. PNG подходит для печати или обработки растровыми редакторами. Чтобы распечатать шкалу в соответствии с выбранным размером, нужно чтобы совпадало разрешение экспорта с разрешением при печати. Это может быть, например, 300ppi (dpi). Если изображение занимает весь лист, возможно понадобится убрать поля для правильного масштаба.

 

 

 

Изменено 27 октября, 2017 пользователем soulmare

[soulmare 2]

Вышла новая 0.4 версия конструктора шкал. Самое главное, что добавилось - это редактирование шкалы мышкой, перетаскиванием делений и других объектов.

Подробнее смотрите в видео примерах:

1. Самая простая шкала

2. Простая шкала по шаблону (скану или фото)

3. Шкала с неравномерно распределенными делениями, на примере амперметра

Полный список изменений в новой версии:

Скрытый текст

        ГЛАВНЫЕ ИЗМЕНЕНИЯ
    - Редактирование и перемещение элементов перетягиванием мышкой.
    - Настройка углов делений мышкой или изменением цифрового параметра, с автоматическим распределением соседних незакрепленных делений.
        ОСТАЛЬНЫЕ ИЗМЕНЕНИЯ
    - Выделение основных делений 2 и 3 уровня - длиной, толщиной и цветом.
    - Параметр "Экспонента" для настройки "квадратического" распределений делений.
    - Новые примеры со скриншотами и объяснениями принципов работы программы.
    - Кроссбраузерность: Chrome/Firefox/Opera
    - Отображение вспомогательных осей при выборе объектов.
    - Параметр "Постоянный угол" с тремя режимами (позволяет делать горизонтальный текст меток, вертикальные деления).
    - Возможность создавать угловые шкалы (например, повернутые на 90 градусов).
    - Вставка специальных символов в текстовые метки (например: Ω, ∞).