Jump to content

All Activity

This stream auto-updates     

  1. Yesterday
  2. Last week
  3. jarto

    Audio File Cache

    You need to preload them and then play them from the local storage. There's a similar question here in javascript: https://stackoverflow.com/questions/41425574/how-to-save-audio-files-on-browsers-cache-so-that-when-the-user-press-a-button
  4. COMFIED

    Audio File Cache

    I am playing online audio mp3 files from a web source. I would like the audio files to cache after playing, so that I can replay when offline. Is there any way of achieving this?
  5. 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.
  6. warleyalex

    KaTex

    //------ 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. //---------------------------------------------------------------------
  7. jarto

    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.
  8. 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.
  9. Czar

    KaTex

    Thanks a lot that works sweet.
  10. lynkfs

    KaTex

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

    KaTex

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

    KaTex

    Hi everyone, Once again I am trying to incorporate a JS library into my SMS files. https://cdn.jsdelivr.net/npm/katex@0.11.1/dist/katex.js https://katex.org/docs/api.html I can put the code below into the custom template <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.11.1/dist/katex.min.css" integrity="sha384-zB1R0rpPzHqg7Kpt0Aljp8JPLqbXI3bhnPWROx27a9N0Ll6ZP/+DiW/UqRcLbRjq" crossorigin="anonymous"> <!-- The loading of KaTeX is deferred to speed up page rendering --> <script defer src="https://cdn.jsdelivr.net/npm/katex@0.11.1/dist/katex.min.js" integrity="sha384-y23I5Q6l+B6vatafAwxRu/0oK/79VlbSz7Q9aiSZUvyWYIYsd+qj+o24G5ZU2zJz" crossorigin="anonymous"></script> <!-- To automatically render math in text elements, include the auto-render extension: --> <script defer src="https://cdn.jsdelivr.net/npm/katex@0.11.1/dist/contrib/auto-render.min.js" integrity="sha384-kWPLUVMOks5AQFrykwIup5lo0m3iMkkHrD0uJ4H5cjeGihAutqP0yW0J6dpFiVkI" crossorigin="anonymous" onload="renderMathInElement(document.body);"></script> I would like to render a maths string into the caption of a label but I don't understand how I do that. I am hoping someone can help explain or show me how to set up KaTex inside the form and how to access the functions in the JS file.. lbl.caption := myKatex.renderToString("c = \\pm\\sqrt{a^2 + b^2}");
  13. tb-sms

    SMS and the Ionic Framework

    Dir sirs! I am interested in the development of mobile applications. In particular, I am interested in developing PWA Mobile Apps. I think that SMS is a very interesting product. I think the Ionic Framework UI Toolkit for building apps is very powerful. Ionic Framework https://ionicframework.com Are you planning to support the Ionic Framework in a future version of SMS? If yes, by what date will this version be released? With best regards Thomas
  14. Earlier
  15. 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 🙂
  16. 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)
  17. 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.
  18. 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.
  19. 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 🙂
  20. 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.
  21. jarto

    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
  22. jarto

    TW3StringGrid and TW3Grid Issues wtih Scrolling in Firefox

    This is now fixed in the development-channel.
  23. jarto

    TW3StringGrid and TW3Grid Issues wtih Scrolling in Firefox

    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.
  24. jarto

    TW3StringGrid and TW3Grid Issues wtih Scrolling in Firefox

    Wow. I can see the same. Gonna have a look right away.
  25. 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 3.1.0.91. 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
  26. DidierXT

    WebWorker and InitAnimationFrameShim

    Seems I can't retrieve information. I'll send you a test case: SMS 3.0.2.20 - Delphi 10.3.2 - RemObjects 9.6 Server : NewProject.exe Client windows : NewProjectClient.exe OK Client SMS : sms_ro.sproj NO DATA Client JS : test_client.html NO DATA test_ro_sms.zip
  27. jarto

    WebWorker and InitAnimationFrameShim

    @DidierXT Can you please let us know if that helped?
  1. Load more activity
×