IE 2016

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

Опубликовал sikuda в раздел Программирование - Практика программирования

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

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

Привет 'Доминикане' в Тайланде (http://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/

 

Кто не хочет копаться во внутренностях представляем коммерческие обработки:

http://infostart.ru/public/190734/

http://infostart.ru/public/191306/

http://infostart.ru/public/191307/

 

А тех, кто засучил рукава и не боится javascript кода. Прошу.

Смотрим – нравится. Есть поле для изменения кода на 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/ 

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

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

См. также

Лучшие комментарии

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

Это будет более востребовано потому что нормальных в 1С нет вообще,
а круговых и прочих и так валом.
Ответили: (5)
+ 3 [ wowik; maXon777; Sheff; ]
# Ответить
2. SirYozha (файл скачал) 20.06.2013 04:32
(0) sikuda спасибо, за интересную находку!

нашел в сети доклад разработчика о данной библиотеке
Доклад о библиотеке Raphael
+ 1 [ sikuda; ]
# Ответить
10. maljaev 21.06.2013 19:00
(7) tolyan_ekb, вообще практически всё что на HTML странице есть - может двигаться, реагировать на события и т.д., и управляется через DOM-модель. SVG и VML не исключение. Можно самому управлять через скрипты или прямым доступом к узлам, можно с помощью фреймворков. В SVG есть также встроенные средства анимации. Драг-энд-дроп тоже не проблема.
+ 1 [ GATTUSO; ]
# Ответить

Комментарии

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

Это будет более востребовано потому что нормальных в 1С нет вообще,
а круговых и прочих и так валом.
Ответили: (5)
+ 3 [ wowik; maXon777; Sheff; ]
# Ответить
2. SirYozha (файл скачал) 20.06.2013 04:32
(0) sikuda спасибо, за интересную находку!

нашел в сети доклад разработчика о данной библиотеке
Доклад о библиотеке Raphael
+ 1 [ sikuda; ]
# Ответить
3. Asmody (файл скачал) 20.06.2013 10:41
скажите, как вы победили (победили ли?) двойное исполнение js в поле HTML-документа при присваивании html-кода реквизиту формы, связанному с полем?
# Ответить
4. sikuda 20.06.2013 11:04
http://sikuda.ru/kogda-razmer-imeet-znachenie-opredelenie-razmera-polya-html-v-1s-v-pikselyah/ пункт 4. Не нулевой размер родителя приходит только в последний момент. Решение мне понравилось, даже статью себе в блог написал. Если найдете в нем дырки - обязательно напишите, мне самому это интересно его универсальность.
# Ответить
5. xzorkiix 21.06.2013 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)
# Ответить
6. sikuda 21.06.2013 12:23
(5) HighCharts это самые известные и доделанные графики. Они действительно самые класные, но первое у них не простая лицензия. Второе внутри тонкого клиента 1С 8.3.3 не все так просто.
Если бы они полность запускались без глюков... ну вобщем я тоже за мир во всем мире...

