Моя "Доминикана" или Я и Рафаель

29.11.16

Разработка - Работа с интерфейсом

Хотите рисовать в 1С современную графику с HTML5? Предлагаю реальный метод, работающий в толстом, тонком и web-клиенте 1С 8.2 и 8.3.

Скачать файлы

Наименование Файл Версия Размер
raphaeljs.epf
.epf 84,61Kb
158
.epf 84,61Kb 158 Скачать

Доброго времени суток!

Привет 'Доминикане' в Тайланде (//infostart.ru/dominikana/) из пыльной и грязной Москвы.

Мы тут тоже под кондиционерами работаем и откопали очень интересную вещь, а именно библиотеку для рисования графиков  http://sikuda.ru/raphaeljs.com и http://sikuda.ru/g.raphaeljs.com/docs/reference.html). Она примечательна тем, что совместима с очень старыми версиями IE. В 1С до сих пор используется старый движок. А нам бы хотелось, чтобы наши наработки работали везде - в толстом, тонком и web-клиенте. Метод этой библиотеки достаточно прост. Рисуем c помощью SVG, а если движок старый(1С) применим старый движок Microsoft VML. Таким образом получаем полную совместимость кода javascript.

Видео с разработчиком:

http://events.yandex.ru/events/yac/2012/talks/371/

Смотрим – нравится. Есть поле для изменения кода на javascript, начнем экспериментировать…

Примеры кода для экспериментов:

Пример 1: Начало.

// Creates canvas 640 × 480
var paper = Raphael(0, 0, 640, 480);

// Creates circles 
var circle1 = paper.circle(100, 240, 100);
var circle2 = paper.circle(540, 240, 100);

// Sets the fill attribute of the circle
circle1.attr("fill", "#f00");
circle2.attr("fill", "#00f");

Пример 2: Анимация

var paper = Raphael(0, 0, 400, 400);
var attr = {
                fill: "yellow",
                stroke: "red",
                "stroke-width": 1,
                "stroke-linejoin": "round"
            };
rect1 = paper.path("M 100 100 L 200 100 L 200 0 L 100 0 z").attr(attr);
rect1.transform("s0.1,1,100,0").animate({transform: "s2, 1, 100, 0"}, 1000, "swing");
Пример 3: События 
var paper = Raphael(0, 0, 400, 400);

var attr = {
                fill: "yellow",
                stroke: "red",
                "stroke-width": 1,
                "stroke-linejoin": "round"
            };
  tr1 = paper.path("M 100 100 L 300 100 L 200 300 z").attr(attr);

 // draw a circle at coordinate 10,10 with radius of 10
var c = paper.circle(100, 100, 100);
c.attr("fill", "red");
c.node.id1c = "круг";

c.node.onclick = function () {
   color = Raphael.getColor();
   c.attr("fill", color);
};
c.node.onmouseover = function () {
    c.attr("fill", "blue");
};
c.node.onmouseout = function () {
    c.attr("fill", "green");
};

tr1.node.id1c = "треугольник";
tr1.node.onclick = function () {
   color = Raphael.getColor();
   tr1.attr("fill", color);
};

Пример 4: Псевдотрехмерность
var paper = Raphael(0,0,400,400);

Raphael.fn.ball = function (x, y, r, hue) {
            hue = hue || 0;
            return this.set(
                this.ellipse(x, y + r - r / 5, r, r / 2).attr({fill: "rhsb(" + hue + ", 1, .25)-hsb(" + hue + ", 1, .25)", stroke: "none", opacity: 0}),
                this.ellipse(x, y, r, r).attr({fill: "r(.5,.9)hsb(" + hue + ", 1, .75)-hsb(" + hue + ", .5, .25)", stroke: "none"}),
                this.ellipse(x, y, r - r / 5, r - r / 20).attr({stroke: "none", fill: "r(.5,.1)#ccc-#ccc", opacity: 0})
            );
        };
paper.ball( 200, 180, 150, Math.random());

Р.S. Вот так незаметно для себя я стал поклоником этой библиотеки...

Рабочие примеры в интернете http://jsfiddle.net/user/sikuda/fiddles/ 

См. также

Богатый редактор картинок, хранимых в базе, с возможностью РИСОВАНИЯ. Редактор внешних файлов картинок. Объект, расширяющий возможности работы с картинками из встроенного языка (Три в одном) + Обработка «Стандартизация картинок»

Работа с интерфейсом Рабочее место Платформа 1С v8.3 Управляемые формы Конфигурации 1cv8 Платные (руб)

Обработка предназначена для редактирования картинок в режиме «Предприятие», с возможностью РИСОВАТЬ на них. Поддерживается работа как в обычных формах (толстый клиент) так и на управляемых формах (тонкий клиент). Обработка позволяет редактировать как картинки, хранимые в базе, так и графические файлы с диска на файловой системе. Помимо базовых функций (изменение размеров, преобразование формата, обрезание картинки, повороты и т.п.) – редактор имеет богатый набор инструментов для рисования. Доступна функция вставки изображения из буфера обмена. Также обработка может быть использована из встроенного языка как объект для редактирования картинок. Объект может быть использован: на стороне клиента, на стороне сервера, из внешнего соединения. Данная обработка будет особенно полезна тем, кто вносит картинки в базу (изображения номенклатуры, фотографии физических лиц и т.п.). Функционал реализуется с использованием JavaScript и бесплатного ПО ImageMagick (без использования внешних компонент).

6000 руб.

16.01.2015    61793    43    59    

80

[Расширения] Динамическое управление видимостью и доступностью элементов форм (УФ) (8.3.6+)

Работа с интерфейсом Платформа 1С v8.3 Управляемые формы Конфигурации 1cv8 Платные (руб)

Механизм «Динамическое управление доступом к элементам форм объектов 1С8» предназначен для обеспечения возможности оперативного управления видимостью и доступностью элементов форм документов и справочников продуктов фирмы «1С» «1С:Предприятие 8». Решение универсальное, встраивается в любую конфигурацию с минимальными доработками, что позволяет без проблем обновлять типовые решения.

5000 руб.

14.01.2016    54401    16    21    

42

Управление дашбордами

Работа с интерфейсом Платформа 1С v8.3 Конфигурации 1cv8 Платные (руб)

Обработка предназначена для создания и управления дашбордами.

2400 руб.

29.06.2020    16695    21    4    

35

Новогоднее оформление для 1С

Работа с интерфейсом Платформа 1С v8.3 1С:Бухгалтерия 3.0 1С:Управление торговлей 11 1С:Зарплата и Управление Персоналом 3.x 1С:Управление нашей фирмой 3.0 Бесплатно (free)

Добавьте новогоднего настроения! Расширение создает декорацию в виде гирлянды на некоторых формах объектов.

27.12.2023    10735    750    elcoan    45    

106

Конструктор HTML, CSS и javascript

Инструментарий разработчика Работа с интерфейсом Платформа 1С v8.3 Конфигурации 1cv8 Абонемент ($m)

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

2 стартмани

10.04.2023    9610    151    acces969    31    

118

Модель состояния для MVC

Работа с интерфейсом Платформа 1С v8.3 Конфигурации 1cv8 Абонемент ($m)

"MVC плохо применима в 1С" - познакомьтесь с моделью состояния и, возможно, ваше мнение поменяется! Представленное решение является эволюционным развитием идеи реализации MVC для 1С. В новой версии добавлены DSL для описания модели состояния, а также параметризация свойств параметров и элементов формы.

1 стартмани

05.07.2022    3665    kalyaka    2    

27

Табло очереди заказов на экран телевизора

WEB-интеграция Работа с интерфейсом Платформа 1С v8.3 1С:Розница 2 Платные (руб)

Связка из веб-приложения и расширения для 1С: Розница 2.3.

3600 руб.

29.04.2022    12079    1    5    

10
Комментарии
В избранное Подписаться на ответы Сортировка: Древо развёрнутое
Свернуть все
1. script 128 19.06.13 13:42 Сейчас в теме
Пожалуйста сфорганьте:
- воронку продаж;
- диаграмму ганта (с возможностью вывода надписей внутри блока, а также с возможностью выделения блоков мышью, в т.ч. и пустых и обработкой событий);

Это будет более востребовано потому что нормальных в 1С нет вообще,
а круговых и прочих и так валом.
acanta; wowik; maXon777; Sheff; +4 Ответить
5. xzorkiix 34 21.06.13 11:32 Сейчас в теме
(1) script,
воронку продаж

если js html устраивает, то http://www.highcharts.com/demo/funnel (It works in all modern browsers including the iPhone/iPad and Internet Explorer from version 6. Standard browsers use SVG for the graphics rendering. In legacy Internet Explorer graphics are drawn using VML.) наполнение там сводиться к

series: [{
            name: 'Unique users',
            data: [
                ['Website visits',   15654],
                ['Downloads',       4064],
                ['Requested price list', 1987],
                ['Invoice sent',    976],
                ['Finalized',    846]
            ]
        }]
Показать


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


https://github.com/thegrubbsian/jquery.ganttView

Но тут
There are minor issues in IE7 and I haven't even attempted to use it in IE6.
(даже не пытался)
6. sikuda 673 21.06.13 12:23 Сейчас в теме
(5) HighCharts это самые известные и доделанные графики. Они действительно самые класные, но первое у них не простая лицензия. Второе внутри тонкого клиента 1С 8.3.3 не все так просто.
Если бы они полность запускались без глюков... ну вобщем я тоже за мир во всем мире...

18. RomikMf 63 10.07.13 13:42 Сейчас в теме
(6)
Ковырялся как-то с Highcharts на 8.2 http://youtu.be/n3PpBNeMpVk Для моей задачи нормально всё завелось в итоге. Неужели в 8.3.3 что-то поменялось?
19. sikuda 673 10.07.13 14:57 Сейчас в теме
Так с движком браузера в web-клиентах chrome и Firefox все нормально.
(6) Картинка из тонкого клиента... http://sikuda.ru/vstroennyj-brauzer-v-1s-kto-zdes/
2. SirYozha 222 20.06.13 04:32 Сейчас в теме
(0) sikuda спасибо, за интересную находку!

нашел в сети доклад разработчика о данной библиотеке
Доклад о библиотеке Raphael
3. Asmody 20.06.13 10:41 Сейчас в теме
скажите, как вы победили (победили ли?) двойное исполнение js в поле HTML-документа при присваивании html-кода реквизиту формы, связанному с полем?
4. sikuda 673 20.06.13 11:04 Сейчас в теме
http://sikuda.ru/kogda-razmer-imeet-znachenie-opredelenie-razmera-polya-html-v-1s-v-pikselyah/ пункт 4. Не нулевой размер родителя приходит только в последний момент. Решение мне понравилось, даже статью себе в блог написал. Если найдете в нем дырки - обязательно напишите, мне самому это интересно его универсальность.
7. tolyan_ekb 104 21.06.13 13:30 Сейчас в теме
С помощью библиотеки выводится статические изображения или они двигаться могут?
10. maljaev 789 21.06.13 19:00 Сейчас в теме
(7) tolyan_ekb, вообще практически всё что на HTML странице есть - может двигаться, реагировать на события и т.д., и управляется через DOM-модель. SVG и VML не исключение. Можно самому управлять через скрипты или прямым доступом к узлам, можно с помощью фреймворков. В SVG есть также встроенные средства анимации. Драг-энд-дроп тоже не проблема.
11. sikuda 673 24.06.13 08:38 Сейчас в теме
(7). В первом примере простейшая. Дальше разбираться..
(8,9,10). Да это SVG графика. Как правильно замечено если наделать 20000 объектов в DOM, каждый узел со своими обработчиками, свойствами то все это тормозит. Это не тот метод.
Есть в графике HTML другой путь Canvas, asm.js и далее http://habrahabr.ru/post/174481/. Но здесь требуется новый движок браузера. Если кто откопает что-то реально работающее в 1С. Пишите, будет очень популярно.
8. YVolohov 721 21.06.13 13:56 Сейчас в теме
Супер вещь !!! А можно ли с помощью этого механизма вносить изменения в картинки (jpg, png) из 1с и сохранять их? Например маркировать фотографии.
9. maljaev 789 21.06.13 17:52 Сейчас в теме
Офигительно, Рафаэлю сто лет в обед а они его только откопали... Кроме того узко специфическая вещь, если на чистом SVG можно без особых тормозов вывести несколько тысяч объектов в одной схеме, то Рафаэль на тех же объемах загибается. Так, небольшие графики, небольшие схемки - его стезя. Я еще в 1С 7.7 года 3 назад через SVG интерактивную схему рынка делал, сложную довольно как по объектам (в сумме примерно 3'000) так и по взаимодействию с пользователем. А вот в скором времени предстоит подобную схему реализовывать в 1С 8.2 только на 20'000 объектов - а при таком объеме (проверено лично) загибается и SVG и уж тем более Рафаэль. Все имеющиеся в свободном доступе графические библиотеки для 1С загибаются даже на тысяче. И как быть теперь не знаю (если только дробить схему на куски). Озадачились бы вопросом, какими средствами в 1С без тормозов выводить интерактивные схемы стадионов, жилых массивов и т.д. - когда счет идет уже не на тысячи а на десятки тысяч объектов. Ничего подобного пока не видел, если только не ваять на голом .NET

P.S. Кстати, если вы уж озадачились Рафаэлем, то обратите еще внимание на http://readysetraphael.com потому что зачастую намного удобнее подготовить шаблон или его части в Adobe Illustrator или Inkscape, а уж потом скармливать Рафаэлю.
12. maljaev 789 24.06.13 10:49 Сейчас в теме
Новый движок браузера в 1С это нереально, вы сами как и я уже исследовали этот вопрос и поняли что все крутится на WebBrowser и приходится мириться с его ограничениями. Единственный вариант который я вижу - это разработка своей библиотеки без использования SVG, JS и HTML. Например на базе FlexGraphics или WPF, но опять же не знаю как работает с большим количеством объектов. У вас к команде Доминиканы есть спецы по разработке ВК?
13. maljaev 789 24.06.13 12:04 Сейчас в теме
Думаю что вот в эту сторону нужно обратить свой пристальный взгляд, весьма перспективная вещь: http://www.cadsofttools.ru/products/cadviewx.html или http://www.cadsofttools.ru/products/cad_image_dll.html
Правда не бесплатная, но это же не тот фактор чтобы снимать ее с рассмотрения. Тем более стоимость лицензий начинается с весьма приемлемой суммы. Уже написал запрос разработчикам.
14. sikuda 673 25.06.13 09:06 Сейчас в теме
Нет меня COM+, OLE не заманишь. Еще раз просвещаю народ - Microsoft сама делает свои технологии COM+, Silverlight не первоочередными. И этот крутой поворот они сделали в середине 2011 года! Возможно они это сделали поздно, возможно...(мне нравить пародия на эту тему отражающая суть - http://www.youtube.com/watch?feature=player_embedded&v=RRFiu0xfQzw)
Подумайте, если Вы не делаете свой CAD или yandex maps, то 20000 объектов вам не надо! Человек обычно не оперирует более 7-10 объектами.
15. sikuda 673 27.06.13 14:58 Сейчас в теме
Обновил анимацию по умолчанию. Если подтормаживает - пишите...
17. sikuda 673 03.07.13 12:00 Сейчас в теме
Предлагаю способ как обработать в 1С нажатие на элементы графика Рафаеля http://sikuda.ru/rasshifrovki-v-1s-iz-grafikov-rafaelya/
20. RomikMf 63 10.07.13 16:49 Сейчас в теме
Ну да, я с расчетом на веб-клиент и делал. С ограничениями тонкого клиента понятно всё, спасибо. Проверил свою приблуду под тонким клиентом на 8.3 - то что мне нужно было - рисует. Единственный косяк и в 8.2 и в 8.3, растягивается элемент HTML нормально, а вот вместо того, чтобы диаграмма сворачивалась, полоса прокрутки появляется.
Прикрепленные файлы:
21. tolyan_ekb 104 17.07.13 15:02 Сейчас в теме
При открытии обработки пишет. Ошибка сценария строка 12 код символа 2504 синтаксическая ошибка. Как побороть?
22. sikuda 673 17.07.13 15:39 Сейчас в теме
(21) Странно, сам еще раз скачал свою обработку проверил(Win7x64 IE9). Все Ок, толстый и тонкий, дома даже Ubuntu 12.04 8.3.3.658. Опишите точно вашу машину. В реестр точно не лазили?
23. tolyan_ekb 104 18.07.13 07:35 Сейчас в теме
(22) у меня XP prof и IE 8 в режиме совместимости работает. Некоторые алгоритмы не работают в старых IE. Например, писал парсер на 1С и он в IE 7 выдавал ошибку,а в IE 8 нет. Похоже нет никакой совместимости со старыми версиями, каждый раз придется под конкретного пользователя подстраиваться.
24. tolyan_ekb 104 22.07.13 15:33 Сейчас в теме
(22) почему-то различается текст на сайте разработчика и в обработке
function®{return e(t,):e(t,t.eve)} вместо function®{return e(t,r)}):e(t,t.eve)}
l=function(t,e){rturn t-e} вместо l=function(t,e){return t-e}
При замене не сохраняет корректно в макете обработке index_html. Исправил, сохранил, открыл опять так же. В чем может быть причина?
25. sikuda 673 22.07.13 17:14 Сейчас в теме
Проверьте на другом компьютере. Как результат? Что-то Вы явно компьютер замучили.
26. basta-one2007 21.01.15 19:33 Сейчас в теме
Хоть бы Word'ом проверяли на ошибки и опечатки:

"совместива" - > "совместиМа"
"использутся" - > "используЕтся"
"А тех, кто засучил рукова и не боиться javascript кода." -> "А тех, кто засучил рукАва и не боиТСЯ javascript кода."
"Смотрим – нравиться."->"Смотрим – нравиТСЯ."
27. NECHISTb 15 20.02.17 13:02 Сейчас в теме
Я создал два прямоугольника при помощи этой обработки. Хочу при нажатии на один из прямоугольников получать информацию в 1С о том, на какой именно прямоугольник нажал, первый или второй. Помогите пожалуйста.
Оставьте свое сообщение