Skip to content

Commit d7581aa

Browse files
quanyangquanyang
committed
vanillaJS port
1 parent dc3da94 commit d7581aa

File tree

3 files changed

+211
-0
lines changed

3 files changed

+211
-0
lines changed

‎js_version/airgap.html‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
<!DOCTYPE html>
2+
<html>
3+
4+
<head>
5+
<meta charset="utf-8">
6+
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
7+
<title>System Bus Radio</title>
8+
<meta name="description" content="Simulator for MIPS">
9+
<link rel="stylesheet" href="main.css">
10+
<script src="./airgap.js"></script>
11+
</head>
12+
<body>
13+
<div class="header">
14+
System Bus Radio
15+
</div>
16+
<div class="content">
17+
</br>
18+
<input type="button" value="Play Song" onclick="start()"></br></br>
19+
<textarea id="logs" style="width:70%;min-height:300px">Tested with Chrome at 1560Khz
20+
</textarea>
21+
<div style="font-size:14px">Ported by Yeo Quan Yang. Credits to the original author William Entriken @https://github.com/fulldecent</div><br/>
22+
</div>
23+
</body>
24+
</html>

‎js_version/airgap.js‎

Lines changed: 87 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,87 @@
1+
//Credits to https://github.com/fulldecent/system-bus-radio
2+
//As well as Jordan Harband for the nodejs simd library
3+
//Tested to be working on Chrome at 1560khz
4+
5+
var _i32x4 = new Int32Array(4);
6+
Int32x4 = function(x, y, z, w) {
7+
if (!(this instanceof Int32x4)) {
8+
return new Int32x4(x, y, z, w);
9+
}
10+
11+
this.x_ = x|0;
12+
this.y_ = y|0;
13+
this.z_ = z|0;
14+
this.w_ = w|0;
15+
}
16+
17+
Int32x4store = function(tarray, index, value) {
18+
var bpe = tarray.BYTES_PER_ELEMENT;
19+
_i32x4[0] = value.x_;
20+
_i32x4[1] = value.y_;
21+
_i32x4[2] = value.z_;
22+
_i32x4[3] = value.w_;
23+
var array = bpe == 1 ? _i8x16 :
24+
bpe == 2 ? _i16x8 :
25+
bpe == 4 ? (tarray instanceof Float32Array ? _f32x4 : _i32x4) :
26+
_f64x2;
27+
var n = 16 / bpe;
28+
for (var i = 0; i < n; ++i)
29+
tarray[index + i] = array[i];
30+
return value;
31+
}
32+
33+
function now() {
34+
return performance.now()*1000000;
35+
}
36+
37+
var tarray = new Int32Array(4);
38+
var zero = Int32x4(0,0,0,0);
39+
var one = Int32x4(-1,-1,-1,-1);
40+
var NSEC_PER_SEC = 1000000000;
41+
42+
function square_am_signal(time,freq) {
43+
document.getElementById('logs').value += "Playing / "+time+" seconds / "+freq+"Hz\n";
44+
var period = NSEC_PER_SEC/freq;
45+
var start = now();
46+
var end = now()+time*NSEC_PER_SEC;
47+
while (now() < end) {
48+
var mid = start+period/2;
49+
var reset = start+period;
50+
while (now()<mid) {
51+
Int32x4store(tarray, 0, one);
52+
Int32x4store(tarray, 0, zero);
53+
}
54+
while(now() < reset){
55+
}
56+
start = reset
57+
}
58+
}
59+
60+
function start() {
61+
square_am_signal(0.400, 2673);
62+
square_am_signal(0.400, 2349);
63+
square_am_signal(0.400, 2093);
64+
square_am_signal(0.400, 2349);
65+
square_am_signal(0.400, 2673);
66+
square_am_signal(0.400, 2673);
67+
square_am_signal(0.790, 2673);
68+
square_am_signal(0.400, 2349);
69+
square_am_signal(0.400, 2349);
70+
square_am_signal(0.790, 2349);
71+
square_am_signal(0.400, 2673);
72+
square_am_signal(0.400, 3136);
73+
square_am_signal(0.790, 3136);
74+
square_am_signal(0.400, 2673);
75+
square_am_signal(0.400, 2349);
76+
square_am_signal(0.400, 2093);
77+
square_am_signal(0.400, 2349);
78+
square_am_signal(0.400, 2673);
79+
square_am_signal(0.400, 2673);
80+
square_am_signal(0.400, 2673);
81+
square_am_signal(0.400, 2673);
82+
square_am_signal(0.400, 2349);
83+
square_am_signal(0.400, 2349);
84+
square_am_signal(0.400, 2673);
85+
square_am_signal(0.400, 2349);
86+
square_am_signal(0.790, 2093);
87+
}

