DFong

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>

You may also need to configure your Default Document for your Default Web Site under IIS to point to your ISAPI dll if you want to launch your app using just "http://localhost"

When running as an ISAPI app under IIS, you don't need the ":8077" as IIS will use port 80 by default.

One last thing: In ImageHTMLFrame.ClientEvents.ExtEvent.afterupdatehtml, set to: function afterupdatehtml(sender, eOpts) { ajaxRequest(sender,'loaded',[]); } For ImageHTMLFrame.OnAjaxEvent: if EventName='loaded' then if not ImageFrameInitialized then begin UpdateImageFram3e; ImageFrameInitialized := true; end; in your frame/form creation, set ImageFrameInitialized := false; Let me know if all of this works for you.

Unfortunately, I'm also not very good with Javascript, but here's a technique I've used in the past that worked for me for something similar: 1. Create a procedure that you can invoke as needed called "UpdateImageFrame", for example 2. Within that procedure, clear out the frame's HTML using "ImageHTMLFrame.HTML.Clear;" 3. Create a random name for your div id and update your HTML with the new id. I've used something like: ContainerName := 'MyImage'+ImageHTMLFrame.JSControl.Id+FormatDateTime('YYYYMMDDHHNNSSZZZ', Now); For example: ReferenceHTML := ... canvas: document.getElementById('<#ContainerName>'), ... ImageHTMLFrame.HTML.Text := StringReplace(ReferenceHTML,'<#ContainerName>',ContainerName,[]); Similarly, have a string constant that contains the script source for image-canvas-touch-js followed by var gesturableImg = new ImgTouchCanvas({ canvas: document.getElementById('<#ContainerName>'), path: "files/images/picfirst0.jpg", desktop: true }); and update the ContainerName to match the new div id: UpdatedScript := StringReplace(ReferenceScript,'<#ContainerName>',ContainerName,[]); 4. Then set JScript := '$(setTimeout(function () { '+UpdatedScript+' }, 50)); ' 5. Then call 'UniSession.AddJS(JScript);' Unfortunately, I simply don't have the time today to actually code this to test, but like I said, this technique has worked for me before for something very similar. With this technique, you no longer put anything in your AfterScript property and simply call your UpdateImageFrame procedure as needed. Hope this helps and good luck!

Actually, it was me, not Farshad. I didn't spend much time on this and I don't know much about Javascript, but here's how I got it to work for me just now: Take the source of img-canvas-touch.js and paste it into the AfterScript property of your unimHTMLFrame followed by: var gesturableImg = new ImgTouchCanvas({ canvas: document.getElementById('mycanvas'), path: "files/images/picfirst0.jpg", desktop: true }); Your HTML strings property of your unimHTMLFrame will only be: <html> <body> <h1>Example Title</h1> <hr> <div id="console">Console</div> <div id="mycontainer" style="width: 300px; height: 200px"> <!-- set desired position and size to that div --> <canvas id="mycanvas" style="width: 100%; height: 100%"></canvas> </div> </body> </html> For a test, I used the AllFeatures Touch demo and modified the Miscellaneous HTML Frame form. It worked for me when testing on my Android 7.0 mobile phone using the stock Chrome browser. Hopefully this will get you started. Good luck!

Check out http://www.rombdn.com/img-touch-canvas/ I haven't tested this yet, but theoretically, you should be able to use this in a UnimHTMLFrame

If a site is specifically coded to disallow embedding in an iframe, then it can not be shown inside a UniURLFrame.

I'm showing a variety of applications here, but primarily it's an application for real-time monitoring and control and management of large quantities of time-series data spread out over disparate locations. One of the frontend apps shown is specifically for greenhouse monitoring/control while some of the others are for industrial applications, e.g. SCADA and Energy Management. I'm also showing the administrative web application that allows a user to configure and manage their entire system online as well as create custom display or navigation screens (2D or 3D) for their facilities and attach live sensor values to their visual widgets via drag/drop which can change color, switch images etc. based on the real-time value of the sensor attached to it. The mobile app is just a limited version of the desktop web app. I truly don't think any of this would have been possible without UniGUI as it allowed me to port a set of very complex frontend VCL/OpenGL apps to a browser implementation fairly quickly while maintaining the use of all of my backend code. You have done magnificent work there and for that I thank you very much!!!

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.

I've played with using the free online version of PhoneGap Build to wrap up my UniGUI app. I've only tested on Android so far and it works very well to give the appearance of a native app, but I haven't actually deployed anything to the Play Store or Apple Store yet.

If this isn't possible in a TUnimDBListGrid, is it possible to display an image using TUnimDBGrid? Thanks!

Is there a way to display an image in a cell of a TUnimDBListGrid? Thanks!