31:Tb8a,// This SVG file was created with Adobe Illustrator Pallweber_mechanism = { const drawing = await pallweber_SVG.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); // Hide part of the text if(!show_watch_dial) { svg.select("#Mask").style("display", "none"); } // Rotate the "Minutes units" disc var Min_units_center = svg.select("#Min"); // Center of rotation var cx_Min_units = parseFloat(Min_units_center.attr("cx")); var cy_Min_units = parseFloat(Min_units_center.attr("cy")); var angle_Min_units = (Minutes_units-9 + jump)*(360/10) // Rotation angle. Initial position: units digit "9" var Min_units_disc = svg.select("#Disc_Minutes_units"); Min_units_disc.attr("transform", `rotate(${angle_Min_units}, ${cx_Min_units}, ${cy_Min_units})`); // Rotate the "Minutes tens" disc var Min_X10_center = svg.select("#MinX10"); // Center of rotation var cx_Min_X10 = parseFloat(Min_X10_center.attr("cx")); var cy_Min_X10 = parseFloat(Min_X10_center.attr("cy")); var angle_Min_X10 = -(Minutes_tens-5)*(360/6); // Rotation angle. Initial position: tens digit "5" Minutes_units==9? angle_Min_X10 -= jump*(360/6):null; // This disc jumps only if Minutes_units==9 var Min_X10_disc = svg.select("#Disc_MinutesX10"); Min_X10_disc.attr("transform", `rotate(${angle_Min_X10}, ${cx_Min_X10}, ${cy_Min_X10})`); // Rotate the Malte wheel var Malte_center = svg.select("#Malte_x5F_2_x5F_wheel") // Center of rotation var cx_Malte = parseFloat(Malte_center.attr("cx")); var cy_Malte = parseFloat(Malte_center.attr("cy")); var angle_Malte = Minutes==59? jump*(360/5): 0; // This disc rotates only if Minutes==59 var Malte_disc = svg.select("#Malte_2"); Malte_disc.attr("transform", `rotate(${angle_Malte}, ${cx_Malte}, ${cy_Malte})`); // Rotate the "Hours" disc var Hours_center = svg.select("#H"); // Center of rotation var cx_Hours = parseFloat(Hours_center.attr("cx")); var cy_Hours = parseFloat(Hours_center.attr("cy")); var angle_Hours = (Hours-11)*(360/12) // Rotation angle. Initial position: "11" Minutes==59? angle_Hours += jump*(360/12):null; // This disc jumps only if Minutes==59 var Hours_disc = svg.select("#Disc_Hours"); Hours_disc.attr("transform", `rotate(${angle_Hours}, ${cx_Hours}, ${cy_Hours})`); // Create a container for the SVG and add a border const container = d3.create("div") .style("border", "2px solid black") .style("display", "inline-block") .style("padding", "0px"); container.node().appendChild(svg.node()); // Append SVG to the container return container.node(); // Return the container node }32:T850,digraph = dot`digraph { node [shape=rect]; rankdir=TB; CAD [label=<

CAD software

Prepare the model (2D or 3D) with

sub-assemblies organized in groups.

