mirror of
https://github.com/CKegel/Web-SSTV.git
synced 2025-06-04 02:20:17 +00:00
Merge pull request #2 from CKegel/dev
Added callsign marking and restructed in preperation for decoding.
This commit is contained in:
Christian
GitHub
commit
b3ba10ee71
32
decode.html
Normal file
32
decode.html
Normal file
@ -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>© 2023 Christian Kegel - Available under the MIT License</small>
|
||||
</footer>
|
||||
</body>
|
||||
</html>
|
||||
65
encode.html
Normal file
65
encode.html
Normal file
@ -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>© 2023 Christian Kegel - Available under the MIT License</small>
|
||||
</footer>
|
||||
</body>
|
||||
<script src="./encode.js"></script>
|
||||
</html>
|
||||
@ -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;
|
||||
@ -605,26 +632,27 @@ modeSelect.addEventListener("change", (e) => {
|
||||
if(modeSelect.value != "none"){
|
||||
warningText.textContent = "";
|
||||
startButton.disabled = !imageLoaded;
|
||||
imgPicker.disabled = false;
|
||||
}
|
||||
if(modeSelect.value == "M1")
|
||||
sstvFormat = new MartinMOne();
|
||||
else if(modeSelect.value == "M2")
|
||||
sstvFormat = new MartinMTwo();
|
||||
else if(modeSelect.value == "S1")
|
||||
sstvFormat = new ScottieOne();
|
||||
else if(modeSelect.value == "S2")
|
||||
sstvFormat = new ScottieTwo();
|
||||
else if(modeSelect.value == "SDX")
|
||||
sstvFormat = new ScottieDX();
|
||||
else if(modeSelect.value == "PD50")
|
||||
sstvFormat = new PD50();
|
||||
else if(modeSelect.value == "PD90")
|
||||
sstvFormat = new PD90();
|
||||
});
|
||||
|
||||
startButton.onclick = () => {
|
||||
let format;
|
||||
if(modeSelect.value == "M1")
|
||||
format = new MartinMOne();
|
||||
else if(modeSelect.value == "M2")
|
||||
format = new MartinMTwo();
|
||||
else if(modeSelect.value == "S1")
|
||||
format = new ScottieOne();
|
||||
else if(modeSelect.value == "S2")
|
||||
format = new ScottieTwo();
|
||||
else if(modeSelect.value == "SDX")
|
||||
format = new ScottieDX();
|
||||
else if(modeSelect.value == "PD50")
|
||||
format = new PD50();
|
||||
else if(modeSelect.value == "PD90")
|
||||
format = new PD90();
|
||||
else {
|
||||
|
||||
if(modeSelect.value == "none") {
|
||||
warningText.textContent = "You must select a mode";
|
||||
startButton.disabled = true;
|
||||
return;
|
||||
@ -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
index.html
42
index.html
@ -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>
|
||||
@ -44,5 +33,4 @@
|
||||
<small>© 2023 Christian Kegel - Available under the MIT License</small>
|
||||
</footer>
|
||||
</body>
|
||||
<script src="./script.js"></script>
|
||||
</html>
|
||||
35
learn.html
Normal file
35
learn.html
Normal file
@ -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>© 2024 Christian Kegel - Available under the MIT License</small>
|
||||
</footer>
|
||||
</body>
|
||||
<script src="./encode.js"></script>
|
||||
</html>
|
||||
Loading…
x
Reference in New Issue
Block a user