Make your own GUI apps in C++ (with ImGui and Vulkan)

Поделиться
HTML-код
  • Опубликовано: 26 авг 2024

Комментарии • 211

  • @unknownunknown6531
    @unknownunknown6531 2 года назад +163

    I definitely want to see a video explaining how to customize dear imgui theme!

    • @aqg7vy
      @aqg7vy 2 года назад +21

      Here you go. Call this during your init of imgui. change the colors to whatever you want.
      void setDefaultTheme() {
      // Colors
      ImVec4 blackSemi = ImVec4(0.00f, 0.00f, 0.00f, 0.94f);
      ImVec4 black = ImVec4(0.00f, 0.00f, 0.00f, 1.00f);
      ImVec4 red = ImVec4(0.23f, 0.16f, 0.16f, 1.00f);
      ImVec4 beige = ImVec4(0.78f, 0.62f, 0.51f, 1.00f);
      ImVec4 darkGrey = ImVec4(0.24f, 0.24f, 0.24f, 1.00f);
      ImVec4 greenGrey = ImVec4(0.148f, 0.168f, 0.153f, 1.00f);
      ImVec4 white = ImVec4(1.00f, 1.00f, 1.00f, 1.00f);
      ImVec4 darkerGrey = ImVec4(0.03f, 0.03f, 0.03f, 1.00f);
      ImVec4 grey = ImVec4(0.41f, 0.41f, 0.41f, 1.00f);
      ImVec4 green = ImVec4(0.21f, 0.27f, 0.27f, 1.00f);
      ImVec4* colors = ImGui::GetStyle().Colors;
      colors[ImGuiCol_Text] = beige;
      colors[ImGuiCol_TextDisabled] = white;
      colors[ImGuiCol_WindowBg] = black;
      colors[ImGuiCol_ChildBg] = black;
      colors[ImGuiCol_PopupBg] = black;
      colors[ImGuiCol_Border] = beige;
      colors[ImGuiCol_BorderShadow] = black;
      colors[ImGuiCol_FrameBg] = red;
      colors[ImGuiCol_FrameBgHovered] = darkerGrey;
      colors[ImGuiCol_FrameBgActive] = black;
      colors[ImGuiCol_TitleBg] = black;
      colors[ImGuiCol_TitleBgActive] = black;
      colors[ImGuiCol_TitleBgCollapsed] = black;
      colors[ImGuiCol_MenuBarBg] = red;
      colors[ImGuiCol_ScrollbarBg] = black;
      colors[ImGuiCol_ScrollbarGrab] = red;
      colors[ImGuiCol_ScrollbarGrabHovered] = darkerGrey;
      colors[ImGuiCol_ScrollbarGrabActive] = grey;
      colors[ImGuiCol_CheckMark] = beige;
      colors[ImGuiCol_SliderGrab] = beige;
      colors[ImGuiCol_SliderGrabActive] = beige;
      colors[ImGuiCol_Button] = red;
      colors[ImGuiCol_ButtonHovered] = darkerGrey;
      colors[ImGuiCol_ButtonActive] = red;
      colors[ImGuiCol_Header] = red;
      colors[ImGuiCol_HeaderHovered] = darkerGrey;
      colors[ImGuiCol_HeaderActive] = black;
      colors[ImGuiCol_Separator] = beige;
      colors[ImGuiCol_SeparatorHovered] = darkerGrey;
      colors[ImGuiCol_SeparatorActive] = beige;
      colors[ImGuiCol_ResizeGrip] = black;
      colors[ImGuiCol_ResizeGripHovered] = darkerGrey;
      colors[ImGuiCol_ResizeGripActive] = black;
      colors[ImGuiCol_Tab] = red;
      colors[ImGuiCol_TabHovered] = darkerGrey;
      colors[ImGuiCol_TabActive] = darkerGrey;
      colors[ImGuiCol_TabUnfocused] = black;
      colors[ImGuiCol_TabUnfocusedActive] = black;
      colors[ImGuiCol_PlotLines] = beige;
      colors[ImGuiCol_PlotLinesHovered] = darkerGrey;
      colors[ImGuiCol_PlotHistogram] = beige;
      colors[ImGuiCol_PlotHistogramHovered] = darkerGrey;
      colors[ImGuiCol_TextSelectedBg] = black;
      colors[ImGuiCol_DragDropTarget] = beige;
      colors[ImGuiCol_NavHighlight] = black;
      colors[ImGuiCol_NavWindowingHighlight] = black;
      colors[ImGuiCol_NavWindowingDimBg] = black;
      colors[ImGuiCol_ModalWindowDimBg] = black;
      // IO
      ImGuiIO& io = ImGui::GetIO();
      io.FontGlobalScale = 1.6f;
      }

    • @justinpakarno4346
      @justinpakarno4346 2 года назад +7

      In the demo you can go Tools->Style Editor and play around with the values for an idea of their different effects.

    • @xvsvqc9663
      @xvsvqc9663 2 года назад +5

      @@justinpakarno4346 you can also export the style to clipboard and paste it into your source

    • @adamrushford
      @adamrushford Год назад +2

      @@xvsvqc9663 why paste.. write an import from clipboard function, easy enough

  • @archimedeis
    @archimedeis 2 года назад +5

    I literally watched that video yesterday because I wanted to do some GUI. And now this comes in at the perfect time. Thank you

  • @masheroz
    @masheroz 2 года назад +36

    I'm currently writing a program with imgui and implot. I'll be following this! Loading images is something I'm interested in for custom buttons.
    *and also storing fonts in the binary.

    • @x7themm
      @x7themm 2 года назад +4

      ImGui::IsItemClicked() After drawing the item
      You’ll probably run into a few issues messing around with fonts too much, but you can easily load one from memory

  • @mateuszkacperski1211
    @mateuszkacperski1211 2 года назад +5

    I gonna finish my beginner course in the next couple of months and I will look for some kind of GUI for c++ so thanks for this video I’m sure I will come back here :)
    God blessed you. Happy Easter :)

    • @Asdayasman
      @Asdayasman 2 года назад +1

      A _beginner_ course takes _months?_
      You need your money back. And your time.

  • @IllumTheMessage
    @IllumTheMessage 2 года назад +4

    Brilliant. Got everything running. Would love to see all the ImGUI stuff you are willing to put out. A vid on how one would: add and run linters, use Conan with this project to pull in wanted libraries, add network messaging between two Walnut applications, integrate run time dll loading to a Walnut application.

  • @andrez383
    @andrez383 Год назад +4

    Hi Cherno! Fantastic video, exactly what i was looking for. I'm really learning a lot from all your videos, especially the C++ series.
    If you would make a follow up walnut video to show how to port a walnut application to mac that would be really awesome. Keep up the good work!

  • @gijimbo1337
    @gijimbo1337 2 года назад +8

    Excellent, thank you!
    Maybe this is out on a limb but I'd be interested to see a similar example using VS Code, CMake and MinGW-w64 tools instead of Visual Studio. That way a cross-platform application could be developed with a cross-platform toolset.

  • @petrasvestartas4359
    @petrasvestartas4359 2 года назад +15

    It would be nice if you could show how to use walnut as a visualizer. To push lines, pointclouds and triangles meshes to display.

  • @andrejbartulin
    @andrejbartulin 2 года назад +4

    You recommended ImGui, installed it from Victor's tutorial. Also ImGui is really good except with OpenGL use a lot of GPU on old machines

  • @eversonmay
    @eversonmay 2 года назад +4

    YES! more ImGui please.

  • @meirzilkha
    @meirzilkha 2 года назад +1

    Thank you so much!
    Was trying to render image using Vulkan and ImGUI! so many steps. So thank you very much on this.
    They should add the basic implementations for all backends in there example code.
    The Idea of Layers is great. so different parts of application can create a layer, and draw, and it will be taken care of drawing, in one main loop.
    Thanks. please continue sharing ImGui stuff and walnut.

  • @a.aspden
    @a.aspden 2 года назад +3

    Cool stuff as usual Cherno. I wouldn't mind seeing a video on theme customizations because I wasn't sure whether that is an imgui thing or you were thinking something else. :)

  • @ghbytdsrfhb
    @ghbytdsrfhb 2 года назад

    that "start ." in cmd trick is sweet

  • @bryanbendall973
    @bryanbendall973 2 года назад +2

    I would love to see more of this and theming would be awesome!

  • @ParhamSalamati
    @ParhamSalamati 2 года назад +1

    This has been a very useful topic, Thank you for doing this Cherno ^_^

  • @nirgivon
    @nirgivon 2 года назад +2

    A great video will be on how you create this build environment, and the differences between the debug and dist builds.
    And also, why did you choose to have the core and dependencies as different projects.
    Thanks for the great content.

  • @hyprobablyausto
    @hyprobablyausto Год назад

    been with cherno since 2017..man he hasn't changed a bit much love sir

  • @charlestheanimator1676
    @charlestheanimator1676 2 года назад

    Walnut looks great can't wait to see how it grows

  • @master138
    @master138 Год назад

    For ui, I use something called gempyre it's basically shows up a web browser but instead of using javascript you use c++ for the backend. I really like the idea. It is MIT BTW.

  • @ronensuperexplainer
    @ronensuperexplainer 2 года назад

    Wow. I was so waiting for this video

  • @wjrasmussen666
    @wjrasmussen666 2 года назад +1

    I would love to see more videos per your commenting request.

  • @khalidabduljaleel
    @khalidabduljaleel Год назад

    Would love to see more videos on Walnut!

  • @ilgar.roshen
    @ilgar.roshen 2 года назад +2

    Thanks !
    I was looking for a good GUI (Graphic User Interface) library for my project as a replacement for "Electron"
    [ which I use to create a nice looking window ]

  • @MichaelAlcock
    @MichaelAlcock 2 года назад +2

    Yan, I would love to know how to autosize(autoscale) windows. Currently they stay fixed and its so annoying.
    Also how to implement a landscape/portrait view

  • @Basel-ll8fj
    @Basel-ll8fj 2 года назад

    i love the c++ series
    thank you 🌹

  • @ZdenyWoW
    @ZdenyWoW 2 года назад +1

    why are you creating the Walnut::Application with new and deleting it via delete instead of using smart pointers?

  • @007LvB
    @007LvB 2 года назад

    Good work! I like seeing it.

  • @brooth2566
    @brooth2566 2 года назад +1

    this man is nuts

  • @turgutbababalm9981
    @turgutbababalm9981 2 года назад +1

    Thanks for doing this! finally a GUI tutorial from the best of the best C++ youtuber!

  • @TheBlackRogue96
    @TheBlackRogue96 2 года назад

    Great video. Would love to see a video on how you manage to make resizable Windows windows with 0 borders and a custom titlebar

  • @xingwenju
    @xingwenju Год назад

    quite useful this framework

  • @bobbill9865
    @bobbill9865 2 года назад

    I'd love to see video(s) about changing the imgui theme!

  • @OperationDarkside
    @OperationDarkside 2 года назад

    This looks really nice. The only thing bothering me is the "new" you need to create the Application instance.

  • @segfault-berlin
    @segfault-berlin 2 года назад +1

    This looks like exactly what I need for a few projects. Will there be support for Linux and MacOS

  • @JonMann87
    @JonMann87 2 года назад

    I would love a video on customising dear imgui themes

  • @davidfrischknecht8261
    @davidfrischknecht8261 Год назад +1

    A big showstopper for me is the inability to make it look like a native app.

  • @MrLoop-wz2sb
    @MrLoop-wz2sb 2 года назад

    thank you for always making good contents.. real educational..

  • @sebleaf8433
    @sebleaf8433 Год назад

    Would love a follow up!

  • @Chendadon
    @Chendadon 2 года назад

    video suggestion: intro to shaders, metal shader and overall how to incorporate shaders in different platforms. THANKS !!

  • @wreptar1938
    @wreptar1938 2 года назад +1

    Hey, I'm trying to learn the Win32 library, I was wondering if anyone can tell me how to find out what every macro / function does and where to look. This applies to every library too I suppose so if you know that would be a great great help.

  • @CunningBard
    @CunningBard 2 года назад +2

    Im not used to cherno with really short hair,

  • @thomasmccallum376
    @thomasmccallum376 2 года назад +1

    Why not use Qt for GUIs? You can do basically anything you want with Qt and it's automatically cross-platform.

  • @adamoolah
    @adamoolah 4 месяца назад

    but, how can you set this up on linux?

  • @GustavoValdiviesso
    @GustavoValdiviesso 2 года назад

    I am interested in seeing more about customization.

  • @bhavindharia8304
    @bhavindharia8304 Год назад

    I love your videos. But Qt is the best framework for c++ gui😁

  • @utu009d
    @utu009d 2 года назад

    Cool! Thanks for your job! A have started to follow your videos few days ago, because of ImGUI :-) For sure, I will give a try to the Walnut, I am pretty new to "gaming C++". Anyway, do you know Poco framework? Do you thing, is possible to use ImGUI/Walnut as UI layer fot this framework? I would like to implement some calculations out of the main loop (data analysys, networking) and flush the results to a graph. Tips are appreciated :-)

  • @MilosTrickovic
    @MilosTrickovic 2 года назад

    show us a detailed video how to make a custom style for ImGui, this would be nice since it is not very well documented

  • @rudyfun3250
    @rudyfun3250 2 года назад

    I see that there are PushLayers, but I don't see any PopLayers? How is pushing and popping supposed to work or what is the intended flow when making a GUI app?

  • @MegaMech
    @MegaMech 2 года назад +1

    How to add Vulkan to sm64port:
    When?

  • @kirammanenjoyer
    @kirammanenjoyer 2 года назад +3

    Hello cherno. I’m curious when do you plan to add distribution to hazel 2D to export games? I tried to code my own solution but it doesn’t work at all. They don’t teach this stuff at school😞

    • @darer13
      @darer13 2 года назад +1

      yo. i dont know much but maybe we can work on it together?

    • @kirammanenjoyer
      @kirammanenjoyer Год назад

      @@darer13 hey bro sorry for late reply 😅 I did not receive notification about your comment. Did you figure it out? Would you like to add me on discord?

  • @cchheww
    @cchheww Год назад

    Pleaaaaaaase make more videos on tutorials for making GUI. i have a big final project and i have to make a GUI and i want to use walnut for it ;-;

  • @fitty560
    @fitty560 Год назад

    How to setup this for Visual Studio CODE?

  • @dickheadrecs
    @dickheadrecs 2 года назад

    love this channel

  • @raphaeljaggerd3585
    @raphaeljaggerd3585 11 месяцев назад

    Please teach us how to make a framework like walnut

  • @mwindowshz1869
    @mwindowshz1869 2 года назад

    The Image class is good, but what if I want to render video?
    then each time calling SetData() consumes cpu and time uploading new image to GPU, is there a way to map and update image continuasly, so if original image pointer for exmpale a cv::Mat is changed, then the walnut image is mapped to the memory and no reuploding is done? so it will be faster? is this possible?

  • @SandeepKumarP
    @SandeepKumarP Год назад +1

    A series on this would be great. It can be an independent series which does everything from scratch including styling. In The end, it can plug into the OpenGL and Game Engine series.

  • @matsomo
    @matsomo 2 года назад +1

    Still waiting for Cherno to name one of his projects Deeznuts

  • @jayshay7416
    @jayshay7416 7 месяцев назад

    What Visual Studio Theme is that?

  • @SYBIOTE
    @SYBIOTE Год назад

    aah , I wish we get a macOS build soon

  • @vaanidel2117
    @vaanidel2117 2 года назад

    Is there any benefit to the layer stack being set up the way it is here (using shared pointers) vs how it's set up in Hazel (raw pointers)? Would Hazel benefit from the shared_ptr approach at all?

  • @AMildCaseOfCovid
    @AMildCaseOfCovid Год назад

    Looks good, but I'm too much of a noob to understand how to switch to DX12. I'll just start with his non-ideal start from the previous ImGUI video

  • @demonking2526
    @demonking2526 2 года назад

    Great vid! Nice haircut m8

  • @D0sart
    @D0sart 2 года назад

    Why do you use the QT?

  • @amirhosein2835
    @amirhosein2835 2 года назад

    Dear cherno!
    how can we make an adjustable scrollbar in imgui?

  • @hybridspyda
    @hybridspyda 2 года назад +1

    I'm getting an error when running the WalnutApp for the first time - I have Vulkan installed into a non-default location and added "%(VULKAN_SDK)\Include" to the C/C++ > General > Additional Include Directories but it's still saying that it cannot open source file "vulkan/vulkan.h" after doing that :(

    • @DFPercush
      @DFPercush 2 года назад

      Try $ instead of %. Assuming you checked that environment variable actually exists.
      (edit) or %VULKAN_SDK%

    • @jukit3906
      @jukit3906 2 года назад

      do you have vulkan installed ?

    • @darer13
      @darer13 2 года назад

      I had issues with Vulkan. Wasnt installed. I installed it and then i had to restart my computer, but it worked then

    • @hybridspyda
      @hybridspyda 2 года назад

      @@DFPercush I verified that this was using the correct path, I used the "Macros" section to check.

    • @hybridspyda
      @hybridspyda 2 года назад

      @@darer13 I have the SDK installed, do I need to install something else in addition? Tried restarting my PC but still having the same issue.

  • @zhousam9783
    @zhousam9783 Год назад

    I like the font you use in visual studio, will you please share it here? 😊

  • @blancatrujillohigueras9865
    @blancatrujillohigueras9865 Год назад

    Hi , Cherno.. What do you thing about rust language for use in graphics , and it will be interesting that with yours skills , one project open source like autocad , for drawing, no one made something similar with opengl or directx or vulkan..

  • @mystisification
    @mystisification 2 года назад

    Thanks for the video! I wonder what you (or other viewers) would advise to make a text editor. What kind of framework for example?

  • @Chainelove
    @Chainelove 2 года назад

    Can we sign the executable that is produced by dist ? It's something I never did and am really curious about :p
    I always get warnings when I launch an executable I made on a different computer.

  • @Awwe12675
    @Awwe12675 2 года назад

    I have question
    How GUI works? I mean how

  • @msaad2796
    @msaad2796 Год назад

    is there any c++ gui app tutorials for beginners?

  • @xvsvqc9663
    @xvsvqc9663 2 года назад

    Do you reckon it's possible to make a c# wrapper for walnut?

  • @chrischoir3594
    @chrischoir3594 2 года назад

    why not just use visual studio internal tools to make ui?

  • @RagdollRocket
    @RagdollRocket 2 года назад

    Is there any way to add unit tests for Immediate Mode GUI? thank you for your video!

  • @b4ttlemast0r
    @b4ttlemast0r 2 года назад

    this looks pretty useful if you are gonna work on it a bit more. I'd like to see how to remove the dockspace in a future video once that's possible

  • @dexzoyp
    @dexzoyp 2 года назад

    It will be really cool to make the project with CMake build system and show on camera, how to write CMakeLists...

    • @Meddten
      @Meddten 2 года назад

      He said he hates cmake

  • @ruddymolina7044
    @ruddymolina7044 2 года назад

    someone knowns what IDE is using Master Cherno?

  • @georgecop9538
    @georgecop9538 2 года назад

    This video gave me the idea to create a wrapper around Win32. (I kid you not I'm not crazy). It is not finished, I don't have any repo (yet).

  • @ultrablack7271
    @ultrablack7271 2 года назад

    Why not qt? What are the advantages?

  • @charr6108
    @charr6108 2 года назад

    yo cherno, how to add a window icon for apps for windows 10?
    and how to auto dock the window to the dock space and auto hide the tab bar? :D

  • @absoriann
    @absoriann 2 года назад

    Hi, what do you think about clion ide?

  • @ndmnet
    @ndmnet Год назад

    I am watching this at the 8 month point since this video's release. Is title bar editing available with Walnut yet or is that still in development?

  • @x1Ricardo
    @x1Ricardo 2 года назад

    What is your opinion of U++?

  • @ruddymolina7044
    @ruddymolina7044 2 года назад

    Hey man do you know something like wxWidgets but lighter and without that 2gb of dlls. ?

  • @Xphy
    @Xphy 2 года назад

    Error setupVulkan err=-9 abort() has called

  • @killua287
    @killua287 2 года назад

    Is there a devlog coming for the ludum dare game?

  • @shamssalehin2376
    @shamssalehin2376 Год назад

    Im a qt fan, both for python binding and CPP

  • @genenorton2880
    @genenorton2880 2 года назад

    I'm new to ImGUI and vulkan but your work on walnut looks very useful. However, when I follow your video, first it does not compile because I don't have Vulkan. So I downloaded vulkan sdk. Re-ran your setup script. Now it builds but does not run because it can't find the vulkan dll. installed the vulkan runtime. Now it crashes/aborts with: [vulkan] Error: VkResult = -9.
    Can you or someone point me to a beginners guide for vulkan and imgui?
    Any plans to have Walnut work with directx?
    Thanks for the video, looking forward to more on this.

  • @poiau7412
    @poiau7412 2 года назад

    i can use it with d3d9?

  • @vedantmatanhelia1016
    @vedantmatanhelia1016 2 года назад

    It would still be immediate mode so not very good for things like text editors and all

  • @beProsto
    @beProsto 2 года назад +4

    vulkan 😳

  • @dibyojyotibhattacherjee4279
    @dibyojyotibhattacherjee4279 2 года назад

    Hey can you do a video on what type of editor should a beginner use for c++, ide or normal text editor?

    • @dancode9738
      @dancode9738 2 года назад

      Visual Studio is free and that is what Cherno is using here.

  • @steamnotstem9047
    @steamnotstem9047 Год назад

    When I run walnut (4:03) it gives me an error saying it can't find this path: C:\Users\brayd\Desktop\Projects\Walnut Projects\Walnut\bin\Debug-windows-x86_64\WalnutApp\WalnutApp.exe
    So I go there, and there is only a log file called WalnutApp.log.
    Please help.
    Thanks,
    STEAM not STEM

  • @Silencer1337
    @Silencer1337 2 года назад

    I am allergic to nuts; can I still use the project? /namingtirade

  • @Mitch_Crane
    @Mitch_Crane 2 года назад +1

    Where did the name Walnut come from?

    • @yassin_eldeeb
      @yassin_eldeeb 2 года назад +2

      Well...hazel(hazelnut), most of the code is inspired by hazel, It's all nuts.

    • @hatemel-kharashy8856
      @hatemel-kharashy8856 2 года назад

      Hazelnut is the engine editor. Maybe this was the inspiration for "Walnut" name

  • @paulred9136
    @paulred9136 2 года назад +1

    Hi, and thanks for your videos, Can you make a video that explains the difference between Cuda, Optix and Sfml and SDL if you can use them with OpenGL or Vulkan or are just other things... I'm a bit confused about this libraries, thanks

  • @rayansattarkhan6807
    @rayansattarkhan6807 2 года назад

    Hey Cherno, can you make a video about how to make an installer exe for an application in C++?

  • @daniel__landgraf
    @daniel__landgraf 2 года назад

    Is the Game Engine series dead?

  • @wanderingzanzey2126
    @wanderingzanzey2126 2 года назад

    Hey man, loving Walnut. How do i style it though? I am having issues setting styles - keeps giving me erros when i try to use `ImGui::PushStyleVar(ImGuiStyleVar_FrameRounding, 5);` - love to kow how to get this up and running with custom styles.

  • @soheibmemes2594
    @soheibmemes2594 2 года назад +1

    wow