{"id":4198,"date":"2022-01-26T15:53:00","date_gmt":"2022-01-26T15:53:00","guid":{"rendered":"http:\/\/truelogic.org\/wordpress\/?p=4198"},"modified":"2022-01-26T15:53:01","modified_gmt":"2022-01-26T15:53:01","slug":"12-wxwidgets-creating-a-custom-widget","status":"publish","type":"post","link":"https:\/\/truelogic.org\/wordpress\/2022\/01\/26\/12-wxwidgets-creating-a-custom-widget\/","title":{"rendered":"12.wxWidgets – Creating a Custom Widget"},"content":{"rendered":"\n

OVERVIEW<\/strong><\/p>\n\n\n\n

We now look at how to create a custom widget. A custom widget is something which adds in a custom UI which can be re-used in applications. In the sample code below we create a custom widget called CustomColor which extends a wxPanel. It acts as a color preview widget comprising of 3 wxSlider controls for red, green and blue colors. Each of the sliders can move between 0 and 255. Depending on the current value of the sliders, the background panel is painted with the resulting color.<\/p>\n\n\n\n

SAMPLE CODE<\/strong><\/p>\n\n\n\n

custom.h<\/pre>\n\n\n
\n#include <wx\/wxprec.h>\n#ifndef WX_PRECOMP\n\t#include <wx\/wx.h>\n#endif\n\n\nclass CustomColor: public wxPanel {\n\n\t\tpublic:\n\t\t\tCustomColor(wxWindow *parent, wxWindowID id, int r, int g, int b);\n\t\t\tvoid setRed(int r);\n\t\t\tvoid setGreen(int g);\n\t\t\tvoid setBlue(int b);\n\t\t\tint getRed();\n\t\t\tint getGreen();\n\t\t\tint getBlue();\n\n\t\tprivate:\n\t\t   void onScroll(wxCommandEvent& event);\t\n\t\t   void showColor();\t\n\t\t   wxSlider *mSliderRed, *mSliderGreen, *mSliderBlue;\n\t   \t   int mRed, mGreen, mBlue;\t   \n};\n\n#define SLIDER_ID_RED 2001\n#define SLIDER_ID_GREEN 2002\n#define SLIDER_ID_BLUE 2003\n\n<\/pre><\/div>\n\n\n
custom.cpp<\/pre>\n\n\n
\n#include "custom.h"\n\nCustomColor::CustomColor(wxWindow *parent, wxWindowID id, int r, int g, int b):\n\t\twxPanel(parent, id) {\n\t    \t\n\t\t\tmRed = r; mGreen = g; mBlue = b;\n\t\t\twxBoxSizer *hbox = new wxBoxSizer(wxHORIZONTAL);\n\t\t\tSetSizer(hbox);\n\t\t\tmSliderRed = new wxSlider(this ,SLIDER_ID_RED, mRed, 0, 255, wxDefaultPosition, wxDefaultSize, wxSL_VERTICAL);\n\t\t\tmSliderGreen = new wxSlider(this ,SLIDER_ID_GREEN, mGreen, 0, 255, wxDefaultPosition, wxDefaultSize, wxSL_VERTICAL);\n\t\t\tmSliderBlue = new wxSlider(this ,SLIDER_ID_BLUE, mBlue, 0, 255, wxDefaultPosition, wxDefaultSize, wxSL_VERTICAL);\n\n\t\t\thbox->Add(mSliderRed, 1, wxEXPAND | wxALL, 5);\n\t\t\thbox->Add(mSliderGreen, 1, wxEXPAND | wxALL, 5);\n\t\t\thbox->Add(mSliderBlue, 1, wxEXPAND | wxALL, 5);\n\n\t\t\tmSliderRed->Bind(wxEVT_COMMAND_SLIDER_UPDATED, &CustomColor::onScroll, this);\n\t\t\tmSliderGreen->Bind(wxEVT_COMMAND_SLIDER_UPDATED, &CustomColor::onScroll, this);\n\t\t\tmSliderBlue->Bind(wxEVT_COMMAND_SLIDER_UPDATED, &CustomColor::onScroll, this);\n\n\t\t\tshowColor();\n }\n\nvoid CustomColor::onScroll(wxCommandEvent& event) {\n   int id = event.GetId();\n   if (id == SLIDER_ID_RED)\n\t   mRed = mSliderRed->GetValue();\n   else if (id == SLIDER_ID_GREEN)\n\t   mGreen = mSliderGreen->GetValue();\n   else if (id == SLIDER_ID_BLUE)\n\t   mBlue = mSliderBlue->GetValue();\n   showColor();\n\n}\n\nvoid CustomColor::setRed(int r) { mRed = r;}\nvoid CustomColor::setGreen(int g) { mGreen = g;}\nvoid CustomColor::setBlue(int b) { mBlue = b;}\nint CustomColor::getRed() { return mRed;}\nint CustomColor::getGreen() { return mGreen;}\nint CustomColor::getBlue() { return mBlue;}\n\nvoid CustomColor::showColor() {\n SetBackgroundColour(wxColour(mRed, mGreen, mBlue));\n}\n\n\n\n<\/pre><\/div>\n\n\n
custommain.h<\/pre>\n\n\n
\n#include <wx\/wxprec.h>\n#ifndef WX_PRECOMP\n\t#include <wx\/wx.h>\n#endif\n\nclass Main: public wxApp {\n\n\tpublic:\n\t\tvirtual bool OnInit();\n};\n\nclass CustomApp:public wxFrame {\n\tpublic:\n\t\tCustomApp(const wxString &title);\n\t\n};\n\nCustomApp::CustomApp(const wxString &title):\n\twxFrame(NULL,-1, title, wxDefaultPosition, wxSize(400,200)) {\n\t\n\t\tCenter();\n\t} \n\n\n<\/pre><\/div>\n\n\n
custommain.cpp<\/pre>\n\n\n
\n#include "custommain.h"\n#include "custom.h"\n\nIMPLEMENT_APP(Main)\n\nbool Main::OnInit() {\n\tCustomApp *app = new CustomApp(wxT("Custom Widget"));\n\twxPanel *panel = new wxPanel(app, -1);\n\twxBoxSizer *hbox = new wxBoxSizer(wxHORIZONTAL);\n\tpanel->SetSizer(hbox);\n\twxStaticText *label = new wxStaticText(panel, -1, wxT("Custom Widget Text"));\n\tCustomColor *color = new CustomColor(panel, -1, 100,10,200);\n\thbox->Add(color, 1, wxEXPAND | wxALL, 5);\n\thbox->Add(label, 2, wxEXPAND | wxALL, 5);\n\n\tapp->Show(true);\n\n}\n\n\n<\/pre><\/div>\n\n\n
The output is shown below<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
\"\"<\/figure>\n\n\n\n
\"\"<\/figure>\n","protected":false},"excerpt":{"rendered":"
OVERVIEW We now look at how to create a custom widget. A custom widget is something which adds in a custom UI which can be […]<\/a><\/p>\n<\/div>","protected":false},"author":1,"featured_media":3595,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[302,365],"tags":[],"class_list":["post-4198","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-cc","category-wxwidgets"],"_links":{"self":[{"href":"https:\/\/truelogic.org\/wordpress\/wp-json\/wp\/v2\/posts\/4198","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/truelogic.org\/wordpress\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/truelogic.org\/wordpress\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/truelogic.org\/wordpress\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/truelogic.org\/wordpress\/wp-json\/wp\/v2\/comments?post=4198"}],"version-history":[{"count":4,"href":"https:\/\/truelogic.org\/wordpress\/wp-json\/wp\/v2\/posts\/4198\/revisions"}],"predecessor-version":[{"id":4206,"href":"https:\/\/truelogic.org\/wordpress\/wp-json\/wp\/v2\/posts\/4198\/revisions\/4206"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/truelogic.org\/wordpress\/wp-json\/wp\/v2\/media\/3595"}],"wp:attachment":[{"href":"https:\/\/truelogic.org\/wordpress\/wp-json\/wp\/v2\/media?parent=4198"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/truelogic.org\/wordpress\/wp-json\/wp\/v2\/categories?post=4198"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/truelogic.org\/wordpress\/wp-json\/wp\/v2\/tags?post=4198"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}