This is a read-only archive of the Framer Community on Facebook.

What is Framer? Join the Community
Return to index
Jordan Robert Dobson
Posted Mar 29 - Read on Facebook

iOS Status Bar Module

http://jrdn.io/aODo

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

http://jrdn.io/aODo

22 Comments

Stephen Crowley

Nice!

Jordan Robert Dobson

Yeah it's one of those simple annoying things I end up making or dealing with every project.

Stephen Crowley

Exactly! Well, problem solved

Jordan Robert Dobson

Dark text on light background: http://share.framerjs.com/z2sksq3ra2ji/

Jordan Robert Dobson

Light text on dark background: http://share.framerjs.com/lqqof5xr0g0n/

Phil Hammel

Used this today and it was awesome. Thanks for sharing :)

Johannes Eckert

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? :-)

Jordan Robert Dobson

Yeah I can probably remove the 32%. :) Sorry... I've been using it so long I think I just ignore it now.

Benedikt D Valdez Stefánsson

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.)?

Benedikt D Valdez Stefánsson

Also, I'd suggest having the percentage number optional, not just removed - since it is an option to display it on an actual device

Jordan Robert Dobson

It is not on GitHub. But feel free to pull down the module and make changes until it is.

Johannes Eckert

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 :)

Jordan Robert Dobson

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.

Johannes Eckert

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

Johannes Eckert

We can finish off with a good readme on git :-)

Benedikt D Valdez Stefánsson

Loving this! Great job guys :)

Jordan Robert Dobson

Hey I just sat back and answered questions on those updates... Johannes Eckert did all the updates.

Marc Krenn

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:

http://share.framerjs.com/odk2wjxtuvdk/

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!)

Johannes Eckert

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

Jordan Robert Dobson

Wow. You guys!

Marc Krenn

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?

http://www.linotype.com/de/45462/NeueHelvetica65Medium-product.html?licenseAvlType=4&format=ot-cff&branding=pro

Marc Krenn

Static battery is kinda working. Just change SB_BatteryPercentage to 0-100.

http://share.framerjs.com/5r8hb28lim12/

Read the entire post on Facebook