Ответили: (18) (19)
# Ответить
7. tolyan_ekb (файл скачал) 21.06.2013 13:30
С помощью библиотеки выводится статические изображения или они двигаться могут?
Ответили: (10) (11)
# Ответить
8. YVolohov (файл скачал) 21.06.2013 13:56
Супер вещь !!! А можно ли с помощью этого механизма вносить изменения в картинки (jpg, png) из 1с и сохранять их? Например маркировать фотографии.
# Ответить
9. maljaev 21.06.2013 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, а уж потом скармливать Рафаэлю.
# Ответить
10. maljaev 21.06.2013 19:00
(7) tolyan_ekb, вообще практически всё что на HTML странице есть - может двигаться, реагировать на события и т.д., и управляется через DOM-модель. SVG и VML не исключение. Можно самому управлять через скрипты или прямым доступом к узлам, можно с помощью фреймворков. В SVG есть также встроенные средства анимации. Драг-энд-дроп тоже не проблема.
+ 1 [ GATTUSO; ]
# Ответить
11. sikuda 24.06.2013 08:38
(7). В первом примере простейшая. Дальше разбираться..
(8,9,10). Да это SVG графика. Как правильно замечено если наделать 20000 объектов в DOM, каждый узел со своими обработчиками, свойствами то все это тормозит. Это не тот метод.
Есть в графике HTML другой путь Canvas, asm.js и далее http://habrahabr.ru/post/174481/. Но здесь требуется новый движок браузера. Если кто откопает что-то реально работающее в 1С. Пишите, будет очень популярно.
# Ответить
12. maljaev 24.06.2013 10:49
Новый движок браузера в 1С это нереально, вы сами как и я уже исследовали этот вопрос и поняли что все крутится на WebBrowser и приходится мириться с его ограничениями. Единственный вариант который я вижу - это разработка своей библиотеки без использования SVG, JS и HTML. Например на базе FlexGraphics или WPF, но опять же не знаю как работает с большим количеством объектов. У вас к команде Доминиканы есть спецы по разработке ВК?
# Ответить
13. maljaev 24.06.2013 12:04
Думаю что вот в эту сторону нужно обратить свой пристальный взгляд, весьма перспективная вещь: http://www.cadsofttools.ru/products/cadviewx.html или http://www.cadsofttools.ru/products/cad_image_dll.html
Правда не бесплатная, но это же не тот фактор чтобы снимать ее с рассмотрения. Тем более стоимость лицензий начинается с весьма приемлемой суммы. Уже написал запрос разработчикам.
# Ответить
14. sikuda 25.06.2013 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 27.06.2013 14:58
Обновил анимацию по умолчанию. Если подтормаживает - пишите...
# Ответить
17. sikuda 03.07.2013 12:00
Предлагаю способ как обработать в 1С нажатие на элементы графика Рафаеля http://sikuda.ru/rasshifrovki-v-1s-iz-grafikov-rafaelya/
# Ответить
18. RomikMf (файл скачал) 10.07.2013 13:42
(6) sikuda,
Ковырялся как-то с Highcharts на 8.2 http://youtu.be/n3PpBNeMpVk Для моей задачи нормально всё завелось в итоге. Неужели в 8.3.3 что-то поменялось?
# Ответить
19. sikuda 10.07.2013 14:57
Так с движком браузера в web-клиентах chrome и Firefox все нормально.
(6) Картинка из тонкого клиента... http://sikuda.ru/vstroennyj-brauzer-v-1s-kto-zdes/
# Ответить
20. RomikMf (файл скачал) 10.07.2013 16:49
Ну да, я с расчетом на веб-клиент и делал. С ограничениями тонкого клиента понятно всё, спасибо. Проверил свою приблуду под тонким клиентом на 8.3 - то что мне нужно было - рисует. Единственный косяк и в 8.2 и в 8.3, растягивается элемент HTML нормально, а вот вместо того, чтобы диаграмма сворачивалась, полоса прокрутки появляется.

Прикрепленные файлы:

ScreenHunter_05 Jul. 10 16.44.jpg
# Ответить
21. tolyan_ekb (файл скачал) 17.07.2013 15:02
При открытии обработки пишет. Ошибка сценария строка 12 код символа 2504 синтаксическая ошибка. Как побороть?
Ответили: (22)
# Ответить
22. sikuda 17.07.2013 15:39
(21) Странно, сам еще раз скачал свою обработку проверил(Win7x64 IE9). Все Ок, толстый и тонкий, дома даже Ubuntu 12.04 8.3.3.658. Опишите точно вашу машину. В реестр точно не лазили?
Ответили: (23) (24)
# Ответить
23. tolyan_ekb (файл скачал) 18.07.2013 07:35
(22) sikuda, у меня XP prof и IE 8 в режиме совместимости работает. Некоторые алгоритмы не работают в старых IE. Например, писал парсер на 1С и он в IE 7 выдавал ошибку,а в IE 8 нет. Похоже нет никакой совместимости со старыми версиями, каждый раз придется под конкретного пользователя подстраиваться.
# Ответить
24. tolyan_ekb (файл скачал) 22.07.2013 15:33
(22) sikuda, почему-то различается текст на сайте разработчика и в обработке
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 22.07.2013 17:14
Проверьте на другом компьютере. Как результат? Что-то Вы явно компьютер замучили.
# Ответить
26. basta-one2007 21.01.2015 19:33
Хоть бы Word'ом проверяли на ошибки и опечатки:

"совместива" - > "совместиМа"
"использутся" - > "используЕтся"
"А тех, кто засучил рукова и не боиться javascript кода." -> "А тех, кто засучил рукАва и не боиТСЯ javascript кода."
"Смотрим – нравиться."->"Смотрим – нравиТСЯ."
# Ответить
Внимание! За постинг в данном форуме $m не начисляются.
Внимание! Для написания сообщения необходимо авторизоваться
Текст сообщения*
Прикрепить файл