How to simulate image based clock face in JSBin

[NiVZ]

Hello,

So, impatience got the better of me and I made a quick demo showing how to simulate an image based face ( @JonFitbit LCD Clock Example) using SVG in JSBin.

Have a look here:
http://jsbin.com/sosokon/edit?html,js,output

The main differences in the code are:

1. Added width: 348 and height: 250 attributes to the #Page element in the CSS tab

2. I base 64 encoded the images into an array

3. The SVG .href tags need to be changed using setattributeNS() function.

NiVZ

[JonFitbit]

I love this! Great work @NiVZ

[Jay3]

Thanks @NiVZ !
I've made other experimentations based on your great work
https://jsfiddle.net/0ytgt8d8/

Notes:
* Open Sans font, from googleapis
* dynamic graphs
What is different/won't work with Ionic:
* To modify sizes: obj.height = h; => obj.setAttribute("height", h + "px");
* <tspan>

[NiVZ]

Looks great @Jay3

Someone on the Discord chat was just asking about how to do graphs 🙂

[NiVZ]

@Jay3 I've used your graph code loop to start a prototype for a project I hope to do for real.  It's a port of a Nightscout watchface to show Diabetic Blood Glucose values on the watch 😉

http://jsbin.com/xurigom/edit?html,js,output

NiVZ

[Jay3]

Awesome!