commit 782b5f8914b0dbcf962356b73e3c0ecc44a9d6c1
Author: Georgy.Khatuncev <google_12345@mail.ru>
Date:   Sat Sep 21 00:32:07 2024 +0500

    Optimize test page

diff --git a/CanvasCycleVDP/BlinkStatus.js b/CanvasCycleVDP/BlinkStatus.js
new file mode 100644
index 0000000..2a4b899
--- /dev/null
+++ b/CanvasCycleVDP/BlinkStatus.js
@@ -0,0 +1,110 @@
+function BlinkStatus(x, y, w, h) {
+	//Основной прямоугольник
+	var rAll = new Rectangle(x, y, w, h);
+	//Массив цветов статусов
+	var statColor = [];
+	//Текущий статус
+	var status = -1;
+	/*Проценты поднимаются снизу вверх (false)
+	 *или слева направо (true)*/
+	var rotate = false;
+	/*Функции для работы с координатами
+	* основного прямоугольника */
+	this.X = function (val) {
+		if (val === undefined) return rAll().X();
+		rAll().X(val);
+	};
+	this.Y = function (val) {
+		if (val === undefined) return rAll().Y();
+		rAll().Y(val);
+	};
+	this.W = function (val) {
+		if (val === undefined) return rAll().W();
+		rAll().W(val);
+	};
+	this.H = function (val) {
+		if (val === undefined) return rAll().H();
+		rAll().H(val);
+	};
+	//Установка статуса от -1 до (кол-во элементов в массиве статусов - 1)
+	this.Status = function (val) {
+		if (val === undefined) return status;
+		var v = parseInt(val);
+		status = (isNaN(v) || v < -1) ? -1 :
+			v >= statColor.length ? (statColor.length - 1) : v;
+	};
+	//Количество статусов
+	this.StatCount = function () {
+		return statColor.length;
+	};
+	//Функция изменения начальной координаты и размеров прямоугольника
+	this.RectParam = function (_x, _y, _w, _h) {
+		rAll.RectParam(_x, _y, _w, _h);
+	};
+	//Функция изменения прямоугольника по другому прямоугольнику
+	this.Rect = function (val) {
+		if (val === undefined) return rAll;
+		rAll.Rect(val);
+	};
+	//Изменение направления отрисовки текста
+	this.Rotate = function (val) {
+		if (val === undefined) return rotate;
+		rotate = (typeof val === 'boolean') ? val : false;
+	};
+	//Установка нового статуса
+	this.AddStatus = function (index, color) {
+		if (color === undefined) color = '#000';
+		var c = color.match(/^#([0-9a-f]{3}|[0-9a-f]{6})$/i);
+		c = (c === null) ? '#000000' : c[0];
+		var idx = parseInt(index);
+		if (isNaN(idx) || idx < 0 || idx > statColor.length - 1)
+			statColor.push(c);
+		else
+			statColor.splice(idx, 0, c);
+	};
+	//Изменение статуса
+	this.ChangeStatus = function (index, color) {
+		if (color === undefined) color = '#000';
+		var c = color.match(/^#([0-9a-f]{3}|[0-9a-f]{6})$/i);
+		c = (c === null) ? '#000000' : c[0];
+		var idx = parseInt(index);
+		if (!isNaN(idx) && idx >= 0 && idx < statColor.length)
+			statColor.splice(idx, 1, c);
+	};
+	//Удаление статуса
+	this.DelStatus = function (index) {
+		var idx = parseInt(index);
+		if (!isNaN(idx) && idx >= 0 && idx < statColor.length)
+			statColor.splice(idx, 1);
+		else if (statColor.length > 0)
+			statColor.pop();
+	};
+	//Заполнение мигалки по умолчанию
+	this.BuildDefault = function () {
+		var defaultColor = ['#00f', '#f00', '#0f0'];
+		for (var i = 0; i < defaultColor.length; i++)
+			this.AddStatus(0, defaultColor[i]);
+	};
+	//Печать мигалки
+	this.Print = function (ctx) {
+		ctx.fillStyle = status >= 0 && status < statColor.length ? statColor[status] : '#ddd';
+		ctx.fillRect(rAll.X(), rAll.Y(), rAll.W(), rAll.H());
+		ctx.strokeStyle = '#000'; //'#333'
+		ctx.strokeRect(rAll.X(), rAll.Y(), rAll.W(), rAll.H());
+	};
+	//Печать текста мигалки
+	this.PrintText = function (ctx) {
+		ctx.save();
+		ctx.translate(rAll.X() + rAll.W() / 2, rAll.Y() + rAll.H() / 2);
+		if (rotate) ctx.rotate(3 * Math.PI / 2);
+		ctx.fillStyle = '#888';
+		ctx.textAlign = 'center';
+		ctx.textBaseline = 'middle';
+		if (rotate)
+			ctx.font = (rAll.W() - 2 < 0 ? 0 : rAll.W() - 2) + 'px Arial';
+		else
+			ctx.font = (rAll.H() - 2 < 0 ? 0 : rAll.H() - 2) + 'px Arial';
+		ctx.fillText((status + 1) + '/' + statColor.length, 0, 0);
+		ctx.restore();
+	};
+}
\ No newline at end of file
diff --git a/CanvasCycleVDP/Diagram.js b/CanvasCycleVDP/Diagram.js
new file mode 100644
index 0000000..d5e823f
--- /dev/null
+++ b/CanvasCycleVDP/Diagram.js
@@ -0,0 +1,295 @@
+function Diagram(x, y, w, h) {
+// \|/��������� ��� ��������\|/ //
+	//���������� ����� ���������
+	var stI = 2;
+	//���������� ����� ����������
+	var stE = 2;
+	//����������� ������ �������
+	var szE = 4;
+	//������ �������
+	var szB = 10;
+	//������ ������
+	var szN = 17;
+	//����������� ������ �������
+	var szP = 40;
+	//�������� ����������
+	var timeCycle = 1000;
+// /|\��������� ��� ��������/|\ //
+	//�������� �������������
+	var rAll = new Rectangle(x, y, w, h);
+	//������ ��������� ��� ��������
+	var rProc = [];
+	//������ ��������� ��� �������
+	var rBlink = [];
+	//������ ��������� ��� ������
+	var rNumb = [];
+	//������ ��������� ��� ����� ������ ��������
+	var rDStart = [];
+	//������ ��������� ��� ����� ����� ��������
+	var rDEnd = [];
+	//���� ��������� �����
+	var cCycle = false;
+	//������ ����� ��� ����������
+	var wCycle = -1;
+	/*�������� ����������� ����� ����� (false)
+	 *��� ����� ������� (true)*/
+	var rotate = false;
+	//������ ����������� ������
+	this.minBoardW = function () {
+		return (stW + 1) * (rProc.length + 1) + (rProc.length * 5);
+	};
+	//������ ����������� ������
+	this.minBoardH = function () {
+		return (stH + 1) * 4 + szHP + szHB + szHN;
+	};
+	/*������� ��� ������ � ������������
+	* ��������� �������������� */
+	this.X = function (val) {
+		if (val === undefined) return rAll().X();
+		rAll().X(val);
+	};
+	this.Y = function (val) {
+		if (val === undefined) return rAll().Y();
+		rAll().Y(val);
+	};
+	this.W = function (val) {
+		if (val === undefined) return rAll().W();
+		rAll().W(val);
+	};
+	this.H = function (val) {
+		if (val === undefined) return rAll().H();
+		rAll().H(val);
+	};
+	//������� ��������� ��������� ���������� � �������� ��������������
+	this.RectParam = function (_x, _y, _w, _h) {
+		rAll.RectParam(_x, _y, _w, _h);
+	};
+	//������� ��������� �������������� �� ������� ��������������
+	this.Rect = function (val) {
+		if (val === undefined) return rAll;
+		rAll.Rect(val);
+	};
+	//���������� ���������
+	this.ProcCount = function () {
+		return rProc.length;
+	};
+	//��������� ������ ��������
+	this.AddProc = function (index, proc, blink, numb) {
+		var idx = parseInt(index);
+		idx = (isNaN(idx) || idx < 0 || idx >= rProc.length) ? -1 : idx;
+		var date = new Date();
+		if (idx == -1) {
+			rProc.push(proc);
+			rBlink.push(blink);
+			rNumb.push(numb);
+			rDStart.push(date);
+			rDEnd.push(date);
+		} else {
+			rProc.splice(idx, 0, proc);
+			rBlink.splice(idx, 0, blink);
+			rNumb.splice(idx, 0, numb);
+			rDStart.splice(idx, 0, date);
+			rDEnd.splice(idx, 0, date);
+		}
+	};
+	//��������� ��������
+	this.ChangeProc = function (index, proc, blink, numb) {
+		var idx = parseInt(index);
+		idx = (isNaN(idx) || idx < 0 || idx >= rProc.length) ? -1 : idx;
+		var date = new Date();
+		if (idx == -1) return;
+		rProc.splice(idx, 1, proc);
+		rBlink.splice(idx, 1, blink);
+		rNumb.splice(idx, 1, numb);
+		rDStart.splice(idx, 1, date);
+		rDEnd.splice(idx, 1, date);
+	};
+	//�������� ��������
+	this.DelStove = function (index) {
+		if (rProc.length == 0) return;
+		var idx = parseInt(index);
+		idx = (isNaN(idx) || idx < 0 || idx >= rProc.length) ? -1 : idx;
+		if (idx == -1) {
+			rProc.pop();
+			rBlink.pop();
+			rNumb.pop();
+			rDStart.pop();
+			rDEnd.pop();
+		} else {
+			rProc.splice(idx, 1);
+			rBlink.splice(idx, 1);
+			rNumb.splice(idx, 1);
+			rDStart.splice(idx, 1);
+			rDEnd.splice(idx, 1);
+		}
+	};
+	//��������� ������� ������ ��������
+	this.StartDate = function (index, date) {
+		var idx = parseInt(index);
+		idx = (isNaN(idx) || idx < 0 || idx >= rDStart.length) ? -1 : idx;
+		if (idx == -1) return;
+		rDStart[idx] = date;
+	};
+	//��������� ������� ����� ��������
+	this.EndDate = function (index, date) {
+		var idx = parseInt(index);
+		idx = (isNaN(idx) || idx < 0 || idx >= rDStart.length) ? -1 : idx;
+		if (idx == -1) return;
+		rDEnd[idx] = date;
+	};
+	//��������� ���������� ��������
+	this.ChangeStatProc = function (index, stat, percent) {
+		var idx = parseInt(index);
+		if (!isNaN(idx) && idx >= 0 && idx < rProc.length) {
+			rProc[idx].Status(stat);
+			rProc[idx].Percent(percent);
+    }
+	};
+	//��������� ���������� �������
+	this.ChangeStatBlink = function (index, stat) {
+		var idx = parseInt(index);
+		if (!isNaN(idx) && idx >= -1 && idx < rBlink.length)
+			rBlink[idx].Status(stat);
+	};
+	//��������� ���������� ������
+	this.ChangeStatNumb = function (index, prostoy) {
+		var idx = parseInt(index);
+		if (!isNaN(idx) && idx >= 0 && idx < rNumb.length)
+			rNumb[idx].Prostoy(prostoy);
+	};
+	//��������� ����������� ��������� ���������
+	this.Rotate = function (val) {
+		if (val === undefined) return rotate;
+		rotate = (typeof val === 'boolean') ? val : false;
+		for (var i = 0; i < rProc.length; i++) {
+			rProc[i].Rotate(rotate);
+			rNumb[i].Rotate(rotate);
+			rBlink[i].Rotate(rotate);
+		}
+	};
+	//���������� ��������� �� ���������
+	this.BuildDefault = function () {
+		while (rProc.length < 48) {
+			rProc.push(new ProcessColumn(0, 0, 0, 0));
+			rProc[rProc.length - 1].BuildDefault();
+			rBlink.push(new BlinkStatus(0, 0, 0, 0));
+			rBlink[rProc.length - 1].BuildDefault();
+			rNumb.push(new NumberColumn(0, 0, 0, 0, rProc.length));
+			var date = new Date;
+			rDStart.push(date);
+			rDEnd.push(date);
+		}
+	};
+	//����������
+	this.Rebuild = function () {
+		var x = rAll.X() + stE + 1;
+		var y = rAll.Y() + stE + 1;
+		var wAll = rAll.W() - (rProc.length + 1) * (stE + 1);
+		var hAll = rAll.H() - (rProc.length + 1) * (stE + 1);
+		for (var i = 0; i < rProc.length; i++) {
+			var xP = 0, xB = 0, xN = 0;
+			var yP = 0, yB = 0, yN = 0;
+			var wP = 0, wB = 0, wN = 0;
+			var hP = 0, hB = 0, hN = 0;
+			if (!rotate) {
+				xP = x; xB = x; xN = x;
+				var w = Math.ceil(wAll / (rProc.length - i));
+				w = (w < szE) ? szE : w;
+				wAll -= w;
+				wP = w; wB = w; wN = w;
+				hB = szB; hN = szN;
+				hP = rAll.H() - (stI + 1) * 4 - szB - szN;
+				hP = (hP < szP) ? szP : hP;
+				yP = y;
+				yB = yP + hP + (stI + 1);
+				yN = yB + szB + (stI + 1);
+			} else {
+				yP = y; yB = y; yN = y;
+				var h = Math.ceil(hAll / (rProc.length - i));
+				h = (h < szE) ? szE : h;
+				hAll -= h;
+				hP = h; hB = h; hN = h;		
+				wB = szB; wN = szN;
+				wP = rAll.W() - (stI + 1) * 4 - szB - szN;
+				wP = (wP < szP) ? szP : wP;
+				xP = x;
+				xB = xP + wP + (stI + 1);
+				xN = xB + szB + (stI + 1);
+				xN = x;
+				xB = xN + wN + (stI + 1);
+				xP = xB + szB + (stI + 1);
+			}
+			rProc[i].RectParam(xP, yP, wP, hP);
+			rBlink[i].RectParam(xB, yB, wB, hB);
+			rNumb[i].RectParam(xN, yN, wN, hN);
+			if (!rotate)
+				x += wP + stE + 1;
+			else
+				y += hP + stE + 1;				
+		}
+	};
+	//������
+	this.Print = function (a) {
+		updateCycle();
+		this.Rotate(rotate);
+		this.Rebuild();
+		a.clearRect(rAll.X(), rAll.Y(), rAll.W(), rAll.H());
+		a.fillStyle = "#ddd";
+		a.fillRect(rAll.X(), rAll.Y(), rAll.W(), rAll.H());
+		for (var i = 0; i < rProc.length; i++) {
+			rProc[i].Print(a);
+			rBlink[i].Print(a);
+			rNumb[i].Print(a);
+		}
+		a.strokeStyle = "#333";
+		a.strokeRect(rAll.X(), rAll.Y(), rAll.W(), rAll.H());
+	};
+	//������ ������
+	this.PrintText = function (a) {
+		for (var i = 0; i < rProc.length; i++) {
+			rProc[i].PrintText(a);
+			rBlink[i].PrintText(a);
+		}
+	};
+	//���������� ���������
+	function updateCycle(currDate) {
+		var date = (currDate == undefined) ? new Date() : currDate;
+		var cycle = false;
+		for (var i = 0; i < rProc.length; i++) {
+			if (rDStart[i] == rDEnd[i]) continue;
+			var d = rDEnd[i] - rDStart[i];
+			var t = date - rDStart[i];
+			d = 100 * (date - rDStart[i]) / d;
+			rProc[i].Percent(d);
+			rNumb[i].Prostoy(d >= 100);
+			cycle = cycle || d < 100;
+		}
+		cCycle = cCycle && cycle;
+		date.setMilliseconds(date.getMilliseconds() + timeCycle);
+		if (cCycle)
+			if (currDate == undefined)
+				wCycle = setTimeout(updateCycle, timeCycle);
+			else
+				wCycle = setTimeout(updateCycle, timeCycle, date);
+	};
+	//������ ����� ���������� ���������
+	this.Cycle = function (start, currDate) {
+		if (start == undefined || !(typeof start === 'boolean')) return cCycle;
+		if (start) {
+			this.CheckDate();
+			clearTimeout(wCycle);
+			cCycle = true;
+			updateCycle(currDate);
+		}
+	};
+	//�������� ������� ��� ������ �����
+	this.CheckDate = function () {
+		for (var i = 0; i < rProc.length; i++) {
+			if (rDStart[i] > rDEnd[i]) {
+				var tmp = rDStart[i];
+				rDStart[i] = rDEnd[i];
+				rDEnd[i] = tmp;
+			}
+		}
+	};
+};
\ No newline at end of file
diff --git a/CanvasCycleVDP/Diagram.min.js b/CanvasCycleVDP/Diagram.min.js
new file mode 100644
index 0000000..592f3fa
--- /dev/null
+++ b/CanvasCycleVDP/Diagram.min.js
@@ -0,0 +1 @@
+function Rectangle(n,i,e,r){function o(t){t=parseFloat(t);return isNaN(t)||t<0?0:t}this.X=function(t){if(void 0===t)return n;n=o(t)},this.Y=function(t){if(void 0===t)return i;i=o(t)},this.W=function(t){if(void 0===t)return e;e=o(t)},this.H=function(t){if(void 0===t)return r;r=o(t)},this.RectParam=function(t,n,i,e){this.X(t),this.Y(n),this.W(i),this.H(e)},this.Rect=function(t){if(void 0===t)return this;this.RectParam(t.X(),t.Y(),t.W(),t.H())},void 0===n?n=0:this.X(n),void 0===i?i=0:this.Y(i),void 0===e?e=0:this.W(e),void 0===r?r=0:this.H(r)}function PercentColumn(t,n,i,e){var r=new Rectangle(t,n,i,e),o=new Rectangle,s=!1,a=0,l="#000";this.X=function(t){if(void 0===t)return r.X();r.X(t)},this.Y=function(t){if(void 0===t)return r.Y();r.Y(t)},this.W=function(t){if(void 0===t)return r.W();r.W(t)},this.H=function(t){if(void 0===t)return r.H();r.H(t)},this.Percent=function(t){if(void 0===t)return a;t=parseFloat(t),t=isNaN(t)||t<0?0:100<t?100:t;a=t},this.Color=function(t){if(void 0===t)return l;t=t.match(/^#([0-9a-f]{3}|[0-9a-f]{6})$/i);l=null===t?"#000000":t[0]},this.RectParam=function(t,n,i,e){r.RectParam(t,n,i,e)},this.Rect=function(t){if(void 0===t)return r;r.Rect(t)},this.Rotate=function(t){if(void 0===t)return s;s="boolean"==typeof t&&t},this.Print=function(t){var n;n=(s?r.W():r.H())*a/100,o.RectParam(r.X(),s?r.Y():r.Y()+r.H()-n,s?n:r.W(),s?r.H():n),t.fillStyle=l,t.strokeStyle=l,t.fillRect(o.X(),o.Y(),o.W(),o.H()),t.strokeRect(r.X(),r.Y(),r.W(),r.H())},this.PrintText=function(t){t.save(),t.translate(r.X()+r.W()/2,r.Y()+r.H()/2),s||t.rotate(3*Math.PI/2),t.fillStyle="#888",t.textAlign="center",t.textBaseline="middle",t.font=s?(r.H()-10<0?0:r.H()-10)+"px Arial":(r.W()-10<0?0:r.W()-10)+"px Arial",t.fillText(Math.floor(100*a)/100+"%",0,0),t.restore()}}function ProcessColumn(t,n,i,e){var s=new Rectangle(t,n,i,e),a=[],l=[],r=0,o=-1,f=!1;function u(t,n){var i=parseInt(t),n=parseFloat(n);if(!isNaN(i)){for(;i>=l.length;)l.push(1);l[i]=isNaN(n)||n<=0?1:n}}function c(){for(var t=0,n=0;n<l.length;n++)t+=l[n];return t}function h(){var t=(t=(f?s.W():s.H())-(1+a.length))<0?0:t;return c()<=0?0:t/c()}function d(){for(var t=0;t<a.length;t++)a[t].Percent(t<o?100:t==o?r:0)}function p(){for(var t=s.X()+1,n=s.Y()+1,i=0;i<a.length;i++){var e=f?i:a.length-(i+1),r=f?l[e]*h():s.W()-2,o=f?s.H()-2:l[e]*h();a[e].RectParam(t,n,r,o),t=f?t+1+r:t,n=f?n:n+1+o}}this.X=function(t){if(void 0===t)return s().X();s().X(t)},this.Y=function(t){if(void 0===t)return s().Y();s().Y(t)},this.W=function(t){if(void 0===t)return s().W();s().W(t)},this.H=function(t){if(void 0===t)return s().H();s().H(t)},this.Percent=function(t){if(void 0===t)return r;t=parseFloat(t);r=isNaN(t)||t<0?0:100<t?100:t},this.Status=function(t){if(void 0===t)return o;t=parseInt(t);o=isNaN(t)||t<-1||0===a.length?-1:t>=a.length?a.length-1:t},this.RectParam=function(t,n,i,e){s.RectParam(t,n,i,e)},this.Rect=function(t){if(void 0===t)return s;s.Rect(t)},this.Rotate=function(t){if(void 0===t)return f;f="boolean"==typeof t&&t;for(var n=0;n<a.length;n++)a[n].Rotate(f)},this.StatCount=function(){return a.length},this.AddRStat=function(t,n,i){t=parseInt(t);isNaN(t)||t<0||t-1>a.length?(a.push(new PercentColumn),t=a.length-1):a.splice(t,0,new PercentColumn),a[t].Color(i),u(t,n)},this.ChangeRStat=function(t,n,i){t=parseInt(t);!isNaN(t)&&0<=t&&t<a.length&&(a[t].Color(i),u(t,n))},this.DelRStat=function(t){t=parseInt(t);!isNaN(t)&&0<=t&&t<a.length?(a.splice(t,1),l.splice(t,1)):0<a.length&&(a.pop(),l.pop())},this.BuildDefault=function(){for(var t=[57,49,49,71,28,49,21,171,114,103],n=["#0ff","#00f","#f00","#0f0","#0ff","#00f","#8500b6","#f00","#f0f","#0f0"];0<a.length;)this.DelRStat();for(var i=0;i<t.length;i++)this.AddRStat(i,t[i],n[i])},this.Print=function(t){this.Rotate(f),d(),p(),t.clearRect(s.X(),s.Y(),s.W(),s.H()),t.fillStyle="#ddd",t.fillRect(s.X(),s.Y(),s.W(),s.H());for(var n=0;n<a.length;n++)n<=o&&a[n].Print(t);t.strokeStyle="#000",t.strokeRect(s.X(),s.Y(),s.W(),s.H())},this.PrintText=function(t){this.Rotate(f),d(),p(),t.save(),t.translate(s.X()+s.W()/2,s.Y()+s.H()/2),f||t.rotate(3*Math.PI/2),t.fillStyle="#888",t.textAlign="center",t.textBaseline="middle",t.font=f?(s.H()-10<0?0:s.H()-10)+"px Arial":(s.W()-10<0?0:s.W()-10)+"px Arial",t.fillText(Math.floor(100*r)/100+"% "+(o+1)+"/"+a.length,0,0),t.restore()}}function BlinkStatus(t,n,i,e){var r=new Rectangle(t,n,i,e),o=[],s=-1,a=!1;this.X=function(t){if(void 0===t)return r().X();r().X(t)},this.Y=function(t){if(void 0===t)return r().Y();r().Y(t)},this.W=function(t){if(void 0===t)return r().W();r().W(t)},this.H=function(t){if(void 0===t)return r().H();r().H(t)},this.Status=function(t){if(void 0===t)return s;t=parseInt(t);s=isNaN(t)||t<-1?-1:t>=o.length?o.length-1:t},this.StatCount=function(){return o.length},this.RectParam=function(t,n,i,e){r.RectParam(t,n,i,e)},this.Rect=function(t){if(void 0===t)return r;r.Rect(t)},this.Rotate=function(t){if(void 0===t)return a;a="boolean"==typeof t&&t},this.AddStatus=function(t,n){void 0===n&&(n="#000");n=null===(n=n.match(/^#([0-9a-f]{3}|[0-9a-f]{6})$/i))?"#000000":n[0],t=parseInt(t);isNaN(t)||t<0||t>o.length-1?o.push(n):o.splice(t,0,n)},this.ChangeStatus=function(t,n){void 0===n&&(n="#000");n=null===(n=n.match(/^#([0-9a-f]{3}|[0-9a-f]{6})$/i))?"#000000":n[0],t=parseInt(t);!isNaN(t)&&0<=t&&t<o.length&&o.splice(t,1,n)},this.DelStatus=function(t){t=parseInt(t);!isNaN(t)&&0<=t&&t<o.length?o.splice(t,1):0<o.length&&o.pop()},this.BuildDefault=function(){for(var t=["#00f","#f00","#0f0"],n=0;n<t.length;n++)this.AddStatus(0,t[n])},this.Print=function(t){t.fillStyle=0<=s&&s<o.length?o[s]:"#ddd",t.fillRect(r.X(),r.Y(),r.W(),r.H()),t.strokeStyle="#000",t.strokeRect(r.X(),r.Y(),r.W(),r.H())},this.PrintText=function(t){t.save(),t.translate(r.X()+r.W()/2,r.Y()+r.H()/2),a&&t.rotate(3*Math.PI/2),t.fillStyle="#888",t.textAlign="center",t.textBaseline="middle",t.font=a?(r.W()-2<0?0:r.W()-2)+"px Arial":(r.H()-2<0?0:r.H()-2)+"px Arial",t.fillText(s+1+"/"+o.length,0,0),t.restore()}}function NumberColumn(t,n,i,e,r){var o=new Rectangle(t,n,i,e),s=!0,a=!1;this.X=function(t){if(void 0===t)return o().X();o().X(t)},this.Y=function(t){if(void 0===t)return o().Y();o().Y(t)},this.W=function(t){if(void 0===t)return o().W();o().W(t)},this.H=function(t){if(void 0===t)return o().H();o().H(t)},this.RectParam=function(t,n,i,e){o.RectParam(t,n,i,e)},this.Rect=function(t){if(void 0===t)return o;o.Rect(t)},this.Number=function(t){if(void 0===t)return r;t=parseInt(t);r=isNaN(t)||t<0?0:t},this.Number(r),this.Prostoy=function(t){if(void 0===t)return s;s="boolean"==typeof t&&t},this.Rotate=function(t){if(void 0===t)return a;a="boolean"==typeof t&&t},this.Print=function(t){t.fillStyle=s?"#ff8000":"#ff0",t.fillRect(o.X(),o.Y(),o.W(),o.H()),t.strokeStyle="#000",t.strokeRect(o.X(),o.Y(),o.W(),o.H()),t.save(),t.translate(o.X()+o.W()/2,o.Y()+o.H()/2),a&&t.rotate(3*Math.PI/2),t.fillStyle="#000",t.textAlign="center",t.textBaseline="middle";var n=(n=o.H()<o.W()?o.H()-3:o.W()-3)<0?0:n;t.font=n+"px Arial",t.fillText(r,0,0),t.restore()}}function Diagram(t,n,i,e){var o=1e3,H=new Rectangle(t,n,i,e),P=[],W=[],N=[],s=[],a=[],l=!1,f=-1,m=!1;function u(t){for(var n,i=null==t?new Date:t,e=!1,r=0;r<P.length;r++)s[r]!=a[r]&&(n=a[r]-s[r],s[r],n=100*(i-s[r])/n,P[r].Percent(n),N[r].Prostoy(100<=n),e=e||n<100);l=l&&e,i.setMilliseconds(i.getMilliseconds()+o),l&&(f=null==t?setTimeout(u,o):setTimeout(u,o,i))}this.minBoardW=function(){return(stW+1)*(P.length+1)+5*P.length},this.minBoardH=function(){return 4*(stH+1)+szHP+szHB+szHN},this.X=function(t){if(void 0===t)return H().X();H().X(t)},this.Y=function(t){if(void 0===t)return H().Y();H().Y(t)},this.W=function(t){if(void 0===t)return H().W();H().W(t)},this.H=function(t){if(void 0===t)return H().H();H().H(t)},this.RectParam=function(t,n,i,e){H.RectParam(t,n,i,e)},this.Rect=function(t){if(void 0===t)return H;H.Rect(t)},this.ProcCount=function(){return P.length},this.AddProc=function(t,n,i,e){var r=parseInt(t),r=isNaN(r)||r<0||r>=P.length?-1:r,t=new Date;-1==r?(P.push(n),W.push(i),N.push(e),s.push(t),a.push(t)):(P.splice(r,0,n),W.splice(r,0,i),N.splice(r,0,e),s.splice(r,0,t),a.splice(r,0,t))},this.ChangeProc=function(t,n,i,e){var r=parseInt(t),r=isNaN(r)||r<0||r>=P.length?-1:r,t=new Date;-1!=r&&(P.splice(r,1,n),W.splice(r,1,i),N.splice(r,1,e),s.splice(r,1,t),a.splice(r,1,t))},this.DelStove=function(t){0!=P.length&&(t=parseInt(t),-1==(t=isNaN(t)||t<0||t>=P.length?-1:t)?(P.pop(),W.pop(),N.pop(),s.pop(),a.pop()):(P.splice(t,1),W.splice(t,1),N.splice(t,1),s.splice(t,1),a.splice(t,1)))},this.StartDate=function(t,n){t=parseInt(t);-1!=(t=isNaN(t)||t<0||t>=s.length?-1:t)&&(s[t]=n)},this.EndDate=function(t,n){t=parseInt(t);-1!=(t=isNaN(t)||t<0||t>=s.length?-1:t)&&(a[t]=n)},this.ChangeStatProc=function(t,n,i){t=parseInt(t);!isNaN(t)&&0<=t&&t<P.length&&(P[t].Status(n),P[t].Percent(i))},this.ChangeStatBlink=function(t,n){t=parseInt(t);!isNaN(t)&&-1<=t&&t<W.length&&W[t].Status(n)},this.ChangeStatNumb=function(t,n){t=parseInt(t);!isNaN(t)&&0<=t&&t<N.length&&N[t].Prostoy(n)},this.Rotate=function(t){if(void 0===t)return m;m="boolean"==typeof t&&t;for(var n=0;n<P.length;n++)P[n].Rotate(m),N[n].Rotate(m),W[n].Rotate(m)},this.BuildDefault=function(){for(;P.length<48;){P.push(new ProcessColumn(0,0,0,0)),P[P.length-1].BuildDefault(),W.push(new BlinkStatus(0,0,0,0)),W[P.length-1].BuildDefault(),N.push(new NumberColumn(0,0,0,0,P.length));var t=new Date;s.push(t),a.push(t)}},this.Rebuild=function(){for(var t=H.X()+2+1,n=H.Y()+2+1,i=H.W()-3*(P.length+1),e=H.H()-3*(P.length+1),r=0;r<P.length;r++){var o,s=0,a=0,l=0,f=0,u=0,c=0,h=0,d=0,p=0,v=0,g=0,R=0;m?(c=u=f=n,e-=o=(o=Math.ceil(e/(P.length-r)))<4?4:o,R=g=v=o,d=10,p=17,l=(a=(s=t)+(h=(h=H.W()-12-10-17)<40?40:h)+3)+10+3,s=(a=(l=t)+p+3)+10+3):(l=a=s=t,i-=o=(o=Math.ceil(i/(P.length-r)))<4?4:o,p=d=h=o,g=10,R=17,c=(u=(f=n)+(v=(v=H.H()-12-10-17)<40?40:v)+3)+10+3),P[r].RectParam(s,f,h,v),W[r].RectParam(a,u,d,g),N[r].RectParam(l,c,p,R),m?n+=v+2+1:t+=h+2+1}},this.Print=function(t){u(),this.Rotate(m),this.Rebuild(),t.clearRect(H.X(),H.Y(),H.W(),H.H()),t.fillStyle="#ddd",t.fillRect(H.X(),H.Y(),H.W(),H.H());for(var n=0;n<P.length;n++)P[n].Print(t),W[n].Print(t),N[n].Print(t);t.strokeStyle="#333",t.strokeRect(H.X(),H.Y(),H.W(),H.H())},this.PrintText=function(t){for(var n=0;n<P.length;n++)P[n].PrintText(t),W[n].PrintText(t)},this.Cycle=function(t,n){if(null==t||"boolean"!=typeof t)return l;t&&(this.CheckDate(),clearTimeout(f),l=!0,u(n))},this.CheckDate=function(){for(var t,n=0;n<P.length;n++)s[n]>a[n]&&(t=s[n],s[n]=a[n],a[n]=t)}}
\ No newline at end of file
diff --git a/CanvasCycleVDP/NumberColumn.js b/CanvasCycleVDP/NumberColumn.js
new file mode 100644
index 0000000..8f71564
--- /dev/null
+++ b/CanvasCycleVDP/NumberColumn.js
@@ -0,0 +1,71 @@
+function NumberColumn(x, y, w, h, number) {
+	//Основной прямоугольник
+	var rAll = new Rectangle(x, y, w, h);
+	//Текущий статус по простою
+	var prostoy = true;
+	/*Проценты поднимаются снизу вверх (false)
+	 *или слева направо (true)*/
+	var rotate = false;
+	/*Функции для работы с координатами
+	* основного прямоугольника */
+	this.X = function (val) {
+		if (val === undefined) return rAll().X();
+		rAll().X(val);
+	};
+	this.Y = function (val) {
+		if (val === undefined) return rAll().Y();
+		rAll().Y(val);
+	};
+	this.W = function (val) {
+		if (val === undefined) return rAll().W();
+		rAll().W(val);
+	};
+	this.H = function (val) {
+		if (val === undefined) return rAll().H();
+		rAll().H(val);
+	};
+	//Функция изменения начальной координаты и размеров прямоугольника
+	this.RectParam = function (_x, _y, _w, _h) {
+		rAll.RectParam(_x, _y, _w, _h);
+	};
+	//Функция изменения прямоугольника по другому прямоугольнику
+	this.Rect = function (val) {
+		if (val === undefined) return rAll;
+		rAll.Rect(val);
+	};
+	//Функция установки номера
+	this.Number = function (val) {
+		if (val === undefined) return number;
+		var v = parseInt(val);
+		number = (isNaN(v) || v < 0) ? 0 : v;
+	};
+	this.Number(number);
+	//Функция установки статуса по простою
+	this.Prostoy = function (val) {
+		if (val === undefined) return prostoy;
+		prostoy = (typeof val === 'boolean') ? val : false;
+	};
+	//Изменение направления отрисовки текста
+	this.Rotate = function (val) {
+		if (val === undefined) return rotate;
+		rotate = (typeof val === 'boolean') ? val : false;
+	};
+	//Печать номера
+	this.Print = function (ctx) {
+		ctx.fillStyle = (!prostoy) ? '#ff0' : '#ff8000';
+		ctx.fillRect(rAll.X(), rAll.Y(), rAll.W(), rAll.H());
+		ctx.strokeStyle = '#000';//'#333'
+		ctx.strokeRect(rAll.X(), rAll.Y(), rAll.W(), rAll.H());
+		ctx.save();
+		ctx.translate(rAll.X() + rAll.W() / 2, rAll.Y() + rAll.H() / 2);
+		if (rotate) ctx.rotate(3 * Math.PI / 2);
+		ctx.fillStyle = '#000';
+		ctx.textAlign = 'center';
+		ctx.textBaseline = 'middle';
+		var px = rAll.H() < rAll.W() ? rAll.H() - 3 : rAll.W() - 3;
+		px = px < 0 ? 0 : px;
+		ctx.font = px + 'px Arial';
+		ctx.fillText(number, 0, 0);
+		ctx.restore();
+	};
+}
diff --git a/CanvasCycleVDP/PercentColumn.js b/CanvasCycleVDP/PercentColumn.js
new file mode 100644
index 0000000..eec7bc1
--- /dev/null
+++ b/CanvasCycleVDP/PercentColumn.js
@@ -0,0 +1,92 @@
+function PercentColumn(x, y, w, h) {
+	//Основной прямоугольник
+	var rAll = new Rectangle(x, y, w, h);
+	//Прямоугольник процентов
+	var rPerc = new Rectangle();
+	/*Проценты поднимаются снизу вверх (false)
+	 *или слева направо (true)*/
+	var rotate = false;
+	//Проценты статуса
+	var percent = 0;
+	//Цвет
+	var color = '#000';
+
+	/*Функции для работы с координатами
+	* основного прямоугольника */
+	this.X = function (val) {
+		if (val === undefined) return rAll.X();
+		rAll.X(val);
+	};
+	this.Y = function (val) {
+		if (val === undefined) return rAll.Y();
+		rAll.Y(val);
+	};
+	this.W = function (val) {
+		if (val === undefined) return rAll.W();
+		rAll.W(val);
+	};
+	this.H = function (val) {
+		if (val === undefined) return rAll.H();
+		rAll.H(val);
+	};
+	//Установка процента от 0 до 100
+	this.Percent = function (val) {
+		if (val === undefined) return percent;
+		var v = parseFloat(val);
+		v = (isNaN(v) || v < 0) ? 0 : (v > 100) ? 100 : v;
+		percent = v;
+	};
+	//Установка цвета в формате #****** или #***
+	this.Color = function (val) {
+		if (val === undefined) return color;
+		var c = val.match(/^#([0-9a-f]{3}|[0-9a-f]{6})$/i);
+		color = (c === null) ? '#000000' : c[0];
+	};
+	//Функция изменения начальной координаты и размеров прямоугольника
+	this.RectParam = function (_x, _y, _w, _h) {
+		rAll.RectParam(_x, _y, _w, _h);
+	};
+	//Функция изменения прямоугольника по другому прямоугольнику
+	this.Rect = function (val) {
+		if (val === undefined) return rAll;
+		rAll.Rect(val);
+	};
+	//Изменение направления отрисовки процентов
+	this.Rotate = function (val) {
+		if (val === undefined) return rotate;
+		rotate = (typeof val === 'boolean') ? val : false;
+	};
+	//Перерасчитываем элементы
+	function Rebuild() {
+		var size = ((!rotate) ? rAll.H() : rAll.W()) * percent / 100;
+		rPerc.RectParam(
+			rAll.X(),
+			(rotate) ? rAll.Y() : rAll.Y() + rAll.H() - size,
+			(!rotate) ? rAll.W() : size,
+			(rotate) ? rAll.H() : size
+		);
+	}
+	//Рисуем проценты
+	this.Print = function (ctx) {
+		Rebuild();
+		ctx.fillStyle = color;
+		ctx.strokeStyle = color;
+		ctx.fillRect(rPerc.X(), rPerc.Y(), rPerc.W(), rPerc.H());
+		ctx.strokeRect(rAll.X(), rAll.Y(), rAll.W(), rAll.H());
+	};
+	//Рисуем текст
+	this.PrintText = function (ctx) {
+		ctx.save();
+		ctx.translate(rAll.X() + rAll.W() / 2, rAll.Y() + rAll.H() / 2);
+		if (!rotate) ctx.rotate(3 * Math.PI / 2);
+		ctx.fillStyle = '#888';
+		ctx.textAlign = 'center';
+		ctx.textBaseline = 'middle';
+		if (!rotate)
+			ctx.font = (rAll.W() - 10 < 0 ? 0 : rAll.W() - 10) + 'px Arial';
+		else
+			ctx.font = (rAll.H() - 10 < 0 ? 0 : rAll.H() - 10) + 'px Arial';
+		ctx.fillText(Math.floor(percent * 100) / 100 + '%', 0, 0);
+		ctx.restore();
+	};
+}
diff --git a/CanvasCycleVDP/ProcessColumn.js b/CanvasCycleVDP/ProcessColumn.js
new file mode 100644
index 0000000..601492e
--- /dev/null
+++ b/CanvasCycleVDP/ProcessColumn.js
@@ -0,0 +1,183 @@
+function ProcessColumn(x, y, w, h) {
+	//Основной прямоугольник
+	var rAll = new Rectangle(x, y, w, h);
+	//Массив элементов под статусы
+	var rStat = [];
+	//Массив элементы под коэффициенты
+	var point = [];
+	//Проценты статуса
+	var percent = 0;
+	//Номер статуса
+	var status = -1;
+	/*Проценты поднимаются снизу вверх (false)
+	 *или слева направо (true)*/
+	var rotate = false;
+	/*Функции для работы с координатами
+	* основного прямоугольника */
+	this.X = function (val) {
+		if (val === undefined) return rAll().X();
+		rAll().X(val);
+	};
+	this.Y = function (val) {
+		if (val === undefined) return rAll().Y();
+		rAll().Y(val);
+	};
+	this.W = function (val) {
+		if (val === undefined) return rAll().W();
+		rAll().W(val);
+	};
+	this.H = function (val) {
+		if (val === undefined) return rAll().H();
+		rAll().H(val);
+	};
+	//Установка процента от 0 до 100
+	this.Percent = function (val) {
+		if (val === undefined) return percent;
+		var v = parseFloat(val);
+		percent = (isNaN(v) || v < 0) ? 0 :
+			(v > 100) ? 100 : v;
+	};
+	//Установка статуса от 0 до (кол-во элементов в массиве статусов - 1)
+	this.Status = function (val) {
+		if (val === undefined) return status;
+		var v = parseInt(val);
+		status = (isNaN(v) || v < -1 || rStat.length === 0) ? -1 :
+			(v >= rStat.length) ? (rStat.length - 1) : v;
+	};
+	//Функция изменения начальной координаты и размеров прямоугольника
+	this.RectParam = function (_x, _y, _w, _h) {
+		rAll.RectParam(_x, _y, _w, _h);
+	};
+	//Функция изменения прямоугольника по другому прямоугольнику
+	this.Rect = function (val) {
+		if (val === undefined) return rAll;
+		rAll.Rect(val);
+	};
+	//Изменение направления отрисовки процентов
+	this.Rotate = function (val) {
+		if (val === undefined) return rotate;
+		rotate = (typeof val === 'boolean') ? val : false;
+		for (var i = 0; i < rStat.length; i++)
+			rStat[i].Rotate(rotate);
+	};
+	//Количество статусов
+	this.StatCount = function () {
+		return rStat.length;
+	};
+	//Установка коеффициента
+	function Point(_index, _point) {
+		var idx = parseInt(_index);
+		var pnt = parseFloat(_point);
+		if (!isNaN(idx)) {
+			while (idx >= point.length)
+				point.push(1);
+			point[idx] = isNaN(pnt) || pnt <= 0 ? 1 : pnt;
+		}
+	}
+	//Установка нового статуса
+	this.AddRStat = function (index, point, color) {
+		var idx = parseInt(index);
+		if (isNaN(idx) || idx < 0 || idx - 1 > rStat.length) {
+			rStat.push(new PercentColumn());
+			idx = rStat.length - 1;
+		}
+		else
+			rStat.splice(idx, 0, new PercentColumn());
+		rStat[idx].Color(color);
+		Point(idx, point);
+	};
+	//Изменение статуса
+	this.ChangeRStat = function (index, point, color) {
+		var idx = parseInt(index);
+		if (!isNaN(idx) && idx >= 0 && idx < rStat.length) {
+			rStat[idx].Color(color);
+			Point(idx, point);
+		}
+	};
+	//Удаление статуса
+	this.DelRStat = function (index) {
+		var idx = parseInt(index);
+		if (!isNaN(idx) && idx >= 0 && idx < rStat.length) {
+			rStat.splice(idx, 1);
+			point.splice(idx, 1);
+		}
+		else if (rStat.length > 0) {
+			rStat.pop();
+			point.pop();
+		}
+	};
+	//Заполнение столбца процесса по умолчанию
+	this.BuildDefault = function () {
+		var defaultPoint = [57, 49, 49, 71, 28, 49, 21, 171, 114, 103];
+		var defaultColor = ["#0ff", "#00f", "#f00", "#0f0", "#0ff", "#00f", "#8500b6", "#f00", "#f0f", "#0f0"];
+		while (rStat.length > 0)
+			this.DelRStat();
+		for (var i = 0; i < defaultPoint.length; i++)
+			this.AddRStat(i, defaultPoint[i], defaultColor[i]);
+	};
+	//Сумма всех коэффициентов
+	function AllPoint() {
+		var count = 0;
+		for (var i = 0; i < point.length; i++)
+			count += point[i];
+		return count;
+	}
+	//
+	function PointSize() {
+		var res = ((rotate) ? rAll.W() : rAll.H()) - (1 + rStat.length);
+		res = (res < 0) ? 0 : res;
+		return (AllPoint() <= 0) ? 0 : (res / AllPoint());
+	}
+	//Перерасчет статусов и процентов
+	function Restat() {
+		for (var i = 0; i < rStat.length; i++) {
+			rStat[i].Percent(i < status ? 100 : i == status ? percent : 0);
+		}
+	}
+	//Перерасчет размеров статусов
+	function Rebuild() {
+		var _x = rAll.X() + 1;
+		var _y = rAll.Y() + 1;
+
+		for (var i = 0; i < rStat.length; i++) {
+			var currStat = (rotate) ? i : rStat.length - (i + 1);
+			var _w = (!rotate) ? rAll.W() - 2 : point[currStat] * PointSize();
+			var _h = (rotate) ? rAll.H() - 2 : point[currStat] * PointSize();
+			rStat[currStat].RectParam(_x, _y, _w, _h);
+			_x = (!rotate) ? _x : _x + 1 + _w;
+			_y = (rotate) ? _y : _y + 1 + _h;
+		}
+	}
+	//Печать столбца процесса
+	this.Print = function (ctx) {
+		this.Rotate(rotate);
+		Restat();
+		Rebuild();
+		ctx.clearRect(rAll.X(), rAll.Y(), rAll.W(), rAll.H());
+		ctx.fillStyle = '#ddd';
+		ctx.fillRect(rAll.X(), rAll.Y(), rAll.W(), rAll.H());
+		for (var i = 0; i < rStat.length; i++)
+			if (i <= status)
+				rStat[i].Print(ctx);
+		ctx.strokeStyle = '#000'; //'#333'
+		ctx.strokeRect(rAll.X(), rAll.Y(), rAll.W(), rAll.H());
+	};
+	//Печать текста столбца процесса
+	this.PrintText = function (ctx) {
+		this.Rotate(rotate);
+		Restat();
+		Rebuild();
+		ctx.save();
+		ctx.translate(rAll.X() + rAll.W() / 2, rAll.Y() + rAll.H() / 2);
+		if (!rotate) ctx.rotate(3 * Math.PI / 2);
+		ctx.fillStyle = '#888';
+		ctx.textAlign = 'center';
+		ctx.textBaseline = 'middle';
+		if (!rotate)
+			ctx.font = (rAll.W() - 10 < 0 ? 0 : rAll.W() - 10) + 'px Arial';
+		else
+			ctx.font = (rAll.H() - 10 < 0 ? 0 : rAll.H() - 10) + 'px Arial';
+		ctx.fillText((Math.floor(percent * 100) / 100) + '% ' + (status + 1) + '/' + rStat.length, 0, 0);
+		ctx.restore();
+	};
+}
\ No newline at end of file
diff --git a/CanvasCycleVDP/Rectangle.js b/CanvasCycleVDP/Rectangle.js
new file mode 100644
index 0000000..c1795e5
--- /dev/null
+++ b/CanvasCycleVDP/Rectangle.js
@@ -0,0 +1,46 @@
+//Объявление класса прямоугольника
+function Rectangle(x, y, w, h) {
+	/*Функции для работы с координатами
+	 * основного прямоугольника */
+	function chkVal(val) {
+		var a = parseFloat(val);
+		return (isNaN(a) || a < 0) ? 0 : a;
+	}
+	this.X = function (val) {
+		if (val === undefined) return x;
+		x = chkVal(val);
+	};
+	this.Y = function (val) {
+		if (val === undefined) return y;
+		y = chkVal(val);
+	};
+	this.W = function (val) {
+		if (val === undefined) return w;
+		w = chkVal(val);
+	};
+	this.H = function (val) {
+		if (val === undefined) return h;
+		h = chkVal(val);
+	};
+	//Функция изменения начальной координаты и размеров прямоугольника
+	this.RectParam = function (_x, _y, _w, _h) {
+		this.X(_x);
+		this.Y(_y);
+		this.W(_w);
+		this.H(_h);
+	};
+	//Функция изменения прямоугольника по другому прямоугольнику
+	this.Rect = function (val) {
+		if (val === undefined) return this;
+		this.RectParam(val.X(), val.Y(), val.W(), val.H());
+	};
+	//Первая инициализация
+	if (x === undefined) x = 0;
+	else this.X(x);
+	if (y === undefined) y = 0;
+	else this.Y(y);
+	if (w === undefined) w = 0;
+	else this.W(w);
+	if (h === undefined) h = 0;
+	else this.H(h);
+}
\ No newline at end of file
diff --git a/scripts/test.js b/scripts/test.js
new file mode 100644
index 0000000..75c0e05
--- /dev/null
+++ b/scripts/test.js
@@ -0,0 +1,337 @@
+let canvas = document.getElementById("canvas"); 
+let ctx = canvas.getContext("2d");
+
+//Функция изменения размера полотна
+let menu = document.getElementById('menu'); 
+let resizeTimeout;
+function Resize() {
+	clearTimeout(resizeTimeout);
+	resizeTimeout = setTimeout(() => {
+		canvas.width = window.innerWidth - 20;
+		canvas.height = window.innerHeight - 30 - menu.clientHeight;
+	}, 100);
+}
+window.addEventListener("load", Resize, false);
+window.addEventListener("resize", Resize, false);
+
+//Флаги для теста
+let chkText   = document.getElementById('PText');
+let chkData   = document.getElementById('DefData');
+let chkRotate = document.getElementById('Rotate');
+let chkloop   = document.getElementById('ChkLoop');
+//Глобальные параметры для теста
+const columnHeightBase = 200;
+const columnWidthBase = 40;
+const rectHeightBase = 40;
+const rectWidthBase = 70;
+
+const elementSpacing = 5;
+
+//Функция проверки столбцов процесса
+let but1 = document.getElementById('TestPercent'); 
+but1.onclick = function () {
+	ctx.clearRect(0, 0, canvas.width, canvas.height);
+
+	let height = columnHeightBase;
+	let width = columnWidthBase;
+
+	if (chkRotate.checked){
+		[height, width] = [width, height];
+	}
+
+	const maxColumnsX = Math.floor((canvas.width - 1) / (width + elementSpacing))
+	const maxColumnsY = Math.floor((canvas.height - 1) / (height + elementSpacing))
+	
+	for (let i = 0; i < maxColumnsX; i++) {
+		for (let j = 0; j < maxColumnsY; j++) {
+			const x = (i * (width + elementSpacing)) + 0.5;
+			const y = (j * (height + elementSpacing)) + 0.5;
+			
+			const t = new PercentColumn(x, y, width, height);
+			if (!chkData.checked){
+				t.Color(getRColor());
+			}
+			t.Percent(Math.random() * 101);
+			t.Rotate(chkRotate.checked);
+			t.Print(ctx);
+			if (chkText.checked){
+				t.PrintText(ctx);
+			}
+		}
+	}
+};
+
+//Функция проверки столбцов статусов
+let but2 = document.getElementById('TestProcess'); 
+but2.onclick = function () {
+	ctx.clearRect(0, 0, canvas.width, canvas.height);
+	
+	let height = columnHeightBase;
+	let width = columnWidthBase;
+	
+	if (chkData.checked){
+		height *= 2;
+	}
+
+	if (chkRotate.checked){
+		[height, width] = [width, height];
+	}
+	
+	const count = Math.floor(Math.random() * 6 + 2);
+	const arrPoint = Array.from({ length: count }, () => Math.random() * 5 + 1);
+	const arrColor = Array.from({ length: count }, () => getRColor());
+	
+	const maxColumnsX = Math.floor((canvas.width - 1) / (width + elementSpacing))
+	const maxColumnsY = Math.floor((canvas.height - 1) / (height + elementSpacing))
+
+	
+	for (let i = 0; i < maxColumnsX; i++) {
+		for (let j = 0; j < maxColumnsY; j++) {
+			const x = (i * (width + elementSpacing)) + 0.5;
+			const y = (j * (height + elementSpacing)) + 0.5;
+			
+			const t = new ProcessColumn(x, y, width, height);
+			t.Rotate(chkRotate.checked);
+			if (chkData.checked){
+				t.BuildDefault();
+			} else {
+				for (let k = 0; k < count; k++) {
+					t.AddRStat(k, arrPoint[k], arrColor[k]);
+				}
+			}
+			t.Status(Math.floor(Math.random() * (t.StatCount() + 1) - 1));
+			t.Percent(Math.random() * 101);
+			t.Print(ctx);
+			if (chkText.checked) {
+				t.PrintText(ctx);
+			}
+		}
+	}
+};
+
+//Функция проверки мигалки
+let but3 = document.getElementById('TestBlinkStatus');
+but3.onclick = function () {
+	ctx.clearRect(0, 0, canvas.width, canvas.height);
+
+	let height = rectHeightBase;
+	let width = rectWidthBase;
+
+	if (chkRotate.checked){
+		[height, width] = [width, height];
+	}
+
+	const count = Math.floor(Math.random() * 5 + 1);
+	const arrColor = Array.from({ length: count }, () => getRColor());
+
+	const maxColumnsX = Math.floor((canvas.width - 1) / (width + elementSpacing));
+	const maxColumnsY = Math.floor((canvas.height - 1) / (height + elementSpacing));
+
+	for (let i = 0; i < maxColumnsX; i++) {
+		for (let j = 0; j < maxColumnsY; j++) {
+			const x = (i * (width + elementSpacing)) + 0.5;
+			const y = (j * (height + elementSpacing)) + 0.5;
+			
+			const t = new BlinkStatus( x, y, width, height);
+			t.Rotate(chkRotate.checked);
+			if (chkData.checked) {
+				t.BuildDefault();
+			} else {
+				for (let k = 0; k < count; k++) {
+					t.AddStatus(k, arrColor[k]);
+				}
+			}
+			t.Status(Math.floor(Math.random() * (t.StatCount() + 1) - 1));
+			t.Print(ctx);
+			if (chkText.checked) {
+				t.PrintText(ctx);
+			}
+		}
+	}
+};
+
+//Функция проверки номера
+let but4 = document.getElementById('TestNumberColumn');
+but4.onclick = function () {
+	ctx.clearRect(0, 0, canvas.width, canvas.height);
+	
+	let height = rectHeightBase;
+	let width = rectWidthBase;
+
+	if (chkRotate.checked){
+		[height, width] = [width, height];
+	}
+	
+	const maxColumnsX = Math.floor((canvas.width - 1) / (width + elementSpacing));
+	const maxColumnsY = Math.floor((canvas.height - 1) / (height + elementSpacing));
+	
+	let num = 0;
+	for (var i = 0; i < maxColumnsX; i++) {
+		for (var j = 0; j < maxColumnsY; j++) {
+			const x = (i * (width + elementSpacing)) + 0.5;
+			const y = (j * (height + elementSpacing)) + 0.5;
+			const t = new NumberColumn(x, y, width, height, num++);
+			t.Rotate(chkRotate.checked);
+			t.Prostoy(Math.random() < 0.5);
+			t.Print(ctx);
+		}
+	}
+};
+
+//Переменные для диаграммы
+let cycle;
+let diagTest;
+//Функция цикла
+function cycle_print() {
+	diagTest.RectParam(0.5, 0.5, canvas.width - 1, canvas.height - 1)
+	diagTest.Print(ctx);
+	if (chkText.checked) {
+		diagTest.PrintText(ctx);
+	}
+	if (diagTest.Cycle()) {
+		cycle = setTimeout(cycle_print, 1000);
+	}
+}
+let but5 = document.getElementById('TestDiagramStove');
+but5.onclick = function () {
+	ctx.clearRect(0, 0, canvas.width, canvas.height);
+	diagTest = new Diagram(0.5, 0.5, canvas.width - 1, canvas.height - 1);	
+
+	if (chkData.checked) {
+		diagTest.BuildDefault();
+		for (let i = 0; i < diagTest.ProcCount(); i++) {
+			diagTest.ChangeStatProc(i,
+				Math.floor(Math.random() * 11),
+				Math.floor(Math.random() * 101));
+			diagTest.ChangeStatBlink(i, Math.floor(Math.random() * 5 - 1));
+			diagTest.ChangeStatNumb(i, Math.random() < 0.5);
+		}
+	} else {
+		const countStove = Math.floor(Math.random() * 20 + 30);
+		const countProc = Math.floor(Math.random() * 9 + 1);
+		const countBlink = Math.floor(Math.random() * 4 + 1);
+
+		const colorProc = Array.from({ length: countProc }, () => getRColor());
+		const pointProc = Array.from({ length: countProc }, () => Math.random() * 10);
+		const colorBlink = Array.from({ length: countBlink }, () => getRColor());
+
+		for (let i = 0; i < countStove; i++) {
+			const tP = new ProcessColumn(0, 0, 0, 0);
+			for (let k = 0; k < countProc; k++) {
+				tP.AddRStat(k, pointProc[k], colorProc[k]);
+			}
+			tP.Status(Math.floor(Math.random() * countProc));
+			tP.Percent(Math.floor(Math.random() * 101));
+			
+			const tB = new BlinkStatus(0, 0, 0, 0);
+			for (let k = 0; k < countBlink; k++) {
+				tB.AddStatus(k, colorBlink[k]);
+			}
+			tB.Status(Math.floor(Math.random() * (countBlink + 1) -1));
+
+			const tN = new NumberColumn(0, 0, 0, 0, i + 1);
+			tN.Prostoy(Math.random() < 0.5);
+
+			diagTest.AddProc(i, tP, tB, tN);
+		}
+	}
+	diagTest.Rotate(chkRotate.checked);
+
+	if (chkloop.checked) {
+		for (let i = 0; i < diagTest.ProcCount(); i++) {
+			const dStart = new Date();
+			const dEnd = new Date();
+			dStart.setSeconds(dStart.getSeconds() + Math.floor(Math.random() * 61 - 50));
+			dEnd.setSeconds(dEnd.getSeconds() + Math.floor(Math.random() * 61 - 10));
+			diagTest.StartDate(i, dStart);
+			diagTest.EndDate(i, dEnd);
+		}
+		diagTest.Cycle(true);
+		cycle_print();
+	} else {
+		diagTest.Print(ctx);
+		if (chkText.checked) {
+			diagTest.PrintText(ctx);
+		}
+	}
+};
+
+let but6 = document.getElementById('TestPost');
+let btn6CycleSend;
+
+but6.onclick = function () {
+	sendCycleData();
+}
+
+function sendCycleData() {
+	const url = `${window.location.origin}/currcycles`;
+	fetch(url, {
+		method: 'POST',
+	})
+	.then(response => {
+		if (!response.ok) {
+			throw new Error(`${response.status}: ${response.statusText}`);
+		}
+		return response.text();
+	})
+	.then(data => {
+		PrintDiagram(data);
+		handleLoop();
+	})
+	.catch(error => {
+		alert(error.message);
+	});
+};
+
+function handleLoop() {
+	but6.disabled = chkloop.checked;
+	if (but6.disabled) {
+		btn6CycleSend = setTimeout(sendCycleData, 60000);
+	}
+};
+
+function PrintDiagram(pechstatus) {
+	const Pech = JSON.parse(pechstatus);
+	ctx.clearRect(0, 0, canvas.width, canvas.height);
+	cpnst t = new Diagram(0.5, 0.5, canvas.width - 1, canvas.height - 1);
+	t.BuildDefault();
+	t.Rotate(chkRotate.checked);
+
+	const cycleMapping = {
+		0: { s: 0, b: -1 },
+		1: { s: 0, b: 1 },
+		2: { s: 1, b: 0 },
+		5: { s: 2, b: 0 },
+		6: { s: 3, b: 0 },
+		7: { s: 4, b: 0 },
+		8: { s: 5, b: 3 },
+		9: { s: 6, b: 3 },
+		10: { s: 7, b: 3 },
+		11: { s: 8, b: 3 },
+		12: { s: 9, b: 3 },
+		14: { s: 1, b: 1 },
+		15: { s: 2, b: 1 },
+		16: { s: 3, b: 1 },
+	};
+	
+	for(const key in Pech.data) {
+		const idx = Pech.data[key].vdp - 1;
+		const cycleInfo = cycleMapping[Pech.data[key].cycle] || { s: 0, b: -1 };
+
+		t.ChangeStatProc(idx, cycleInfo.s, 0);
+		t.ChangeStatBlink(idx, cycleInfo.b);
+		t.StartDate(idx, new Date(Pech.data[key].factStart));
+		t.EndDate(idx, new Date(Pech.data[key].thinkEnd));
+	}
+	
+	t.Print(ctx);
+	if (chkText.checked) {
+		t.PrintText(ctx);
+	}
+};
+
+function getRColor() {
+	const letters = '0123456789ABCDEF';
+	const color = '#' + Array.from({ length: 6 }, () => letters[Math.floor(Math.random() * 16)]).join('');
+	return color;
+};
diff --git a/styles/test.css b/styles/test.css
new file mode 100644
index 0000000..41bb70a
--- /dev/null
+++ b/styles/test.css
@@ -0,0 +1,10 @@
+ body {
+	margin: 0;
+	padding: 0;
+}
+#menu input {
+	margin: 10px;
+}
+#canvas{
+	margin: 10px;	
+}
diff --git a/test.html b/test.html
new file mode 100644
index 0000000..4ba574c
--- /dev/null
+++ b/test.html
@@ -0,0 +1,41 @@
+<!DOCTYPE html>
+<html lang="ru">
+<head>
+	<meta charset="utf-8" />
+	<title>Canvas Cycle VDP</title>
+	<link rel="stylesheet" href="styles/test.css">
+</head>
+<body style="margin:0px; padding:0px">
+	<canvas id="canvas"></canvas>
+
+	<div id="menu">
+		<label>
+			<input id="PText" type="checkbox"> Text
+		</label>
+		<label>
+			<input id="DefData" type="checkbox"> Default Data
+		</label>
+		<label>
+			<input id="Rotate" type="checkbox"> Rotate
+		</label>
+		<input id="TestPercent" type="button" value="Test Percent"/>
+		<input id="TestProcess" type="button" value="Test Process"/>
+		<input id="TestBlinkStatus" type="button" value="Test Blink"/>
+		<input id="TestNumberColumn" type="button" value="Test Number"/>
+		<input id="TestDiagramStove" type="button" value="Test Diagram"/>
+		<input id="TestPost" type="button" value="Test Post"/>
+		<label>
+			<input id="ChkLoop" type="checkbox"> Loop
+		</label>
+	</div>
+	
+	<script src="https://code.jquery.com/jquery-3.7.1.min.js" integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script>
+	<script src="CanvasCycleVDP/Rectangle.js"></script>
+	<script src="CanvasCycleVDP/PercentColumn.js"></script>
+	<script src="CanvasCycleVDP/ProcessColumn.js"></script>
+	<script src="CanvasCycleVDP/BlinkStatus.js"></script>
+	<script src="CanvasCycleVDP/NumberColumn.js"></script>
+	<script src="CanvasCycleVDP/Diagram.js"></script>
+	<script src="scripts/test.js"></script>
+</body>
+</html>