Первая страница
Наша команда
Контакты
О нас

    Головна сторінка



Розробка веб-додатку з імітаційного моделювання обчислювальних систем

Розробка веб-додатку з імітаційного моделювання обчислювальних систем




Сторінка11/16
Дата конвертації10.03.2017
Розмір0.82 Mb.
ТипПояснювальна записка
1   ...   8   9   10   11   12   13   14   15   16

Висновок


У даному розділі було розроблено модель користувацького інтерфейсу, та модель генератора даних оцінки для веб-додатку з імітаційного моделювання обчислювальних систем. Описано алгоритм роботи розробленого генератора.

  1. РОЗРОБКА ВЕБ-ДОДАТКУ
    1. Розробка класу генератора даних


Для імітаційного моделювання роботи обчислювальних систем було розроблено генератор псевдовипадкових чисел. Дані числа представляють показники роботи компонентів обчислювальної системи. Код класу генератора наведено нижче:

function Generator(minX, maxX) {

var x, y, dy, step;

var ly = Math.random();

init();

function init() {



x = minX Math.floor(Math.random() * (maxX - minX));

y = Math.random();

dy = (y - ly) / x;

step = 0;

};

this.next = function() {



ly = dy;

step ;


if (step >= x) init();

return ly;

};

}

Також було розроблено клас генератора що повторює згенеровані значення деякий час. Код цього класу наведо нижче:



function RepetitionGenerator(minX, maxX) {

var x, y, step;

init();

function init() {



x = minX Math.floor(Math.random() * (maxX - minX));

y = Math.random();

step = 0;

}

this.next = function() {



step ;

if (step >= x) init();

return y;

};

}



Щоб імітувати деякі компоненти обчислювальної системи необхідно об’єднати вихідні дані декілько генераторів з різними параметрами. Для цього було розроблено класс компклексного генератора який може містити в собі декілька генераторів і об’єднувати їх вихідні дані. Код комплексного генератора наведено нижче:

function CombinedGenerator(generators, weights) {

var overallWeight = weights.reduce(function (sum, weight){ return sum weight; });

this.next = function() {

var next = 0;

for (var i = 0; i < generators.length; i ) {

next = generators[i].next() * weights[i];

}

return next / overallWeight;



}

}

При розробці цих класів було використано паттерн проектування «Компонувальник».


Компонувальник – структурний шаблон який об'єднує об'єкти в ієрархічну деревовидну структуру, і дозволяє будувати складні структури з простіших компонентів.
Ієра́рхія (грец. ίεράρχίά, від ίερσς - священний, та άρχή - влада) - поділ на вищі й нижчі посади, чини; суворий порядок підлеглості нижчих щодо посади або чину осіб вищим. В ієрархії між її членами діють вертикальні зв'язки - відносини субординації.
Проектувальник може згрупувати дрібні компоненти для формування більших, які, в свою чергу, можуть стати основою для створення ще більших [20].

Діаграма класів патерну «Компонувальник» наведена риснку 4.1


composite uml class diagram (fixed).svg

Рисунок 4.1 – Діаграма класів патерну «Компонувальник»


Ключем до паттерну компонувальник є абстрактний клас, який є одночасно і примітивом, і контейнером (Component). У ньому оголошені методи, специфічні для кожного виду об'єкта (такі як Operation) і загальні для всіх складових об'єктів, наприклад операції для доступу і управління нащадками. Підкласи Leaf визначає примітивні об'єкти, які не є контейнерами. У них операція Operation реалізована відповідно до їх специфічних потреб. Оскільки у примітивних об'єктів немає нащадків, то жоден з цих підкласів не реалізує операції, пов'язані з управління нащадками (Add, Remove, GetChild). Клас Composite складається з інших примітивніших об'єктів Component. Реалізована в ньому операція Operation викликає однойменну функцію відтворення для кожного нащадка, а операції для роботи з нащадками вже не порожні.
Відтво́рення - слово, яке, в залежності від контексту застосування набуває різних значень.
Оскільки інтерфейс класу Composite відповідає інтерфейсу Component, то до складу об'єкта Composite можуть входити і інші такі ж об'єкти.

Роль классу Component в даному патерні грає розроблений класс Generator, а Composite – CombinedGenerator. Діаграма розроблених класів наведена на рисунку 4.2.


c:\users\oleh\appdata\local\microsoft\windows\inetcachecontent.word\generatorclassdiagram.png

Рисунок 4.2 – Діаграма розроблених класів



    1. Розробка класу для малювання графіка


Для відображення данних та оцінок продуктивності роботи імітованої обчислювальної системи було розроблено класс Chart.

Відрисування графіків відбується за допомогою елемента , який є частиною специфікації WHATWG HTML та W3C HTML Canvas 2D Context.

