mmk2410/morse-converter-web
Archived
1
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

JS in own file; Ported Decode writtenMorse engine; design fixes

Browse source
This commit is contained in:
mmk2410 2015-04-07 22:34:24 +02:00
parent 90fdd71c88
commit bac46e47ac
5 changed files with 318 additions and 47 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

68
index.html
View file

@ -9,58 +9,36 @@
<link rel="shortcut icon" href="./res/img/favicon.png" type="image/x-icon" /> <link rel="shortcut icon" href="./res/img/favicon.png" type="image/x-icon" />
<link rel="image_src" href="./res/img/favicon.png" /> <link rel="image_src" href="./res/img/favicon.png" />
<script src="js/web/web.js"></script>
<script src="js/engine/DecodeWrittenMorse.js"></script>
</head> </head>
<body> <body>
<span class="actionbar"> <span class="actionbar">
<img src="./res/img/menu.svg" class="menuicon" onclick="drawer()"/> <img src="./res/img/menu.svg" class="menuicon" onclick="drawer()"/>
Morse Converter Morse Converter
</span> </span>
<div class="drawer"> <div class="drawer">
<img src="res/img/drawergraphic.png" class="drawerimg"/> <img src="res/img/drawergraphic.png" class="drawerimg"/>
<div class="draweritem">writtenMorse</div> <div class="draweritem" onclick="writtenMorse()">writtenMorse</div>
<div class="draweritem">Normal Morse</div> <div class="draweritem" onclick="normalMorse()">Normal Morse</div>
<div class="drawerdivider"></div> <div class="drawerdivider"></div>
<div class="draweritem">About</div> <div class="draweritem" onclick="about()">About</div>
</div> </div>
<div class="main"> <div class="main">
<div class="card"> <div class="card">
<textarea class="input" id="textarea">Enter your text.</textarea> <textarea class="input" id="textarea">Enter your text.</textarea>
<div class="carddivider"></div> <div class="carddivider"></div>
<div class="cardbuttons"> <div class="cardbuttons">
<span class="cardbutton" onclick="getText()">ENCODE</span> <span class="cardbutton" onclick="encode()">ENCODE</span>
<span class="cardbutton">DECODE</span> <span class="cardbutton" onclick="decode()">DECODE</span>
</div>
</div>
<div class="card" id="outputcard">
<div class="cardtext">
<span id="output"></span>
</div>
</div> </div>
</div> </div>
<div class="card" id="outputcard">
<div class="cardtext">
<span id="output"></span>
</div>
</div>
</div>
</body> </body>
<script>
var dur = 150
var drawerStatus = true
function getText(){
var input = $('#textarea').val()
$('#output').text(input)
$('#outputcard').fadeIn(dur)
}
function drawer(){
if(window.innerWidth <= 1400){
if(drawerStatus){
$('.drawer').show('slide', {direction: 'left'}, dur)
$('.actionbar').before("<div class='overlay' onclick='drawer()'></div>")
$('.overlay').animate({"opacity":"0.4"}, dur)
drawerStatus = false
} else {
$('.drawer').hide('slide', {direction: 'left'}, dur)
$('.overlay').animate({"opacity":"0"}, dur, function callback (){
$('.overlay').remove()
})
drawerStatus = true
}
}
}
</script>
</html> </html>

217
js/engine/DecodeWrittenMorse.js Normal file
View file

@ -0,0 +1,217 @@
function decodeWrittenMorseManager(message) {
if(message == ""){
return "Please enter at least one character"
} else {
if (message.endsWith(" ")) {
message = message.substring(0, message.length - 1)
}
// Variables
var input = message.toUpperCase()
var output = ""
if (input == "LETTERSPACE") {
output = "#"
} else if (input == "END OF WORK") {
output = "000101"
} else if (input == "ERROR") {
output = "00000000"
} else if (input == "STARTING SIGNAL") {
output = "10101"
} else if (input == "ENDING SIGNAL") {
output = "01010"
} else if (input == "UNDERSTOOD") {
output = "00010"
} else if (input == "WAIT") {
output = "01000"
} else if (input == "SOS") {
output = "000111000"
} else if (input == "LETTER SPACE") {
output = "##"
} else if (input == "WORD SPACE") {
output = "+"
} else {
for (var c = input.length; c > 0; c--) {
if (input.startsWith(" ")) {
if (output.endsWith("#")) {
output = output.substring(0, output.length - 1)
}
output = output +"+"
input = input.substring(1, input.length)
} else if (input.startsWith("A")) {
output = output + "01#"
input = input.substring(1, input.length)
} else if (input.startsWith("B")) {
output = output +"1000#"
input = input.substring(1, input.length)
} else if (input.startsWith("C")) {
output = output +"1010#"
input = input.substring(1, input.length)
} else if (input.startsWith("D")) {
output = output +"100#"
input = input.substring(1, input.length)
} else if (input.startsWith("E")) {
output = output +"0#"
input = input.substring(1, input.length)
} else if (input.startsWith("F")) {
output = output +"0010#"
input = input.substring(1, input.length)
} else if (input.startsWith("G")) {
output = output +"110#"
input = input.substring(1, input.length)
} else if (input.startsWith("H")) {
output = output +"0000#"
input = input.substring(1, input.length)
} else if (input.startsWith("I")) {
output = output +"00#"
input = input.substring(1, input.length)
} else if (input.startsWith("J")) {
output = output +"0111#"
input = input.substring(1, input.length)
} else if (input.startsWith("K")) {
output = output +"101#"
input = input.substring(1, input.length)
} else if (input.startsWith("L")) {
output = output +"0100#"
input = input.substring(1, input.length)
} else if (input.startsWith("M")) {
output = output +"11#"
input = input.substring(1, input.length)
} else if (input.startsWith("N")) {
output = output +"10#"
input = input.substring(1, input.length)
} else if (input.startsWith("O")) {
output = output +"111#"
input = input.substring(1, input.length)
} else if (input.startsWith("P")) {
output = output +"0110#"
input = input.substring(1, input.length)
} else if (input.startsWith("Q")) {
output = output +"1101#"
input = input.substring(1, input.length)
} else if (input.startsWith("R")) {
output = output +"010#"
input = input.substring(1, input.length)
} else if (input.startsWith("S")) {
output = output +"000#"
input = input.substring(1, input.length)
} else if (input.startsWith("T")) {
output = output +"1#"
input = input.substring(1, input.length)
} else if (input.startsWith("U")) {
output = output +"001#"
input = input.substring(1, input.length)
} else if (input.startsWith("V")) {
output = output +"0001#"
input = input.substring(1, input.length)
} else if (input.startsWith("W")) {
output = output +"011#"
input = input.substring(1, input.length)
} else if (input.startsWith("X")) {
output = output +"1001#"
input = input.substring(1, input.length)
} else if (input.startsWith("Y")) {
output = output +"1011#"
input = input.substring(1, input.length)
} else if (input.startsWith("Z")) {
output = output +"1100#"
input = input.substring(1, input.length)
} else if (input.startsWith("0")) {
output = output +"11111#"
input = input.substring(1, input.length)
} else if (input.startsWith("1")) {
output = output +"01111#"
input = input.substring(1, input.length)
} else if (input.startsWith("2")) {
output = output +"00111#"
input = input.substring(1, input.length)
} else if (input.startsWith("3")) {
output = output +"00011#"
input = input.substring(1, input.length)
} else if (input.startsWith("4")) {
output = output +"00001#"
input = input.substring(1, input.length)
} else if (input.startsWith("5")) {
output = output +"00000#"
input = input.substring(1, input.length)
} else if (input.startsWith("6")) {
output = output +"10000#"
input = input.substring(1, input.length)
} else if (input.startsWith("7")) {
output = output +"11000#"
input = input.substring(1, input.length)
} else if (input.startsWith("8")) {
output = output +"11100#"
input = input.substring(1, input.length)
} else if (input.startsWith("9")) {
output = output +"11110#"
input = input.substring(1, input.length)
} else if (input.startsWith("Ä")) {
output = output +"0101#"
input = input.substring(1, input.length)
} else if (input.startsWith("Ö")) {
output = output +"1110#"
input = input.substring(1, input.length)
} else if (input.startsWith("Ü")) {
output = output +"0011#"
input = input.substring(1, input.length)
} else if (input.startsWith("ß")) {
output = output +"00011000#"
input = input.substring(1, input.length)
} else if (input.startsWith(".")) {
output = output +"010101#"
input = input.substring(1, input.length)
} else if (input.startsWith(",")) {
output = output +"110011#"
input = input.substring(1, input.length)
} else if (input.startsWith(":")) {
output = output +"111000#"
input = input.substring(1, input.length)
} else if (input.startsWith(";")) {
output = output +"101010#"
input = input.substring(1, input.length)
} else if (input.startsWith("?")) {
output = output +"001100#"
input = input.substring(1, input.length)
} else if (input.startsWith("!")) {
output = output +"101011#"
input = input.substring(1, input.length)
} else if (input.startsWith("-")) {
output = output +"100001#"
input = input.substring(1, input.length)
} else if (input.startsWith("_")) {
output = output +"001101#"
input = input.substring(1, input.length)
} else if (input.startsWith("(")) {
output = output +"10110#"
input = input.substring(1, input.length)
} else if (input.startsWith(")")) {
output = output +"101101#"
input = input.substring(1, input.length)
} else if (input.startsWith("=")) {
output = output +"10001#"
input = input.substring(1, input.length)
} else if (input.startsWith("+")) {
output = output +"01010#"
input = input.substring(1, input.length)
} else if (input.startsWith("/")) {
output = output +"10010#"
input = input.substring(1, input.length)
} else if (input.startsWith("@")) {
output = output +"011010#"
input = input.substring(1, input.length)
} else if (input.startsWith("'")) {
output = output +"011110#"
input = input.substring(1, input.length)
} else if (input.startsWith("$")) {
output = output +"0001001#"
input = input.substring(1, input.length)
} else {
output = "Code not listed or wrong."
}
}
if (output.endsWith("#")) {
output = output.substring(0, output.length - 1)
}
}
return output
}
}

