Skip to content

Commit 4178477

Browse files
pthiemtpthiemt
committedMay 11, 2021
cleanup + fix resetting of rlc canvas
1 parent 089f591 commit 4178477

File tree

6 files changed

+63
-152
lines changed

6 files changed

+63
-152
lines changed
 

‎common/style.css

+1-1
Original file line numberDiff line numberDiff line change
@@ -121,7 +121,7 @@ body {
121121
margin: 0px 20px;
122122
}
123123

124-
#limiter {
124+
#limiter, #examplesSelect{
125125
margin: 5px 20px;
126126
padding: 5px;
127127
}

‎rlc/index.html

+11-13
Original file line numberDiff line numberDiff line change
@@ -8,10 +8,8 @@
88

99
<title>Lauflängenkodierung</title>
1010

11-
<script src="js/appobject.js"></script>
12-
<script src="js/pointobject.js"></script>
11+
<script src="js/app.js"></script>
1312
<script src="js/main.js"></script>
14-
<script src="js/helpwindow.js"></script>
1513
</head>
1614
<body>
1715
<div id="frame">
@@ -36,27 +34,27 @@ <h1 lang="en">Control</h1>
3634
<option value="3" lang="de">Beispiel 3</option>
3735
<option value="3" lang="en">Example 3</option>
3836
</select>
39-
<button name="runDe" lang="de">Kodierung berechnen</button>
40-
<button name="runEng" lang="en">Calculate coding</button>
37+
<button name="run" lang="de">Kodierung berechnen</button>
38+
<button name="run" lang="en">Calculate coding</button>
4139
<button name="resetRaster" lang="de">Zeichenfläche leeren</button>
4240
<button name="resetRaster" lang="en">Clean drawing field</button>
4341
</div>
4442
<div style="max-height:fit-content;">
4543
<h1 lang="de">Ausgabe ohne Komprimierung</h1>
4644
<h1 lang="en">Output without compression</h1>
47-
<div id="resultNotCompDe" class="textOutput" lang="de"></div>
48-
<div id="resultNotCompEng" class="textOutput" lang="en"></div>
45+
<div id="resultNotComp" class="textOutput" lang="de"></div>
46+
<div id="resultNotComp" class="textOutput" lang="en"></div>
4947
</div>
5048
<div style="max-height:none; flex:1;">
5149
<h1 lang="de">Ausgabe mit Komprimierung</h1>
5250
<h1 lang="en">Output with compression</h1>
53-
<button class="tab" name="rlc_festDe" id="rlc_festDe" lang="de">RLC - fest</button><button class="tab" name="rlc_varDe" id="rlc_varDe" lang="de">RLC - variabel</button>
54-
<button class="tab" name="rlc_festEng" id="rlc_festEng" lang="en">RLC - fixed</button><button class="tab" name="rlc_varEng" id="rlc_varEng" lang="en">RLC - variable</button>
51+
<button class="tab" name="rlc_fix" id="rlc_fix" lang="de">RLC - fest</button><button class="tab" name="rlc_var" id="rlc_var" lang="de">RLC - variabel</button>
52+
<button class="tab" name="rlc_fix" id="rlc_fix" lang="en">RLC - fixed</button><button class="tab" name="rlc_var" id="rlc_var" lang="en">RLC - variable</button>
5553
<div class="textOutput tabContent">
56-
<p id="resultRLCfDe"></p>
57-
<p id="resultRLCfEng"></p>
58-
<p id="resultRLCvDe"></p>
59-
<p id="resultRLCvEng"></p>
54+
<p id="resultRLCf" lang="de"></p>
55+
<p id="resultRLCf" lang="en"></p>
56+
<p id="resultRLCv" lang="de"></p>
57+
<p id="resultRLCv" lang="en"></p>
6058
</div>
6159
</div>
6260
</div>

‎rlc/js/app.js

+9-14
Original file line numberDiff line numberDiff line change
@@ -89,23 +89,19 @@ APP.prototype.refresh = function(){
8989
}
9090
}
9191

