{"id":14573,"date":"2015-05-01T05:01:47","date_gmt":"2015-04-30T19:01:47","guid":{"rendered":"http:\/\/www.rjmprogramming.com.au\/ITblog\/?p=14573"},"modified":"2015-05-02T21:54:50","modified_gmt":"2015-05-02T11:54:50","slug":"html5-meter-element-progress-bar-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/html5-meter-element-progress-bar-tutorial\/","title":{"rendered":"HTML5 Meter Element Progress Bar Tutorial"},"content":{"rendered":"
\"HTML5<\/a>

HTML5 Meter Element Progress Bar Tutorial<\/p><\/div>\n

HTML5 brought with it many great features to front-end work on the internet in HTML, and today, we continue on from yesterday’s HTML5 Meter Element Primer Tutorial<\/a> as shown below, we talk about one of the newly introduced, and very useful, elements called “<meter>”<\/i><\/a>. By the way, the “<meter>”<\/i> element does not work with mobile Safari, for instance, and you can read more about this here<\/a>.<\/p>\n

As we outlined yesterday, at its core the “<meter>”<\/i> element represents a “fraction of one” or perhaps you can think this as a “percentage of one hundred”, and, as you’d guess, a generic “xth<\/sup> of y for the fraction x\/y” idea … where “y” could be your “max” parameter, and perhaps your “min” parameter is zero. Today we extend that “fraction” concept to being a “fraction” of completion time, as a progress bar.<\/p>\n

Progress bars appear all over the internet. Personally I love the ones that go backwards, just like those mileposts that increase as you head closer to a town. In defense of this occasional progress bar behaviour, it can be quite hard to predict when some jobs will finish … suppose you base it on a file size … but this may not take into account record sizes or intensity of calculation for particular data record types etcetera etcetera etcetera.<\/p>\n

With our progress bar today we analyze the pixels of a user-defined image file and show a few of the most commonly occurring pixel colours appearing in that image (file) and present this as a (Google Chart) bar chart, that changes along with the progress bar “progressing”.<\/p>\n

So take a look at the PHP code in image_bargraph.php<\/a>, or a live run<\/a>, for your perusal. A useful PHP link for this was this one<\/a> … so, thanks. Hope it helps with a project idea you are mulling over now.<\/p>\n

Stop Press:<\/b> The next tutorial in our sequence called HTML5 Meter Element Word Count Tutorial<\/a> led to some thinking causing changes to our code above which you can see with the image_bargraph.php<\/a> link.<\/p>\n

\n

Previous relevant HTML5 Meter Element Primer Tutorial<\/a> is shown below.<\/p>\n

\"HTML5<\/a>

HTML5 Meter Element Primer Tutorial<\/p><\/div>\n

HTML5 brought with it many great features to front-end work on the internet in HTML, and today we talk about one of the newly introduced, and very useful, elements called “<meter>”<\/i><\/a>.<\/p>\n

At its core the “<meter>”<\/i> element represents a “fraction of one” or perhaps you can think this as a “percentage of one hundred”, and, as you’d guess, a generic “xth<\/sup> of y for the fraction x\/y” idea … where “y” could be your “max” parameter, and perhaps your “min” parameter is zero.<\/p>\n

This element is useful to represent a numerical concept graphically (like a ratio), something we do today with …<\/p>\n