CountClock Protective Template Design

In January 2018 here at Instructables the CountClock was published, a clock targeting your children by offering various learning steps to become familiar and intuitively understand telling the time. In the CountClock design, the hour scale and minute scale are visually separated (no dual scales) and only discrete positions are shown, so unlike the analogue clock there are no hands that point between two positions. The CountClock is programmable from easy (count the hours) to a pro level (sharp to the second). To find out all detail check out the CountClock Meta Instructable which introduces the concepts, the prototypes and the final product.

In the design of the Countclock a protective template disc is foreseen. It is a round plastic slab, meant to separate the electronic parts from the wooden CountClock housing. This Instructable opens up the full design and maker files of the Protective Template and at the same time gives an introduction to a powerful text-based image format: Scalable Vector Graphics (SVG).

In this Instructable the following subjects are addressed successively:

1. The purpose of the protective template (Step 1);
2. The design files (SVG, EPS and DXF) of the protective template (Step 2), and
3. The SVG source code for CountClock Hours Only (Step 3);
4. The SVG source code for CountClock Hours and Minute (Step 4);
5. The lasercutting manufacturing (Step 5).

The CountClock is on Twitter, FB, and Etsy.

The CountClock Protective Template is meant to separate the electronic parts from the wooden CountClock housing. Five reasons behind the Protective Template:

• Thermal safety: under normal operating conditions the LEDs will get a little warm, depending on the power fed and their efficiency. In the case of an electrical fault or short-circuit temperatures may increase considerably and so the protective template is an additional factor that may serve as a firebreak (note however that this has not been certified and tested). The protective plastic template acts as a thermal insulation between the electronics and the wood. For this reason, the template should be made from fireproof material and preferably have good thermal conductivity properties to absorb and give off heat from the LEDs. Ideal would be a ceramic slab, but plastic is a good second best option.
• Electrical safety: plastic does not conduct electricity and therefore it may contain faults such as loose cables.
• Light effect: in order to prevent minor beams of light trickling through from one minute indicator to another the holes in the template channel the light. For this reason, the template should be made from opaque material. To benefit from additional reflection a white plastic is preferred, provided that it is not translucent.
• Constructional functionality: in the CountClock design the light is channeled from the RGB SMB LEDs to the Countclock's clockface using lightpipes (what is actually used are conventional epoxy lens LEDs that are not connected electronically, see more info the separate Instructable on the CountClock Hours and Minutes). In order to fix the lightpipes and not to load pressure on the RGB LED ring the protective template serves as a touch plate, thus relieving the delicate SMB LEDs from physical pressure. The holes in the protective template have a diameter of 4 mm, just like the SMB LEDs. Because the conventional LEDs used have a bottom diameter of 6 mm they cannot pass through the template. The thickness of the slab should be enough to ensure that the lightpipe LED anode and cathode, which have been cut off, cannot touch the SMB LEDs in the ring.
• Screw hole mould: finally, a more practical purpose of the template is that it acts as a mould for the boreholes for fixing the LED rings and the Printed Circuit Boards (PCB): the controller (the mould presented here has boreholes for the Adafruit Trinket board) and the time module (boreholes not yet drawn).

The next step elaborates on the design files for making the Protective Template on a lasercutter.

Scalable Vector Graphics (SVG) is a convention for defining image files. All graphical elements are, contrary to raster images, defined as lines and areas. An SVG file can be edited using a text editor (and of course graphical editors exist, for example Inkscape.org). To check any changes you made to the source code provided in the next step, simply open your locally saved and manually adapted SVG file in a webbrowser. In the editing process it is convenient to reopen the design using your webbrowser's keyboard shortcut.

If the SVG file is set up in a clean and human-readable manner it can be modified conveniently. For the open source CountClock design this is an important condition, since users are encouraged to use, adapt and share the designs further.

If you'd like to know more about SVG a lot of information is available. The book 'SVG Essentials' by J. David Eisenberg and Amelia Bellamy-Royds (2nd Edition, 2014) is recommendable. There's also a freely accessible first edition of this book.

For lasercutting (and similarly for CNC milling) the SVG file needs to be converted to a DXF file (Drawing Exchange Format developed by Autodesk). The following steps help to create a DXF file from your adapted SVG file by first converting to encapsulated postscript (EPS) and then that file to DXF. The explanation is based on the open source Linux operating system (which can be downloaded freely in various flavours; using a live-system allows to run the operating system without modifying your existing operating system).