Він дуже схожий на тег , з тією лише різницею, що не містить атрибутів src і alt. Елемент має всього два атрибути – width і height. Обидва вони не є обов'язковими, і можуть бути задані через властивості DOM. Якщо ширина і висота не визначені, буде створений шириною в 300 пікселів і 150 пікселів заввишки. Розмір елемента може бути довільним і задаватися через CSS, але при промальовуванні картинка масштабується відповідно до компонування [21].

Атрибут id не є специфічним для елемента , але є одним з атрибутів HTML за замовчуванням, і може бути застосований майже до всіх елементів HTML (також як class, наприклад). Завжди визначати id елемента – гарна ідея, тому що це значно спрощує ідентифікацію його за допомогою скриптів.

Стиль елемента може налаштовуватися також, як і звичайне зображення через CSS (margin, border, background, і т.п.). Ці правила, проте, не впливають на саме малювання в . Якщо ніякі налаштування стилю не задані, буде створений повністю прозорим.

Код взэмодії класу Chart з елементом Canvas наведено нижче:

Chart.prototype._drawGrid = function() {

var rowNum = 4;

var colNum = 7;

var rowHeight = this._chart.height / rowNum;

var colWidth = this._chart.width / colNum;

this._ctxGrid.textAlign = "left";

this._ctxGrid.textBaseline = "top";

for (var i = 0; i < rowNum 1; i ) {

this._ctxGrid.fillText(Math.round((1 - (i / rowNum)) * 100) '%', this._chart.width 1, i * rowHeight);

var startX = 0.5,

startY = Math.round(i * rowHeight) 0.5;

var endX = this._chart.width,

endY = startY;

this._ctxGrid.moveTo(startX, startY);

this._ctxGrid.lineTo(endX, endY);

}

for (i = 0; i < colNum 1; i ) {



startX = Math.round(i * colWidth) 0.5;

startY = 0.5;

endX = startX;

endY = this._chart.height 0.5;

this._ctxGrid.moveTo(startX, startY);

this._ctxGrid.lineTo(endX, endY);

}

this._ctxGrid.stroke();



};

Chart.prototype.draw = function() {

this._ctx.clearRect(0,0,this._chart.width,this._chart.height);

this._ctx.beginPath();

this._ctx.moveTo(this._chart.width - this._points.getLength(), this._chart.height);

for (var i = 0; i < this._points.getLength(); i ) {

this._ctx.lineTo(this._chart.width - this._points.getLength() i, this._chart.height - this._points.getAt(i));

}

this._ctx.lineTo(this._chart.width, this._chart.height);



this._ctx.closePath();

this._ctx.fill();

};

Також для відображення оцінок продуктивності було розроблено дочірні класи DerrivativeChart та IntegralChart. Код класу DerrivativeChart:



DerivativeChart.prototype.draw = function() {

this._calculateScale();

this._drawGrid();

this._ctx.clearRect(0,0,this._chart.width,this._chart.height);

this._ctx.beginPath();

this._ctx.moveTo(this._chart.width - this._points.getLength(), this._chart.height/2 - (this._points.getAt(0) - this._points.getAt(1)) * this._scale);

for (var i = 1; i < this._points.getLength(); i ) {

this._ctx.lineTo(this._chart.width - this._points.getLength() i, this._chart.height/2 - (this._points.getAt(i) - this._points.getAt(i-1)) * this._scale);

}

// this._ctx.lineTo(this._chart.width, this._chart.height);



this._ctx.stroke();

};


DerivativeChart.prototype.addRecord = function(record) {

this._points.push(record * this._chart.height/2);

};

DerivativeChart.prototype.clear = function () {



this._points.clear();

};

Код класу IntegralChart:



IntegralChart.prototype.draw = function() {

this._calculateScale();

this._drawGrid();

this._ctx.clearRect(0,0,this._chart.width,this._chart.height);

this._ctx.beginPath();

this._ctx.moveTo(this._chart.width - this._points.getLength(), this._chart.height - (this._points.getAt(0)) * this._scale);

this._ctx.moveTo(this._chart.width - this._points.getLength(), this._chart.height);

var sum = 0;

for (var i = 1; i < this._points.getLength(); i ) {

sum = this._points.getAt(i);

this._ctx.lineTo(this._chart.width - this._points.getLength() i, this._chart.height - sum * this._scale);

}

this._ctx.lineTo(this._chart.width, this._chart.height);



this._ctx.fill();

};

IntegralChart.prototype.addRecord = function(record) {



this._points.push(record * this._chart.height/2);

};

IntegralChart.prototype.clear = function () {



this._points.clear();

};

Діаграма класів графіків наведена на рисунку 4.3.


c:\users\oleh\appdata\local\microsoft\windows\inetcachecontent.word\chartclassdiagram.png

Рисунок 4.3 – Діаграма класів Chart



1   ...   8   9   10   11   12   13   14   15   16



  • Розробка класу генератора даних
  • Розробка класу для малювання графіка