2f:T7ed,function clock(datetime, coords, options) { options = options || {} let size = options.size || 640 let color_day = options.color_day || 'white' let color_night = options.color_night || 'black' let color_day_ticks = options.color_day_ticks || 'black' let color_night_ticks = options.color_night_ticks || 'white' let color_border = options.color_border || '#CCC' let color_hand_hours = options.color_hand_hours || '#888' let color_hand_minutes = options.color_hand_minutes || '#333' let color_hand_seconds = options.color_hand_seconds || 'red' let sun = suncalc.getTimes(datetime, coords.latitude, coords.longitude) let sunrise_angle = (new Date(sun.sunrise) - d3.timeDay(datetime)) / 864e5 * 2 * Math.PI let sunset_angle = (new Date(sun.sunset) - d3.timeDay(datetime)) / 864e5 * 2 * Math.PI let clip_uid = DOM.uid("clip") return `` }30:[] 2d:{"title":"24-Hours Day/Night Clock","cells":[{"id":0,"value":"md`# 24-Hours Day/Night Clock\n\nA 24-hours clock showing day and night duration for your current location.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":557,"value":"html`${clock(now, local_coords)}`","pinned":true,"hidden":false,"mode":"ojs"},{"id":565,"value":"It is possible to customize the clock face by specifying its size and colors:","pinned":false,"hidden":false,"mode":"md"},{"id":559,"value":"viewof size = Inputs.range([50, 800], {label: \"Size\", step: 1, value: 550})","pinned":false,"hidden":false,"mode":"ojs"},{"id":444,"value":"html`${clock(now, local_coords, {size, color_day, color_night, color_day_ticks, color_night_ticks, color_border, color_hand_hours, color_hand_minutes, color_hand_seconds})}`","pinned":true,"hidden":false,"mode":"ojs"},{"id":468,"value":"viewof color_day = Inputs.color({label: \"Day\", value: \"#ffc852\"})","pinned":false,"hidden":false,"mode":"ojs"},{"id":470,"value":"viewof color_night = Inputs.color({label: \"Night\", value: \"#2a5779\"})","pinned":false,"hidden":false,"mode":"ojs"},{"id":530,"value":"viewof color_day_ticks = Inputs.color({label: \"Day ticks\", value: \"#553300\"})","pinned":false,"hidden":false,"mode":"ojs"},{"id":535,"value":"viewof color_night_ticks = Inputs.color({label: \"Night ticks\", value: \"#ddeeee\"})","pinned":false,"hidden":false,"mode":"ojs"},{"id":488,"value":"viewof color_border = Inputs.color({label: \"Border\", value: \"#ddeeee\"})","pinned":false,"hidden":false,"mode":"ojs"},{"id":485,"value":"viewof color_hand_hours = Inputs.color({label: \"Hours hand\", value: \"#000000\"})","pinned":false,"hidden":false,"mode":"ojs"},{"id":501,"value":"viewof color_hand_minutes = Inputs.color({label: \"Minutes hand\", value: \"#550000\"})","pinned":false,"hidden":false,"mode":"ojs"},{"id":505,"value":"viewof color_hand_seconds = Inputs.color({label: \"Seconds hand\", value: \"#ff6666\"})","pinned":false,"hidden":false,"mode":"ojs"},{"id":591,"value":"/*html`${\n example_coords.map(coords => `

${clock(now, coords, {size: 200})}

${coords.label}

`).join('')\n}`*/","pinned":true,"hidden":false,"mode":"ojs"},{"id":275,"value":"local_coords = new Promise((resolve, reject) => {\n if (navigator.geolocation) navigator.geolocation.getCurrentPosition(\n pos => resolve(pos.coords),\n err => reject(Error(err.message))\n );\n else reject(Error('this browser does not support geolocation.'))\n});","pinned":false,"hidden":false,"mode":"ojs"},{"id":589,"value":"example_coords = [\n {label: 'Helsinki', latitude: 60.192059, longitude: 24.945831},\n {label: 'Rome', latitude: 41.902782, longitude: 12.496366},\n {label: 'Lima', latitude: -12.046374, longitude: -77.042793},\n {label: 'Tokyo', latitude: 35.652832, longitude: 139.839478},\n {label: 'Sydney', latitude: -33.865143, longitude: 151.209900}\n]","pinned":true,"hidden":false,"mode":"ojs"},{"id":570,"value":"## Implementation","pinned":false,"hidden":false,"mode":"md"},{"id":3,"value":"$2f","pinned":true,"hidden":false,"mode":"ojs"},{"id":620,"value":"suncalc.getTimes(now, local_coords.latitude, local_coords.longitude)","pinned":true,"hidden":false,"mode":"ojs"},{"id":367,"value":"function ticks(color) {\n return `${d3.range(4).map(i => `\n ${i == 0 ? 24 : i*6}\n `).join(\"\")}\n ${d3.range(24).map(i => i % 6 ? `\n \n ` : ``).join(\"\")}`\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":166,"value":"d3 = require(\"https://d3js.org/d3.v7.min.js\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":282,"value":"suncalc = require('suncalc@1.9')","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W30","stdlib":"1","titling":"auto"}