For converting a SVG file to DXF, type on a Linux command line (with the SVG file present and accessible) the following command (both Inkscape and pstoedit are required software packages):

Convert SVG to EPS using Inkscape:

inkscape yourfile.svg -E yourfile.eps

Alternatively, if you prefer to use a graphical user interface, open your SVG file in Inkscape and save it as an EPS file: Shift+Ctrl+S (Save File As). Next select under 'Save as type' the option 'Encapsulated PostScript (*.eps)' and in the following pop-up menu ensure to select `Convert texts to paths'.

Next, convert the EPS file to DXF using pstoedit:

pstoedit -dt -f 'dxf:-polyaslines -mm' yourfile.eps yourfile.dxf

Converting SVG directly to DXF using the Inkscape graphical user interface should also be possible but it's important to properly connect and close all graphical elements and select the correct exporting options (which didn't work right away, therefore the SVG > EPS > DXF route was chosen).

The next two steps provide the required files, including the source code.

The scalable vector graphics (SVG) file is human-readable and explains all the physical dimensions, see the code below. Special attention is devoted here to the definition in the SVG preamble:

width="100mm" height="100mm"
viewBox="0,0,100,100"

These two lines define the size of the drawing in mm and enforce the units in the SVG file to be all in mm.

Furthermore, the origin of the drawing is translated to the center of the drawing (command 'translate(x, y)') and then rotations are used to distribute the holes along a circle (command 'rotate(angle in degrees 0 0)'). The various dots are defined as separate id's in the 'defs' section.

Important to realize is that from the 24 LEDs in the LED ring, every other one is highlighted (12 in total). The reason for using the 24 LED Ring is to have a sufficient wide diameter of the hour LEDs (a wider ring diameter would even be better).

Here is the SVG code, licensed under Creative Commons Attribution:

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
version="1.2"
width="100mm" height="100mm"
viewBox="0,0,100,100">

<desc>Protective Template: a disc for isolating Neopixel 24 LED-ring from wooden CountClock.cc housing </desc>

<metadata>

CountClock.cc by openproducts.org (2018) is licensed under a Creative Commons Attribution 4.0 International License.
Find all info at www.instructables.com/id/CountClock
Full license at www.creativecommons.org/licenses/by/4.0/legalcode...

Heart-to-heart distance between two opposite LEDs on Adafruit 24 LED ring is 58.4 mm
Radius from origin to LEDs is 29.2 mm, see definition of hourdot

ringsupportholes are meant for fixing inner LED ring (inner diameter equals 52.5 mm)
ringsupportholes have diameter of 2.5 mm so their radius is (26.25 - 1.25 = ) 25.0 mm

pcbsupporthole is tailored to fix Adafruit Trinket using screws.

</metadata>

<defs>

<g id="hourdot" stroke="blue" stroke-width="0.1">
<!-- Center of hourdot is positioned at a horizontal distance of cx -->
<circle
       cx="29.2" 
       cy="0" 
       r="2.5" 
 fill="none"      
/>
</g>

<g id="ringsupporthole" stroke="blue" stroke-width="0.1">
<!-- Center of ringsupporthole is positioned at a horizontal distance of cx -->
<circle
       cx="25.0" 
       cy="0" 
       r="1.25" 
 fill="none"      
/>
</g>

<g id="pcbsupporthole" stroke="green" stroke-width="0.1">
<!-- Center of pcb supporthole is positioned in upright corner -->
<circle
       cx="5.65" 
       cy="10.85" 
       r="1.25" 
 fill="none"      
/>
</g>

</defs>

<text x="26" y="44" font-family="monospace" font-size="2">CountClock.cc by openproducts.org (2018)</text>
<text x="23" y="47" font-family="monospace" font-size="2">Protective Template for Hours Only CountClock</text>
<text x="22" y="55" font-family="monospace" font-size="2">SVG file CC BY openproducts.org - January 2018</text>
<text x="18" y="58" font-family="monospace" font-size="2">https://creativecommons.org/licenses/by/4.0/legalcode</text>

<!-- Translate origin by x=y=50 units relative to x=y=0 -->
   <g transform="translate(50, 50)" font-family="monospace" font-size="10">
 
<!-- Place the twelve hourdots on a circle based in the translated origin -->
<use transform="rotate(0 0 0)" xlink:href="#hourdot" />
<use transform="rotate(30 0 0)" xlink:href="#hourdot" />
<use transform="rotate(60 0 0)" xlink:href="#hourdot" />
<use transform="rotate(90 0 0)" xlink:href="#hourdot" />
<use transform="rotate(120 0 0)" xlink:href="#hourdot" />
<use transform="rotate(150 0 0)" xlink:href="#hourdot" />
<use transform="rotate(180 0 0)" xlink:href="#hourdot" />
<use transform="rotate(210 0 0)" xlink:href="#hourdot" />
<use transform="rotate(240 0 0)" xlink:href="#hourdot" />
<use transform="rotate(270 0 0)" xlink:href="#hourdot" />
<use transform="rotate(300 0 0)" xlink:href="#hourdot" />
<use transform="rotate(330 0 0)" xlink:href="#hourdot" />

<!-- Place the four ring support holes on a circle based in the translated origin -->
<use transform="rotate(45 0 0)" xlink:href="#ringsupporthole" />
<use transform="rotate(135 0 0)" xlink:href="#ringsupporthole" />
<use transform="rotate(225 0 0)" xlink:href="#ringsupporthole" />
<use transform="rotate(315 0 0)" xlink:href="#ringsupporthole" />

<!-- Place the four PCB screws on a circle based in the translated origin -->
<use transform="scale(1 1)" xlink:href="#pcbsupporthole" />
<use transform="scale(1 -1)" xlink:href="#pcbsupporthole" />
<use transform="scale(-1 1)" xlink:href="#pcbsupporthole" />
<use transform="scale(-1 -1)" xlink:href="#pcbsupporthole" />

<!-- Bounding circle placed in the translated origin -->
<circle
       cx="0" 
       cy="0" 
       r="35" 
       fill="none"
 stroke="blue"
 stroke-width="0.1"      
/>
 
</g>

</svg> 

In case you'd like to modify the design, open the SVG file in a text editor and adapt where needed, see the previous step for background info and conversion to a DXF file.

For completeness, the Protective Template Disc for the Hours-Only version of the CountClock are presented below in SVG, EPS and DXF formats.

The next step gives the design files for the Protective Template of the CountClock Hours and Minutes version.

The SVG code Protective Template designed for the CountClock that shows both the hours and the minutes is very similar to the one shown in the previous step. It's much longer though because all 60 minutes are spelled out in the file. Therefore, the code is only presented as a download file below.

Like in the previous Step the scalable vector graphics (SVG) file is human-readable and explains all the dimensions.

If the design is fine for your purpose you may use the DXF file (available below) directly for the lasercutting.

Similarly as the Hours Only CountClock, in the 24 LED ring every other one is highlighted. From the 60-LED-Ring all LEDs are used.

Optional: after modifying the SVG to your specific needs (in a text editor) the file may be converted to a DXF file as described in the Step 2 above: 'Design in SVG and Conversion to DXF Files'.

A lasercutter uses a thermal laser beam to burn through material. The laser power and the cutting speed depend on the machine and on the material, so these parameters cannot be given here: follow the manual or the instructions of an experienced user.

The pictures show the usage of the final products, the Protective Template Discs. (Editorial note: Epilog Zing picture from manufacturer's website).

In case you are not in a position to make the protective template yourself using a lasercutting machine and don't want to purchase the ready-to-use Countclock Protective Template through the Openproducts webshop, you could also decide to make the Countclock Protective Template using handtools. It is suggested to use the EPS files available below for home-printing the template for the protective template; be sure not to scale your print in order to keep the dimensions intact.

As mentioned in the beginning already: the CountClock is an open source wooden LED clock designed to facilitate learning to tell the time. Multiple Instructables explain how to make the CountClock, feel free to explore them via the Meta Instructable.

CountClock kits will be available via openproducts' webshop at https://www.etsy.com/shop/openproducts once 25 kits have been ordered. At the same time it's investigated whether assembled CountClocks can be offered through the webshop.

CountClock is at Twitter (https://twitter.com/CountClockCC) and at FB. Feel free to share the CountClock with others!