Apple-2-Tools/sendalo
1
0
Fork 0
mirror of https://github.com/datajerk/sendalo.git synced 2024-06-08 16:29:32 +00:00
Code Issues Projects Releases Wiki Activity

Starting to look usable

Browse Source
This commit is contained in:
Federico Santandrea 2020-06-16 23:53:56 +02:00
parent 0e58ab15a6
commit a856a794d0
2 changed files with 201 additions and 153 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

347
sendalo.html.tpl
View File

@ -1,180 +1,223 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="utf-8"/> <meta charset="utf-8"/>
<meta name="viewport" content="width=device-width,initial-scale=1" /> <meta name="viewport" content="width=device-width,initial-scale=1" />
<title>Sendalo</title> <title>Sendalo</title>
<style> <style>
body { body {
background-color: #707087; background-color: #707087;
font-family: sans-serif; font-family: sans-serif;
font-size: 1em; font-size: 1em;
color: white; color: white;
} }
h1, h2 { h1, h2 {
text-align: center; text-align: center;
padding: 0.2em; padding: 0.2em;
margin: 0; margin: 0;
} }
h2 { h2 {
font-weight: normal; font-weight: normal;
font-size: 0.9em; font-size: 0.9em;
} }
li { li {
margin-bottom: 0.7em; margin-bottom: 0.7em;
} }
a, a:visited { a, a:visited {
color: white; color: white;
} }
#w { form {
text-align: center; text-align: center;
} }
#w {
text-align: center;
}
#expl { #expl {
display: none; display: none;
} }
footer { input#url {
margin-top: 2em; width: 300px;
font-size: 0.8em; max-width: 90%;
} }
</style>
input#upload {
width: 300px;
max-width: 90%;
text-align: left;
}
footer {
margin-top: 2em;
font-size: 0.8em;
}
#audiopad {
display: block;
width: 100%;
max-width: 300px;
margin: 0 auto;
padding-top: 2em;
text-align: center;
}
#playbutton {
width: 10em;
height: 2em;
font-size: inherit;
}
</style>
<script> <script>
function downloadFile() { function downloadFile() {
var file = document.getElementById('upload').files[0]; var file = document.getElementById('upload').files[0];
if (file) { if (file) {
var fr = new FileReader(); var fr = new FileReader();
fr.onloadend = function() { fr.onloadend = function() {
downloadComplete(this.result); downloadComplete(this.result);
}; };
fr.readAsArrayBuffer(file); fr.readAsArrayBuffer(file);
} else { } else {
requestURL = document.getElementById('url').value; requestURL = document.getElementById('url').value;
if (requestURL == '') return; if (requestURL == '') return;
var xhr = new XMLHttpRequest(); var xhr = new XMLHttpRequest();
xhr.open('POST', 'sendalo.php', true); xhr.open('POST', 'sendalo.php', true);
xhr.responseType = 'arraybuffer'; xhr.responseType = 'arraybuffer';
xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded'); xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
xhr.onreadystatechange = function (ev) { xhr.onreadystatechange = function (ev) {
if (this.readyState === 4 && this.status >= 200 && this.status <= 400) { if (this.readyState === 4 && this.status >= 200 && this.status <= 400) {
downloadComplete(this.response); downloadComplete(this.response);
} }
}; };
xhr.send("url=" + encodeURI(requestURL)); xhr.send("url=" + encodeURI(requestURL));
} }
} }
function downloadComplete(what) { function downloadComplete(what) {
FS.writeFile('/tmp/c2t.dsk', new Uint8Array(what)); var dt = new Uint8Array(what);
var opts = document.getElementById('format').checked ? '-8' : '-n8'; if (!dt || dt.length !== 143360) {
Module.callMain([opts, '/tmp/c2t.dsk', '/tmp/c2t.wav']); displayError();
fd = FS.readFile('/tmp/c2t.wav', {encoding: 'binary'}); return;
b = new Blob([fd], { type: 'audio/wav' }); }
u = URL.createObjectURL(b);
audio = document.getElementById('audio'); FS.writeFile('/tmp/c2t.dsk', dt);
source = document.getElementById('source'); var opts = document.getElementById('format').checked ? '-8' : '-n8';
source.src = u; Module.callMain([opts, '/tmp/c2t.dsk', '/tmp/c2t.wav']);
audio.load(); fd = FS.readFile('/tmp/c2t.wav', {encoding: 'binary'});
audio.play(); b = new Blob([fd], { type: 'audio/wav' });
} u = URL.createObjectURL(b);
</script> audio = document.getElementById('audio');
</head> source = document.getElementById('source');
source.src = u;
audio.load();
audio.play();
}
function displayError() {
alert('Error: only 140K DOS-order images are supported for now. That doesn\'t look like one.');
}
</script>
</head>
<body> <body>
<header> <header>
<h1>Sendalo!</h1> <h1>Sendalo!</h1>
<h2>Insert image URL or upload file</h2> <h2>Insert image URL or upload file</h2>
</header> </header>
<main> <main>
<form> <form>
<input type="text" placeholder="https://www.apple.asimov.net/images/masters/Apple%20DOS%203.3%20January%201983.dsk" id="url"/> <input type="text" placeholder="https://www.apple.asimov.net/images/masters/Apple%20DOS%203.3%20January%201983.dsk" id="url"/><br/>
<input type="file" id="upload" /> <input type="file" id="upload" /><br/>
<input type="button" onclick="downloadFile()"/> <input id="format" type="checkbox"><label for="format"><small>Format disk?</small></label><br/><br/>
<label for="format">Format disk?</label><input id="format" type="checkbox"> <input type="button" id="playbutton" value="Play!" onclick="downloadFile()"/><br/>
</form>
<div id="audiopad">
<audio controls="controls" id="audio">
<source id="source" src="" type="audio/wav" />
</audio>
</div>
<audio controls="controls" id="audio"> <p id="w"><a href="#" onclick="document.getElementById('expl').style.display='block'">
<source id="source" src="" type="audio/wav" /> <small>What's this?</small>
</audio> </a></p>
<div id="expl">
<p>
Sendalo is a web/mobile interface to an emscripten build of the excellent
<a href="https://github.com/datajerk/c2t">c2t</a> tool by
<a href="https://github.com/datajerk">datajerk</a>.
</p>
<p>
c2t is a really clever program that allows transferring disk images to
a running Apple II (among other things).
</p>
</form> <h3>Why do I think this is useful?</h3>
<p><ul>
<li>The ASCII Express site is fun and a great idea, but it has
limited selection.</li>
<p id="w"><a href="#" onclick="document.getElementById('expl').style.display='block'"> <li>ADTPro is fantastic! But you need a running modern PC, and
<small>What's this?</small> some means of bidirectional communication to make it work.
</a></p> Ethernet cards are expensive, serial not readily available
<div id="expl"> and audio mic input jacks are becoming difficult to find on
<p> modern laptops. And there is no mobile version.</li>
Sendalo is a web/mobile interface to an emscripten build of the excellent
<a href="https://github.com/datajerk/c2t">c2t</a> tool by
<a href="https://github.com/datajerk">datajerk</a>.
</p>
<p>
c2t is a really clever program that allows transferring disk images to
a running Apple II (among other things).
</p>
<h3>Why do I think this is useful?</h3> <li>c2t will work with just a simplex link, so all you need is an
<p><ul> audio cable and there you go! But you still need another
<li>The ASCII Express site is fun and a great idea, but it has computer and typing commands in the terminal.</li>
limited selection.</li>
<li>ADTPro is fantastic! But you need a running modern PC, and <li>Finally, with this frontend you can unleash the power of c2t
some means of bidirectional communication to make it work. directly on your mobile device, with just an audio cable
Ethernet cards are expensive, serial not readily available and no PC. Just paste the .dsk image URL from your favorite
and audio mic input jacks are becoming difficult to find on web archive, or upload your own, and the disk will be streamed
modern laptops. And there is no mobile version.</li> over. Also nice on computers if you don’t want to download
executables or type commands.</li>
</ul></p>
<li>c2t will work with just a simplex link, so all you need is an <p>
audio cable and there you go! But you still need another c2t can do a lot more than this, don’t forget to check the official
computer and typing commands in the terminal.</li> project page on GitHub to learn more.
</p>
</div>
</main>
<li>Finally, with this frontend you can unleash the power of c2t <footer>
directly on your mobile device, with just an audio cable <p>
and no PC. Just paste the .dsk image URL from your favorite Sendalo: &copy; 2020 Federico Santandrea<br/>
web archive, or upload your own, and the disk will be streamed <a href="mailto:sntfrc@outlook.it">sntfrc@outlook.it</a><br/><br/>
over. Also nice on computers if you don’t want to download c2t: &copy; 2017 Egan Ford &lt;datajerk@gmail.com&gt;<br/>
executables or type commands.</li> See <a href="https://raw.githubusercontent.com/datajerk/c2t/master/LICENSE">
</ul></p> LICENSE</a>.
</footer>
<p> <script>
c2t can do a lot more than this, don’t forget to check the official var Module = {
project page on GitHub to learn more. print: (function(text) {
</p> console.log(text);
</div> }),
</main> printErr: (function(text) {
console.log(text);
})
};
</script>
<footer> {{{ SCRIPT }}}
<p> </body>
Sendalo: &copy; 2020 Federico Santandrea<br/>
<a href="mailto:sntfrc@outlook.it">sntfrc@outlook.it</a><br/><br/>
c2t: &copy; 2017 Egan Ford &lt;datajerk@gmail.com&gt;<br/>
See <a href="https://raw.githubusercontent.com/datajerk/c2t/master/LICENSE">
LICENSE</a>.
</footer>
<script>
var Module = {
print: (function(text) {
console.log(text);
}),
printErr: (function(text) {
console.log(text);
})
};
</script>
{{{ SCRIPT }}}
</body>
</html> </html>

7
sendalo.php.tpl
View File

@ -1,6 +1,11 @@
<?php <?php
if (isset($_REQUEST["url"])) { if (isset($_REQUEST["url"])) {
echo("TODO"); $url = $_REQUEST["url"];
header('Content-type: application/octet-stream');
$data = file_get_contents($url, $maxlen=150000);
file_put_contents("php://output", $data);
die(); die();
} }
?> ?>