2018-10-27 23:46:51 +00:00
<!doctype html>
2019-06-25 20:14:40 +00:00
< meta charset = utf-8 >
2018-10-28 05:42:31 +00:00
< title > vnIIc< / title >
2018-10-28 23:49:56 +00:00
< link rel = icon href = "res/icon128.png" >
2018-10-28 21:10:50 +00:00
< link rel = stylesheet href = "https://fonts.googleapis.com/css?family=Audiowide" >
2020-07-19 00:08:01 +00:00
2020-11-22 00:54:20 +00:00
< meta http-equiv = "origin-trial" content = "AowGEBOzSE2Jqliny89QBGVzieiVnB+RW9yJO80DZA2IQru6KNTBJdKa+CoIWTMyr32esDhx4gTBkkHNdQsBvgEAAABReyJvcmlnaW4iOiJodHRwczovL2Eyc3R1ZmYuZ2l0aHViLmlvOjQ0MyIsImZlYXR1cmUiOiJTZXJpYWwiLCJleHBpcnkiOjE2MDk2MzUyMDN9" > <!-- Expires Jan 2, 2021 -->
2020-12-28 03:35:16 +00:00
< meta http-equiv = "origin-trial" content = "AvlM+aqjsSvCe+lHmJdyYRjQutA7lwLRRnrWW/olKCILAWfKBtisFG1rWrpWS+Dw7eEP+gHttC4HBeaX4bPJ0AAAAABReyJvcmlnaW4iOiJodHRwczovL2Eyc3R1ZmYuZ2l0aHViLmlvOjQ0MyIsImZlYXR1cmUiOiJTZXJpYWwiLCJleHBpcnkiOjE2MTI3NTUyNTR9" > <!-- Expires Feb 7, 2021 -->
2020-02-22 18:58:02 +00:00
2018-10-27 23:46:51 +00:00
< style >
2018-10-28 05:42:31 +00:00
h1, h2, h3 { font-family: Audiowide; }
h1 { font-size: 64px; margin: 0;}
2018-10-28 23:49:56 +00:00
h2,h3 { margin-bottom: 4px; }
2018-10-28 21:10:50 +00:00
p { margin-top: 4px; }
#quant { border: 8px gray ridge; padding: 10px; background-color: #202020; }
2018-10-28 05:42:31 +00:00
#title { background-color: #d0d0d0; height: 128px; margin: 20px 0; padding: 10px; }
2018-10-28 21:10:50 +00:00
body {
font-family: sans-serif;
margin: 0 auto;
width: 600px;
}
section { font-size: 80%; }
2019-06-25 20:14:40 +00:00
body:not(.supports-serial) #serial-support::before,
body:not(.supports-getDisplayMedia) #stream-support::before {
content: "👎 not supported"
}
body.supports-serial #serial-support::before,
body.supports-getDisplayMedia #stream-support::before {
content: "👍 supported!"
}
2019-10-23 23:43:29 +00:00
#progress {
position: absolute;
z-index: 100;
left: 0; top: 0; bottom: 0; right: 0;
opacity: 0.9;
background-color: black;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
#progress progress {
width: 75%;
height: 50px;
}
body:not(.show-progress) #progress { display: none; }
2018-10-27 23:46:51 +00:00
< / style >
2019-10-23 23:43:29 +00:00
< div id = progress > < progress id = prog min = 0 max = 100 value = 50 > < / progress > < / div >
2018-10-28 05:42:31 +00:00
< div id = title >
< h1 > vn//c
< img style = "float: left; margin-right: 24px;" src = "res/icon128.png" >
< / h1 >
< div >
Desktop streaming to an Apple II with Super Serial Card
< / div >
< / div >
2018-10-28 23:49:56 +00:00
< section id = requirements >
< h2 > Requirements< / h2 >
< ul >
2019-06-25 20:14:40 +00:00
< li > Browser support for < a target = _blank href = "https://w3c.github.io/mediacapture-screen-share/" > Screen Capture< / a > : < span id = stream-support > < / span >
< li > Browser support for < a target = _blank href = "https://wicg.github.io/serial/" > Web Serial< / a > : < span id = serial-support > < / span >
2018-10-28 23:49:56 +00:00
< li > Apple II with Super Serial Card in slot 2. (e.g. Apple IIc, Apple IIgs, Laser 128)
< li > Serial connection between your modern computer and the Apple, such as via a < a target = _blank href = "https://en.wikipedia.org/wiki/Null_modem" > null-modem< / a > cable and USB to RS-232 adapter from < a target = _blank href = "http://retrofloppy.com/products/" > RetroFloppy< / a > .
< / ul >
< / section >
2018-10-28 05:42:31 +00:00
2018-10-28 23:49:56 +00:00
< canvas id = quant width = 140 height = 192 style = "width: 280px; height: 192px; float: right;" > < / canvas >
< section id = steps >
2018-12-09 04:19:21 +00:00
2018-10-28 23:49:56 +00:00
< h3 > Step 1:< / h3 >
< button id = bootstrap
title="Send the vnIIc client code to the Apple II over the selected COM port. The code is streamed down as if a user is typing. You will be prompted to enter commands on the Apple II to initiate the transfer.">Bootstrap Serial Connection< / button > to Apple II
2018-12-09 04:19:21 +00:00
< h3 > Step 2:< / h3 >
< button id = start > Start Streaming< / button > desktop or application window
< br >
2018-10-28 23:49:56 +00:00
< label
title="Select the level to which 'dithering' or speckling is used to approximate colors that can't be displayed on the Apple II display. A lower value means more solid colors but a poorer approximation. A higher value means a better approximation but more speckling.">Adjust dither: < input id = dither type = range min = 0 max = 100 value = 90 > < / label >
2018-12-09 04:19:21 +00:00
< h3 > Extras:< / h3 >
< label > < button id = save > Save Frame< / button > as an 8192-byte hires image file< / label > < br >
2018-10-28 23:49:56 +00:00
< / section >
2018-10-27 23:46:51 +00:00
2018-10-28 03:18:13 +00:00
< script src = "server.js" > < / script >
2018-10-28 05:42:31 +00:00
2018-10-28 21:10:50 +00:00
< section id = about >
2018-10-28 05:42:31 +00:00
< h2 > About vnIIc< / h2 >
< p >
The name "vnIIc" is a play on < a target = _blank
href="https://en.wikipedia.org/wiki/Virtual_Network_Computing">VNC
("Virtual Network Computing")< / a > and the < a target = _blank
href="https://en.wikipedia.org/wiki/Apple_IIc">Apple IIc< / a > for humor
purposes, but the application does not use the VNC or < a target = _blank
href="https://en.wikipedia.org/wiki/RFB_protocol">RFB< / a > protocols.
Apple IIc is a trademark of Apple Computer, Inc. VNC and RFB are
registered trademarks of RealVNC Ltd.
< / p >
< p >
The first version was a Windows application, written in 2008. See a < a
target=_blank href="https://www.youtube.com/watch?v=vAZHJa91JHk">video
demonstration on YouTube< / a > .
< / p >
< p >
Thanks to: Michael J. Mahon, Nick Westgate, David Wilson, David
Schmenk, David Schmidt and the rest of the < a target = _blank
href="https://groups.google.com/forum/#!forum/comp.sys.apple2.programmer">comp.sys.apple2.programmer< / a >
gang!
< / p >
2018-10-28 21:10:50 +00:00
< / section >
2018-10-28 05:42:31 +00:00
< / div >
