MajorDoMo

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

<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>

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

/*
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>

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

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

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

// 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};
}