Jump to content

lynkfs

Moderators
  • Content Count

    729
  • Joined

  • Last visited

  • Days Won

    141

lynkfs last won the day on October 21

lynkfs had the most liked content!

About lynkfs

  • Rank

Profile Information

  • Gender
    Male
  • Location
    Australia

Recent Profile Visitors

3,216 profile views
  1. lynkfs

    font choice

    Styling on the web is really messy, and takes a lot of effort to get it right. In the typography area, I came across this site. It uses machine learning to identify font-families which work well together. It uses Google fonts as its domain, and outputs a header, sub-header and text font (similar to h1, h2 and p) I really like its recommendations (usually using the 'similar' setting)
  2. @jarto unearthed an interesting problem to do with promises Basically the <promise>.then function has as parameters 2 call back functions. The first one will be executed on success, the second if there is an error. mypromise.then(procedure begin ...success... end, procedure begin ...error... end) This works fine. However defining these callbacks as regular external procedures and substituting these in the promise function call goes awfully wrong : procedure SuccessProc; begin writeln('success'); end; mypromise.then(SuccessProc, ErrorProc); This construct triggers BOTH of the async callbacks Obviously not good. This is either a subtle compiler problem or an elusive scope issue A middle ground approach though works again as expected : SuccessProc := function(value:variant) : variant begin writeln('success'); end; ErrorProc := function(value:variant) : variant begin writeln('error'); end; mypromise.then(procedure(Value: Variant) begin SuccessProc(Value) end, procedure(err: Variant) begin ErrorProc(err) end); (here using the rtl-api-ecma-Ecma.promise unit)
  3. Works from server only, the one specified in the credentials page var document external 'document': variant; var console external 'console': variant; var gapi external 'gapi': variant; implementation { TForm1 } procedure TForm1.InitializeForm; begin inherited; // this is a good place to initialize components var Script := document.createElement('script'); Script.src := 'https://apis.google.com/js/api.js'; Script.setAttribute('async',''); Script.setAttribute('defer',''); document.head.appendChild(Script); Script.onload := procedure begin writeln('loaded'); // // Load the API client and auth2 library gapi.load('auth2', procedure begin var mypromise : variant; mypromise := gapi.auth2.init(class clientId = '..........s0m9qrp8u2m6dcivi8p09tu5se.apps.googleusercontent.com'; end); mypromise.then(procedure begin console.log(mypromise.isSignedIn.get()); end, procedure begin console.log('error'); end); end); end; end; logs 'loaded' and 'true' your other link does specify useful functions which can be added to the above
  4. lynkfs

    Update

    Glad you're back Could you elaborate on the upcoming 4.0 ?
  5. zoom is not supported in firefox (https://caniuse.com/#search=zoom) and opera The workaround is to use the "transform" css function W3Panel1.handle.style.transform := "scale(1.5)"; You can scale to different values for x and y as in "scale(2, 3)"
  6. Read this article , at least till the paragraph "and now for the fun part". Mindblowing. Then, after that, have a look at this
  7. I've just compiled some large regular projects and some based on my own rtl : no problems so maybe your projects have some special dependencies, or ... just to be sure, how I tested this : - navigated to the smsc directory - opened cmd window - smsc "G:\SMS3.9.1\Projects\animate5\animate5.sproj" tested with fully developed projects (Not sure, but don't think the ide itself uses smsc)
  8. The syntax is Usage: smsc [@optionFile] [options] project_name[.sproj|.pas] [options] -output-name=<fileName> Output file name -resource-path=<paths> Resource directories -unit-path=<paths> Unit directories -verbosity=none|normal|verbose Verbosity level -hints=disabled|normal|strict|pedantic Hints level -stage=compile|codegen|output Last compile stage -defines=<defines> Custom conditional defines -search-path=<paths> Search path -closures=yes|no Enable/disable closures -code-packing=yes|no Enable/disable code packing -check-assertions=yes|no Enable/disable assertion checks -check-condition=yes|no Enable/disable condition checking -check-instance=yes|no Enable/disable instance checking -check-loop=yes|no Enable/disable loop checking -check-range=yes|no Enable/disable range checking -compress-css=yes|no Enable/disable CSS compression -devirtualization=yes|no Enable/disable de-virtualization -emit-locations=yes|no Enable/disable source location -emit-cache-manifest=yes|no Enable/disable app-cache manifest -emit-chrome-manifest=yes|no Enable/disable chrome app manifest -emit-source-map=yes|no Enable/disable source map -inline=yes|no Enable/disable code inlining -obfuscation=yes|no Enable/disable obfuscation -optimization=yes|no Enable/disable compiler optimization -rtti=yes|no Enable/disable RTTI -smart-linking=yes|no Enable/disable smart linking -logo=yes|no Show/hide logo I must admit I have not used it much but out of the box this works for me smsc "C:\Users\....\MyProjects\window\window.sproj" -output-name="C:\Users\....\MyProjects\window\window.js" or even without the -output-name parameter it compiles and links into whatever is specified in the project file (like '\www\main.js')
  9. do something like this (max control) var Script := browserapi.document.createElement('script'); Script.src := 'https://.......your script url ........'; browserapi.document.head.appendChild(Script); Script.onload := procedure begin showmessage('loaded'); ... do your thing ... end; this can be part of a button click handler
  10. Your code should work, except for the script placement. The below code is pretty much the same as yours, just embedded in a button click handler (which you might have done too) var W3Button : TW3Button := TW3Button.Create(W3Panel); W3Button.SetBounds(580,-10+160*(cartitems.length+1),200,40); W3Button.Caption := 'Make Payment'; W3Button.OnClick := procedure(sender:TObject) begin var PayPal : TW3Panel := TW3Panel.Create(W3Panel); Paypal.SetBounds(140,100 + 160*(cartitems.length+1),400,800); //position below cart Paypal.StyleClass := 'DIV'; //removes all smart's style info Paypal.handle.id := 'paypal-button-container'; Paypal.NativeScrolling := true; var paypalamount : string := StrAfter(currencytotal,'A$'); asm paypal.Buttons({ createOrder: function(data, actions) { // This function sets up the details of the transaction, including the amount and line item details. return actions.order.create({ purchase_units: [{ amount: { value: @paypalamount } }] }); }, onApprove: function(data, actions) { // This function captures the funds from the transaction. return actions.order.capture().then(function(details) { // This function shows a transaction success message to your buyer. alert('Transaction completed by ' + details.payer.name.given_name); }); } }).render('#paypal-button-container'); //This function displays Smart Payment Buttons on your web page. end; as for the script, put it in the body of your custom template <body> <script src="https://www.paypal.com/sdk/js?client-id=xxx&currency=AUD">
  11. lynkfs

    System.Types

    sounds like a duplication
  12. It becomes even more interesting when combining css variables and calc : since .... it has been possible to define css variables, which can be referenced in multiple ways they can even be set/get in pascal/js : get a handle to a stylesheet, or create one on the fly //stylesheet var style := browserapi.document.createElement("STYLE"); browserapi.document.head.appendChild(style); var styleSheet := style.sheet; set a css variable ("--variable-width") and insert into the stylesheet css variable names can be any string but have to start with -- //set initial css variable (width) var s1 := #' :root { --variable-width: 500px; }'; styleSheet.insertRule(s1, 0); retrieve and display css width variable browserapi.window.alert( browserapi.window.getComputedStyle(browserapi.document.documentElement) .getPropertyValue('--variable-width')); set css variable to some value browserapi.document.documentElement.style['--variable-width'] := Memo1.handle.getBoundingClientRect().width; use this variable in a 'calc'ulation Memo1.handle.style['height'] := 'calc(var(--variable-width) * 0.6)'; having a 'width' variable is just an example, maybe a bit contrived. Works fine though. Usually css variables are used for colors etc, and those values which need to be set globally for the whole application.
  13. lynkfs

    styling

    Off topic : there is an interesting effect when putting images on top of images. Take an image and give it a large width and height. Take the same image (same src) and place it on top of the first image, give it same height but say 25% of width and center it. Both images should have object-fit set to 'cover' and reduce opacity of the first one to about 65%. Depending on the image, about 1 in 5 give a passable interesting result doing this, 1 in 50 look amazing. Some examples here. (not optimised for size, so slow loading)
  14. Percentage based positioning has the advantage of having a 'responsive' page layout with little effort. Responsive in this respect means that page layouts will scale seamlessly on devices which may have slightly different pixel dimensions horizontally and/or vertically. So instead of having an editbox on absolute positioning 100,100,400,35 in pixel terms, it is sometimes easier to define all or some of these in percentages. Conveniently 10%-left is interpreted by the browser as starting on 10% of the viewport width, 10%-top starts at 10% of the viewport height etc. Mixing pixels and percentages works fine too MyEditBox.handle.style.left := '10%'; MyEditBox.handle.style.top := '12px'; //MyEditBox.left := 12; This is all still based on absolute positioning, which is the default in Smart. An alternative approach, with the same outcome, is to define dimensions at runtime based on a formula. MyEditBox.handle.style.left := 'calc(10vw - 20px)' resolves in a left positioning of 10% of the viewport-width minus 20 pixels : 28 pixels on a 480 pixels wide phone Note that the minus sign needs to be enclosed in spaces or this won't work This can be also used to scale f.i. font size depending on device capabilities : MyEditBox.handle.style['font-size'] := 'calc(16px + 1vw)' which has the effect of a font size which grows by 1 pixel for every 100 pixels of viewport width. It can get a bit funny on orientation change an all-percentage example page with some random text and images, based on these principles, looks like this , which scales nicely from mobile to desktop (resize browser window).
×
×
  • Create New...