Recent

Author Topic: Modern UI in Lazarus  (Read 81734 times)

Phil

  • Hero Member
  • *****
  • Posts: 2750
Re: Modern UI in Lazarus
« Reply #15 on: April 18, 2017, 01:34:57 am »
Visual Studio code is the best JavaScript editor I ever used.

Hmm, a 150MB text editor.

Here's an idea. Redo this little Pascal app as an Electron app. All the Pascal does is load a little Web based mapping app into an embedded browser - basically, a dedicated browser that only knows how to do one thing. That should be easy to do as an Electron app. Then create a little 40MB download for us to try out. Note that the Pascal app is only a 139KB download, although for Mac only.

https://macpgmr.github.io/MacXPlatform/WebAppOverview_3.html#EmbeddedBrowser

lainz

  • Hero Member
  • *****
  • Posts: 3179
    • Lainz
Re: Modern UI in Lazarus
« Reply #16 on: April 18, 2017, 01:42:12 am »
Hi Phil that's ok. I will try.

Phil

  • Hero Member
  • *****
  • Posts: 2750
Re: Modern UI in Lazarus
« Reply #17 on: April 18, 2017, 01:46:08 am »
Hi Phil that's ok. I will try.

If you can do that, I might look at trying to add a dynamic library to it when I have some time.



lainz

  • Hero Member
  • *****
  • Posts: 3179
    • Lainz
Re: Modern UI in Lazarus
« Reply #18 on: April 18, 2017, 01:59:14 am »
Hi Phil that's ok. I will try.

If you can do that, I might look at trying to add a dynamic library to it when I have some time.

Ok. If I don't get what this app does I will ask you.

Phil

  • Hero Member
  • *****
  • Posts: 2750
Re: Modern UI in Lazarus
« Reply #19 on: April 18, 2017, 02:14:01 am »
Hi Phil that's ok. I will try.

If you can do that, I might look at trying to add a dynamic library to it when I have some time.

Ok. If I don't get what this app does I will ask you.

The Web app (QxMap) shows how to use the qooxdoo JS UI framework with the OpenLayers JS mapping library. You could dispense with qooxdoo altogether if you can figure out how to integrate OpenLayers with Electron.

Note that the QxMap files could also just be included as part of the Electron app, rather than pulling them from the Web. Same with OpenLayers files (ol.js and ol.css).

The "local" (Pascal) app just uses an embedded WebKit browser to load the Web app.

A variation of QxMap, called QxCast, retrieves data to display on the map by making a request to a FCGI app on a Web server. This FCGI app uses a Pascal dynamic library (ndfd). More details here:

https://macpgmr.github.io/MacXPlatform/PascalDynLibs_3.html#qooxdoo

But if the dynamic library could be included with the Electron app, then it wouldn't need the FCGI app.

Something like that. Hope that makes sense.

lainz

  • Hero Member
  • *****
  • Posts: 3179
    • Lainz
Re: Modern UI in Lazarus
« Reply #20 on: April 18, 2017, 02:58:13 am »
Ok. What I did is to replicate the local pascal app.

The file is 'renderer.js':
Code: Javascript  [Select]
  1. // This file is required by the index.html file and will
  2. // be executed in the renderer process for that window.
  3. // All of the Node.js APIs are available in this process.
  4.  
  5. const qxMapUrl = 'https://macpgmr.github.io/iApps/qxmap/index.html'
  6.  
  7. var locations = [
  8.     {
  9.         name: 'Ouray',
  10.         lat: 38.02,
  11.         lon: -107.67,
  12.         display: '7,792 feet'
  13.     },
  14.     {
  15.         name: 'Silverton',
  16.         lat: 37.81,
  17.         lon: -107.66,
  18.         display: '9,308 feet'
  19.     },
  20.     {
  21.         name: 'Telluride',
  22.         lat: 37.94,
  23.         lon: -107.81,
  24.         display: '8,750 feet'
  25.     }
  26. ]
  27.  
  28. document.location.href = `${qxMapUrl}?locations=${JSON.stringify(locations)}`

That's all to it. But of course we can download that website and run it directly within electron.

This script can be executed for example in chrome console and will work the same as in electron.

These are the steps to get it working under Windows with Electron: (Sorry I only have Windows)

1) Download Electron here (41.1 MB)
https://github.com/electron/electron/releases/download/v1.6.2/electron-v1.6.2-win32-ia32.zip

2) Uncompress it, then in the folder 'resources' create a folder 'app' and put everything from this repository:
https://github.com/electron/electron-quick-start

3) So you have electron_folder/resources/app/renderer.js, in that file paste the code that's up in this post.

4) So you have electron_folder/resources/app/package.json, in that file change this line "name": "electron-quick-start" to read "name": "qxmap" (this is where in Local app data is stored the cache and everything else a browser stores).

Optional:
5) Rename the executable and with a resource editor change the icon / name / version info from the .exe. I use Resource Hacker.

