Created
October 8, 2024 22:28
-
-
Save parthibx24/c52f46420cb8ba787c9c1ad4430fd838 to your computer and use it in GitHub Desktop.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /** html | |
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Bitfield Visualization</title> | |
| <style> | |
| canvas { | |
| border: 1px solid black; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="progress"></div> | |
| <canvas id="bitfieldCanvas" width="100" height="10"> | |
| </html> | |
| */ | |
| /** css | |
| body { | |
| display: flex; | |
| flex-direction: column; | |
| width: 100px; | |
| row-gap: 0px; | |
| } | |
| .progress { | |
| background-color: black; | |
| height: 5px; | |
| width: 100px; | |
| } | |
| */ | |
| const bitfield = [0xFF, 0x00, 0xFF, 0x00, 0xFF, 0x00, 0xFF, 0x00, 0xFF, 0x00, 0,0,0,0,00,0xFF,0,0,0,0]; // Example bitfield data | |
| function drawBitfield() { | |
| const canvas = document.getElementById('bitfieldCanvas'); | |
| const ctx = canvas.getContext('2d'); | |
| const width = canvas.width; | |
| const height = canvas.height; | |
| const barWidth = width / bitfield.length; | |
| for (let i = 0; i < bitfield.length; i++) { | |
| const value = bitfield[i]; | |
| // Set color based on value | |
| if (value === 0xFF) { | |
| ctx.fillStyle = 'black'; // Black line for 0xFF | |
| } else { | |
| ctx.fillStyle = 'white'; // White line or no line for 0x00 | |
| } | |
| // Draw the line | |
| ctx.fillRect(i * barWidth, 0, barWidth, height); | |
| } | |
| } | |
| // Call the function to draw the bitfield | |
| drawBitfield(); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment