Jump to content

Screen examples of you're application designs


mierlp

Recommended Posts

  • Replies 252
  • Created
  • Last Reply

Top Posters In This Topic

Hi Donlego,

In this form I have a containerpanel, inside of it I put a Tunihtmlframe  named backhtml  with property  Align=Client.

Also inside the containerpanel I have a panel with the elements for the login, this panel is Alignment=taCenter and AlignmentControl=uniAlgunmentClient.

 

In my sermodule in CustomCSS I have this style

 .mainbackground
{
 background-image:url('files/images/mybackgound.jpg');
 background-repeat:no-repeat;
 width:100%;
 height:100%;
}

then in uniformcreate Event I have this code

 backhtml.HTML.Add('<div class="mainbackground"></div>');

 

and thats it

 

 

 

Link to comment
Share on other sites

3 hours ago, donlego said:

hi  zemorango

i see your login form , how to make login form position still center and your background image can be responsive when resize the browser ?



 

1.png

2.png

Hi Donlego,

In this form I have a containerpanel, inside of it I put a Tunihtmlframe  named backhtml  with property  Align=Client.

Also inside the containerpanel I have a panel with the elements for the login, this panel is Alignment=taCenter and AlignmentControl=uniAlgunmentClient.

 

In my sermodule in CustomCSS I have this style

 .mainbackground
{
 background-image:url('files/images/mybackgound.jpg');
 background-repeat:no-repeat;
 width:100%;
 height:100%;
}

then in uniformcreate Event I have this code 

 backhtml.HTML.Add('<div class="mainbackground"></div>');

 

and thats it

Link to comment
Share on other sites

Working On a Mobile Platform Kiosk Concept (click/tap on Hot Zones and respond with both graphic and text information about the zone).

UniGUI Mobile has no Mobile Canvas Object so I am trying to improvise using the Mobile Image Canvas. Problem is the Mobile Image Object does not have Click/Tap X/Y implementation (browser/frame click/tap X/Y does not reference the Image Canvas) as well as other deficiencies. I tried using HTML Frame but that posed even bigger problems. 

Farshad is looking into this, I hope he does not take too long.

Andy
Melbourne
Australia

Male.png

Female.png

Link to comment
Share on other sites

  • 4 weeks later...
  • 1 month later...
On 4/28/2017 at 5:20 PM, DFong said:

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.

Hi.

Please, can you share that custon css to override some colors of neptune theme?

Thanks.

 

Link to comment
Share on other sites

On 3/21/2019 at 4:45 PM, jahlxx said:

Hi.

Please, can you share that custon css to override some colors of neptune theme?

Thanks.

 

This app was created quite awhile ago with v0.99 Build 1296 and has not been updated since.  I'm not sure if the CSS modifications I made will work with the latest versions of UniGUI using later versions of ExtJS, but here's what I used for UniServerModule.CustomCSS:

 

<style type="text/css">
  html { height: 100% }
  body { height: 100%; margin: 0; padding: 0 }
  #uni_map_canvas { height: 100% }
   
.statuswrapper {
  height: 60px;
  width: 60px;
  text-align: center;
  vertical-align: middle;
  padding-top: 9px;
  /*
  line-height: 96px;  
  cursor: pointer;
  */
  background:transparent url(images/avo_blank_green.png) no-repeat center center;
}

.taskupdatewrapper {
  cursor: pointer;
  /*
  background:transparent url(images/task_update_button.png) no-repeat center center;
  */
}  

.taskupdatewrapper:hover {
  opacity: 0.5;
}
 
.boxed {
  border: 1px solid lightgray ;
  padding: 4px;
  box-shadow: 2px 2px 1px #cccccc;
  /*
  height: 100px;
  overflow-y: scroll;
  */
}  
 
div.smoothicon {
  image-rendering: -moz-crisp-edges;
  image-rendering: -o-crisp-edges;
  image-rendering: -webkit-optimize-contrast;
  -ms-interpolation-mode: nearest-neighbor;
}  

