From: Mikko Rasa Date: Wed, 6 Oct 2010 13:07:01 +0000 (+0000) Subject: Rework the UI elements for a smoother and more uniform look X-Git-Url: http://git.tdb.fi/?a=commitdiff_plain;h=d79f5acedfb9460894c05803b5309c1f9bf21d68;hp=cc0ee0a5e71590960bc8cb7baee7a10ef09ce3f0;p=r2c2.git Rework the UI elements for a smoother and more uniform look Add styles for vsliders and multiline entries Add selection indicator to lists --- diff --git a/gui.blend b/gui.blend index 9e4becb..7c7b188 100644 Binary files a/gui.blend and b/gui.blend differ diff --git a/gui.png b/gui.png index 3274342..f4e1ee3 100644 Binary files a/gui.png and b/gui.png differ diff --git a/marklin.res b/marklin.res index bea052d..8efa84e 100644 --- a/marklin.res +++ b/marklin.res @@ -2,163 +2,87 @@ default_font "dejavu-12.font"; -graphic "greybutton" +style "root" { - texture "gui.png"; - slice 0 54 21 10; - border { top 2; right 3; bottom 4; left 2; }; - shadow { top 0; right 1; bottom 2; left 0; }; + special "children"; }; -graphic "greybuttondown" +style "label" { - texture "gui.png"; - slice 24 54 21 10; - border { top 2; right 3; bottom 4; left 2; }; - shadow { top 0; right 1; bottom 2; left 0; }; + font_color 0 0 0; + special "text"; }; -graphic "greenbutton" +graphic "tooltip" { texture "gui.png"; - slice 0 42 21 10; - border { top 2; right 3; bottom 4; left 2; }; - shadow { top 0; right 1; bottom 2; left 0; }; + slice 50 93 20 10; + border { top 2; right 2; bottom 2; left 2; }; }; -graphic "greenbuttondown" +style "label-tooltip" { - texture "gui.png"; - slice 24 42 21 10; - border { top 2; right 3; bottom 4; left 2; }; - shadow { top 0; right 1; bottom 2; left 0; }; + font_color 0.0 0.0 0.0; + + part + { + graphic NORMAL "tooltip"; + }; + + special "text" + { + align 0.0 0.5; + fill 0.0 0.0; + margin { top 2; right 2; bottom 2; left 2; }; + }; }; -graphic "redbutton" +graphic "grey_button" { texture "gui.png"; - slice 0 30 21 10; + slice 2 54 21 10; border { top 2; right 3; bottom 4; left 2; }; shadow { top 0; right 1; bottom 2; left 0; }; }; -graphic "redbuttondown" +graphic "grey_button_pressed" { texture "gui.png"; - slice 24 30 21 10; + slice 25 54 21 10; border { top 2; right 3; bottom 4; left 2; }; shadow { top 0; right 1; bottom 2; left 0; }; }; -graphic "panelbg" -{ - texture "gui.png"; - slice 0 68 30 20; - border { top 2; right 2; bottom 2; left 2; }; -}; - -graphic "entrybg" -{ - texture "gui.png"; - slice 32 72 20 16; - border { top 2; right 2; bottom 2; left 2; }; -}; - -graphic "entrycursor" -{ - texture "gui.png"; - slice 54 74 2 12; -}; - -graphic "dropdownbg" -{ - texture "gui.png"; - slice 58 72 30 16; - border { top 4; right 20; bottom 4; left 2; }; -}; - -graphic "dropdownarrow" -{ - texture "gui.png"; - slice 90 75 10 8; -}; - -graphic "yellowlamp" +graphic "green_button" { texture "gui.png"; - slice 30 102 12 12; -}; - -graphic "yellowlamplit" -{ - texture "gui.png"; - slice 30 116 12 12; -}; - -graphic "greenlamp" -{ - texture "gui.png"; - slice 44 102 12 12; -}; - -graphic "greenlamplit" -{ - texture "gui.png"; - slice 44 116 12 12; -}; - -graphic "redlamp" -{ - texture "gui.png"; - slice 58 102 12 12; -}; - -graphic "redlamplit" -{ - texture "gui.png"; - slice 58 116 12 12; -}; - -graphic "digidisplay" -{ - texture "gui.png"; - slice 0 108 28 20; - border { top 5; right 5; bottom 5; left 5; }; -}; - -graphic "tooltip" -{ - texture "gui.png"; - slice 72 90 20 16; - border { top 2; right 2; bottom 2; left 2; }; -}; - -graphic "hsliderslot" -{ - texture "gui.png"; - slice 0 90 60 10; - border { top 0; right 5; bottom 0; left 5; }; + slice 2 43 21 10; + border { top 2; right 3; bottom 4; left 2; }; + shadow { top 0; right 1; bottom 2; left 0; }; }; -graphic "hsliderknob" +graphic "green_button_pressed" { texture "gui.png"; - slice 0 15 32 13; - shadow { top 0; right 2; bottom 3; left 0; }; + slice 25 43 21 10; + border { top 2; right 3; bottom 4; left 2; }; + shadow { top 0; right 1; bottom 2; left 0; }; }; -graphic "switchdown" +graphic "red_button" { texture "gui.png"; - slice 47 43 20 21; - shadow { top 0; right 2; bottom 3; left 0; }; + slice 2 32 21 10; + border { top 2; right 3; bottom 4; left 2; }; + shadow { top 0; right 1; bottom 2; left 0; }; }; -graphic "switchup" +graphic "red_button_pressed" { texture "gui.png"; - slice 69 43 20 21; - shadow { top 0; right 2; bottom 3; left 0; }; + slice 25 32 21 10; + border { top 2; right 3; bottom 4; left 2; }; + shadow { top 0; right 1; bottom 2; left 0; }; }; style "button" @@ -167,8 +91,8 @@ style "button" part { - graphic NORMAL "greybutton"; - graphic ACTIVE "greybuttondown"; + graphic NORMAL "grey_button"; + graphic ACTIVE "grey_button_pressed"; align 0.5 0.0; fill 0.0 0.0; }; @@ -186,8 +110,8 @@ style "button-green" part { - graphic NORMAL "greenbutton"; - graphic ACTIVE "greenbuttondown"; + graphic NORMAL "green_button"; + graphic ACTIVE "green_button_pressed"; align 0.5 0.0; fill 0.0 0.0; }; @@ -205,8 +129,8 @@ style "button-red" part { - graphic NORMAL "redbutton"; - graphic ACTIVE "redbuttondown"; + graphic NORMAL "red_button"; + graphic ACTIVE "red_button_pressed"; align 0.5 0.0; fill 0.0 0.0; }; @@ -218,40 +142,48 @@ style "button-red" }; }; -style "toggle" +graphic "yellow_lamp" { - font_color 0.0 0.0 0.0; + texture "gui.png"; + slice 28 105 10 10; +}; - special "text" - { - align 0.5 1.0; - fill 0.0 0.0; - }; +graphic "yellow_lamp_lit" +{ + texture "gui.png"; + slice 28 117 10 10; +}; - part - { - align 0.5 0.0; - fill 0.0 0.0; - graphic NORMAL "switchdown"; - graphic ACTIVE "switchup"; - }; +graphic "green_lamp" +{ + texture "gui.png"; + slice 40 105 10 10; }; -style "panel" +graphic "green_lamp_lit" { - part - { - graphic NORMAL "panelbg"; - }; - special "children"; + texture "gui.png"; + slice 40 117 10 10; +}; + +graphic "red_lamp" +{ + texture "gui.png"; + slice 52 105 10 10; +}; + +graphic "red_lamp_lit" +{ + texture "gui.png"; + slice 52 116 10 10; }; style "indicator" { part { - graphic NORMAL "yellowlamp"; - graphic ACTIVE "yellowlamplit"; + graphic NORMAL "yellow_lamp"; + graphic ACTIVE "yellow_lamp_lit"; align 0.5 0.5; fill 0.0 0.0; }; @@ -261,8 +193,8 @@ style "indicator-green" { part { - graphic NORMAL "greenlamp"; - graphic ACTIVE "greenlamplit"; + graphic NORMAL "green_lamp"; + graphic ACTIVE "green_lamp_lit"; align 0.5 0.5; fill 0.0 0.0; }; @@ -272,17 +204,34 @@ style "indicator-red" { part { - graphic NORMAL "redlamp"; - graphic ACTIVE "redlamplit"; + graphic NORMAL "red_lamp"; + graphic ACTIVE "red_lamp_lit"; align 0.5 0.5; fill 0.0 0.0; }; }; -style "label" +graphic "raised_grey_bg" { - font_color 0 0 0; - special "text"; + texture "gui.png"; + slice 2 74 24 16; + border { top 4; right 4; bottom 4; left 4; }; +}; + +style "panel" +{ + part + { + graphic NORMAL "raised_grey_bg"; + }; + special "children"; +}; + +graphic "sunken_black_bg" +{ + texture "gui.png"; + slice 2 110 24 16; + border { top 4; right 4; bottom 4; left 4; }; }; style "label-digital" @@ -292,7 +241,7 @@ style "label-digital" part { - graphic NORMAL "digidisplay"; + graphic NORMAL "sunken_black_bg"; }; special "text" @@ -302,66 +251,139 @@ style "label-digital" }; }; -style "label-tooltip" +graphic "sunken_white_bg" { - font_color 0.0 0.0 0.0; + texture "gui.png"; + slice 2 92 24 16; + border { top 4; right 4; bottom 4; left 4; }; +}; + +graphic "cursor" +{ + texture "gui.png"; + slice 40 81 2 10; +}; + +style "entry" +{ + font_color 0 0 0; part { - graphic NORMAL "tooltip"; + graphic NORMAL "sunken_white_bg"; }; special "text" { align 0.0 0.5; fill 0.0 0.0; - margin { top 2; right 2; bottom 2; left 2; }; + margin { left 3; right 3; }; + }; + + special "cursor" + { + graphic FOCUS "cursor"; + align 0.0 0.5; + fill 0.0 0.0; + size 2 12; + margin { left 3; right 3; }; }; }; -style "hslider" +style "entry-multiline" { + font_color 0 0 0; + part { - graphic NORMAL "hsliderslot"; - fill 1.0 0.0; + graphic NORMAL "sunken_white_bg"; + margin { right 10; }; }; - special "slider" + special "text" { - graphic NORMAL "hsliderknob"; + align 0.0 1.0; fill 0.0 0.0; + margin { top 2; right 13; left 3; bottom 2; }; + }; + + special "cursor" + { + graphic FOCUS "cursor"; + size 2 12; + }; + + special "slider" + { + align 1.0 0.0; + fill 0.0 1.0; + size 10 0; }; }; -style "entry" +graphic "selection" { - font_color 0 0 0; + texture "gui.png"; + slice 44 81 20 10; + border { top 4; right 4; bottom 4; left 4; }; +}; + +style "list" +{ + font_color 0.0 0.0 0.0; part { - graphic NORMAL "entrybg"; + graphic NORMAL "sunken_white_bg"; + margin { right 10; }; }; - special "text" + special "selection" { - align 0.0 0.5; - fill 0.0 0.0; - margin { left 3; right 3; }; + graphic NORMAL "selection"; + fill 1.0 1.0; + margin { top 2; right 12; bottom 2; left 2; }; }; - special "cursor" + special "items" { - graphic FOCUS "entrycursor"; - align 0.0 0.5; - fill 0.0 0.0; - margin { left 3; right 3; }; + margin { top 2; right 12; bottom 2; left 2; }; + }; + + special "slider" + { + align 1.0 0.0; + fill 0.0 1.0; + size 10 0; }; }; -style "root" +graphic "up_arrow_button" { - special "children"; + texture "gui.png"; + slice 2 18 13 13; + shadow { top 0; right 1; bottom 2; left 0; }; +}; + +graphic "up_arrow_button_pressed" +{ + texture "gui.png"; + slice 17 18 13 13; + shadow { top 0; right 1; bottom 2; left 0; }; +}; + +graphic "down_arrow_button" +{ + texture "gui.png"; + slice 2 4 13 13; + shadow { top 0; right 1; bottom 2; left 0; }; +}; + +graphic "down_arrow_button_pressed" +{ + texture "gui.png"; + slice 17 4 13 13; + shadow { top 0; right 1; bottom 2; left 0; }; }; style "dropdown" @@ -370,15 +392,16 @@ style "dropdown" part { - graphic NORMAL "dropdownbg"; + graphic NORMAL "sunken_white_bg"; + margin { right 14; }; }; part { - graphic NORMAL "dropdownarrow"; + graphic NORMAL "down_arrow_button"; + graphic ACTIVE "down_arrow_button_pressed"; align 1.0 0.5; fill 0.0 0.0; - margin { right 2; }; }; special "text" @@ -391,19 +414,93 @@ style "dropdown" special "list"; }; -style "list" +graphic "switch_up" +{ + texture "gui.png"; + slice 48 42 20 21; + shadow { top 0; right 2; bottom 3; left 0; }; +}; + +graphic "switch_down" +{ + texture "gui.png"; + slice 48 20 20 21; + shadow { top 0; right 2; bottom 3; left 0; }; +}; + +style "toggle" { font_color 0.0 0.0 0.0; + special "text" + { + align 0.5 1.0; + fill 0.0 0.0; + }; + part { - graphic NORMAL "entrybg"; + align 0.5 0.0; + fill 0.0 0.0; + graphic NORMAL "switch_down"; + graphic ACTIVE "switch_up"; }; +}; - special "items" +graphic "horizontal_slot" +{ + texture "gui.png"; + slice 28 93 20 10; + border { top 0; right 5; bottom 0; left 5; }; +}; + +graphic "horizontal_knob" +{ + texture "gui.png"; + slice 70 51 32 13; + shadow { top 0; right 2; bottom 3; left 0; }; +}; + +style "hslider" +{ + part { - margin { top 2; right 2; bottom 2; left 2; }; + graphic NORMAL "horizontal_slot"; + fill 1.0 0.0; + }; + + special "slider" + { + graphic NORMAL "horizontal_knob"; + fill 0.0 0.0; }; }; -style "vslider"; +graphic "vertical_slot" +{ + texture "gui.png"; + slice 28 71 10 20; + border { top 5; right 0; bottom 5; left 0; }; +}; + +graphic "vertical_knob" +{ + texture "gui.png"; + slice 70 17 12 33; + shadow { top 0; right 2; bottom 3; left 0; }; +}; + +style "vslider" +{ + part + { + graphic NORMAL "vertical_slot"; + fill 0.0 1.0; + }; + + special "slider" + { + graphic NORMAL "vertical_knob"; + fill 0.0 0.0; + }; +}; diff --git a/source/engineer/mainpanel.cpp b/source/engineer/mainpanel.cpp index 49750bf..2083e7c 100644 --- a/source/engineer/mainpanel.cpp +++ b/source/engineer/mainpanel.cpp @@ -19,46 +19,46 @@ MainPanel::MainPanel(Engineer &e, GLtk::Resources &r): Panel(r), engineer(e) { - set_size(200, 133); + set_size(200, 117); GLtk::Button *btn; add(*(btn=new GLtk::Button(res, "Off"))); - btn->set_geometry(GLtk::Geometry(10, 86, 40, 25)); + btn->set_geometry(GLtk::Geometry(10, 70, 40, 25)); btn->set_style("red"); btn->signal_clicked.connect(sigc::mem_fun(this, &MainPanel::power_off)); add(*(ind_off=new GLtk::Indicator(res))); - ind_off->set_geometry(GLtk::Geometry(10, 111, 40, 12)); + ind_off->set_geometry(GLtk::Geometry(10, 95, 40, 12)); ind_off->set_style("red"); add(*(btn=new GLtk::Button(res, "On"))); - btn->set_geometry(GLtk::Geometry(50, 86, 40, 25)); + btn->set_geometry(GLtk::Geometry(50, 70, 40, 25)); btn->set_style("green"); btn->signal_clicked.connect(sigc::mem_fun(this, &MainPanel::power_on)); add(*(ind_on=new GLtk::Indicator(res))); - ind_on->set_geometry(GLtk::Geometry(50, 111, 40, 12)); + ind_on->set_geometry(GLtk::Geometry(50, 95, 40, 12)); ind_on->set_style("green"); + add(*(btn=new GLtk::Button(res, "Halt"))); + btn->set_geometry(GLtk::Geometry(90, 70, 40, 25)); + btn->signal_clicked.connect(sigc::mem_fun(this, &MainPanel::toggle_halt)); + + add(*(ind_halt=new GLtk::Indicator(res))); + ind_halt->set_geometry(GLtk::Geometry(90, 95, 40, 12)); + add(*(btn=new GLtk::Button(res, "Quit"))); - btn->set_geometry(GLtk::Geometry(150, 86, 40, 25)); + btn->set_geometry(GLtk::Geometry(150, 70, 40, 25)); btn->set_style("red"); btn->signal_clicked.connect(sigc::mem_fun(this, &MainPanel::quit)); add(*(btn=new GLtk::Button(res, "+Loc"))); - btn->set_geometry(GLtk::Geometry(90, 86, 40, 25)); + btn->set_geometry(GLtk::Geometry(10, 40, 40, 25)); btn->signal_clicked.connect(sigc::mem_fun(this, &MainPanel::new_loc)); - add(*(ind_halt=new GLtk::Indicator(res))); - ind_halt->set_geometry(GLtk::Geometry(10, 69, 40, 12)); - - add(*(btn=new GLtk::Button(res, "Halt"))); - btn->set_geometry(GLtk::Geometry(10, 44, 40, 25)); - btn->signal_clicked.connect(sigc::mem_fun(this, &MainPanel::toggle_halt)); - add(*(lbl_status=new GLtk::Label(res))); - lbl_status->set_geometry(GLtk::Geometry(10, 10, 180, 24)); + lbl_status->set_geometry(GLtk::Geometry(10, 10, 180, 20)); lbl_status->set_style("digital"); Marklin::Driver &driver = engineer.get_layout().get_driver(); diff --git a/source/engineer/timetabledialog.cpp b/source/engineer/timetabledialog.cpp index fcb06f8..4f22712 100644 --- a/source/engineer/timetabledialog.cpp +++ b/source/engineer/timetabledialog.cpp @@ -38,6 +38,7 @@ TimetableDialog::TimetableDialog(const GLtk::Resources &r, Timetable &tt): add(*(ent_timetable = new GLtk::Entry(res))); ent_timetable->set_geometry(GLtk::Geometry(10, 45, geom.w-20, geom.h-55)); + ent_timetable->set_style("multiline"); ent_timetable->set_multiline(true); string text; diff --git a/source/engineer/trainpanel.cpp b/source/engineer/trainpanel.cpp index 08af8cc..75024dc 100644 --- a/source/engineer/trainpanel.cpp +++ b/source/engineer/trainpanel.cpp @@ -26,44 +26,44 @@ TrainPanel::TrainPanel(Engineer &e, const GLtk::Resources &r, Train &t): engineer(e), train(t) { - set_size(200, 170); + set_size(200, 175); train.signal_control_changed.connect(sigc::mem_fun(this, &TrainPanel::train_control_changed)); add(*(lbl_addr=new GLtk::Label(res, format("%2d", train.get_address())))); lbl_addr->set_style("digital"); - lbl_addr->set_geometry(GLtk::Geometry(10, geom.h-34, 35, 24)); + lbl_addr->set_geometry(GLtk::Geometry(10, geom.h-30, 35, 20)); add(*(lbl_name=new GLtk::Label(res, train.get_name()))); lbl_name->set_style("digital"); - lbl_name->set_geometry(GLtk::Geometry(45, geom.h-34, geom.w-55, 24)); + lbl_name->set_geometry(GLtk::Geometry(50, geom.h-30, geom.w-55, 20)); train.signal_name_changed.connect(sigc::mem_fun(lbl_name, &GLtk::Label::set_text)); add(*(lbl_speed=new GLtk::Label(res, " 0"))); lbl_speed->set_style("digital"); - lbl_speed->set_geometry(GLtk::Geometry(10, geom.h-58, 35, 24)); + lbl_speed->set_geometry(GLtk::Geometry(10, geom.h-55, 35, 20)); add(*(sld_speed=new GLtk::HSlider(res))); - sld_speed->set_geometry(GLtk::Geometry(50, geom.h-51, geom.w-80, 10)); + sld_speed->set_geometry(GLtk::Geometry(50, geom.h-50, geom.w-80, 10)); sld_speed->set_range(0, 200); sld_speed->set_step(5); sld_speed->signal_value_changed.connect(sigc::mem_fun(this, &TrainPanel::speed_slider_changed)); add(*(tgl_forward=new GLtk::Toggle(res))); tgl_forward->set_text("Fwd"); - tgl_forward->set_geometry(GLtk::Geometry(geom.w-30, geom.h-59, 20, 27)); + tgl_forward->set_geometry(GLtk::Geometry(geom.w-30, geom.h-58, 20, 27)); tgl_forward->set_value(true); tgl_forward->signal_toggled.connect(sigc::mem_fun(this, &TrainPanel::forward_toggled)); const Route *route = train.get_route(); add(*(lbl_route=new GLtk::Label(res, (route ? route->get_name() : "Free run")))); lbl_route->set_style("digital"); - lbl_route->set_geometry(GLtk::Geometry(10, 58, geom.w-20, 24)); + lbl_route->set_geometry(GLtk::Geometry(10, 65, geom.w-20, 20)); train.signal_route_changed.connect(sigc::mem_fun(this, &TrainPanel::train_route_changed)); add(*(lbl_status=new GLtk::Label(res, train.get_status()))); lbl_status->set_style("digital"); - lbl_status->set_geometry(GLtk::Geometry(10, 34, geom.w-20, 24)); + lbl_status->set_geometry(GLtk::Geometry(10, 40, geom.w-20, 20)); train.signal_status_changed.connect(sigc::mem_fun(this, &TrainPanel::train_status_changed)); const map &funcs = train.get_locomotive_type().get_functions(); @@ -75,7 +75,7 @@ TrainPanel::TrainPanel(Engineer &e, const GLtk::Resources &r, Train &t): GLtk::Toggle *tgl; add(*(tgl=new GLtk::Toggle(res))); tgl->set_text(fname); - tgl->set_geometry(GLtk::Geometry(x, geom.h-85, 36, 27)); + tgl->set_geometry(GLtk::Geometry(x, geom.h-87, 36, 27)); tgl->set_value(train.get_function(i->first)); tgl->signal_toggled.connect(sigc::bind(sigc::mem_fun(this, &TrainPanel::func_toggled), i->first)); @@ -86,23 +86,23 @@ TrainPanel::TrainPanel(Engineer &e, const GLtk::Resources &r, Train &t): GLtk::Button *btn; add(*(btn=new GLtk::Button(res, "Edit"))); - btn->set_geometry(GLtk::Geometry(geom.w-46, 10, 36, 24)); + btn->set_geometry(GLtk::Geometry(geom.w-46, 10, 36, 25)); btn->signal_clicked.connect(sigc::mem_fun(this, &TrainPanel::edit_clicked)); add(*(btn=new GLtk::Button(res, "Place"))); - btn->set_geometry(GLtk::Geometry(geom.w-82, 10, 36, 24)); + btn->set_geometry(GLtk::Geometry(geom.w-82, 10, 36, 25)); btn->signal_clicked.connect(sigc::mem_fun(this, &TrainPanel::place_clicked)); add(*(btn=new GLtk::Button(res, "GoTo"))); - btn->set_geometry(GLtk::Geometry(geom.w-118, 10, 36, 24)); + btn->set_geometry(GLtk::Geometry(geom.w-118, 10, 36, 25)); btn->signal_clicked.connect(sigc::mem_fun(this, &TrainPanel::goto_clicked)); add(*(btn=new GLtk::Button(res, "Route"))); - btn->set_geometry(GLtk::Geometry(geom.w-154, 10, 36, 24)); + btn->set_geometry(GLtk::Geometry(geom.w-154, 10, 36, 25)); btn->signal_clicked.connect(sigc::mem_fun(this, &TrainPanel::route_clicked)); add(*(btn=new GLtk::Button(res, "TTbl"))); - btn->set_geometry(GLtk::Geometry(geom.w-190, 10, 36, 24)); + btn->set_geometry(GLtk::Geometry(geom.w-190, 10, 36, 25)); btn->signal_clicked.connect(sigc::mem_fun(this, &TrainPanel::timetable_clicked)); }