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

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...