92-
APP.prototype.clearRaster = function(){
93-
var ctx = $(this.elemId).get(0).getContext("2d");
94-
ctx.clearRect(0,0,600,600);
95-
}
96-
9792
APP.prototype.resetRaster = function(){
9893
this.data = this.createRaster(this.rows, this.cols, this.defaultValue);
94+
this.refresh();
9995
}
10096

10197
APP.prototype.proceed = function(){
102-
$('#resultNotCompDe').html("Anzahl zu speichernder Bits: " + (this.rows * this.rows) + " = (" + this.rows + "px x " + this.rows + "px)<br>" +
98+
$('#resultNotComp[lang="de"]').html("Anzahl zu speichernder Bits: " + (this.rows * this.rows) + " = (" + this.rows + "px x " + this.rows + "px)<br>" +
10399
"bei einer Farbtiefe von 24bit<br>" +
104100
(this.rows * this.rows) + " x 24 = " + 24*(this.rows * this.rows) + " bit<br>" +
105101
"= " + (24*(this.rows * this.rows))/8 + " Byte<br>" +
106102
"= <u>" + (parseInt(10000 * (((24 * (this.rows * this.rows)) / 8) / 1024))) / 10000 + " KB</u>");
107103

108-
$('#resultNotCompEng').html("Number of bits to be saved: " + (this.rows * this.rows) + " = (" + this.rows + "px x " + this.rows + "px)<br>" +
104+
$('#resultNotComp[lang="en"]').html("Number of bits to be saved: " + (this.rows * this.rows) + " = (" + this.rows + "px x " + this.rows + "px)<br>" +
109105
"with a colour depth of 24bit<br>" +
110106
(this.rows * this.rows) + " x 24 = " + 24 * (this.rows * this.rows) + " bit<br>" +
111107
"= " + (24 * (this.rows * this.rows)) / 8 + " Byte<br>" +
@@ -141,8 +137,7 @@ APP.prototype.proceed = function(){
141137
}
142138

143139
string = string.slice(0, -2);
144-
145-
$('#resultRLCfDe').html("Bei einer Bildgröße von (" + this.rows + " x " + this.rows + ") sind insgesamt " + counter + " Zeichenfolgen vorhanden<br><br>" +
140+
$('#resultRLCf[lang="de"]').html("Bei einer Bildgröße von (" + this.rows + " x " + this.rows + ") sind insgesamt " + counter + " Zeichenfolgen vorhanden<br><br>" +
146141
"minimale feste Anzahl bit: " + maxticker.toString(2).length + " / Anzahl der Zeichen: " + maxticker + "<br>" +
147142
"benötigter Speicherplatz bei " + maxticker.toString(2).length + " bit / Anzahl der Zeichen und 24 bit Farbtiefe:<br><br>" +
148143
counter + " x ("+maxticker.toString(2).length+" + 24) = " + counter*(maxticker.toString(2).length+24) + " bit<br>"+
@@ -152,8 +147,8 @@ APP.prototype.proceed = function(){
152147
counter + " x (8 + 24) = " + counter*(8+24) + " bit<br>"+
153148
"= " + (counter*(8+24))/8 + " Byte<br>"+
154149
"= <u>" + (parseInt(10000 * (((counter * (8 + 24)) / 8) / 1024))) / 10000 + " KB</u>");
155-
156-
$('#resultRLCfEng').html("With an image size of (" + this.rows + " x " + this.rows + ") are in total " + counter + " strings exist<br><br>" +
150+
151+
$('#resultRLCf[lang="en"]').html("With an image size of (" + this.rows + " x " + this.rows + ") are in total " + counter + " strings exist<br><br>" +
157152
"minimum fixed number bit: " + maxticker.toString(2).length + " / Number of characters: " + maxticker + "<br>" +
158153
"required storage space for " + maxticker.toString(2).length + " bit / Number of characters and 24 bit color depth:<br><br>" +
159154
counter + " x (" + maxticker.toString(2).length + " + 24) = " + counter * (maxticker.toString(2).length + 24) + " bit<br>" +
@@ -163,16 +158,16 @@ APP.prototype.proceed = function(){
163158
counter + " x (8 + 24) = " + counter * (8 + 24) + " bit<br>" +
164159
"= " + (counter * (8 + 24)) / 8 + " Byte<br>" +
165160
"= <u>" + (parseInt(10000 * (((counter * (8 + 24)) / 8) / 1024))) / 10000 + " KB</u>");
166-
167-
$('#resultRLCvDe').html("Bei einer Bildgröße von (" + this.rows + " x " + this.rows + ") sind insgesamt " + counter + " Zeichenfolgen vorhanden<br><br>" +
161+
162+
$('#resultRLCv[lang="de"]').html("Bei einer Bildgröße von (" + this.rows + " x " + this.rows + ") sind insgesamt " + counter + " Zeichenfolgen vorhanden<br><br>" +
168163
"benötigter Speicherplatz bei variabler Anzahl bit / Anzahl der Zeichen und 24 bit Farbtiefe:<br><br>" +
169164
"[nach dem Schema (minimale Anzahl bit für Anzahl der Zeichen + Farbtiefe)]<br><br>" +
170165
string+"<br><br>"+
171166
"= "+ result + " bit<br>"+
172167
"= "+ result/8 + " Byte<br>"+
173168
"= <u>" + (parseInt(10000 * (result / 8) / 1024)) / 10000 + " KB</u>");
174169

175-
$('#resultRLCvEng').html("With an image size of (" + this.rows + " x " + this.rows + ") are in total " + counter + " strings exist<br><br>" +
170+
$('#resultRLCv[lang="en"]').html("With an image size of (" + this.rows + " x " + this.rows + ") are in total " + counter + " strings exist<br><br>" +
176171
"required storage space with variable number bit / Number of characters and 24 bit color depth:<br><br>" +
177172
"[according to the scheme (minimum number of bits for number of characters + color depth)]<br><br>" +
178173
string + "<br><br>" +

‎rlc/js/helpwindow.js

-5
This file was deleted.

‎rlc/js/main.js

+42-99
Original file line numberDiff line numberDiff line change
@@ -9,9 +9,8 @@ $(function() {
99
var block;
1010

1111
//start config
12-
$('#rlc_festDe').addClass("active");
13-
$('#resultRLCvDe').hide();
14-
$('#resultRLCvEng').hide();
12+
$('#rlc_fix').addClass("active");
13+
$('#resultRLCv').hide();
1514

1615
$("#drawfield").mousedown(function(e){
1716
var x = e.pageX - this.offsetLeft;
@@ -54,126 +53,70 @@ $(function() {
5453

5554
// add click handler to all elements of type button
5655
$("button").click(function () {
56+
57+
var activeLang="de";
58+
if($('button[name="en"]').is(':disabled')) activeLang="en";
59+
5760
// get name of button
5861
var clicked = $(this).attr("name");
59-
62+
6063
// determine which button is clicked based on "name" attribute
6164
if(clicked.localeCompare("resetRaster") == 0){
62-
$('#resultRLCfDe').html("");
63-
$('#resultRLCfEng').html("");
64-
$('#resultRLCvDe').html("");
65-
$('#resultRLCvEng').html("");
66-
$('#resultNotCompDe').html("");
67-
$('#resultNotCompEng').html("");
65+
$('#resultRLCf[lang="de"],#resultRLCf[lang="en"],#resultRLCv[lang="de"],#resultRLCv[lang="en"]').html("");
66+
$('#resultNotComp[lang="de"],#resultNotComp[lang="en"]').html("");
6867
myAppInstance.resetRaster();
69-
myAppInstance.clearRaster();
68+
// myAppInstance.clearRaster();
7069
}
71-
if(clicked.localeCompare("rlc_festDe") == 0){
72-
//$('#resultRLCfDe').show();
73-
//$('#resultRLCfEng').show();
74-
//$('#resultRLCvDe').hide();
75-
//$('#resultRLCvEng').hide();
76-
//$('#rlc_fest').addClass("active");
77-
//$('#rlc_var').removeClass("active");
78-
$('#info > div > div > p[id="resultRLCfDe"]').show();
79-
$('#info > div > div > p[id="resultRLCfEng"]').hide();
80-
$('#info > div > div > p[id="resultRLCvDe"]').hide();
81-
$('#info > div > div > p[id="resultRLCvEng"]').hide();
82-
$('#rlc_festDe').addClass("active");
83-
$('#rlc_festEng').removeClass("active");
84-
$('#rlc_varDe').removeClass("active");
85-
$('#rlc_varEng').removeClass("active");
70+
else if(clicked.localeCompare("rlc_fix") == 0){
71+
$('#resultRLCf[lang="de"],#resultRLCf[lang="en"],#resultRLCv[lang="de"],#resultRLCv[lang="en"]').hide()
72+
$('#resultRLCf[lang="'+ activeLang +'"]').show();
73+
$('#rlc_fix[lang="'+ activeLang +'"]').addClass("active");
74+
$('#rlc_var[lang="'+ activeLang +'"]').removeClass("active");
8675
}
87-
if (clicked.localeCompare("rlc_festEng") == 0) {
88-
//$('#resultRLCfEng').show();
89-
//$('#resultRLCfDe').show();
90-
//$('#resultRLCvDe').hide();
91-
//$('#resultRLCvEng').hide();
92-
//$('#rlc_fest').addClass("active");
93-
//$('#rlc_var').removeClass("active");
94-
$('#info > div > div > p[id="resultRLCfEng"]').show();
95-
$('#info > div > div > p[id="resultRLCfDe"]').hide();
96-
$('#info > div > div > p[id="resultRLCvDe"]').hide();
97-
$('#info > div > div > p[id="resultRLCvEng"]').hide();
98-
$('#rlc_festEng').addClass("active");
99-
$('#rlc_festDe').removeClass("active");
100-
$('#rlc_varDe').removeClass("active");
101-
$('#rlc_varEng').removeClass("active");
76+
else if(clicked.localeCompare("rlc_var") == 0){
77+
$('#resultRLCf[lang="de"],#resultRLCf[lang="en"],#resultRLCv[lang="de"],#resultRLCv[lang="en"]').hide()
78+
$('#resultRLCv[lang="'+ activeLang +'"]').show();
79+
$('#rlc_var[lang="'+ activeLang +'"]').addClass("active");
80+
$('#rlc_fix[lang="'+ activeLang +'"]').removeClass("active");
10281
}
103-
if(clicked.localeCompare("rlc_varDe") == 0){
104-
//$('#resultRLCvDe').show();
105-
//$('#resultRLCvEng').show();
106-
//$('#resultRLCfDe').hide();
107-
//$('#resultRLCfEng').hide();
108-
//$('#rlc_fest').removeClass("active");
109-
//$('#rlc_var').addClass("active");
110-
$('#info > div > div > p[id="resultRLCvDe"]').show();
111-
$('#info > div > div > p[id="resultRLCvEng"]').hide();
112-
$('#info > div > div > p[id="resultRLCfEng"]').hide();
113-
$('#info > div > div > p[id="resultRLCfDe"]').hide();
114-
$('#rlc_varDe').addClass("active");
115-
$('#rlc_varEng').removeClass("active");
116-
$('#rlc_festEng').removeClass("active");
117-
$('#rlc_festDe').removeClass("active");
118-
}
119-
if (clicked.localeCompare("rlc_varEng") == 0) {
120-
//$('#resultRLCvDe').show();
121-
//$('#resultRLCvEng').show();
122-
//$('#resultRLCfDe').hide();
123-
//$('#resultRLCfEng').hide();
124-
//$('#rlc_fest').removeClass("active");
125-
//$('#rlc_var').addClass("active");
126-
$('#info > div > div > p[id="resultRLCvEng"]').show();
127-
$('#info > div > div > p[id="resultRLCvDe"]').hide();
128-
$('#info > div > div > p[id="resultRLCfEng"]').hide();
129-
$('#info > div > div > p[id="resultRLCfDe"]').hide();
130-
$('#rlc_varEng').addClass("active");
131-
$('#rlc_varDe').removeClass("active");
132-
$('#rlc_festEng').removeClass("active");
133-
$('#rlc_festDe').removeClass("active");
134-
}
135-
if(clicked.localeCompare("runDe") == 0){
136-
//$('#resultRLCfDe').html("");
137-
//$('#resultRLCfEng').html("");
138-
//$('#resultNotCompDe').html("");
139-
//$('#resultNotCompEng').html("");
140-
$('#resultNotCompDe').show();
141-
$('#resultNotCompEng').hide();
142-
$('#info > div > div > p[id="resultRLCfDe"]').show();
143-
$('#info > div > div > p[id="resultRLCfEng"]').hide();
144-
$('#info > div > div > p[id="resultRLCvDe"]').hide();
145-
$('#info > div > div > p[id="resultRLCvEng"]').hide();
82+
else if(clicked.localeCompare("run") == 0){
83+
$('#resultRLCf[lang="de"],#resultRLCf[lang="en"],#resultRLCv[lang="de"],#resultRLCv[lang="en"]').hide()
84+
$('#resultNotComp[lang="de"],#resultNotComp[lang="en"]').hide();
85+
86+
$('#resultNotComp[lang="'+ activeLang +'"]').show();
87+
$('#resultRLCf[lang="'+ activeLang +'"]').show();
88+
$('#rlc_fix[lang="'+ activeLang +'"]').addClass("active");
89+
$('#rlc_var[lang="'+ activeLang +'"]').removeClass("active");
90+
14691
myAppInstance.proceed();
147-
}
148-
if (clicked.localeCompare("runEng") == 0) {
149-
//$('#resultRLCfDe').html("");
150-
//$('#resultRLCfEng').html("");
151-
//$('#resultNotCompDe').html("");
152-
//$('#resultNotCompEng').html("");
153-
$('#resultNotCompDe').hide();
154-
$('#resultNotCompEng').show();
155-
$('#info > div > div > p[id="resultRLCfDe"]').hide();
156-
$('#info > div > div > p[id="resultRLCfEng"]').show();
157-
$('#info > div > div > p[id="resultRLCvDe"]').hide();
158-
$('#info > div > div > p[id="resultRLCvEng"]').hide();
159-
myAppInstance.proceed();
160-
}
92+
}
16193
else if (clicked.localeCompare("en") == 0) {
16294
$('[lang="en"]').show();
16395
$('[lang="de"]').hide();
96+
97+
//switch to fixed rlc tab
98+
$('#rlc_fix[lang="en"]').addClass("active");
99+
$('#rlc_var[lang="en"]').removeClass("active");
100+
$('#resultRLCv[lang="en"]').hide();
101+
164102
$('button[name="en"]').prop("disabled", true);
165103
$('button[name="de"]').prop("disabled", false);
166104
}
167105
else if (clicked.localeCompare("de") == 0) {
168106
$('[lang="de"]').show();
169107
$('[lang="en"]').hide();
108+
109+
//switch to fixed rlc tab
110+
$('#rlc_fix[lang="de"]').addClass("active");
111+
$('#rlc_var[lang="de"]').removeClass("active");
112+
$('#resultRLCv[lang="de"]').hide();
113+
170114
$('button[name="de"]').prop("disabled", true);
171115
$('button[name="en"]').prop("disabled", false);
172116
}
173117
});
174118

175119
$('#examplesSelect').on('change', function(){
176-
myAppInstance.clearRaster();
177120
var val = parseInt(this.value);
178121
switch(val) {
179122
case 0:

‎rlc/js/point.js

-20
This file was deleted.

0 commit comments

Comments
 (0)
Please sign in to comment.