add ColorHistory, layout changes
This commit is contained in:
1 parent
5937f9b5d6
commit
57401cdcd6
8 files changed
+262
-149
No files matched your search
Binary file not shown.
@@ -60,41 +60,6 @@ namespace ColorPicker {
|
||||
|
||||
app.run(args);
|
||||
|
||||
/*
|
||||
var window = new Gtk.Window ();
|
||||
window.title = "Hello World!";-
|
||||
//window.set_border_width (12);
|
||||
//window.set_position (Gtk.WindowPosition.CENTER);
|
||||
window.set_default_size (350, 70);
|
||||
//window.destroy.connect (Gtk.main_quit);
|
||||
|
||||
var button_hello = new Gtk.Button.with_label ("Click me!");
|
||||
button_hello.clicked.connect (() => {
|
||||
var mouse_position = new ColorPicker.Widgets.MousePosition ();
|
||||
mouse_position.show_all ();
|
||||
|
||||
mouse_position.moved.connect ((t, color) => {
|
||||
button_hello.label = color.to_string ();
|
||||
});
|
||||
|
||||
mouse_position.cancelled.connect (() => {
|
||||
mouse_position.close ();
|
||||
window.present ();
|
||||
});
|
||||
|
||||
var win = mouse_position.get_window ();
|
||||
|
||||
mouse_position.picked.connect ((t, color) => {
|
||||
|
||||
mouse_position.close ();
|
||||
window.present ();
|
||||
});
|
||||
});
|
||||
|
||||
window.add (button_hello);
|
||||
window.show_all ();
|
||||
*/
|
||||
|
||||
Gtk.main ();
|
||||
return 0;
|
||||
}
|
||||
|
||||
+105
-33
@@ -22,57 +22,116 @@
|
||||
namespace ColorPicker {
|
||||
|
||||
public class ColorPickerWindow: Gtk.Dialog {
|
||||
|
||||
|
||||
public ColorPickerWindow () {
|
||||
Object (application: application,
|
||||
icon_name: "com.github.ronnydo.colorpicker",
|
||||
title: "Color Picker",
|
||||
resizable: false
|
||||
// height_request: 500,
|
||||
// width_request: 300
|
||||
resizable: false,
|
||||
//height_request: 500,
|
||||
width_request: 500
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
construct {
|
||||
// main box
|
||||
var color_area = new ColorArea ();
|
||||
|
||||
var color_area = new ColorArea ();
|
||||
color_area.margin_bottom = 12;
|
||||
|
||||
var hex_entry = new Gtk.Entry ();
|
||||
hex_entry.placeholder_text = "rgb(255,255,255)";
|
||||
hex_entry.set_icon_from_icon_name (Gtk.EntryIconPosition.SECONDARY, "edit-copy");
|
||||
|
||||
var button_hello = new Gtk.Button.with_label ("Pick Color");
|
||||
button_hello.get_style_context ().add_class (Gtk.STYLE_CLASS_SUGGESTED_ACTION);
|
||||
var hex_label = new Gtk.Label (null);
|
||||
hex_label.halign = Gtk.Align.END;
|
||||
hex_label.valign = Gtk.Align.END;
|
||||
hex_label.set_selectable (true);
|
||||
hex_label.set_use_markup (true);
|
||||
hex_label.set_markup (Markup.printf_escaped (("<b>%s</b>"), "#FFFFFF"));
|
||||
|
||||
var box = get_content_area () as Gtk.Box;
|
||||
box.border_width = 6;
|
||||
|
||||
box.pack_start (color_area);
|
||||
box.pack_start (hex_entry);
|
||||
box.pack_start (button_hello);
|
||||
var pick_color_button = new Gtk.Button.with_label ("Pick Color");
|
||||
pick_color_button.get_style_context ().add_class (Gtk.STYLE_CLASS_SUGGESTED_ACTION);
|
||||
pick_color_button.halign = Gtk.Align.END;
|
||||
pick_color_button.valign = Gtk.Align.BASELINE;
|
||||
// TODO Just icon or text is displyed, but not both
|
||||
// pick_color_button.set_image (new Gtk.Image.from_icon_name ("gtk-color-picker", Gtk.IconSize.BUTTON));
|
||||
|
||||
var main_right_box = new Gtk.Box (Gtk.Orientation.VERTICAL, 0);
|
||||
main_right_box.pack_start (hex_label);
|
||||
main_right_box.pack_start (pick_color_button, true, false);
|
||||
|
||||
var main_box = new Gtk.Box (Gtk.Orientation.HORIZONTAL, 0);
|
||||
main_box.margin_bottom = 12;
|
||||
main_box.pack_start (color_area);
|
||||
main_box.pack_start (main_right_box);
|
||||
|
||||
// format box
|
||||
var format_label = new Gtk.Label ("Format");
|
||||
format_label.get_style_context ().add_class ("h4");
|
||||
format_label.halign = Gtk.Align.START;
|
||||
|
||||
var format_entry = new Gtk.Entry ();
|
||||
format_entry.placeholder_text = "rgb(255,255,255)";
|
||||
format_entry.set_editable (false);
|
||||
format_entry.set_icon_from_icon_name (Gtk.EntryIconPosition.SECONDARY, "edit-copy");
|
||||
format_entry.margin_right = 6;
|
||||
|
||||
var color_format_combobox = new Gtk.ComboBoxText ();
|
||||
color_format_combobox.append_text ("RGBA");
|
||||
color_format_combobox.append_text ("CSS RGBA");
|
||||
color_format_combobox.append_text ("QML QT RGBA");
|
||||
color_format_combobox.active = 0;
|
||||
|
||||
var adjust_button = new Gtk.Button.from_icon_name ("media-eq-symbolic");
|
||||
adjust_button.margin_left = 12;
|
||||
// TODO implement change color dialog
|
||||
|
||||
var format_hbox = new Gtk.Box (Gtk.Orientation.HORIZONTAL, 0);
|
||||
format_hbox.pack_start (format_entry);
|
||||
format_hbox.pack_start (color_format_combobox, false, false);
|
||||
|
||||
var format_box = new Gtk.Box (Gtk.Orientation.VERTICAL, 0);
|
||||
format_box.pack_start (format_label);
|
||||
format_box.pack_start (format_hbox);
|
||||
// TODO implement change color dialog
|
||||
// format_box.pack_start (adjust_button);
|
||||
|
||||
// color history box
|
||||
var color_history_label = new Gtk.Label ("Color History");
|
||||
color_history_label.get_style_context ().add_class ("h4");
|
||||
color_history_label.halign = Gtk.Align.START;
|
||||
|
||||
var color_history = new ColorHistory ();
|
||||
|
||||
var color_history_box = new Gtk.Box (Gtk.Orientation.VERTICAL, 0);
|
||||
color_history_box.margin_top = 6;
|
||||
color_history_box.margin_bottom = 0;
|
||||
color_history_box.pack_start (color_history_label);
|
||||
color_history_box.pack_start (color_history);
|
||||
|
||||
// tie together
|
||||
var skeleton_box = new Gtk.Box (Gtk.Orientation.VERTICAL, 0);
|
||||
skeleton_box.orientation = Gtk.Orientation.VERTICAL;
|
||||
skeleton_box.margin = 6;
|
||||
skeleton_box.margin_bottom = 0;
|
||||
skeleton_box.pack_start (main_box);
|
||||
skeleton_box.pack_start (format_box);
|
||||
|
||||
var content_box = get_content_area () as Gtk.Box;
|
||||
content_box.pack_start (skeleton_box);
|
||||
|
||||
var content_box = get_content_area () as Gtk.Box;
|
||||
content_box.border_width = 6;
|
||||
|
||||
content_box.add (box);
|
||||
content_box.add (button_hello);
|
||||
|
||||
|
||||
hex_entry.icon_press.connect ((pos, event) => {
|
||||
format_entry.icon_press.connect ((pos, event) => {
|
||||
if (pos == Gtk.EntryIconPosition.SECONDARY) {
|
||||
Gtk.Clipboard.get_default (this.get_display ()).set_text (hex_entry.get_text (), -1);
|
||||
Gtk.Clipboard.get_default (this.get_display ()).set_text (format_entry.get_text (), -1);
|
||||
}
|
||||
});
|
||||
|
||||
button_hello.clicked.connect (() => {
|
||||
pick_color_button.clicked.connect (() => {
|
||||
var mouse_position = new ColorPicker.Widgets.MousePosition ();
|
||||
mouse_position.show_all ();
|
||||
|
||||
mouse_position.moved.connect ((t, color) => {
|
||||
color_area.set_color (color);
|
||||
var ext_color = (ExtRGBA) color;
|
||||
color_area.set_color (ext_color);
|
||||
color_area.queue_draw ();
|
||||
hex_entry.text = color.to_string ();
|
||||
hex_label.set_markup (Markup.printf_escaped ("<b>%s</b>", ext_color.to_uppercase_hex_string ()));
|
||||
});
|
||||
|
||||
mouse_position.cancelled.connect (() => {
|
||||
@@ -85,7 +144,20 @@ namespace ColorPicker {
|
||||
mouse_position.picked.connect ((t, color) => {
|
||||
color_area.set_color (color);
|
||||
color_area.queue_draw ();
|
||||
hex_entry.text = color.to_string ();
|
||||
format_entry.text = color.to_string ();
|
||||
color_history.add_color (color);
|
||||
|
||||
var l = new Gtk.Button.with_label ("Pick Color");
|
||||
|
||||
var color_list = color_history.get_color_list ();
|
||||
|
||||
if (color_history_box.get_parent () == null) {
|
||||
if (color_list != null && color_list.size > 1) {
|
||||
skeleton_box.pack_start (color_history_box);
|
||||
color_history_box.show_all ();
|
||||
}
|
||||
}
|
||||
|
||||
mouse_position.close ();
|
||||
this.present ();
|
||||
});
|
||||
@@ -96,4 +168,4 @@ namespace ColorPicker {
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
}
|
||||
@@ -21,15 +21,19 @@
|
||||
|
||||
namespace ColorPicker {
|
||||
|
||||
public class ColorPickerWindow: Gtk.Window {
|
||||
public class ColorPickerWindow: Gtk.Dialog {
|
||||
|
||||
public ColorPickerWindow () {
|
||||
Object (title: "Color Picker",
|
||||
border_width: 12);
|
||||
Object (application: application,
|
||||
icon_name: "com.github.ronnydo.colorpicker",
|
||||
title: "Color Picker",
|
||||
resizable: false
|
||||
// height_request: 500,
|
||||
// width_request: 300
|
||||
);
|
||||
}
|
||||
|
||||
construct {
|
||||
this.set_default_size (300, 420);
|
||||
|
||||
var color_area = new ColorArea ();
|
||||
color_area.margin_bottom = 12;
|
||||
@@ -40,13 +44,19 @@ namespace ColorPicker {
|
||||
|
||||
var button_hello = new Gtk.Button.with_label ("Pick Color");
|
||||
button_hello.get_style_context ().add_class (Gtk.STYLE_CLASS_SUGGESTED_ACTION);
|
||||
button_hello.can_default = true;
|
||||
|
||||
Gtk.Box box = new Gtk.Box (Gtk.Orientation.VERTICAL, 0);
|
||||
var box = get_content_area () as Gtk.Box;
|
||||
box.border_width = 6;
|
||||
|
||||
box.pack_start (color_area);
|
||||
box.pack_start (hex_entry);
|
||||
box.pack_start (button_hello);
|
||||
this.add (box);
|
||||
|
||||
var content_box = get_content_area () as Gtk.Box;
|
||||
content_box.border_width = 6;
|
||||
|
||||
content_box.add (box);
|
||||
content_box.add (button_hello);
|
||||
|
||||
|
||||
hex_entry.icon_press.connect ((pos, event) => {
|
||||
|
||||
@@ -0,0 +1,60 @@
|
||||
namespace ColorPicker {
|
||||
|
||||
public struct ExtRGBA : Gdk.RGBA {
|
||||
|
||||
/* format like #3f92aa */
|
||||
public string to_hex_string () {
|
||||
string s = "#%02x%02x%02x"
|
||||
.printf((uint) (this.red * 255),
|
||||
(uint) (this.green * 255),
|
||||
(uint) (this.blue * 255));
|
||||
return s;
|
||||
}
|
||||
|
||||
/* format like #3F92AA */
|
||||
public string to_uppercase_hex_string () {
|
||||
return this.to_hex_string ().up ();
|
||||
}
|
||||
|
||||
/* format like rgb(211, 32, 128) */
|
||||
public string to_css_rgb_string () {
|
||||
|
||||
string s = "rgb(%i, %i, %i)"
|
||||
.printf((int) (this.red * 255),
|
||||
(int) (this.green * 255),
|
||||
(int) (this.blue * 255));
|
||||
return s;
|
||||
}
|
||||
|
||||
|
||||
/* format like rgba(211, 32, 128, 1) */
|
||||
public string to_css_rgba_string () {
|
||||
string s = "rgba(%i, %i, %i, 1)"
|
||||
.printf((int) (this.red * 255),
|
||||
(int) (this.green * 255),
|
||||
(int) (this.blue * 255));
|
||||
return s;
|
||||
}
|
||||
|
||||
|
||||
/* format like Gdk.RGBA(211, 32, 128, 1) */
|
||||
public string to_gdk_rgba_string () {
|
||||
string s = "Gdk.RGBA(%i, %i, %i, 1.0)"
|
||||
.printf((int) (this.red * 255),
|
||||
(int) (this.green * 255),
|
||||
(int) (this.blue * 255));
|
||||
return s;
|
||||
}
|
||||
|
||||
|
||||
/* format like QML.Gdk.RGBA(211, 32, 128, 1) */
|
||||
public string to_qml_qt_rgba_string () {
|
||||
string s = "Qt.rgba(%i, %i, %i, 1.0)"
|
||||
.printf((int) (this.red * 255),
|
||||
(int) (this.green * 255),
|
||||
(int) (this.blue * 255));
|
||||
return s;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
@@ -26,7 +26,7 @@ namespace ColorPicker {
|
||||
private Gdk.RGBA color;
|
||||
|
||||
public ColorArea () {
|
||||
set_size_request (100, 100);
|
||||
set_size_request (140, 140);
|
||||
|
||||
color.parse("#EEEEEE");
|
||||
}
|
||||
|
||||
@@ -1,73 +0,0 @@
|
||||
/*
|
||||
* Copyright (c) 2017 Ronny Dobra (https://github.com/RonnyDo/ColorPicker)
|
||||
*
|
||||
* This program is free software; you can redistribute it and/or
|
||||
* modify it under the terms of the GNU General Public
|
||||
* License as published by the Free Software Foundation; either
|
||||
* version 2 of the License, or (at your option) any later version.
|
||||
*
|
||||
* This program is distributed in the hope that it will be useful,
|
||||
* but WITHOUT ANY WARRANTY; without even the implied warranty of
|
||||
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU
|
||||
* General Public License for more details.
|
||||
*
|
||||
* You should have received a copy of the GNU General Public
|
||||
* License along with this program; if not, write to the
|
||||
* Free Software Foundation, Inc., 51 Franklin Street, Fifth Floor,
|
||||
* Boston, MA 02110-1301 USA
|
||||
*
|
||||
* Authored by: Ronny Dobra <ronnydobra at arcor dot de>
|
||||
*/
|
||||
|
||||
namespace ColorPicker {
|
||||
|
||||
public class ColorArea: Gtk.DrawingArea {
|
||||
|
||||
private Gdk.RGBA color;
|
||||
|
||||
public ColorArea () {
|
||||
set_size_request (100, 100);
|
||||
|
||||
color.parse("#EEEEEE");
|
||||
}
|
||||
|
||||
/* Widget is asked to draw itself */
|
||||
public override bool draw (Cairo.Context ctx) {
|
||||
// Get necessary data:
|
||||
weak Gtk.StyleContext style_context = get_style_context ();
|
||||
int width = get_allocated_width ();
|
||||
int height = get_allocated_height ();
|
||||
|
||||
// Draw an arc:
|
||||
double xc = width / 2.0;
|
||||
double yc = height / 2.0;
|
||||
double radius = (int.min (width, height) / 2.0);
|
||||
double angle1 = 0;
|
||||
double angle2 = 2*Math.PI;
|
||||
|
||||
|
||||
int shadow_width = 6;
|
||||
double shadow_alpha = 1.0;
|
||||
string shadow_color = "#A9A9A9";
|
||||
for (int i = 1; i <= shadow_width; i++) {
|
||||
ctx.arc (xc, yc, radius - i, angle1, angle2);
|
||||
Gdk.RGBA c = new Gdk.RGBA();
|
||||
c.parse(shadow_color);
|
||||
//c.alpha = i* shadow_inc;
|
||||
c.alpha = shadow_alpha / ((shadow_width - i + 1)*(shadow_width - i + 1));
|
||||
Gdk.cairo_set_source_rgba (ctx, c);
|
||||
ctx.stroke ();
|
||||
}
|
||||
|
||||
ctx.arc (xc, yc, radius - shadow_width, angle1, angle2);
|
||||
Gdk.cairo_set_source_rgba (ctx, this.color);
|
||||
ctx.fill ();
|
||||
|
||||
return true;
|
||||
}
|
||||
|
||||
public void set_color (Gdk.RGBA color) {
|
||||
this.color = color;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,79 @@
|
||||
namespace ColorPicker {
|
||||
|
||||
public class ColorHistory: Gtk.DrawingArea {
|
||||
|
||||
const int max_colors = 6;
|
||||
Gee.ArrayList<Gdk.RGBA?> color_list;
|
||||
|
||||
public ColorHistory () {
|
||||
set_size_request (100, 30);
|
||||
color_list = new Gee.ArrayList<Gdk.RGBA?> ();
|
||||
|
||||
Gdk.RGBA c1 = new Gdk.RGBA();
|
||||
c1.parse ("#FE3478");
|
||||
//add_color (c1);
|
||||
|
||||
Gdk.RGBA c2 = new Gdk.RGBA();
|
||||
c2.parse ("#82A32E");
|
||||
//add_color (c2);
|
||||
}
|
||||
|
||||
public void add_color (Gdk.RGBA color) {
|
||||
if (color_list.size == max_colors) {
|
||||
remove_oldest_color ();
|
||||
}
|
||||
color_list.add (color);
|
||||
}
|
||||
|
||||
public void remove_oldest_color () {
|
||||
color_list.remove_at (0);
|
||||
}
|
||||
|
||||
public Gee.ArrayList<Gdk.RGBA?> get_color_list () {
|
||||
return color_list;
|
||||
}
|
||||
|
||||
/* Widget is asked to draw itself */
|
||||
public override bool draw (Cairo.Context ctx) {
|
||||
|
||||
weak Gtk.StyleContext style_context = get_style_context ();
|
||||
|
||||
|
||||
int width = get_allocated_width (); // better element_width / amount
|
||||
int height = get_allocated_height ();
|
||||
|
||||
// draw colorlist
|
||||
for (int i = 0; i < color_list.size; i++) {
|
||||
ctx.move_to (i * width / color_list.size, 0);
|
||||
ctx.rel_line_to (width / color_list.size, 0);
|
||||
ctx.rel_line_to (0, height);
|
||||
ctx.rel_line_to (-1 * width / color_list.size, 0);
|
||||
ctx.close_path ();
|
||||
|
||||
Gdk.cairo_set_source_rgba (ctx, color_list.get(i));
|
||||
|
||||
ctx.fill ();
|
||||
}
|
||||
|
||||
// draw triangle
|
||||
if (color_list.size > 0) {
|
||||
ctx.new_path ();
|
||||
int triangle_height = 10;
|
||||
int triangle_width = 20;
|
||||
ctx.move_to (width - width / color_list.size / 2, height - triangle_height);
|
||||
ctx.rel_line_to (triangle_width / 2, triangle_height);
|
||||
ctx.rel_line_to (-1 * triangle_width, 0);
|
||||
ctx.close_path ();
|
||||
|
||||
Gdk.RGBA c_grey = new Gdk.RGBA();
|
||||
c_grey.parse ("#F5F5F5");
|
||||
Gdk.cairo_set_source_rgba (ctx, c_grey);
|
||||
|
||||
ctx.fill ();
|
||||
}
|
||||
|
||||
|
||||
return true;
|
||||
}
|
||||
}
|
||||
}
|
||||
Reference in new issue
Block a user