-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
97 lines (91 loc) · 4.12 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
<html>
<head>
<title>MemOS - Resistive RAM OS Simulator</title>
<link href="style.css" rel="stylesheet" />
<link href="loading.css" rel="stylesheet" />
<script type="module" src="dist/components/command-terminal.js"></script>
<script type="module" src="dist/components/process-table.js"></script>
<script type="module" src="dist/components/bitmap-table.js"></script>
<script type="module" src="dist/components/memory-allocation.js"></script>
<script type="module" src="dist/components/memory-map.js"></script>
<script type="module" src="dist/components/resource-monitor.js"></script>
</head>
<body>
<table>
<tr>
<td class='tab-label' onclick='show_tab(0)'>Terminal</td>
<td class='tab-label' onclick='show_tab(1)'>Processes</td>
<td class='tab-label' onclick='show_tab(2)'>Bitmap</td>
<td class='tab-label' onclick='show_tab(3)' style='display:none'>Memory Allocation</td>
<td class='tab-label' onclick="show_tab(4)">Memory Map</td>
<td class='tab-label' onclick="show_tab(5)">Resource Monitor</td>
</tr>
</table>
<div id='splashscreen'>
<!-- Boot Screen -->
<img src='memgiraffe_white.png' style='margin-top:64px; height:calc(90vh - 460px);'/>
<div class="cssload-thecube">
<div class="cssload-cube cssload-c1"></div>
<div class="cssload-cube cssload-c2"></div>
<div class="cssload-cube cssload-c4"></div>
<div class="cssload-cube cssload-c3"></div>
</div>
<h2 id='boot_status'>Loading...</h2>
</div>
<command-terminal class='tab'></command-terminal>
<process-table class='tab'></process-table>
<bitmap-table class='tab'></bitmap-table>
<memory-allocation class='tab'></memory-allocation>
<memory-map class='tab'></memory-map>
<resource-monitor class='tab'></resource-monitor>
<script>
function show_tab(tabId) {
const tips = document.querySelectorAll('.tab-label')
const tabs = document.querySelectorAll('.tab')
tips.forEach(tip => tip.classList.remove('active'))
tabs.forEach(tab => tab.style.display = 'none')
tips[tabId].classList.add('active')
tabs[tabId].style.display = 'block'
tabs[tabId].activeCallback()
}
window.onload = () => {
const splash = document.querySelector('#splashscreen')
setTimeout(() => {
splash.style.opacity = 0
}, 0)
setTimeout(() => {
splash.style.display = 'none'
}, 0)
show_tab(0)
}
</script>
<script>
// Setup Polymer options
window.Polymer = {
dom: 'shadow',
lazyRegister: true
};
</script>
<script type="module">
import FileSystem from "./dist/file-system.js";
import BitmapMemory from "./dist/bitmap-memory.js";
import NvmMemoryManager from "./dist/nvm-memory.js";
import ResourceMonitor from "./dist/resource-monitor.js";
import ProcessTable from "./dist/process-table.js";
import System from './dist/system.js'
// Boot server
const monitor = new ResourceMonitor()
const memory = new BitmapMemory({minBytes: 2, physicalSize: 512})
const files = new FileSystem({
memory,
inodeSize: 4
})
const nvmMemory = new NvmMemoryManager({memory})
const process = new ProcessTable({memory, files})
const system = new System({monitor, memory, files, nvmMemory, process})
// Attach our system throughout our components
const tabs = document.querySelectorAll('.tab')
tabs.forEach(tab => tab.system = system)
</script>
</body>
</html>