The software that simulates the ClockClock effect is available using only 2 files as shown in the picture. Visit this link; https://github.com/y-taka-23/elm-clockclock24/tree/master/docs and download the 2 files, ‘app.js’ and ‘index.html’. These files need to be available to the phone via the internet and therefore needs to be on a web server. Theoretically these files can be stored directly on the phone and the ‘Fully Kiosk Browser’ pointed to the files locally. However, I wanted to store these on a server that would allow me to access them on other devices that I might build.

Mr. Takahashi has created a demo available here; https://y-taka-23.github.io/elm-clockclock24/. However I didn’t want to directly link to this demo in case the bandwidth might be limited. And out of courtesy, I would suggest that you house these files on your own server. But for prototyping, this demo is a good place to start.

The other reason for storing the files on my own server was I found that I needed to alter some of the sizes to properly display on the Samsung Note 8. This cannot be done using the demo site.

To alter the size of what is being rendered in the browser, you will need to open the ‘app.js’ file in an editor. Towards the beginning of the file will be a bunch of CSS code (shown below). Locate this area and start to play with the sizes. Specifically look for; display-frame, border-radius, display, and clock-dial. Some of the pixel sizes have been increased and the background color was changed from ‘none’ to ‘white’.

This is a trial and error thing until you arrive at the best size and look. So spend time with this. An easy way to do this is to download the two files to your desktop and drag the ‘index.html’ file to your browser to display the clock, then open the ‘app.js’ file in an editor to alter. Once a change is made, simply refresh the browser to see the effect on the clock. The same process can be done directly on the phone as well.

Original — taken from https://github.com/y-taka-23/elm-clockclock24/tree/master/docs

"html {n height: 100%;n width: 100%; }nnbody {n align-items: center;n display: flex;n height: 100%;n justify-content: center;n margin: auto;n width: 100%; }nn#display-frame {n border: solid 1px gray;n border-radius: 2px;n height: 168px;n margin: 0px 0px 70px 0px;n padding: 40px;n width: 440px; }nn#display {n height: 168px;n width: 448px; }nn.clock-dial {n fill: none;n stroke: gray;n stroke-width: 2; }nn.clock-center-point {n fill: #333333;n r: 10; }nn.clock-hour-hand {n stroke: #333333;n stroke-width: 20; }nn.clock-minute-hand {n stroke: #333333;n stroke-width: 20; }n",""])}

Modified — to fit Samsung Note 8

"html {n height: 100%;n width: 100%; }nnbody {n align-items: center;n display: flex;n height: 100%;n justify-content: center;n margin: auto;n width: 100%; }nn#display-frame {n border: solid 2px gray;n border-radius: 2px;n height: 600px;n margin: 0px 0px 70px 0px;n padding: 40px;n width: 1350px; }nn#display {n height: 600px;n width: 1350px; }nn.clock-dial {n fill: white;n stroke: gray;n stroke-width: 2; }nn.clock-center-point {n fill: #333333;n r: 10; }nn.clock-hour-hand {n stroke: #333333;n stroke-width: 20; }nn.clock-minute-hand {n stroke: #333333;n stroke-width: 20; }n", ""])

Finally, one change to the ‘index.html’ file was done to create a dark background behind the clocks, so as not to burn the whole display unnecessarily. This is strictly optional.

Notice that the tag has the bgcolor=»gray» attribute added. Any color can be selected as desired.


 
  
  ClockClock 24
 
 
  
    

Be sure to save your changes, and upload to a server, or to the phone if you prefer.

Leave a Reply