Библиотека jsgraphics

[Alex]

Библиотека jsgraphics для отображения графики при помощи js.

Фактически это параллельная ветка разработки s2 индикаторов. Примерно то же самое, только сбоку.

Пока два новых элемента.

----------
Внимание! Альфа версия, выложенная по просьбе трудящихся. Никаких гарантий, скорее наоборот.
----------

Распаковать папку
jsgraphics

в папку
htdocs


Пример использования:

Код: Выделить всё

<script src="/jsgraphics/jsgraphics.js"></script>
<script src="/jsgraphics/timeline2c.js"></script>
<script language="javascript" type="text/javascript" src="/jsgraphics/level2.js"></script>

<div style="background:#000000;">
<canvas id="lev3" width="80" height="30">Canvas not supported</canvas><br><br>
<canvas id="cpu2" width="184" height="29">Canvas not supported</canvas>
</div>

<script type="text/javascript">
	
	cpulevel2 = new timeline2c('cpu2', 'serverCPUload.value', 'CPU2:', 2000, '%'); 
	cpulevel2.alertmin = 0;
	cpulevel2.alertmax = 75;
	cpulevel2.background = 'rgba(0, 0, 0, 1)';
	cpulevel2.color = 'rgba(200, 200, 200, 1)';
	cpulevel2.border = 0;
	cpulevel2.basecolor = 'rgba(100, 100, 100, 1)';
	cpulevel2.grid = 0;
	cpulevel2.redraw();

	level_3 = new level2('lev3', 'serverHDDtemp.value0', 'HDD TEMP', 2000, 'C'); 
	level_3.alertmin = 0;
	level_3.alertmax = 45;
	//level_3.background = 'rgba(200, 40, 40, 1)';
	level_3.max_ = 48;
	level_3.min_ = 15;
	level_3.yellow_ = 45;
	level_3.red_ = 43;
	level_3.orange_ = 41;
	level_3.green_ = 20;
	level_3.blue_ = 10;
	level_3.cyan_ = 0;
	level_3.redraw();

</script>

[Alex]

State1 индикатор (часть jsgraphics библиотеки).
Версия: глубокая альфа (выкладываю по просьбам трудящихся на их (ваш) страх и риск).

Файл state1.js нужно положить в папку библиотеки jsgraphics (см. первый пост ветки).

Интерфейс:

Код: Выделить всё

/*
state1 indicator version 1.0
(part of jsgraphics library)

Dim: 50px x 28px

Interface
---------

[Intervals 1, 2, 3, 4, 5, 6]
int1_min =
int1_max =
int1_color =

int2_min =
int2_max =
int2_color =
...

[Type]
1 - circle
2 - rect

[Alert]
alertmin =
alertmax =

[Theme]
Black*
this.background = 'rgba(0, 0, 0, 1)';
this.color_title = 'rgba(220, 220, 220, 1)';
White
this.background = 'rgba(255, 255, 255, 1)';
this.color_title = 'rgba(60, 60, 60, 1)';

Notes
-----

'rgba(230, 230, 50, 1)';} // yellow
'rgba(225, 60, 50, 1)';} // red
'rgba(210, 160, 50, 1)';} // orange
'rgba(50, 200, 50, 1)';} // green
'rgba(140, 140, 225, 1)';} // blue
'rgba(50, 230, 230, 1)';} // cyan

*/ 

Использование:

Код: Выделить всё

<script language="javascript" type="text/javascript" src="/jsgraphics/jsgraphics.js"></script>
<script language="javascript" type="text/javascript" src="/jsgraphics/state1.js"></script>



<canvas id="stt1" width="50" height="28">Canvas not supported</canvas>


<script type="text/javascript">
    st1 = new state1('stt1', 'MajorDoMo.health', 'SYSTEM', 20000, 1);
    st1.alertmin = 75;
    st1.alertmax = 1000;

    st1.int1_min = 100; st1.int1_max = 101; st1.int1_color = 'rgba(50, 200, 50, 1)'; // green
    st1.int2_min = 75; st1.int2_max = 99; st1.int2_color = 'rgba(210, 160, 50, 1)';  // orange
    st1.int3_min = 50; st1.int3_max = 74; st1.int3_color = 'rgba(225, 60, 50, 1)'; // red
    st1.int4_min = 25; st1.int4_max = 49; st1.int4_color = 'rgba(140, 140, 225, 1)'; // blue
    st1.int5_min = 0; st1.int5_max = 24; st1.int5_color = 'rgba(50, 230, 230, 1)'; // cyan
    st1.redraw();    
</script>

Объект MajorDoMo.health нужно заменить на свой, в котором свойство health меняется от 0 до 100 (%).

[PAV]

