OpenGL ES Text Rendering Tutorial - Design, Prototyping, UI, Graphics

I wrote a tutorial on using TrueType/OpenType font files to render text in OpenGL ES 1.0/2.0 which many people have found helpful. Seeing as this new forum is for app developers I thought I'd share it here too
It works by loading a font file (.ttf or .otf) and then generates a font bitmap, which is then used to render dynamic text very quickly. I created this to allow me to ship only a small font file with my projects, instead of multi-resolution generated font bitmaps for each required size. This means perfect quality text at any resolution and small size.
The tutorial includes full source code (in Java + Scala) which can be used in any project - the code is licensed under the CC0 1.0 public domain license so it is free and open for any use.
Link

Related

Draw 32 Bit icons with alpha channel

How can I draw an icon with 32 bit (24 + 8 Bit Alpha) correctly.
When I use the LoadImage() and DrawIcon() API the alpha
channel info is lost and the icon is drawn normal.
Thanks for any information.
Houser
i've been using a program called iIcon and GIMP to edit my icons...
Edit and creation of icons is not my problem.
I want to display them with alpha on the device.
Houser
What format are you using?
I needed to do Alpha blended buttons for some project a while back and found that the only (or at least the fastest) way to get it done in a native C++ app was using OpengGL ES and png files.
To my knowledge there are no native windows APIs to handle Alpha blending.
There are also GDI+ (if you can use .NET) and DirectDraw (which I understand is not implemented on all devices OS versions). I am not certain about their capabilities.
Look at IImage and interfaces that comes with it. It's rather slow but can do the job. (native programming of course).
A faster approach would be doing the drawing yourself using DIBSection (or ddraw).
It would help to have more information, like what type of image file you're trying to produce? Are you trying to do transparency?
bitmap = no alpha + no transparency
png = multiple alpha + transparency
jpg = apha (jpeg2000) + no transparency
gif = single alpha + transparency
You can create all the alpha channels you want in photoshop or paint shop pro, but if you save it as a bitmap it's lost.
Hope this helps, not sure because your question doesn't give much details to your problem.
tene said:
Look at IImage and interfaces that comes with it. It's rather slow but can do the job. (native programming of course).
A faster approach would be doing the drawing yourself using DIBSection (or ddraw).
Click to expand...
Click to collapse
I have used Imaging API and IImage for displaying PNG images with alpha successfull.
Have tried this for icon files with alpha but the icon is not displayed when I use
the IImage interface.
IImagingFactory* m_pImgFactory;
IImage* m_pImage;
m_pImgFactory->CreateImageFromFile( TEXT("file.ico"), &m_pImage );
m_pImage->Draw( m_hDC, &rc, NULL );
Houser
Ok i have managed to display the icon.
But now I am trying to load and icon from an *.ICO file.
The LoadImage() API cannot be used for this because the
flag LR_LOADFROMFILE is not supported under CE.
Has anybody loaded an icon from file and not from resource?
Thanks!
Houser
Houser said:
Ok i have managed to display the icon.
Click to expand...
Click to collapse
hello. can you tell how did you solved alpha-channel problem?
sorry for my french

[win32] API - New Sense interface Look 'n Feel V1.6.4 (01/28/11)

