2b:null 2c:["$","title",null,{"children":"🗓️ Annual Calendar: The MIH Watch | Christophe Yamahata | Observable"}] 31:T54d,An annual calendar watch is a mechanical timepiece designed to display the date, day of the week, and month. It only requires manual correction of the date once a year, on March 1^st. The MIH annual calendar complication was invented by watchmaker Ludwig Oechslin while he was the curator at the Musée International d'Horlogerie (MIH) in La Chaux-de-Fonds, Switzerland. This annual calendar is an additional module integrated into the ETA Valjoux 7750 calibre (“77-50”). ### How does the MIH Watch work? This notebook aims to unveil the intricate mechanism of the MIH Watch through an interactive animation. **Mechanism in a nutshell —** The “77-50” features a standard 31-day calendar, with the date transition occurring between around 10 PM and 3 AM. The MIH annual calendar module — which consists of **only 9 parts** – enhances this functionality by automatically adjusting the date (30^th ➜ 1^st) for the shorter months of *April*, *June*, *September*, and *November*. 32:T2386,// Lean per-frame update: reuses the DOM nodes parsed once in MIH_svg. // Only recomputes rotation angles and sets `transform` attributes — no re-parsing, no DOM rebuild. MIH_mechanism = { const { container, Hour_hand, Minute_hand, Day_disc, AM_PM_Day_disc, Month_disc, Date_disc, single_tooth, five_tooth, special_gear, Mask_rect_Day, Mask_circ_Day, Mask_rect_Month, Mask_circ_Month, Mask_rect_Date, cx_Center, cy_Center, cx_5_tooth, cy_5_tooth, cx_special_gear, cy_special_gear } = MIH_svg; // Rotate the Hour hand and the single-tooth wheel var angle_Hours = (Hours_played-0.667)*(360/12) + Minutes_played*(30/60) // Rotation angle. Initial position 0:40 (0.667) Hour_hand.attr("transform", `rotate(${angle_Hours}, ${cx_Center}, ${cy_Center})`); single_tooth.attr("transform", `rotate(${angle_Hours}, ${cx_Center}, ${cy_Center})`); // Rotate the Minute hand var angle_Minutes = 120 + Minutes_played*(360/60) // Rotation angle. Initial position 0:40 (120°) Minute_hand.attr("transform", `rotate(${angle_Minutes}, ${cx_Center}, ${cy_Center})`); // Rotate the Day disc var angle_Day = (2*Day_played - 4 + Math.floor(Hours_played/12))*(360/14); // Initial position: Tuesday morning Day_disc.attr("transform", `rotate(${angle_Day}, ${cx_Center}, ${cy_Center})`) // Rotate the Date disc var angle_Date = (Date_played-1)*(360/31); // Initial position: 1/31 angle_Date += angleCalendarDate(Hours_played, Minutes_played); // Initiate date transition Date_disc.attr("transform", `rotate(${angle_Date}, ${cx_Center}, ${cy_Center})`) // Start date transition // Valjoux 7750 calibre: The rotation of the calendar date takes time between ~22:30 and 3:00 (i.e., it lasts ~ 270 minutes) function angleCalendarDate(hours, minutes) { const calendarTransition = 270 if(hours == 22 && minutes >= 30) { // 22:30 to 22:59 return (minutes-30)*(360/31)/calendarTransition } else if(hours == 23) { // 23:00 to 23:59 return (minutes + 30)*(360/31)/calendarTransition } else if( hours < 3) { // 0:00 to 2:59 return (minutes + (hours+1.5)*60)*(360/31)/calendarTransition - (360/31) } else { return 0 } } // Rotation of the 5-tooth gear const ratio_1 = 0.13 // Ratio empirically adjusted to match var angle_five_tooth = Date_played == 31? 36: 0; // Rotation operates on 30 (starts at 22:30) until 1st (ends at 3:00) angle_five_tooth += ((Date_played == 30 && Hours_played >= 22) || Date_played == 31 || (Date_played == 1 && Hours_played <=3)) && angleCalendarDate(Hours_played, Minutes_played) != 0 ? (360/5)*angleCalendarDate(Hours_played, Minutes_played)*ratio_1 : 0; five_tooth.attr("transform", `rotate(${angle_five_tooth}, ${cx_5_tooth}, ${cy_5_tooth})`); // Rotation of the Month disc const ratio_2 = 5/36; var angle_Month = -(2*Month_played-14)*(360/24); // Initial position: July, 1st segment Date_played == 31? angle_Month -= 360/24: null; // Second segment appears on the 31st // Rotation operates on 30 (starts at 22:30) until 1st (ends at 3:00) angle_Month -= ((Date_played == 30 && Hours_played >= 22) || Date_played == 31 || (Date_played == 1 && Hours_played <= 3)) && angleCalendarDate(Hours_played, Minutes_played) != 0 ? (360/5)*angleCalendarDate(Hours_played, Minutes_played)*ratio_1*ratio_2 : 0; Month_disc.attr("transform", `rotate(${angle_Month}, ${cx_Center}, ${cy_Center})`); // Rotation of the special gear // This gear rotates by 90° every 12 hours (half a turn each day) const special_gear_offset = 34 // Initial position ~36° ar 0:00 var angle_special_gear = -angleSpecialGear(Hours_played, Minutes_played) + special_gear_offset; special_gear.attr("transform", `rotate(${angle_special_gear}, ${cx_special_gear}, ${cy_special_gear})`); // The rotation of the special gear takes time between 11:00 and 12:40 and between 23:00 and 0:40 (i.e., it lasts ~ 100 minutes) function angleSpecialGear(hours, minutes) { const specialTransition = 100 if(hours == 0 && minutes <= 40) { // 0:00 to 0:40 return minutes*90/specialTransition } else if (hours < 11) { // 1:00 to 11:00 return 36 } else if (hours == 11 ) { // 11:00 to 11:59 return 36 + minutes*90/specialTransition } else if (hours == 12 && minutes <= 40) { // 12:00 to 12:40 return 90 + minutes*90/specialTransition } else if (hours < 23){ // 12:41 to 23:00 return 126 } else { // 23:00 to 23:59 return 126 + minutes*90/specialTransition } } // Action for shorter months // Transitions from 04-30 to 05-01, 06-30 to 07-01, 09-30 to 10-01, 11-30 to 12-01, and for 03-01. // This operation starts on the 30th and ends on the 1st. Note that the date 31st will not be selected with the JavaScript calendar. // The special gear engages with the month disc, which then rotates the 5-tooth gear, subsequently turning the date disc. // This occurs between 23:00 and 00:40 and supersedes the action of the Valjoux calendar mechanism. // Since the date is completely set at 00:40 on these specific days, we need also to specify that nothing changes between 0:40 and 3:00. // Identification of special transition dates var special_Transition_date = (Date_played == 30 && Month_played == 4) || (Date_played == 1 && Month_played == 5) // 04-30 -> 05-01 || (Date_played == 30 && Month_played == 6) || (Date_played == 1 && Month_played == 7) // 06-30 -> 07-01 || (Date_played == 30 && Month_played == 9) || (Date_played == 1 && Month_played == 10) // 09-30 -> 10-01 || (Date_played == 30 && Month_played == 11) || (Date_played == 1 && Month_played == 12) // 11-30 -> 12-01 || (Date_played == 1 && Month_played == 3) // X -> 03-01 if( ((Date_played == 30 && Hours_played == 23) || (Date_played == 1 && Hours_played < 3)) && special_Transition_date ) { if(Hours_played == 23 || (Hours_played == 0 && Minutes_played <=40)) { const ratio_3a = 0.25 // Ratio empirically adjusted to match const ratio_3b = 0.195 // Ratio empirically adjusted to match angle_Month -= Date_played == 1? Minutes_played*ratio_3b: Minutes_played*ratio_3a; const ratio_4a = (30/100)*(36/5) // The month disc rotates by 30° in 100 minutes / the gear ratio is (36/5) const ratio_4b = ratio_4a*ratio_3b/ratio_3a const angle_five_tooth_30th_11PM = 11.988 // Angle of the five-tooth gear on 30th at @ 23:00 const angle_five_tooth_1st_0AM = 2 // Angle of the five-tooth gear on 1st at @ 00:00 angle_five_tooth = Date_played == 1? angle_five_tooth_1st_0AM : angle_five_tooth_30th_11PM; angle_five_tooth += Date_played == 1? Minutes_played*ratio_4b : Minutes_played*ratio_4a; const ratio_5a = 0.19 // Ratio empirically adjusted to match const ratio_5b = 0.145 // Ratio empirically adjusted to match angle_Date += Date_played == 1? Minutes_played*ratio_5b : Minutes_played*ratio_5a; } else { angle_Date = (Date_played-1)*(360/31); angle_five_tooth = 0; angle_Month = -(2*Month_played-14)*(360/24); } // Once all the calculations have been completed, we rotate the month disc, the date disc, and the five tooth gear Month_disc.attr("transform", `rotate(${angle_Month}, ${cx_Center}, ${cy_Center})`); five_tooth.attr("transform", `rotate(${angle_five_tooth}, ${cx_5_tooth}, ${cy_5_tooth})`); Date_disc.attr("transform", `rotate(${angle_Date}, ${cx_Center}, ${cy_Center})`); } // Animation of the AM-PM and day shift // Smooth transtion 11:40 -> 12:20 and 23:40 - > 0:20 var AM_PM_shift = 0; if((Hours_played == 11 || Hours_played == 23) && Minutes_played >= 40) { AM_PM_shift = ((Minutes_played-40)/20)*(360/14)/2; } else if ((Hours_played == 12 || Hours_played == 0) && Minutes_played <= 20) { AM_PM_shift = (-1+Minutes_played/20)*(360/14)/2 ; } AM_PM_Day_disc.attr("transform", `rotate(${AM_PM_shift}, ${cx_Center}, ${cy_Center})`); Mask_circ_Day.attr("transform", `rotate(${-angle_Day-AM_PM_shift}, ${cx_Center}, ${cy_Center})`) // Windowed calendar: the mask mask be rotated back Mask_rect_Day.attr("transform", `rotate(${-angle_Day}, ${cx_Center}, ${cy_Center})`) Mask_rect_Month.attr("transform", `rotate(${-angle_Month}, ${cx_Center}, ${cy_Center})`); Mask_circ_Month.attr("transform", `rotate(${-angle_Month}, ${cx_Center}, ${cy_Center})`); Mask_rect_Date.attr("transform", `rotate(${-angle_Date}, ${cx_Center}, ${cy_Center})`); return container.node(); // Same node every time — only its attributes changed above }33:T41e,viewof display_inspect = { const el = htl.html`

