Add ColorPanel

This commit is contained in:
daleclack 2022-03-20 09:25:10 +08:00
parent 447fd8f6c9
commit 72c4c77ecd
9 changed files with 410 additions and 7 deletions

View File

@ -31,6 +31,7 @@ set(SOURCE_FILE src/main.cc src/MyWin.cc src/ColorPicker.cc src/ColorPanel.cc sr
#Compile Resource
set(RESOURCE_LIST
colorpanel.ui
window.ui)
compile_gresources(RESOURCE_FILE

View File

@ -11,8 +11,8 @@ msgid "rgb()/rgba() for css3"
msgstr "用于css3的rgb()/rgba()代码"
#: src/MyWin.cc:13
msgid "RGB(A) Code"
msgstr "RGB(A)代码"
msgid "(A)RGB Code"
msgstr "(A)RGB代码"
#: src/MyWin.cc:16
msgid "Color Settings And Position info"
@ -23,8 +23,8 @@ msgid "Copy Css3 Code"
msgstr "复制css3代码"
#: src/MyWin.cc:19
msgid "Copy RGB(A) String"
msgstr "复制RGB(A)代码"
msgid "Copy (A)RGB String"
msgstr "复制(A)RGB代码"
#: src/MyWin.cc:20
msgid "Pick Color"
@ -59,3 +59,9 @@ msgstr "调色板"
msgid "Color Reference"
msgstr "颜色参考"
msgid "Color:"
msgstr "颜色:"
msgid "Copy Color Code"
msgstr "复制颜色代码"

View File

@ -0,0 +1,261 @@
<?xml version="1.0" encoding="UTF-8"?>
<!-- Generated with glade 3.38.2 -->
<interface>
<requires lib="gtk+" version="3.24"/>
<object class="GtkAdjustment" id="adj_alpha">
<property name="upper">255</property>
<property name="value">255</property>
<property name="step-increment">1</property>
<property name="page-increment">10</property>
</object>
<object class="GtkAdjustment" id="adj_blue">
<property name="upper">255</property>
<property name="step-increment">1</property>
<property name="page-increment">10</property>
</object>
<object class="GtkAdjustment" id="adj_green">
<property name="upper">255</property>
<property name="step-increment">1</property>
<property name="page-increment">10</property>
</object>
<object class="GtkAdjustment" id="adj_red">
<property name="upper">255</property>
<property name="step-increment">1</property>
<property name="page-increment">10</property>
</object>
<object class="GtkBox" id="main_box">
<property name="visible">True</property>
<property name="can-focus">False</property>
<property name="orientation">vertical</property>
<child>
<object class="GtkBox" id="color_box">
<property name="visible">True</property>
<property name="can-focus">False</property>
<child>
<object class="GtkBox" id="display_box">
<property name="width-request">200</property>
<property name="height-request">200</property>
<property name="visible">True</property>
<property name="can-focus">False</property>
<property name="orientation">vertical</property>
<child>
<placeholder/>
</child>
</object>
<packing>
<property name="expand">False</property>
<property name="fill">True</property>
<property name="position">0</property>
</packing>
</child>
<child>
<object class="GtkBox" id="scales_box">
<property name="visible">True</property>
<property name="can-focus">False</property>
<property name="orientation">vertical</property>
<child>
<object class="GtkBox">
<property name="visible">True</property>
<property name="can-focus">False</property>
<child>
<object class="GtkLabel" id="label_red">
<property name="visible">True</property>
<property name="can-focus">False</property>
<property name="label" translatable="yes">A:</property>
</object>
<packing>
<property name="expand">False</property>
<property name="fill">True</property>
<property name="position">0</property>
</packing>
</child>
<child>
<object class="GtkScale" id="scale_alpha">
<property name="width-request">200</property>
<property name="visible">True</property>
<property name="can-focus">True</property>
<property name="adjustment">adj_alpha</property>
<property name="fill-level">255</property>
<property name="round-digits">0</property>
</object>
<packing>
<property name="expand">False</property>
<property name="fill">True</property>
<property name="position">2</property>
</packing>
</child>
</object>
<packing>
<property name="expand">False</property>
<property name="fill">True</property>
<property name="position">0</property>
</packing>
</child>
<child>
<object class="GtkBox">
<property name="visible">True</property>
<property name="can-focus">False</property>
<child>
<object class="GtkLabel" id="label_red1">
<property name="visible">True</property>
<property name="can-focus">False</property>
<property name="label" translatable="yes">R:</property>
</object>
<packing>
<property name="expand">False</property>
<property name="fill">True</property>
<property name="position">0</property>
</packing>
</child>
<child>
<object class="GtkScale" id="scale_red">
<property name="width-request">200</property>
<property name="visible">True</property>
<property name="can-focus">True</property>
<property name="adjustment">adj_red</property>
<property name="round-digits">0</property>
</object>
<packing>
<property name="expand">False</property>
<property name="fill">True</property>
<property name="position">1</property>
</packing>
</child>
</object>
<packing>
<property name="expand">False</property>
<property name="fill">True</property>
<property name="position">1</property>
</packing>
</child>
<child>
<object class="GtkBox">
<property name="visible">True</property>
<property name="can-focus">False</property>
<child>
<object class="GtkLabel" id="label_green">
<property name="visible">True</property>
<property name="can-focus">False</property>
<property name="label" translatable="yes">G:</property>
</object>
<packing>
<property name="expand">False</property>
<property name="fill">True</property>
<property name="position">0</property>
</packing>
</child>
<child>
<object class="GtkScale" id="scale_green">
<property name="width-request">200</property>
<property name="visible">True</property>
<property name="can-focus">True</property>
<property name="adjustment">adj_green</property>
<property name="round-digits">0</property>
</object>
<packing>
<property name="expand">False</property>
<property name="fill">True</property>
<property name="position">1</property>
</packing>
</child>
</object>
<packing>
<property name="expand">False</property>
<property name="fill">True</property>
<property name="position">2</property>
</packing>
</child>
<child>
<object class="GtkBox">
<property name="visible">True</property>
<property name="can-focus">False</property>
<child>
<object class="GtkLabel" id="label_blue">
<property name="visible">True</property>
<property name="can-focus">False</property>
<property name="label" translatable="yes">B:</property>
</object>
<packing>
<property name="expand">False</property>
<property name="fill">True</property>
<property name="position">0</property>
</packing>
</child>
<child>
<object class="GtkScale" id="scale_blue">
<property name="width-request">200</property>
<property name="visible">True</property>
<property name="can-focus">True</property>
<property name="adjustment">adj_blue</property>
<property name="round-digits">0</property>
</object>
<packing>
<property name="expand">False</property>
<property name="fill">True</property>
<property name="position">1</property>
</packing>
</child>
</object>
<packing>
<property name="expand">False</property>
<property name="fill">True</property>
<property name="position">3</property>
</packing>
</child>
</object>
<packing>
<property name="expand">False</property>
<property name="fill">True</property>
<property name="position">1</property>
</packing>
</child>
</object>
<packing>
<property name="expand">False</property>
<property name="fill">True</property>
<property name="position">0</property>
</packing>
</child>
<child>
<object class="GtkBox" id="controls_box">
<property name="visible">True</property>
<property name="can-focus">False</property>
<property name="spacing">20</property>
<child>
<object class="GtkLabel" id="label_color">
<property name="visible">True</property>
<property name="can-focus">False</property>
<property name="label" translatable="yes">#FF000000 (255,0,0,0)</property>
</object>
<packing>
<property name="expand">False</property>
<property name="fill">True</property>
<property name="position">0</property>
</packing>
</child>
<child>
<placeholder/>
</child>
<child>
<object class="GtkButton" id="btncopy">
<property name="label" translatable="yes">Copy Color Code</property>
<property name="visible">True</property>
<property name="can-focus">True</property>
<property name="receives-default">True</property>
</object>
<packing>
<property name="expand">False</property>
<property name="fill">True</property>
<property name="pack-type">end</property>
<property name="position">2</property>
</packing>
</child>
</object>
<packing>
<property name="expand">False</property>
<property name="fill">True</property>
<property name="position">1</property>
</packing>
</child>
</object>
</interface>

View File

@ -0,0 +1,5 @@
<?xml version="1.0" encoding="UTF-8"?>
<!-- Generated with glade 3.38.2 -->
<interface>
<requires lib="gtk+" version="3.24"/>
</interface>

View File

@ -0,0 +1,89 @@
#include "ColorPanel.hh"
ColorPanel::ColorPanel(BaseObjectType *cobject, const Glib::RefPtr<Gtk::Builder> &ref_Glade)
: Gtk::Box(cobject),
ref_builder(ref_Glade),
color_frame(_("Color:"))
{
// Get Widgets
ref_builder->get_widget("display_box", display_box);
ref_builder->get_widget("scale_alpha", scale_alpha);
ref_builder->get_widget("scale_red", scale_red);
ref_builder->get_widget("scale_blue", scale_blue);
ref_builder->get_widget("scale_green", scale_green);
ref_builder->get_widget("label_color", color_label);
ref_builder->get_widget("btncopy",btncopy);
// Add widgets
display_box->pack_start(color_frame);
// Add margin for draw_area and add widget
draw_area.set_margin_start(5);
draw_area.set_margin_end(5);
draw_area.set_margin_left(5);
draw_area.set_margin_right(5);
draw_area.signal_draw().connect(sigc::mem_fun(*this, &ColorPanel::drawarea_draw));
color_frame.add(draw_area);
// Add signal for scales
scale_alpha->signal_value_changed().connect(sigc::mem_fun(*this, &ColorPanel::scale_value_changed));
scale_blue->signal_value_changed().connect(sigc::mem_fun(*this, &ColorPanel::scale_value_changed));
scale_green->signal_value_changed().connect(sigc::mem_fun(*this, &ColorPanel::scale_value_changed));
scale_red->signal_value_changed().connect(sigc::mem_fun(*this, &ColorPanel::scale_value_changed));
// Add signal for copy color button
btncopy->signal_clicked().connect(sigc::mem_fun(*this,&ColorPanel::btncopy_clicked));
}
void ColorPanel::scale_value_changed()
{
// Update Color Value
int red, green, blue, alpha;
red = scale_red->get_value();
green = scale_green->get_value();
blue = scale_blue->get_value();
alpha = scale_alpha->get_value();
// Convert String for display
color_str = Glib::ustring(g_strdup_printf("#%02X%02X%02X%02X (%d,%d,%d,%d)",
alpha, red, blue, green,
alpha, red, green, blue));
color_label->set_label(color_str);
// Redraw the color
draw_area.queue_draw();
}
bool ColorPanel::drawarea_draw(const Cairo::RefPtr<Cairo::Context> &context)
{
// Get Color Values
double red, green, blue, alpha;
red = scale_red->get_value();
green = scale_green->get_value();
blue = scale_blue->get_value();
alpha = scale_alpha->get_value();
// g_print("%f %f %f %f\n", red, green, blue, alpha);
// Set the Color and fill
context->set_source_rgba(red / 255.0, green / 255.0, blue / 255.0, alpha / 255.0);
context->paint();
// context->fill();
return false;
}
void ColorPanel::btncopy_clicked(){
// Copy the Color String
auto clipboard = Gtk::Clipboard::get();
clipboard->set_text(color_str);
}
ColorPanel *ColorPanel::create()
{
ColorPanel *panel = nullptr;
auto builder = Gtk::Builder::create_from_resource("/org/gtk/daleclack/colorpanel.ui");
builder->get_widget_derived("main_box", panel);
return panel;
}

View File

@ -0,0 +1,30 @@
#pragma once
#include <gtkmm.h>
#include <glibmm/i18n.h>
class ColorPanel : public Gtk::Box
{
public:
ColorPanel(BaseObjectType * cobject, const Glib::RefPtr<Gtk::Builder> &ref_Glade);
static ColorPanel * create();
private:
// Child widgets
Gtk::Scale * scale_alpha, * scale_red, * scale_green, * scale_blue;
Gtk::DrawingArea draw_area;
Gtk::Frame color_frame;
Gtk::Button * btncopy;
Gtk::Box * display_box;
Gtk::Label * color_label;
Glib::ustring color_str;
// Builer
Glib::RefPtr<Gtk::Builder> ref_builder;
// Signal Handlers
void scale_value_changed();
bool drawarea_draw(const Cairo::RefPtr<Cairo::Context> &context);
void btncopy_clicked();
};

View File

@ -10,13 +10,13 @@ ColorPicker::ColorPicker()
btnbox(Gtk::ORIENTATION_VERTICAL, 5),
frame_pos(_("Position")),
frame_css_rgba(_("rgb()/rgba() for css3")),
frame_rgba_str(_("RGB(A) Code")),
frame_rgba_str(_("(A)RGB Code")),
label_pos("(640,480)"),
label_css_rgba("rgba(255,255,255,255)"),
label_test(_("Color Settings And Position info")),
label_color_str("#00000000"),
btn_css_code(_("Copy Css3 Code")),
btn_color_str(_("Copy RGB(A) String")),
btn_color_str(_("Copy (A)RGB String")),
btn_select(_("Pick Color"))
{
background.set_size_request(640, 480);
@ -132,7 +132,7 @@ void ColorPicker::get_pixel_color(int x, int y)
// If the image has a alpha value, use RGBA Code, else use RGB Code
if (sized->get_has_alpha())
{
color_str = Glib::ustring(g_strdup_printf("#%02X%02X%02X%02X", red, blue, green, alpha));
color_str = Glib::ustring(g_strdup_printf("#%02X%02X%02X%02X", alpha, red, blue, green));
}
else
{

View File

@ -9,11 +9,18 @@ ref_builder(ref_Glade)
// Get Widgets
ref_builder->get_widget("picker_box",picker_box);
ref_builder->get_widget("panel_box",panel_box);
ref_builder->get_widget("ref_box",ref_box);
// Add Child Widgets
color_picker.bind_parent_win(this);
picker_box->pack_start(color_picker);
color_panel = ColorPanel::create();
color_panel->set_halign(Gtk::ALIGN_CENTER);
color_panel->set_valign(Gtk::ALIGN_CENTER);
panel_box->pack_start(*color_panel);
show_all_children();
}

View File

@ -3,6 +3,7 @@
#include <gtkmm.h>
#include <glibmm/i18n.h>
#include "ColorPicker.hh"
#include "ColorPanel.hh"
class MyWin : public Gtk::Window
{
@ -18,4 +19,7 @@ private:
// Color Picker
ColorPicker color_picker;
// Color Panel
ColorPanel * color_panel;
};