The Human Resource Machine Program Viewer is a Javascript program to read Human Resource Machine (HRM) programs and display them similarly to how HRM itself does.
The viewer is very new and the interface may change!
Step 1: Add the following to your web page's <head>. The inclusion of webfont.js is optional but the default configuration loads the Passion One font using it. Passion One is a rough match for the font used in HRM.
<script src="https://ajax.googleapis.com/ajax/libs/webfont/1.5.18/webfont.js"></script> <script src="pako_inflate.min.js"></script> <script src="https://code.jquery.com/jquery-2.1.4.min.js"></script> <link href="hrm.css" rel="stylesheet"> <script src="hrm.js"></script>
Step 2: Create a location for the code to be displayed in your body. It should have a class of hrmcode and a unique id. You can put content to display while the code loads inside; it will be removed when the code is ready.
<div class="hrmcode" id="code">Loading...</div>
Step 3: Add the following code, passing in the id for your div and the URL to the code. The complexity is necessary to ensure that the Passion One font is loaded before the code is drawn; if the font loads after the code the jump arrows will be misaligned.
<script>
var hrmv;
function fonts_loaded() {
hrmv = new HRMViewer('code', 'simple.asm');
}
WebFont.load({
google: { families: ['Passion One'] },
active: fonts_loaded,
inactive: fonts_loaded,
});
</script>
Step 4: Optionally adjust hrm.css to adjust the formatting.
The arrows showing jumps are dependent on the positioning of text in the table. Anything that changes the table's layout will invalidate the jump arrows; they'll be mis-aligned. Changes include fonts loading, or the table having originally been created display:none and later revealed. If a situation requires it, call updateJumpArrows:
<script>
function layoutChanged() {
hrmv.updateJumpArrows();
}
</script>
You can highlight a particular line with setActiveLine, passing in the line number (from the original assembly) of the line to be highlighted. Only a single line is highlighted at a time; setActiveLine on a different line will remove the highlight from the previous one. Calling setActiveLine without arguments will clear the highlight.