Jump to content

lynkfs

Moderators
  • Content Count

    740
  • Joined

  • Last visited

  • Days Won

    146

Everything posted by lynkfs

  1. 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
  2. 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
  3. I've used the history object in relation to the browsers backbutton many times. No problems on ios. Not your code exactly but similar
  4. 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]
  5. 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,
  6. 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% // s
  7. 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
  8. 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
  9. 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
  10. 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
  11. 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
  12. 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
  13. you probably can use the same mechanism W3StringGrid1.handle.GetChildById(W3StringGrid1.tagid + '_row_' + inttostr(i) + '_col_' + inttostr(4)).style['color'] := 'red';
  14. 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
  15. lynkfs

    proxy

    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 ...
  16. works as expected on my system is the error the same when you navigate to ..\output\ and start node there ? (node WebSocketServer.js)
  17. lynkfs

    proxy

    Correct. 😃
  18. 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
  19. 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
  20. lynkfs

    proxy

    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);
  21. webrtc I think has come of age, so it's worthwhile exploring I'll be happy to have a look
  22. lynkfs

    proxy

    I didn't know of this object either until recently. It has been around for a long time and is supported in all browsers. afaik it handles subobjects as well I'll check it out
  23. lynkfs

    app

    the paypal library. That gives credit-card, debit-card and paypal in one go you need to go through a vetting process, but after that easy to include
  24. Edited The other approach is to gain access to the internal j5 functions in a more readable way, as in function createElement(a,b:string): Variant; external 'createElement'; function ellipse(a,b,c,d:integer): Variant; external 'ellipse'; implementation { TForm1 } procedure TForm1.W3Button1Click(Sender: TObject); begin var txt := createElement('p', 'move your mouse over the canvas'); txt.position(50, 70); W3DivHtmlElement1.onMouseMove := procedure(Sender: TObject; Shift: TShiftState; X: Integer; Y: Integer) begin ellipse(X,Y,80,80); end; which eliminates the asm blo
×
×
  • Create New...