I have created a win32 API for C++ that mimics HTC's Sense UI Look 'n Feel... More informations on my website: charlie-soft.com
DOCUMENTATION : http://charlie-soft.com/Software/Manila_SDK/html/
This SDK is designed for speed: .NET applications are usually very slow to load and not fluid. I use some tricks to improve speed, like drawing only area having changes, scrolling without backbuffer or creating textures for text (GDI text drawing was slower…).
What’s in the box:
PNG resources for VGA/WVGA. They can be easily modified. SDK will resize automatically the resources if your device has a smaller (or higher) resolution!
Design your app for VGA, the SDK will adjust the layout for other resolutions!
Full Finger Control.
Source files (.cpp and .h) of library.
Source files of example.
Class:
MyEditControl: Edit box with different width. Easy get and set text. SIP detection: scroll Edit area.
MyItem: Button (3 types), checkboxes and switch (TripleState!). Event on click, visibility and state can be changed/get easily.
MyPanel : This element is not visible but is used to bring together elements. This element can have a title and dotted separator between each element.
ChildSection : Contains a subsection which is displayed with a sliding effect.
MyLabel: Print text with different font and color.
MyPictureBox: To print image (png, jpg, bmp, gif…)
MySelector: Like the HTML select. Scroll screen if list is out of screen (see video below).
Section: A section is a panel which can be scrolled up/down. It contains the different elements.
MessageBoxSense: Four type of messagebox: info, Ok/Cancel, Abort/Retry and Yes/No.
MySlider: A simple slider of any size... The min and max values can be changed easily, as the cursor position.
Change log
V1.6.4
Added the possibility of multilines in edit control
V1.6.3
Added possibility to add picture to slider of ChildSection...[bug solved]
Explorer bug solved
V1.6.2
Added an event when user click on screen...
V1.6.1
Memory usage improved
V1.6
Loading of image is now safe (use video memory by default but if problems use device memory)
File Explorer
Icons
Speed and memory improvement
V1.5
just add possibility to change color of text for hover and selected...
Minor bug changes:
items out of screen no longer try to redraw
text of items recompute their size when changing
background color is correctly changed
The SDK is now multi thread safe!
Add the possibility to right clicks (long press)
Add the possibility to hook windows message (WM_ACTIVATE for example)
Add the possibility to have a bottom bar.
Add the possibility to have a background image (landscape and portrait).
If the app is allready started, close the new instance and show the previous one.
MySelector can be scrolled if the list is too long.
Text is now printed with alpha transparency.
Compatible with any character (hebrew, vietnamese...).
MyPictureBox can now be stretched.
Memory usage reduced.
V1.4
Minor bugs fixed
Add the possibility to show MessageBox without a main application.
V1.3
Background can be transparent ! (see this app for demo)
Native drawing (DirectDraw was too slow in landscape)
Slider can have a force feedback (see this app for demo)
V1.2
MySlider added
drawing process rewrited: less redraw->less computation->less CPU utilization -> battery consumption reduced
Loading optimisation
The layout is now independent of screen resolution!
top taskbar is occassionally cleared [fixed]
White screen, touching the panel brings it back [fixed]
landscape items position incorrect [fixed]
V1.1
landscape compatible
Abort/Retry added to MessageBoxSense
TripleState Checkboxes and OnOffItems added
FAQ
is QVGA resolution supported?
Yes, SDK will find the correct resolution and select the appropriate resource resolution. The SDK will delete the other resources...
have you planned to extend MessageBox types to Abort/Retry?
Yes, to create one:
MessageBoxSense::show(L"Hello",L"Try again ?", MESSAGE_ABORTRETRY);
is this landscape compatible?
Yes but having refresh rate issue. Seems to be a DirectDraw problem (S2U2 was subject to the same issue...)
If someone know how to solve this problem, send me a message !
Back button too slow.
You can change the speed anim using this function: changeSpeed(double nbMilisecond)
why aren't you including some TripleState Checkboxes and OnOffItems ?
Both are now included:
new MyItem(1,5,15,ITEM_IS_CHECKBOX,ITEM_THIRD_STATE,L"My third checkbox (Third state)");
Other apps
Wake on Wan is a new app which use this SDK. Sources are available!
Quick shutdown is a software which use this SDK too. It can turn off, restart or set the phone in sleep mode. Sources are also available!
"
Sense SDK win32 C++
For informations about SDK (installation, use compile...), see here: http://charlie-soft.com/Software/Manila_SDK/html/
Good work ! thanks for sharing hope devs will use it.
Hello my friend !
Great work !
( C'était exactement ce que je cherchais en c++ pour mes MFC smart device !!! )
Great Work, Thx for the source!!
Really great work!
but I have two questions:
- is QVGA resolution supported?
- have you planned to extend MessageBox types to Abort/Retry?
thank you
regards
NIce work
Altough i don't really know what todo with it... i instalt the example.cab and it was really smooth!
Only one thing if i go to other controls and i want to change the value then the onscreen keyboard should show up right? But it doesn't.... So i slide my qwerty keyboard open, and in landscape i get an error message: DDERR_SURFACELOST(back buffer)
I dont know what it means... is this landscape compatible?
Good job man !
Nice works !
I just have a feedback, I find too slow the animation when you click on the "back" button, is there is a way to speed it up ? (or disable simply the animation)
SDK Manila
Hello all !
I will try to answer all your questions. So :
- is QVGA resolution supported?
No but easy to implement... Just resize resources to correct resolution. I will post resources shortly.
- have you planned to extend MessageBox types to Abort/Retry?
If it's something wanted, I will do it.
- is this landscape compatible?
No, not yet. But will be in next release!
-Back button too slow.
I will add a method to set the speed of animation... in the next release
-Bug with hardware keyboard
The onscreen keyboard don't show up and I don't know why... I will look around for a fix.
If a developer wants to translate .NET applications into C++, feel free to post I will try to help you!
There is still lot of work, but I will try to do this quickly!
petititi said:
- have you planned to extend MessageBox types to Abort/Retry?
If it's something wanted, I will do it.
Click to expand...
Click to collapse
thank you for quick reply. I need this extension for my app "htc menu loader" (link in signature) to migrate from .net to c++
again, really great work. You are making something that HTC should have done months ago.
Great project !
I don't know if you notice but I disabled the bottom taskbar... Do you think that I should add the possibility to enabled it? I saw that your application needed one...
I hope you will find my SDK easy to use !
Hey, this looks awesome.
Question though: I'm just shy of clueless when it comes to making an actual working app. Is there any place I can go to read/learn the coding I will need to actually use this?
Application win32 c++
You can use the example application included into the SDK to learn basic stuff or you can download this application: WakeOnWan. It’s based on my SDK (here are the sources).
You need some basic knowledge about Object-oriented programming and C language. I try to explain how to use the SDK in the example using comments or on my webpage.
I will also post a short tuto in second post...
Very, very nice! The demo runs very smoothly on my stock Touch Pro 2.
petititi said:
You can use the example application included into the SDK to learn basic stuff or you can download this application: WakeOnWan. It’s based on my SDK (here are the sources).
You need some basic knowledge about Object-oriented programming and C language. I try to explain how to use the SDK in the example using comments or on my webpage.
I will also post a short tuto in second post...
Click to expand...
Click to collapse
Awesome thanks!
What's sad, is when I was young, I used to be able to code in C. Made my first video game when I was 6 on a Commodore 64 (ok i dated myself here) Now, can't remember very much
C++ ? It's just like riding a bike!
Hatefly said:
Awesome thanks!
What's sad, is when I was young, I used to be able to code in C. Made my first video game when I was 6 on a Commodore 64 (ok i dated myself here) Now, can't remember very much
Click to expand...
Click to collapse
I'm sure you can!
It's just like riding a bike - you never really forget how. And we are here to help you to refresh your memory.
petititi said:
I'm sure you can!
It's just like riding a bike - you never really forget how. And we are here to help you to refresh your memory.
Click to expand...
Click to collapse
Sweet thanks! Just downloaded an ebook on c programing.
Sounds (and looks) great, although there are still to many glitches (like not working in landscape etc.) which are preventing me from using this package.
But I have one question, why aren't you (all) including some TripleState Checkboxes and OnOffItems ?
I need them often but you cant find such controls online - not to speak of sense.
TripleState Checkboxes ?
Hello,
the TripleState Checkboxes is a simple feature I can add. To be sure, TripleState Checkboxes will looks like:
And tripleState On/Off:
I will include them in the next release... Be patient, the next release is coming soon and adds support for portrait and fixes a few bugs...

Why Wordpad++ over Wordpad?

Hi all. Can someone who uses Notepad++ explain why you use this program over Notepad? I ask because of course, I already have Notepad and Notepad++ does not appear to be readily available. Does it offer any advantage to editing .xmls or something else?
I think you actually mean Notepad++, and here's a quick summary of its features according to Wikipedia:
Features
Some of its general features include:
Tabbed document interface
Drag-and-drop
Multiple Clipboard (plugin required)
Split screen editing and synchronized scrolling
Spell checker (requires Aspell) (Spell checker does not distinguish between text and code)
Supports text encoding formats such as Unicode, for international writing systems
Find and replace over multiple documents
File comparison
Zooming
Programming languages
Running under Mac OS X using the Wine compatibility layer.
It also includes features for source code editing:
Auto-completion
Bookmarks
Syntax highlighting and syntax folding
Brace and indent highlighting
Regular expression find and replace
Speech synthesis
FTP Browser (plug-in included in standard installation)
Macro recording and execution.
Various tools such as line sorting, text encoding conversion, text folding
File status auto-detection
Plugins for multiline regular expression search and replace
Notepad++ supports syntax highlighting and syntax folding for 48 programming, scripting, and markup languages. It attempts to automatically detect the language that a given file uses, using a modifiable list of file extension bindings. Users may also manually set the current language, overriding the extension's default language. The program also supports autocompletion for a subset of the API of some programming languages.
Users can also define their own language (for syntax highlighting) and its respective API (for autocompletion) by using the built-in User Language Define System. Users may configure the syntax highlighting's font styles per element, per language, and the resulting formatted script may be printed in full-color (WYSIWYG). Additionally, Notepad++ displays indent guidelines when source code is indented with tab characters, and highlights closing braces, brackets and tags.
Plugins
Notepad++ has support for macros and plugins. Currently, there are 27 official plugins for Notepad++, 10 of which are included by default in the program. The first plugin to be included in the program was "TextFX", which includes features such as W3C validation for HTML and CSS, text sorting, character case alteration and quote handling.
Hopefully that answers your question!
Ha I did mean Notepad++!! That's probably why I couldn't find much info on Wordpad lol.
I use it cause it allows you to save stuff as unix/linux. When you write code with regular notepad it adds under
un-wanted characters messing **** up. Notepad ++ dont do this
Sent from my SPH-D700 using Tapatalk
Thanks. I need to download that notepad++ tonight
Sent from my SPH-D700 using XDA App
running_the_dream said:
Hi all. Can someone who uses Notepad++ explain why you use this program over Notepad? I ask because of course, I already have Notepad and Notepad++ does not appear to be readily available. Does it offer any advantage to editing .xmls or something else?
Click to expand...
Click to collapse
I use it because of all of the features. There is no comparison. The main features I use are the code formatting, comparison, advanced search and replace & spell checker just to name a few.
Sent from my SPH-D700
Sent from my SPH-D700 using XDA App

Android Command-Line Icon Converter

Hi there,
As the process of creating Icons for Android was very annoying to me (design an icon, export it for 5 densities, change the color to make it "disabled", save it again 5 times ...) I wrote a command-line tool for this task. I guess it will help everyone who doesn't like this time consuming process too I know there are online tools to convert one icon to the right sizes for each density, but have a look at what icon-converter can do:
The main idea is to have one SVG file for each icon. You do not have to have different SVG files for the states (e.g. enabled and disabled) but you can use icon-converter to change one or more colors in the icon.
Having all the SVG's, you can simply write a .sh script to "compile" all the icons at once, meaning that icon-converter creates all PNG's with the given settings (density, colors, scale, even versioning is supported, renaming files so that you can find them after compiling). The PNG's are then stored directly in the right drawable-directories. E.g. when you change an icon which has different states, you only have to execute your script once and do not have to export PNG's by yourself.
Please have a look at this tool, there are some examples online:
iconconverter.android-msapps.com
It runs on Linux and Windows.
Do you have any suggestions to improve the software?
Best
Markus

Question Letterboxed apps (not filling screen) – wrong/limited aspect ratio?

Does anybody have any apps that don't fill the entire screen and have a big black empty area at the bottom? They work fine otherwise but just don't use the whole screen.
FWIW these are APKs I brought from the old phone with 18.5:9 ratio vs 21:9 for this one, which I cannot update because they've been abandoned/obsoleted by the developer. I suspect they've declared a maximum screen ratio in their manifest so that's why they're letterboxed but I'm not sure how I can override it (without modifying the APK).
On Samsung ROMs you get an automatic prompt to override (and a per-app override in the settings) but I can't find anything like that on Sony.
I've extracted the manifest from 3 such apps and indeed don't see anything about android:maxAspectRatio and android:resizeableActivity="false" in any of them.
Adding two screenshots to explain what I'm talking about. They're from one of the affected apps (Agile – com.sauce.agile), letterboxed to 16:9 due to the 21:9 screen of the phone. Notice the large black area at the bottom in portrait and the black bands on the sides in landscape.
Found a blog post that explains:
We recommend that you design your app to support aspect ratios of 2.1 or higher. For this, you would add the following to the <application> element:
<meta-data android:name="android.max_aspect" android:value="2.1" />
If you don't set a value, and android:resizeableActivity is not true, then the maximum aspect ratio defaults to 1.86 (roughly 16:9) and your app will not take advantage of the extra screen space.
Click to expand...
Click to collapse
Guess that explain what's going on with the affected apps. Now to see if this can be overwritten at runtime somehow...
I found an easy method for fixing this problem using the APK Editor app (also attached to this post) (which, ironically, is itself affected by letterboxing).
Open APK Editor.
Tap "Select Apk from App" if you want to fix an already installed app, or "Select an Apk File" if you have the .apk but it's not installed.
Select "Common Edit".
Scroll all the way to the bottom to "Target SDK Version" and replace it with the value 24.
Press "Save".
That's it, APK Editor will save a modified .apk to ApkEditor/tmp/gen_signed.apk which doesn't have the letterboxing problem anymore.
Please note that the modified .apk has the exact same name and version as the installed app so if it's already installed you won't be able to install the modified one (the installer thinks you're trying to install the same app). There are several solutions:
If you don't care about losing your app data, just uninstall it then install the modified .apk.
You can take a backup with ADB or an app like Titanium, MyBackup Pro or OandBackupX, uninstall the app, install the modified one, then restore just the app data.
When you edit the app with APK Editor bump the Version Code and Version one number up. This will make the installer think you're installing an updated version. Probably a good idea to do this anyway.
Read this in case the target SDK version doesn't fix the problem!
As I wrote above, the letterboxing appears for apps that don't have an explicit android.max_aspect declared in their manifest. If that's the case, Android checks to see if the app manifest has declared android:resizeableActivity instead. If it didn't do that either, SDK versions before 24 would assume the activity to NOT be resizeable (default value boolean "false") and use letterboxing. This is what's happening for the apps I listead in post #2. For them the fix is easy: change the SDK version to 24; starting with that version the default is "true" for resizeable activity, which removes the letterboxing.
If changing the target SDK version didn't work for you, or if the app was already targeting 24 or later, it means it's probably declaring either android.max_aspect or android:resizeableActivity in its AndroidManifest.xml. You will need to use APK Editor to do a "Simple Edit" instead of "Common Edit", save a copy of the AndroidManifest.xml file, edit it (please make sure you edit it with a text editor that won't mess it up), set android.max_aspect to 2.1 and/or android:resizeableActivity to true (or remove them, but if you do make sure the target SDK version is 24 or greater) then replace the original AndroidManifest.xml in APK Editor and save the modified .apk.

Categories

Resources