57
js/web/web.js Normal file
View file

@ -0,0 +1,57 @@
var dur = 150
var drawerStatus = true
var writtenMorse = true
function drawer(){
if(window.innerWidth <= 1400){
if(drawerStatus){
$('.drawer').show('slide', {direction: 'left'}, dur)
$('.actionbar').before("<div class='overlay' onclick='drawer()'></div>")
$('.overlay').animate({"opacity":"0.4"}, dur)
drawerStatus = false
} else {
$('.drawer').hide('slide', {direction: 'left'}, dur)
$('.overlay').animate({"opacity":"0"}, dur, function callback (){
$('.overlay').remove()
})
drawerStatus = true
}
}
}
function encode(){
var input = $('#textarea').val()
if(writtenMorse){
$("#output").text("The normal morse engine is not ported jet.")
} else {
//TODO port the normal morse decode engine
$("#output").text("The normal morse engine is not ported jet.")
}
$('#outputcard').fadeIn(dur)
}
function decode(){
var input = $('#textarea').val()
if(writtenMorse){
$('#output').text(decodeWrittenMorseManager(input))
} else {
//TODO port the normal morse decode engine
$("#output").text("The normal morse engine is not ported jet.")
}
$('#outputcard').fadeIn(dur)
}
function writtenMorse(){
writtenMorse = true
drawer()
}
function normalMorse(){
writtenMorse = false
drawer()
}
function about(){
$("body").fadeOut(dur, function callback(){
window.location = "http://marcel-kapfer.de/writtenmorse"
})
}

13
res/css/main.css
View file

@ -46,7 +46,8 @@ body {
height: 72px; height: 72px;
line-height: 72px; line-height: 72px;
font-size: 18px; font-size: 18px;
padding-left: 16px; } padding-left: 16px;
cursor: pointer; }
.draweritem:hover { .draweritem:hover {
background: #e0e0e0; } background: #e0e0e0; }
@ -100,7 +101,8 @@ body {
min-width: 64px; min-width: 64px;
margin-left: 8px; margin-left: 8px;
padding: 5px; padding: 5px;
color: #03a9f4; } color: #03a9f4;
cursor: pointer; }
.cardbutton:hover { .cardbutton:hover {
background: #e0e0e0; } background: #e0e0e0; }
@ -115,6 +117,13 @@ body {
height: 100%; height: 100%;
z-index: 30; } z-index: 30; }
#output {
-moz-hyphens: auto;
-ms-hyphens: auto;
-webkit-hyphens: auto;
hyphens: auto;
word-wrap: break-word; }
#outputcard { #outputcard {
display: none; } display: none; }

10
res/css/main.sass
View file

@ -68,6 +68,7 @@ body
line-height: $drawer-item-height line-height: $drawer-item-height
font-size: $drawer-item-font-size font-size: $drawer-item-font-size
padding-left: 16px padding-left: 16px
cursor: pointer
.draweritem:hover .draweritem:hover
background: $hovered-element-color background: $hovered-element-color
@ -117,6 +118,7 @@ body
margin-left: 8px margin-left: 8px
padding: 5px padding: 5px
color: $primary-color color: $primary-color
cursor: pointer
.cardbutton:hover .cardbutton:hover
background: $hovered-element-color background: $hovered-element-color
@ -131,6 +133,14 @@ body
height: 100% height: 100%
z-index: 30 z-index: 30
#output
-moz-hyphens: auto
-ms-hyphens: auto
-webkit-hyphens: auto
hyphens: auto
word-wrap: break-word
#outputcard #outputcard
display: none display: none