>]; SVG [label=<

Adobe Illustrator (e.g., CS 6)
Layered document:
•	Organize layers hierarchy
•	Use groups and sub-groups
•	Label parent groups with suitable
	IDs for further manipulation

>]; JavaScript [label=<

Observable notebook

Interactive 2D model:

Extensive use of JavaScript

to animate the SVG file.

Click on this cell for an
example notebook
with detailed explanation.

>, URL="https://observablehq.com/@christophe-yamahata/interactive-svg-manipulation" target="blank"]; CAD -> SVG [label=< Export format: DXF or DWG >]; // Subgraph to ensure horizontal layout subgraph cluster_horizontal { rankdir=LR; edge [constraint=false, splines=polyline]; SVG -> JavaScript [label=< Export format: SVG >]; } { rank=same; SVG; JavaScript; } } `33:T5b5,### Useful links and downloads * “Time Piece,” J. Pallweber, Patent Publication No. US312754A (Patented Feb. 24, 1885) * [The Pallweber: The original “Digital” Watch](https://www.iwc.com/it/en/articles/journal/the-original-pallweber.html), by Michael Friedberg, *IWC Journal* [Archived on [archive.org](https://web.archive.org/web/20240829083339/https://www.iwc.com/it/en/articles/journal/the-original-pallweber.html) – URL last visited August 29, 2024] * [Pallweber mechanism: How it works](https://youtu.be/PMklDkBNNXo) – Short YouTube video showcasing the complete mechanism * Sketchfab 3D model of the [jumping minute mechanism](https://sketchfab.com/3d-models/detail-of-a-watch-mechanism-7279febd4eff41d087d0e88ba5e4645c) * GrabCAD link to the downladable CAD model of the complete [Pallweber mechanism](https://grabcad.com/library/pallweber-mechanism-1) * Original Adobe Illustrator file used to create the SVG (files available in the *data pane* ᥫ) * [Article published on LinkedIn](https://www.linkedin.com/pulse/pallweber-mechanism-christophe-yamahata-ovnze/), C. Yamahata, August 29, 2024 – Detailed guide on converting an illustration from Adobe Illustrator into an interactive animation34:Tddd,// Adapted from [https://observablehq.com/@mbostock/scrubber] // import {Scrubber} from "@mbostock/scrubber" function Scrubber(values, { format = (value, direction) => value, // Include direction as a parameter 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(() => { direction = -1; // Reverse direction start(); // Start animation back to the initial value }, 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; } 35:[{"id":"0b90053a7ea4cbb52cd00b25bef9d1da4d23d2f2060917b387e24e7ff1ee14da8c1d2264f159e2083d551d392e819eae79380ec748c46a02eeb535059efa1ca0","href":"https://static.observableusercontent.com/files/0b90053a7ea4cbb52cd00b25bef9d1da4d23d2f2060917b387e24e7ff1ee14da8c1d2264f159e2083d551d392e819eae79380ec748c46a02eeb535059efa1ca0","name":"US312754A.pdf","type":"application/pdf","lastModified":1724919887265.518,"size":248269},{"id":"d4c4c380c7745bfc3baa97dee82675d3ba26be37076be68a067348bae9078dedc2dd3f8c8fb38f31a49097c77eb81dfd2569b38c53a8bfb5f156f4cb21b7bb22","href":"https://static.observableusercontent.com/files/d4c4c380c7745bfc3baa97dee82675d3ba26be37076be68a067348bae9078dedc2dd3f8c8fb38f31a49097c77eb81dfd2569b38c53a8bfb5f156f4cb21b7bb22","name":"graphviz.js","type":"application/javascript","lastModified":1724923470159.464,"size":659747},{"id":"c248106a3671d27beb31309e25ffd4a2350743c89646d2b7f4a4211872caaf36ddf21523459dde6590d732b766d720f75c00f5ffdf8f9da24159d9e008a83183","href":"https://static.observableusercontent.com/files/c248106a3671d27beb31309e25ffd4a2350743c89646d2b7f4a4211872caaf36ddf21523459dde6590d732b766d720f75c00f5ffdf8f9da24159d9e008a83183","name":"Pallweber_mechanism.svg","type":"image/svg+xml","lastModified":1724852875981.574,"size":341733},{"id":"aa56322d7f7c73e8a7b9febc768f48a7533c15f3e75dd87e64185ea5dc4aa5b73f6104416a8f57a2185958f69ad4912ede7709dc5888964c6aea9d65b0c2ffba","href":"https://static.observableusercontent.com/files/aa56322d7f7c73e8a7b9febc768f48a7533c15f3e75dd87e64185ea5dc4aa5b73f6104416a8f57a2185958f69ad4912ede7709dc5888964c6aea9d65b0c2ffba","name":"Pallweber_mechanism.ai","type":"application/pdf","lastModified":1724852902852.719,"size":2908541}] 2f:{"title":"Pallweber mechanism","cells":[{"id":0,"value":"# Pallweber mechanism","pinned":false,"hidden":false,"mode":"md"},{"id":303,"value":"In 2018, to celebrate the 150^th anniversary of the watch company, IWC Schaffhausen unveiled the “Tribute to Pallweber Edition,” a homage to the innovative work of watchmaker Josef Pallweber (1858-1921). \n\nPallweber pioneered a revolutionary mechanism for time display, utilizing rotating discs in place of traditional hands. \nThis original approach to timekeeping is illustrated in an **interactive animation**, which showcases the inner workings of this remarkable watch.\n","pinned":false,"hidden":false,"mode":"md"},{"id":1402,"value":"animation = md`\n### Animated illustration\n\nUpon loading this notebook, the watch aligns with your local time (*i.e.*, ${Hours_12_local}H${Minutes_local.toString().padStart(2, '0')}).\nYou can interact with this model by adjusting the time using the scrollable inputs, then launching the animation to see the mechanism in action. \n\nFor example, set the minutes to **59** and click “Play.” You will see the watch advance by one minute, smoothly transitioning to the next hour. Also, notice that the shift is logarithmic to mimic the behavior of the jumping minute mechanism.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":599,"value":"viewof Hours = Inputs.range([0, 11], {value: Hours_12_local %12, step: 1, format: x => (x === 0 ? 12 : x), label: htl.html`Hours
(initial value)`})","pinned":false,"hidden":false,"mode":"ojs"},{"id":603,"value":"// Input formated to always show two digits\nviewof Minutes = Inputs.range([0, 59], {value: Minutes_local, step: 1, format: x => x.toString().padStart(2, '0'), label: htl.html`Minutes
(initial value)`})","pinned":false,"hidden":false,"mode":"ojs"},{"id":922,"value":"viewof jump = Scrubber(jump_angles, {\n autoplay: false, \n loop: false, \n initial: jump_angles[0], \n format: (f, direction) => {\n if(f == jump_angles[0]) {\n return 'Click “Play” to simulate the watch advancing by one minute.'\n } else if (direction === -1) {\n return 'Reversing to the initial value.'; // Message displayed when going backwards\n } else {\n return `${f < 0.99 ? 'Adding +1 minute ...': 'Added +1 minute. Click “Play” to repeat this animation.'}`;\n }\n },\n delay: 30\n});","pinned":false,"hidden":false,"mode":"ojs"},{"id":1397,"value":"➤ The time displayed is ${Math.round(jump) == 1? `now`: ``} **${displayed_time}**${Math.round(jump) == 1? ` (+1 minute added to the input time).`:`.`}","pinned":false,"hidden":false,"mode":"md"},{"id":1364,"value":"progress = {\n jump;\n const width = SVG_width;\n const height = 12;\n const context = DOM.context2d(width, height);\n context.canvas.style.border = \"solid 1px black\";\n\n // Clear the canvas before drawing\n context.clearRect(0, 0, width, height);\n\n // Set the fill color to green\n context.fillStyle = Math.round(jump)<1? \"#CEEAD7\" : \"#A1D6B6\";\n\n // Draw the filled rectangle representing progress\n context.fillRect(0, 0, jump * width, height);\n\n // Return the canvas element\n yield context.canvas;\n}\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":363,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":483,"value":"viewof show_watch_dial = Inputs.toggle({label: htl.html`Show the watch dial
(mechanism hidden)`, value: false})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1449,"value":"viewof SVG_height = Inputs.range([400, 850], {value: 650, step: 50, label: htl.html`Illustration height
(size in pixels)`})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1638,"value":"---\n### About this animation\n\nThis animation was created starting from a drawing prepared in Adobe Illustrator CS6. The illustration was then imported as an SVG file into this notebook, to be dynamically updated and manipulated using JavaScript.\n\nFor a detailed explanation, check out the notebook: Interactive SVG manipulation from a file created with Adobe Illustrator.","pinned":false,"hidden":false,"mode":"md"},{"id":1640,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":1443,"value":"$33","pinned":false,"hidden":false,"mode":"md"},{"id":300,"value":"---\n## Appendix","pinned":false,"hidden":false,"mode":"md"},{"id":1697,"value":"#### SVG manipulation","pinned":false,"hidden":false,"mode":"md"},{"id":1487,"value":"pallweber_SVG = FileAttachment(\"Pallweber_mechanism.svg\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":1480,"value":"pallweber_adobe_illustrator = FileAttachment(\"Pallweber_mechanism.ai\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":1600,"value":"US312754A = FileAttachment(\"US312754A.pdf\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":1457,"value":"SVG_width = Math.max(SVG_height, 600)","pinned":false,"hidden":false,"mode":"ojs"},{"id":632,"value":"// Extract the current hours\nHours_12_local = {\n while (true) {\n var wait_duration = 300; // 5 minutes\n yield new Date().getHours() % 12; // Yield the current Hours (0-23) -> Convert 0 (midnight) and 12 (noon) to 0; \n await new Promise(update => setTimeout(update, wait_duration*1000)); // Wait \"wait_duration\" seconds\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":637,"value":"Minutes_local = {\n while (true) {\n var wait_duration = 300; // 5 minutes\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"},{"id":606,"value":"Minutes_tens = Math.floor(Minutes/10)","pinned":false,"hidden":false,"mode":"ojs"},{"id":610,"value":"Minutes_units = Minutes - 10*Minutes_tens","pinned":false,"hidden":false,"mode":"ojs"},{"id":1279,"value":"displayed_time = {\n var update_minutes = (Minutes + Math.round(jump)) % 60;\n var update_hours = Minutes==59 && Math.round(jump) == 1? (Hours+1) %12 || 12: Hours %12 || 12;\n return update_hours+\"H\" + update_minutes.toString().padStart(2, '0'); \n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":936,"value":"jump_angles = Array.from({length: 100}, (_, i) => {\n const startValue = 0.0001;\n const endValue = 1;\n const t = i / 99; // Normalized value between 0 and 1\n return startValue * Math.pow(endValue / startValue, t);\n});","pinned":false,"hidden":false,"mode":"ojs"},{"id":934,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"id":1694,"value":"#### GraphViz","pinned":false,"hidden":false,"mode":"md"},{"id":1760,"value":"graphviz_width = 600","pinned":false,"hidden":false,"mode":"ojs"},{"id":1668,"value":"graphviz = GraphvizModule.Graphviz.load();","pinned":false,"hidden":false,"mode":"ojs"},{"id":1670,"value":"// GraphvizModule = import ('@hpcc-js/wasm/dist/graphviz');\nGraphvizModule = import(await FileAttachment(\"graphviz.js\").url())","pinned":false,"hidden":false,"mode":"ojs"},{"id":1681,"value":"dot = layout(\"dot\");","pinned":false,"hidden":false,"mode":"ojs"},{"id":1683,"value":"layout = {\n let _id = 0;\n return function(layout) {\n return function * (parts, ...args) {\n yield html`

...loading...

`;\n \n const str = parts.map((s, i) => s + (i < args.length ? args[i] : \"\")).join(\"\");\n const svg = graphviz.layout(str, \"svg\", layout);\n\n const id = ++_id;\n yield html`\\\n

${svg}

\n\n

`;\n setTimeout((id) => { \n var svg = d3.select(`#id_${id}`).select(\"svg\")\n .attr(\"width\", `${graphviz_width}px`)\n ;\n var g = svg.select(\"g\");\n var [x, y, _width, height] = svg.attr(\"viewBox\").split(\" \");\n var zoom = d3.zoom();\n\n }, 1000, id);\n }\n }\n}","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W35","stdlib":"1","titling":"auto"}