Jump to content

Ron

uniGUI Subscriber
  • Posts

    328
  • Joined

  • Last visited

  • Days Won

    25

Everything posted by Ron

  1. Here is an example of JS code which works in docpad, as signature.js: $(document).ready( function() { //canvas id="mycanvas"> //<script type="text/javascript"> var canvas = document.getElementById("mycanvas"); var ctx = canvas.getContext("2d"); var mDown = false; var myArray = []; var coords = []; function drawStuff() { //do your canvas drawing here... ctx.beginPath(); ctx.fillStyle = "#EEEEEE"; ctx.rect(0,0,canvas.width, canvas.height); ctx.fill(); ctx.beginPath(); ctx.strokeStyle = "#000000"; //black color ctx.lineWidth = 0.8; ctx.lineCap = 'square'; var i = 0; for(i=0;i<(myArray.length-1);i++){ ctx.moveTo(myArray[i].x, myArray[i].y); ctx.lineTo(myArray[i+1].x, myArray[i+1].y); } ctx.stroke(); ctx.closePath(); } 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){ //store mouse movements if(mDown){ coords = canvas.relMouseCoords(event); myArray.push({x: coords.x, y : coords.y}); drawStuff(); } }); $("#mycanvas").mousedown(function(event){ //skip right mouse up if(event.which===3) return; //start logging mDown = true; drawStuff(); }); $("#mycanvas").mouseup(function(event){ //skip right mouse up if(event.which===3) return; mDown = false; //turn screenmask on... //myMask.show(); //ajaxRequest(MainForm.myHTMLFrame, ['saveCanvasData'], { myArray... }); }); window.addEventListener('resize', updateCanvas, true); function updateCanvas() { //canvas.width = MainForm.myHTMLFrame.getWidth(); //canvas.height = MainForm.myHTMLFrame.getHeight(); drawStuff(); } updateCanvas(); //</script> }); In addition to this, you have this index.html: --- title: "Welcome!" layout: "default" isPage: true --- <canvas id="mycanvas" style="border:0px solid #990000;"> </canvas> And this eco layout file: <html> <head> <title><%= @document.title %> | My Website</title> <%- @getBlock("meta").toHTML() %> </head> <body> <%- @content %> <%- @getBlock("scripts").add(["/vendor/jquery.js","/scripts/signature.js",]).toHTML() %> </body> </html> Notice that jQuery is there too. Of course you have to modify this code, to split the paths you draw, so not all pixels are connected, and then create the upload code. If you want me to do it for you, we can maybe work out a deal, but this should not be too hard to finish.
  2. Hi Sandro; The basic idea is that as the mouse moves, it reports x and y coordinates, and you push these into an array. THen in drawStuff() you simply draw these pixels, by drawing lines between them, as you loop through the array, something like this: ctx.beginPath(); ctx.strokeStyle = "#000000"; //black color ctx.lineWidth = 0.8; ctx.lineCap = 'square'; for(i=0;i<myArray.length-1;i++){ ctx.moveTo(myArray.x, myArray.y); ctx.lineTo(myArray[i+1].x, myArray[i+1].y); } ctx.stroke(); ctx.closePath(); Basic Javscript is not difficult at all, and you will get used to the syntax in no time, and W3Schools have all the info you need. My impression is that Javascript is a very powerful language, I simply love it ! It is amazing what you can do, and with a knowledge of JS combined with Unigui, you can create almost anything.. Best to just dive into it ! And the communication between JS in the client and Unigui, is so simple and easy to set up, it is like a walk in the park compared to creating things piece by piece in PHP for instance, and also much easier than Node & various JS frameworks like backbone.JS, sails.JS etc, even though you have JS on both sides there. Tip: Use docpad, with LiveReload, when you make JS code. I do that, and when I click Ctrl-S, the browser is updated in the background, and with the console you get easy debugging. This way it is so FAST to develop client code with JS, it is fun and you learn JS fast too, because of this close feedback loop. Anyway, after the signature is ok, you just upload this to the server, meaning that array, and save it, and reconstruct the signature image based on that pixel data.
  3. //example JS code for capturing mouse events, load this into htmlfram //turn screenmask off by UniSession.AddJS('myMask.hide();'); after saving canvas data <canvas id="mycanvas"> <script type="text/javascript"> var canvas = document.getElementById("mycanvas"); var ctx = canvas.getContext("2d"); var mDown = false; var myMask = new Ext.LoadMask(MainForm.myHTMLFrame, {msg:"Saving data ..."}); function drawStuff() { //do your canvas drawing here... ctx.moveTo(...) } 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){ //store mouse movements if(mDown){ coords = canvas.relMouseCoords(event); push(myArray, {x: coords.x, y: coords.y}); drawStuff(); } }); $("#mycanvas").mousedown(function(event){ //skip right mouse up if(event.which===3) return; //start logging mDown = true; }); $("#mycanvas").mouseup(function(event){ //skip right mouse up if(event.which===3) return; //turn screenmask on... myMask.show(); ajaxRequest(MainForm.myHTMLFrame, ['saveCanvasData'], { myArray... }); }); window.addEventListener('resize', updateCanvas, true); function updateCanvas() { canvas.width = MainForm.myHTMLFrame.getWidth(); canvas.height = MainForm.myHTMLFrame.getHeight(); drawStuff(); } updateCanvas(); </script>
  4. I assume you can use the canvas, just get the right screen size set up, log the mouse movements when mouse is down, draw the pixels on the canvas, and upload the canvas data by ajax to the server afterwards....process it and save as image, and load it back to the client again as confirmation. Write the client part in javascript, use a htmlframe with a <canvas id="mycanvas"> and write the mouse handlers in JS too, and then use an ajaxcall to the htmlframe, picking up that in ajaxevent, when uploading the canvas data. Load the JS into the htmlframe on formshow e.g. This works very well, and is the only good solution when needing to capture mouse movements, as far as I know.
  5. This was very well done! Nice combination of elements and technologies it seems. Congratulations I too would be interested in looking into how this was done....or see the basic principles. I am beginning to think that you can build anything with this Unigui tool....just amazing. The clue is to learn how to extend it with css, js and html5 etc, in the smartest way, to get a minimum level of code organizing.
  6. Solved - I had to have the AddJS statement in the OnCreate event of the main form, then the event listener got registered. Now it will be interesting to see if mouse events can be added, and if I can also add websocket support in the client and connect this to a NodeJS server....
  7. Hello! I add some code using UniSession.AddJS, and this code contains: 1.insertion of a canvas element, and getting context: var canv = document.createElement("canvas"); canv.id = "daycal"; document.body.appendChild(canv); var canvas = document.getElementById("daycal"); var ctx = canvas.getContext("2d"); 2. THen some drawing on that canvas 3. Then an event listener on canvas resize, to trigger the drawing function: window.addEventListener('resize', resizeCanvas, true); function resizeCanvas() { canvas.width = window.innerWidth-2; canvas.height = window.innerHeight-40; drawDayCalendar(); drawAppopintments(); } 4. Then at last I trigger the resizefunction at the JS load resizeCanvas(); Now, when I load the application, I get a short glimpse of the calendar graphics, but then the canvas gets cleared. Why does this happen? The drawing routine works, because I can see the graphics. So the event listener does not work, as the canvas is not redrawn - wonder why? I am doing things this way because I need mouse movements for drag/drop and appointment resize, so I have 600 lines of javascript loading here, including event code. Btw I had to drop the mouse events while testing because I do not have jQuery, but I guess I could load that too (?), or use some other method to capture those events if possible. Anyway, there is something not working here. Is it a problem that I create the canvas html element in javascript? Does Unigui mess with the event listening setup? Any advise is most welcome! Kaj
  8. My online ordering application has been running on exactly such a setup, for over two years, without a single change in fact - accepting something in the amount of 20-30 orders a week I think, or maybe even more nowadays. And that is even on a very slow line...slow upload speed, takes maybe 20 seconds to load, at least. But still people use it, and it works. No code change for over two years. So Unigui has been very stable, and been able to run on exceptionally few resources....quite impressive I think.
  9. This all seem very good, in my opinion. As I paid $329 for ExtJS, I hope for a $300 discount to get the license for $199. That will be a good introductory offer. Now, Farshad, if I can reflect a little on this, I think that if Unigui had the option of generating php, perl or python for the backend, and export the html, css and js for the frontend, that would be the greatest webapp devkit ever.... As we have a world history with so much division due to different languages, is it not ironic that in the web world, they were not able to use the same language on both frontend and backend. html, php, js, css and sql....a perfect reflection of a world where people perceive things quite differently.There are those who gather and those who scatter.... Unigui is trying to act as a bridge in this respect, but the binary makes it appear a bit closed. An option to generate only script/markup files would be amazing, but of course also very complex. At least it would be nice to get the frontend, and be able to create the backend yourself, getting just some helper files.
  10. Hello, I have no idea how to make this password recovery function, that is how to capture it in unigui. Of course I make a cryptic link which the user has to click, in the email, but how to respond to this from unigui? Any ideas, anyone?
  11. When trying to install the custompacks, also "never-build package rtl must be recompiled". Anyone got any ideas?
  12. Good question - and I'd like to know how to slide an image into a TUniImage, or within a TUniCanvas, so it is possible to make a slideshow...without any flickering. Guess we are dependent on ExtJS functionality for these things, one option is finding an ExtJS plugin...
  13. Ron

    shopping cart

    Easiest solution would probably be to use the paypal IPN system, or maybe you should go for Bitcoin?
  14. I found out about this issue. It seems like OnScreenResize is triggered before the actual change in size of the form, at least in mfPage mode, but the new form width and height given by the event parameters are correct - so I just store them and use them instead of checking clientwidth or formwidth at the point of updating the form or the canvas. It could be nice to have an event that gets triggered after the size changes are made, so all values are correct on the time of updating the screen. No other event gets fired in mfPage mode. As it is now you cannot rely on clientwidth or form.width as the event is triggered, as those are updated a second later. /Kaj
  15. Hello, When I use mfPage, I notice that the main form does not report correct height and width data upon browser resizing. This apparently also affects the unicanvas.bitmapcanvas.cliprect values. Any others having this issue? Any way to get the right values for now? When using the mfWindow mode the values are pretty close, but not always. But I have to use mfPage mode as I want to display some floating forms, without them getting closed when mainform has focus - as far as I know I then have to use mfPage - or?? Thanks, /Kaj
  16. But let's say I preiously declared some datastructures in javascript, isnt there a way to push data from the server to those structures? Isnt there some ext "clientside datastore" component where I can push a bunch of data, that I can later access in client side javascript?
  17. If I should reply to my own question, I'd say that you cannot access anything on client side other than whats already loaded in the browser, so if you want access to a table, you have to load that previously in a grid and just make it invisible, because from client side you can only access the ext components and their loaded data. Am I right?
  18. Hello; It is so great to be able to do some client-side scripting, especially on mousemove, without generating any server communication. But how do I access server variables? Tried accessing property fields on forms, but that did not work. About Unigui, this is such a great idea - the more I use it, the more I realize how incredibly smart a solution this is. I have searched for 6 years for a webapp RAD solution, and nothing was good enough, until this. Just beautiful. Anyways, I need access to server-side data...! Please help someone... And I cannot trigger a call for server-side data each time I move the mouse - preferrably I would move some server-side data to the client by some previous procedure, so it would be accessible when mousemove hits. Kaj
×
×
  • Create New...