Skip to content

Commit 1755208

Browse files
bryanjosbryanjos
committed
Add demo page into this repo
1 parent 8e2dcce commit 1755208

File tree

15 files changed

+4417
-165
lines changed

15 files changed

+4417
-165
lines changed

‎.npmignore‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
docs_src
2+
docs
3+
webpack*

‎docs/all.css‎

Lines changed: 33 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎docs/all.css.map‎

Lines changed: 1 addition & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎docs/all.js‎

Lines changed: 2 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎docs/all.js.map‎

Lines changed: 1 addition & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎docs/index.html‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
<html>
2+
<head> <link href="/all.css" rel="stylesheet"></head>
3+
<body>
4+
<div id="main">
5+
<p>
6+
This is an demo for the
7+
<a href="https://github.com/bryanjos/processes"
8+
>erlang processes javascript library</a
9+
>
10+
which will hopefully be part of elixirscript. Below is a table with
11+
10,000 cells. For each cell there is a process responsible for updating
12+
its contents. Each process updates its cell's color and updates it to a
13+
random number. This demo is inspired by the
14+
<a href="http://swannodette.github.io/2013/08/02/100000-processes/"
15+
>10,000 Processes</a
16+
>
17+
demo on David Nolen's blog.
18+
</p>
19+
</div>
20+
<script type="text/javascript" src="/all.js"></script></body>
21+
</html>

‎docs_src/css/index.css‎

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
table {
2+
margin-left: 45px;
3+
font-family: courier;
4+
font-size: 8px;
5+
line-height: 1em !important;
6+
margin-bottom: 50px;
7+
}
8+
.group0 {
9+
color: #000;
10+
}
11+
.group1 {
12+
color: #f00;
13+
}
14+
.group2 {
15+
color: #0f0;
16+
}
17+
.group3 {
18+
color: #00f;
19+
}
20+
.group4 {
21+
color: #ff0;
22+
}
23+
.group5 {
24+
color: #0ff;
25+
}
26+
27+
#main {
28+
margin: auto;
29+
width: 60%;
30+
padding: 10px;
31+
}

‎docs_src/html/index.html‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
<html>
2+
<head> </head>
3+
<body>
4+
<div id="main">
5+
<p>
6+
This is an demo for the
7+
<a href="https://github.com/bryanjos/processes"
8+
>erlang processes javascript library</a
9+
>
10+
which will hopefully be part of elixirscript. Below is a table with
11+
10,000 cells. For each cell there is a process responsible for updating
12+
its contents. Each process updates its cell's color and updates it to a
13+
random number. This demo is inspired by the
14+
<a href="http://swannodette.github.io/2013/08/02/100000-processes/"
15+
>10,000 Processes</a
16+
>
17+
demo on David Nolen's blog.
18+
</p>
19+
</div>
20+
</body>
21+
</html>

‎docs_src/js/index.js‎

Lines changed: 59 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,59 @@
1+
import '../css/index.css'
2+
3+
import Processes from '../../src/index'
4+
5+
const system = new Processes.ProcessSystem()
6+
7+
const rows = 200
8+
const columns = 50
9+
10+
const maxProcesses = rows * columns
11+
12+
const main = document.getElementById('main')
13+
14+
tableCreate(rows, columns)
15+
16+
for (let i = 0; i < maxProcesses; i++) {
17+
const _pid = system.spawn(function*() {
18+
while (true) {
19+
yield* render(
20+
Math.floor(Math.random() * maxProcesses),
21+
Math.floor(Math.random() * 10)
22+
)
23+
}
24+
})
25+
}
26+
27+
function* render(cell, number) {
28+
let el = document.getElementById(`td-${cell}`)
29+
const style = 'group' + (number % 6)
30+
el.className = style
31+
el.textContent = number
32+
yield 0
33+
}
34+
35+
function tableCreate(numberOfRows, numberOfColumns) {
36+
let tbl = document.createElement('table')
37+
tbl.cellPadding = 0
38+
tbl.cellSpacing = 0
39+
40+
let count = 0
41+
42+
let tbdy = document.createElement('tbody')
43+
44+
for (let i = 0; i < numberOfRows; i++) {
45+
let tr = document.createElement('tr')
46+
47+
for (let j = 0; j < numberOfColumns; j++) {
48+
let td = document.createElement('td')
49+
td.id = `td-${count++}`
50+
td.textContent = 0
51+
tr.appendChild(td)
52+
}
53+
54+
tbdy.appendChild(tr)
55+
}
56+
57+
tbl.appendChild(tbdy)
58+
main.appendChild(tbl)
59+
}

‎examples/send_receive.html‎

Lines changed: 0 additions & 15 deletions
This file was deleted.

0 commit comments

Comments
 (0)