Creating "performance" output bars in iOS - Photoshop/programming interplay - ios

My partner and I are trying to figure out how best to create scaling, colored performance bars for one of our mobile exam-prep apps. The goal is to create a horizontal bar that graphically represents a scale of 0 - 100% using Photoshop or something similar. We had hired a professional graphics designer but we're left holding the bag trying to figure out how to make the graphics actually "fill the bar" in the actual app.
(I can't post pictures yet, but you can see a link to the picture here):
http://www.productionplanningpro.com/wp-content/uploads/2012/06/Screen-Shot-2012-06-25-at-9.47.24-PM.png
As the bar would reach certain percentages, it would change color from Red to Green appropriately. I'm trying to figure out how to give this to my contractor without handing him 100 files, each showing 1% more of the bar (and even then, I'm not a graphics artist, so this whole thing is above my head). I've done as much research as I can stand, and I've seen the fancy iOS graphing APIs - we're just looking to fill in these two bars.
Any insight or help is SUPER appreciated!! Thanks!
Jotuned

There are quite a few solutions to this problem. I'm sure there's a way to fill in the area with that shadow programmatically, and I'm also sure someone will come along with a masking solution sooner or later.
The quickest and easiest way, though, is to have your artist simply create that red filler bar one time, and have it fill the entire space (ie. drawn at 100%). Then you make sure that, in the graphic that is the 'outside' of the bar, the space where the red bar should be is an alpha channel.
When you actually get to coding it, place the red bar at the very bottom of all the objects you're drawing to the screen. The rest of your UI should entirely hide it. Then as progress moves from 0% to 100%, you move the bar slowly to the right, filling in the space (and showing through the alpha hole in the 'bar holder'.
Quick, simple, have done this many times before. Masking would work as well, but seems a bit overkill in your situation (and I don't have any experience with it on iOS, so I can't offer any assistance there!) Let me know if you have any questions while trying to implement this :)

Related

Before diving in, is this possible with Awesome WM?

