Jump to content

All Activity

This stream auto-updates     

  1. Last week
  2. lynkfs

    System.Types

    sounds like a duplication
  3. IgorSavkic

    System.Types

    I've noticed there's TVariant.IsString but also TVariantHelper.IsString (same for several other functions). They do the same thing, isn't one enough?
  4. Earlier
  5. Thanks for these details, I learn a new trick every day
  6. 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.
  7. Thanks, it's quite informative. I never heard before of calc, it could be useful on certain pages.
  8. 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)
  9. 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).
  10. Does the error vanish if you open SmartCL.Net.Rest.pas and do these changes on lines 142 and 147: if Assigned(OnRemove) then OnRemove(Self);
  11. 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; end; implementation { TForm1} procedure TForm1.InitializeObject; begin inherited; {$I 'Form1:impl'} end; procedure TForm1.InitializeForm; procedure EndCapture; begin W3pnlSetCapture.Visible := true; W3pnlReleaseCapture.Visible := false; W3Panel2.OnMouseUp := nil; FIsCapture := false; end; begin inherited; OnMouseMove := MakeMouseEvent(W3lblFormCoords, 'Form'); W3Panel1.OnMouseMove := MakeMouseEvent(W3lblPanel1Coords, 'Panel1');
  12. How can I implement google-play-scraper in sms? It uses nodejs and javascript.
  13. 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 during startup System.Types, SmartCL.System, SmartCL.Components, SmartCL.Forms, SmartCL.Application; type TApplication = class(TW3CustomApplication) procedure ApplicationStarting; reintroduce; end; implementation uses Globals; procedure TApplication.ApplicationStarting; begin browserapi.window.onpopstate := procedure(e:variant) begin CBOnPopState(e); end; browserapi.window.history.pushState(nil,'Form1','index.html'); end; end. Whenever there is a change in form, add an entry to the history object browserapi.window.history.pushState(nil,'Form1','bookreview.html'); //from Form1 to bookreview.html The second parameter (Form1) is the 'from' Smart form-name and the third parameter is the 'to' fake url. Supposing that Form2 in this example handles the bookreviews, then at some stage users will return to Form1, at which time another history entry 'Form2' --> 'index.html' will be added. The handler simply reacts to the history popstate events : Procedure CBOnPopState(e: variant); Begin if (browserapi.window.location.pathname = '/') then GoToForm('Form1'); if (browserapi.window.location.pathname = '/index.html') then GoToForm('Form1'); if (browserapi.window.location.pathname = '/bookreview.html') then GoToForm('Form2'); ... The above is for browser projects, but should work for native android as well
  14. Can you post the code you used? Maybe it is better.
  15. I've used the history object in relation to the browsers backbutton many times. No problems on ios. Not your code exactly but similar
  16. Hi, i searched over internet and found some usefull scripts. (Source: https://stackoverflow.com/questions/12381563/how-to-stop-browser-back-button-using-javascript ) When you add following javascript codes before </head> tag of index.html it works. <script language="javascript"> history.pushState(null, document.title, location.href); window.addEventListener('popstate', function (event) { history.pushState(null, document.title, location.href); }); </script> </head> I tested on windows (firefox and chrome) and on android cell phone (chrome browser). That's exactly what i want. When back button is pressed nothing happens and the edit boxes and information entered on the active page is not lost. Can someone try this at iOs devices?
  17. lynkfs

    mouse position

    The 'featured demo' : Mouse Coordinates project compiles ok but results in error uncaught : Object not instantiated in TW3CustomControl._setMouseMove [line: 5783, column: 21, file: SmartCL.Components]
  18. 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.
  19. 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, and half the width of the grabbed element when grabbed bottom/right. Checking up on stack-overflow, there are heaps of references to this problem. Without a workable solution. And posts dating from 6 years ago until recently. One might expect these type of bugs to be resolved in a timespan that long. test-code procedure TForm1.InitializeForm; begin inherited; // this is a good place to initialize components Var Drag : JW3Panel := JW3Panel.Create(self); Drag.SetBounds(50,50,100,100); Drag.handle.style.border := '1px solid silver'; Drag.handle.setAttribute('draggable','true'); Var Drop : JW3Panel := JW3Panel.Create(self); Drop.SetBounds(50,300,400,200); Drop.handle.style.border := '1px solid silver'; Drag.handle.ondragstart := procedure(ev: variant) begin Drop.handle.ondragover := procedure(ev: variant) begin ev.preventDefault(); end; //payload = image.id, mouse-offsetX and mouse-offsetY ev.dataTransfer.setData("text", ev.target.id + ';' + inttostr(ev.offsetX) + ';' + inttostr(ev.offsetY)); ev.dataTransfer.effectAllowed := "copy"; ev.dataTransfer.dropEffect := "copy"; end; Drop.handle.ondrop := procedure(ev: variant) begin ev.preventDefault(); var data := ev.dataTransfer.getData("text"); //split payload into image.id, mouse-offsetX and mouse-offsetY var myarray := StrSplit(data,';'); var target : variant := document.getElementById(myarray[0]); ev.target.appendChild(target); target.style.left := ev.offsetX - StrToInt(MyArray[1]) + "px"; target.style.top := ev.offsetY - StrToInt(MyArray[2]) + "px"; end; end; I've ended up with a mouse-event based drag & drop solution rather than using the html5 based d&d api.
  20. I used the method in the example I posted with Phonegap. Does anyone have any idea about doing this with a normal Android browser?
  21. lynkfs

    styling

    Digging in a bit further, see previous posts in this thread. I've set myself the task to define a workable styled css-only component : a slider. The structure is reasonably simple : in xml terms it will be <slider> <rail>...</rail> <knob>...</knob> </slider> The rail is an element which takes up the top half of the slider, with a bottom border color. The knob is an element with a border radius of 50%, which makes it a circle. The theme file for this component looks something like // slider theme01.slider.height: 100% // slider rail theme01.slider.rail.height: 50% theme01.slider.rail.border-bottom: 1px solid red // slider knob theme01.slider.knob.background-color: red theme01.slider.knob.height: 2em theme01.slider.knob.width: 2em theme01.slider.knob.left: 0% theme01.slider.knob.top: -1em theme01.slider.knob.border-radius: 50% This contains enough information to be able to construct and style a slider component on the fly. To make it a bit more interesting, I've added movement capabilities by adding a compiled procedure as a string : theme01.slider.knob.function01: onmousedown = function (e) { var saveX; saveX = e.clientX; Self.handle.onmousemove = function (e$1) { which can be just eval-ed at runtime. This function simply manipulates the 'left' property of the knob. So here we go, a working slider component from a theme file only. (the complete theme-file here). And since it does not have any absolute dimensioning info, it resizes automatically to its container.
  22. I tried your code but it doesn't work. I tested on android (chrome) and windows (firefox). When i press back button of my cell phone below ( near home and recent apps button) it goes back to previous page, i don't want that. I want the visitor stay on my page-my application. In windows it's not so important but in cell phones it is important.
  23. @Huseyin SEKER Here's code that compiles. unit Form1; interface uses System.Types, System.Types.Convert, System.Objects, System.Time, System.IOUtils, System.Device.Storage, W3C.Dom, SmartCL.System, SmartCL.Time, SmartCL.Graphics, SmartCL.Components, SmartCL.FileUtils, SmartCL.Device.Storage, SmartCL.Forms, SmartCL.Fonts, SmartCL.Theme, SmartCL.Borders, SmartCL.Application; type TForm1 = class(TW3Form) private {$I 'Form1:intf'} procedure onBackKeyDown(eventObj: JEvent); procedure onDeviceReady(eventObj: JEvent); protected procedure InitializeForm; override; procedure InitializeObject; override; procedure Resize; override; end; implementation { TForm1 } procedure TForm1.InitializeForm; begin inherited; // this is a good place to initialize components end; procedure TForm1.InitializeObject; begin inherited; {$I 'Form1:impl'} BrowserAPI.document.addEventListener('deviceready', @onDeviceReady, false); end; procedure TForm1.Resize; begin inherited; end; procedure TForm1.onBackKeyDown(eventObj: JEvent); begin //Here do the right thing based on any variable in your app. //Call preventDefault if you do not want your app to close. eventObj.preventDefault(); end; procedure TForm1.onDeviceReady(eventObj: JEvent); begin BrowserAPI.document.addEventListener('backbutton', @onBackKeyDown, false); end; initialization Forms.RegisterForm({$I %FILE%}, TForm1); end.
  24. This is now fixed in the alpha. It's enough just to set RowCount to 0
  25. How can i disable back button on android chrome browser? You wrote some code below which gives errors when i compile,so which units should i write to uses section?
  26. Thank you. Gonna have a look. Probably the repaint is not called if rowcount is 0.
  27. Thanks that made the solution. Now on windows and android phone a nice scrollbar is shown and it works. I face problems using IDE sometimes, i can write them here when i got time. And this topic is related to IDE i think but i posted to "code" section by mistake, you may move it if you want.
  1. Load more activity
×
×
  • Create New...