-
-
Notifications
You must be signed in to change notification settings - Fork 10.5k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Is Buttons with Icons / Pictures possible? #1096
Comments
Hi, Or You can create custom control and share..., like this: #282 |
Also read the FAQ and documentation in extra_fonts/ about merging in an icon font.
|
@Questionark: This is what I got in my branch: // Declaration (.h file)
namespace ImGui {
// label is used as id
// <0 frame_padding uses default frame padding settings. 0 for no padding
IMGUI_API bool ImageButtonWithText(ImTextureID texId,const char* label,const ImVec2& imageSize=ImVec2(0,0), const ImVec2& uv0 = ImVec2(0,0), const ImVec2& uv1 = ImVec2(1,1), int frame_padding = -1, const ImVec4& bg_col = ImVec4(0,0,0,0), const ImVec4& tint_col = ImVec4(1,1,1,1));
} // namespace ImGui
// Definition (.cpp file. Not sure if it needs "imgui_internal.h" or not)
namespace ImGui {
bool ImageButtonWithText(ImTextureID texId,const char* label,const ImVec2& imageSize, const ImVec2 &uv0, const ImVec2 &uv1, int frame_padding, const ImVec4 &bg_col, const ImVec4 &tint_col) {
ImGuiWindow* window = GetCurrentWindow();
if (window->SkipItems)
return false;
ImVec2 size = imageSize;
if (size.x<=0 && size.y<=0) {size.x=size.y=ImGui::GetTextLineHeightWithSpacing();}
else {
if (size.x<=0) size.x=size.y;
else if (size.y<=0) size.y=size.x;
size*=window->FontWindowScale*ImGui::GetIO().FontGlobalScale;
}
ImGuiContext& g = *GImGui;
const ImGuiStyle& style = g.Style;
const ImGuiID id = window->GetID(label);
const ImVec2 textSize = ImGui::CalcTextSize(label,NULL,true);
const bool hasText = textSize.x>0;
const float innerSpacing = hasText ? ((frame_padding >= 0) ? (float)frame_padding : (style.ItemInnerSpacing.x)) : 0.f;
const ImVec2 padding = (frame_padding >= 0) ? ImVec2((float)frame_padding, (float)frame_padding) : style.FramePadding;
const ImVec2 totalSizeWithoutPadding(size.x+innerSpacing+textSize.x,size.y>textSize.y ? size.y : textSize.y);
const ImRect bb(window->DC.CursorPos, window->DC.CursorPos + totalSizeWithoutPadding + padding*2);
ImVec2 start(0,0);
start = window->DC.CursorPos + padding;if (size.y<textSize.y) start.y+=(textSize.y-size.y)*.5f;
const ImRect image_bb(start, start + size);
start = window->DC.CursorPos + padding;start.x+=size.x+innerSpacing;if (size.y>textSize.y) start.y+=(size.y-textSize.y)*.5f;
ItemSize(bb);
if (!ItemAdd(bb, &id))
return false;
bool hovered=false, held=false;
bool pressed = ButtonBehavior(bb, id, &hovered, &held);
// Render
const ImU32 col = GetColorU32((hovered && held) ? ImGuiCol_ButtonActive : hovered ? ImGuiCol_ButtonHovered : ImGuiCol_Button);
RenderFrame(bb.Min, bb.Max, col, true, ImClamp((float)ImMin(padding.x, padding.y), 0.0f, style.FrameRounding));
if (bg_col.w > 0.0f)
window->DrawList->AddRectFilled(image_bb.Min, image_bb.Max, GetColorU32(bg_col));
window->DrawList->AddImage(texId, image_bb.Min, image_bb.Max, uv0, uv1, GetColorU32(tint_col));
if (textSize.x>0) ImGui::RenderText(start,label);
return pressed;
}
} // namespace ImGui |
First look at |
I might have confused you all, what I meant was ICONS on buttons, not just a side picture with text on the button, I wanna completely change the button from TEXT to ICON, is that possible? I looked here and there and I saw another thread about this with .tt(something) fonts on buttons, does this still work? |
@Questionark: Sorry. Then @colesnicov and @ocornut are right. ImageButton() is what you're looking for. |
Alrighty then, thanks 4 your help :D |
I really can't get this to work, could someone give me a quick pseudo code to look at? I really don't understand the demo.cpp This is my current code, which was a disaster: `static float tex_w = 32.0f;
|
You can add an "icon font" so that you can use normal ImGui::Button() to display the icons (because they are actually text characters). The drawback is that they aren't multicolor. ImGui::ImageButton() instead allows you to use a generic image (e.g. png, jpg,etc.) as a button.
ImTextureID is something your ImGui backend must implement (that's why it is not present in imgui_demo.cpp). Basically you need to write code that can load an image and turn it into a texture. |
Hey thanks for replying @Flix01 I don't really care about colors, white/black is completely fine for me. |
and would it be possible to provide a simple pseudo code with these "Icon fonts" in use? |
Well, you just need the icon font .ttf and the header file. In the link there are 3 icon fonts: I suggest you use FontAwesome, since it's the most popular. However in that repository the .ttf are not present, because they are generated on the fly by a python script. Alternatively you can use these links for FontAwesome: |
I already have a .ttf font, so I was wondering, if I already have one, would I need to even add the IconsFontAwesome? |
The pseudo code is the same as Juliette's repository. Something like: #include "IconsFontAwesome.h"
ImGuiIO& io = ImGui::GetIO();
io.Fonts->AddFontDefault();
// merge in icons from Font Awesome
static const ImWchar icons_ranges[] = { ICON_MIN_FA, ICON_MAX_FA, 0 };
ImFontConfig icons_config; icons_config.MergeMode = true; icons_config.PixelSnapH = true;
io.Fonts->AddFontFromFileTTF( fontFile.c_str(), 16.0f, &icons_config, icons_ranges);
// in an imgui window somewhere...
ImGui::Text( ICON_FA_FILE " File" ); // use string literal concatenation, ouputs a file icon and File as a string.
[Of course you must change the .ttf name and the header file name...] |
You need to add the .ttf ICON font to yours. |
If your .ttf font already includes the icons you want to use, you don't need nothing else... |
I'm not sure I'm following, I have a .ttf file ONLY, and when I open it I see bunch of icons in my interest. |
OK. Now there's one more question: Are the icons standard UTF8 characters ? |
I takes less time if you tell me the name of your .ttf file... |
And how can I check that exactly? |
Well it's a custom one a friend made for me, |
Well, it's an icon font! You should know which glyphs are mapped with the icons and add them to the "icons_ranges[]". Maybe asking your friend or using some kind of font viewer might help. |
He just logged off :( Well can we go back to the FontAwesome, I just installed it and pasted it all into my imgui folder, and I've included the IconFontAwesome inside the imgui.h, but how do I exactly use this code now? And how can I customize/download other icons and use them with FontAwesome? |
See the code I pasted above: you must use MergeMode: Of course you can use ImGui::Button() instead |
P.S. Your "TuxGodsIcons.ttf" is almost unusable, because it maps its icons in the interval: That probably means that you can't use the uppercase range from "A" to "M" if you want to use those icons (unless you shift the interval somewhere with a .ttf font editor). |
Thanks for your help, I really appreciate it @Flix01 I kinda gave up on the TuxGodsIcons.ttf, so I'm trying to figure out how to add icons and use them. To be honest, I don't really understand most of the pseudo code you provided me. Currently this is my code: `//Example starts here
|
Although, the issue is that it says fontFile.c_str() was not declared in this scope, and I have no idea what it actually is. |
Okay so, I fixed some stuff, and I'm trying out this fontawesome-webfont.ttf Although, how do I apply the font to the button? Like I'm currently doing this:
|
ImGuiIO& io = ImGui::GetIO();
io.Fonts->AddFontDefault();
// merge in icons from Font Awesome
static const ImWchar icons_ranges[] = { ICON_MIN_FA, ICON_MAX_FA, 0 };
ImFontConfig icons_config; icons_config.MergeMode = true; icons_config.PixelSnapH = true;
io.Fonts->AddFontFromFileTTF( "../../ImGUI/fonts/fontawesome-webfont.ttf", 13.0f, &icons_config, icons_ranges);
if (ImGui::Button(ICON_FA_FILE " File")) {} |
It just shows a question mark on the button, does it not load the correct path? |
I definitely copy pasted the exact same code |
And it still seems to give me the question mark as an ICON, then beside the ICON (which is a questionmark) it gives me text like FILE as you wrote. |
OK. Things you can check:
I think point (1) might be the most probable. |
I'm on linux myself. So I guess some things would change? |
Point 3 and 4 should be OK. And remember that on Linux file system names are case sensitive. |
Yes of course, I just checked point 1, and removed the path, rechecked and it still gave me the question mark, which means I input the wrong path. Now I'm kinda confused. Do I have to place the path based on where the code is, or based on where the included .h files are? Let's say I'm coding in this path: MainFolder/Codenz/File.cpp How would I go by declaring the path? |
And to be sure, are we talking about the imgui.h as ".h definitions file" in point 2? |
"IconsFontAwesome.h" of course.
Relative to the (exe) program you run, not the source files. |
This makes no sense, it still gives me the damn question-mark. |
The two in the links I posted above (you can rename definitions.h -> IconsFontAwesome.h and font.ttf -> FontAwesome.ttf). I've tested them myself. However I still think it's a path problem. Try the following: just copy/paste/rename FontAwesome.ttf next to your exe, then change the line this way: |
Okay so, I did as you said and it still wouldn't work, so what I tried was adding a random .h file inside the folder of the .ttf, and #include .h file, to see if it actually could include such a file, to check if the path was valid, and guess what it was a valid path, so apparently it's not anything to do with the path, cuz the compiler validates the path. So I'm lost again. |
One thing is including a source file inside another, another thing is loading a file from the current path in the exe. What you could try is just to use another (non-icon) .ttf font loaded from file in an imgui demo (without using the merge mode), to be sure it can find it. |
I honestly can't see why it shouldn't work, there's nothing wrong with the code, this is exactly what the code is 1:1, copy pasted.
|
I will try that |
Questionark, please spend time with a debugger, stepping inside your code and imgui code, and understanding what you are doing wrong yourself. It's ok to get some help but this is not a place for teaching c++ so we'd expect you to spend more time solving your problem before firing up repeated messages with vague requests :)
The demo window (which you can call) has a font browser which you can use to inspect the status and contents of your loaded fonts.
Omar
… On 12 Apr 2017, at 17:32, Flix ***@***.***> wrote:
The two in the links I posted above (you can rename definitions.h -> IconsFontAwesome.h and font.ttf -> FontAwesome.ttf). I've tested them myself.
However I still think it's a path problem. Try the following: just copy/paste/rename FontAwesome.ttf next to your exe, then change the line this way:
io.Fonts->AddFontFromFileTTF( "FontAwesome.ttf", 13.0f, &icons_config, icons_ranges);
Recompile and rerun the program (outside of any IDE is better) and see if it works.
―
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub, or mute the thread.
|
"../../ImGUI/extra_fonts/FontXD" has no .ttf extension... |
Yea I forgot that. |
Actually I thought the issue was already closed... |
Okay, well I'm gonna have to give up at this point and try something else @Flix01 I appreciate your help and the time you spent. Have a good day. |
Don't give up. If flix01 is happy to get you can follow up over e-mail.
I am going to close this issue but you can still post messages to a closed issue.
… On 12 Apr 2017, at 17:52, Questionark ***@***.***> wrote:
Okay, well I'm gonna have to give up at this point and try something else @Flix01 I appreciate your help and the time you spent. Have a good day.
―
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub, or mute the thread.
|
@Questionark @ocornut good day to you too.
That's the main reason why I kept answering: I thought the issue was already closed (no need to pollute Imgui with details too much OT like relative path resolution). |
Wait wut, I didn't even know you could continue in a closed thread. |
@Flix01 Would you wanna continue the help? |
Honestly, I'm running out of advices... |
I just had a similar issue (question mark instead of icon) which was caused by not using a fresh ImFontConfig. |
So I'd like to know if it's possible to add pictures on the buttons.
I can't really find any examples in the demo.
The text was updated successfully, but these errors were encountered: