GIM gidedit - a fltk fluid resize project

cable_guy_67 · #1 28-May-2005, 11:01

Hey all,
I have been playing with the old pedit app that dsmith posted a while back. As a start I wanted to define the base for the app and control the resize behavior before even getting into the real app itself. I think I have it under control (finally) and have simply defined the group areas that will make up the main UI. Any of the subclasses will replace the existing groups. For now there is a group that will be the menubar, a group that will be the empasis, a group that will be the links, a group that will be the markups, a group that will be the smilies, a group that will be the editor proper, and an output group that will be messages.

Code:

# data file for the Fltk User Interface Designer (fluid)
version 1.0107 
header_name {.h} 
code_name {.cxx}
class GIMapp {open
} {
  Function {GIMapp()} {open
  } {
    Fl_Window main_win {open
      xywh {490 146 400 440} type Double resizable visible
    } {
      Fl_Box {} {
        xywh {0 100 200 240} labeltype NO_LABEL hide resizable
      }
      Fl_Group {} {open
        xywh {0 0 400 20} box THIN_UP_BOX
      } {
        Fl_Box menu_resize {
          xywh {0 0 220 20} labeltype NO_LABEL hide resizable
        }
      }
      Fl_Group {} {open
        xywh {0 20 400 20} box BORDER_BOX
      } {
        Fl_Box empasis_resize {
          xywh {0 20 220 20} labeltype NO_LABEL hide resizable
        }
      }
      Fl_Group {} {open
        xywh {0 40 400 20} box BORDER_BOX
      } {
        Fl_Box link_resize {
          xywh {0 40 220 20} labeltype NO_LABEL hide resizable
        }
      }
      Fl_Group {} {open
        xywh {0 60 400 20} box BORDER_BOX
      } {
        Fl_Box markup_resize {
          xywh {0 60 220 20} labeltype NO_LABEL hide
        }
      }
      Fl_Group {} {open
        xywh {0 80 400 20} box BORDER_BOX
      } {
        Fl_Box smilie_resize {
          xywh {0 80 220 20} labeltype NO_LABEL hide resizable
        }
      }
      Fl_Group {} {open selected
        xywh {0 100 400 320} box BORDER_BOX
      } {}
      Fl_Group {} {open
        xywh {0 420 400 20} box BORDER_BOX
      } {
        Fl_Box output_resize {
          xywh {0 421 220 20} labeltype NO_LABEL hide resizable
        }
      }
    }
  }
} 

Function {} {open
} {
  code {GIMapp mainwin;
mainwin.main_win->show();} {}
}

Right now, the groups have visability so you can see the action of the resize. I think it works the way I want. I will post more (at the very least a mock-up of the filled button bars) as it gets completed. As it sits, all the button bar groups and output group maintain their vertical size while allowing the horizontal size to be modified. Pretty simple really.

Mark

The attached screen shots show the default open, minimum resize and large resize.

dsmith · #2 29-May-2005, 07:19

Very nice...

Is the large size the "maximum" size or is it just a large size? And I assume the full screen would resize properly as well.

That post editor (pedit as I called it) would be a good thing to have IMO. Like most things that I do, it was just kind of thrown together, but with a bit of help I think that we could make that into a very valuable tool. Not just for GIDForums™, but for any forum. However, other forums don't have C-mark up

.

cable_guy_67 · #3 01-Jun-2005, 15:00

Thanks D. Yes, I just did a drag instead of a full screen. That has been fixed in this version.

I agree with you that a post editor that could handle markup would be a very cool tool, especially if you are like me and spend a large amount of time on a particular post. I could see it being useful if you are not from the cable generation as well (oh, I hear you dsl folks booing and hissing) and dialup for connectivity. Lastly, it should not just be for the fine GID folks but configurable to your favorite (there are others :gasp: ) forums.

Ok, so another forum may not have cool code markups or the smilies may be different, etc, etc. That is the very reason I am trying to design the pedit app in a way that will take different specs for different boards. Now I personally wouldn't go anywhere else but...

Ok, enough of that rot. When good ole' dsmith posted pedit I didn't even know that GID existed and GIM was not (AFAIK) even a public entity yet. I had never even heard of FLTK nor could I make a distinction between referring to a value by reference or address. Oh ain't time cool! Now I place a hunk of fluid project code (1.1.x or .7 as I refer to it as) that is a basic framework for pedit.

