how to display letters or images on transparent background, - language-agnostic

(and if possible, platform independent)
i'm looking for a programmatic solution (even a command line solution) which will enable me to display alphanumeric letters on the screen, without the Window / Form's background color.
i'm using mainly Windows (xp), but i'd love a solution that can work on modern linux distros.
i know how to make a whole window / form transparent, but that doesn't help, since the letters themselves must be 100% opaque, and background must be 100% transparent.
(I know how to make a window on top of everything.)
It might be possible to convert the letters to a transparent GIF or PNG, but i don't know which technology will NOT show it's own background.
i'm using mainly Python and Visual Basic, but i don't mind using other platforms.
Thanks

Sorry there is no platform-independent way. What you are talking about is a function of the capabilities of the GUI subsystem supplied by the OS (or by a third party layer on top of the OS). On the Mac for example there is explicit support for rendering the background of windows independently of the window content but doing so is specific to that platform. MS Windows, X-Windows, NCURSES, QT, there are many different APIs for rendering to the "screen" (where screen can be a screen or a PDF or a printer or you name it).
You'll need to know specifically what output device you're targeting and read the docs and write your code for that system.

Related

Windows phone 8.1 assets

I'm developing an WP8.1 application and now when I'm almost done with it, I tried to run the Windows App Certification Kit to test if everything is ok. I got this error:
I know that this is not a big thing (it should be really easy to fix it) but I would like to make the images to be as great a possible. I have found the default sampled in the Assets folder, but I don't really know how they should look like at the end.
Could someone provide me with some samples (perhaps some samples he used) for the following images:
ApplicationIcon.png
BadgeLogo.png
Logo.png
SplashScreen.png
SquareTile71x71.png
SquareTile150x150.png
StoreLogo.png
WideLogo.png
And the ones in the Tiles folder that is also inside the Assets folder:
FlipCycleTileLarge.png
FlipCycleTileMedium.png
FlipCycleTileSmall.png
IconicTileMediumLarge.png
IconicTileSmall.png
PS
I'll make my own pictures (I can post them later if you would like that) But I would just like to see some examples to know how that should look like.
The image requirements are relatively simple;
There are 7 images that you can specify in the appxmanifest, and can refer to any image within the project (so the exact filenames aren't strictly required, although I would stick with them). Each image can be supplied at three scales, and if you only supply one scale, make it the 240% scale for the best impression on higher resolution devices.
The Square 71x71 Logo, Square 150x150 Logo, Wide 310 x 150 Logo are all used for tile images, when your app is pinned, and would normally contain some kind of logo to represent your app, on a transparent background where it makes sense.
The Square 44x44 Logo is used in the app list, and is generally a scaled version of the tile image, also on a transparent background.
The Store Logo is as used in the store, and again is generally a scaled version of the tile image.
The Badge Logo is used for lockscreen notifications, and only need be specified if your app supports lockscreen notifications. It also must only be white on transparent.
The Splash Screen is shown as your app is loading. Some apps choose to just show a larger version of the logo on a brand colour (e.g. Internet Explorer), others show some form of branding, along with a "loading" type of message.
Microsoft do also publish some guidelines for design, available from the dev centre

Is it better to use background images or CSS3 gradient? (Phonegap)

Suppose I am using a DIV element for which I can either add a background image or can replicate the same style creating a CSS3 gradient. Now, for Phonegap applications (where all the image files reside in the device itself), which option is better to go for.
I am asking this because I saw somewhere that the gradients takes some computation time where using image may create a loading time issue. But for Phonegap apps, the image load time issue may not be there. So, maybe just using the image be a better option here?
According to an article on the Webkit Wiki, images perform better:
Sometimes it's tempting to use webkit's drawing features, like -webkit-gradient, when it's not actually necessary - maintaining images and dealing with Photoshop and drawing tools can be a hassle. However, using CSS for those tasks moves that hassle from the designer's computer to the target's CPU. Gradients, shadows, and other decorations in CSS should be used only when necessary (e.g. when the shape is dynamic based on the content) - otherwise, static images are always faster. On very low-end platforms, it's even advised to use static images for some of the text if possible.
Source: https://trac.webkit.org/wiki/QtWebKitGraphics#Usestaticimages
Of course, you have to balance that CPU time with the extra time it would take to load the image from the server. Also, for Internet Explorer, filters are extremely slow, especially if you have many on one page.

crop screen maximized resolution

i would like to create some Flex Desktop Application that will be always in front of other applications (appWindow.alwaysInFront = true). It should looks like tiny bar at the top of the screen (eg. width = screenWidth, height = 50px). I know how to do that. But I have problem with other applications - when i maximize them, they are under my application. Is there any way how to say to the system, that maximized resolution for other apps is other than default?
Thanks for your answer.
You cannot do this with flash code, because you're interfering with external applications. At best, you could write some native code in another language and use AIR to execute that code but I can't really see that working out well, or at least being anything less than a massive undertaking.
If you do want to attempt this however, you can find some info about executing native code from AIR here: How can i on button press execute a command in the command prompt and get back the output in ActionScript?

what is full screen mode

I know you can fake full screen by expanding a window and eliminating the title bar , status bar , and other stuff, I'm not interested in this, I want to know about "real" full screen mode (I don't know how to call it else) , like in games.
what exactly is full screen mode?
what win-api should I use to achieve this?
can this be used to play movies in full screen ? I know windows media player uses a fake full screen because I can "cut" thru it and see the desktop (using regions win-api).
can I "cut" thru "real" full screen like I thru a window (using regions win-api) ore is this directly writing to video memory and there is nothing "under" it?
Thanks!
If you want to make games on Windows in full-screen, the best option is XNA. This uses DirectX underneath, but hides a lot of the implementation details and plumbing to make it easy for the developer to start working on his game.
XNA is freely downloadable, and has good documentation.
XNA Game Studio 4.0 can be downloaded here.
...and you might want to support the "fake" fullscreen mode in addition to "real" fullscreen - it's very nice for those of us that run multi-monitor systems.
If you don't want to use DirectX, create window and call ChangeDisplaySettings with CDS_FULLSCREEN flag. OpenGL applications use this way to go fullscreen.
As far as a user is concerned, full screen is just when a window takes up the entire screen such that they no longer see any window borders or other desktop stuff.
As you know, not all full screens are created equal.
'proper' full screen is where the program takes control of the screen. When a game uses this mode, it can change the resolution of you screen. If you have ever played an old game and existed to see your icons all messed up, this is; for the duration of playing the game, your desktop was at a lower resolution.
with 'borderless full screen' the program window is striped of any borders, the title bar and frame etc., and is just a rectangle of pure rendering. If you then set this rendering context to be the same size as your desktop, you get the effect of full screen.
Doing border-less is usually the more user friendly way these days, as it is easier to 'tab out' as the other programs are still graphically around. 'proper' full screen gives you full control of the hardware, so in theory you have more power for your program, but it means you have to wait for things to reinitialise when you tab out.
what you do with your rendering context is up to you, so yes, you can use it play videos. It would not matter if you are in 'proper' full screen or not, the rendering code would be the same.
As for cutting through proper full screen windows, I am not sure, but I think there would be nothing else to see, there is only your program.
as for what win-api, there is only one windows api, but I think you mean, what windowing library; as this is getting to be a long answer already, I shall just say it depends a lot on what you want from it.
Please feel free to leave comments if you need me to clarify or expand on any points.

