INT 21h

Hi, I am Vladimir Smagin, SysAdmin and Kaptain. Telegram Email / GIT / Thingiverse / RSS / GPG

War of analytics: Matomo (former Piwik) vs AdBlock

№ 10144. В разделе " Sysadmin " от July 25th, 2019

В подшивках: , ,

WebODF – интеграция ODF документа в веб страницу

№ 7370 В разделе "Programming" от June 20th, 2015,
В подшивках:

Допустим, вам необходимо интегрировать ODF документ в страницу для просмотра через браузер. Специально для таких случаев придумана библиотека WebODF. Использовать ее вообще элементарно. Скачиваете библиотечку на ваш сервер и подключаете ее в теге head.

<script src="https://blindage.org/static/webodf/webodf.js" type="text/javascript" charset="utf-8"></script>

Там где нужно показать документ вставляем еще один скрипт и div в который он нарисуется.

<script type="text/javascript" charset="utf-8">
function init() {
  var odfelement = document.getElementById("odf"),
      odfcanvas = new odf.OdfCanvas(odfelement);
  odfcanvas.load("https://blindage.org/odf/stm8-with-the-blinking-led.odt");
}
window.setTimeout(init, 0);
  </script>
<div id="odf"></div>

Пример документа №1
Пример документа №2

Нет комментариев »

Подключаем Jabber клиент converse.js к сайту

№ 7052 В разделах: Programming Sysadmin от April 6th, 2015,
В подшивках: ,

Допустим у вас небольшой сайт вашего местного сообщества и ваш домен привязан к Яндексу и возможно даже настроили общий список пользователей домена для Jabber пользователей. Вы хотите прикрутить небольшой Jabber клиент к сайту чтобы стимулировать общение и регистрации. Для этого отлично подходит веб клиент Converse.JS.

conversejs

Установите из репозитория пакеты git, python и python-twisted. Далее переходим в /usr/local/bin (или куда вам удобней) и клонируем репозиторий punjab

git clone https://github.com/twonds/punjab.git
cd punjab
python setup.py install

Там же есть файл punjab.tac. В нем при необходимости можно заменить порт на другой.

internet.TCPServer(5280, site).setServiceParent(application)

В конфиге nginx необходимо добавить новый location

        location ~ ^/http-bind/ {
            proxy_pass http://localhost:5280;
        }

Если у вас apache замените его уже на nginx 🙂 Ладно, ладно, вот конфиг для него:

<IfModule proxy_module>
    ProxyRequests Off
    ProxyPass /http-bind http://localhost:5280/http-bind
    ProxyPassReverse /http-bind http://localhost:5280/http-bind
</IfModule>

Запуск BOSH и рестарт nginx:

twistd -y ./punjab.tac
/etc/init.d/nginx reload

Очень полезно добавить запуск punjab в init скрипт и стартовать при запуске системы, а не руками.

Теперь нужно забрать непосредственно сам Jabber клиент в директорию с сайтом
git clone https://github.com/jcbrand/converse.js.git

Чтобы чудо случилось нужно в заголовок страницы добавить несколько строк, подключающих скрипты:

<link type="text/css" rel="stylesheet" media="screen" href="/converse.js/css/converse.min.css" />
<![if gte IE 9]>
    <script src="/converse.js/builds/converse.website.min.js"></script>
<![endif]>
<!--[if lt IE 9]>
    <script src="/converse.js/builds/converse.website-no-otr.min.js"></script>
<![endif]-->

И чуть чуть в конце конфигурацию и инициализацию где-нибудь между </body> и </html>:

<script>
    require(['converse'], function (converse) {
        (function () {
            var $ = converse.env.jQuery;
            $(window).scroll(function() {
                if ($(".navbar").offset().top > 50) {
                    $(".navbar-fixed-top").addClass("top-nav-collapse");
                } else {
                    $(".navbar-fixed-top").removeClass("top-nav-collapse");
                }
            });
            $('.page-scroll a').bind('click', function(event) {
                var $anchor = $(this);
                $('html, body').stop().animate({
                    scrollTop: $($anchor.attr('href')).offset().top
                }, 700, 'easeInOutExpo');
                event.preventDefault();
            });
        })();
        converse.initialize({
            bosh_service_url: 'http://myserver.com/http-bind/',
            i18n: locales['ru'], 
            keepalive: true,
            message_carbons: true,
            play_sounds: true,
            roster_groups: true,
            show_controlbox_by_default: true,
            xhr_user_search: false
        });
    });
</script>

