Add ColorPanel
This commit is contained in:
parent
447fd8f6c9
commit
72c4c77ecd
|
@ -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
|
||||
|
|
|
@ -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 "复制颜色代码"
|
||||
|
|
|
@ -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>
|
|
@ -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>
|
|
@ -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;
|
||||
}
|
|
@ -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();
|
||||
};
|
|
@ -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
|
||||
{
|
||||
|
|
|
@ -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();
|
||||
}
|
||||
|
||||
|
|
|
@ -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;
|
||||
};
|
Loading…
Reference in New Issue