Skip to content

Commit e3433ca

Browse files
danielkadnerdanielkadner
committed
integrate TU style & slight ui changes
1 parent 4cdee62 commit e3433ca

33 files changed

+2657
-781
lines changed

‎ant/index.html

+57-58
Original file line numberDiff line numberDiff line change
@@ -1,64 +1,63 @@
11
<html>
22
<head>
3-
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
4-
<link rel="stylesheet" href="style.css" type="text/css">
5-
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
6-
<script src="js/appobject.js"></script>
7-
<script src="js/pointobject.js"></script>
8-
<script src="js/antsobject.js"></script>
9-
<script src="js/main.js"></script>
3+
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
4+
<link rel="stylesheet" href="../common/style.css" type="text/css">
5+
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
6+
<script src="js/appobject.js"></script>
7+
<script src="js/pointobject.js"></script>
8+
<script src="js/antsobject.js"></script>
9+
<script src="js/main.js"></script>
10+
<script src="https://www.tu-dresden.de/++resource++iframe_integration.js"></script>
11+
<link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro" rel="stylesheet">
12+
<link rel="stylesheet" type="text/css" href="https://www.tu-dresden.de/++resource++iframe_integration.css"/>
1013
</head>
1114
<body>
12-
<div id="frame">
13-
<h1>
14-
Turingmaschine Ameise
15-
</h1>
16-
<div id="lower">
17-
<canvas id="drawfield" width="300" height="300"></canvas>
18-
</div>
19-
<div id="upper">
20-
<div id="info">
21-
<h1>Hilfe zum Programm</h1>
22-
<div style="font-style: italic;">
23-
Tragen Sie auf der großen grauen Fläche mit der Maus Punkte ein (durch Klicken).<br>
24-
<br>
25-
Starten Sie anschließend die automatische Simulation oder simulieren Sie nur den nächsten Schritt
26-
indem Sie auf die jeweiligen Button klicken.<br>
27-
<br>
28-
Im Anschluss wird gemäß den folgenden Regeln der Automat durchgeführt:<br>
29-
<br>
30-
- Eine Ameise schaut zu Beginn in eine beliebige Richtung.<br>
31-
- Ist das Feld weiß: so färbt sie es schwarz und dreht sich um 90° nach rechts.<br>
32-
- Ist das Feld schwarz: so färbt sie es weiß und dreht sich um 90° nach links.<br>
33-
- Danach läuft sie ein Feld in die neue Blickrichtung.
34-
</div>
35-
36-
<h1>Steuerung</h1>
37-
<div style="">
38-
<button name="resetRaster" style="margin:0px;">Zeichenfläche leeren</button>
39-
</div>
40-
41-
<h1>Simulationen</h1>
42-
<div style="">
43-
<button name="run">Einen Schritt simulieren</button>
44-
<div style="overflow:hidden;">
45-
<button name="runAuto" style="float:left;">Auto-Simulation start/stop</button>
46-
<div id="indicator"></div>
47-
</div>
48-
<div style="overflow:hidden; margin:5px;">
49-
<div style="float:left; color:#6E6E6E;">Bilder pro Sekunde:</div>
50-
<div style="float:left; color:#6E6E6E; margin-left:5px;" id="fps">10</div>
51-
</div>
52-
<div style="overflow:hidden; margin:5px;">
53-
<input type="range" min="1" max="20" step="1" value="10" id="fpsswitcher" style="width:100%;">
54-
<div style="overflow:hidden; width:100%;">
55-
<div style="float:left; color:#6E6E6E;">1</div>
56-
<div style="float:right; color:#6E6E6E;">20</div>
57-
</div>
58-
</div>
59-
</div>
60-
</div>
61-
</div>
62-
</div>
15+
<div id="frame">
16+
<h1>
17+
Turingmaschine Ameise
18+
</h1>
19+
<div id="lower">
20+
<canvas id="drawfield" width="300" height="300"></canvas>
21+
</div>
22+
<div id="upper">
23+
<div id="info">
24+
<div>
25+
<h1>Steuerung</h1>
26+
<button name="resetRaster">Zeichenfläche leeren</button>
27+
</div>
28+
29+
<div style="padding-bottom: 20px;"><h1>Simulationen</h1>
30+
<button name="run">Einen Schritt simulieren</button>
31+
<button id="autorun_button" name="runAuto" style="float:left;">Auto-Simulation start</button>
32+
<div>Bilder pro Sekunde: <span id="fps">10</span></div>
33+
<div>
34+
<input type="range" min="1" max="20" step="1" value="10" id="fpsswitcher" style="width:100%;">
35+
<!--<div>-->
36+
<div style="float:left;">1</div>
37+
<div style="float:right;">20</div>
38+
<!--</div>-->
39+
</div>
40+
</div>
41+
<div><h1>Hilfe zum Programm</h1>
42+
<div>
43+
Tragen Sie auf der großen grauen Fläche mit der Maus Punkte ein (durch Klicken).<br>
44+
<br>
45+
Starten Sie anschließend die automatische Simulation oder simulieren Sie nur den nächsten Schritt
46+
indem Sie auf die jeweiligen Button klicken.<br>
47+
<br>
48+
Im Anschluss wird gemäß den folgenden Regeln der Automat durchgeführt:
49+
<ul>
50+
<li>Eine Ameise schaut zu Beginn in eine beliebige Richtung.</li>
51+
<li>Ist das Feld weiß: so färbt sie es schwarz und dreht sich um 90° nach rechts.</li>
52+
<li>Ist das Feld schwarz: so färbt sie es weiß und dreht sich um 90° nach links.</li>
53+
<li>Danach läuft sie ein Feld in die neue Blickrichtung.</li>
54+
</ul>
55+
</div>
56+
</div>
57+
58+
59+
</div>
60+
</div>
61+
</div>
6362
</body>
6463
</html>

