Jump to content


uniGUI Subscriber
  • Posts

  • Joined

  • Last visited

  • Days Won


Ron last won the day on September 26 2022

Ron had the most liked content!

Profile Information

  • Gender
  • Location

Recent Profile Visitors

The recent visitors block is disabled and is not being shown to other users.

Ron's Achievements

Advanced Member

Advanced Member (4/4)



  1. Due to security reasons the user has to select the files first. Quoting from above source:
  2. Check out the HTML5 File API https://jenkov.com/tutorials/html5/file-api.html
  3. Use this in your servermodule/customcss: @font-face { font-family: 'Code128'; src: url('files/fonts/Code128.ttf') format('truetype'); font-weight: normal; font-style: normal; } Put the attached Code128.ttf file in the "fonts" folder which you create under "files", which is under the app dir. Install and use the newly added font version for your unilabel, notice that the font name is now without a space. I had to remove the space from the font name definition in the ttf file to make this work. Also added some other versions of the font if needed. Using them all it would be: @font-face { font-family: 'Code128'; src: url('files/fonts/Code128.ttf') format('truetype'), url('files/fonts/Code128.eot') format('embedded-opentype'), url('files/fonts/Code128.woff2') format('woff2'), url('files/fonts/Code128.svg') format('svg'); font-weight: normal; font-style: normal; } Code128.ttf Code128.woff2 Code128.eot Code128.svg
  4. When I set the DecimalSeparator property of UniNumberEdit to dot it works during runtime. Below is a screenshot with one having the dot and one having the comma, during runtime. At design time they both show as comma on my box, but this is maybe due to the locale settings?
  5. To make the stroke in red, use this JS: ctx.strokeStyle = "#FF0000"; Or from Delphi: uniSession.AddJS('ctx.strokeStyle = "#FF0000";');
  6. By adding these lines you can export the canvas data to the server: uses NetEncoding; procedure TMainForm.UniButton1Click(Sender: TObject); begin uniSession.AddJS('ajaxRequest(MainForm.form, [''export''], { data: canvas.toDataURL() } );'); end; procedure TMainForm.UniFormAjaxEvent(Sender: TComponent; EventName: string; Params: TUniStrings); var inStream, outStream:TStringStream; begin if sameText(eventName,'export') then begin inStream:=TStringStream.Create; outStream:=TStringStream.Create; inStream.writeString(params.Values['data']); inStream.position:=22; TNetEncoding.Base64.Decode(inStream, outStream); outStream.position:=0; uniImage1.Picture.LoadFromStream(outStream); uniImage1.Picture.SaveToFile('image.png'); inStream.Free; outStream.Free; end; end; Update: moved beginPath and closePath to mouseDown and mouseUp, for more fluid drawing. For clearing the canvas use: uniSession.AddJS('ctx.clearRect(0, 0, canvas.width, canvas.height);'); mousemove_ex.zip
  7. Attached is a sample application to give you an idea, for simple freehand drawing, based on this JS in an HTMLFrame: <canvas id="mycanvas" width="1200" height="500" style="border:1px solid #000000;"> <script type="text/javascript"> var canvas = $('#mycanvas')[0]; var ctx = canvas.getContext("2d"); var mDown = false; var X, Y, oldX, oldY = 0; function relMouseCoords(event){ var totalOffsetX = 0; var totalOffsetY = 0; var canvasX = 0; var canvasY = 0; var currentElement = this; do{ totalOffsetX += currentElement.offsetLeft - currentElement.scrollLeft; totalOffsetY += currentElement.offsetTop - currentElement.scrollTop; } while(currentElement = currentElement.offsetParent); canvasX = event.pageX - totalOffsetX; canvasY = event.pageY - totalOffsetY; return {x:canvasX, y:canvasY} } HTMLCanvasElement.prototype.relMouseCoords = relMouseCoords; $("#mycanvas").mousemove(function(event){ event.stopPropagation(); if(mDown){ coords = canvas.relMouseCoords(event); X = coords.x; Y = coords.y; ctx.moveTo(oldX, oldY); ctx.lineTo(X, Y); ctx.stroke(); oldX = X; oldY = Y; } }); $("#mycanvas").mousedown(function(event){ event.stopPropagation(); if(mDown)return; mDown = true; coords = canvas.relMouseCoords(event); oldX = coords.x; oldY = coords.y; ctx.strokeStyle = 0; ctx.lineWidth =1; ctx.lineCap = 'square'; ctx.beginPath(); }); $("#mycanvas").mouseup(function(event){ mDown = false; ctx.closePath(); }); </script> mousemove.zip
  8. As long as you do not need mouse move data, you can solve it all in Unigui. Like creating objects and placing them, or creating a line between two points, as you then only need to catch mousedown/up events. But if you want to draw freehand lines, then you need mouse move data, which cannot be sent to the server as it is just too much, so it has to be solved in the client using JS. Mouse move data is the red line, and if you do not need to cross it, things will be easier.
  9. I noticed that someone suggested this change on the server side, i.e. replacing hyphen with underscore - not sure if that works: if Trim(Request.GetFieldByName('Access_Control_Request_Headers')) <> '' then begin JustWriteToLog('On WebModuleBeforeDispatch - Trim(Request.GetFieldByName(Access_Control_Request_Headers))'); Response.SetCustomHeader('Access_Control_Allow_Headers', Request.GetFieldByName('Access_Control_Request_Headers')); Handled := True; end;
  10. I always use Synchronize() when updating the GUI from a thread.
  11. Use JS date functions, i.e. to get hour number use from.getHours() https://www.w3schools.com/jsref/jsref_obj_date.asp
  12. I created a keyboard using buttons, and then you can make it the size you want.
  13. My customers use this function every day, and it is called CORS as mentioned above. It is used for triggering receipt printing and cash drawer ejection, and has been working for years. The local webserver will only respond if it is opened up for CORS, so make sure it is configured correctly. Then it should work. This issue is not something that we are trying to solve, because it is already working in production. What I mean is that we know that it works, it only takes the right configuration of the webserver.
  14. Sure, this should work, and you can check the returning data in the event handler before displaying it. procedure TMainForm.UniButton1Click(Sender: TObject); begin UniSession.AddJS('$.get("", function( data ){' + ' ajaxRequest(MainForm.form, ["test"], { response : data }); '+ ' }); '); end; procedure TMainForm.UniFormAjaxEvent(Sender: TComponent; EventName: string; Params: TUniStrings); begin if sameText(EventName, 'test') then uniEdit1.Text:=Params.Values['response']; end; test1.zip
  15. In my code, I see that I use as local client IP, and the jQuery http client. Three options where the first is a Delphi created Windows service. In all cases the returned data is routed to the server via ajaxRequest. case uniMainModule.comType of 2: UniSession.AddJS('$.get("'+uniMainModule.regPort+'?event='+inttostr(EventID)+'&op='+uniMainModule.initials+'", function( data ){' + ' ajaxRequest(TransForm.form, ["regEvent"], { response : data }); '+ ' }); '); 4: UniSession.AddJS('$.get("'+uniMainModule.regPort+'/regevent.php?event='+inttostr(EventID)+'&op='+uniMainModule.initials+'", function( data ){' + ' ajaxRequest(TransForm.form, ["regEvent"], { response : data }); '+ ' }); '); 5: UniSession.AddJS('$.get("'+uniMainModule.regPort+'/cgi-bin/regevent.cgi?event='+inttostr(EventID)+'&op='+uniMainModule.initials+'", function( data ){' + ' ajaxRequest(TransForm.form, ["regEvent"], { response : data }); '+ ' }); '); end; For the local server to respond I had to configure it accepting cross-reference calls to a specific folder where the apps called through the server are located: <VirtualHost *:80> DocumentRoot "c:\apache22\htdocs" Header set Access-Control-Allow-Origin "*" </VirtualHost>
  • Create New...