‎js_version/main.css‎

Lines changed: 100 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,100 @@
1+
body {
2+
background-color: #3498db;
3+
font-family: Futura,Helvetica, "Century Gothic";
4+
text-shadow: 1px 1px 0px black;
5+
margin:0px;
6+
padding:0px;
7+
}
8+
9+
.todo {
10+
font-size:12px;
11+
}
12+
.header {
13+
color: white;
14+
font-size: 50px;
15+
padding-top:20px;
16+
text-align: center;
17+
}
18+
.content {
19+
text-align: center;
20+
margin:auto;
21+
width:80%;
22+
font-size:12px;
23+
color:white;
24+
}
25+
#instructionBlock,.data {
26+
font-size:12px !important;
27+
}
28+
.data td {
29+
border:1px solid black;
30+
border-bottom:0px;
31+
border-right:0px;
32+
}
33+
.data td:last-child {
34+
border-right:1px solid black;
35+
}
36+
.data tr:last-child td{
37+
border-bottom:1px solid black;
38+
}
39+
40+
a.button, input.button {
41+
cursor: pointer;
42+
font-family:Futura,Century Gothic;
43+
background: #44c650;
44+
border: 0px;
45+
padding: 5px 80px;
46+
font-weight:bold;
47+
text-transform:uppercase;
48+
color: white;
49+
font-size: 15px;
50+
text-shadow: 1px 1px 0px #222;
51+
box-shadow: 3px 3px 0px #006633;
52+
-webkit-transition: background-color 0.15s ease-in-out;
53+
-moz-transition: background-color 0.15s ease-in-out;
54+
-o-transition: background-color 0.15s ease-in-out;
55+
transition: background-color 0.15s ease-in-out;
56+
}
57+
a.button {
58+
display: inline-block;
59+
text-decoration: none;
60+
padding: 6px 12px 6px 12px;
61+
}
62+
input.button {
63+
//font-size:15px!important;
64+
padding: 5px 20px;
65+
}
66+
a.button:active, input.button:active {
67+
position:relative;
68+
top:1px;
69+
}
70+
a.button:hover, input.button:hover {
71+
background: #00b200;
72+
color:white;
73+
text-shadow: 1px 1px 0px #222;
74+
position:relative;
75+
cursor:pointer;
76+
cursor:hand;
77+
}
78+
input[type="text"],input[type="password"],textarea, select {
79+
margin-left:0px;
80+
background-color: #F7f7f7;
81+
border: 1px solid black;
82+
padding: 5px;
83+
color:#444;
84+
-webkit-transition: border-color 0.2s ease-in-out;
85+
-moz-transition: border-color 0.2s ease-in-out;
86+
-o-transition: border-color 0.2s ease-in-out;
87+
transition: border-color 0.2s ease-in-out;
88+
}
89+
input[type="text"]:hover ,input[type="password"]:hover,textarea:hover,select:hover {
90+
// border :1px solid pink;
91+
box-shadow: 0px 0px 9px black;
92+
}
93+
input[type="text"]:focus ,input[type="password"]:focus,textarea:focus,select:focus {
94+
border :1px solid #CB4242;
95+
box-shadow: 0px 0px 9px #cb4242;
96+
}
97+
input, textarea, keygen, select, button, isindex {
98+
outline:none;
99+
resize: none;
100+
}

0 commit comments

Comments
 (0)