Jump to content


Popular Content

Showing content with the highest reputation since 10/18/2019 in all areas

  1. 6 points
    You know the feeling when everything makes sense and everything is easy and you get a lot done? That's where I've been today. I cleaned up the IDE code and removed the old designer and the live preview-code, which never worked. Then Snap to grid and export to code and XML. The old designer's popup menu had many functions, but apparently half of them were never finished. So, while there is an undo there, it never worked. Same thing with aligns. Now I'm working on cut/copy/paste. While testing, I noticed that the old designer does not check for duplicate names, if you paste a component with child components. Also, you can't paste into another child component, like another panel. Weird thing is also, that the clipboard is cleaned after every paste. And even weirder is, that the old IDE is not using a global clipboard. Wonder why? So I ended up fixing those bugs in the old designer, as I get to use most of the underlying functionality with the new designer as well. Also wrote a static TW3URL-class for nice handling of url parameters. Life is so good in the zone 🙂
  2. 5 points

    New Visual Designer for Smart Mobile Studio

    Let me also write about the progress I'm making with the designer. I got it running inside embedded Chrome in the IDE last night. I'm very excited with everything you can do with this new designer and what it lets us do in the future. Let's start with a small geeky detail. Look at those dots in the form. They are the standard 8px grid that Delphi and Lazarus also have. Two for-loops plotting dots on an html5-canvas? No, no, no, this is made with pure CSS and you can use this same code in your own apps as well: DesignerForm.Handle.style['background'] := 'linear-gradient(90deg, #EFEBE7 7px, transparent 1%), linear-gradient(#EFEBE7 7px, transparent 1%), #000000'; DesignerForm.Handle.style['background-size'] := '8px 8px'; DesignerForm.Handle.style['background-position'] := '1px 1px'; What is lovely is that you can see what every property does. Like you can see in the image above, I changed the ThemeBorder for the label to flat. So, you can change the theme border and background for every control and see what it looks like. Set AlphaBlend to True and adjust Opacity and you'll see the result. All the other properties are also supported: Color, Angle, BorderRadius, you name it. And it's really cool that you can change functional properties and see what the control did. Fill in the Items of a ListBox and you can see how they are drawn. This one will also unlock the secrets of TW3EditBox. Look at the picture below. The slider down there is just a TW3EditBox with itRange as InputType. The panel with the angle has three sub panels and are using Align-properties to position themselves. Inside the middle panel is a TW3ListBox where the background Opacity is adjusted. Hence, you see the blue color from the background getting through. If the background had been an image, you'd see it as well. I've been testing and drawing forms for a while now and it's really great fun. I hope I can get this finished soon so I can share the fun with you guys too.
  3. 4 points


    //------ typescript definition ------- /** Documentation: https://katex.org/docs/options.html */ export interface KatexOptions { /** * If `true`, math will be rendered in display mode * (math in display style and center math on page) * * If `false`, math will be rendered in inline mode * @default false */ displayMode?: boolean; /** * If `true`, KaTeX will throw a `ParseError` when * it encounters an unsupported command or invalid LaTex * * If `false`, KaTeX will render unsupported commands as * text, and render invalid LaTeX as its source code with * hover text giving the error, in color given by errorColor * @default true */ throwOnError?: boolean; /** * A Color string given in format `#XXX` or `#XXXXXX` */ errorColor?: string; /** * A collection of custom macros. * * See `src/macros.js` for its usage */ macros?: any; /** * If `true`, `\color` will work like LaTeX's `\textcolor` * and takes 2 arguments * * If `false`, `\color` will work like LaTeX's `\color` * and takes 1 argument * * In both cases, `\textcolor` works as in LaTeX * * @default false */ colorIsTextColor?: boolean; /** * All user-specified sizes will be caped to `maxSize` ems * * If set to Infinity, users can make elements and space * arbitrarily large * * @default Infinity */ maxSize?: number; /** * Limit the number of macro expansions to specified number * * If set to `Infinity`, marco expander will try to fully expand * as in LaTex * * @default 1000 */ maxExpand?: number; /** * Allowed protocols in `\href` * * Use `_relative` to allow relative urls * * Use `*` to allow all protocols */ allowedProtocols?: string[]; /** * If `false` or `"ignore"`, allow features that make * writing in LaTex convenient but not supported by LaTex * * If `true` or `"error"`, throw an error for such transgressions * * If `"warn"`, warn about behavior via `console.warn` * * @default "warn" */ strict?: boolean | string | Function; } export class ParseError implements Error { constructor(message: string, lexer: any, position: number); name: string; message: string; position: number; } /** * Renders a TeX expression into the specified DOM element * @param tex A TeX expression * @param element The DOM element to render into * @param options KaTeX options */ export function render(tex: string, element: HTMLElement, options?: KatexOptions): void; /** * Renders a TeX expression into an HTML string * @param tex A TeX expression * @param options KaTeX options */ export function renderToString(tex: string, options?: KatexOptions): string; //---------------- // ====>- pascal external class definition <==== unit katex; interface uses System.Types, W3C.HTML5, W3C.DOM; type TJSKatexOptions = class external 'Object' displayMode: Boolean; // nullable throwOnError: Boolean; // nullable errorColor: String; // nullable macros: Variant; // nullable colorIsTextColor: Boolean; // nullable maxSize: Float; // nullable maxExpand: Float; // nullable allowedProtocols: TStrArray; // nullable &strict: Variant; {Boolean or String or JFunction} // nullable end; type TJSKatex = class external 'katex' public class procedure render(tex: String; element: JHTMLElement); overload; external 'render'; class procedure render(tex: String; element: JHTMLElement; options: TJSKatexOptions); overload; external 'render'; class function renderToString(tex: String): String; overload; external 'renderToString'; class function renderToString(tex: String; options: TJSKatexOptions): String; overload;external 'renderToString'; end; type TJSParseError = class external 'katex.ParseError' constructor Create(const msg: String; lexer: Variant; position: Float); name: String; &message: String; position: Float; end; implementation end. //---------------------------------------------------------------------
  4. 4 points

    SMS and the Ionic Framework

    Hi Thomas, Thank you for an interesting idea. At the moment we are working on the new Visual Designer. Once it's finished, it's way easier to create beautiful and functional PWA apps without having to create all by code. So, the plan is: Finish the Designer and have it support all current Visual components. (90% ready) Add non-visual components to the component palette Release a version Once we have that out, we'll be able to plan our next steps.
  5. 4 points

    New Visual Designer for Smart Mobile Studio

    Time for my (almost) daily update on how the work with the new Designer is progressing. Today I started changing TW3TabControl, so I could use it in the Designer. New tabs can be added by selecting "New tab" in Designer's popup-menu. Then you can change properties in the Property Inspector and add child components into the tabs. This was one of my original big goals with the new designer and I'm really happy to see it become reality 🙂
  6. 4 points
  7. 3 points


    and this works too var html : variant; asm @html = katex.renderToString("c = \\pm\\sqrt{a^3 + b^3}", { throwOnError: false }); end; W3Panel1.InnerHTML := html;
  8. 3 points


    A quick solution : have a form with a panel and a button in the custom template add these lines <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.11.1/dist/katex.css" integrity="sha384-bsHo4/LA+lkZv61JspMDQB9QP1TtO4IgOf2yYS+J6VdAYLVyx1c3XKcsHh0Vy8Ws" crossorigin="anonymous"> <script defer src="https://cdn.jsdelivr.net/npm/katex@0.11.1/dist/katex.js" integrity="sha384-4z8mjH4yIpuK9dIQGR1JwbrfYsStrNK6MP+2Enhue4eyo0XlBDXOIPc8b6ZU0ajz" crossorigin="anonymous"></script> in the onclick handler of the button add this code procedure TForm1.W3Button1Click(Sender: TObject); begin var katexelement : variant; katexelement := W3Panel1.handle; asm katex.render("c = \\pm\\sqrt{a^2 + b^2}", @katexelement, { throwOnError: false }); end; end; which results in this : This code can be improved a bit. F.i. I like to load the js library under program control, so at least you know when it is ready
  9. 2 points
    Well, I found a better solution: There will be two new properties that relate to the Anchors: AnchorGapRight AnchorGapBottom These are calculated and set by the Designer when Anchors are set. They represent the distance from bottom right corner of the component to the parent's bottom right corner. This is used by the RTL to resize the child component properly when Anchors are used. The great thing is that this makes handling Anchors a lot more simple and elegant. It will also work even if the form size happens to change while the form is being built.
  10. 2 points
    Yes, that was very frustrating in the old designer. The development-channel already contains a version that supports custom properties, but they are not that nice to use as you can't see the result in the designer. In the new one you can just change any property and see what visual changes it makes. Got Undo&redo ready today. Also found a nice solution for the non-visual components. Basically, I just create virtual properties for those if the class itself does not have them. As they are virtual, I get to ignore them when I produce the Form impl-code (the code that creates the controls and sets the properties and events)
  11. 2 points

    Development updates

    New update available in the development-channel: RTL: Bug fix to browser specific CSS. Fixes scrolling in Firefox. EventManager: Prevent extra OnClick when using SetCapture Bug fix to handling movement events while using EventManager's MouseCapture Bug fix to scrolling the earth in Tabs, Scrolling and ListBox demo
  12. 2 points
    Found the reason. The browser specific CSS transformation for Firefox is wrong. There are two ways I can fix this: I can simply fix the Firefox transformation or then remove the browser specific CSS and go with generic CSS. It may be a better idea to change all to use generic CSS. It may break some really old browsers, but modern ones are going to stop supporting these soon anyway. Gonna fix this today and push an update in the evening.
  13. 1 point

    New Visual Designer for Smart Mobile Studio

    Time to make a small update. I've now been working on small but tricky issues that are related to Anchors and Align. It all started from the fact that Smart Mobile Studio has not saved the form size anywhere and hence, it hasn't sent any form size in the compiled application either. That's been handled by the RTL, which has set the form size based on device/browser size. However, that also means that you can not handle Anchors inside an aligned panel right. I've decided to fix this all by actually introducing form size in the designer as well. So you can set the form to for example iPhone vertical and design the form based on that. When the app then starts, it will build the form using this "design form size" and resize it then later according to the device/browser window size.
  14. 1 point
    This designer looks nice. One other missing thing, that I think very frustating is the Object Inpector, just because lacks some basic features, such as support for some custom properties. That could use to make the controls look realistic. A new refactoring Objector Inspector is welcomed to this designer.
  15. 1 point

    New Visual Designer for Smart Mobile Studio

    Still going strong! Today and yesterday I finished cut/copy/paste. It uses the system clipboard, so copy/paste between two running IDEs is now also possible. Also registered TW3Timer in the Component Palette and made sure that non-visual components are properly supported. There's s little issue about how to show these best in the designer as non-visual components don't have Left- and Top-properties. I could automatically stack them or then try to hack some support for pseudo coordinates. Undo is next.
  16. 1 point
    This is now fixed in the development-channel.
  17. 1 point
    I use TW3StringGrid in a project and I just noticed that when the grid has more rows than space to display them, the scrollbar shows, but the grid won't show the scrolled data in Firefox. This works fine in Chrome and Edge. I tested this in the DEV channel and I am using version I also tried the two sample apps, "StringGrid Demo" and "GridProject" and they both have the same issue only in Firefox. Any ideas on what I am missing? Firefox was version 70.0 64 bit. tim
  18. 1 point
    Wow. I can see the same. Gonna have a look right away.
  19. 1 point

    WebWorker and InitAnimationFrameShim

    Try editing SmartCL.Time.pas and remove the call to InitAnimationFrameShim in the initialization -section in end of the file.
  20. 1 point

    HTML programming

    A bit of a weird topic name for a product which elevates Object Pascal using javascript. I could have named it 'Web Components' (as I did a while ago) or maybe better 'Api Programming'. There are a number of organisations which look after the web api's. W3C is the most known one, but there are others looking after specific parts (WhatWG, Khronos etc.). What they have in common is that they publish the web api's they're looking after in a specific formal format (WebIDL). Smart has transformed these specifications in corresponding pascal classes, contained in the APIs directory in the RTL. These classes basically map directly onto functions and data available in the browser itself, and using them is sort of similar to for instance incorporating Microsoft Office functions in a Delphi program (although technically very different from using COM). The RTL uses some of these api's under the hood, this post is about a mini-rtl if you like consisting of just 1 component. I use this approach a lot for non-form based projects, single-page-apps (or multiple) and websites. Demo of a semi-static SPA The inheritance chain of the DOM looks like - EventTarget - Node - Element - HTMLElement with all the various html elements underneath : HTMLDivElement for a <div>, HTMLAnchorElement for a <a> etc. The code below wraps the HTMLElement, but allows its constructor to create any of the specialised sub-elements. unit JElement; interface uses W3C.HTML5, W3C.DOM, W3C.CSS; type THTMLElement = class private FHTMLElement: JHTMLElement; public constructor Create(element: String; parent: THTMLElement; className: String; innerHTML : String); end; implementation { THTMLElement } constructor THTMLElement.Create(element: String; parent: THTMLElement; className: String; innerHTML : String); begin // cache element and set innerHTML and className FHTMLElement := JHTMLElement(Document.createElement(element)); FHTMLElement.innerHTML := innerHTML; FHTMLElement.className := ClassName; If parent = nil then document.body.appendChild(FHTMLElement) else parent.FHTMLElement.appendchild(FHTMLElement); end; HTMLElements have as specifiers 'attributes' and 'properties'. Properties are any of the values in the 'style' attribute : in the html expression style="left=10px; color=white;" href="#" both 'left' and 'color' are properties, and both 'style' and 'href' are attributes. So we need to add the setters for these parameters : Procedure THTMLElement.SetProperty(s1: String; S2: String); begin var FElementStyle := JElementCSSInlineStyle(FHTMLElement).style; FElementStyle.setProperty(S1, S2); end; Procedure THTMLElement.SetAttribute(S1: String; S2: String); begin FHTMLElement.setAttribute(S1, S2); end; The first part of the demo app is an image, which fills the complete viewport on any device and orientation, a slightly darker tinted bar on top, and a button in the bar linking to an email form further down. This header can be constructed as per below : unit JHeader; interface uses JHTMLElement, smartcl.system; type THeader = class(THTMLElement) public constructor Create(props: Variant); end; implementation { THeader } constructor THeader.Create(props: Variant); begin //hero image var hdr0 := THTMLElement.Create('div', nil, 'div'); hdr0.setProperty('width', '100%'); hdr0.setProperty('height', '100%'); hdr0.setProperty('min-height', '100vh'); hdr0.setProperty('background-image','url('+props['header-img']+')'); hdr0.setProperty('background-size','cover'); //top bar 100px var hdr11 := THTMLElement.Create('div', hdr0, 'div'); hdr11.setProperty('width', '100%'); hdr11.setProperty('height', '100px'); hdr11.setProperty('background-color','rgb(21,21,21,0.2)'); //contact button var hdr21 := THTMLElement.Create('a', hdr11, 'div', 'Contact'); hdr21.SetBounds(20,30,75,35); hdr21.setProperty('color', 'white'); hdr21.SetAttribute('type', 'button'); hdr21.setAttribute('href', '#contact'); hdr21.SetProperty('background-color', 'rgb(21,21,21,0.2)'); which can be instantiated as in (with a variable for the image) //THeader props['header-img'] := 'assets/img/blueprint.jpg'; THeader.Create(props); and which on execution time resolves in <div class="div" style="width: 100%; height: 100%; min-height: 100vh; background-image: url(; background-size: cover;"> <div class="div" style="width: 100%; height: 100px;"> <a class="div" type="button" href="#contact" style="visibility: visible; display: inline-block; position: absolute; overflow: auto; left: 20px; top: 30px; width: 75px; height: 35px; color: white;"> Contact </a> </div> </div> Hence the title of this post : HTML programming. The advantage of this approach is that once there are a number of these multi-purpose constructs like THeader available, making up another webpage is as easy as providing values for constructor parameters and stringing them together. At some stage I created the constructs listed here They need to be updated and streamlined a bit.