Шрифт также можно изменить на любимый. Например, подгрузив из Google Fonts и положив его в стиль converse.js:

<link href='http://fonts.googleapis.com/css?family=Roboto+Condensed&subset=latin,cyrillic' rel='stylesheet' type='text/css'>
<style>
#conversejs {font-family: "Roboto Condensed"; }

Вот и все 🙂

Нет комментариев »

Использование API 2ГИС для создания карт с вашей собственной информацией

№ 4167 В разделе "Programming" от March 21st, 2012,
В подшивках:

На сайте 2ГИС уже есть классный пример использования API (спасибо тебе, 2ГИС! Я твой преданный юзер уже много лет). Давайте поиграем с ним!

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

    //массивы с описаниями магазинов
    var arr_luch = [84.983202,56.459649,"Магазин Луч<br><a href='http://md.tomsk.ru/'>
            http://md.tomsk.ru</a>"];
    var arr_trigger = [84.964294,56.464543, "Магазин Триггер<br><a href='http://trigger.ru/'>
            http://trigger.ru</a>"];
    var arr_elco = [84.951502,56.493721,"Элко-Про - радиодетали, приборы, конструкторы<br>
            <a href='http://elcopro.ru'>http://elcopro.ru</a>"];
    var arr_elco2 = [84.976156,56.452638,"Филиал Элко-Про - конструкторы, роботы, может
            выдавать заказы с сайта<br><a href='http://elcopro.ru'>http://elcopro.ru</a>"];
    var arr_elgrad = [84.961025,56.463460,"Элград и Вольт мастер - радиодетали<br>
            <a href='http://tom-electron.ru/'>http://elgrad.net</a>"];
    var arr_tomelectron = [84.954648,56.459210,"ТомЭлектрон - радиодетали<br>
            <a href='http://tom-electron.ru/'>http://tom-electron.ru</a>"];

    //массив магазинов
    var shops = [arr_luch, arr_trigger,arr_elco, arr_elco2,arr_elgrad,arr_tomelectron];

В примере показано создание только 1 метки с подсказкой. Мы же сделаем 6. Добавим в программу цикл по элементам массива магазинов.

for(var zi = 0; zi < shops.length; zi++) with({zi: zi}) {
..
}

Чтобы имена переменных не путали нам карты, мы сделаем их уникальными с помощью eval (добавит в имя переменной другую переменную).

var b = new DG.Balloons.Common({
    // Местоположение на которое указывает балун:
    geoPoint: new DG.GeoPoint(shops[zi][0],shops[zi][1]),
    // Текст внутри балуна":
    contentHtml: shops[zi][2]
});
eval("var baloon"+zi+"=b");

Тоже самое нужно сделать и для кода создания метки.

            // Создаем маркер:
            var m = new DG.Markers.Common({
                // Местоположение на которое указывает маркер
                //(в нашем случае, такое же, где и балун):
                geoPoint: new DG.GeoPoint(shops[zi][0],shops[zi][1]),
                // Функция, которая будет вызвана при клике по маркеру:
                clickCallback: function() {
                    // Если балун еще не был добавлен:
                    if (! myMap.balloons.getDefaultGroup().contains(eval("baloon"+zi))) {
                        // Добавить балун на карту:
                        myMap.balloons.add(eval("baloon"+zi));
                    } else {
                    // Если балун уже был добавлен на карту, но потом был скрыт:
                        // Показать балун:
                        eval("baloon"+zi).show();
                    }
                }
            });
            eval("var metka"+zi+"=m");

Добавляем маркер на сайт

myMap.markers.add(eval("metka"+zi));

И теперь вот что получается (клик по картинке ведет на живой пример)

На Яндекс.Картах я сделал абсолютно аналогичным способом программу для одного предприятия. Бригаде ремонтников достаточно зайти на корпоративный портал, чтобы увидеть все, что им необходимо. Поиск координат объектов осуществляется на стадии подключения абонента к сети с помощью специального API от Яндекса. Просто вводите адрес, а программа сама найдет координаты запросом

http://psearch-maps.yandex.ru/1.x/?text=ул калинина 14&key=...

Нет комментариев »

Мои табы на CSS + Javascript

№ 1451 В разделе "Programming" от May 15th, 2009,
В подшивках: ,

Сегодня мне понадобилось сделать более удобный интерфейс для проекта «Открытый Томск», чем куча перегружаемых страниц. Решил сделать что-то наподобии табов для выполнения функций их добавления, редактирования и удаления.


(more…)

Всего 1 комментарий »

Яндекс.Метрика

Fortune cookie: Today's spam: Be congers go camargo