iOS Status Bar Module
A status bar module for iOS prototypes. You can have light or dark text and choose a solid background color for the status bar or leave it clear if you prefer.
When your prototype is setup as a standalone app on your iOS homescreen, the status bar is ignored and uses the iOS native status bar. It should also stretch to fit any width device.
Let me know if you have any suggestions.
A few things I'm considering adding to this: 1) ability to hide and show it 2) toggle from light to dark 3) switching to 24 hour time so it's not just for us AM/PM people
Yeah it's one of those simple annoying things I end up making or dealing with every project.
Exactly! Well, problem solved
Dark text on light background: http://share.framerjs.com/z2sksq3ra2ji/
Light text on dark background: http://share.framerjs.com/lqqof5xr0g0n/
Used this today and it was awesome. Thanks for sharing :)
This is really really helpful. Is the 32% reallz that big on a device? I would prefer this to be optional, it's really ugly. And what about using a live clock? :-)
Yeah I can probably remove the 32%. :) Sorry... I've been using it so long I think I just ignore it now.
This is pretty awesome - +1 on 24 hour time - another cool feature (and fairly simple to implement) would be a live clock, using basic JS - also possibly randomize battery status within some range.. Is this open sourced on github or something (if someone want's to contribute f.x.)?
Also, I'd suggest having the percentage number optional, not just removed - since it is an option to display it on an actual device
It is not on GitHub. But feel free to pull down the module and make changes until it is.
I am diving into module work right now and want to understand what is going on. Try add a method to it and coffeescript is already going over my head :)
In my module I am just defining an entire class in my module. So you'd add a method inside the class so it's scoped to only that class.
I worked with Jordan on a couple of improvements:
— Show/Hide Methods: fade In/Out, move In/Out— 12/24 Hour Clock— Live Clock
see the code of this example with the new properties and methods: http://share.framerjs.com/9voroonxl47e/
Chrome seems to draw the live clock too bold/blurry on my machine, which is probably just an CSS issue
We can finish off with a good readme on git :-)
Loving this! Great job guys :)
Hey I just sat back and answered questions on those updates... Johannes Eckert did all the updates.
Oh wonderful, we all work on the same stuff now - I should definitely check out this group more often. :)
Anyway, this is what I've got so far:
As of now, it pretty much consists of a programmatic - 24h and AM/PM - realtime clock which can be overwritten with a static time.
Plus, the clock should be pretty much pixel-perfect.
Johannes - I hate to be *that* guy - but you may want to change the colon's font to "Avenir" ;) Took me quite a while to figure that one out.
I'm currently working on the battery percentage and programmatic symbol and I'd love to have those based on real values as well.
This should be possible using the relatively new HTML5 battery API, but I just couldn't get it to work. Does anyone of you coding pros want to give it a try?
http://jsbin.com/battery-status-test/edit?html,output(Please notice that the code in the link above most likely works in Chrome only right now!)
Using Avenir is an interesting workaround (like you have it you also need to nudge it up from the baseline to have it centered).To get rounded punctuation from Helvetica Neue, we would need to be able to turn on Opentype's "alternate Punctuation", but the Helvetica Neue supplied with OSX doesn't give access through CSS — and font-feature-suppoert is limited on iOS anyways.http://jsbin.com/nomesa/20/edit
Wow. You guys!
So the only thing we could do - legally speaking - is to license Helvetica-Neue Medium.otf for App-use for a whopping 540€ and provide it with the module, right?
Static battery is kinda working. Just change SB_BatteryPercentage to 0-100.