Jump to content
uniGUI Discussion Forums
mierlp

Screen examples of you're application designs

Recommended Posts

hi

 

Lot's of us here on the form are using uniGui from the beginning.

I was wondering how you're application GUI looks ..for seeing

and inspirion what can be done with uniGui...some screenshot

would be wonderfull.

 

Regards Peter

 

 

  • Upvote 1

Share this post


Link to post
Share on other sites

Here a few screenshots from several projects:

 

1.png

 

2.png

 

3.png

 

4.png

 

5.png

 

6.png

 

7.png

 

8.png

 

9.png

 

10.png

  • Upvote 3

Share this post


Link to post
Share on other sites

i push this posting up  .. i hope more users will show their screenshots ...

 

:)  :)  :)

Share this post


Link to post
Share on other sites

Nice work have been donen

 

@Erich L How or with which components did you create the menu ?

Share this post


Link to post
Share on other sites

@mierlp

 

i use a lot of UniContainerpane like a DIV-Layer .. and give UniContainer a CSS.Class

 

ClientEvent / ExtEvents...

function beforerender(sender, eOpts){
  sender.addClass(' your css class name ');
}

the mainMenu-points are dynamical (depending on user-right) ... i call it "my_historyLabel"...

 

          my_historyLabel:=TuniLabel.Create(self);
          my_historyLabel.Parent:=my_history;
          my_historyLabel.Font.NAME    := 'Arial';
          my_historyLabel.Font.Height  := -11;
          my_historyLabel.Font.size    := 9;
          my_historyLabel.font.color:=$00DBDBDB;// clWhite;
          //my_historyLabel.font.Style:=[fsbold];
          my_historyLabel.Left:=5;
          my_historyLabel.Top:=my_arrayzaehler;
          my_historyLabel.caption:=text;
          my_historyLabel.Name:='HISTORY_LABEL'+inttostr(my_arrayzaehler);
          my_historyLabel.ClientEvents.ExtEvents.Add('beforerender=function beforerender(sender, eOpts){ sender.addClass("ALLGEMEIN mainformpunkt");}');
          my_historyLabel.ClientEvents.ExtEvents.Add('click=function click(sender, eOpts){ MainForm.mask.show();}');

 

 

 

css

 

 

.ALLGEMEIN {
   background-color: rgb(67,101,111) !important;
   background-image: url('ALLGEMEIN.png');
   background-repeat: no-repeat;
   background-position: 12px 11px; 
   background-size: 7px 7px; 
   padding:9px;
   padding-left: 35px;
   height:30  !important;
}
 
 
 
.mainformpunkt {
   -webkit-border-radius: 10px;
   border-radius: 10px; 
   user-select: none;
   -o-user-select:none;
   -moz-user-select: none;
   -khtml-user-select: none;
   -webkit-user-select: none;
   -ms-user-select: none;
   cursor: hand;
   cursor: pointer;
   overflow:hidden; 
}
 
.mainformpunkt:hover {
-webkit-box-shadow: 0px 0px 0px 2px rgba(255,255,255,1);
-moz-box-shadow: 0px 0px 0px 2px rgba(255,255,255,1);
box-shadow: 0px 0px 0px 2px rgba(255,255,255,1);
}
 
 

 

Share this post


Link to post
Share on other sites

i push posting up  :-)   .. hope to see more UniGui-Screenshots .. ;-)

Share this post


Link to post
Share on other sites

Please post more of these :D  The screenshots are inspiring. I'm interested particularly in seeing forms used for data input.

Share this post


Link to post
Share on other sites

@DaleFong - that's fantastic. Is it all native uniGUI controls or did you have to write lots of CSS & javascript too ?

Most are native uniGUI controls except graphing is 3rd party from HiCharts, Google and 3D uses WebGL.  Custom CSS was used to override defaults in Neptune theme to get the color scheme I wanted (green) and the tab layouts for the page control.  Most Javascript was derived from examples in this forum except the mods I had to make to support my 2D/3D drawing program.  Some of these look like desktop apps because they were ported from a desktop app so the goal was to make them look and feel the same.

Share this post


Link to post
Share on other sites

@dale fong

 

 

WOW ... Congratulation ... very very nice UI .. and cool functionality ....

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×