.css_sized_container .x-toggle-slide-container {
            width: 250px;
        }        
       
.custom-color label.x-toggle-slide-label-on {
         /*
            background: #83B264;
         background: #E54343;
         */
         background: #8dc63f;
            color: #F9FBF7;
            text-shadow: 0px 0px 2px #346817;
}


/*
.custom-color label.x-toggle-slide-label-off {
         
         color: #F9FBF7;
         
            text-shadow: 1px 0px 1px #DD9A78;
            text-shadow: 1px 1px -1px #D7875F;
         
            text-align: right;
}      
*/
 
.x-toggle-slide-container, .x-toggle-slide-container label {
    user-select: none;
    -moz-user-select: none;
    -khtml-user-select: none;
}

.x-toggle-slide-disabled {
    filter: alpha(opacity=50);
    -moz-opacity: 0.5;
    -khtml-opacity: 0.5;
    opacity: 0.5;
}

.x-toggle-slide-container {
    position: relative;
    overflow: hidden;
    white-space: nowrap;
    height: 23px;
    cursor: pointer;
    overflow: hidden;
}

.x-toggle-slide-container div.holder {

    height: 23px;
    overflow: hidden;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    -o-border-radius: 4px;
    -ms-border-radius: 4px;
    -khtml-border-radius: 4px;
    border-radius: 4px;

}

.x-toggle-slide-container label {
    white-space: nowrap;
    font-size: 15px;
    line-height: 15px;
    font-weight: bold;
    font-family: "Helvetica Neue", Arial, Helvetica, sans-serif;
    text-transform: uppercase;
    cursor: pointer;
    display: inline-block;
    clear: both;
    -moz-box-shadow: inset -2px 2px 10px -5px black;
    -webkit-box-shadow: inset -2px 2px 10px -5px black;
    box-shadow: inset -2px 2px 10px -5px black;
    height: 23px;
    width: auto;
    padding-top: 3px;
    overflow: hidden;
}

label.x-toggle-slide-label-on {
    background: #5EA2DA;
     color: #F7FAFD;
 
    text-shadow: 0px 0px 2px #364A5D;
}

label.x-toggle-slide-label-on span {
    padding-left: 8px;
}

label.x-toggle-slide-label-off {
    background: #D5D6D6;
     color: #929496;
      text-shadow: 1px 0px 1px #fff;
    text-align: right;
}

label.x-toggle-slide-label-off span {
    padding-right: 8px;
}

.x-toggle-slide-thumb {

    display: block;
    height: 23px;
    cursor: pointer;
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    background: rgb(255,255,255); /* Old browsers */
    background: -moz-linear-gradient(top,  rgba(255,255,255,1) 0%, rgba(229,229,229,1) 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,1)), color-stop(100%,rgba(229,229,229,1))); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  rgba(255,255,255,1) 0%,rgba(229,229,229,1) 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  rgba(255,255,255,1) 0%,rgba(229,229,229,1) 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  rgba(255,255,255,1) 0%,rgba(229,229,229,1) 100%); /* IE10+ */
    background: linear-gradient(top,  rgba(255,255,255,1) 0%,rgba(229,229,229,1) 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#e5e5e5',GradientType=0 ); /* IE6-9 */

    border: 1px solid #999999;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    -o-border-radius: 4px;
    -ms-border-radius: 4px;
    -khtml-border-radius: 4px;
    border-radius: 4px;
    padding-left: 3px;
}

.x-item-disabled .x-toggle-slide-label-on span {
    color: white !important;
}

.x-item-disabled .x-toggle-slide-label-off span {
    color: gray !important;
}

.x-toolbar .x-toggle-slide-container label {
    font-size: 12px !important;
    
    height: 17px;
    padding-top: 1px;
}

.x-toolbar .x-toggle-slide-container {
    height: 17px;
}

.x-toolbar .x-toggle-slide-container div.holder {

    height: 17px;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    -o-border-radius: 4px;
    -ms-border-radius: 4px;
    -khtml-border-radius: 4px;
    border-radius: 4px;
}

