Custom SFML Control Library

[Recoil]

Instead of constantly bumping this thread I am going to keep this first post up to date with the latest images and progress.

 

Normal WindowStyle mode:

 

Graphical WindowStyle mode:

 

Current control shape and coloring options:

 

Form glyph icons:

 

Form resize cursors:

 

Latest progress and ever-growing TODO list of junkz:

Spoiler

-------------------------|PROJECTS|-------------------------
'
Project Name:        (WorkingName)GFX Control Library
Licensing:            Closed at this time.
Description:        Controls with basic functionality.
'
---------------------------------------------
Project Name:        (WorkingName)SFML Game Engine
Licensing:            Closed at this time.
Description:        Game loop with fixed timestep, and renders a UX interface.
'
---------------------------------------------
Project Name:        (WorkingName)Theme Editor
Licensing:            Closed at this time.
Description:        Control Appearance [shapes, styles, and colors].
'
---------------------------------------------
Project Name:        (WorkingName)UX Editor
Licensing:            Closed at this time.
Description:        Control Layout [sizes, positions, locations, and parents].
'
-------------------------|PROGRESS|-------------------------
'
[FEATURES]
-Normal Winforms form - smoother moving and resizing, harsh on FPS.
-Graphical form - easier on FPS, a bit laggy on move and resize.
-Client area size - window auto resizes borders so client area stays desired size.
-Rendering loop uses a fixed timestep for proper physics calculations.
-Custom form cursors.
-Custom button glyph icons...(needs size alignment properties)
'
[CONTROLS]
-Form (half-working)
-Panel (Working)
-Button (Working)
-GroupBox (Working)
-Label (Working)
-TextBox (multiline will likely be separate control)
-NumericUpDown
-Vertical/Horizontal ScrollBar
-ComboBox
-ListBox
-CheckedListBox
-Dial/Knob
-CheckBox
-RadioButton
-ProgressBar
-Switch
-TrackBar
-Gauge
-TabControl
'
[CONTROL SHAPES]
-RoundedRectangle
--Normal corners (all rounded or cornered)
--TopOnly round corners (flat bottom)
--BottomOnly round corners (flat top)
--LeftOnly round corners (flat right)
--RightOnly round corners (flat left)
--Banner:1 to n^th points for the bottom radius (round or
  corner top)
-Ellipse
--Circles
--Any proportionate shape with equal width/height and n^th
  sides (triangle3, pentagon5, hexagon6, etc)
--Any disproportionate shape with unequal width/height (oval,
  rhombus, etc)
(currently unable to do: trapezoid, parallelogram)
'
[CONTROL COLORS]
-Solid RBGA
-VerticalGradient
-HorizontalGradient
-RadialGradient (may remove)
-Image(from file)
'
[MISC CONTROL PROPERTIES]
-Opacity
-Padding
--Margins
-Text alignment
-Font offset - for variations in font spacing
-Text justification
--Left align
--Middle align
--Right align
-Text direction
--Vertical
--Horizontal
-Text backcolors (to stand out better)
-Text effects(if font supports it)
--Normal
--Bold
--Italic
--Strikethrough
--Underline
-Coordinates for mouse position on each control.
-Forms
--Minimize/Maximize/Close buttons (needs code).
--Titlebar text
--Form icon
--Client area
-Buttons
--Auto highlight
--Mouse over, mouse down highlights
--Selected back light
--Glyph images
-GroupBoxes
--Top/Bottom/Left/Right header directions
'
---------------------------|TODO|---------------------------
'
[REQUIRED]
-Everything is intertwined in the Engine right now.  The
 engine needs to be standalone, and the Testbed be used for
 a GUI control example, or able to be used for a game.  Need
 to fix when I have the time...
'
[OVERHAUL]
-[DONE]GUI separated from Engine and is now a Form control.
-Enum screen type - [None/Windowed/Fullscreen]
-Set new testing controls in Testbed...logically organize
 them in an example GUI...set all properties for each
 control.
-[DONE]Remove existing testing controls from Engine.
-Control Property Categories- Setup like winforms:
 [Accessibility, Appearance, Behavior, Data, Design, Focus,
 Layout] *(may not require all)*
-Get control sizes, positions, locations, parents,
 (and actions?) from UI.xml file, loaded during
 initialization.
-Get control shape, style, and colors from a Theme.xml file,
 loaded during initialization.
'
[FIX]
-Ensure ALL properties for child controls (buttons label)
 are able to be passed through parent control (button)...
