{"id":36124,"date":"2019-04-01T12:00:18","date_gmt":"2019-04-01T19:00:18","guid":{"rendered":"http:\/\/devblogs.microsoft.com\/premier-developer\/?p=36124"},"modified":"2019-03-28T10:18:52","modified_gmt":"2019-03-28T17:18:52","slug":"powerapps-design-create-a-digital-alarm-clock-display","status":"publish","type":"post","link":"https:\/\/devblogs.microsoft.com\/premier-developer\/powerapps-design-create-a-digital-alarm-clock-display\/","title":{"rendered":"PowerApps Design \u2013 Create a Digital Alarm Clock Display"},"content":{"rendered":"<p>Premier Developer Consultant <a href=\"https:\/\/www.linkedin.com\/in\/adamtoth\/\" target=\"_blank\" rel=\"noopener\">Adam Toth<\/a> shows us how to create a digital alarm clock display in PowerApps. With step-by-step instructions and guidance, you&#8217;ll be able to recreate the display yourself.<\/p>\n<hr \/>\n<p><span style=\"font-size: 18pt;\">Overview<\/span><\/p>\n<p>In this post, we\u2019ll look at how to use SVG images and some formulas to create a digital alarm clock style display in PowerApps. This is going to involve some image manipulation, so I\u2019ll use one of my favorite free vector programs, Inkscape, to create SVG files that can be used in the clock display. I\u2019ll also be using a free-for-commercial use digital clock font for this example (thanks to the author).<\/p>\n<p>Inkscape:\u00a0<a href=\"https:\/\/inkscape.org\/release\">https:\/\/inkscape.org\/release<\/a><\/p>\n<p>Calculatrix 7:\u00a0<a href=\"https:\/\/blogfonts.com\/calculatrix-7.font\">https:\/\/blogfonts.com\/calculatrix-7.font<\/a><\/p>\n<p><span style=\"font-size: 18pt;\">Create the Images<\/span><\/p>\n<p>For the first part, we will need to create images for each digit of the clock 0-9, as well as the colon, AM\/PM, and also a blank image (you\u2019ll see why later).<\/p>\n<p>Download the font to your machine. Unzip the package, right-click the TTF file, and choose Install Font (if you are on Windows).<\/p>\n<p>Open up Inkscape, and create a new image. From <strong>File &gt; Document Properties<\/strong>, make the image 36 Wide by 60 tall. For the units, choose pixels (<strong>px<\/strong>).<\/p>\n<p><img decoding=\"async\" class=\"alignnone size-full wp-image-36158\" src=\"http:\/\/devblogs.microsoft.com\/premier-developer\/wp-content\/uploads\/sites\/31\/2019\/04\/document-size.png\" alt=\"\" width=\"834\" height=\"928\" srcset=\"https:\/\/devblogs.microsoft.com\/premier-developer\/wp-content\/uploads\/sites\/31\/2019\/04\/document-size.png 834w, https:\/\/devblogs.microsoft.com\/premier-developer\/wp-content\/uploads\/sites\/31\/2019\/04\/document-size-270x300.png 270w, https:\/\/devblogs.microsoft.com\/premier-developer\/wp-content\/uploads\/sites\/31\/2019\/04\/document-size-768x855.png 768w\" sizes=\"(max-width: 834px) 100vw, 834px\" \/><\/p>\n<p>You can read more of Adam&#8217;s post <a href=\"http:\/\/www.lifeonplanetgroove.com\/powerapps-design-create-a-digital-alarm-clock-display\/\" target=\"_blank\" rel=\"noopener\">here<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>In this post, we\u2019ll look at how to use SVG images and some formulas to create a digital alarm clock style display in PowerApps. This is going to involve some image manipulation, so I\u2019ll use one of my favorite free vector programs, Inkscape, to create SVG files that can be used in the clock display. I\u2019ll also be using a free-for-commercial use digital clock font for this example (thanks to the author).<\/p>\n","protected":false},"author":582,"featured_media":36129,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[25],"tags":[4229,40,305,3],"class_list":["post-36124","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-azure","tag-adam-toth","tag-development","tag-powerapps","tag-team"],"acf":[],"blog_post_summary":"<p>In this post, we\u2019ll look at how to use SVG images and some formulas to create a digital alarm clock style display in PowerApps. This is going to involve some image manipulation, so I\u2019ll use one of my favorite free vector programs, Inkscape, to create SVG files that can be used in the clock display. I\u2019ll also be using a free-for-commercial use digital clock font for this example (thanks to the author).<\/p>\n","_links":{"self":[{"href":"https:\/\/devblogs.microsoft.com\/premier-developer\/wp-json\/wp\/v2\/posts\/36124","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/devblogs.microsoft.com\/premier-developer\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/devblogs.microsoft.com\/premier-developer\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/premier-developer\/wp-json\/wp\/v2\/users\/582"}],"replies":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/premier-developer\/wp-json\/wp\/v2\/comments?post=36124"}],"version-history":[{"count":0,"href":"https:\/\/devblogs.microsoft.com\/premier-developer\/wp-json\/wp\/v2\/posts\/36124\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/premier-developer\/wp-json\/wp\/v2\/media\/36129"}],"wp:attachment":[{"href":"https:\/\/devblogs.microsoft.com\/premier-developer\/wp-json\/wp\/v2\/media?parent=36124"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/premier-developer\/wp-json\/wp\/v2\/categories?post=36124"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/premier-developer\/wp-json\/wp\/v2\/tags?post=36124"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}