Delphi Styles in uniGUI

[CastleSoft]

Just a thought...

A tool to convert/use any existing Delphi Style on uniGUI would be pretty cool.

Licensing may be the issue, but the mapping of controls should be similar ? Just graphic -> CSS for uniGUI theme ?

[Fred Montier]

Really "un"feasible: economically, practically and ... really for what ?
Why not night mode, tiktok mode effects ?

[CastleSoft]

Hi Fred,

"for what ?" - The existing styles are basic, and if you have desk/mobile apps using Delphi Styles it would be nice to match the web interface.

"As for tiktok mode effects ?" - Actually Lottie animations would be very cool. (https://lottiefiles.com) and Skia4Delphi implements these. So a port would be nice. 🙂

A full bootstrap and material design theme would also be nice.

I agree it may be a tricky task, but I believe it would be possible for a smart parser to read the Delphi style and generate CSS. 

Not a high priority obviously.. A nice to have.

Reactive layouts are higher on the list for me.  

[CastleSoft]

If I get a chance I may wrap the Lottie web player into a uniGUI control.

https://lottiefiles.com/web-player

And post it in the components. It looks pretty simple to wrap. 

[Fred Montier]

Styles is a very complex resource. Looks easy in Delphi. I really found amazing the way it works in RAD Studio. But there are huge things there below the surface (DPI, scale etc...), just read the specs and the evolution since RAD 10.

But it will never work the same way to web. See the way themes works in uniGui/Sencha. Is already good enough. Otherwise get a deep dive in CSS and JS and you got amazing thing.

6 hours ago, CastleSoft said:

If I get a chance I may wrap the Lottie web player into a uniGUI control.

https://lottiefiles.com/web-player

And post it in the components. It looks pretty simple to wrap. 

Is not that hard. I will take look.

[CastleSoft]

Cool...

Looks pretty straight forward:

<script src="https://unpkg.com/@lottiefiles/lottie-player@latest/dist/lottie-player.js"></script>
<lottie-player src="https://assets3.lottiefiles.com/packages/lf20_yom6uvgj.json"  background="transparent"  speed="1"  style="width: 300px; height: 300px;"  loop  autoplay></lottie-player>

https://github.com/LottieFiles/lottie-player

Include the lottie-player.js

Expose a few properties:

- Playmode (Normal or Bounce)

- Direction (Forward or Backward)

- Background Colour (transparent, RGB)

- Width, Height (pixels or percent)

- Animation Speed (1x)

- Controls (true/false)

- Autoplay (true/false)

- Hover (true/false)

- Loop (true/false)

- Lottie File/URL (json file or url)

That's about it... If you don't I'll try and throw one together when I get a change.