А что такое 20000, 1?
Сделать индикатор с двумя состояниями (com.alive=1)
st1 = new state1('stt1', 'com.alive', 'SYSTEM', 20000, 1);
st1.int1_min = 1; st1.int1_max = 1; st1.int1_color = 'rgba(50, 200, 50, 1)'; // green
st1.int2_min = 0; st1.int2_max = 0; st1.int2_color = 'rgba(210, 160, 50, 1)'; // orange

Правильно? Не работает, не кажет цвет ;(

[Alex]

> А что такое 20000, 1?

20000 – 20 секунд интервал обновления
1 — прямоугольный тип индикатора

> Правильно? Не работает, не кажет цвет ;(

Есть три пути:

1. Попробовать интервалы 0..1 и 1..2
2. Если не пойдёт — попробовать 0 или 1 преобразовать в другой диапазон (как-нибудь средствами М), например 0..10 и 10..20 и уже этот диапазон индицировать
3. залезть в код индикатора и изменить этот код под свои нужды

[Alex]

Анонс.

Вот для этих индикаторов нужны 2 функции:

1. реакция на маусовер и
2. реакция на клик по заданному региону.

Т. е. нужны сами функции, а реакцию я сам опишу. Да и для других индикаторов эти функции пригодятся.

Ау, знатоки js.

[PAV]

Если получилось, можно код индикатора с двумя положениями - вкл/выкл?

[Alex]

Знатоки js не откликнулись, а самому разбираться пока нет времени.

[zlayaptichka]

Анонс.

Вот для этих индикаторов нужны 2 функции:

1. реакция на маусовер

Код: Выделить всё

// Реакция на наведение мышки
$("#canvas").on("mouseover", function(){
    console.log("Mouse over");
});

[zlayaptichka]

Анонс.

Вот для этих индикаторов нужны 2 функции:

1. реакция на маусовер и
2. реакция на клик по заданному региону.

Т. е. нужны сами функции, а реакцию я сам опишу. Да и для других индикаторов эти функции пригодятся.

Ау, знатоки js.

Код: Выделить всё

// Creating canvas
var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");
// Drawing functions
function redrawImage() {
    // Clearing canvas
    canvas.width = canvas.width;
    // Filling it with color
    context.fillStyle = '#8ED6FF';
    context.fillRect(0, 0, 306, 306);
}
function viewSquares() {
    // Creating squares
    context.strokeStyle = "#FF0000";
    context.strokeRect(120, 15, 75, 75);
    context.strokeRect(125, 160, 75, 75);
}
// Setting up listeners
$(window).load(function(){
    redrawImage();
    $("#canvas").on("mouseover", function(){
        viewSquares();
    }).on("mouseout", function(){
        redrawImage();
    }).on("click", function(e){
        var pos = getCursorPosition(e.originalEvent);
        // checking for first square
        if(
            pos.x > 120 && pos.x < (120 + 75) &&
            pos.y > 15 && pos.y < (15 + 75)
        ) {
            // filling it
            context.fillStyle = "#FF0000";
            context.fillRect(120, 15, 75, 75);
        }
        // checking for second square
        if(
            pos.x > 125 && pos.x < (125 + 75) &&
            pos.y > 160 && pos.y < (160 + 75)
        ) {
            // filling it
            context.fillStyle = "#FF0000";
            context.fillRect(125, 160, 75, 75);
        }
    });
});
// Mouse click logic
// from http://htmlbook.ru/html5/canvas
function getCursorPosition(e) {
    if (e.pageX != undefined && e.pageY != undefined) {
        var x = e.pageX;
        var y = e.pageY;
    } else {
        var x = e.clientX + document.body.scrollLeft + document.documentElement.scrollLeft;
        var y = e.clientY + document.body.scrollTop + document.documentElement.scrollTop;
    }
    x -= canvas.offsetLeft;
    y -= canvas.offsetTop;
    return {x: x, y: y};
}

Пример: https://main.zlayaptichka.ru/canvas_demo.html

[Alex]

zlayaptichka, спасибо за помощь с яваскриптом. Но всё оказалось несколько сложнее. Всё дело в том, что код нужно встроить в библиотеку jsgraphics или модуль state2, а там «прототипы» и всё работает через «this.»,

По этим причинам использование jquery не подходит, нужен чистый яваскрипт, да ещё совмещённый с логикой модуля (исходный код модуля можно посмотреть на этой странице чуть выше — state1 — они почти идентичны с state2).

События удалось отследить таким кодом:


this.elem.onclick = my_onclick();

my_onclick = function () {
this.context.fillStyle = this.background_over;
alert('my_onclick');
}


this.elem.onmouseover = my_onmouseover();

my_onmouseover = function () {
this.context.fillStyle = this.background_over;
alert('my_onmouseover');
}


но! в таком виде строка с алертом работает, а строка с this.context.fillStyle — нет.

В общем, нужно либо переписать нормально функции (и встроить в модуль), либо подсказать, как заставить работать строку this.context.fillStyle из этой конструкции.