I've been trying different tiling WM's to see which one best fits my needs. Every time I try a new one, it looks good but I find other things that don't quite work the way I like. My requirements have evolved as I go. Initially, I didn't want to get into Awesome because having to learn Lua is not on my wish list but maybe I should give it a try IF it can do what I want better than the other tiling WM's out there.
I'm going to as specific as I can about what I want. I am running a 3440x1440 monitor. I want to use as much vertical space as possible (meaning, a full width, persistent but mostly empty status bar is not an option, but I do like the notification area and a date/time).
I understand it may not do everything exactly the way I want, which is oke. If it does more or less most of what I want I can weigh my options between Awesome and other tiling WM's (actually, only i3 which is what I'm using now but I'm open to better suggestions). I would very much appreciate it if people don't just say no to something it can't do, but say "no, but it can do ...". In other words, feel free to suggest alternatives that might be helpful as well.
Divide the screen in 3 columns, initially 30/45/25, with the right column split horizontally; Fully adjustable and resizable as needed during my work session;
Persistent layout; when closing the last application in a tile, I don't want that tile to disappear and the remaining tiles to resize. Just show an empty space and leave all tiles as they are.
tabbed tiles, so I see which applications are running in a tile (similar to i3).
Resizable tiles with the keyboard into 1 direction; When making the middle column/tile wider, I want that into a specific direction into another tile and leave the other side alone.
Certain applications I want to always launch into a specific tile. For instance, terminals always go into the right-most column top/bottom, browser/spotify always into the middle, atom/IDE always into the left. Some applications should always be floating. Obviously I want to be able to send them to a different tile after launch.
I don't want a 100% width status bar. It will be mostly empty which is a waste of screen estate. Preferably, I'd like a statusbar part of a tile, for example in the right-most tile, resizing with it. Otherwise I'd like it to be fixed to 30% and allow tiles which are not beneath it to use the full height of the screen. My reason for a statusbar is mute; I actually only want a notification area and a date time permanently visible. I don't need a "start menu", dmenu or similar is perfect, which I believe it has integrated.
Many thanks in advance!
The general answer is "Awesome configuration is code and it can do whatever you want". But there is a catch. Can Awesome be configured like you describe? Yes, totally. There is at least 2 distributions coming close enough (mine[1] and worron[2]) (at least for the tiling workflow, not the look).
The "catch" is that the workflow you describe isn't really the "Awesome way". Awesome is usually used as an automatic tiler. You have layouts that describe a workflow (code, web, internet) and manage the clients according to their programming. Manual tile management is rarely necessary once you have proper layouts. That doesn't mean you can't, I did, but it might be worth thinking outside the box and see if you can automate your workflow a bit further.
Also, the default layout system isn't very modern and makes it hard to implement the features you requested. My layout system (see link below) can be used as a module or as a branch and supports all features described above. Awesome is extremely configurable and it's components can be replaced by modules.
https://github.com/awesomeWM/awesome/pull/644
The layout "serialization" documentation is here:
https://elv13.github.io/libraries/awful.layout.html#awful.layout.suit.dynamic.manual
It is similar to i3 but has more layouts and containers. As for the "leaving blank space" part, it is configured using the fill_strategy:
https://awesomewm.org/doc/api/classes/wibox.layout.ratio.html#wibox.layout.ratio.inner_fill_strategy
As a word of conclusion, I would note that what you ask is "work exactly like i3". If you want such thing, well, use i3. Awesome is a window manager framework. Its goal and purpose is to create a customized desktop shell / WM. If it's what you want, then go ahead and learn it, nothing else can come close to the possibility and the level of control you can get out of it. However it takes time and effort to get to the point where you have "your own perfect desktop". Our users perfect desktops:
https://github.com/awesomeWM/awesome/issues/1395
[1] https://gfycat.com/SmallTerribleAdamsstaghornedbeetle
[2] https://www.youtube.com/watch?v=-yNALqST1-Y
The WM your are looking for is herbstluftwm (hlwm). Its a manual tiling window manager. The tiles which you are talking about are called frames in hlwm. Each frame can contain multiple windows. A frame can also be empty. Only if you kill a frame the other frames will automatically resize. You can add new frames vertically and horizontally and resize them. Each frame can also have a different layout to organize the windows inside. The layout you are looking for is max. This will stack the windows inside a frame on each other. It doesn't show you tabs like i3 however. hlwm allows you to create rules to open certain applications always in certain frames and workspaces. hlwm doesn't have a statusbar buildin. I personally like to use tint2. It can be used as a replacement for your requirement to see running applications as tabs.

Painting issues with TScaledLayout & custom styles

I'm experiencing painting issues when combining TScaledLayout and custom styles created from the bitmap style designer in fmx.
To demonstrate, I loaded the default custom style created by chosing "New style for VCL / FMX" -> "save as .style" in the bitmap style designer. I dropped several standard controls on some colored rectangles: The red & green ones on a TScaledLayout, the blue one directly on the form. As I stretch the form, colored lines appear on the controls on the ScaledLayout; the background is partially visible:
If I size the form to exactly match the design-time dimensions, the lines disappear. That seems like a pretty significant issue, I certainly can't use those two together like that. Does anybody have an idea for a possible fix or workaround?
Looks like this is a known issue with scaling and bitmaps. See the Google+ discussion here - https://plus.google.com/+PaulThornton/posts/ACAHkJD3a84. I'll quote Marco Cantu's thoughts:
I've found an internally reported issue of a similar case, but haven't
found one that matches this scenario. Certainly worth adding to quality
portal. Having said this, I fear that bitmap-based operations and
scaling don't really fit together very well, and it might be difficult
to have an all encompassing solution.
Let me explain with an example. Take a button. This is painted by FMX
with 9 sections (borders, corners, central part) so that regardless of
the size the bitmap elements are stretched in one direction at most,
often just draw. Stretching a single bitmap for the button to the
target size would break anti-aliasing and create a blurred image when
using colors.
This is example what happens with a ScaledLayout, given it takes the
complete final image and transforms it. ScaledLayout was originally
introduced with vector styles, and worked very well in that scenario.
With todays's bitmap styles things get a bit more complex.
Regardless of this explanation of there the issue lies, I'd recommend
reporting it on QC, and I'll make sure it doesn't get closed as design
(it could naturally happen, this is how the system works) but that we
do some investigation to address the issue -- turning this into a
feature request.

Is it possible to change texture hue programatically in Spritekit project?

I am interested in to how change hue of the texture in efficient way ? I am experimenting to create space dust which will change it's color every few seconds with nice, smooth transition from one color to another.
I find this possible in few ways:
Using core image like in this example. But I don't know how will this work in combination with Spritekit...
Using particle emitters to create space dust and change color of particles over time using particleColorSequnece property.
And easy one that came up on my mind , while playing with Photoshop, which is using two same, but differently colored images, one over another, and changing the opacity of the topmost one.
This gives me the effect I want, and actually looks fabulous, but is there any better way ? Maybe using SKTexture? In this particular case, I just need to change from one color to another , but what would be an efficient way to do this when multiple changes are required one after another ? This way, my third example requires additional images...
Here is the link which most closely describe what I am trying to accomplish. Just look how space dust changes its color overtime(from dark blue to purple and later to green or orange). I suppose this is done programatically... I would like to ask moderators to remove a link if it is not suitable to post it here. Thanks!
It is kind of a hard questions to answer and is rather subjective, however...
I personally would do the Emitter Node approach, because it seems like it is built for the type of use you are looking for and could have some cool effects trailing behind.
With that being said you specifically asked about changing the hue and colorBlendFactor might be what you are really looking for. I don't have a great link for it, but this might get you pointed in the right direction. You can see how they are blending colors to get the desired result.
Your solution with changing the alpha of two separate colors doesn't sound like a bad approach either.
Hopefully that helps and good luck =)