-Property Naming Conventions:
 LabelText -> ButtonLabelText -> GroupBoxHeaderLabelText
-Ensure control is being constructed in a working order to
 prevent misalignments...
-Slim down ControlBase, and split into another
 ContainerControl class, for controls that can house other
 controls.
-ControlBase-Consolidate GetVerticalAlignment() &
 GetHorizontalAlignment() into 1 GetAlignment() function to
 return both as a Size or Vector2f...
-RoundedRectangleShape-perform check on CornerRadius
 property to make sure this value is not greater than the
 overall shape width or height
-[DONE]Ensure graphic images can stretch to the control size.
-[DONE]GroupBoxes-Top/Bottom/Left/Right header enum property,
 to allow full rounded header.
-MAYBE?-GroupBoxes-Need option to rotate text so vertical
 text can be stacked or rotated...this may be a horrible idea.
-GroupBoxes-Ensure header height is not larger than the
 control...must check width/height depending on docking.
-[DONE]Offest amount variation...required Left and Top.
-Labels-Check into kerning and linespacing instead of
 hard-coded offset of 1.0F.
-[DONE]Return the value of e.x & e.y from the m_ClientArea rectangle.
-Action for form Close button...
-Actions for Minimize/Maximize/RestoreDown buttons.
-[DONE]Figure out if 800x600 is full form bounds, or just m_ClientArea
 and adjust the form size accordingly->add titlebar and border
 size options.  Size = ClientArea, borders not calculated in size.
-Set minimum window size values to prevent sizing errors.
'
[ADD]
-Tile/Center/Stretch/Zoom enum type property for images.
-InDebug for labels - to show the bounding rectangle of the
 text on controls, so offsets can be set properly.
-ControlDocking-similar to GroupBox's HeaderDockign enum:
 [Top, Bottom, Left, Right, Center, None]
-Form Minimize & Maximize buttons.  Set actions for each.
-[DONE]Ability to resize for with dragging.
-[DONE]Ability to move form around.
-[DONE]Border does not show on form due to being outside of the window.
 Draw rectangles in place, or set size of GUI down and clear
 EngineWindow with border color.  This is buggy though...
-Form icon image
-Enum form styles similar to SFML: None, Windowed, Fullscreen, etc.
-Enum separate form button options for clarity when in window mode.
'
[ORGANIZE]
-Properties for parent control, and the children controls...
-The way controls are being setup in the Engine example.
 Set ALL properties as an example  Not required, but would
 look much better...
'
[ADDITIONAL]
-Rotation, Scale, and Origin for all controls...
-Control animations - animated image on mouseover, or on
 notification
