Архивы WEB - Страница 39 из 55

Пишем расширение для браузера Chrome

16.10.2015 Павел Грибов WEB

Ну не написал об этом только ленивый 😉

Задача: написать «Оповещалку» о проблемах в сети и серверах, которая тянет данные с Zabbix.

Первым делом создаем файл manifest.json:

{
"name": "Уведомления Zabbix от НОС",
"version": "1.0.0.1",
"manifest_version": 2,
"icons": {
"32": "z_red.png"
},

"browser_action": {
"default_title": "Уведомления Zabbix от НОС",
"default_icon" : "z_red.png",
"default_popup": "popup.html"
},

"background": {
"scripts": ["jquery.min.js","main.js"],
"persistent": false
},

"permissions": [
"https://*/*",
"http://*/*",
"alarms",
"notifications"
],

"content_security_policy": "script-src 'self'; object-src 'self'",

"web_accessible_resources": [
"z_red.png",
"jquery.min.js",
"main.js",
"notification.html",
"popup_main.js",
"config.js",
"notify.mp3",
"notify.wav",
"notify.ogg"
]
}

{

"name": "Уведомления Zabbix от НОС",

"version": "1.0.0.1",

"manifest_version": 2,

"icons": {

"32": "z_red.png"

"browser_action": {

"default_title": "Уведомления Zabbix от НОС",

"default_icon" : "z_red.png",

"default_popup": "popup.html"

"background": {

"scripts": ["jquery.min.js","main.js"],

"persistent": false

"permissions": [

"https://*/*",

"http://*/*",

"alarms",

"notifications"

"content_security_policy": "script-src 'self'; object-src 'self'",

"web_accessible_resources": [

"z_red.png",

"jquery.min.js",

"main.js",

"notification.html",

"popup_main.js",

"config.js",

"notify.mp3",

"notify.wav",

"notify.ogg"

]

}

В нем прописываем все файлы которые будут использоваться нашим расширение, ресурсы куда оно будет ходить и какие манипуляции может совершать.

В background перечисляются скрипты, которые будут автоматически запускаться при старте браузера (ну и собственно расширения).

defalut_popup — скрипт который будет запускаться при нажатии на иконку расширения.

» Читать далее

Оставить комментарий chrome, crome, пишем расширение браузера

Обмен данными между серверами..

23.09.2015 Павел Грибов Linux, WEB

Задача: на сервер А, периодически получить некие данные с сервера Б.

Хм. К сожаление не придумал ничего умнее кроме как:

На сервере Б регулярно выполнять скрипт, который собирает данные и при помощи

$handle=fopen("http://сервер/скрипт.php?данные", "r");

выплевывает их на сервер А, в качестве параметра GET. На сервере А, правда настроил доступы при помощи .htaccess для конкретного IP сервера..

Но решение не нравится.. Какие то должны быть механизмы попроще и понадежне..

Оставить комментарий php, обмен данными между серверами

Открыл для себя DokuWiki

04.09.2015 Павел Грибов Linux, WEB

Очень простой в использовании и установке WIKI подобный портал. Устанавливается простым копированием скриптов в папку. Не требует БД. Удобный встроенный поиск, корректно работающий с русским языком.

Оставить комментарий dokuwiki, wiki

fabric.js подсказка при наведении мышки на обьект..

28.07.2015 Павел Грибов WEB

Странно, что такой полезной функции не оказалось в «коробке»…Ну да ничего. Решаемо.

function showImageTools (e) {
    data="<div id=imageDialog class='alert' style='z-index: 9999;position: absolute'>OLALA</div>";       
    if (!$('#imageDialog').length) {
        $("#saveweldingandmark").append(data);
    }
    moveImageTools(e);
};
function moveImageTools (e) {
    var w = $('#imageDialog').width();
    var h = $('#imageDialog').height();
    $('#imageDialog').show();
    $('#imageDialog').css({top: my, left: mx});
}
var MouseCoords = {
getX: function(e){
    if (e.pageX) {
            return e.pageX;
    } else 
        if (e.clientX) {
            return e.clientX+(document.documentElement.scrollLeft || document.body.scrollLeft) - document.documentElement.clientLeft;
        }
    return 0;
    },
getY: function(e){
    if (e.pageY){
            return e.pageY;
    } else 
      if (e.clientY) {
            return e.clientY+(document.documentElement.scrollTop || document.body.scrollTop) - document.documentElement.clientTop;
      }
    return 0;
    }
};
document.onmousemove = function(e){
    if (!e) e = window.event;
    mx=MouseCoords.getX(e);
    my=MouseCoords.getY(e);
};
canvas.on('mouse:over', function (e) {
    console.log("Я на что-то наехал...");
    showImageTools(e.target);
});
canvas.on('mouse:out', function (e) {
    $('#imageDialog').remove();
});

function showImageTools (e) {

data="<div id=imageDialog class='alert' style='z-index: 9999;position: absolute'>OLALA</div>";

if (!$('#imageDialog').length) {

$("#saveweldingandmark").append(data);

}

moveImageTools(e);

};

function moveImageTools (e) {

var w = $('#imageDialog').width();

var h = $('#imageDialog').height();

$('#imageDialog').show();

$('#imageDialog').css({top: my, left: mx});

}

var MouseCoords = {

getX: function(e){

if (e.pageX) {

return e.pageX;

} else

if (e.clientX) {

return e.clientX+(document.documentElement.scrollLeft || document.body.scrollLeft) - document.documentElement.clientLeft;

}

return 0;

getY: function(e){

if (e.pageY){

return e.pageY;

} else

if (e.clientY) {

return e.clientY+(document.documentElement.scrollTop || document.body.scrollTop) - document.documentElement.clientTop;

}

return 0;

}

};

document.onmousemove = function(e){

if (!e) e = window.event;

mx=MouseCoords.getX(e);

my=MouseCoords.getY(e);

};

canvas.on('mouse:over', function (e) {

console.log("Я на что-то наехал...");

showImageTools(e.target);

});

canvas.on('mouse:out', function (e) {

$('#imageDialog').remove();

});

Оставить комментарий fabric.js, fabricjs, hint, подсказка

Библиотека для работы с графикой на JavaScript

28.07.2015 Павел Грибов WEB

Последнее время активно работаю с библиотекой fabric.js, для работы с графикой на JavaScript, а именно делаю «редактор муфт»:

Библиотека позволяет на холсте canvas работать с графикой как с объектами: выделять, изменять, назначать обработчики событий (выделение, клик, перемещение и т.п.) для каждого объекта. Ну и еще много всего. В то-же время она достаточно проста в освоении.

Однако приведу несколько моментов, на которые пришлось потратить время, что-бы разобраться:

1) Перебор всех объектов в canvas:

         canvas.forEachObject(function(obj) {    
          };

1 2	canvas.forEachObject(function(obj) { };

2) Для очистки canvas от всех объектов:

canvas.clear();

1	canvas.clear();

3) Закраска объекта градиентом:

              var rect = new fabric.Rect({left: 20,top: 0,fill: 'yellow',width: wx-40,height: steph,selectable:false,shadow: 'green 2px 2px 2px'});
                        rect.setGradient('fill', {x1: 0,y1: 0,x2: 0,y2:  rect.height,colorStops: {1: '#000',0: '#fff'}});              
                        canvas.add(rect);

var rect = new fabric.Rect({left: 20,top: 0,fill: 'yellow',width: wx-40,height: steph,selectable:false,shadow: 'green 2px 2px 2px'});

rect.setGradient('fill', {x1: 0,y1: 0,x2: 0,y2: rect.height,colorStops: {1: '#000',0: '#fff'}});

canvas.add(rect);

4) Назначение событий:

canvas.on('object:selected', function(e) {
    p = e.target;
// в p сейчас, обьект по которому "щелкнули"
 });

canvas.on('object:selected', function(e) {

p = e.target;

// в p сейчас, обьект по которому "щелкнули"

});

Оставить комментарий fabric.js, javascript

« 1 … 37 38 39 40 41 … 55 »

Пн	Вт	Ср	Чт	Пт	Сб	Вс
			1	2	3	4
5	6	7	8	9	10	11
12	13	14	15	16	17	18
19	20	21	22	23	24	25
26	27	28	29	30	31