30:T779,### Settings Field | Meaning ------------|----- `max_width` | Maximal desired width of the scale bar `overflow` | Setting to avoid much more narrow than expected segments, see below `m_per_px` | Scale to display, number of metres represented by each logical pixel `segment_count`| Preferred segment count. `lbl_size` | Label font size `lbl_gap` | Vertical gap between labels and the border of the scale bar. If `lbl_size + lbl_gap` is an integer the border will be aligned with a logical pixel. `bar_height`| Height of the scale bar (not including ticks and labels) `color`| Color used for the labels and edges `bgcolor1` | Background color for even segments of the color bar. If `null`, transparent. `bgcolor2` | Background color for odd segments of the color bar. If `null`, same as `bgcolor1`. By default (or if `"auto"`), same as `color`. The `overflow` setting controls whether or not the scale bar allows overflow to avoid very narrow segments. Overflow | Meaning ------------|----- `none` | Always fit the requested number of segments inside the allocated width `clip` | Allow showing less segments. This applies if `segment_count` is at least 3. Otherwise, the same as `none`. `show` | Allow exceeding `max_width` ### Fields and functions in the returned object Field | Meaning ------------|----- `node` | a `` element (`SVGGElement` DOM node) containing the scale bar `width`, `height` | Size of the widget, may be smaller than the requested width. This covers the scale bar, including borders, but the labels may extend outside this width. `segment_px` | Pixels covered by one segment `segment_m` | Number of metres represented by one segment `segment_count`| Number of segments `set_m_per_px(v)` | Update the scale bar to the given scale. `node` shall still point to the same DOM node as before this call, but any of its contents may get cleared and recreated. 31:T85d,function scaleBarMetrics(max_width, overflow, m_per_px, appx_segment_count) { appx_segment_count = Math.max(1, appx_segment_count); // metres within our allowable width // add epsilon so that exact input values work var available_m = 1.000001 * max_width * m_per_px; const segment_m_hint = max_width * m_per_px / appx_segment_count; // initial guess: first decade smaller than one hinted segment size var segment_m = Math.pow(10, Math.floor(Math.log10(segment_m_hint))); var segment_px = segment_m / m_per_px; const mul_list = [1, 2, 2.5, 4, 5, 10]; // extra trailing 1 var delta_prev, delta; var m; // find first multiplier that does not fit (positive delta) // m = 1 is guaranteed to fit for (var i = 0; i < mul_list.length; ++i) { delta_prev = delta; delta = mul_list[i] * segment_m * appx_segment_count - available_m; if (delta > 0) { // avoid too low ratios (with some margin), if we can't, see which one is closer // but on hard mode we have to guarantee at least 1 segment. if (overflow == "none" || (overflow == "clip" && appx_segment_count <= 2)) { m = mul_list[i - 1]; } else { // Compromise between avoiding too wide bars, and too narrow segments. // This particular choice sets the tipping point for a 2:1 step at // the point where a 6 segment bar can fit 5 segments. (this is // where delta_prev is -2/5 width, and delta is +1/5 width) // We choose to offset the error rather than scale it so that for // smaller steps it will still switch where the requested segments // take up exactly the requested width. const delta_prev_offset = Math.min(0, delta_prev + .20 * available_m); m = -delta_prev_offset < delta ? mul_list[i - 1] : mul_list[i]; } break; } } segment_m *= m; segment_px *= m; var steps = Math.floor(available_m / segment_m); if (overflow != "clip") steps = Math.max(steps, appx_segment_count); return { segment_px: segment_px, segment_m: segment_m, segment_count: steps, width: steps * segment_px}; }32:Tb8a,SvgScaleBar = { function _SvgScaleBar(settings) { // copy settings object, fill in some defaults settings = { max_width: 300, overflow: "none", segment_count: 4, lbl_gap: 6, bar_height: 8, color: "black", bgcolor1: "white", bgcolor2: "auto", lbl_size: 14, ...settings }; settings.color ??= "black"; this.settings = settings; if (settings.bgcolor2 == "auto") settings.bgcolor2 = settings.color; this.settings = settings; this.node = svg``; this.set_m_per_px(settings.m_per_px); } _SvgScaleBar.prototype.set_m_per_px = function(m_per_px) { const { max_width, overflow, segment_count, lbl_gap, bar_height, color, bgcolor1, bgcolor2, lbl_size } = this.settings; const m = scaleBarMetrics(max_width, overflow, m_per_px, segment_count); const bar_x = 0.5; const distinct_bg2 = bgcolor2 && bgcolor2 != color; // main bar rectangle const bar_y = lbl_size + lbl_gap + 0.5; this.node.replaceChildren(); this.node.append(svg``) // black rectangles (alternated with white) if (bgcolor2) { for (var i = 0; i < m.segment_count; i+=2) { this.node.append(svg``) } } if (distinct_bg2) { this.node.append(svg``) } // choose unit var unit = {m:1, lbl:"m"}; if (m.segment_m * m.segment_count >= 1000) unit = {m:1000, lbl:"km"}; else if (m.segment_m * m.segment_count < 0.0001) unit = {m:.001, lbl:"μm"}; else if (m.segment_m * m.segment_count < 0.1) unit = {m:.001, lbl:"mm"}; else if (m.segment_m * m.segment_count < 1) unit = {m:.01, lbl:"cm"}; // ticks and labels const ty1 = color == bgcolor2 ? bar_y : bar_y + bar_height for (var i = 0; i <= m.segment_count; ++i) { const x = bar_x + i * m.segment_px; var lbl = (m.segment_m * i / unit.m).toFixed(4).replace(/\.?0+$/, ''); var dx = ""; if (i == m.segment_count) { lbl += "\u202F" + unit.lbl; dx = `dx=${0.5 * lbl_size}`; } this.node.append(svg`${lbl}`) this.node.append(svg``) } m.width += 1; Object.assign(this, m) this.height = bar_height + bar_y + 0.5; } return _SvgScaleBar; }33:[] 2e:{"title":"Making a scale bar","cells":[{"id":17,"value":"# Making a scale bar\n\nThe `svgScaleBar()` function returns an SVG widget (a `` element) displaying a scale bar.\n\n${display()}","pinned":false,"hidden":false,"mode":"md"},{"id":49,"value":"viewof settings = Inputs.form({\n m_per_px: Inputs.range([1, 1000], {label: \"Metres per pixel\", transform: Math.log, value: 10}),\n segment_count: Inputs.range([1, 10], {label: \"Desired segments\", step: 1, value : 4}),\n max_width: Inputs.range([100, 800], {label: \"Bar width\", value: 450}),\n overflow: Inputs.radio([\"none\", \"clip\", \"show\"], {label: \"Overflow\", value: \"none\"}),\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":409,"value":"viewof show_bbox = Inputs.toggle({label: \"Show bounding box\", value: false})","pinned":true,"hidden":false,"mode":"ojs"},{"id":240,"value":"$30","pinned":false,"hidden":false,"mode":"md"},{"id":84,"value":"svgBar = new SvgScaleBar({...settings, lbl_height: 14, bar_height: 6});","pinned":true,"hidden":false,"mode":"ojs"},{"id":276,"value":"## Recipe","pinned":false,"hidden":false,"mode":"md"},{"id":460,"value":"function display() {\n const {max_width} = settings;\n const svg_width = 60 + 1.25 * max_width;\n var n = svgBar.node;\n const svg_tag = ``;\n }\n else {\n return svg`${svg_tag}${n}`;\n }\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":5,"value":"$31","pinned":true,"hidden":false,"mode":"ojs"},{"id":7,"value":"$32","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W33","stdlib":"1","titling":"auto"}