-
Notifications
You must be signed in to change notification settings - Fork 1
/
css-test.html
106 lines (87 loc) · 4.23 KB
/
css-test.html
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
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
<html>
<head>
<link href="node_modules/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="node_modules/bootstrap/dist/css/bootstrap-theme.min.css" rel="stylesheet">
</head>
<body>
<div id="main" class="container-fluid">
<Hud></Hud>
</div>
<script src="node_modules/jquery/dist/jquery.min.js"></script>
<script src="node_modules/underscore/underscore-min.js"></script>
<script src="node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
<script src="node_modules/systemjs/dist/system.src.js"></script>
<script src="dist/bundle.js"></script>
<div id="htmltemplate" style="display: block; border: 1px solid #808080; width: 400px; height: 300px; overflow: scroll;">
<div class="content">
<div>
<div class="icon elem">a</div>
<div class="elem">Col 1 Row 1</div>
<div class="elem">Col 2 Row 1</div>
<div class="elem">Col 3 Row 1</div>
<div class="elem">Col 4 Row 1</div>
<div class="elem">Col 5 Row 1</div>
</div>
<div>
<div class="icon elem">b</div>
<div class="elem">Col 1 Row 2</div>
<div class="elem">Col 2 Row 2</div>
<div class="elem">Col 3 Row 2</div>
<div class="elem">Col 4 Row 2</div>
<div class="elem">Col 5 Row 2</div>
</div>
<div>
<div class="icon elem">c</div>
<div class="elem">Col 1 Row 3</div>
<div class="elem">Col 2 Row 3</div>
<div class="elem">Col 3 Row 3</div>
<div class="elem">Col 4 Row 3</div>
<div class="elem">Col 5 Row 3</div>
</div>
</div>
</div>
<script>
System.import('Application').then(function (module) {
var populationSize = 40;
window.application = new module.Application(function () {
application.resetPopulations();
application.addOperator(application.createOperator('CSSDescriptor', ['htmltemplate']));
application.addOperator(application.createOperator('Sort', ['result']));
application.addOperator(application.createOperator('LinearRanking', ['result']));
application.addOperator(application.createOperator('CSSRenderer', ['htmltemplate']));
application.addOperator(application.createOperator('TableRenderer', [populationSize,['result','sortOrder'], "CSSRenderer"]));
var selectionGroupOperator = application.createOperator('GroupOperator', ["SelectionGroup", 10]);
application.addOperator(selectionGroupOperator);
application.addOperator(application.createOperator('Roulette', ["linearRanking"]), selectionGroupOperator);
application.addOperator(application.createOperator('CSSGAOperator', ['htmltemplate']), selectionGroupOperator);
application.addOperator(application.createOperator('PopulationSizeControl', [populationSize]));
/*
application.addOperator(application.createOperator('LinearRanking', ['schwefel']));
application.addOperator(application.createOperator('CanvasRenderer', ['x', 'y', {
x: [-510, 510],
y: [-510, 510]
}]));
application.addOperator(application.createOperator('CanvasRenderer', ['x', 'y', {
x: [-420.98, -420.96],
y: [-420.98, -420.96]
}]));
application.addOperator(application.createOperator('TableRenderer', [5]));
var selectionGroupOperator = application.createOperator('GroupOperator', ["SelectionGroup", 50]);
application.addOperator(selectionGroupOperator);
application.addOperator(
application.createOperator('Roulette', ['linearRanking']), selectionGroupOperator);
application.addOperator(
application.createOperator('HauptGA', [0.5, 0.2]), selectionGroupOperator);
application.addOperator(application.createOperator('PopulationSizeControl', [1000]));
*/
application.addPopulation(populationSize);
application.tick();
application.initializeHud();
})
}, function (err) {
console.log(err)
}).catch(console.error.bind(console));
console.log(System);
</script>
</body>
</html>