DFong

I haven't tried using this library, but it appears to do what you want for JPEG images: https://delphihaven.wordpress.com/ccr-exif/ Good luck and let us know if this works.

I've used the following on mobile in response to a Button click on a simple dialog form named InputBox which has a TunimEdit control named InputEdit. You should be able to figure it out from the code snippets below: procedure TInputBox.GeoButtonClick(Sender: TObject); var GetLatLong : string; begin UniSession.AddJS('InputBox.OKButton.showMask("Locating...");'); GetLatLong := 'if (navigator.geolocation) {'+ ' navigator.geolocation.getCurrentPosition(showPosition); '+ ' } else { '+ ' alert("Geolocation is not supported by this browser."); '+ ' InputBox.OKButton.hideMask(); '+ ' } '+ ' function showPosition(position) { '; if (pos(' LATITUDE ',Uppercase(Caption))>0) then GetLatLong := GetLatLong + ' ajaxRequest(InputBox.InputEdit,"Latitude",["Latitude="+position.coords.latitude+""]); }' else GetLatLong := GetLatLong + ' ajaxRequest(InputBox.InputEdit,"Longitude",["Longitude="+position.coords.longitude+""]); }'; UniSession.AddJS(GetLatLong); end; procedure TInputBox.InputEditAjaxEvent(Sender: TComponent; EventName: string; Params: TUniStrings); var Key : word; Latitude,Longitude : string; begin if (EventName='keypress') then begin Key := StrToInt(Params.Values['key']); if ord(Key)=13 then //Enter-key pressed begin FCallBack(trim(InputEdit.Text)); Close; end; end else if EventName='Latitude' then begin Latitude := Params.Values['Latitude']; //ShowMessage('Latitude: '+Latitude); InputEdit.Text := Latitude; UniSession.AddJS('InputBox.OKButton.hideMask();'); end else if EventName='Longitude' then begin Longitude := Params.Values['Longitude']; //ShowMessage('Latitude: '+Latitude); InputEdit.Text := Longitude; UniSession.AddJS('InputBox.OKButton.hideMask();'); end end;

Got this link from: https://wiki.openssl.org/index.php/Binaries

https://indy.fulgan.com/SSL/

Yeah, it's been awhile but I somehow recall having the same behavior when I first tried it months ago as I also needed to create a password twice. At the time, I thought it may have had something to do with the app password being machine specific, but I was never able to reproduce it as I'm successfully using the latest app password from 2 different machines. Glad to hear it's working for you!

I found that using an app password on your Gmail account will get around this problem: https://support.google.com/mail/answer/185833?hl=en-GB

Try this: https://phantomjs.org/screen-capture.html

This is beyond my skillset as I'm no good with JavaScript and even worse with CSS, but here's another link that demonstrates how this could be done using another technique with keyframes/animation if you don't want to use the marquee tag or requestAnimationFrame: https://www.w3docs.com/snippets/css/how-to-have-the-marquee-effect-without-using-the-marquee-tag-with-css-javascript-and-jquery.html https://www.w3docs.com/tools/code-editor/2117 Good luck!

I've used requestAnimationFrame in a THTMLFrame to generate animations that are controlled from both the client side as well as from the server using JSCall in response to an Ajax event. There are plenty of examples on the web using requestAnimationFrame where the speed of the animation can be controlled. From the sounds of what you want to do, I still think this is the right direction to go. Not exactly what you want but this link may give you some ideas: https://medium.com/@roderickhsiao/implement-smooth-scrolling-79efb20b6535

I am by no means a Javascript expert, but I've used requestAnimationFrame for simple animations in the past which sounds like it may work to implement something like what you want.

<iframe src="https://www.youtube.com/embed/XZmGGAbHqa0?rel=0&hd=0&autoplay=0" frameborder="0" width="300"></iframe>

Maybe this will help:

I've only run WebGL with UniGUI by creating my own scenes via HTML and running them in a TUniHTML component. Within that HTML, you can insert Ajax events triggered by click actions etc. within the 3D scene to communicate with UniGUI on the server-side. Here's a basic example of rendering a 3D scene in HTML. Good luck! <head> <style> body { background: #333; overflow:hidden; } </style> <script src="files/three.min.js"></script> <script src="files/Detector.js"></script> <script src="files/OrbitControls.js"></script> <script> function drawCube() { if ( ! Detector.webgl ) Detector.addGetWebGLMessage(); var width = window.innerWidth; var height = window.innerHeight; // create a scene var scene = new THREE.Scene(); scene.fog = new THREE.FogExp2( 0xe5f3ff, 0.002 ); // renderer (canvas) var renderer = new THREE.WebGLRenderer({antialias: false}); renderer.setClearColor( scene.fog.color, 1 ); renderer.setSize( width, height ); body.appendChild( renderer.domElement ); // set a camera var viewAngle = 80; var aspect = width / height; var near = 1; var far = 1000; var camera = new THREE.PerspectiveCamera( viewAngle, aspect, near, far ); camera.position.z = 500; controls = new THREE.OrbitControls( camera ); controls.damping = 0.2; controls.addEventListener( 'change', function(){renderer.render( scene, camera );}); scene.add( camera ); // Grid var size = 500, step = 50; var geometry = new THREE.Geometry(); for ( var i = - size; i <= size; i += step ) { geometry.vertices.push( new THREE.Vector3( - size, -100, i ) ); geometry.vertices.push( new THREE.Vector3( size, -100, i ) ); geometry.vertices.push( new THREE.Vector3( i, -100, - size ) ); geometry.vertices.push( new THREE.Vector3( i, -100, size ) ); } var material = new THREE.LineBasicMaterial( { color: 0x000000, opacity: 0.2 } ); var line = new THREE.Line( geometry, material ); line.type = THREE.LinePieces; scene.add( line ); // set a directional light var directionalLight = new THREE.DirectionalLight( 0xffffff, 5 ); directionalLight.position.z = 3; scene.add( directionalLight ); // cube geometry (200 x 200 x 200); var geometry = new THREE.CubeGeometry(200, 200, 200); var material = new THREE.MeshPhongMaterial( { color: 0x660000 } ); var cubeMesh = new THREE.Mesh( geometry, material); cubeMesh.position.set(-200,0,0); scene.add( cubeMesh ); renderer.render( scene, camera ); } </script> </head> <body> <button type="button" onclick="drawCube()">Draw Cube</button> </body>

You can try using WebGL https://get.webgl.org/

I've been using these with the Chrome browser auto-starting in kiosk mode: https://www.amazon.com/Quantum-Windows-Baytrail-T-Quad-core-1-33GHz/dp/B00X4O6GRK/ref=sr_1_5?keywords=azulle+pc+stick&amp;qid=1575046706&amp;sr=8-5 These are a lot more expensive than a R-pi (~$130 USD), but being Windows 10, I can install/run my UniGui app directly on the device if necessary and just a lot easier for me to work with since it's Windows. There are cheaper versions of similar Windows devices out there but I've been using these very reliably for a few years. With the built-in HDMI connector, they can plug in directly to a TV/monitor without requiring any other mounting plate.

Can you generate a unique ID on the server and save it as a cookie on the client?

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