|
|
<!doctype html><html lang="en"><head> <meta charset="utf-8"> <title>Struct Visualization</title> <base href="/"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="icon" type="image/x-icon" href="favicon.ico"></head><style> :root { --r1: pink; --r2: blue; --r3: magenta; --r4: yellow; --r5: cyan; --r6: orange; --r7: lime; --r8: olive; }
*::before, *::after, * { margin: 0; padding: 0; box-sizing: border-box; }
html, body { min-height: 100vh; height: 100vh; overscroll-behavior: none; background: #F0EAD6; padding-top: 10px;
direction: ltr; font: 16px HelveticaNeue-Light,Helvetica Neue Light,Helvetica Neue,Helvetica,Arial,Lucida Grande,sans-serif; }
.struct-info { padding: 0 20px 20px 20px; border-bottom: 1px solid silver; margin-bottom: 20px; }
.struct-info-declaration { position: absolute; font-family: monospace; min-width: min-content; max-width: 20em; text-overflow: ellipsis; white-space: nowrap; font-size: 0.9em; transform: translateX(calc(50% - 10px)); color: black; font-weight: normal; } .struct-info-declaration-name { font: 16px HelveticaNeue-Light,Helvetica Neue Light,Helvetica Neue,Helvetica,Arial,Lucida Grande,sans-serif; }
.struct-info-declaration-top { top: -30px; } .struct-info-declaration-bottom { bottom: -30px; }
.struct-info-byte-row-ellipsis { position: absolute; right: 1em; }
.struct-info-byte-rows { display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; }
.struct-info-byte-row { display: flex; flex-wrap: wrap; flex-direction: row; justify-content: flex-start; align-items: center; }
.struct-info-bytegroup { margin: 2em 0;
display: flex; flex-wrap: wrap; flex-direction: row; justify-content: flex-start; align-items: center; }
.struct-info-bytegroup:hover { background-color: orange;
.struct-info-declaration { font-weight: bold; color: orange; } }
.struct-info-header { font-weight: bold; font-family: monospace; }
.struct-info-byte { position: relative; display: flex; justify-content: center; align-items: center; border: 1px solid black; width: 30px; height: 45px; } .struct-info-byte-alignment { background-color: seagreen; opacity: 0.4; } .struct-info-byte-first { border-left-width: 3px; } .struct-info-byte-unknown { border-left-width: 3px; background-color: maroon; font-weight: bold; color: white; } .struct-info-byte-counted-ellipsis { background-color: #808000; font-weight: bold; } .struct-info-byte-ellipsis { background-color: #400000; font-weight: bold; color: white; }
dialog { position: sticky; top: 50vh; left: 50vw; transform: translate(-50%, -50%); padding: 20px;
border: none; border-radius: 3px; background-color: #F0EAD6; box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75);
max-width: 80vw; max-height: 80vh; }
input:not([type=checkbox]):not([type=radio]) { display: block; height: 2em; }
p { margin: 20px; }
input[type=checkbox] { width: 1.2rem; height: 1.2rem; }
label { display: block; }
label > input { margin: 5px 15px 15px 15px; }
.fix-missing-declaration-dialog-footer { width: 100%;
display: flex; flex-direction: row; justify-content: space-between; align-items: center; }
button { width: 10rem; height: 2rem; }
.help-idk { color: darkslategray; font-size: 0.9rem; }
.help-idk-container { width: 100%; margin-bottom: 10px;
display: flex; flex-direction: row; justify-content: flex-end; align-items: center; }</style>
<body><dialog id="fix-missing-declaration-dialog"> <p>What's the size and alignment of this type on your architecture?</p> <div class="help-idk-container"> <p class="help-idk"> Help, I don't know! </p> </div>
<label> It's a bitfield! <input type="checkbox" /> </label>
<label> size (in bytes) <input type="number" min="1" value="8" /> </label>
<label> alignment (in bytes) <input type="number" value="8" /> </label>
<footer class="fix-missing-declaration-dialog-footer"> <button onclick="fixMissingDeclDialog.close()" > Confirm </button> </footer></dialog><script defer> const fixMissingDeclDialog = document.getElementById("fix-missing-declaration-dialog");
function createWithClasses(e, ...classes) { const elem = document.createElement(e); elem.classList.add(...classes); return elem; }
function alignForward(a, b) {
}
function renderStruct(structInfo, containingElement) { const div = createWithClasses("div", "struct-info");
const structInfoHeader = createWithClasses("label", "struct-info-header"); structInfoHeader.innerText = `struct ${structInfo.name} - alias: ${structInfo.alias}`; div.appendChild(structInfoHeader);
for (let i = 0; i < structInfo.declarations.length; i++) { const decl = structInfo.declarations[i];
const position = i % 2 == 0; const positionClass = position ? "struct-info-declaration-top" : "struct-info-declaration-bottom"; let bytesInStructSoFar = 0;
if (decl.size === -1) { const byteGroup = createWithClasses("struct-info-bytegroup"); byteGroup.onclick = fixMissingDeclDialog.showMoodal();
const unknownByte = createWithClasses("div", "struct-info-byte", "struct-info-byte-unknown"); unknownByte.innerText = "?"; byteGroup.appendChild(unknownByte);
const declaration = createWithClasses("div", "struct-info-declaration", positionClass); declaration.innerHTML = `${decl.type} <span class="struct-info-declaration-name">${decl.name}</span>`; unknownByte.appendChild(declaration);
const ellipsisByte = createWithClasses("div", "struct-info-byte", "struct_info_byte_ellipsis"); ellipsisByte.innerText = "..."; byteGroup.appendChild(ellipsisByte);
div.appendChild(byteGroup); } else { // find if we need to align this field - pad some alignment bytes visually if we do. const aligned = alignForward(bytesInStructSoFar, decl.align); const needsAlign = aligned !== bytesInStructSoFar; if (needsAlign) { //sb_concatf("%s", "<div class='struct-info-bytegroup'>"); //for (int a = 0; a < (aligned - bytesInStructSoFar); a++) { // sb_concatf("%s", "<div class='struct-info-byte struct-info-byte-alignment'></div>"); //} //sb_concatf("%s", "</div>"); //bytesInStructSoFar += aligned - bytesInStructSoFar; }
// now for the bytes representing the actual field. //sb_concatf("%s", "<div class='struct-info-bytegroup'>"); //for (int b = 0; b < decl->size; b++) { // if (b == 0) { // sb_concatf( // "<div class='struct-info-byte struct-info-byte-first'>" // "<div class='struct-info-declaration %s'>" // "%s <span class='struct-info-declaration-name'>%s</span>" // "</div>" // "</div>" // , positionClass, decl->type, decl->name); // } else { // sb_concatf("%s", "<div class='struct-info-byte'></div>"); // } //} //bytesInStructSoFar += decl->size; //sb_concatf("%s", "</div>"); // end bytegroup } //sb_concatf("%s", "</div></div>"); }
containingElement.appendChild(div); }
function renderAllStructs() { for (let i = 0; i < window.structs.length; i++) { const structInfo = structs[i]; renderStruct(structInfo, document.body); } }</script><!-- c code will place a script tag containing all of the data structures in JSON format, and terminate the body and html tags -->
|
