SDL for a edit text box - c++

I want to write a code editor which supports code highlighting, selection, search and replace and similar features.
Since I'm unsatisfied with normal edit box controls (I want WAY more flexibility) I decided to write my own UI controls. It would be great if the editor could run on linux and windows (I don't have a Mac but that would be great as well) and thus I've been thinking on using SDL to render the edit text box control.
As far as I know I can draw anti-aliased text and SDL is nicely cross-compatible, but I'm unsure if functionalities like smooth scrolling could be implemented.
Question: is it possible to use SDL for a custom edit text box and have smooth scrolling?

Here is LazyFoo's tutorial on editable text input boxes: http://lazyfoo.net/tutorials/SDL/32_text_input_and_clipboard_handling/index.php
It doesn't do scrolling: you'll have to do it yourself. The LazyFoo tutorials on scrolling and scrolling backgrounds here ( http://lazyfoo.net/tutorials/SDL/index.php ) should help, although it's not, obviously, a text box that's being scrolled.

Related

How to create (curve edged/Round Rectangle) mfc buttons, text box and combo box?

I am new to MFC, need to change the existing design of our legacy MFC app. unlike the standard MFC sharp edged buttons, text box etc. I need curve edged design for the whole app. please suggest if there is any way I can achieve this.
Curve edges as shown in the image, so far I couldn't achieve this. Please let me know if it is possible or not through MFC. It is not possible with BCGSoft also

Colorizing the titlebar in macOS with multiple colors

I have a Qt app that runs on macOS. I found a way to change the color of the titlebar here, however I want to take it a step further. I want to mimic the titlebar that the Slack and Discord apps use. For example:
As you can see, the color of the controls in the window extend to the very top of the app's window. I figure there are two ways to accomplish what I want:
I can build on the code pasted above. Looking through some of the Apple developer documentation, I think I can create a couple NsWindows on top of the titlebar with whatever width I want and attach the titlebar as a parent for those windows. Once I do that I should be able to make the same backgroundColor() color call for each one. Of course, this will require me to keep track of when the controls or window are resized and adjust the NsWindows of the titlebar, and I am not sure what (if any) issues that could cause.
Maybe there is a way to essentially set the height of the titlebar to 0? I wonder if that's what the Discord app is doing because:
if you look closely, the edit box that says "Find or start a conversation" is vertically lined with the close, minimize and maximize buttons, as is the "Activity" label. But if the controls do extend to the top of the app's window then how are the standard app buttons getting painted?
I'd be curious to know how Slack and Discord accomplish this even though I know they're not using Qt.
I realize there is not a Qt solution since Qt does not paint the titlebar. I know this will be OS-specific, but since I do not have any real experience with Objective-C++ or working with Cocoa (all of my programming experience on macOS has been standard C++ with non-UI or Qt-based code) I'd appreciate any suggestions or guidance!
Natively this is done with fullSizeContentView and titlebarAppearsTransparent properties of NSWindow. Once you set them to true, you can draw or place controls beneath the title bar.

Producing buttons with Direct2D and DirectWrite (C++, DirectX)

I've been looking around for awhile about how to produce buttons using Direct2D and DirectWrite with no luck. I'm comfortable with shapes, text and that jazz. However, it suddenly occurred to me I might be looking about it in the wrong way.
Take the sentence:
you draw your controls and content for your app using the Direct2D and
DirectWrite APIs, handling all the input events directly.
I'm now thinking this means that instead of being able to quickly produce a fully functional button as I would using XAML. I would draw the button, manually check the location of the mouse on click, whether it's within the button boundaries and then handle the event? Similar method for hovering without the click.
Is this the kind of method required when using Direct2D and DirectWrite?
I haven't any experience with DirectX, but in OpenGL I build my buttons from scratch. Assuming you have animated sprites implemented, your buttons are essentially sprites that play certain animations in response to being clicked, hovered over, etc., and which you can register callbacks with. In my 2D engine, I have a class called UiButton, which inherits Sprite, and listens for various UI events. It gets more complicated when you want to handle keyboard navigation (arrow keys + enter to select) as you have to think about how the buttons are connected and which of them has focus at any given moment.
Here is my implementation for reference:
Headers: https://github.com/RobJinman/dodge/tree/master/Dodge/include/dodge/ui
Source: https://github.com/RobJinman/dodge/tree/master/Dodge/src/ui
If you're not prepared to roll your own, Googling "direct2d gui framework" seems to bring up some promising results.
Sorry I can't be of more help.
Yes, to draw a UI Button with Direct2D, you need to handle everything yourself, why? Direct2D is a 2D graphics API, not controls library. you need to draw the layout of your button, and handle the message of your button(such as click, mouse hover...), you lost lots of convenient and that's time-consuming, but the most important thing is: you can control it by yourself!
Direct2D is a graphics library. UI controls like, Text-selection, Textbox, and Buttons is not a part of it. However the benefits of using Direct2D and DirectWrite is we can implement our own UI controls, and having a full control of it.
Please also see: ID2D1Geometry::FillsContainsPoint() for hit-testing task.

Is there a way to customize what a button looks like in C++?

I have programmed in HTML, Java, CSS, C++, VB, an Python.
I'm looking to make button that looks completely the way I want it to look!
Like in HTML+Java+CSS, I can do that very thing!
I'm using Netbeans IDE. I was about to just use OpenGL to do the GUI programming for my programs, since it is so hard to find information on customized GUIs.
I just want to learn how to make the image and give button functionality to it. I want to be able to make the shape, color, and effects (when clicked, hovered over, etc).
Oh, and I program in Ubuntu Linux!
Any help would be appreciated!
Qt is a good idea, but you won't learn how it works, though it's not really important and far easier like that. Using C++ you will have libraries that respect the encapsulation principle, so you won't know at the first sight how do is work, just how to use it.
If you really want to code a button yourself, you can take a 2D drawing library such as SFML, with which you'll draw your button and handle events on it.
When I wrote a custom button class for my app, we (the C++ developers) were given PNG images from the designer department. They are much better with tools like Photoshop then we developers. We just showed image1.PNG by default, image2.PNG when the mouse was over the button ("hover"), and image3.PNG when the mouse was over the button and pressed. Drawing? Not necessary.
Color is trivial for designers. Shape isn't hard either. PNGs are rectangular, but can be transparent. So rounded edges are just a matter of a few transparent pixels there.

Overdrawing on the toolbar? Alternative idea?

Main aim is wanting to draw Tab's within the draw area of the Toolbar of the Applicaiton for a NoteBook or Tab's to use the above space instead of being bellow the toolbar.
The frame work we're using is WxWidgets, C++/C. I have looked around but have not been able to find a solution or if anyone has done a similar approach with drawing tab's actually inside the toolbar itself.
I read some Microsoft MSDN articles and they recommend against controls drawing over controls.
I did some test's today, and think I've come up with a solution. My solution is to draw the window like normal, but have the NoteBook on the right in a child window that is dynamically resized and repositioned so that it's tab's are overlay on-top of the toolbar to make the most effective use of the area. I would have to deal with on focus and lose focus window messages, but this is the most elegant way I can think about achieving the task.
Any Idea's you can recommend or problem's I may face with following this approach.
I would be concerned about using overlapping widgets like this. Although it may not look quite the same visually I would suggest looking at wxToolBook which puts tabs in a toolbar and would solve your problem, you could use the GetToolBar method to insert your own toolbar items.
If that wasn't close enough visually to what you are looking to achieve I would suggest deriving a new control from wxBookCtrlBase and then creating a tab control with custom drawn tabs which you could add to the toolbar using wxToolBar::AddControl.