web safe colours?

Is it still relevant to consider these? I don't do much work on the graphics side of things, but recently I set the background colour of a webpage (using CSS) to the same background colour used within images on the page. #312F32. it looked fine on different machines in the office, but at home on my shinny new mac (and a few others since) there was definitely a noticeable difference between the two.
can someone give me a web colour 101 reminder course? :>
Reference:
For an e.g. this site indicates if a chosen colour is web safe or not.
personally I feel that it's not really of that much of importance, since nowadays modern browsers can render colours properly. What is important is that your background image colour should be the same as the background colour.
different of colour between monitors might just be that the monitor settings are different. so you don't have to worry that much.
what's really important for web designs is that your design have to be appealing.
is it still relevant to consider these?
No. To be honest there was never a truly ‘web-safe’ palette, in that many systems had different colour depths and palettes even in the days when a Windows machine running in 8-bit colour was the norm.
Today there's very little still running an 8-bit palette, and those things that do aren't necessarily using the same one.
it looked fine on different machines in the office, but at home on my shinny new mac (and a few others since) there was definitely a noticable difference between the two.
A shiny new Mac will definitely be running in full colour like everyone else, so it's not a palette problem.
Was the image a PNG? If so, you've probably got a gamma problem causing colour shifts on different platforms. PNGs for the web should be saved without a gAMA chunk to avoid this issue.
Easiest way to remember it for me: Multiples of 0x33 at each byte. E.g. 0x333333, 0x330099, 0xFFFFFF, etc.
The web-safe palette hasn't been relevant for at least five years, IMO. What you're seeing is probably color profile correction in PNGs with embedded color profiles. Some browsers (Firefox 3+, and probably Safari?) read these profiles and attempt to display the image as it was originally created (i.e. as if you were looking at it on the image creator's monitor). This can result in a visual mismatch between "pure" colors in a PNG and rendered HTML colors (e.g. via CSS style)
This is awesome for graphic designers who need to precisely match colors between multiple devices like monitors, scanners and high-end printers. It kinda sorta sucks for everyone else.
The easiest way to prevent this happening (in most cases) is to turn off color correction in your image editor and don't export PNGs (or JPGs) with embedded color profiles. Let the user's monitor guess how to display the image -- usually at the same color profile as everything else on the page.
To ensure that what you see on your screen approximates the most common color settings, use a common color correction profile like sRGB or sRGB IEC61966, and keep a relatively "steep" gamma, between 2.0 and 2.3. (Most PCs have a gamma of ~2.2). Don't calibrate your monitor unless you're sending graphic files between devices.
Extra credit reading:
Color correction for images in Firefox 3.5
PNG color test
The Sad Story of PNG Gamma "correction."
The reason you are seeing differences between your Shiny New Mac and the monitors at work (or many other places) is a difference in monitor color gamut:
The Mac, and higher-end monitors have better color gamut than typical consumer-grade monitors. In my research, a typical Acer or similar monitor had a color gamut of 78%, while a higher-end monitor covers 96% of the Adobe RGB color space. I have a nice NEC with 96% color gamut monitor right next to an Acer X223W (78% color gamut), and the difference is simply amazing as I slide an image or website across from one to the other. Colors appear where there were none, and the image is simply more vibrant and alive.
1) #312F32 is not a 'web safe colour' to start with. Web safe colours are in multiples of 33's such as #333333, #003366, #ff3300 (f=15).
2) The difference in monitors and how they display colours: I had a PC and Mac side by side trying to match the colour in an image with a webpage navbar. I ran into the same problem as you. Even though the colour picker on each computer agreed with what colour was in the image, neither monitor looked exactly right once I updated the navbar colour.
3) Suggestion: sometimes you have to find a happy medium or work with darker shades where you do not notice the colour differences.