Variables & Functions

⇣ Check to inspect the notebook script

`; const checkbox = el.querySelector("input"); const spacer = el.querySelector("div"); function update() { const show = checkbox.checked; document.querySelectorAll(".observablehq--inspect").forEach(node => { if (el.contains(node)) return; node.style.display = show ? "" : "none"; }); spacer.style.height = show ? "0" : "20vh"; } checkbox.addEventListener("change", update); const observer = new MutationObserver(update); observer.observe(document.body, { childList: true, subtree: true }); update(); invalidation.then(() => observer.disconnect()); return el; }34:Td2d,// Parses the SVG file and builds the DOM ONCE. // Only re-runs when the file, size, or display options change — never on animation ticks. MIH_svg = { const drawing = await MIH_watch.text(); const document = (new DOMParser).parseFromString(drawing, "image/svg+xml"); const svg = d3.select(document.documentElement).remove(); // Resize the SVG svg.attr("width", SVG_width); svg.attr("height", SVG_height); // IDs of the various groups used throughout this script const Hour_hand = svg.select("#Hours"); const Minute_hand = svg.select("#Minutes"); const Dial_with_indices = svg.select("#Dial_with_indices"); const Mask_rect_Day = svg.select("#Mask_rect_Day_1_"); const Mask_circ_Day = svg.select("#Mask_circ_Day_1_"); const Mask_rect_Month = svg.select("#Mask_rect_Month_1_"); const Mask_circ_Month = svg.select("#Mask_circ_Month_1_"); const Mask_rect_Date = svg.select("#Mask_rect_Date_1_"); const Day_disc = svg.select("#_x38___x28_day_disc_x29_"); const AM_PM_Day_disc = svg.select("#day_disk_with_AM_PM"); const Month_disc = svg.select("#_x34___x28_month_disk_x29_"); const Date_disc = svg.select("#_x31___x28_date_1_to_31_x29_"); const single_tooth = svg.select("#_x36___x28_single-tooth_wheel_x29_"); const five_tooth = svg.select("#_x33___x28_5-tooth_x5F_gear_x29_"); const special_gear = svg.select("#_x35___x28_special_x5F_gear_x29_"); // Rotation centers const calibre_center = svg.select("#circle_hour"); const center_5_tooth_gear = svg.select("#circle_5-tooth_gear"); const center_special_gear = svg.select("#center_special_gear"); // Hide the rotation-guide layer permanently svg.select("#Rotations").style("display", "none"); // Static display options — only touched when `options` changes if (!options.show_watch_dial) { Dial_with_indices.style("display", "none"); Minute_hand.style("display", options.show_minute_hand ? null : "none"); } else { Dial_with_indices.style("display", "visible"); Minute_hand.style("display", null); } if (!options.windowed_calendar) { Mask_rect_Day.style("display", "none"); Mask_rect_Month.style("display", "none"); Mask_rect_Date.style("display", "none"); } else { Mask_rect_Day.style("display", null); Mask_rect_Month.style("display", null); Mask_rect_Date.style("display", null); } // Fixed rotation-center coordinates (parsed once as numbers) const cx_Center = parseFloat(calibre_center.attr("cx")); const cy_Center = parseFloat(calibre_center.attr("cy")); const cx_5_tooth = parseFloat(center_5_tooth_gear.attr("cx")); const cy_5_tooth = parseFloat(center_5_tooth_gear.attr("cy")); const cx_special_gear = parseFloat(center_special_gear.attr("cx")); const cy_special_gear = parseFloat(center_special_gear.attr("cy")); // Build the container once and attach the SVG to it const container = d3.create("div") .style("border", "2px solid black") .style("display", "inline-block") .style("padding", "0px"); container.node().appendChild(svg.node()); return { container, svg, Hour_hand, Minute_hand, Day_disc, AM_PM_Day_disc, Month_disc, Date_disc, single_tooth, five_tooth, special_gear, Mask_rect_Day, Mask_circ_Day, Mask_rect_Month, Mask_circ_Month, Mask_rect_Date, cx_Center, cy_Center, cx_5_tooth, cy_5_tooth, cx_special_gear, cy_special_gear }; }35:Tdc9,// Adapted from [https://observablehq.com/@mbostock/scrubber] // import {Scrubber} from "@mbostock/scrubber" function Scrubber(values, { format = value => value, initial = 0, delay = null, autoplay = true, loop = true, loopDelay = null, alternate = false } = {}) { values = Array.from(values); const form = html``; let frame = null; let timer = null; let interval = null; let direction = 1; let resetTimeout = null; function start() { form.b.textContent = "Pause"; if (delay === null) frame = requestAnimationFrame(tick); else interval = setInterval(tick, delay); clearResetTimeout(); // Clear the reset timeout when the scrubber is running } function stop() { form.b.textContent = "Play"; if (frame !== null) cancelAnimationFrame(frame), frame = null; if (timer !== null) clearTimeout(timer), timer = null; if (interval !== null) clearInterval(interval), interval = null; setResetTimeout(); // Set the reset timeout when the scrubber stops } function running() { return frame !== null || timer !== null || interval !== null; } function tick() { if (form.i.valueAsNumber === (direction > 0 ? values.length - 1 : direction < 0 ? 0 : NaN)) { if (!loop) return stop(); if (alternate) direction = -direction; if (loopDelay !== null) { if (frame !== null) cancelAnimationFrame(frame), frame = null; if (interval !== null) clearInterval(interval), interval = null; timer = setTimeout(() => (step(), start()), loopDelay); return; } } if (delay === null) frame = requestAnimationFrame(tick); step(); } function step() { form.i.valueAsNumber = (form.i.valueAsNumber + direction + values.length) % values.length; form.i.dispatchEvent(new CustomEvent("input", {bubbles: true})); } // Sets a timeout to reset the scrubber to its initial value after 10 seconds of inactivity. function setResetTimeout() { clearResetTimeout(); // Clear any existing reset timeout resetTimeout = setTimeout(() => { form.i.valueAsNumber = 0; // Reset to the initial value form.i.dispatchEvent(new CustomEvent("input", {bubbles: true})); }, 10000); // 10 seconds } function clearResetTimeout() { if (resetTimeout !== null) clearTimeout(resetTimeout); } form.i.oninput = event => { if (event && event.isTrusted && running()) stop(); form.value = values[form.i.valueAsNumber]; form.o.value = format(form.value, direction); // Pass direction to format function clearResetTimeout(); // Clear the reset timeout on user interaction }; form.b.onclick = () => { if (running()) return stop(); direction = alternate && form.i.valueAsNumber === values.length - 1 ? -1 : 1; form.i.valueAsNumber = (form.i.valueAsNumber + direction) % values.length; form.i.dispatchEvent(new CustomEvent("input", {bubbles: true})); start(); }; form.i.oninput(); if (autoplay) start(); else stop(); Inputs.disposal(form).then(stop); return form; } 36:[{"id":"f200bf943536319ade108c8585be601faf6a947c2d79b585c8521984c73b18550db6a0979d791efee1c2de353a0142f58bb1bce2c36748975dc4b8f92338c721","href":"https://static.observableusercontent.com/files/f200bf943536319ade108c8585be601faf6a947c2d79b585c8521984c73b18550db6a0979d791efee1c2de353a0142f58bb1bce2c36748975dc4b8f92338c721","name":"MIH_Watch_annual_calendar.ai","type":"application/pdf","lastModified":1725295709384.55,"size":7333548},{"id":"86da011bd9f4570cc05b8e77913fb9096bd6e55dfaa2f0af3de785509a3c1491127ad4d5940081ce6b9350b9ca770e90d03f0b4cc4d753afdb5153dcdde7f1ee","href":"https://static.observableusercontent.com/files/86da011bd9f4570cc05b8e77913fb9096bd6e55dfaa2f0af3de785509a3c1491127ad4d5940081ce6b9350b9ca770e90d03f0b4cc4d753afdb5153dcdde7f1ee","name":"MIH_Watch_annual_calendar.svg","type":"image/svg+xml","lastModified":1725295728154.785,"size":262753}] 2f:{"id":"cbf6a3f2d736888a","slug":"mih-watch-annual-calendar","title":"🗓️ Annual Calendar: The MIH Watch","thumbnail":"1d6a465754d40e15617aa576e9ffd9715abb0d8c18d88d676186f289c7253d8b","access_level":"public","create_time":"$D2024-08-31T07:58:13.593Z","update_time":"$D2026-09-05T12:48:08.004Z","view_time":null,"first_public_time":"$D2024-09-02T18:11:31.253Z","fork":{"id":"43065dfcfbb05d00","slug":"pallweber-mechanism","title":"Pallweber mechanism","owner":{"id":"dd67891d326bcfb1","login":"christophe-yamahata","name":"Christophe Yamahata"}},"stars":1,"starred":false,"owner":{"type":"team","id":"dd67891d326bcfb1","login":"christophe-yamahata","name":"Christophe Yamahata","avatar_url":"https://avatars-next.observableusercontent.com/8256ac716aa8395babba412b2835913d186874fa4190df57a4a28f2e60129876","tier":"starter_2024"},"version":4106,"publish_version":4106,"role":null,"authored":false,"authors":[{"type":"individual","id":"06f083eba60f5a76","login":"christophe-yamahata","name":"Christophe Yamahata","avatar_url":"https://avatars-next.observableusercontent.com/8256ac716aa8395babba412b2835913d186874fa4190df57a4a28f2e60129876","tier":null}],"members":[{"type":"individual","id":"06f083eba60f5a76","login":"christophe-yamahata","name":"Christophe Yamahata","avatar_url":"https://avatars-next.observableusercontent.com/8256ac716aa8395babba412b2835913d186874fa4190df57a4a28f2e60129876","tier":null,"role":"editor"},{"type":"team","id":"dd67891d326bcfb1","login":"christophe-yamahata","name":"Christophe Yamahata","avatar_url":"https://avatars-next.observableusercontent.com/8256ac716aa8395babba412b2835913d186874fa4190df57a4a28f2e60129876","tier":"starter_2024","role":"viewer"}],"comments":[],"custom_thumbnail":true,"trashed":false,"subscribed":null,"forks":0,"collection":{"id":"53ef52938384acb8","slug":"horology","title":"Horology","owner":{"id":"dd67891d326bcfb1","login":"christophe-yamahata","name":"Christophe Yamahata"}},"type":"notebook","body":{"title":"🗓️ Annual Calendar: The MIH Watch","cells":[{"id":0,"value":"# 🗓️ Annual Calendar: The MIH Watch","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":2507,"value":"$31","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":2516,"value":"animation = md`\n---\n### Animated illustration\n\nWhen you load this notebook, the MIH Watch automatically synchronizes with your local time and date. You can interact with the model by adjusting the time and changing the date.\n\nClick “Play” to launch an animation that demonstrates the date change, starting at 10 PM on the selected date. For instance, set the date to April 30^th, and you will observe the mechanism smoothly transition to the next day, skipping the 31^st and shifting the calendar disk by two positions. If you look closely at the teeth engaged for shorter months, you will notice that one of these teeth is also used for February, engaging specifically on the 30^th.\n