‎ant/js/appobject.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -57,7 +57,7 @@ APP.prototype.refresh = function(){
5757
if(this.data[r][c] == 0){
5858
ctx.clearRect(c*this.cellSize,r*this.cellSize,this.cellSize,this.cellSize);
5959
} else {
60-
ctx.fillStyle="#000";
60+
ctx.fillStyle="#00305e";
6161
ctx.fillRect(c*this.cellSize,r*this.cellSize,this.cellSize,this.cellSize);
6262
}
6363
}

‎ant/js/main.js

+4-2
Original file line numberDiff line numberDiff line change
@@ -12,11 +12,13 @@ $(function() {
1212
timeoutInstance = setInterval(function(){
1313
myAppInstance.proceedGrid();
1414
}, timout);
15-
$('#indicator').css("background-color", "#D0FA58");
15+
$('#autorun_button').html('Auto-Simulation stop');
16+
// $('#indicator').css("background-color", "#D0FA58");
1617
} else {
1718
clearInterval(timeoutInstance);
1819
timeoutInstance = null;
19-
$('#indicator').css("background-color", "#FA5858");
20+
$('#autorun_button').html('Auto-Simulation start');
21+
// $('#indicator').css("background-color", "#FA5858");
2022
}
2123

2224
if(force === true) resetInterval();

‎ant/style.css

+7-8
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
padding:0px;
44
font-size: 12px;
55
font-weight: normal;
6-
font-family: arial;
6+
font-family: 'Source Sans Pro', sans-serif;
77
color: #353535;
88
}
99
body{
@@ -24,19 +24,19 @@ body{
2424
padding: 5px 10px;
2525
font-size: 20px;
2626
color: #434343;
27-
border-bottom: 2px solid #009688;
27+
border-bottom: 2px solid #00305e;
2828
}
2929

3030
#lower {
3131
float: right;
3232
}
3333
#upper {
3434
float: left;
35-
width: 285px;
35+
width: 265px;
3636
margin-right: 15px;
3737
}
3838
#info h1 {
39-
background-color: #009688;
39+
background-color: #00305e;
4040
border-top-left-radius: 3px;
4141
padding: 5px;
4242
color: #fff;
@@ -45,22 +45,21 @@ body{
4545
border-top-right-radius: 3px;
4646
}
4747
#info >div {
48-
background-color: #eeeeee;
48+
background-color: #f2f3f3;
4949
padding: 5px;
5050
margin-bottom: 10px;
5151
}
5252
#info > div button {
5353
display: inherit;
54-
background-color: #fff;
5554
border: none;
5655
padding: 5px;
5756
margin: 5px;
58-
min-width: 150px;
57+
width: calc(100% - 10px);
5958
cursor: pointer;
6059
font-weight: bold;
6160
}
6261
#drawfield {
63-
background-color: #ececec;
62+
background-color: #f2f3f3;
6463
}
6564
#indicator {
6665
width: 25px;

‎common/style.css

+99
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,99 @@
1+
* {
2+
margin: 0px;
3+
padding: 0px;
4+
font-size: 12px;
5+
font-weight: normal;
6+
font-family: 'Source Sans Pro', sans-serif;
7+
/*color: #00305e;*/
8+
}
9+
10+
body {
11+
background-color: #fff;
12+
margin: 5px;
13+
}
14+
15+
#frame {
16+
width: 600px;
17+
height: calc(100% - 60px);
18+
margin: 20px auto;
19+
padding: 10px;
20+
}
21+
22+
#frame > h1 {
23+
display: block;
24+
margin-bottom: 10px;
25+
padding: 5px 10px;
26+
font-size: 20px;
27+
color: #434343;
28+
border-bottom: 2px solid #00305e;
29+
}
30+
31+
#lower {
32+
float: right;
33+
}
34+
35+
#upper {
36+
float: left;
37+
width: 265px;
38+
margin-right: 15px;
39+
}
40+
41+
#info h1 {
42+
background-color: #00305e;
43+
border-top-left-radius: 3px;
44+
padding: 5px;
45+
color: #fff;
46+
font-size: 14px;
47+
font-weight: normal;
48+
border-top-right-radius: 3px;
49+
}
50+
51+
#info > div {
52+
background-color: #f2f3f3;
53+
/*padding: 5px;*/
54+
margin-bottom: 10px;
55+
padding-bottom: 10px;
56+
}
57+
58+
#info button, #info select{
59+
margin: 5px 20px;
60+
width: calc(100% - 40px);
61+
}
62+
63+
#info > div > div {
64+
margin: 5px 20px;
65+
width: calc(100% - 40px);
66+
}
67+
68+
#rlc_fest, #rlc_var {
69+
margin: 5px 0px !important;
70+
width: 100% !important;
71+
}
72+
73+
#drawfield {
74+
background-color: #f2f3f3;
75+
}
76+
77+
#info input {
78+
margin: 5px 20px;
79+
width: calc(100% - 40px);
80+
display: inherit;
81+
border: none;
82+
padding: 5px;
83+
cursor: pointer;
84+
}
85+
86+
#resultChart{
87+
width: 600px;
88+
}
89+
90+
.link {
91+
fill: none;
92+
stroke: #ccc;
93+
stroke-width: 2px;
94+
}
95+
96+
.help{
97+
font-style: italic;
98+
margin: 5px 20px;
99+
}

0 commit comments

Comments
 (0)