.x-toolbar label.x-toggle-slide-label-on {

}

.x-toolbar label.x-toggle-slide-label-on span {
    padding-left: 6px;
}

.x-toolbar label.x-toggle-slide-label-off {

}

.x-toolbar label.x-toggle-slide-label-off span {
    padding-right: 6px;
}

.x-toolbar .x-toggle-slide-thumb {
    height: 17px;
}

.x-toolbar-right .x-toggle-slide-label-on {
    text-align: left;
}

.x-field .x-toggle-slide-container label {
    font-size: 12px !important;
    
    height: 18px;
    padding-top: 1px;
}

.x-field .x-toggle-slide-container {
    height: 18px;
}

.x-field .x-toggle-slide-container div.holder {

    height: 18px;
}

.x-field label.x-toggle-slide-label-on {

}

.x-field label.x-toggle-slide-label-on span {
    padding-left: 6px;
}

.x-field label.x-toggle-slide-label-off {

}

.x-field label.x-toggle-slide-label-off span {
    padding-right: 6px;
}

.x-field .x-toggle-slide-thumb {
    height: 18px;
}

.x-toolbar-right .x-toggle-slide-label-on {
    text-align: left;
}


 
 
.x-graphdatalabel {
  color: #aaaaaa;  
  line-height: 14px;
  font-size: 11px;
  font-weight: normal;
}  
 
.x-graylabel {  
  color: #aaa;  
}

.myLargeFont {
  font-weight: bold;
  font-size: 40px;  
  font-family: roboto, helvetica, arial, verdana, sans-serif;
}  
 
.x-column-header-sort-ASC .x-column-header-text {
    background-image: url(images/sort_asc.png)
}
.x-column-header-sort-DESC .x-column-header-text {
    background-image: url(images/sort_desc.png)
}  
 
.x-toolbar-footer {
    /* background: #dfeaf2; */
    background: #f4faec;
    border: 0;
    margin: 0;
    padding: 6px 0 6px 6px
}  
 
.x-menu-item-icon {
    width: 20px;
    height: 20px;
    top: 3px;
    left: 3px;
    background-position: center center
}  
 
/* align checkbox text */  
.x-form-cb-label {
    margin-top: 4px;
    font: normal 13px/17px helvetica, arial, verdana, sans-serif
}   


/* fix clipping of right-most panel header icon */  
.x-panel-header-default-horizontal .x-tool-after-title {
    margin: 0 1px 0 6px
}  
.x-panel-header-default-vertical .x-tool-after-title {
    margin: 6px 0 1px 2px
}
.x-panel-header-default-vertical .x-tool-before-title {
    margin: 0 2px 6px 0
}
.x-window-header-default-horizontal .x-tool-after-title {
    margin: 0 1px 0 6px
}


/* DBGrid colors */
 
.x-grid-row .x-grid-cell-selected {
  background-color: #c7e3a0 !important;
}  

.x-column-header-over,
.x-column-header-sort-ASC,
.x-column-header-sort-DESC {
    background-image: none;
    background-color: #f4faec
}    
 
.x-grid-row-selected .x-grid-td {
    background-color: #C7E3A0
}

.x-grid-row-over .x-grid-td {
    background-color: #F4FAEC
}
 
 
/****** window ************************/
.x-window-default {
    /* border-color: #8dc63f; */
    /* border-color: #5e5e5e; */
    border-color: #888888;
    -webkit-border-radius: 0px;
    -moz-border-radius: 0px;
    -ms-border-radius: 0px;
    -o-border-radius: 0px;
    border-radius: 0px
}
.x-window-default {
    -webkit-border-radius: 0px;
    -moz-border-radius: 0px;
    -ms-border-radius: 0px;
    -o-border-radius: 0px;
    border-radius: 0px;
    padding: 0;
    border-width: 5px;
    border-style: solid;
    background-color: white
}  

