visualize the data structures in a C program
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 

144 lines
22 KiB

<!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;
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-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-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;
}
</style>
<script>
</script>
<body>
<!-- c code will terminate the body and html tags -->
<div class='struct-info'><label class='struct-info-header'>struct Declaration - alias: </label><div class='struct-info-byte-row'><div class='struct-info-bytegroup'><div class='struct-info-byte struct-info-byte-first'><div class='struct-info-declaration struct-info-declaration-top'>char <span class='struct-info-declaration-name'>type[64]</span></div></div><div class='struct-info-byte'></div><div class='struct-info-byte'></div><div class='struct-info-byte'></div><div class='struct-info-byte'></div><div class='struct-info-byte'></div><div class='struct-info-byte'></div><div class='struct-info-byte'></div><div class='struct-info-byte'></div><div class='struct-info-byte'></div><div class='struct-info-byte'></div><div class='struct-info-byte'></div><div class='struct-info-byte'></div><div class='struct-info-byte'></div><div class='struct-info-byte'></div><div class='struct-info-byte'></div><div class='struct-info-byte'></div><div class='struct-info-byte'></div><div class='struct-info-byte'></div><div class='struct-info-byte'></div><div class='struct-info-byte'></div><div class='struct-info-byte'></div><div class='struct-info-byte'></div><div class='struct-info-byte'></div><div class='struct-info-byte'></div><div class='struct-info-byte'></div><div class='struct-info-byte'></div><div class='struct-info-byte'></div><div class='struct-info-byte'></div><div class='struct-info-byte'></div><div class='struct-info-byte'></div><div class='struct-info-byte'></div><div class='struct-info-byte struct-info-byte-counted-ellipsis'>...[32]</div></div><div class='struct-info-bytegroup'><div class='struct-info-byte struct-info-byte-first'><div class='struct-info-declaration struct-info-declaration-bottom'>char <span class='struct-info-declaration-name'>name[64]</span></div></div><div class='struct-info-byte'></div><div class='struct-info-byte'></div><div class='struct-info-byte'></div><div class='struct-info-byte'></div><div class='struct-info-byte'></div><div class='struct-info-byte'></div><div class='struct-info-byte'></div><div class='struct-info-byte'></div><div class='struct-info-byte'></div><div class='struct-info-byte'></div><div class='struct-info-byte'></div><div class='struct-info-byte'></div><div class='struct-info-byte'></div><div class='struct-info-byte'></div><div class='struct-info-byte'></div><div class='struct-info-byte'></div><div class='struct-info-byte'></div><div class='struct-info-byte'></div><div class='struct-info-byte'></div><div class='struct-info-byte'></div><div class='struct-info-byte'></div><div class='struct-info-byte'></div><div class='struct-info-byte'></div><div class='struct-info-byte'></div><div class='struct-info-byte'></div><div class='struct-info-byte'></div><div class='struct-info-byte'></div><div class='struct-info-byte'></div><div class='struct-info-byte'></div><div class='struct-info-byte'></div><div class='struct-info-byte'></div><div class='struct-info-byte struct-info-byte-counted-ellipsis'>...[32]</div></div><div class='struct-info-bytegroup'><div class='struct-info-byte struct-info-byte-first'><div class='struct-info-declaration struct-info-declaration-top'>ssize_t <span class='struct-info-declaration-name'>size</span></div></div><div class='struct-info-byte'></div><div class='struct-info-byte'></div><div class='struct-info-byte'></div><div class='struct-info-byte'></div><div class='struct-info-byte'></div><div class='struct-info-byte'></div><div class='struct-info-byte'></div></div><div class='struct-info-bytegroup'><div class='struct-info-byte struct-info-byte-first'><div class='struct-info-declaration struct-info-declaration-bottom'>ssize_t <span class='struct-info-declaration-name'>align</span></div></div><div class='struct-info-byte'></div><div class='struct-info-byte'></div><div class='struct-info-byte'></div><div class='struct-info-byte'></div><div class='struct-info-byte'></div><div class='struct-info-byte'></div><div class='struct-info-byte'></div></div><div class='struct-info-bytegroup'><div class='struct-info-byte struct-info-byte-first'><div class='struct-info-declaration struct-info-declaration-top'>bool <span class='struct-info-declaration-name'>isBitfield</span></div></div></div></div></div><div class='struct-info'><label class='struct-info-header'>struct StructInfo - alias: </label><div class='struct-info-byte-row'><div class='struct-info-bytegroup'><div class='struct-info-byte struct-info-byte-first'><div class='struct-info-declaration struct-info-declaration-top'>char <span class='struct-info-declaration-name'>name[64]</span></div></div><div class='struct-info-byte'></div><div class='struct-info-byte'></div><div class='struct-info-byte'></div><div class='struct-info-byte'></div><div class='struct-info-byte'></div><div class='struct-info-byte'></div><div class='struct-info-byte'></div><div class='struct-info-byte'></div><div class='struct-info-byte'></div><div class='struct-info-byte'></div><div class='struct-info-byte'></div><div class='struct-info-byte'></div><div class='struct-info-byte'></div><div class='struct-info-byte'></div><div class='struct-info-byte'></div><div class='struct-info-byte'></div><div class='struct-info-byte'></div><div class='struct-info-byte'></div><div class='struct-info-byte'></div><div class='struct-info-byte'></div><div class='struct-info-byte'></div><div class='struct-info-byte'></div><div class='struct-info-byte'></div><div class='struct-info-byte'></div><div class='struct-info-byte'></div><div class='struct-info-byte'></div><div class='struct-info-byte'></div><div class='struct-info-byte'></div><div class='struct-info-byte'></div><div class='struct-info-byte'></div><div class='struct-info-byte'></div><div class='struct-info-byte struct-info-byte-counted-ellipsis'>...[32]</div></div><div class='struct-info-bytegroup'><div class='struct-info-byte struct-info-byte-first'><div class='struct-info-declaration struct-info-declaration-bottom'>char <span class='struct-info-declaration-name'>alias[64]</span></div></div><div class='struct-info-byte'></div><div class='struct-info-byte'></div><div class='struct-info-byte'></div><div class='struct-info-byte'></div><div class='struct-info-byte'></div><div class='struct-info-byte'></div><div class='struct-info-byte'></div><div class='struct-info-byte'></div><div class='struct-info-byte'></div><div class='struct-info-byte'></div><div class='struct-info-byte'></div><div class='struct-info-byte'></div><div class='struct-info-byte'></div><div class='struct-info-byte'></div><div class='struct-info-byte'></div><div class='struct-info-byte'></div><div class='struct-info-byte'></div><div class='struct-info-byte'></div><div class='struct-info-byte'></div><div class='struct-info-byte'></div><div class='struct-info-byte'></div><div class='struct-info-byte'></div><div class='struct-info-byte'></div><div class='struct-info-byte'></div><div class='struct-info-byte'></div><div class='struct-info-byte'></div><div class='struct-info-byte'></div><div class='struct-info-byte'></div><div class='struct-info-byte'></div><div class='struct-info-byte'></div><div class='struct-info-byte'></div><div class='struct-info-byte struct-info-byte-counted-ellipsis'>...[32]</div></div><div class='struct-info-bytegroup'><div class='struct-info-byte struct-info-byte-first'><div class='struct-info-declaration struct-info-declaration-top'>char* <span class='struct-info-declaration-name'>filename</span></div></div><div class='struct-info-byte'></div><div class='struct-info-byte'></div><div class='struct-info-byte'></div><div class='struct-info-byte'></div><div class='struct-info-byte'></div><div class='struct-info-byte'></div><div class='struct-info-byte'></div></div><div class='struct-info-bytegroup'><div class='struct-info-byte struct-info-byte-first'><div class='struct-info-declaration struct-info-declaration-bottom'>int <span class='struct-info-declaration-name'>lineNumber</span></div></div><div class='struct-info-byte'></div><div class='struct-info-byte'></div><div class='struct-info-byte'></div></div><div class='struct-info-bytegroup'><div class='struct-info-byte struct-info-byte-first'><div class='struct-info-declaration struct-info-declaration-top'>ssize_t <span class='struct-info-declaration-name'>size</span></div></div><div class='struct-info-byte'></div><div class='struct-info-byte'></div><div class='struct-info-byte'></div><div class='struct-info-byte'></div><div class='struct-info-byte'></div><div class='struct-info-byte'></div><div class='struct-info-byte'></div></div><div class='struct-info-bytegroup'><div class='struct-info-byte struct-info-byte-unknown'>?<div class='struct-info-declaration struct-info-declaration-bottom'>struct Declaration <span class='struct-info-declaration-name'>declarations[16]</span></div></div><div class='struct-info-byte struct-info-byte-ellipsis'>...</div></div><div class='struct-info-bytegroup'><div class='struct-info-byte struct-info-byte-first'><div class='struct-info-declaration struct-info-declaration-top'>int <span class='struct-info-declaration-name'>numDeclarations</span></div></div><div class='struct-info-byte'></div><div class='struct-info-byte'></div><div class='struct-info-byte'></div></div></div></div><div class='struct-info'><label class='struct-info-header'>struct Array - alias: </label><div class='struct-info-byte-row'><div class='struct-info-bytegroup'><div class='struct-info-byte struct-info-byte-first'><div class='struct-info-declaration struct-info-declaration-top'>unsigned int <span class='struct-info-declaration-name'>length</span></div></div><div class='struct-info-byte'></div><div class='struct-info-byte'></div><div class='struct-info-byte'></div></div><div class='struct-info-bytegroup'><div class='struct-info-byte struct-info-byte-first'><div class='struct-info-declaration struct-info-declaration-bottom'>unsigned int <span class='struct-info-declaration-name'>capacity</span></div></div><div class='struct-info-byte'></div><div class='struct-info-byte'></div><div class='struct-info-byte'></div></div><div class='struct-info-bytegroup'><div class='struct-info-byte struct-info-byte-first'><div class='struct-info-declaration struct-info-declaration-top'>void* <span class='struct-info-declaration-name'>data</span></div></div><div class='struct-info-byte'></div><div class='struct-info-byte'></div><div class='struct-info-byte'></div><div class='struct-info-byte'></div><div class='struct-info-byte'></div><div class='struct-info-byte'></div><div class='struct-info-byte'></div></div></div></div><div class='struct-info'><label class='struct-info-header'>struct TableEntry - alias: TableEntry</label><div class='struct-info-byte-row'><div class='struct-info-bytegroup'><div class='struct-info-byte struct-info-byte-first'><div class='struct-info-declaration struct-info-declaration-top'>struct TableEntry* <span class='struct-info-declaration-name'>next</span></div></div><div class='struct-info-byte'></div><div class='struct-info-byte'></div><div class='struct-info-byte'></div><div class='struct-info-byte'></div><div class='struct-info-byte'></div><div class='struct-info-byte'></div><div class='struct-info-byte'></div></div><div class='struct-info-bytegroup'><div class='struct-info-byte struct-info-byte-unknown'>?<div class='struct-info-declaration struct-info-declaration-bottom'>char key <span class='struct-info-declaration-name'>TABLE_KEY_SIZE</span></div></div><div class='struct-info-byte struct-info-byte-ellipsis'>...</div></div><div class='struct-info-bytegroup'><div class='struct-info-byte struct-info-byte-first'><div class='struct-info-declaration struct-info-declaration-top'>ssize_t <span class='struct-info-declaration-name'>size</span></div></div><div class='struct-info-byte'></div><div class='struct-info-byte'></div><div class='struct-info-byte'></div><div class='struct-info-byte'></div><div class='struct-info-byte'></div><div class='struct-info-byte'></div><div class='struct-info-byte'></div></div><div class='struct-info-bytegroup'><div class='struct-info-byte struct-info-byte-first'><div class='struct-info-declaration struct-info-declaration-bottom'>ssize_t <span class='struct-info-declaration-name'>align</span></div></div><div class='struct-info-byte'></div><div class='struct-info-byte'></div><div class='struct-info-byte'></div><div class='struct-info-byte'></div><div class='struct-info-byte'></div><div class='struct-info-byte'></div><div class='struct-info-byte'></div></div></div></div><div class='struct-info'><label class='struct-info-header'>struct Table - alias: Table</label><div class='struct-info-byte-row'><div class='struct-info-bytegroup'><div class='struct-info-byte struct-info-byte-first'><div class='struct-info-declaration struct-info-declaration-top'>TableEntry** <span class='struct-info-declaration-name'>entries</span></div></div><div class='struct-info-byte'></div><div class='struct-info-byte'></div><div class='struct-info-byte'></div><div class='struct-info-byte'></div><div class='struct-info-byte'></div><div class='struct-info-byte'></div><div class='struct-info-byte'></div></div></div></div><div class='struct-info'><label class='struct-info-header'>struct - alias: stb_lexer</label><div class='struct-info-byte-row'><div class='struct-info-bytegroup'><div class='struct-info-byte struct-info-byte-first'><div class='struct-info-declaration struct-info-declaration-top'>char* <span class='struct-info-declaration-name'>input_stream</span></div></div><div class='struct-info-byte'></div><div class='struct-info-byte'></div><div class='struct-info-byte'></div><div class='struct-info-byte'></div><div class='struct-info-byte'></div><div class='struct-info-byte'></div><div class='struct-info-byte'></div></div><div class='struct-info-bytegroup'><div class='struct-info-byte struct-info-byte-first'><div class='struct-info-declaration struct-info-declaration-bottom'>char* <span class='struct-info-declaration-name'>eof</span></div></div><div class='struct-info-byte'></div><div class='struct-info-byte'></div><div class='struct-info-byte'></div><div class='struct-info-byte'></div><div class='struct-info-byte'></div><div class='struct-info-byte'></div><div class='struct-info-byte'></div></div><div class='struct-info-bytegroup'><div class='struct-info-byte struct-info-byte-first'><div class='struct-info-declaration struct-info-declaration-top'>char* <span class='struct-info-declaration-name'>parse_point</span></div></div><div class='struct-info-byte'></div><div class='struct-info-byte'></div><div class='struct-info-byte'></div><div class='struct-info-byte'></div><div class='struct-info-byte'></div><div class='struct-info-byte'></div><div class='struct-info-byte'></div></div><div class='struct-info-bytegroup'><div class='struct-info-byte struct-info-byte-first'><div class='struct-info-declaration struct-info-declaration-bottom'>char* <span class='struct-info-declaration-name'>string_storage</span></div></div><div class='struct-info-byte'></div><div class='struct-info-byte'></div><div class='struct-info-byte'></div><div class='struct-info-byte'></div><div class='struct-info-byte'></div><div class='struct-info-byte'></div><div class='struct-info-byte'></div></div><div class='struct-info-bytegroup'><div class='struct-info-byte struct-info-byte-first'><div class='struct-info-declaration struct-info-declaration-top'>int <span class='struct-info-declaration-name'>string_storage_len</span></div></div><div class='struct-info-byte'></div><div class='struct-info-byte'></div><div class='struct-info-byte'></div></div><div class='struct-info-bytegroup'><div class='struct-info-byte struct-info-byte-first'><div class='struct-info-declaration struct-info-declaration-bottom'>char* <span class='struct-info-declaration-name'>where_firstchar</span></div></div><div class='struct-info-byte'></div><div class='struct-info-byte'></div><div class='struct-info-byte'></div><div class='struct-info-byte'></div><div class='struct-info-byte'></div><div class='struct-info-byte'></div><div class='struct-info-byte'></div></div><div class='struct-info-bytegroup'><div class='struct-info-byte struct-info-byte-first'><div class='struct-info-declaration struct-info-declaration-top'>char* <span class='struct-info-declaration-name'>where_lastchar</span></div></div><div class='struct-info-byte'></div><div class='struct-info-byte'></div><div class='struct-info-byte'></div><div class='struct-info-byte'></div><div class='struct-info-byte'></div><div class='struct-info-byte'></div><div class='struct-info-byte'></div></div><div class='struct-info-bytegroup'><div class='struct-info-byte struct-info-byte-first'><div class='struct-info-declaration struct-info-declaration-bottom'>long <span class='struct-info-declaration-name'>token</span></div></div><div class='struct-info-byte'></div><div class='struct-info-byte'></div><div class='struct-info-byte'></div><div class='struct-info-byte'></div><div class='struct-info-byte'></div><div class='struct-info-byte'></div><div class='struct-info-byte'></div></div><div class='struct-info-bytegroup'><div class='struct-info-byte struct-info-byte-first'><div class='struct-info-declaration struct-info-declaration-top'>double <span class='struct-info-declaration-name'>real_number</span></div></div><div class='struct-info-byte'></div><div class='struct-info-byte'></div><div class='struct-info-byte'></div><div class='struct-info-byte'></div><div class='struct-info-byte'></div><div class='struct-info-byte'></div><div class='struct-info-byte'></div></div><div class='struct-info-bytegroup'><div class='struct-info-byte struct-info-byte-first'><div class='struct-info-declaration struct-info-declaration-bottom'>long <span class='struct-info-declaration-name'>int_number</span></div></div><div class='struct-info-byte'></div><div class='struct-info-byte'></div><div class='struct-info-byte'></div><div class='struct-info-byte'></div><div class='struct-info-byte'></div><div class='struct-info-byte'></div><div class='struct-info-byte'></div></div><div class='struct-info-bytegroup'><div class='struct-info-byte struct-info-byte-first'><div class='struct-info-declaration struct-info-declaration-top'>char* <span class='struct-info-declaration-name'>string</span></div></div><div class='struct-info-byte'></div><div class='struct-info-byte'></div><div class='struct-info-byte'></div><div class='struct-info-byte'></div><div class='struct-info-byte'></div><div class='struct-info-byte'></div><div class='struct-info-byte'></div></div><div class='struct-info-bytegroup'><div class='struct-info-byte struct-info-byte-first'><div class='struct-info-declaration struct-info-declaration-bottom'>int <span class='struct-info-declaration-name'>string_len</span></div></div><div class='struct-info-byte'></div><div class='struct-info-byte'></div><div class='struct-info-byte'></div></div></div></div><div class='struct-info'><label class='struct-info-header'>struct - alias: stb_lex_location</label><div class='struct-info-byte-row'><div class='struct-info-bytegroup'><div class='struct-info-byte struct-info-byte-first'><div class='struct-info-declaration struct-info-declaration-top'>int <span class='struct-info-declaration-name'>line_number</span></div></div><div class='struct-info-byte'></div><div class='struct-info-byte'></div><div class='struct-info-byte'></div></div><div class='struct-info-bytegroup'><div class='struct-info-byte struct-info-byte-first'><div class='struct-info-declaration struct-info-declaration-bottom'>int <span class='struct-info-declaration-name'>line_offset</span></div></div><div class='struct-info-byte'></div><div class='struct-info-byte'></div><div class='struct-info-byte'></div></div></div></div></body></html>