Jump to content


  • Content Count

  • Joined

  • Last visited

  • Days Won


Everything posted by lynkfs

  1. 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. lynkfs


    sounds like a duplication
  3. 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
  4. lynkfs


    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)
  5. 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
  6. 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
  7. I've used the history object in relation to the browsers backbutton many times. No problems on ios. Not your code exactly but similar
  8. 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]
  9. 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,
  10. lynkfs


    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% // s
  11. lynkfs


    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
  12. lynkfs


    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
  13. lynkfs

    Scroll form

    There is a timer control in the system.time unit memo1.Text := #'Apple Banana Cherry'; Memo1.Text := 'Apple' + #10 + 'Banana' + .. Memo1.Add('Apple',true); Memo1.Add('Banana',true); all give the same result
  14. 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
  15. lynkfs


    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
  16. lynkfs


    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
  17. you probably can use the same mechanism W3StringGrid1.handle.GetChildById(W3StringGrid1.tagid + '_row_' + inttostr(i) + '_col_' + inttostr(4)).style['color'] := 'red';
  18. not the most straightforward way of doing this, but this works : procedure TForm1.W3StringGrid1CellClick(const Sender: TObject; const Row: Integer; const Col: Integer); begin //var elem := browserapi.document.getElementById(W3StringGrid1.Handle.id + '_row_' + inttostr(row) + '_col_' + inttostr(col)); //either var elem := W3StringGrid1.handle.GetChildById(W3StringGrid1.tagid + '_row_' + inttostr(row) + '_col_' + inttostr(col)); //or elem.style['color'] := 'red'; end; maybe a handle to a rendered cell could be made a standard property
  19. lynkfs


    Edited Had a look at vue, but never used it. After some more testing of the proxy object, my conclusion is that you are right. Proxy objects track 'reads' across all properties of the tracking object, any level deep. 'Writes' though are only tracked on the same level as where they are specified. Sort of logical as a set-handler only gets as input an object, property and value, and as properties can have the same name across levels, it wouldn't know what to track. It is feasible though to set subsequent proxies on deeper levels, and code specific set-handlers for it ...
  20. works as expected on my system is the error the same when you navigate to ..\output\ and start node there ? (node WebSocketServer.js)
  21. lynkfs


    Correct. 😃
  22. just as a proof of concept : tutor initiates conversation with student : https://lynkfs.com/Experiments/peer/receive/www and on another machine : https://lynkfs.com/Experiments/peer/send/www (must be on another machine) student sends a text by copying tutor id into the edit box and pressing buttons 1, 2 and 3 this text then arrives at the tutors project The user interface of these projects is really bad, sorry, just proof-of-concept. This demo is basically a simple chap app, but since it is using webrtc (and webrtc handles not only text but also other media), I feel
  23. Just going through the first bit of their docs, it looks fairly straightforward procedure TForm1.W3Button1Click(Sender: TObject); begin // var Script := browserapi.document.createElement('script'); Script.src := 'https://cdn.jsdelivr.net/npm/peerjs@0.3.20/dist/peer.min.js'; browserapi.document.head.appendChild(Script); Script.onload := procedure begin writeln('peer.js loaded'); asm @mypeer = new Peer({key: 'lwjd5qra8257b9'}); end; //demo key mypeer.on('open', procedure(id:string) begin writeln('New peer ID : ' + id); end); end; end; the remainder doesn't loo
  24. lynkfs


    The proxy object does handle deeper levels as well code below refers to earlier post : //set proxies var MyProxy : variant := new JObject; var ProxyObj : variant := new JObject; var leveltest: variant := new JObject; ProxyObj.leveltest := leveltest; ProxyObj.leveltest.level := 'initiallevel'; Button2.OnClick := lambda Button2.Caption:= MyProxy.leveltest.level; end; var handler : variant := new JObject; handler.get := function(obj, prop: variant): variant begin writeln(json.stringify(obj)); Memo1.Add('someone read ' + prop + ' as ' + obj[prop].level + #10);
  • Create New...