Jump to content

Screen examples of you're application designs


mierlp

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 2
Link to comment
Share on other sites

  • Replies 252
  • Created
  • Last Reply

Top Posters In This Topic

@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);
}
 
 

 

Link to comment
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.

Link to comment
Share on other sites

Please sign in to comment

You will be able to leave a comment after signing in



Sign In Now
×
×
  • Create New...