30:Tf99,function sevenSegmentDisplay( digits = 10, { height, sign, lit, unlit, background, padding, skew } = { height: 100, sign: false, lit: "#000", unlit: "#eee", background: "none", padding: 0, skew: 0 } ) { function getWidth(height) { const scaleFactor = height / 100; return (digits + sign | 0) * (height / 2 + padding * scaleFactor) + 12 * scaleFactor; }; function setupDisplay() { return svg` `; } function digitTo7Segment(d) { let A = (d & 0b1000) >> 3, B = (d & 0b0100) >> 2, C = (d & 0b0010) >> 1, D = d & 0b0001; let notB = B ^ 1, notC = C ^ 1, notD = D ^ 1; return [ A | C | B & D | notB & notD, C & D | notB | notC & notD, B | D | notC, A | notB & notD | notB & C | C & notD | B & notC & D, C & notD | notB & notD, A | B & notC | B & notD | notC & notD, A | B & notC | notB & C | C & notD ] } function precision(f) { if (!isFinite(f)) return 0; let e = 1, p = 0; while (Math.round(f * e) / e !== f) { e *= 10; p++; } return p; } let display = setupDisplay(height); const output = function(value) { const prec = precision(value); const length = (Math.log10(Math.abs(value)) | 0) + prec + 1; let d = Math.abs(value) * 10 ** prec; let id, x, fillSegment, fillDot; let innerHTML = sign ? ``: ""; for (let i = 0; i < digits; ++i) { x = (digits - i - (sign ? 0 : 1)) * (50 + padding); fillDot = i === prec && prec > 0 ? lit : unlit; innerHTML +=` ${digitTo7Segment(d % 10).map((isLit, j) => { id = String.fromCharCode(0x61 + j); fillSegment = isLit && isFinite(value) && i < length ? lit : unlit; return ``; })} `; d = Math.floor(d / 10); } display.querySelector("#digits").innerHTML = innerHTML; return display; } output.digits = function(n) { if (arguments.length) { digits = n; display = setupDisplay(height); return output; } return digits; } output.height = function(i) { if (arguments.length) { height = i; display = setupDisplay(height); return output; } return height; } output.sign = function(bool) { if (arguments.length) { sign = bool; display = setupDisplay(height); return output; } return digits; } output.padding = function(p) { if (arguments.length) { padding = p; display = setupDisplay(height); return output; } return padding; } output.lit = function(l) { return arguments.length ? (lit = l, output) : lit; } output.unlit = function(u) { return arguments.length ? (unlit = u, output) : unlit; } output.background = function(b) { if (arguments.length) { background = b; display = setupDisplay(height); return output; } return background; } output.skew = function(s) { return arguments.length ? (skew = s, output) : skew; } return output; }31:[] 2e:{"title":"7-segment display","cells":[{"id":0,"value":"md`# 7-segment display\nA simple reusable [7-segment display](https://en.wikipedia.org/wiki/Seven-segment_display).`","pinned":false,"hidden":false,"mode":"ojs"},{"id":407,"value":"viewof input = html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":623,"value":"md`---`","pinned":false,"hidden":false,"mode":"ojs"},{"id":527,"value":"display(input);","pinned":false,"hidden":false,"mode":"ojs"},{"id":565,"value":"viewof lit = html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":616,"value":"viewof unlit = html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":762,"value":"viewof background = html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":598,"value":"display = sevenSegmentDisplay()\n .digits(10)\n .sign(true)\n .lit(lit)\n .unlit(unlit)\n .background(background)\n .padding(8);","pinned":false,"hidden":false,"mode":"ojs"},{"id":515,"value":"md`---`","pinned":false,"hidden":false,"mode":"ojs"},{"id":626,"value":"md`## Implementation`","pinned":false,"hidden":false,"mode":"ojs"},{"id":300,"value":"$30","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W31","stdlib":"1","titling":"auto"}