Полезная штука

Искал простейшую утилитку, чтоб побыстрому каналец/уровень построить.
Набрел на сайт канадского товарища — Стива Ханова (http://zwibbler.com)
Товарищ предлагает яваскриптовый реадктор Zwibbler. Проект не OpenSource, использовать его без лицензии низя.
Но есть демо-версия и она вполне рабочая.
Она умеет делать Ctr+c, Ctrl+v, Ctrl+z! Не без заморочек ессна- надо два раза кликать для завершения линии. Но это мелочи.
Утилитка может работать без инета с локальными картинками. Практически TradingView на вашем компе.




Итак, качаем демку (все файлы складываем в одну папку):
zwibbler.com/zwibbler-demo.js

Качаем картинки кнопочек:
zwibbler.com/wd-arrow.png
zwibbler.com/wd-box.png
zwibbler.com/wd-brush.png
zwibbler.com/wd-circle.png
zwibbler.com/wd-copy.png
zwibbler.com/wd-curve.png
zwibbler.com/wd-line.png
zwibbler.com/wd-pick.png
zwibbler.com/wd-redo.png
zwibbler.com/wd-text.png
zwibbler.com/wd-undo.png

Данные будем брать с FinWiz, но можно вставлять любые картинки.
Создаем файл index.html, вставляем в него следующий код:

<select name=«ticker» id=«ticker» onChange=«onTicker(this.value)»>
    <option value=«0» selected>Тикер</option>
    <option value=«19473»>Brent</option>
    <option value=«18948»>Light</option>
    <option value=«83»>Eur/Usd</option>
    <option value=«18953»>Gold</option>
    <option value=«90»>S&P500</option>
    <option value=«10000»>DYX</option>
    </select>
    <select name=«ticker» id=«ticker» onChange=«onTimeFrame(this.value)»>
    <option value=«0» selected>Таймфрейм</option>
    <option value=«m5»>5</option>
    <option value=«h1»>Час</option>
    <option value=«d1»>День</option>
    <option value=«w1»>Неделя</option>
    <option value=«m1»>Месяц</option>
    </select>
    <input type=«text» value="" id=«img_url» size=40 />
    <input type=«button» onclick=«onImgURL()» value=«ОК»/>
    <script src=«zwibbler-demo.js»></script>
    <div id=«zwibbler1» style=«width:1080px;height:500px»></div>
    <script>
    var id = 0;
    var int = 0;
    var ctx=0;
    var bg="";
        function onImgURL() {
        id=1;
        onTicker(0);
        }
        function onTimeFrame(val) {
        int = val;
        onTicker(0);
    }
        function onTicker(val) {
        if (val>0) {
        id = val;
        }
        if (id==1) {
        bg = document.getElementById('img_url').value;
        }
        if (id==19473) {
        bg =  «finviz.com/fut_chart.ashx?t=QA&p=»+int;
        }
        if (id==18948) {
        bg =  «finviz.com/fut_chart.ashx?t=CL&p=»+int;
        }
        if (id==18953) {
        bg =  «finviz.com/fut_chart.ashx?t=GC&p=»+int;
        }
        if (id==90) {
        bg =  «finviz.com/fut_chart.ashx?t=ES&cot=&p=»+int;
        }
        if (id==10000) {
        bg = «finviz.com/fut_chart.ashx?t=DX&cot=&p=»+int;
        }
        if (id==83) {
        bg = «finviz.com/fx_image.ashx?eurusd_»+int+"_l.png";
        }
           ctx=Zwibbler.create(«zwibbler1», {
        backgroundImage: bg,
        showPropertyPanel: false,
           showColourPanel: true,
           debug: true,
        defaultLineWidth: 1,
        defaultArrowSize: 0,
         snap: 0
        });
    }
    </script>

Все. Можно запускать index.html

И для Finam'овских картинок прикрутим:
Создаем finam.html, вставяем в него:

    <select name=«ticker» id=«ticker» onChange=«onTicker(this.value)»>
    <option value=«0» selected>Тикер</option>
    <option value=«19899»>Si</option>
    <option value=«17455»>Ri</option>
    <option value=«901»>Usd/Rub</option>
    <option value=«83»>Eur/Usd</option>
    <option value=«19473»>Brent</option>
    <option value=«18953»>Gold</option>
    <option value=«90»>S&P500</option>
    </select>
    <select name=«ticker» id=«ticker» onChange=«onTimeFrame(this.value)»>
    <option value=«0» selected>Таймфрейм</option>
    <option value=«1»>1</option>
    <option value=«2»>5</option>
    <option value=«3»>15</option>
    <option value=«4»>Час</option>
    <option value=«5»>День</option>
    <option value=«6»>Неделя</option>
    <option value=«7»>Месяц</option>
    </select>
    <input type=«text» value="" id=«img_url» size=40 />
    <input type=«button» onclick=«onImgURL()» value=«ОК»/>
    <script src=«zwibbler-demo.js»></script>
    <div id=«zwibbler1» style=«width:800px;height:500px»></div>
    <script>
    var id = 0;
    var int = 0;
    var ctx=0;
    var bg="";
        function onImgURL() {
        bg = document.getElementById('img_url').value;
        id=1;
        onTicker(0);
        }
        function onTimeFrame(val) {
        int = val;
        onTicker(0);
    }
        function onTicker(val) {
        if (val>0) {
        id = val;
        }
        if (id==1) {
        bg = document.getElementById('img_url').value;
        } else {
        bg = «node.finam.ru/imcf3.asp?id=»+id+"&type=3&ma=6&maval=7&freq="+int+"&uf=1&indval=&cat=&cai=7&v=&idxf=&curr=0&mar=14&gifta_mode=1";
        }
         ctx= Zwibbler.create(«zwibbler1», {
        backgroundImage: bg,
        showPropertyPanel: false,
        showColourPanel: true,
        debug: true,
        defaultLineWidth: 1,
        defaultArrowSize: 0,
        snap: 0
         });
    }
    </script>

Все. Тестим finam.html