-Control icons - small image
-Themeing???
-Bitmap Text?
-[PartiallyDONE]Glyphs.  Centered panel image on buttons.  Need to adjust alignment and size properties.
-Directional texts - Rotation is an option, but need
 vertical stacked as well...this may be a horrible idea (see fix's).
'
[NEXT]
-Theme Editor - setup control shapes, styles, colors.  Save
 to XML file, or save to .png file.
-UI Editor - setup control sizes, positions/locations,
 parent, *(and function control will perform???)*.  Save to
 XML file.
-Physics stuff for game engine.
-Online game server(s)
'
-----------------------------||-----------------------------

 

Original post:

Spoiler

In Revamped I created a control that was able to be used as both a button and a panel, which greatly reduced chunks of code.  With my current project I am extending this to be a full control library that can be used for most of the Orion sources, and may be able to be used with most SFML projects.

For everyone who hasn't been following along with our antics in the shoutbox, here is what I have so far: Preview Video

Currently I have a Panel, Button, NumericUpDown, Groupbox, Horz/VertScrollbar(1 control).  Been having some issues getting the scrollbar thumb button to adjust properly, so I will come back to it.  Next in the lineup is going to be a combobox and a checkbox.

This is going to be another open source project once it is done, but I would also like to include a dll that can be used easily with projects.  That means I would ahve to include some gfx for all the stuffs (so if someone wants to volunteer some work with this that would be great XD ).

Anyways, I wanted to get an idea of what everyone thinks so far, and any suggestion for this package.

 

Edited July 20, 2019 by Recoil
Updated graphical form image. Added icon and cursor images. Edited latest progess.

[Recoil]

Making slight progress on this, but scrollbar maths are still screwey, so passing on that for now.  Those values can still be changed by clicking the left/right or up/down buttons.

I have been unable to locate any information on custom drawn control objects, and handling their events.  Currently when I initialize the control, then draw it, I have to send mouse methods through when it checks the location of those controls.  There is no simple way to use one of the controls and have it handle it's own mouse methods (like: mouseup/mousedown/mousemove).  While what I currently have going on is a bit simpler to use than the gfx control from Revamped, they are still tedious to use.

I've reached out for some help on the SFML forums but I don't believe I speak the native language of "KnowWhatTheFuzzImTalkingAbout", so it's about like trying to get help with stuff here.  Listbox is next up on my list-o-things-to-do, because I require it before I can make the combobox.

Anyways, just an update on the progress so far.  Any questions, thoughts or feature requests just let me know.

[Damian666]

getting nice then mate

and yeah, if you think getting help around here is crazy, try on those forums

[Recoil]

Controls Preview

So here is the latest update.  Listbox has issues with the number of items it displays, and the number is a set value in the control itself...which is not bad as long as you want every listbox to be like that.  Also, if you will notice the initial starting point for the listbox displays the last section instead of at the top...so my maths are off on those, which has not been the easiest to figure out.  Scrollbars need an autoshow property because right now they are always there.

Chatbox (textbox with multiline set to true) is down at the bottom.  I ripped word wrap functions from revamped and threw it in.  I would like to have scrollbars autoshow on this as well, but it isn't even worked in.  There is still so much I have to do to this.

For right now I am going to concentrate on fixing the maths with the scrollbars, listbox, and textbox.  Then I should be able to move on to the combobox and checkbox.  I'd still like to figure out a way to bypass needing so many image ByVal's on the initialization of a few of the controls...those are to set the normal/up/down images for the buttons.  Hopefully I will think of something.

[Damian666]

cant you just define the images globally in the library, and use the variables, that way you don't have to add the byvals.

[Recoil]

Okay, so here is a better idea of what I am having trouble with.

Because a label has only text and no images, this is easy:

TestLabel = New OGCLabel()

Combobox on the other hand has the image for the back panel, as well as the header.  This is not too bad:

TestGroupbox = New OGCGroupbox(bmp1, bmp2)

Button, however, have 3 images (normal/hover/down).  They have an auto highlight feature, so all 3 images can be the same:

TestButton = New OGCButton(bmp1, bmp1, bmp1)

Here is where it is getting annoying at.  The NumericUpDown has a back image for the textbox, and 3 images each for the up and down buttons.  This allows people to use custom images for this control:

TestNud = New OGCNumericUpDown(bmp0, bmp1, bmp1, bmp1, bmp1, bmp1, bmp1)

The scrollbar has 3 images each for the up/left, bottom/right, and thumb buttons, plus an image for the scrollbar back image:

TestHorzScrollbar = New OGCScrollbar(OGCScrollbar.ScrollType.Horizontal, bmp2, bmp1, bmp1, bmp1, bmp1, bmp1, bmp1, bmp1, bmp1, bmp1)

Which follows that standard here, with the multiline textbox.  10 images just for the scrollbar, plus one for the back of the textbox:

TestChatbox = New OGCTextbox(bmp0, bmp2, bmp1, bmp1, bmp1, bmp1, bmp1, bmp1, bmp1, bmp1, bmp1, True)

And because regular and multiline textboxes are the same bloody class, a regular textbox MUST have all 11 images, even if they are set to Nothing:

TestTextbox = New OGCTextbox(bmp0, bmp0, bmp0, bmp0, bmp0, bmp0, bmp0, bmp0, bmp0, bmp0, bmp0)

Now, the whole point of going through all this trouble is to create something that can be easily customized for a plug-n-play control library.  Skinning would be great, and I have some ideas for it, but will still require needing to include a folder with images in it, or a custom filetype with all the images in there (would require additional theme editor).  Additional folders can be created with custom images in them, and when the control is initialized have a property that sets the name for the folder it should look for it's graphics for...but this also may cause issues if people don't have every image in there.

My last idea is to do away with images altogether, and just draw all rectangle shapes, with optional parameters to set the color scheme of the shapes.

So there is what I am running into...please feel free to offer some ideas.  I'd prefer to stay away from stashing stuff in the resources, because that is a bugger to work with.

[Damian666]

I see you point xD

I was gonna say stuff them in resources, but you don't like that, so scratch that

folders with resources it is then I guess bro

[jcsnider]

I would (by default) draw solid colored boxes and outlines.

After you create a button or object I would allow setting of properties for each of the controls

Button1.NormalImage = bmp1

Button1.ClickedImage = bmp1

Button1.HoverImage = bmp1

Doing it that way, you could make the button use it's NormalImage for Clicked and Hover if they are not specified.

Sadly the complex objects are simply going to be complex, not much you can do about that. I would still use properties though instead of requiring all the images to be assigned on object creation.

[Daxterxx]

Heres the Issue I have with people who make custom control libraries. People use the following code

Import System.Windows.Forms

Public Class CustomControl : Inherits Button
	Public Sub New
    	MyBase.New

		With Me
		.Name = "New Custom Button"
		End With
	End Sub

	Public Overrides Sub OnDraw(e As PaintEventArgs)

	End Sub
End Class

This is just a standard setup written in vb.net for a custom button control decalring base properties and the drawing of the control. Like JC said above

On 5/14/2016 at 4:42 PM, jcsnider said:

After you create a button or object I would allow setting of properties for each of the controls

Button1.NormalImage = bmp1

Button1.ClickedImage = bmp1

Button1.HoverImage = bmp1

Using this method is just like using a regular old button and pre-defining a buttons image. This has no benefit to doing so. I see you are trying to use SFML to do this same thing.

 

Basically what I'm trying to say here is i'm writing a program that allows you to import an image and it will output the exact code in order to draw the image through code. You could be able to output this to SFML in order to create truly customized SFML based controls with ease. Right now it only out puts into GDI + but I can look into it for you. By doing this it will elimiate the need to decalre windows based shit and use purly written SFML based shit for max preformance. Basically think of it like using SFML in a visual based IDE,......instead of writing code to do it.

Edited June 14, 2016 by Kras

[Damian666]

oh please do kras, I need that xD

[Daxterxx]

Im working on it, but at the same time im also learning SFML.

[Recoil]

I'm going to necro this thread because it is my thread, and I am still working on this...or have picked it back up .  No sense in a new thread for same thing.

 

Previously when I was working on this I had so many issues trying to fire events for controls.  No joke, there is crap information on how to fire events for objects drawn to the screen.

 

If you search for how to do this, you find me asking on various forums how to do this, and failing to find an answer.  And no, I could never get any of the existing control libraries to work with vb.net properly.

 

Regardless, here is my progress so far:

 

 

Right now it's still buggy:

• The scrollbars are calculating the values correctly, but the slider button isn't displaying correctly with those values.
• Slider does not work when the mouse is dragging it or the scroll wheel on the mouse is used.
• The NumericUpDown control is no longer increasing/decreasing the values.
• The multiline for the text box causes the scrollbars to get drawn at the top left of the window.
• None of the text is editable yet.
• Graphics are drawn, but images are not able to be used yet.
• As seen in the horizontal scrollbar, it isn't wanting to release the state of the control if you mouse over/out too fast.

But what IS important is I have the events for each button firing from 1 event for each button in the main window.  There is still a lot of if/then checks that have to be pushed from events for the form to show the mouse state, but I am hoping to correct that soon.

 

Sadly, this was designed with a different understanding of how to get the drawn controls working as actual control objects, and I have to completely redo a bulk of code so it is cleaner and more efficient...so it's going to be a minute before I release a compiled dll file.  I'm probably going to wait until it is 100% before releasing the source so it is easier to support after making all the corrections to issues that are going to come up.

 

Along with this I am going to be releasing the code for a base engine working with SFML that can be used to test out how to use the library for drawn control objects.  This will make it easier to show how to create and modify a custom control, and not have to support making this work with each other engine wanting to use this and end up breaking their codebase with what they are wanting to do.

 

List of controls currently planned:

• Panel (Working)
• Button (Working)
• GroupBox (Working)
• Label (Working)
• TextBox (multiline will likely be separate control)
• NumericUpDown
• Vertical/Horizontal ScrollBar
• ComboBox
• ListBox
• CheckedListBox
• Dial/Knob
• CheckBox
• RadioButton
• ProgressBar
• Switch
• TrackBar
• Gauge
• TabControl

I'm still mulling over a list of the properties I want for each type of control...

 

This is going to be 100% SFML, and not import anything with Windows.Forms...I'm not clear what the last post is referring to...unless it's talking about drawing objects in Base64, then no, that defeats the purpose (and ease) of dropping images into folders.

 

Feel free to add thoughts on properties and functionality.

[Recoil]

Quick update...

 

I added 2 more control that I want to make for this on the previous reply.  I'm open to suggestions for other standard controls.  I have had a bit of backtracking to do on this, so only the panels, group boxes, and buttons are working at this time...but as you can see the progress has been better:

 

 

The control base I am using for all the controls will allow controls to have the appearances - solid color, vertical gradient, horizontal gradient, radial gradient, or an image.  I am open to suggestions for other drawing options too, but the options will be applicable to all the controls in the library.

 

Everything except for the image is done when the control is created through code.  The outline is optional and can be turned off.  The panel on the left is a vertical gradient done through code, and the group box on the right is a png image.  Instead of a button graphic that displays the same button with 3 different interactions(normal, mouse over, mouse down) this simply uses 1 single button image and overlays a highlight to show the mouse interactions.

 

 

 

 

Please note - setting up the visual appearance of each setting for each control is all done through code.  I do not know a way to make this simply drag-and-drop because it is done 100% with SFML using .NET Core.  Setup for each button in the picture is between 7-9 lines (not counting the addhandlers for the events), and the group box is 17 lines to change the default values.  However, I am still working out the kinks of the best way do go about this.

 

Next on my list is rounded corners for the base control class. More than likely I will overhaul the text drawn to the screen and use a sprite sheet for the letters, which from what I read is faster than drawing actual text to the screen.

[Xeno]

[Recoil]

And textured rounded rectangles are finally a thing.

 

I am awesome.

 

That is all for now...more updates coming soon once I clean everything up.

 

 

[Damian666]

gimme code to look at dude xD

[Recoil]

Panels and buttons are still all that work, but now I am using 2 custom shapes from classes I converted and modified from C++ code: Rounded Rectangles and Ellipses.

 

Rounded Rectangles can do normal rectangles too, Ellipses can do ovals, circles by setting same width/height, and n-sided shapes (triangle/octagon) by setting the radius points.

 

The highlights for the mouse over and mouse down events are the same shape as the control, but the control bounds are still set to a rectangle surrounding the width/height of the control.

 

The radial gradient only works properly with a rounded rectangle set with a corner radius, otherwise it looks like an oval inside a rectangle outline....I may be able to fix this...but I am lazy about getting to this.

 

I may remove radial gradients and just stick with vertical and horizontal ones.  Photoshop and Gimp can create a radial gradient image to use, and a slough of other gradient styles including more than 2 colors.  The shapes of the controls are what is more important for the purposes of this control library.

 

The graphic images need fixed to allow stretching, but they are working with images set to the same size as the control right now.  Graphic images can be any shape and not rely on the custom shape classes.

 

 

My last post had the banner gradient graphic that was made with a ConvexShape.  I want to look into adding a banner shape class, but it honestly may not be needed....would be neat though.

 

Bitmap text is still a strong possibility for this project.

 

Glyph images are also a strong possibility for the buttons.

 

I am also looking into having an animated image on the buttons, that either plays on a loop, or plays on a mouse over event.

 

I am looking into making a separate GUI library that reads colors, images, text, and layouts for each control from an XML file.  This will make it easier to group specific controls for each menu, and use a theme to easily change appearance properties, sizes, and locations for all the controls so everything is more consistent.  No idea how this will work, or how to do it yet...ideas are welcome

 

Edit:

I changed to rounded rectangles to being able to draw rounded corners on the top only, so groupboxes can be allowed to have a header with a flat bottom.

 

Edit2:

Added top/bottom rounded corner examples today.

[Recoil]

A little more progress in the last few days.  I know it doesn't look like much, but...

I got padding and margins (somewhat) working.

 

Alignments work too now, both vertical and horizontal, on buttons and groupboxes.

 

Labels (used by every control for text) have a FontOffset that pads the Y axis for the font used.  This is due to the variations between the font descenders and space above the ascenders, in this particular case it was 3 pixels (purple ellipse would be fine set at 0).  Other fonts may vary, so this can be set for each label.

 

 

While the text blocks are centering, I have no idea how to approach centering the double lined rows aside from adding spaces to the text, but then that's not right.

Text justification fixed:

 

There is still a grip to do, but I have the majority of the working code regioned off properly and all the commented out code deleted.

 

I will probably make a more organized example that looks cleaner...

[Recoil]

Progress?

 

While this looks like less, I have removed all unnecessary controls from the engine, and am using only a button.  The engine itself is now standalone.

 

I have updated the Latest progress spoiler on the top post to reflect changes in the last several days.

 

I am also adding 2 more projects to this venture: UX Editor and a Theme Editor.

 

Progress is slowly being made, but the overall goal keeps growing as well as to what this is going to be when it is done, and how additional stuff is supposed to function properly.

 

Essentially: I am stuck.

 

Edit: See top post for latest images and updates in the spoiler (fair warning: it's loooooong)

Edited July 15, 2019 by Recoil
Added edited info after updating first post.