From ff0d4fcd35c69096c094abe37018ae25dd6da77e Mon Sep 17 00:00:00 2001 From: ckegel <57967583+CKegel@users.noreply.github.com> Date: Sun, 13 Oct 2024 16:39:28 -0400 Subject: [PATCH] Added callsign marking and restructed in preperation for decoding. --- decode.html | 32 +++++++++++++++++ encode.html | 65 ++++++++++++++++++++++++++++++++++ script.js => encode.js | 80 ++++++++++++++++++++++++++++-------------- index.html | 42 ++++++++-------------- learn.html | 35 ++++++++++++++++++ style.css | 8 +++++ 6 files changed, 209 insertions(+), 53 deletions(-) create mode 100644 decode.html create mode 100644 encode.html rename script.js => encode.js (93%) create mode 100644 learn.html diff --git a/decode.html b/decode.html new file mode 100644 index 0000000..7f8aa3e --- /dev/null +++ b/decode.html @@ -0,0 +1,32 @@ + + + + + + + + Web-SSTV + + + +
+

Stand by for SSTV decoding (coming soon...)

+
+ + + \ No newline at end of file diff --git a/encode.html b/encode.html new file mode 100644 index 0000000..c6c8a14 --- /dev/null +++ b/encode.html @@ -0,0 +1,65 @@ + + + + + + + + Web-SSTV + + + +
+ + + + + +
+ +
+ +
+
+ + + + +
+ + +
+ + + + \ No newline at end of file diff --git a/script.js b/encode.js similarity index 93% rename from script.js rename to encode.js index b839f2b..6fec941 100644 --- a/script.js +++ b/encode.js @@ -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); }; \ No newline at end of file diff --git a/index.html b/index.html index f79d8e5..bcd72c6 100644 --- a/index.html +++ b/index.html @@ -7,34 +7,23 @@ Web-SSTV +
-

Web SSTV

-

Send SSTV signals from your browser:

- - - - - -
- -
- -
- - +

About:

+

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.

+

Changelog:

+

October 2024 - Restructured the site in preperation for decoding. Added the ability to mark images with the users call sign.

+

December 2023 - Initial site published via Github pages.

- \ No newline at end of file diff --git a/learn.html b/learn.html new file mode 100644 index 0000000..ee44416 --- /dev/null +++ b/learn.html @@ -0,0 +1,35 @@ + + + + + + + + Web-SSTV + + + +
+

Educational resources coming soon!

+

For now, be sure to check out JL Barber's (N7CXI) Proposal for SSTV Mode specifications, it was instrumental in the creation of Web-SSTV

+
+ + + + + \ No newline at end of file diff --git a/style.css b/style.css index 9f32eeb..a0170da 100644 --- a/style.css +++ b/style.css @@ -4,4 +4,12 @@ #imgArea { padding: 10px; color: red; +} + +.rounded { + border-radius: 10px; +} + +li { + font-size: 32px; } \ No newline at end of file