Battery icon
46 views
Skip to first unread message
John Wiseman
Jan 11, 2013, 10:00:49 PM1/11/13
to mave...@googlegroups.com
Kyle Robinson Young (https://twitter.com/shamakry) has an animated canvas battery display that we could probably use in our PFD:
Image: http://imgur.com/4stMG
Phil Poore
Jan 24, 2013, 6:09:31 PM1/24/13
to mave...@googlegroups.com
I really Like the design its nice and simple...
It uses a canvas tho... im sure this would be a doddle for CSS+HTML instead...
John Wiseman
Jan 24, 2013, 6:41:08 PM1/24/13
to mave...@googlegroups.com
Yeah, I suppose I would prefer non-canvas, but it's not immediately obvious how one would animate the remaining power bar.
--
Phil Poore
Jan 24, 2013, 6:43:26 PM1/24/13
to mave...@googlegroups.com
Gimmie a sec (more like an hour) and ill get on done...
^__^
--
Phil Poore
Jan 24, 2013, 8:28:01 PM1/24/13
to mave...@googlegroups.com
This would Work...
| <!DOCTYPE HTML> | |
| <html lang="en-US"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <title></title> | |
| <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script> | |
| <style> | |
| .ui-batt { width:44px; height:17px; border: 5px solid #fff; position: relative; } | |
| .ui-batt-point { display: block; background: #fff; width:4px; height:13px; position: absolute; left:49px; top: 2px; } | |
| .ui-batt-text { | |
| content: attr(data-level) "%"; color: #00f; position: absolute; left: 60px; width:20px; | |
| font-family: Impact; font-size: 22px; top: -4px; | |
| } | |
| .ui-batt-level { position: absolute; top: 2px; left: 2px; background: #f00; width:40px; height:12px; } | |
| .ui-batt.ui-batt-level-a { border-color: #000; } | |
| .ui-batt.ui-batt-level-b { border-color: #888; } | |
| .ui-batt.ui-batt-level-c { border-color: #ccc; } | |
| .ui-batt.ui-batt-level-d { border-color: #fff; } | |
| .ui-batt.ui-batt-level-a .ui-batt-point { background: #000; } | |
| .ui-batt.ui-batt-level-b .ui-batt-point { background: #888; } | |
| .ui-batt.ui-batt-level-c .ui-batt-point { background: #ccc; } | |
| .ui-batt.ui-batt-level-d .ui-batt-point { background: #fff; } | |
| .ui-batt.ui-batt-level-a .ui-batt-level { background: #f00; } | |
| .ui-batt.ui-batt-level-b .ui-batt-level { background: #003; } | |
| .ui-batt.ui-batt-level-c .ui-batt-level { background: #007; } | |
| .ui-batt.ui-batt-level-d .ui-batt-level { background: #00f; } | |
| .ui-batt-level-a.ui-batt .ui-batt-text { color: #000; } | |
| .ui-batt-level-b.ui-batt .ui-batt-text { color: #888; } | |
| .ui-batt-level-c.ui-batt .ui-batt-text { color: #ccc; } | |
| .ui-batt-level-d.ui-batt .ui-batt-text { color: #fff; } | |
| .ui-batt *, .ui-batt | |
| { | |
| -webkit-transition: border-color 1s ease-in-out, background-color 1s ease-in-out, color 1s ease-in-out; | |
| -moz-transition: border-color 1s ease-in-out, background-color 1s ease-in-out, color 1s ease-in-out; | |
| -o-transition: border-color 1s ease-in-out, background-color 1s ease-in-out, color 1s ease-in-out; | |
| transition: border-color 1s ease-in-out, background-color 1s ease-in-out, color 1s ease-in-out; | |
| } | |
| body { background: #666; } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="batt"></div> | |
| <script> | |
| (function ($){ | |
| // expects number from 0 -- 100 | |
| function get_batt_width(level) | |
| { | |
| // 40 == .ui-batt-level max width | |
| return 40 * (level / 100); | |
| } | |
| function update_level_classes (that,level) | |
| { | |
| $(that).removeClass('ui-batt-level-a ui-batt-level-b ui-batt-level-c ui-batt-level-d'); | |
| if (level < 20) $(that).addClass('ui-batt-level-a'); | |
| else if (level < 45) $(that).addClass('ui-batt-level-b'); | |
| else if (level < 70) $(that).addClass('ui-batt-level-c'); | |
| else if (level <= 100) $(that).addClass('ui-batt-level-d'); | |
| } | |
| $.fn.battery = function (options_or_action, options) | |
| { | |
| var defaults = {level: 100} | |
| var method = ""; | |
| if (typeof options_or_action == "string") { | |
| var method = options_or_action; | |
| // pass options through; | |
| options_or_action = options; | |
| } | |
| var options = $.extend(defaults, options_or_action); | |
| if (method == "") | |
| { | |
| return this.each(function (){ | |
| if ($(this).hasClass('ui-batt')) return; // ignore already loaded; | |
| $(this).hide() | |
| .addClass('ui-batt') | |
| .html($("<div class='ui-batt-level'></div>").width(get_batt_width(options.level))) | |
| .append("<div class='ui-batt-text'></div><div class='ui-batt-point'></div>") | |
| .attr("data-level",options.level); | |
| update_level_classes(this,options.level); | |
| $(this).show(); | |
| }); | |
| }else if (method=="update") | |
| { | |
| return this.each(function (){ | |
| var l = $(this).attr('data-level'); | |
| var w = get_batt_width(l); | |
| $(this).find(".ui-batt-level").width(w); | |
| $(this).find('.ui-batt-text').html(l + "%"); | |
| }); | |
| }else if (method == "set") | |
| { | |
| // set the data-level value of batt and update the hud | |
| return this.each(function (){ | |
| if (options.level < 0) options.level = 0; | |
| if (options.level >100) options.level = 100; | |
| update_level_classes(this,options.level); | |
| $(this).attr('data-level', options.level); | |
| $(this).battery('update'); | |
| }); | |
| } | |
| }; | |
| })(jQuery); | |
| </script> | |
| <script> | |
| $(function (){ | |
| $('.batt').battery(); | |
| }); | |
| var tmp = 100; | |
| setInterval(function (){$('.batt').battery('set',{level:tmp--})}, 100); | |
| </script> | |
| </body> | |
| </html> There is a startup bug waiting for animations but its pretty much there.... Phil |
John Wiseman
Jan 28, 2013, 6:53:13 PM1/28/13
to mave...@googlegroups.com
Phil, that's awesome work. I made a few changes: Battery is a class, no easing, the display is always white until it's red.
Let me know what you think:
John
Reply all
Reply to author
Forward
0 new messages