hph Posted January 16, 2019 Share Posted January 16, 2019 I'm interresting, do you have a example for this popup menu? Link to comment Share on other sites More sharing options...
donlego Posted January 17, 2019 Share Posted January 17, 2019 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 ? Link to comment Share on other sites More sharing options...
zemorango Posted January 17, 2019 Share Posted January 17, 2019 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 More sharing options...
zemorango Posted January 17, 2019 Share Posted January 17, 2019 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 ? 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 More sharing options...
zemorango Posted January 17, 2019 Share Posted January 17, 2019 On 1/15/2019 at 9:38 PM, mhmda said: Nice work Link to comment Share on other sites More sharing options...
mhmda Posted January 21, 2019 Share Posted January 21, 2019 Thank you Link to comment Share on other sites More sharing options...
donlego Posted January 24, 2019 Share Posted January 24, 2019 1 1 Link to comment Share on other sites More sharing options...
Sherzod Posted January 24, 2019 Share Posted January 24, 2019 Very nice! Link to comment Share on other sites More sharing options...
zemorango Posted January 24, 2019 Share Posted January 24, 2019 Good Job donlego Link to comment Share on other sites More sharing options...
donlego Posted January 24, 2019 Share Posted January 24, 2019 25 minutes ago, zemorango said: Good Job donlego Thanks zemorango, Try your code for my login page,but unfotunately the background wont maximize/full screen for the background image Link to comment Share on other sites More sharing options...
andyhill Posted January 24, 2019 Share Posted January 24, 2019 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 Link to comment Share on other sites More sharing options...
heromo80 Posted January 25, 2019 Share Posted January 25, 2019 Hi, 1 Link to comment Share on other sites More sharing options...
55143681 Posted January 25, 2019 Share Posted January 25, 2019 On 4/5/2017 at 7:07 PM, mhmda said: Here a few screenshots from several projects: good. 1 Link to comment Share on other sites More sharing options...
zemorango Posted January 25, 2019 Share Posted January 25, 2019 25 minutes ago, agmoro7622 said: Hi, Great Work 1 Link to comment Share on other sites More sharing options...
mhmda Posted February 17, 2019 Share Posted February 17, 2019 Bringing this up.... 1 1 Link to comment Share on other sites More sharing options...
mhmda Posted February 17, 2019 Share Posted February 17, 2019 Custom header for reports using HTML and converting it to image. it's flexible and powerful. 1 4 Link to comment Share on other sites More sharing options...
Abaksoft Posted February 18, 2019 Share Posted February 18, 2019 Good to hear you Mohamed :) Great ! Is this your own development or an known Html tool ? Link to comment Share on other sites More sharing options...
mhmda Posted February 18, 2019 Share Posted February 18, 2019 My OWN :-) 1 Link to comment Share on other sites More sharing options...
55143681 Posted March 20, 2019 Share Posted March 20, 2019 On 2/17/2019 at 9:22 PM, mhmda said: Custom header for reports using HTML and converting it to image. it's flexible and powerful. very good so great job i want to do some controls for a workflow,how to do that? Link to comment Share on other sites More sharing options...
jahlxx Posted March 21, 2019 Share Posted March 21, 2019 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 More sharing options...
DFong Posted March 23, 2019 Share Posted March 23, 2019 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> 1 Link to comment Share on other sites More sharing options...
jahlxx Posted March 25, 2019 Share Posted March 25, 2019 Ok. Thanks friend. Works. Link to comment Share on other sites More sharing options...
shawdown Posted March 30, 2019 Share Posted March 30, 2019 On 2/17/2019 at 9:25 AM, mhmda said: Bringing this up.... 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 More sharing options...
mhmda Posted March 30, 2019 Share Posted March 30, 2019 I use Frames with .svg icons, most of the work done in client side, and applying DDproxy for drag drop functionality. Link to comment Share on other sites More sharing options...
zemorango Posted April 5, 2019 Share Posted April 5, 2019 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 More sharing options...
Recommended Posts
Please sign in to comment
You will be able to leave a comment after signing in
Sign In Now