Skip to content

Commit

Permalink
Merge pull request #2 from CKegel/dev
Browse files Browse the repository at this point in the history 
Added callsign marking and restructed in preperation for decoding.
  • Loading branch information
@CKegel
CKegel authored Oct 13, 2024
2 parents 6ebd899 + ff0d4fc commit b3ba10e
Show file tree
Hide file tree
Showing 6 changed files with 205 additions and 49 deletions.
32 changes: 32 additions & 0 deletions decode.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,32 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@picocss/pico@1/css/pico.min.css">
<link rel="stylesheet" href="./style.css">
<title>Web-SSTV</title>
</head>
<nav class="container">
<ul>
<li><strong><a href="./index.html" class="contrast">Web SSTV</a></strong></li>
</ul>
<ul>
<li><a href="./encode.html">Encode</a></li>
<li><a href="./decode.html" class="contrast">Decode</a></li>
<li><a href="./learn.html">Learn</a></li>
</ul>
</nav>
<body>
<main class="container">
<h4>Stand by for SSTV decoding (coming soon...)</h4>
</main>
<footer class="container">
<small>SSTV signal decoding and more encoding modes coming soon.</small>
<br>
<small><a href="https://github.com/CKegel/Web-SSTV/">Check out the project on Github</a></small>
<br>
<small>&copy 2023 Christian Kegel - Available under the MIT License</small>
</footer>
</body>
</html>
65 changes: 65 additions & 0 deletions encode.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,65 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@picocss/pico@1/css/pico.min.css">
<link rel="stylesheet" href="./style.css">
<title>Web-SSTV</title>
</head>
<nav class="container">
<ul>
<li><strong><a href="./index.html" class="contrast">Web SSTV</a></strong></li>
</ul>
<ul>
<li><a href="./encode.html" class="contrast">Encode</a></li>
<li><a href="./decode.html">Decode</a></li>
<li><a href="./learn.html">Learn</a></li>
</ul>
</nav>
<body>
<main class="container">
<label id="modeLabel" for="modeSelect">Select a mode:</label>
<select id="modeSelect">
<option value="none" selected disabled hidden>No mode selected</option>
<option value="none" disabled>--- Martin ---</option>
<option value="M1">Martin M1</option>
<option value="M2">Martin M2</option>
<option value="none" disabled>--- Scottie ---</option>
<option value="S1">Scottie 1</option>
<option value="S2">Scottie 2</option>
<option value="SDX">Scottie DX</option>
<option value="none" disabled>--- PD ---</option>
<option value="PD50">PD-50</option>
<option value="PD90">PD-90</option>
</select>

<label id="imgLabel" for="imgPicker">Upload an image:</label>
<input type="file" name="imgPicker" id="imgPicker" disabled />
<center id="imgArea" class="container">
<canvas id="imgCanvas" width="320" height="256"></canvas>
<br>
<span id="warningText"></span>
</center>
<div id="callSignControls">
<label id="callSignLabel" for="callSign">Enter your callsign (optional):</label>
<input type="text" name="callSign" id="callSign" placeholder="Call Sign" />
<label id="callSignLocationLabel" for="callSignLocation">Call Sign Location:</label>
<select id="callSignLocation">
<option value="top-left" selected>Top Left</option>
<option value="bottom-left" >Bottom Left</option>
</select>
</div>
<button id="startButton" class="contrast" disabled>Encode</button>

</main>
<footer class="container">
<small>SSTV signal decoding and more encoding modes coming soon.</small>
<br>
<small><a href="https://github.com/CKegel/Web-SSTV/">Check out the project on Github</a></small>
<br>
<small>&copy 2023 Christian Kegel - Available under the MIT License</small>
</footer>
</body>
<script src="./encode.js"></script>
</html>
72 changes: 50 additions & 22 deletions script.js → encode.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -578,21 +578,48 @@ let modeSelect = document.getElementById("modeSelect")
let startButton = document.getElementById("startButton");
let imgPicker = document.getElementById("imgPicker");
let warningText = document.getElementById("warningText");
let callSignEntry = document.getElementById("callSign");
let callSignLocation = document.getElementById("callSignLocation")

let canvas = document.getElementById("imgCanvas");
let canvasCtx = canvas.getContext("2d");
let rawImage = new Image();
let sstvFormat = new Format();

function drawPreview() {
canvas.width = sstvFormat.vertResolution;
canvas.height = sstvFormat.numScanLines;
canvasCtx.drawImage(rawImage,0,0, canvas.width, canvas.height);
canvasCtx.font = "bold 24pt sans-serif";

let callSignYCord;
if(callSignLocation.value == "top-left")
callSignYCord = 30;
else if(callSignLocation.value == "bottom-left")
callSignYCord = sstvFormat.numScanLines - 6;

canvasCtx.fillText(callSignEntry.value, 10, callSignYCord);
canvasCtx.strokeStyle = "white";
canvasCtx.strokeText(callSignEntry.value, 10, callSignYCord);
imageLoaded = true;
}

callSignEntry.oninput = (e) => {
if(imageLoaded)
drawPreview();
}

callSignLocation.addEventListener("change", (e) => {
if(imageLoaded)
drawPreview();
});

rawImage.onload = () => { drawPreview() };

imgPicker.addEventListener("change", (e) => {
var reader = new FileReader();
reader.onload = function(event){
var img = new Image();
img.onload = function(){
canvas.width = 320;
canvas.height = 256;
canvasCtx.drawImage(img,0,0, canvas.width, canvas.height);
}
img.src = event.target.result;
imageLoaded = true;
rawImage.src = event.target.result;
if(modeSelect.value != "none"){
warningText.textContent = "";
startButton.disabled = false;
Expand All @@ -605,26 +632,27 @@ modeSelect.addEventListener("change", (e) => {
if(modeSelect.value != "none"){
warningText.textContent = "";
startButton.disabled = !imageLoaded;
imgPicker.disabled = false;
}
});

startButton.onclick = () => {
let format;
if(modeSelect.value == "M1")
format = new MartinMOne();
sstvFormat = new MartinMOne();
else if(modeSelect.value == "M2")
format = new MartinMTwo();
sstvFormat = new MartinMTwo();
else if(modeSelect.value == "S1")
format = new ScottieOne();
sstvFormat = new ScottieOne();
else if(modeSelect.value == "S2")
format = new ScottieTwo();
sstvFormat = new ScottieTwo();
else if(modeSelect.value == "SDX")
format = new ScottieDX();
sstvFormat = new ScottieDX();
else if(modeSelect.value == "PD50")
format = new PD50();
sstvFormat = new PD50();
else if(modeSelect.value == "PD90")
format = new PD90();
else {
sstvFormat = new PD90();
});

startButton.onclick = () => {

if(modeSelect.value == "none") {
warningText.textContent = "You must select a mode";
startButton.disabled = true;
return;
Expand All @@ -648,6 +676,6 @@ startButton.onclick = () => {

oscillator.connect(audioCtx.destination);

format.prepareImage(canvasData.data);
format.encodeSSTV(oscillator, audioCtx.currentTime + 1);
sstvFormat.prepareImage(canvasData.data);
sstvFormat.encodeSSTV(oscillator, audioCtx.currentTime + 1);
};
42 changes: 15 additions & 27 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,34 +7,23 @@
<link rel="stylesheet" href="./style.css">
<title>Web-SSTV</title>
</head>
<nav class="container">
<ul>
<li><strong><a href="./index.html" class="contrast">Web SSTV</a></strong></li>
</ul>
<ul>
<li><a href="./encode.html">Encode</a></li>
<li><a href="./decode.html">Decode</a></li>
<li><a href="#">Learn</a></li>
</ul>
</nav>
<body>
<main class="container">
<h1>Web SSTV</h1>
<h3>Send SSTV signals from your browser:</h3>
<label id="modeLabel" for="modeSelect">Select a mode:</label>
<select id="modeSelect">
<option value="none" selected disabled hidden>No mode selected</option>
<option value="none" disabled>--- Martin ---</option>
<option value="M1">Martin M1</option>
<option value="M2">Martin M2</option>
<option value="none" disabled>--- Scottie ---</option>
<option value="S1">Scottie 1</option>
<option value="S2">Scottie 2</option>
<option value="SDX">Scottie DX</option>
<option value="none" disabled>--- PD ---</option>
<option value="PD50">PD-50</option>
<option value="PD90">PD-90</option>
</select>

<label id="imgLabel" for="imgPicker">Upload an image:</label>
<input type="file" name="imgPicker" id="imgPicker"/>
<center id="imgArea" class="container">
<canvas id="imgCanvas" width="320" height="256"></canvas>
<br>
<span id="warningText"></span>
</center>
<button id="startButton" class="contrast" disabled>Encode</button>

<h4>About:</h4>
<p>Web SSTV aims to both encode and decode SSTV using plain JavaScript and Web Audio API. Web SSTV can be run entirely offline (without styling), and on any platform from Chromebooks to phones, so long as they support JavaScript and Web Audio. By making SSTV readily available on many platforms, we aim to create educational opportunities and introduce more people to STEM and amateur radio.</p>
<h4>Changelog:</h4>
<p>October 2024 - Restructured the site in preperation for decoding. Added the ability to mark images with the users call sign.</p>
<p>December 2023 - Initial site published via Github pages.</p>
</main>
<footer class="container">
<small>SSTV signal decoding and more encoding modes coming soon.</small>
Expand All @@ -44,5 +33,4 @@ <h3>Send SSTV signals from your browser:</h3>
<small>&copy 2023 Christian Kegel - Available under the MIT License</small>
</footer>
</body>
<script src="./script.js"></script>
</html>
35 changes: 35 additions & 0 deletions learn.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,35 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@picocss/pico@1/css/pico.min.css">
<link rel="stylesheet" href="./style.css">
<title>Web-SSTV</title>
</head>
<nav class="container">
<ul>
<li><strong><a href="./index.html" class="contrast">Web SSTV</a></strong></li>
</ul>
<ul>
<li><a href="./encode.html">Encode</a></li>
<li><a href="./decode.html">Decode</a></li>
<li><a href="./learn.html" class="contrast">Learn</a></li>
</ul>
</nav>
<body>
<main class="container">
<h4>Educational resources coming soon!</h4>
<p>For now, be sure to check out JL Barber's (N7CXI) <a href="http://www.barberdsp.com/downloads/Dayton%20Paper.pdf">Proposal for SSTV Mode specifications</a>, it was instrumental in the creation of Web-SSTV</p>
</main>

<footer class="container">
<small>SSTV signal decoding and more encoding modes coming soon.</small>
<br>
<small><a href="https://github.com/CKegel/Web-SSTV/">Check out the project on Github</a></small>
<br>
<small>&copy 2024 Christian Kegel - Available under the MIT License</small>
</footer>
</body>
<script src="./encode.js"></script>
</html>
8 changes: 8 additions & 0 deletions style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,4 +4,12 @@
#imgArea {
padding: 10px;
color: red;
}

.rounded {
border-radius: 10px;
}

li {
font-size: 32px;
}

0 comments on commit b3ba10e

Please sign in to comment.