\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":3697,"value":"viewof options = columns({\n show_watch_dial : Inputs.toggle({label: htl.html`Show the watch dial
(mechanism hidden)`, value: false}), \n show_minute_hand : Inputs.toggle({label: htl.html`Always display the minute hand
`, value: true}),\n windowed_calendar : Inputs.toggle({label: htl.html`Windowed calendar
(cropped discs)`, value: false}),\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":599,"value":"viewof Hours = Inputs.range([0, 23], {value: Full_Date_selected == Full_Date_now ? Hours_24_now: 22, step: 1, label: htl.html`Hours
(static mode)`})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":603,"value":"// Input formated to always show two digits\nviewof Minutes = Inputs.range([0, 59], {value: Full_Date_selected == Full_Date_now ? Minutes_now: 30, step: 1, format: x => x.toString().padStart(2, '0'), label: htl.html`Minutes
(static mode)`})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2043,"value":"viewof date = Inputs.date({label: htl.html`Date
(initial value)`, value: Full_Date_now, required: true })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":3225,"value":"viewof date_change = Scrubber(time_sweep, {\n autoplay: false,\n loop: false,\n initial: time_sweep[0],\n format: f => {\n if(f == time_sweep[0]) {\n return 'Click “Play” to simulate the date change. The animation will begin with the time set to 22:30.'\n } else {\n return `${f < time_sweep[time_sweep.length-1] ? 'Changing date ...': 'Added +1 day. Click “Play” to repeat this animation.'}`;\n }\n },\n delay: 20\n});","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":3271,"value":"
The MIH annual calendar watch displays ➤ \n= 30 && date_change <= 120 && Full_Date_next_selected.slice(-5) == '03-01'? 'red': 'black'}; color: white; display: inline-block; min-width: 220px; text-align: right; padding: 6px;\"> ${Hours_played.toString().padStart(2, '\\u2002')}:${Minutes_played.toString().padStart(2, '0')} [${'\\u2009\\u2009\\u2009'}${Hours_played <12? '▄' : '█'}${'\\u2002'}${dayShort[Day_played-1]} | ${monthShort[Month_played-1]} | ${Date_played >= 10 ? Date_played : '\\u2009\\u2009'+Date_played+'\\u2009'}${'\\u2009\\u2009'}] \n\n

\n${Full_Date_next_selected.slice(-5) == \"03-01\" ? htl.html` ⚠ There is no automatic date change between February ${Date_selected} and March 1.`: htl.html``}\n

\n","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined"},{"id":363,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1449,"value":"viewof SVG_height = Inputs.range([400, 850], {value: 750, step: 50, label: htl.html`Illustration height
(size in pixels)`})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":3851,"value":"---\n### Useful links\n\n* Television interview with Ludwig Oechslin: Canal Alpha, November 2015 [5-minute video, in French]\n* MIH Watch on Embassy's website (official reseller) \n* Zenith Captain Winsor Annual Calendar: Launched in 2014, this watch model is the result of a fruitful collaboration between the manufacture Zenith and the MIH.\n* Original Adobe Illustator file (CS 6) and SVG file used to create this animation (files available in the *data pane* ᥫ).","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":300,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1487,"value":"MIH_watch = FileAttachment(\"MIH_Watch_annual_calendar.svg\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":3911,"value":"MIH_watch_adobe_illustrator = FileAttachment(\"MIH_Watch_annual_calendar.ai\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":3914,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1457,"value":"SVG_width = Math.max(SVG_height, 600)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":3694,"value":"// https://observablehq.com/@bcardiff/observable-columns\ncolumns = (args) => {\n const form = html``\n form.value = {}\n\n let cols = 0\n for (const key in args) {\n form.appendChild(args[key])\n cols++\n }\n\n form.style = `display: grid; grid-template-columns: repeat(${cols}, auto); grid-auto-flow: row;`\n \n form.oninput = () => {\n form.value = Object.keys(args).reduce((result, key) => {\n result[key] = args[key].value\n return result\n }, Array.isArray(args) ? [] : {})\n }\n form.oninput()\n \n return form\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":3228,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2105,"value":"function formatDate(date) {\n return [\n (date.getFullYear()).toString().padStart(4, \"0\"),\n (date.getMonth() + 1).toString().padStart(2, \"0\"),\n (date.getDate()).toString().padStart(2, \"0\")\n ].join(\"-\")\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":3231,"value":"time_sweep = Array.from({length: 301}, (_, i) => i)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":3449,"value":"dayShort = ['MO', 'TU', 'WE', 'TH', 'FR', 'SA', 'SU']","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":3455,"value":"monthShort = ['JAN', 'FEB', 'MAR', 'APR', 'MAY', 'JUN', 'JUL', 'AUG', 'SEP', 'OCT', 'NOV', 'DEC']","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2021,"value":"// Refresh time for hours and minutes\nwait_duration = Full_Date_selected == Full_Date_now ? 60: 300; // Duration in seconds","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":632,"value":"// Extract the current hours\nHours_24_now = {\n while (true) {\n yield new Date().getHours(); // Yield the current Hours (0-23)\n await new Promise(update => setTimeout(update, wait_duration*1000)); // Wait \"wait_duration\" seconds\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":637,"value":"Minutes_now = {\n while (true) {\n yield new Date().getMinutes(); // Yield the current Minutes (0-59)\n await new Promise(update => setTimeout(update, wait_duration*1000)); // Wait \"wait_duration\" seconds\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":3261,"value":"Hours_played = date_change == 0? Hours : (22 + Math.round(date_change/60)) %24","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2237,"value":"Minutes_selected = Minutes","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":3265,"value":"Minutes_played = date_change == 0? Minutes : (30 + date_change) %60","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2060,"value":"// Extract the day for the selected date\nDay_selected = new Date(date).getDay() === 0 ? 7 : new Date(date).getDay(); // Monday = 1, Sunday = 7","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":3357,"value":"Day_played = {\n const next_date = new Date(date);\n if(date_change != 0 && Hours_played<=3) {\n next_date.setDate(next_date.getDate() +1); // Add one day to the date\n }\n return next_date.getDay() === 0 ? 7 : next_date.getDay()\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2103,"value":"// Extract the selected month\nMonth_selected = new Date(date).getMonth()+1;","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":3336,"value":"Month_played = {\n const next_date = new Date(date);\n if(date_change != 0 && Hours_played<=3) {\n next_date.setDate(next_date.getDate() +1); // Add one day to the date\n }\n return next_date.getMonth()+1;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2031,"value":"// Extract the selected date\nDate_selected = new Date(date).getDate();","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":3326,"value":"Date_played = {\n const next_date = new Date(date);\n if(date_change != 0 && Hours_played<=3) {\n next_date.setDate(next_date.getDate() + 1); // Add one day to the date\n }\n return next_date.getDate();\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2051,"value":"// Current date, ISO 8601 format\nFull_Date_now = formatDate(new Date)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2134,"value":"Full_Date_selected = formatDate(date)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":3295,"value":"Full_Date_next_selected = {\n const date = new Date(Full_Date_selected);\n date.setDate(date.getDate() + 1); // Add one day to the date\n return date.toISOString().split('T')[0];\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W36","stdlib":"2","titling":"auto"}} 30:"$2f:body"