Jump to content

Leaderboard

Popular Content

Showing content with the highest reputation since 05/17/2020 in all areas

  1. jarto

    Update

    Hi all, as you probably have noticed, I've been very quiet lately. When COVID-19 spread around the world, the restrictions hit my personal life pretty hard. In UAE, all the schools were closed very early and remained closed all the way to the end of the semester. There was also a strict lock down and lots of restrictions. Doing a lock down with three small children and having to home school them basically meant that my chances of spending many hours of time on development went to nil. Luckily it seems like the schools will open in 3 weeks, which should give me a possibility to concen
    5 points
  2. 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'
    3 points
  3. A new update is available: IDE: When a property is changed, the IDE adds the required unit into uses clauses. RTL: Bug fix to TRESTCall: Call OnRemove only if it is assigned.
    3 points
  4. 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
    3 points
  5. lynkfs

    styling

    Styling of visual elements. There are some 280 separate css properties which can be used to style each and every visual dom element. The following statement produces such a list var styles := browserapi.window.getComputedStyle(Panel.handle); (280 entries) If we disregard the properties which have a vendor prefix (-webkit, -moz etc) we still end up with some 230 properties for each visual element. And although many of these have default property values, the complexity is just too great to do styling on this level. Each and every css framework (including Smart) tries
    3 points
  6. 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)
    3 points
  7. A new update is available: IDE: Fix character set that was sent from the internal server RTL: Bug fix to handling resizes when anchor gaps are locked. Improvements to TW3ScrollBox Scrollbars -property can now be changed in Object Inspector The ScrollBox waits properly until it's subcontrols are ready ScrollBars and indicators did not work properly if ForceParent was true Fix bugs in resizing the scrollbox
    3 points
  8. A new update is available: IDE: Fix compilation without saving, when SMS is run from Program Files Change embedded browser to always use localhost This lets us use Chrome's Powerful Features through http RTL: Add RemoteUrl as a property for TNJWebSocketServer Bug fixes and improvements to TW3Slider Works now with mobile devices Set default max value to 100
    2 points
  9. lynkfs

    routing

    Routing is the link between specific url's and specific functionality in an app, so f.i. https://<server>/index.html starts up your app in the browser as per normal https://<server>/login executes a specific view (f.i a login form) Smart per default produces single page app's, without routing functionality There are a couple of strategies which can be followed to implement routing (and which will work to some extent) : use # formatted urls. Browsers have a 'hashchange' event built in, which fires every time a url changes,
    2 points
  10. Fixed now in the Alpha branch. Thank you @Tim Koscielski
    2 points
  11. TW3FacebookLogin is a non-visual component, which is available in the Designer's Cloud-tab. It lets you add Single-Sign-On to your web page using Facebook credentials. To use this, you need an AppID, which you can obtain by registering at https://developers.facebook.com When you register, you need to specify the App Domains where you're going to host your web app. So, if you plan to have it at https://myserver.example.com/mywebapp/index.html, then you need to register myserver.example.com as App Domain. Then add TW3FacebookLogin to your form and set the necessary properties
    2 points
  12. TW3GoogleLogin is a non-visual component, which is available in the Designer's Cloud-tab. It lets you add Single-Sign-On to your web page using Google credentials. To use this, you need a ClientID, which you can obtain by registering at Google: https://developers.google.com/identity/sign-in/web/sign-in When you register, you need to specify the URI where you're going to host your web app. This is also where you need to copy the html code that Smart Mobile Studio produces when you compile your app. So, if you plan to have it at https://myserver.example.com/mywebapp/index.html, then yo
    2 points
  13. A new update is available. This one contains two new controls: TW3GoogleLogin TW3FacebookLogin Both are non-visual components, but they are available in the Designer under the Cloud-tab. These two controls let you add Single-Sign-On via Google and Facebook to your web page. To use them, Add the control to the form Set the AppId- or ClientId-properties You need to register at Google or Facebook to get these ids You also need to copy the app to the registered URI that you specify during registration Set the OnLogin and OnLogo
    2 points
  14. lynkfs

    font choice

    Styling on the web is really messy, and takes a lot of effort to get it right. As a matter of personal interest, I'm collecting as many 'design rules' underpinning good styling as I can. Like : 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 points
  15. Yep, got it working nicely. I'm in the process of writing this into a non-visual component, which can be added to the component palette.
    2 points
  16. jarto

    Facebook or Google OAuth

    I thought I'd test this. When I try to compile, I get an error in FaceBook.SDK.pas: Syntax Error: Class "JFBUIParams" isn't defined completely [line: 15, column: 35, file: FaceBook.SDK] Edit: Got the SDK to compile by changing into this: JFBUIParams = class external end;
    2 points
  17. IElite

    Update

    I think the Pandemic has thrown a Monkey Wrench into everyone's lives. Family comes first!
    2 points
  18. lynkfs

    the future of coding

    Read this article , at least till the paragraph "and now for the fun part". Mindblowing. Then, after that, have a look at this
    2 points
  19. 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';
    2 points
  20. lynkfs

    styling

    Looking into this idea a bit further. So the ultimate styler program needs to do this : - read in a theme file - discover the visual components in the theme - and populate them for use - have a canvas where these components can be dropped on - and can be manipulated qua size and position - and have a preview for how it looks in real life Basically this is an exercise in elevating css to its maximum capabilites, without using js (pascal) or html at all in the styling process. A first draft of such a program : The demo theme file contains components for bu
    2 points
  21. Hi @COMFIED, I'm not sure if the following answers your question or not. Add System.JSON to your uses clause and run the following. Some follow up questions would be, is the object you are passing always a single key/value pair and is the name of the key known or not known? There are many ways to do this; some type safe, others not - just depends on your use case really. var aString : String; anObject : variant; begin aString := '{"v" : "this is sample text"}'; anObject := TJSON.parse(aString); Showmessage(anObject.v); end;
    1 point
  22. COMFIED

    Preventing Code Tampering

    I am building a financial transaction system on sms. Is there a way to detect/prevent code tampering? - so that in case the compiled HTML/ JS code is modified it will refused to run.
    1 point
  23. I've always loved the basic data-structures as described in this link. Since I needed a double linked list the other day, I transcribed all of the major basic structures from js into object pascal : Array Hash Table Set Singly Linked List Doubly Linked List Stack Queue Tree Graph Source and test-files here
    1 point
  24. jarto

    Sample - Scrollbar

    @gabr42 just fixed the update issues. Now it works again.
    1 point
  25. jarto

    Sample - Scrollbar

    The fix is now available in the alpha branch.
    1 point
  26. Tams11

    License code expired

    Thank you so much! It has been resolved now! Tammy
    1 point
  27. lynkfs

    touch-action in CSS

    This looks like a non-solvable problem. Apparently Apple changes his/her mind often how to implement this in the various mobile iOS Safari versions and the OS hardware event checking seems to take precedence over html processing. If you change the <body> part of the index.html file to this <body> <script type="text/javascript"> /* This prevents the window being moved by touches, to give the impression of a native app */ document.ontouchmove = function(e) { e.preventDefault(); } document.addEventListener("touchstart", event => {window.alert("tou
    1 point
  28. First of all, that's a beautiful clock. Looks very nice 🙂 I can reproduce the AM/PM -bug, so let me have a look at it. Transparency can be controlled with normal properties like this: Ctrl.AlphaBlend:=True; Ctrl.Opacity:=0; You can also make your procedure more versatile, so it can be used with any control: procedure TFormClock.TransparentControl(ACtrl: TW3CustomControl); begin w3_setstyle(ACtrl.Handle, 'background', 'transparent'); w3_setstyle(ACtrl.Handle, 'outline', 'none'); w3_setstyle(ACtrl.Handle, '-webkit-box-shadow', 'none'); w3_setstyle(ACtrl.Handle, 'box-
    1 point
  29. lynkfs

    SEO

    Search Engine Optimisation - SEO Over the years I have made quite a few websites with Smart, but eventually stopped doing that. Reason is that Smart produces single page applications (or multiple if you like) and SEO for these type of apps is essentially impossible. Search engine crawlers look for html, which is what feeds their indexing effort. This is completely absent in the standard index.html file, so essentially they see an empty page. Google's googlebot is supposed to be able to execute the js bit during its crawling, but I find the indexing results below par. The
    1 point
  30. @lynkfs Oh, that helped so much! I've struggled at the concept of calling these external js apis when class references don't exists and also had no experience with using promises. But you helped me get going and now I'm making very good progress 🙂 Now I have TW3FacebookLogin- and TW3GoogleLogin-classes that both work. I'll have to read up a bit to add the necessary parameters (besides ClientId of the app), but I should be able to get them into alpha and component palette next week.
    1 point
  31. @JimKueneman No, I haven't changed anything in WebSockets code.
    1 point
  32. lynkfs

    panel.zoom and firefox

    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)"
    1 point
  33. FRepliedSearchCriteria.SetLength(20); console.log( JSON.Stringify(Variant(FRepliedSearchCriteria)) );
    1 point
  34. With great power comes great responsibility!
    1 point
  35. IgorSavkic

    the future of coding

    We live in fast advancing times, potential application is limitless, I guess first we'll see it as replacement for human support.
    1 point
  36. 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
    1 point
  37. 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 -- //s
    1 point
  38. I get an annoying Self.OnRemove error in the console when using the TRestCall class. It doesn't affect t he operation but it floods the console when doing a lot of http calls. Perhaps not a bug, but It would been nice to get it away. Latest 3.9 beta release.
    1 point
  39. jarto

    mouse position

    Thank you. This is one of the really old demos where lots of code is in TForm1.InitializeObject. When that is done, you run the risk of everything not being initialized when your code runs. Standard fix is to move the code to TForm1.InitializeForm: type TForm1 = class(TW3Form) private {$I 'Form1:intf'} FIsCapture: boolean; function MakeMouseEvent(label: TW3Label; name: string): TMouseEvent; function MouseToStr(shift: TShiftState; x, y: integer; scrXY: TPoint): string; protected procedure InitializeForm; override; procedure InitializeObject; override; en
    1 point
  40. Basically you'll want to add a history entry whenever you change forms. Also make up alias url's for every form. For instance 'Form1' can have an url-alias of 'index.html', 'Form2' an alias of 'bookreviews.html' etc. Every history entry links a Form (from) to an alias (to), see below. There is an old post on this forum (2015), but checking my last project I did this : Put an initial history entry on startup and also initiate the main eventhandler for handling backbutton presses unit Unit1; interface uses Pseudo.CreateForms, // auto-generated unit that creates forms dur
    1 point
  41. lynkfs

    drag and drop

    I've spend hours to implement a simple drag & drop mechanism, and I've given up. The mechanism is not that difficult, but the browser implementations drive me nuts. The problem is that on different chrome browsers the 'drop' position is off from what it should be. If someone's interested, the code below works flawlessly in the internal ide browser. Executing on win10-latest chrome you'll see a jump in positioning of elements when dropped. I've finally figured out, that the jump-amount is based on where the element has been 'grabbed'. It is zero when grabbing top/left,
    1 point
  42. lynkfs

    ionic

    Usually I try to steer away from external frameworks. They seldom provide exactly what is needed and are difficult to modify. An exception may be the ionic framework. It is an open source ui toolkit with some nice elements in it. The good thing is that their components subtly change depending on which platform they are used on. The following code uses 2 Ionic components : a button and an extremely elegant selector var iobutton : TIonicButton := TIonicButton.Create(self); iobutton.setbounds(100,100,100,35); iobutton.color := 'primary'; iobutton.fill := 'outline'; iobutto
    1 point
  43. Huseyin SEKER

    linebreak in firefox

    Thanks, with divhtmlelement the below code worked allright: W3DIVHtmlElement1.InnerHtml:='today<br><br><br>weather<br>sunny';
    1 point
  44. lynkfs

    Scroll form

    I'm not a js guru , or maybe Anyway, logically it's either the form or the memo which reacts to scrolling/swiping. If you want both, you need to be able to distinguish in which situations you want either to happen. There are various ways to do this, one of them this : as soon as the form scrolls, disable scrolling on the memo altogether. Then you need to determine under which condition you want to re-enable scrolling the memo. One way would be to have a simple onclick handler procedure TForm1.InitializeForm; begin inherited; // this is a good place to initialize compone
    1 point
  45. IgorSavkic

    gestures

    Looks interesting, I think it could be implemented as partial class and added to RTL just like with MouseTouch.pas
    1 point
  46. lynkfs

    gestures

    Every now and then I read something so refreshing, that it jolts the old braincells out of its rut. 10/GUI describes a new gui system concept which does away with keyboards and mice, relying on gestures instead Fun, and somehow very convincing Recently I needed a mechanism to cycle through an image carousel. There are different ways of doing this, but for touch enabled devices I opted for a one-finger swipe gesture. W3Image.OnSwipeLeft := procedure(sender: TObject) begin ... end; The implementation of OnSwipeLeft below is somewhat project specific, but includes the following
    1 point
  47. lynkfs

    proxy

    I recently came across the javascript proxy object A proxy object basically monitors a chosen object, and has getter and setter functions which are invoked when the value of any of its properties changes (set) or are being accessed (get). In that respect there are some similarities with the mutationobserver object. In the below code snippet a regular EditBox has its text saved in a proxied object, which triggers the setter function and a Button which reads that value and thus triggers the getter function procedure TForm1.InitializeForm; begin inherited; // this is a go
    1 point
  48. lynkfs

    app

    I usually don't publish commercial apps on the forum. Here is the exception : a retail shopping experience - made with Smart
    1 point
  49. jorn

    Auto payment for SMS

    Mail received, and mission accomplished 🙂
    1 point
  50. A third option is to add a stylesheet in code: Add SmartCL.Css.Stylesheet to uses clauses and do: var MyStylesheet := TW3StyleSheet.Create; MyStylesheet.InnerHtml := #".TMyControlStyle { font-size: small; text-align: center; text-decoration: none; padding: 0; border: 1px solid #bbb; background-color: #C3D9FF; } .TMyOtherStyle { ..... }";
    1 point
×
×
  • Create New...