Under mac there's another way to change the icon, under Linux the icon can't be changed.

Phil

  • Hero Member
  • *****
  • Posts: 2750
Re: Modern UI in Lazarus
« Reply #21 on: April 18, 2017, 03:10:03 am »
Ok. What I did is to replicate the local pascal app.

Very nice. I'll take a look when I have some time.

Earlier I downloaded Electron and launched the Electron.app (I'm on Mac). It had a place where you're supposed to drag and drop your app. I had no idea what that means and still don't relative to your instructions, so some investigation is needed (maybe next weekend).

If a dynamic library is included, it would supply the "display" values, rather than hardwiring them the way I did in the example.

lainz

  • Hero Member
  • *****
  • Posts: 3179
    • Lainz
Re: Modern UI in Lazarus
« Reply #22 on: April 18, 2017, 03:49:38 am »
Quote
Earlier I downloaded Electron and launched the Electron.app (I'm on Mac). It had a place where you're supposed to drag and drop your app. I had no idea what that means and still don't relative to your instructions, so some investigation is needed (maybe next weekend).

That's for example if you have the 'app' folder in my instructions somewhere. So you drag that folder to the window and it will run into a separate process.

Seems that on mac you need to follow the steps, but with another folder structure, see here:
https://github.com/electron/electron/blob/master/docs/tutorial/application-distribution.md#application-distribution

Phil

  • Hero Member
  • *****
  • Posts: 2750
Re: Modern UI in Lazarus
« Reply #23 on: April 18, 2017, 04:01:20 am »
That's for example if you have the 'app' folder in my instructions somewhere. So you drag that folder to the window and it will run into a separate process.

Ah yes, I think I see what going on. I had downloaded the "prebuilt binaries". Essentially what you do is customize these with your own "app".

Still, it looks like a minimum installed footprint of 115MB for an Electron app on Mac.


lainz

  • Hero Member
  • *****
  • Posts: 3179
    • Lainz
Re: Modern UI in Lazarus
« Reply #24 on: April 18, 2017, 04:13:57 am »
I've not played too much with it. You need to know that there's database support, file handling and so on. Plus any html, css and javascript you can get online.

All the electron users want to the file size goes down. But seems not possible at this time. At least if I distribute the app with an installer under Windows the user needs to dowload less than 50 MB.

Currently I'm learning on doing web apps, not local web apps like electron ones. If I don't need the user file system everything works fine.

marcov

  • Global Moderator
  • Hero Member
  • *****
  • Posts: 7317
Re: Modern UI in Lazarus
« Reply #25 on: April 18, 2017, 09:33:35 am »
QT is going in the direction of a more web like rendering model too. There might be possibilities there for such GUIs that integrate well with Lazarus.

I don't like distributing components like Chrome that go swiftly through new new versions and have long security bulletins attached to it.

That installer that you make today is outdated tomorrow.
« Last Edit: April 18, 2017, 11:08:49 am by marcov »

Thaddy

  • Hero Member
  • *****
  • Posts: 8515
Re: Modern UI in Lazarus
« Reply #26 on: April 18, 2017, 09:38:38 am »
Borderless panels, a well-chosen set of fonts and hey presto: modern UI? It's all there... E.g. stick to the color tables that Google recommends and you're half way there..
Or am I missing something ??!! (not really)
Read the manuals and if you are a professional get a proper education in computer science. Makes the forum a lot cleaner.

Graeme

  • Hero Member
  • *****
  • Posts: 1430
    • Graeme on the web
Re: Modern UI in Lazarus
« Reply #27 on: April 18, 2017, 11:02:33 am »
Then create a little 40MB download for us to try out.

A 40MB archived file for a text editor is still pretty darn big. EditPad Pro (a commercial text editor I often use) is a 11MB archived download with a ton of functionality, regex engine, theme and scheme engine, included and complete CHM help, build-in FTP client etc. The executable is 9MB, the rest is help and scheme support resources.

My accounting package does even better. It is a full blown accounting package with time management and reporting and is a mere 8MB installed!

Coincidently, both these applications were developed with Delphi.
--
fpGUI Toolkit - a cross-platform GUI toolkit using Free Pascal
http://fpgui.sourceforge.net/

Thaddy

  • Hero Member
  • *****
  • Posts: 8515
Re: Modern UI in Lazarus
« Reply #28 on: April 18, 2017, 11:13:37 am »
Yes, Phil, .... Try Geany...
Read the manuals and if you are a professional get a proper education in computer science. Makes the forum a lot cleaner.

jacmoe

  • Sr. Member
  • ****
  • Posts: 261
    • Jacmoe's Cyber SoapBox
Re: Modern UI in Lazarus
« Reply #29 on: April 18, 2017, 11:24:04 am »
A modern UI ?
Use Qt/GTK and handle the style in your OS.
And you're 90% there.

Using web technology (Electron) is such a hack. Chrome is an OS in itself, .. and what you will get is your small application wrapped in a giant kitchen sink.
more signal - less noise