.x-window-body-default {
    /* border-color: #8dc63f; */
    /* border-color: #5e5e5e; */
    /* border-color: #ffffff; */
    border-color: #888888;
    border-width: 1px;
    border-style: solid;
    background: white;
    color: black;
    font-size: 13px;
    font-weight: normal;
    font-family: roboto, helvetica, arial, verdana, sans-serif
}

.x-window-header-default {
    font-size: 13px;
    border-color: #5e5e5e;
    zoom: 1;
    /* background-color: #8dc63f */
    background-color: #5e5e5e
}


.x-window-header-default .x-tool-img {
    /* background-color: #8dc63f */
    background-color: #5e5e5e
}
 
 
/****** calendar event colors *********/
.ext-color-4,
.ext-ie .ext-color-4-ad,
.ext-opera .ext-color-4-ad {
    color: #aa00aa;
}
.ext-cal-day-col .ext-color-4,
.ext-dd-drag-proxy .ext-color-4,
.ext-color-4-ad,
.ext-color-4-ad .ext-cal-evm,
.ext-color-4 .ext-cal-picker-icon,
.ext-color-4-x dl,
.ext-color-4-x .ext-cal-evb {
    background: #aa00aa;
}
.ext-color-4-x .ext-cal-evb,
.ext-color-4-x dl {
    border-color: #007700;
}

 
/* Panel colors */  
.x-panel-body-default {  
  border-color: #e2e2e2;
  background-color: #ffffff;
}
 
.x-panel-header-default {
  background-color: #f5f5f5;
  text-align: center;   
  border-color: #e2e2e2;
}

.x-panel-header-text-container-default {
    color: #8dc63f;
    font-size: 18px;
    font-weight: bold;
    font-family: roboto, arial, helvetica, verdana, sans-serif;
    line-height: 20px;
    padding: 0px 0 0;
    text-transform: none
}


/*panel header icon background */
.x-panel-header-default .x-tool-img {
    background-color: #f5f5f5
}

.x-tool .x-tool-img {
    filter: alpha(opacity=100);
    opacity: 1.0
}
.x-tool-over .x-tool-img {
    filter: alpha(opacity=70);
    opacity: .7
}
.x-tool-pressed .x-tool-img {
    filter: alpha(opacity=50);
    opacity: .5
}

/* Main PageControl colors and formatting */
.myTabPanel .x-tab-default .x-tab-inner {
    color: #8dc63f;
    font-size: 16px;
    font-weight: 600;    
    font-family: helvetica, arial, verdana, sans-serif;    
    line-height: 18px;
}

.myTabPanel .x-tab-inner.x-tab-inner-center {    
    padding-left: 0px !important;   /* removes the text's padding */
    padding-top: 34px !important;   /* don't set this property if you want text on top of the icon */
    width: 94px;
}

.myTabPanel .x-tab-icon-el {
    left: 0px !important;
    width: 20px;    /* set this for your image's width */
    height: 20px;   /* set this for your image's height */
    margin-left: 0px; /* if your text is on top of the icon it's also interesting to add some spacing between them with margin-top: 5px; */
    
    position: absolute;
    top: 8;
    right: 0;
    bottom: auto;
    margin: auto;
}

.myTabPanel .x-tab-bar-strip {
    position: absolute;
    /*
    top: 57;
    */
    top: 63;
    line-height: 0;
    font-size: 0;
    z-index: 1
}

/* Main PageControl colors */
.myTabPanel .x-tab-default {
    background-color: #f2f2f2;      
}

.myTabPanel .x-tab-default {        
    margin: 0 3px 0 0;
    cursor: pointer
}

.myTabPanel .x-tab-default-active {
    background-color: #e2e2e2;
}

.myTabPanel .x-tab-bar-default {
    background-color: #f5f5f5
}

.myTabPanel .x-tab-bar-strip-default {
    border-style: solid;
    border-color: #e2e2e2;
    background-color: #e2e2e2;
}

.myTabPanel .x-tab-bar-strip-default {
    height: 1px
}