Essentially, the frame describes the UI for a post editor. Even without use of fluid you should be able to deem what is what. There are seven distinct areas of the UI. Simply put,

menu area
empasis area - effect the look of your text
link area - tie something external to your post
markup area - apply something special to an area of your post
smilie area - without a face to face, this is the best you get
text edit area
info output area - some basic info you may or may not find annoying

Each of these (in my iteration anyhow) will be derived from an FLTK widget that inherits from a group. Because of this, any designed class can have its pointer tossed at the basic frame groups for display purposes. For now I have just defined some GID style buttons that show what can be done here. What I am really saying is that these groups will be subclasses that will state the specifics for that area. Here at GID the empasis markup is,

[b]
[i]
[u]
[left]
[right]
[center]
[indent]

So the app itself should just need to poll the specific class, find out how many choices (and then the button label) and place them accordingly at the default size of 400X440. The resize behavior is based on the type of information that will be presented to the user so it should be trivial to adjust accordingly. An example of this is the exclusion of the size choice widget or the racking of the light buttons based on the assumption that if you can see two letters, you can use the buttons even at a minimal state.

What I am looking for now is what bothers you about the UI. What about it doesn't work? Some things that come to mind are, "What if there are too many of a particular type of group members?" I guess doubling the height would be the answer.

Well, here is the code and some pix to show how the resizing works. Enjoy.

Code:

# data file for the Fltk User Interface Designer (fluid)
version 1.0107 
header_name {.h} 
code_name {.cxx}
class GIMapp {open
} {
  Function {GIMapp()} {open
  } {
    Fl_Window main_win {open
      xywh {518 79 400 440} type Double resizable visible
    } {
      Fl_Box {} {
        xywh {105 174 180 200} labeltype NO_LABEL hide resizable
      }
      Fl_Group {} {open
        xywh {0 0 400 20} box THIN_UP_BOX
      } {
        Fl_Box menu_resize {
          xywh {0 0 220 20} labeltype NO_LABEL hide resizable
        }
        Fl_Menu_Bar {} {open
          xywh {0 0 400 20}
        } {
          Submenu {} {
            label file open
            xywh {0 0 62 20}
          } {}
          Submenu {} {
            label edit open
            xywh {0 0 62 20}
          } {}
        }
      }
      Fl_Group {} {open
        xywh {0 20 400 20} box BORDER_BOX
      } {
        Fl_Box empasis_resize {
          xywh {0 20 330 20} labeltype NO_LABEL hide resizable
        }
        Fl_Light_Button {} {
          label B
          xywh {0 20 40 20}
        }
        Fl_Light_Button {} {
          label I
          xywh {40 20 40 20}
        }
        Fl_Light_Button {} {
          label U
          xywh {80 20 40 20}
        }
        Fl_Light_Button {} {
          label L
          xywh {120 20 40 20}
        }
        Fl_Light_Button {} {
          label C
          xywh {160 20 40 20}
        }
        Fl_Light_Button {} {
          label R
          xywh {200 20 40 20}
        }
        Fl_Choice {} {open
          xywh {240 20 80 20} down_box BORDER_BOX labeltype NO_LABEL align 0
        } {}
        Fl_Choice {} {open
          xywh {320 20 80 20} down_box BORDER_BOX labeltype NO_LABEL align 0
        } {}
      }
      Fl_Group {} {open
        xywh {0 40 400 20} box BORDER_BOX
      } {
        Fl_Box link_resize {
          xywh {0 40 350 20} labeltype NO_LABEL hide resizable
        }
        Fl_Button {} {
          label UR
          xywh {0 40 30 20} align 16
        }
        Fl_Button {} {
          label TH
          xywh {30 40 30 20} align 16
        }
        Fl_Button {} {
          label PO
          xywh {60 40 30 20} align 16
        }
        Fl_Button {} {
          label GN
          xywh {90 40 30 20} align 16
        }
        Fl_Button {} {
          label GW
          xywh {120 40 30 20} align 16
        }
        Fl_Button {} {
          label LJ
          xywh {150 40 30 20} align 16
        }
        Fl_Choice {} {open
          xywh {180 40 170 20} down_box BORDER_BOX labeltype NO_LABEL align 0
        } {}
        Fl_Choice {} {open
          xywh {350 40 50 20} down_box BORDER_BOX labeltype NO_LABEL align 0
        } {}
        Fl_Input {} {
          xywh {180 40 170 20} labeltype NO_LABEL align 0
        }
      }
      Fl_Group {} {open
        xywh {0 60 400 20} box BORDER_BOX
      } {
        Fl_Box markup_resize {
          xywh {0 60 400 20} labeltype NO_LABEL hide resizable
        }
        Fl_Light_Button {} {
          label C
          xywh {0 60 40 20}
        }
        Fl_Light_Button {} {
          label {C+}
          xywh {40 60 40 20}
        }
        Fl_Light_Button {} {
          label CO
          xywh {80 60 40 20}
        }
        Fl_Light_Button {} {
          label KB
          xywh {120 60 40 20}
        }
        Fl_Light_Button {} {
          label HT
          xywh {160 60 40 20}
        }
        Fl_Light_Button {} {
          label CS
          xywh {200 60 40 20}
        }
        Fl_Light_Button {} {
          label QU
          xywh {240 60 40 20}
        }
        Fl_Light_Button {} {
          label LI
          xywh {280 60 40 20}
        }
        Fl_Light_Button {} {
          label IT
          xywh {320 60 40 20}
        }
        Fl_Light_Button {} {
          label IM
          xywh {360 60 40 20}
        }
      }
      Fl_Group {} {open
        xywh {0 80 400 30} box BORDER_BOX labeltype NO_LABEL align 16
      } {
        Fl_Box smilie_resize {
          xywh {285 80 115 30} labeltype NO_LABEL hide resizable
        }
        Fl_Button ICON_MAD {
          tooltip {:x} image {../../Images/ICON_MAD.png} xywh {0 80 15 15} align 16
        }
        Fl_Button biggrin {
          tooltip {:D} image {../../Images/biggrin.png} xywh {0 95 15 15} align 16
        }
        Fl_Button cool {
          tooltip {:cool:} image {../../Images/cool.png} xywh {15 80 15 15} align 16
        }
        Fl_Button eek {
          tooltip {:eek:} image {../../Images/eek.png} xywh {15 95 15 15} align 16
        }
        Fl_Button frown {
          tooltip {:(} image {../../Images/frown.png} xywh {30 80 15 15} align 16
        }
        Fl_Button icon_arrow {
          tooltip {:arrow:} image {../../Images/icon_arrow.png} xywh {30 95 15 15} align 16
        }
        Fl_Button icon_biggrin {
          tooltip {:grin} image {../../Images/icon_biggrin.png} xywh {45 80 15 15} align 16
        }
        Fl_Button icon_confused {
          tooltip {:???:} image {../../Images/icon_confused.png} xywh {45 95 15 15} align 16
        }
        Fl_Button icon_cool {
          tooltip {8)} image {../../Images/icon_cool.png} xywh {60 80 15 15} align 16
        }
        Fl_Button icon_cry {
          tooltip {:-(} image {../../Images/icon_cry.png} xywh {60 95 15 15} align 16
        }
        Fl_Button icon_eek {
          tooltip 8O image {../../Images/icon_eek.png} xywh {75 80 15 15} align 16
        }
        Fl_Button icon_evil {
          tooltip {:evil:} image {../../Images/icon_evil.png} xywh {75 95 15 15} align 16
        }
        Fl_Button icon_exclaim {
          tooltip {:-x} image {../../Images/icon_exclaim.png} xywh {90 80 15 15} align 16
        }
        Fl_Button icon_idea {
          tooltip {:idea:} image {../../Images/icon_idea.png} xywh {90 95 15 15} align 16
        }
        Fl_Button icon_lol {
          tooltip {:lol:} image {../../Images/icon_lol.png} xywh {105 80 15 15} align 16
        }
        Fl_Button icon_question {
          tooltip {:confused:} image {../../Images/icon_question.png} xywh {105 95 15 15} align 16
        }
        Fl_Button icon_razz {
          tooltip {:razz:} image {../../Images/icon_razz.png} xywh {120 80 15 15} align 16
        }
        Fl_Button icon_redface {
          tooltip {:oops:} image {../../Images/icon_redface.png} xywh {120 95 15 15} align 16
        }
        Fl_Button icon_rolley {
          image {../../Images/icon_rolley.png} xywh {135 80 15 15} align 16
        }
        Fl_Button icon_sad {
          image {../../Images/icon_sad.png} xywh {135 95 15 15} align 16
        }
        Fl_Button icon_smile {
          image {../../Images/icon_smile.png} xywh {150 80 15 15} align 16
        }
        Fl_Button icon_suprised {
          image {../../Images/icon_surprised.png} xywh {150 95 15 15} align 16
        }
        Fl_Button icon_twisted {
          image {../../Images/icon_twisted.png} xywh {165 80 15 15} align 16
        }
        Fl_Button icon_wink {
          image {../../Images/icon_wink.png} xywh {165 95 15 15} align 16
        }
        Fl_Button mad {
          tooltip {:mad:} image {../../Images/mad.png} xywh {180 80 15 15} align 16
        }
        Fl_Button redface {
          image {../../Images/redface.png} xywh {180 95 15 15} align 16
        }
        Fl_Button rolleyes {
          image {../../Images/rolleyes.png} xywh {195 80 15 15} align 16
        }
        Fl_Button smile {
          image {../../Images/smile.png} xywh {195 95 15 15} align 16
        }
        Fl_Button tongue {
          image {../../Images/tongue.png} xywh {210 80 15 15} align 16
        }
        Fl_Button wink {
          image {../../Images/wink.png} xywh {210 95 15 15} align 16
        }
        Fl_Button banana {
          tooltip {:banana:} image {../../Images/banana.png} xywh {225 80 20 30} align 82
        }
        Fl_Button confused {
          image {../../Images/confused.png} xywh {245 80 20 30} align 82
        }
        Fl_Button silly_hair {
          tooltip {:hair:} image {../../Images/silly_hair.png} xywh {265 80 20 30} align 82
        }
      }
      Fl_Group {} {open
        xywh {0 110 400 310} box BORDER_BOX
      } {
        Fl_Text_Editor {} {
          xywh {0 110 400 310} box BORDER_BOX
        }
      }
      Fl_Group {} {open
        xywh {0 420 400 24} box BORDER_BOX
      } {
        Fl_Box output_resize {
          xywh {310 420 90 20} labeltype NO_LABEL hide resizable
        }
        Fl_Output modified_yn {
          xywh {0 420 30 20} color 50 labeltype NO_LABEL align 0
        }
        Fl_Output current_tag {
          xywh {30 420 60 20} color 50 labeltype NO_LABEL align 0
        }
        Fl_Output bool_openclose {
          xywh {90 420 30 20} color 50 labeltype NO_LABEL align 0
        }
        Fl_Output thread_id {
          xywh {120 420 100 20} color 50 labeltype NO_LABEL align 0
        }
        Fl_Output working_filename {selected
          xywh {220 420 175 20} color 50 labeltype NO_LABEL align 0
        }
      }
    }
  }
} 

Function {} {open
} {
  code {GIMapp mainwin;
mainwin.main_win->show();} {}
}

Hope you found this even vaguely interesting.

Mark

[edit]
the fluid project file does not perfectly represent the attached images. I made some resizing adjustments while working on this post and now the smilie images are protected as well as changes to the output info area
[/edit]

Thread Tools	Search this Thread
Show Printable Version Email this Page	Search this Thread: Advanced Search
Rate This Thread
Rate This Thread:

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
FLTK && fluid In Motion	cable_guy_67	FLTK Forum	4	20-Mar-2008 03:52
[Tutorial] GUI programming with FLTK	dsmith	FLTK Forum	10	03-Oct-2005 15:41
Community Project Proposal	dsmith	Miscellaneous Programming Forum	71	19-Feb-2005 12:26
GIMcontacts - a gim fltk fluid venture	cable_guy_67	FLTK Forum	0	14-Feb-2005 14:18
Simple FLTK dialog box sample	cable_guy_67	FLTK Forum	4	02-Nov-2004 08:46

GIM gidedit - a fltk fluid resize project

GIMpedit