30:T745,function multiChannel(numChannels, settings = {}) { var { value, extent, label} = settings; value = promoteValue(value); // DOM: var div = html`

` if (label) { var lb = div.appendChild(html``) lb.innerText = label; lb.style = label_style; } const div2 = div.appendChild(html`

`); for (var i = 0; i < numChannels; ++i) { var n = div2.appendChild(Inputs.number(extent, {...settings, label: null, value: null})); n.addEventListener("input", updateValue); n.style.margin = '0'; n.style.minWidth = '6em'; n.style.maxWidth = '12em'; n.style.marginRight = '.3em'; n.style.flex = '1 1 6em'; } // promote a value given to us. This always returns a new array. function promoteValue(value) { if (value == null) return null; if (value.length != null && value.length != numChannels) { throw new RangeError("Default value does not have the specified number of channels"); } return (value.length != null) ? value.map(v => +v) : Array(numChannels).fill(+value); } function setValue(newValue) { if (newValue == null) return; value = promoteValue(newValue); var n = div2.firstElementChild; for (var i = 0; i < numChannels; ++i) { n.value = value[i]; n = n.nextElementSibling; } } function updateValue() { var n = div2.firstElementChild; for (var i = 0; i < numChannels; ++i) { value[i] = n.value; n = n.nextElementSibling; } } // initial value setValue(value); Object.defineProperty(div, "value", { get() { return [...value]; }, set(value) { setValue(value); }}); return div; }31:T17de,function infiniteRange(settings = {}) { const { step = 1, extent, label, width=600} = settings; const dragStep = settings.dragStep || step; var value = promoteValue(settings.value); const homeValue = value; // DOM: // parent parent div const div = html`

`; var div2 = div; if (label) { div.style.flexWrap = "wrap"; // label var lb = div.appendChild(html``) lb.innerText = label; lb.style = label_style; // div for numeric box + slider // parent div will wrap. Control minimum width before wrapping with flex-basis. div2 = div.appendChild(html`

`); } var numericInput = div2.appendChild(Inputs.number(extent, {...settings, step: step, label: null, value: null})); numericInput.addEventListener("input", updateValue); numericInput.style.width = '12em'; numericInput.style.margin = '0'; numericInput.style.marginRight = '.3em'; numericInput.style.flex = '0 1 12em'; const internalInput = numericInput.querySelector("input[type='number']"); var dragArea = div2.appendChild( html`

`); // when we drag the slider: function doDrag(dx) { // some rounding happens in setValue(). setValue(value + dx * dragStep); div.dispatchEvent(new CustomEvent("input", {bubbles:true})); } // drag handlers and rollover handlers function handleHover() { // 'hover' or 'active' state var active = dragArea.matches(':hover') || dragAnchorX != null || document.activeElement == dragArea; dragArea.style.borderColor = active ? "#777" : "#999"; dragArea.style.setProperty("--bgcol", active ? "#fdfdfd" : "#f9f9f9"); dragArea.style.setProperty("--hatchcol", active ? "#cbd6dd" : "#d4dce1"); // while dragging, don't do transitions but follow the pointer dragArea.style.transition = dragAnchorX != null ? 'none' : 'background-position-x 0.05s ease-out'; } var dragAnchorX = null; function handleMouseDown(e, x) { dragAnchorX = x; handleHover(); dragArea.focus(); e.preventDefault(); } function handleMouseDrag(e, x) { if (dragAnchorX != null && Math.abs(x - dragAnchorX) >= 1) { doDrag(x - dragAnchorX); dragAnchorX = x; e.preventDefault(); } } function handleMouseUp(e) { if (dragAnchorX != null) { dragAnchorX = null; handleHover(); e.preventDefault(); } } // attach drag handlers for both touches and mouse clicks // note that the move and up handlers must be added to window dragArea.addEventListener("mousedown", e => handleMouseDown(e, e.x)) window.addEventListener("mousemove", e => handleMouseDrag(e, e.x)) window.addEventListener("mouseup", handleMouseUp) dragArea.addEventListener("touchstart", e => e.touches.length == 1 ? handleMouseDown(e, e.touches[0].pageX) : handleMouseUp()) window.addEventListener("touchmove", e => handleMouseDrag(e, e.touches[0].pageX)) window.addEventListener("touchend", handleMouseUp) window.addEventListener("touchcancel", handleMouseUp) dragArea.addEventListener("mouseenter", handleHover) dragArea.addEventListener("mouseleave", handleHover) dragArea.addEventListener("focus", handleHover); dragArea.addEventListener("blur", handleHover); dragArea.addEventListener( "keydown", (event) => { if (event.defaultPrevented) { return; // Do nothing if the event was already processed } switch (event.key) { case "ArrowLeft": doDrag(-1); break; case "ArrowRight": doDrag(+1); break; case "PageDown": doDrag(+10); break; case "PageUp": doDrag(-10); break; case "Home": setValue(homeValue); div.dispatchEvent(new CustomEvent("input", {bubbles:true})); break; default: return; } event.preventDefault(); }); // promote a value given to us. This always returns a new array. function promoteValue(value) { if (value == null) return 0; return +value; } function setValue(newValue) { value = promoteValue(newValue); dragArea.style.backgroundPositionX = (value / dragStep) + "px"; numericInput.value = value; if (internalInput) { // hack to get rid of extra decimals like 1.4000000000000001 // relies on finding a numeric input HTML element numericInput.value = value - 0.5 * step; internalInput.stepUp(); value = +internalInput.value; } } function updateValue() { value = +numericInput.value; dragArea.style.backgroundPositionX = (value / dragStep) + "px"; } // initial value setValue(value); Object.defineProperty(div, "value", { get() { return value; }, set(value) { setValue(value); }}); return div; }32:T5b9,function dateRange(settings = {}) { // probably the most dodgy of the bunch. var {min, max, width=300} = settings; min = coerce_date(min); max = coerce_date(max); var div = html`

`; var date = Inputs.date(settings); div.appendChild(date); // some stuff below relies on Inputs internal stuff. // doing it this way allows us to have our slider thing without having // to copy or re-implement all of the Inputs stuff (setting range, // events, styles). // If the Inputs lib changes, this widget will still work but the layout will // break. var textbox = date.querySelector("input[type='date']"); var div2 = date.querySelector('div'); if (min && max) { const step = 1000*3600*24; var range = html``; range.value = date.value.getTime(); range.disabled = settings.disabled; (div2 || div).appendChild(range); if (textbox && div2) { textbox.style.width = '12em'; textbox.style.flexShrink = '1'; } range.addEventListener("input", () => {date.value = +range.value;}); date.addEventListener("input", () => {if (date.value) range.value = +date.value}); } Object.defineProperty(div, "value", { get() { return date.value; }, set(v) { v = coerce_date(v); date.value = v; if (range) range.value = v.getTime(); }}); return div; }33:T465,function dayOfYear(settings = {}) { var {year = new Date().getFullYear(), value = 1} = settings; var div = html`

`; var jan1; function toDate(n) { return Date.UTC(year, 0, n); } function doInput(n) { value = n; div.dispatchEvent(new CustomEvent("input", {bubbles:true})); } function setYear(year) { div._r && div._r.remove(); jan1 = toDate(1); var dec31 = Date.UTC(year, 11, 31); // 365 or 366 function toVal(d) { return Math.round((d - jan1) / (1000 * 60 * 60 * 24)) + 1; } var maxN = toVal(dec31); if (value > maxN) { doInput(maxN); } div._r = dateRange({...settings, min: jan1, max: dec31, value: toDate(value)}) div.appendChild(div._r); div._r.addEventListener("input", x => value = toVal(div._r.value)); } Object.defineProperty(div, "value", { get() { return value; }, set(v) { value = Math.floor(+v); div._r.value = toDate(value); }}); Object.defineProperty(div, "year", { get() { return year; }, set(v) { year = v; setYear(v) }}); setYear(year); return div; }34:Ta7e,function timeSliders(settings = {}) { var { disabled = false, value = new Date(), width, withUtcSlider=false } = settings; // widgets var local_time = range([0, 24], {step: .01, label: "Local time", disabled: disabled, width:width}); var day = dayOfYear({step: 1, label: "Day", disabled: disabled, width:width}); var year = range([1950, 2050], {step: 1, label: "Year", disabled: disabled, width:width}); var div = html`

`; div.appendChild(local_time); div.appendChild(day); div.appendChild(year); // the input will bubble up so if you’re listening to the div you should be fine. year.addEventListener("input", () => { day.year = year.value; value = calculateValue(); }); local_time.addEventListener("input", () => { value = calculateValue(); }); day.addEventListener("input", () => { value = calculateValue(); }); var utc_offset; if (withUtcSlider) { utc_offset = range([-14, 14], {step: 1, label: "UTC offset", disabled: disabled, width:width}); div.appendChild(utc_offset); utc_offset.addEventListener("input", () => { value = calculateValue(); }); } else { // no slider, just store a fixed value (setValue() will probably set this to the local UTC offset). utc_offset = {value: 0}; } // convert Date or value to widget values function setValue(v) { // if v is not our object: interpret it as a Date if (!v.date || !v.utc_offset || !v.local) { v = coerce_date(v); v = {date:v, utc_offset: -v.getTimezoneOffset() / 60} v.local = v.date.getTime() + 3600 * 1000 * v.utc_offset; } value = v; // convert local time stamp to UTC Date: var d = new Date(v.local); var now_year = d.getUTCFullYear(); var startOfYear = Date.UTC(now_year, 0, 1); var startOfDay = Date.UTC(now_year, d.getUTCMonth(), d.getUTCDate()); // round to eliminate any DST effects var day_nr = Math.round((startOfDay - startOfYear) / (86400 * 1000)) + 1; var now_hours = (v.local - startOfDay) / (3600 * 1000); local_time.value = now_hours.toFixed(2); utc_offset.value = v.utc_offset; day.value = day_nr; day.year = now_year; year.value = now_year; } // we return an object with time stamps and an explicit UTC offset field. function calculateValue() { var t = Date.UTC(year.value, 0, 1) + 86400 * 1000 * (day.value - 1) + 3600 * 1000 * local_time.value; return {local: t, date: new Date(t - 3600 * 1000 * utc_offset.value), utc_offset: utc_offset.value}; } // initial value setValue(value); Object.defineProperty(div, "value", { get() { return value; }, set(v) { setValue(v); }}); return div; }35:T1484,location = { const defaultTheme = {landColor: "#596", seaColor: "#def", borderColor: "#fff", outlineColor: "#888", gridColor: "#444", markColors: ["white", "black"]}; const themes = {"color": defaultTheme, "bw": {landColor: "#666", seaColor: "#eee", borderColor: "#fff", outlineColor: "#888", gridColor: "#444", markColors: ["white", "black"]}, "bw-light": {landColor: "#bbb", seaColor: "#fff", borderColor: "#666", outlineColor: "#888", gridColor: "#444", markColors: ["white", "black"]} }; function _mapInput(settings = {}) { const { width=360, label, theme = defaultTheme, valueLabel=true, projectionFactory = d3.geoNaturalEarth1} = settings; var { value=[0, 0] } = settings; const ourTheme = themes[theme] || {...defaultTheme, ...theme} // calculate height const proj0 = projectionFactory(); const proj1 = proj0.fitWidth(width, {type: "Sphere"}); const height = Math.ceil(d3.geoPath(proj1).bounds({type: "Sphere"})[1][1]); // margin so we can draw our marker outside the bounding box. // offsetting an extra 0.5 pixels will line up the grid and // border with the logical pixels for equirectangular projection const cmargin = 6.5; const cwidth = width + 2*cmargin; const cheight = height + 2*cmargin; const context = DOM.context2d(cwidth, cheight); context.lineJoin = "round"; const projection = proj0.fitExtent([[cmargin, cmargin], [cwidth-cmargin, cheight-cmargin]], {type: "Sphere"}); const path = d3.geoPath(projection, context); var mousedown = false; var pageX0, pageY0; // ocean and land color context.beginPath(); path({type: "Sphere"}); context.fillStyle = ourTheme.seaColor; context.fill(); context.beginPath(); path(countries); context.fillStyle = ourTheme.landColor; context.fill(); // grid context.beginPath(); path(graticule); context.lineWidth = .15; context.strokeStyle = ourTheme.gridColor; context.stroke(); // borders context.beginPath(); path(countries); context.strokeStyle = ourTheme.borderColor; context.stroke(); // map outline context.beginPath(); path({type: "Sphere"}); context.lineWidth = 1; context.strokeStyle = ourTheme.outlineColor; context.stroke(); const image = context.getImageData(0, 0, context.canvas.width, context.canvas.height); // DOM: var div = html`

` if (label) { var lb = div.appendChild(html``) lb.innerText = label; lb.style = label_style; } var div2 = div.appendChild(html`

`); div2.appendChild(context.canvas); context.canvas.style.maxWidth = '100%'; if (valueLabel) { var p = div2.appendChild(html`

`); } function setValue(coordinates) { value = coordinates; // render canvas context.clearRect(0, 0, cwidth, cheight); context.putImageData(image, 0, 0); context.lineWidth = 2.4; path.pointRadius(5.3); context.strokeStyle = ourTheme.markColors[0]; context.beginPath(); path({type: "Point", coordinates}); context.stroke(); context.lineWidth = 1.4; path.pointRadius(4.4); context.strokeStyle = ourTheme.markColors[1]; context.beginPath(); path({type: "Point", coordinates}); context.stroke(); // value label if (p) { var letter0 = coordinates[0] < 0 ? "W" : "E"; var letter1 = coordinates[1] < 0 ? "S" : "N"; p.innerText = `${Math.abs(coordinates[0]).toFixed(1)}°\xa0${letter0}, ${Math.abs(coordinates[1]).toFixed(1)}°\xa0${letter1}`; } } function clamp(a, b, x) { return Math.max(a, Math.min(b, x)); } function drag(event) { if (!mousedown) return; const {pageX , pageY} = event; // get coordinate of the centre of this pixel: var scale = cwidth / context.canvas.offsetWidth; var layerX = (pageX - pageX0) * scale + .5; var layerY = (pageY - pageY0) * scale + .5; layerX = clamp(cmargin, cwidth-cmargin, layerX); layerY = clamp(cmargin, cheight-cmargin, layerY); div.value = projection.invert([layerX, layerY]); div.dispatchEvent(new CustomEvent("input")); }; // mousedown listener (on canvas) context.canvas.onmousedown = function(event) { if (event.buttons != 1) return; mousedown = true; pageX0 = (event.pageX - event.offsetX) pageY0 = (event.pageY - event.offsetY) drag(event); }; // attach the other event listeners to document, otherwise the drag operation // gets stuck if the mouse leaves the canvas document.addEventListener("mousemove", drag) document.addEventListener("mouseup", event => { mousedown = false; }); Object.defineProperty(div, "value", { get() { return value; }, set(v) { setValue(v); }}); div.value = value; return div; } _mapInput.defaultTheme = defaultTheme; _mapInput.themes = themes; return _mapInput; } 36:T4e9,function currentLocationButton(caption = undefined, settings = {}) { caption = caption || "Use device location"; var {now = false, enableHighAccuracy = false, maximumAge = 3600 * 1000, label} = settings; var div = html`

`; var btn = Inputs.button(caption, {label: label}); div.appendChild(btn); var progress = html`

⌛

`; btn.appendChild(progress); var btnEl = div.getElementsByTagName('button')[0]; // undefined until we successfully get a location var value = undefined; function set(e) { value = [e.coords.longitude, e.coords.latitude]; div.dispatchEvent(new CustomEvent("input")); dismiss(); } function dismiss() { progress.style.visibility = "hidden"; btnEl.disabled = false; } function getLocation() { progress.style.visibility = "visible"; btnEl.disabled = true; navigator.geolocation.getCurrentPosition( set, dismiss, {enableHighAccuracy: enableHighAccuracy, maximumAge: maximumAge}); } btn.addEventListener("input", e => { getLocation(); }); if (now) getLocation(); Object.defineProperty(div, "value", { get() { return value; }, set(v) { value = v; }}); return div; }37:T1ea4,function timeButtons(settings = {}) { function mkSpan() { return html``; } function fill_row(div, tab) { var span = mkSpan(); div.appendChild(span); for (var b of tab) { if (b == "sep") { div.appendChild(document.createTextNode(" ")); span = mkSpan(); div.appendChild(span); } else { let [txt, f] = b; let button = document.createElement("button"); button.addEventListener("click", e => { e.preventDefault(); f(); } ) button.innerHTML = txt; span.appendChild(button); } } } function arrow_svg(direction, do_fill) { var x = direction == 1 ? 1 : 9; var fill = do_fill ? "black" : "None"; var stroke = do_fill ? "black" : "#777" return svg``; } function stop_svg() { return svg``; } function fill_buttons(buttons, direction) { const clear = e => { while (e.firstChild) {e.removeChild(e.firstChild);} } clear(buttons[0]); clear(buttons[1]); buttons[0].appendChild(arrow_svg(-1, direction < 0)); buttons[1].appendChild(arrow_svg(+1, direction > 0)); } // speed table: seconds or minutes var speed_tab_60 = [1, 2, 4, 7.5, 15, 30] // speed table: hours var speed_tab_24 = [1, 2, 4, 6, 12, 24] function read_speed_tab(ix) { if (ix < 6) { return [speed_tab_60[ix], speed_tab_60[ix] + "×"]; } if (ix < 12) { return [speed_tab_60[ix - 6] * 60, speed_tab_60[ix - 6] + " min/s"]; } return [speed_tab_24[ix - 12] * 3600, speed_tab_24[ix - 12] + " hr/s"]; } function invert_speed_tab(speed) { speed = Math.abs(speed); for (var i = 0; i < 18; ++i) { if (speed <= read_speed_tab(i)[0]) { return i; } } return 17; } // ---------------------- const { extraPresets = [], frameInterval = 1000, step = 1 } = settings; var { speed = 0, value = new Date() } = settings; value = coerce_date(value); const initial_speed = speed; const ms_per_min = 60 * 1000; const ms_per_hour = 60 * ms_per_min; const ms_per_day = 24 * ms_per_hour; var div = html`

`; var speed_label = html`Paused`; var play_buttons; var presets = {}; function input_value(new_value) { value = new_value; div.dispatchEvent(new CustomEvent("input", {bubbles:true})); } function move_time(offset) { input_value(new Date(value.getTime() + offset)); } function set_preset(name) { var f = presets[name]; f && input_value(f()); } // speed setting var speed = [0, "paused"]; // frame delay to use (maximum of step / speed, and frameInterval) var frame_delay = 1; var speed_input; function set_speed() { var new_speed = read_speed_tab(speed_input.value); var steps_per_interval = Math.round(frameInterval / step * new_speed[0]); frame_delay = Math.max(steps_per_interval, 1) * step / new_speed[0]; if (speed[0] < 0) new_speed[0] = -new_speed[0]; speed = new_speed; speed_label.innerHTML = speed[1]; // if using timers, cancel and reschedule // animation frames can keep running if (timer) { clearTimeout(timer); schedule_tick(); } } // setTimeout instance var timer = 0; // requestAnimationFrame instance var animation = 0; // time stamp when the last tick happened, as returned by performance.now() var last_tick = undefined; /// schedule next tick. We may arrive here when this tick was already /// past due, in that case, skip ticks as necessary. function schedule_tick() { // delay to next tick. If we can’t keep up, advance more than one // frames at once. var elapsed = performance.now() - last_tick; var tick_count = Math.max(1, Math.ceil(elapsed / frame_delay)); var delay = tick_count * frame_delay - elapsed; if (delay < 50) { // 20 fps or more, use requestAnimationFrame timer = 0; animation = window.requestAnimationFrame(function(now) { // skip animation frames if we didn't reach the next tick yet var frame_duration = now - last_tick; if (frame_duration > frame_delay * .95) { tick(frame_delay * tick_count); } else { schedule_tick(); } }); } else { timer = window.setTimeout(tick, delay, frame_delay * tick_count); animation = 0 } } /// This function advances the animation. The tick count is used to update /// the last_tick time stamp. It will track the current time, but by using a calculated /// time stamp we can ensure ticks happen in a regular interval (eg. every 1000 ms). function tick(frame_duration) { // detect if we got removed (eg. the cell that called timeButtons() was refreshed): if (!div.parentElement) { stop(); return; } move_time(speed[0] * frame_duration); last_tick += frame_duration; schedule_tick(); } function play(direction) { speed[0] = direction; set_speed(); if (!(timer || animation)) { last_tick = performance.now(); tick(0); } fill_buttons(play_buttons, direction); } function stop() { window.clearTimeout(timer); timer = 0; window.cancelAnimationFrame(animation); animation = 0; last_tick = undefined; speed = [0, "Paused"]; speed_label.innerHTML = "Paused"; fill_buttons(play_buttons, 0); } // Extra check to avoid leaks if this cell gets refreshed invalidation.then(stop); var row1 = [ ["← day", () => move_time(-ms_per_day)], ["hour", () => move_time(-ms_per_hour)], ["min", () => move_time(-ms_per_min)], "sep", ["now", () => input_value(new Date()) ]]; presets.now = () => new Date(); for (var pr of extraPresets) { let f = pr[1]; row1.push([pr[0], () => input_value(f(value))]); presets[pr[0] = pr[1]]; } row1 = row1.concat([ "sep", ["min", () => move_time(ms_per_min)], ["hour", () => move_time(ms_per_hour)], ["day →", () => move_time(ms_per_day)] ]); var row2 = [ ["", () => play(-1)], ["", stop], ["", () => play(+1)], ]; var row1_div = html`

`; div.appendChild(row1_div); fill_row(row1_div, row1); var row2_div = document.createElement("div"); div.appendChild(row2_div); fill_row(row2_div, row2); var play1 = row2_div.firstChild.firstChild; play_buttons = [play1, play1.nextSibling.nextSibling]; play1.nextSibling.appendChild(stop_svg()); row2_div.appendChild(document.createTextNode(" ")); row2_div.appendChild(speed_label); speed_input = html`` row2_div.appendChild(speed_input); speed_input.addEventListener("input", function(e) { if (speed[0] != 0) set_speed(); e.preventDefault(); }) // set initial requested speed if (initial_speed != 0) { window.setTimeout(() => { speed_input.value = invert_speed_tab(initial_speed); play(initial_speed); }, 1); } else { fill_buttons(play_buttons, 0); } Object.defineProperty(div, "value", { get() { return value; }, set(v) { if (typeof v == 'string') { set_preset(v); } else { value = coerce_date(v); } } }); return div; }38:T8e0,function animationSpeedSlider(settings = {}) { const { step = 0.01, max = 2, label = "Speed", smallestDelta = 0.001, ...other_settings } = settings; var { value = 0, period = 1 } = settings; var speed_input = range([0, max], {...other_settings, value: value, step: step, label: label}); var div = html`

`; div.appendChild(speed_input); speed_input.addEventListener("input", function(e) { set_speed(speed_input.value); e.preventDefault(); }) // speed var speed = 0; var t0 = undefined; const S_TO_MS = 1000; /// schedule next tick. We may arrive here when this tick was already /// past due, in that case, skip ticks as necessary. function schedule_tick() { window.requestAnimationFrame(tick); } function set_speed(s) { speed = +s; if (speed != 0) schedule_tick(); } /// This function advances the animation. The tick count is used to update /// the last_tick time stamp. It will track the current time, but by using a calculated /// time stamp we can ensure ticks happen in a regular interval (eg. every 1000 ms). function tick(t) { // detect if we got removed (eg. the cell that called timeButtons() was refreshed): if (!div.parentElement) { return; } t0 = t0 || t; var dt = t - t0; var delta = dt * speed / S_TO_MS; if (delta >= smallestDelta) { // apply update if the value step is large enough // always add a multiple of smallestDelta const appliedDelta = smallestDelta * Math.floor(delta / smallestDelta); t0 += appliedDelta / speed * S_TO_MS; value += appliedDelta; if (value > period) value -= period; div.dispatchEvent(new CustomEvent("input", {bubbles:true})); } if (speed > 0) { schedule_tick(); } else { t0 = undefined; } } // initial speed set_speed(value); // define value property Object.defineProperty(div, "value", { get() { return value; }, set(v) { value = v; } }); // define value property Object.defineProperty(div, "period", { get() { return period; }, set(v) { period = v; value -= period * Math.floor(value / period); // no input event yet } }); return div; }39:[] 2e:{"title":"Inputs","cells":[{"id":0,"value":"# Inputs\n\nSome inputs used in the *Astronomical clock* notebook","pinned":false,"hidden":false,"mode":"md"},{"id":321,"value":"md`-------------------\n\n## location\n\nGive a location as a point on a map.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":338,"value":"viewof point = location({value: [14.420917, 50.087008], label: \"Position\"})","pinned":true,"hidden":false,"mode":"ojs"},{"id":354,"value":"Set a default with `{value: [lon, lat]}`. Other propererties to customize the control:\n\nField | meaning\n------|--------\n`label` | label for this input\n`width` | Width of the map\n`theme` | color scheme, given as an object (see `location.defaultTheme`), or name of a theme in `location.themes`.\n`valueLabel` | Show the coordinates below the map\n`projectionFactory` | A function returning a D3 projection (default: `d3.geoNaturalEarth1`)","pinned":false,"hidden":false,"mode":"md"},{"id":343,"value":"Inputs.bind(location({projectionFactory: d3.geoEquirectangular, theme: \"bw\"}), viewof point)","pinned":true,"hidden":false,"mode":"ojs"},{"id":1094,"value":"{\n var div = html`

`;\n div.append(\"The predefined themes are \");\n var flag = false;\n for (var k in location.themes)\n {\n if (flag) div.append(\", \");\n div.append(html`\"${k}\" `);\n flag = true;\n }\n div.append(\".\");\n div.append(\" A theme consists of these fields: \");\n var flag = false;\n for (var k in location.defaultTheme)\n {\n if (flag) div.append(\", \");\n div.append(html`${k} `);\n flag = true;\n }\n div.append(\".\");\n return div;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1068,"value":"---------------------\n\n## currentLocationButton\n\nA button that yields the current location from the Geolocation API (commonly using GPS on a smartphone).\n\nYou can bind this to the _location_ input to have both a map input and a button.\n\nThe first argument of this function is the button caption, the second is the options described below. The Geolocation API parameters have default values to use low accuracy, and to allow caching up to an hour.\n\nThe value is `undefined` until it successfully acquires a location from the API.\n\nOption | Meaning\n-------|---------\n`now` | Fetch the location immediately if `true`\n`enableHighAccuracy`
`maximumAge` | Forwarded to the Geolocation API call (`navigator.geolocation.getCurrentPosition()`).","pinned":false,"hidden":false,"mode":"md"},{"id":1071,"value":"Inputs.bind(currentLocationButton(undefined, {label: \"Position\"}), viewof point)","pinned":true,"hidden":false,"mode":"ojs"},{"id":25,"value":"md`-------------------\n\n## range\n\nWrapper around *Inputs.range* which makes the text box smaller at high widths.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":8,"value":"range([0, 100], {width: 600, step: .1, label: \"Wide range\"})","pinned":true,"hidden":false,"mode":"ojs"},{"id":1291,"value":"## infiniteRange\n\nA range which can be manipulated like a slider, but with infinite bounds.\n\nThe slider part works like an infinite scroll area, allowing you to adjust the values by dragging.\n\nOption | Meaning\n-------|---------\n`step` | Step size for the numeric input\n`dragStep` | Step per pixel of dragging on the slider. Should be a multiple of `step`.\n\nOther options are the same as for *Inputs.numeric*.","pinned":false,"hidden":false,"mode":"md"},{"id":1293,"value":"infiniteRange({width: 600, step: 0.01, dragStep: 0.1, label: \"Infinite range\"})","pinned":true,"hidden":false,"mode":"ojs"},{"id":1178,"value":"-------------------\n\n## multiChannel\n\nWidget with multiple *Inputs.number* instances in a row. The value is an array of numbers.\n\nIf a value is given as a number, all channels are set to that number. Otherwise the value must be an array with the correct length.\n\nThe first parameter gives the number of values, the second parameter is the settings. `label` and `value` have the usual meaning, the rest of the settings is forwarded to the *Inputs.number* instances. `extent` is forwarded as the first parameter to specify min and max values.","pinned":false,"hidden":false,"mode":"md"},{"id":1180,"value":"viewof xyz = multiChannel(3, {label: \"xyz\", value: [1, 2, 3], step: .1, extent: [-5, 5]})","pinned":true,"hidden":false,"mode":"ojs"},{"id":38,"value":"md`----------\n\n## dateRange\n\nSimilar to *Inputs.date* with a slider input.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":46,"value":"viewof date = dateRange({label: \"Date\", width: 600, min: \"2021-01-01\", max: \"2021-12-31\", value: \"2021-09-28\"})","pinned":true,"hidden":false,"mode":"ojs"},{"id":116,"value":"md`Date is set to _${date.toDateString()}_.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":161,"value":"md`----------\n\n## dayOfYear\n\nsimilar to *dateRange*, but the value is the day of the year instead of a Date.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":164,"value":"viewof day = dayOfYear({label: \"Day\", year: 2017, value: 42, width: 600})","pinned":true,"hidden":false,"mode":"ojs"},{"id":193,"value":"md`day is ${day}.\n\nYou can assign the \\`year\\` field to update the year. This does not generate an input event, unless the value is 366 and *year* is not a leap year.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":225,"value":"viewof year = range([2000, 2040], {label: \"Year\", step: 1, width: 600});","pinned":true,"hidden":false,"mode":"ojs"},{"id":227,"value":"(viewof day).year = year;","pinned":true,"hidden":false,"mode":"ojs"},{"id":277,"value":"----------\n\n## timeSliders\n\nThis controls a timestamp with a group of sliders.\n\n| Option | meaning |\n|------|---------|\n| `withUtcSlider` | Include a slider to set the time zone explicitly. If not given the value is derived from the given initial value. |\n| `value` | Initializer for the widget value, defaults to `new Date()`. |\n\nThe value is an object with 3 fields:\n\n| field | meaning |\n|------|---------|\n| `local` | Time stamp based on selected local time and date, pretending that the time zone is set to UTC. |\n| `date` | Selected time (JavaScript `Date`). |\n| `utc_offset` | Selected UTC offset in hours. |\n\nFor setting the value you may pass in a `Date` or a time stamp in milliseconds, this will set the UTC offset input to the current time zone.","pinned":false,"hidden":false,"mode":"md"},{"id":285,"value":"viewof time = timeSliders({width: 500, withUtcSlider: true});","pinned":true,"hidden":false,"mode":"ojs"},{"id":307,"value":"Selected time stamp: ${utc_date_format.format(time.local)}, in time zone ${time.utc_offset}.\n\nDate: (this is probably formatted as a date in your local time zone)
\n_${time.date}_\n\n`Date` does not store a time zone offset, it only encapsulates an amount of milliseconds since some epoch. So unless you’re only interested in times in your current time zone, methods like `getHour()` will probably not return what you want. Instead, you can construct a `Date` using `v.local` and use methods like `getUTCHours()` to inspect the value. You can also pass `v.local` to a `DateTimeFormat` set to `\"UTC\"` to format the time relative to the selected UTC offset.\n","pinned":false,"hidden":false,"mode":"md"},{"id":300,"value":"utc_date_format = Intl.DateTimeFormat(undefined, {\n timeStyle: \"short\",\n dateStyle: \"medium\",\n timeZone: \"UTC\"\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":978,"value":"----------\n\n## timeButtons\n\nThis widget allows you to move a time stamp forward or backwards, and to set up an animation. It can be used by itself, or you can bind it to `timeSliders` or any input that has a `Date` as value type.\n\n| Option | meaning |\n|------|---------|\n| `speed` | The initial animation speed. Positive or negative, the default is 0 which means paused. The value is rounded to one of the values on the slider. |.\n| `extraPresets` | Array of extra time presets, every element is itself an array with 2 elements: a name and a function. The function receives the current value (as a `Date`) and returns the new value. |\n| `frameInterval` | How many milliseconds per frame. For low values this is limited by the display refresh rate. |\n| `step` | Output value step in milliseconds. The value is always increased in multiples of this step. This lowers the frame rate at low speed settings. |\n\nAnimation frames are reported by sending input events.\n\nTime: ${utc_date_format.format(time.local)}","pinned":false,"hidden":false,"mode":"md"},{"id":983,"value":"// We’re binding this one to the time sliders above. If you start the animation,\n// you should see the time sliders progrss as well.\nInputs.bind(timeButtons({frameInterval: 1, step: 10000, extraPresets: [[\"noon\", get_noon]]}), viewof time)","pinned":true,"hidden":false,"mode":"ojs"},{"id":985,"value":"function get_noon()\n{\n var d = new Date();\n d.setHours(12);\n d.setMinutes(0);\n d.setSeconds(0);\n return d;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":1150,"value":"## Animation speed slider\n\nSet an animation speed for a float value. Can be bound to another float valued input.\n\nThis generates at most one change per animation frame. The value will increase by a multiple of `smallestDelta` for each step.\n\nOption | Meaning\n-------|---------\n`width`
`label`
`step` | Slider settings (see _range_)\n`value` | Initial speed value\n`max` | Maximum speed value\n`smallestDelta` | Smallest increase generated by the widget, this will throttle updates at slow speed, or can be set to match the step value of a bound widget.\n`period` | Period of the animation, this is the value where the value wraps around (default: `1.0`).\n\nYou can re-assign the `period` attribute later if you want to change the period, this will not raise an input event but it will also not immediately cause any wrapping.\n","pinned":false,"hidden":false,"mode":"md"},{"id":1156,"value":"viewof animationRangeExample = range([0.0, 1.0], {label: \"Amount\", step: 0.001, width: 500})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1160,"value":"Inputs.bind(animationSpeedSlider({label: \"Rate\", value: 0, width: 500}), viewof animationRangeExample)","pinned":true,"hidden":false,"mode":"ojs"},{"id":107,"value":"md`--------------\n\n## Widget functions\n\nImport these:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":6,"value":"function range(span, settings) {\n var r = Inputs.range(span, settings);\n var textbox = r.querySelector(\"input[type='number']\");\n if (textbox) {\n textbox.style.width = '12em';\n textbox.style.flexShrink = '1';\n }\n return r;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":1176,"value":"$30","pinned":true,"hidden":false,"mode":"ojs"},{"id":1196,"value":"$31","pinned":true,"hidden":false,"mode":"ojs"},{"id":42,"value":"$32","pinned":true,"hidden":false,"mode":"ojs"},{"id":166,"value":"$33","pinned":true,"hidden":false,"mode":"ojs"},{"id":282,"value":"$34","pinned":true,"hidden":false,"mode":"ojs"},{"id":324,"value":"$35","pinned":true,"hidden":false,"mode":"ojs"},{"id":1055,"value":"$36","pinned":true,"hidden":false,"mode":"ojs"},{"id":921,"value":"$37","pinned":true,"hidden":false,"mode":"ojs"},{"id":1154,"value":"$38","pinned":true,"hidden":false,"mode":"ojs"},{"id":929,"value":"## Extra functions","pinned":false,"hidden":false,"mode":"md"},{"id":933,"value":"coerce_date = {\n // functions from Inputs.date, I don't know if this is visible in any way.\n\n // isoformat.parse:\n function isoparse(string, fallback) {\n const re = /^(?:[-+]\\d{2})?\\d{4}(?:-\\d{2}(?:-\\d{2})?)?(?:T\\d{2}:\\d{2}(?::\\d{2}(?:\\.\\d{3})?)?(?:Z|[-+]\\d{2}:?\\d{2})?)?$/;\n if (!re.test(string += \"\")) return typeof fallback === \"function\" ? fallback(string) : fallback;\n return new Date(string);\n }\n\n return function(value) {\n // first detect the object returned by our time sliders widget:\n value = (value && value.date) || value;\n \n return value instanceof Date && !isNaN(value) ? value\n : typeof value === \"string\" ? isoparse(value, null)\n : value == null || isNaN(value = +value) ? null\n : new Date(+value);\n }\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":790,"value":"md`## settings`","pinned":false,"hidden":false,"mode":"ojs"},{"id":794,"value":"label_style = `font: 13px/1.2 var(--sans-serif); width: ${label_width}px; font-size: ${label_size}; margin-right: 6.5px; flex-shrink: 0;`","pinned":true,"hidden":false,"mode":"ojs"},{"id":796,"value":"label_size = '80%'","pinned":true,"hidden":false,"mode":"ojs"},{"id":1209,"value":"label_width = 120","pinned":true,"hidden":false,"mode":"ojs"},{"id":677,"value":"md`### Imports`","pinned":false,"hidden":false,"mode":"ojs"},{"id":326,"value":"// https://github.com/topojson/world-atlas\nworld = d3.json(\"https://cdn.jsdelivr.net/npm/world-atlas@2/countries-110m.json\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":328,"value":"countries = topojson.feature(world, world.objects.countries)","pinned":true,"hidden":false,"mode":"ojs"},{"id":330,"value":"graticule = d3.geoGraticule10()","pinned":true,"hidden":false,"mode":"ojs"},{"id":335,"value":"topojson = require(\"topojson-client@3\")","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W39","stdlib":"1","titling":"auto"}