.myTabPanel .x-tab-bar-strip-default-top {
    border-width: 0;
    height: 1px
}

.myTabPanel .x-tab-bar-body-default-top {
    padding-bottom: 1px
}

.myTabPanel .x-tab-default-top {
    -moz-border-radius-topleft: 0px;
    -webkit-border-top-left-radius: 0px;
    border-top-left-radius: 0px;
    -moz-border-radius-topright: 0px;
    -webkit-border-top-right-radius: 0px;
    border-top-right-radius: 0px;
    -moz-border-radius-bottomright: 0;
    -webkit-border-bottom-right-radius: 0;
    border-bottom-right-radius: 0;
    -moz-border-radius-bottomleft: 0;
    -webkit-border-bottom-left-radius: 0;
    border-bottom-left-radius: 0;
    padding: 4px 12px 7px 12px;
    border-width: 0;
    border-style: solid;
}


/* text color for active tab */
.myTabPanel .x-tab-default-active .x-tab-inner {
    color: #666666;
    
    font-size: 16px;
    font-weight: 600;    
    font-family: helvetica, arial, verdana, sans-serif;    
    line-height: 18px;
}

.myTabPanel .x-tab-default-over {
    filter: alpha(opacity=50);
    opacity: .5
}

.myTabPanel .x-tab-default-pressed {
    filter: alpha(opacity=20);
    opacity: .2
}


/*******************************/

/* Embedded PageControl overrides of #myTabPanel */
.myTabPanel2 .x-tab-inner.x-tab-inner-center {    
    padding-left: 0px !important;   /* removes the text's padding */
    padding-top: 0px !important;    /* don't set this property if you want text on top of the icon */
    width: auto;
}

.myTabPanel2 .x-tab-icon-el {
    position: absolute;
    background-repeat: no-repeat;
    top: 0;
    left: 0;
    right: auto;
    bottom: 0
}
.myTabPanel2 .x-tab-bar-strip {
    position: absolute;
    top: 31;
    line-height: 0;
    font-size: 0;
    z-index: 1
}


/* Embedded PageControl colors and formatting */
.myTabPanel2 .x-tab-default {
    background-color: #f5f5f5;      
}

.myTabPanel2 .x-tab-default {        
    margin: 0 3px 0 0;
    cursor: pointer
}

.myTabPanel2 .x-tab-default .x-tab-inner {
    color: #8dc63f;
    font-size: 14px;
    font-weight: bold;    
    font-family: roboto, arial, helvetica, verdana, sans-serif;    
    line-height: 16px;
}

.myTabPanel2 .x-tab-default-active {
    background-color: #8dc63f
}

.myTabPanel2 .x-tab-bar-default {
    background-color: #f5f5f5
}

.myTabPanel2 .x-tab-bar-strip-default {
    border-style: solid;
    border-color: #add672;
    background-color: #8dc63f
}

.myTabPanel2 .x-tab-bar-strip-default {
    height: 5px
}

.myTabPanel2 .x-tab-bar-strip-default-top {
    border-width: 0;
    height: 5px
}

.myTabPanel2 .x-tab-bar-body-default-top {
    padding-bottom: 5px
}

.myTabPanel2 .x-tab-default-top {
    -moz-border-radius-topleft: 0px;
    -webkit-border-top-left-radius: 0px;
    border-top-left-radius: 0px;
    -moz-border-radius-topright: 0px;
    -webkit-border-top-right-radius: 0px;
    border-top-right-radius: 0px;
    -moz-border-radius-bottomright: 0;
    -webkit-border-bottom-right-radius: 0;
    border-bottom-right-radius: 0;
    -moz-border-radius-bottomleft: 0;
    -webkit-border-bottom-left-radius: 0;
    border-bottom-left-radius: 0;
    padding: 8px 12px 7px 12px;
    border-width: 0;
    border-style: solid;
    /*
    background-color: #f5f5f5
    */
}