Programming with white text on black background? [closed]

Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 2 months ago.
Improve this question
Does anyone program with white text against black background? I have heard some rumors that it is better for your eyes. What's the case? Is it any better than the traditional black on white? What are the pros and cons?
It's actually white on black, or rather green or amber on black, that is the traditional way. I've used them all. :)
I believe that the use of black on white started in word processors, because it's a lot easier on your eyes when you alternate between looking at the screen and looking at source material printed on paper.
Also, the contrast between the screen background and the surrounding lighting should be small, so a white background works best with the well lit room most people use computers in most of the time. If you are programming in the darkness a black background would give less contrast, but then it's more a question of why you don't have proper lighting in your room...
There are of course personal preferences than can affect your choise of color setting, and your eyesight (or lack thereof) might also make one setting better than the other.
There is an endless debate on slashdot one can go through for all the unintelligible technical details (the more technical analyses seems to favour dark on light side though).
This article, though about web designing, warns about the hazards of mindless black theming. The important aspect I understand is that the font is more important than coloring schemes. There is also disadvantage for black (not dark in general, but just pure black) background with white font if font is thin, since black creeps on to white and font would look a lil' blurry.
Despite all that, personally I find reading on darker background much easier for eyes. I don't think there is a definite answer for "light font on darker background" or vice versa. It will have to depend on personal tastes and habits more importantly. For sure, the right scheme lets the font (the writing) to project to fore and subdues the background. Now ask yourself is it dark on light that does this or light on dark? Here is the key, in that advocates who vouch for similarity with print suggesting that black outshines the white on paper, is blind to the fact that it is not the situation when it comes to electronic screen. Here the intensity of white beams on your eyes is much higher when compared to black.
And there is nothing like a best background color or fore color, but its the combination that matters. Right combination gives the right contrast, and contrast matters. And contrast should be sufficiently high, but not enough to be straining. Pure white on deep black can be hurting (the contrast being significantly high) but at the same time white on dark green is soothing. The same goes with amber on black.
Also when having a dark background it should be pale and not intense, so something like dark grey or teal will be better than black which in turn will be better than blue, red etc. Black on grey is excellent.
The solarized theme actually is after some good round of testing, going after their website. The good thing I love about Notepad++ is that some of the better known themes like solarized, zenburn, vibrant ink are available built in with the style configurator. Obsidian is the best without a doubt btw! :) Catch it for Visual Studio here.
It seems to be a preference thing and possible environmental thing, honestly. You'll find people who believe each method is superior.
I know that personally, I have coded since the green-on-black and amber-on-black terminals were around, and now I use light gray text on black backgrounds wherever possible. I find black backgrounds to be extremely comfortable on my eyes even for very long sessions, but white backgrounds are very fatiguing. I have heard it described as "staring into a 100 watt lightbulb" and that's how it feels to me.
Room lighting can potentially have a significant effect also. Brighter rooms may lend themselves to brighter backgrounds, and darker rooms to dark backgrounds. It reduces the need for your eyes to struggle to switch between wide and narrow pupils required for bright then dark then bright as you occasionally look away from the monitor to relax your eyes (you should always do this, right?).
The best advice is to just try both, give it a week or so, and decide which you like better. If you find both the extremes are glaring, try using a more subdued theme than pure whites and pure blacks, try some softer grays.
The quick answer is "dark text on white background suits more people".
My answer refers to this one: https://graphicdesign.stackexchange.com/questions/15142/which-is-easier-on-the-eyes-dark-on-light-or-light-on-dark
As a person with astigmatism, I find white background with dark text is easier to read as the reference suggested. (I specifically experienced this after using the dark theme in visual studio 2013. It is so fuzzy to me that I had to change back to its 2012 default theme.)
Below are the quotes:
The science of readability is by no means new, and some of the best research comes from advertising works in the early 80s. This information is still relevant today.
First up is this quote from a paper titled “Improving the legibility of visual display units through contrast reversal”. In present time we think of contrast reversal meaning black-on-white, but remember this paper is from 1980 when VDUs (monitors) where green-on-black. This paper formed part of the research that drove the push for this to change to the screen formats we use today.
However, most studies have shown that dark characters on a light background are superior to light characters on a dark background (when the refresh rate is fairly high). For example, Bauer and Cavonius (1980) found that participants were 26% more accurate in reading text when they read it with dark characters on a light background.
Reference: Bauer, D., & Cavonius, C., R. (1980). Improving the
legibility of visual display units through contrast reversal. In E.
Grandjean, E. Vigliani (Eds.), Ergonomic Aspects of Visual Display
Terminals (pp. 137-142). London: Taylor & Francis Ok, 26% improvement
– but why?
People with astigmatism (aproximately 50% of the population) find it
harder to read white text on black than black text on white. Part of
this has to do with light levels: with a bright display (white
background) the iris closes a bit more, decreasing the effect of the
"deformed" lens; with a dark display (black background) the iris opens
to receive more light and the deformation of the lens creates a much
fuzzier focus at the eye.
Jason Harrison – Post Doctoral Fellow, Imager Lab Manager – Sensory
Perception and Interaction Research Group, University of British
Columbia The "fuzzing” effect that Jason refers to is known as
halation.
It might feel strange pushing your primary design goals based on the vision impaired, but when 50% of the population of have this “impairment” it’s actually closer to being the norm than an impairment.
The web is rife with research on the topic, but I think these two quotes provide a succinct justification for why light text on a dark background is a bad idea.
I'm sure that plus of programming and using white on black layouts causes less energy using.
Example of site saving energy by black layout is http://blackle.com/
well if you are programming when it is already dark outside then yes that rumor might be true becuase it is better for your eyes if the contrast between your monitor and room is smaller.
Below mixed with my own thoughts and others.
Pure Black:
Pure white text on pure black is awful for reading (it's looks awesome on some graphs). Contrast is too high, and pure black may looks unnatural. So Visual Studio is using dark grey, just like Photoshop.
Visual Studio Team Says:
According to The Visual Studio Blog, dark editor themes are overall more preferred, reduced strain over long time usage is the top reason.
Emotional Expectation:
Emotionally, at least for some I guess: things related to creation with a dark theme may feels better, like those software; things books alike, e.g. blog or something, light background may better, since it's more expected.
Black for Colors:
For eyes, generally, I'm fine for both light and dark theme, since I'll always make sure the backlit not too light. As for Visual Studio, I guess the strain for eyes comes from the scanning of colors. You know, it's already hard to recognize all those colors (okay not that hard, you got the point), then there's that big fat white on the way, all the way. Guess eyes just have a "color sensitive mode", like people may not enjoy two white bars even if it's a light colored cartoon.
Light background easily makes things look clean, leads to higher readability for articles; dark background helps emphasize the color, leads to higher readability for codes.
One difference between blog and code text is that, codes are generally colored in a way it can standout its construction. Read an article will focused more on its meaning behind the words, but reading codes focus more on its visual construction and color, focus more on words itself. In photo editing and movie playing, dark colors provides less distraction. We treat codes actually more like a photo or video where visual matters more or even lots. Dark background fades away and makes the visual construction stand out.
I use black background, because it wont strain my eyes. I used to regularly use white background, After 2 years, my eyes started getting strain. i tried to reduce the screen brightness, but it didn't help.
Finally i switched to black and now my eyes hardly even get stressed or watery (but still i'm going to wear spects soon)...
I know this is an old question, but I figured I'd give a little bit of my input. Maybe it'll help someone.
Purely white background was starting to hurt my eyes from several hours of nonstop programming. My vision was getting blurry to the point where I would have to stop. I attempted to use darker themes, but it was harder to focus on text and that made it more difficult for me to scan through the code to find a particular bit. Search functionality would not always work, because I might not know what I'm looking for (solving an exception-less bug, etc).
I looked around and found out that some gamers and programmers use yellow-tinted glasses. Popular choice appears to be Gunnars. However, I didn't feel like spending $70 on a pair of glasses, because historically, my comfort zone with glasses is very narrow and I didn't feel like wasting my time or money.
So, further searching around brought me to f.lux. It's absolutely free. The default settings were a bit too extreme for me and I couldn't get used to them even after two weeks. However, after adjusting them slightly, I've been enjoying it very much. During the day time, the screen is at its normal tone and intensity, but as the evening closes, it transitions into dimmer settings. When I tried to test the difference (after getting used to it) by disabling it, it made it painful to look at the normal screen. So, it does work. If you decide to give it a try... just try to use it for a few weeks before dismissing it. It took me a while to get used to it.
Anyways, if you just can't stand darker themes, like me, those two options are probably a good way to remedy that issue.
I have heard that black text on white background will not hurt your eyes, but using a black background for a long time, can make visual problems of your eyes.
B.K. brings up a lot of points that I too experience. First of which I know this is an older post, but it's still a relevant question. Secondly where I differ is I use a hybrid of darker and traditional lighter themes.
Personally I find darker background to be visually better. When I code I use this type of theme in my IDE Dark Theme for Visual Studio 2010 With Productivity Power Tools. The one thing that I do differently is I do not use the very dark code area or alter the coloring of the text. I go in and change my Options > Environment > Fonts and Colors > Plain Text > Item Background > Custom > Silver. This in turn gives me the aesthetically pleasing darker menus and such in the IDE but still makes my eyes focus on the code. It also keeps all the text and color coding that is native to the default IDE. This of course is for Visual Studio 2010. Newer versions or different IDEs have their own themes.
I have very light sensitive eyes and I tend to get headaches when coding all day without breaks. So I prefer toning the menus, tool bars, and side bars of an IDE to be darker. I also do use the Gunnar glasses.
There's quite a bit of evidence supporting that white background with darker text is actually better for your eyes in well lit office situations and such. https://ux.stackexchange.com/questions/53264/dark-or-white-color-theme-is-better-for-the-eyes Has some very good sources listed throughout the responses on these studies. This is mainly concerning design for end users, but at the end of the day even though we are developers we are still end users of the IDE products and the same rules still apply.
So in conclusion it has a lot to do with your environment, your eyesight, and what you prefer. I personally use a dark IDE with a gray or silver work space with traditionally dark text. This makes it still easy to spot the contrast, but doesn't hurt my eyes by overwhelming me with white.
On my laptop dark background create too much light reflection.
It is really cool for your eyes.
White means full colour -- rgb(255, 255, 255) -- and black means no colour -- rgb(0, 0, 0). So when you are reading some black text against white background, the screen is flashing a lot of light except for a small portion (the text). On the other hand, when you are reading a white text against black background, the screen emits (almost) nothing except for the text area. That's why it looks so cool.
However, the contrast and environment lighting matter. Although I prefer white on black, both pure white on pure black and pure black on pure white have a high contrast, making things unreadable. In my personal experience, 'dark white' text on 'light black' would be the most suitable and long-readable theme for any environment.
I used to program with
White background, I felt more tired and kind of flickering when going home and more tired.
Then I switched to Black background
Eye feels more relaxed and much less tiring and stressed.
I am not sure, which is good for eyes though.
Technically.
When the background is Black the iris open more. I think it allows more radiation in. Not sure.
I'm using white background, because as a web developer you moving from browser to editor all the time and most websites are in white.
I tried to use black background and my eyes started to hurt, because of the switching between both editor and browser. (editor - black, browser - white)
I guess if you work just in black background for all your apps this might work

Do I still need to pad images in a CSS Sprite?

In CSS Sprites you will often find padding between each image. I believe the idea is so that if the page is resized then one image won't bleed into another.
I think this depends on the different types of browser zoom (best explained by Jeff).
However, I haven't been able to see this behaviour in my tests. Is this only a problem with older browsers? (I havent been able to test with IE6 at the current time so I'm counting that as 'old').
Should I still worry about leaving space? Its kind of a pain.
For instance :
A CSS Sprite I found for AOL has
padding between each image : VIEW
but The Daily Show decided not to
bother : VIEW
It shouldn't need to be padded, but when zoomed, especially in IE8 (betas more than the RC), there is image bleeding if there is no padding.
Best example is to go to Google.com -> Search, and zoom... you'll start to see "underlines" at the bottom right of the image as the zooming rounds up/down.
In theory, a 1px padding on all sides of a sprite should be fine.
Here's the sprite from Google (images)...
But when zoomed, the +,-,x icons bleed into the main Google logo.
Basically the answer is yes. Two years to the day after I asked this question will see the release of IE9. IE9 has this problem just as much - if not more than any other browser...
It's pretty infuriating because it's such a simple thing to fix.
With iPads increasing in marketshare - its's pretty essential to at least have a half decent experience with zooming un-uniform amounts.
I am going to have to put a single pixel border around every image to match the background color of the adjacent element (potentially different on each side). Fortunately I auto-generate all my csssprites based on an .xml file - so I can do this programatically without too much hastle. It's still a huge pain though...
Simon - My experience is that this is certainly still a problem.
In response to your second question, why not use transparent padding? (Perhaps you are still supporting ie6 and this is non-trivial, in which case, I'm really sorry).
Speaking of the older browsers (those using text zoom), you don't always need padding.
The main difference between your two examples is that the Daily Show sprite already includes the menu item's text in the image itself.
When using text zoom, the AOL menu items could stretch out vertically due to the larger font size, and the menu text might even wrap to two lines. To accommodate for such eventualities, those icons need a little padding to ensure they don't bleed. Typically, you'd just try to make sure it doesn't bleed on any of IE6's five text sizes.
Since The Daily Show's menu doesn't contain any (visible) HTML text its size won't be affected by text zoom (though you might need a line-height: 0; or so to be sure), so it doesn't need any padding.
As scunliffe already showed, browsers using page zoom may need sprites to have a little padding due to rounding errors.

Resources