/* text color for active tab */
.myTabPanel2 .x-tab-default-active .x-tab-inner {
    color: #ffffff;
    
    font-size: 14px;
    font-weight: bold;    
    font-family: roboto, arial, helvetica, verdana, sans-serif;    
    line-height: 16px;
    
}

.myTabPanel2 .x-tab-default-over {
    filter: alpha(opacity=70);
    opacity: .7
}

.myTabPanel2 .x-tab-default-pressed {
    filter: alpha(opacity=50);
    opacity: .5
}


/*button colors */
.x-btn-default-small {
    -webkit-border-radius: 0px;
    -moz-border-radius: 0px;
    -ms-border-radius: 0px;
    -o-border-radius: 0px;
    border-radius: 0px;
    padding: 3px 3px 3px 3px;
    border-width: 1px;
    border-style: solid;
    border-color: #0e0e0e;
    background-image: none;
    background-color: #5e5e5e;    
}

.x-btn-default-small-over {
    filter: alpha(opacity=70);
    opacity: .7
}

.x-btn-default-small-pressed {
    filter: alpha(opacity=50);
    opacity: .5
}

.x-btn-default-medium {
    -webkit-border-radius: 0px;
    -moz-border-radius: 0px;
    -ms-border-radius: 0px;
    -o-border-radius: 0px;
    border-radius: 0px;
    padding: 3px 3px 3px 3px;
    border-width: 1px;
    border-style: solid;
    border-color: #0e0e0e;
    background-image: none;
    background-color: #5e5e5e;    
}

.x-btn-default-medium-over {
    filter: alpha(opacity=70);
    opacity: .7
}

.x-btn-default-medium-pressed {
    filter: alpha(opacity=50);
    opacity: .5
}

.x-btn-default-large {
    -webkit-border-radius: 0px;
    -moz-border-radius: 0px;
    -ms-border-radius: 0px;
    -o-border-radius: 0px;
    border-radius: 0px;
    padding: 3px 3px 3px 3px;
    border-width: 1px;
    border-style: solid;
    border-color: #0e0e0e;
    background-image: none;
    background-color: #5e5e5e;    
}


.x-btn-default-large-over {
    filter: alpha(opacity=70);
    opacity: .7
}

.x-btn-default-large-pressed {
    filter: alpha(opacity=50);
    opacity: .5
}



/* ProgressBar color */
.x-progress-default .x-progress-bar {
 background-image: none;
 background-color: #C7E3A0;
 border-color:#000000;
}

/******* calendar panel ***********/
.x-datepicker-selected .x-datepicker-date {
    background-color: #C7E3A0;
    font-weight: bold
}

.x-datepicker-today {
    border-color: #666666;
    border-style: solid
}

.x-monthpicker-selected {
    background-color: #C7E3A0;
    border-style: solid;
    border-color: #666666
}

/* title color */
.x-datepicker-month .x-btn-inner {
    color: #8DC63F
}


.ext-cal-dayview .ext-cal-hd-days-tbl {
    table-layout: fixed;
    width: 100%;
    background-color: #C7E3A0;
    overflow: hidden;
    font-size: 11px;
    line-height: 14px;
    height: 100%;
}

.ext-cal-day-times {
    background-color: #F4FAEC;
    color: #666;
    padding: 1px 0 0 0;
    text-align: right;
    vertical-align: top;
}
</style>

 

  • Like 1
Link to comment
Share on other sites

On 2/17/2019 at 9:25 AM, mhmda said:

Bringing this up....

 

DSKTP.gif

Hi mhmda.

I'm also developing my desktop application similar to yours.


How did you create the desktop icons?
I created my own only with unigui objects calculating the position of each one.

Link to comment
Share on other sites

On 3/28/2019 at 1:12 PM, CoderU said:

Can you share modified theme for 1.70.14* version..

or anybody help wich file change neptune theme?

I'm still using version 1.0.0.1424, an old version. didn't have the time to upgrade because  upgrading will force me to readjust almost all of my forms design.

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...