HTML5 in general - Quartex Pascal Forum

Mediaplayer

Hackbart — Fri, 31 Jan 2025 09:59:12 +0000

Hi,

you might be wondering how to create a media player. Technically, all you need is a simple video element. However, in most cases, additional functionality is required, which is why libraries like Shaka Player or DashJS are commonly used.

This class is designed to help you build a media player. While you could theoretically place everything inside TQTXVideo.

Due to nostalgic reasons I chose to structure it similarly to Delphi, where the player logic and the player window are separated into different classes.

A sample implementation would look like this:

var LVideo = TQTXVideo.Create(self, procedure(AVideoElement: TQTXVideo)
  begin
   var LPlayer = TQTXBasePlayer.createDefault(AVideoElement);
   LPlayer.OpenMedia('https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4');
   AVideoElement.Style.width := '100%';
   AVideoElement.Style.height := '100%';
   LPlayer.OnLoadedData := procedure(Sender: TObject)
   begin
    LPlayer.Play();
   end;
  end);

The whole unit is the following one.

unit qtx.mediaplayer;

interface

uses
  qtx.sysutils, qtx.classes, qtx.dom.widgets, qtx.dom.types;


type
  TQTXVideo = class;
  TQTXVideoConstructor = procedure (AVideoElement: TQTXVideo);

  TQTXVideo = class(TQTXWidget)
  protected
   FVideoHandle: THandle;
  public
   constructor Create(AOwner: TQTXComponent; CB: TQTXVideoConstructor); reintroduce; virtual;
  end;


  TQTXBasePlayer = class
  protected
   FVideoHandle: THandle;
   FOnLoadedData: TNotifyEvent;
   FPoster: String;

   procedure InitializePlayer;virtual;
   procedure SetPoster(const AValue: String);virtual;
  public

   constructor Create(const AVideo: TQTXVideo);

   procedure Play;virtual;
   procedure Stop;virtual;
   procedure OpenMedia(AMediaFile: String; ALicenseServer, ACertServer: String = '');virtual;
   function IsPlaying: Boolean;

   property OnLoadedData: TNotifyEvent read FOnLoadedData write FOnLoadedData;
   property Poster: String read FPoster write SetPoster;

   class function createDefault(const AVideo: TQTXVideo): TQTXBasePlayer;
  end;

  TQTXShakaPlayer = class(TQTXBasePlayer)
  private
   FVideoPlayer: THandle;
  protected
   procedure InitializePlayer;override;
  public
   procedure OpenMedia(AMediaFile: String; ALicenseServer, ACertServer: String = '');override;
  end;

  TQTXShakaUIPlayer = class(TQTXShakaPlayer)
  protected
   FShakaUI: THandle;
   procedure InitializePlayer;override;
   procedure SetPoster(const AValue: String);override;
  end;

implementation

var FInitialized: Boolean = false;
    document external "document": JDocument;

{ TQTXBasePlayer }
class function TQTXBasePlayer.createDefault(const AVideo: TQTXVideo): TQTXBasePlayer;
begin
 result := TQTXShakaUIPlayer.create(AVideo);
end;

constructor TQTXBasePlayer.Create(const AVideo: TQTXVideo);
begin
 FVideoHandle := AVideo.FVideoHandle;
 InitializePlayer;
end;

procedure TQTXBasePlayer.Play;
begin
 if FVideoHandle <> nil then
  FVideoHandle.play();
end;

procedure TQTXBasePlayer.Stop;
begin
 if FVideoHandle <> nil then
  FVideoHandle.pause();
end;

procedure TQTXBasePlayer.InitializePlayer;
begin
end;

procedure TQTXBasePlayer.OpenMedia(AMediaFile: String; ALicenseServer, ACertServer:String = '');
begin
 if FVideoHandle <> nil then
   FVideoHandle.src := AMediaFile;
end;

function TQTXBasePlayer.IsPlaying(): Boolean;
begin
 result := (FVideoHandle <> nil) and (not FVideoHandle.paused);
end;

procedure TQTXBasePlayer.SetPoster(const AValue: String);
begin
 FPoster := AValue;
end;

{ TQTXShakaPlayer }

procedure TQTXShakaPlayer.InitializePlayer;

 procedure doLoadedData();
 begin
  if assigned(FOnLoadedData) then FOnLoadedData(self);
 end;

 procedure performError(AError: String);
 begin
  Stop;
 end;

begin
 if not FInitialized then
 begin
  FInitialized := true;
  asm
   shaka.polyfill.installAll();
   shaka.polyfill.PatchedMediaKeysApple.install();
  end;
 end;

 asm
  const videoElement = @self.FVideoHandle;
  videoElement.onloadeddata = @doLoadedData;

    var currentTime = [];
    videoElement.addEventListener("timeupdate", function() {
      if (!videoElement.seeking) {
       currentTime = videoElement.currentTime;
      }
    });

    let player;
    if (shaka.Player.isBrowserSupported())
    {
         player = new shaka.Player();
         player.attach(videoElement);
         player.configure('preferredTextLanguage', '');
         player.addEventListener('error', function(event) {
          var error = event.detail;
          @performError(error.code + ' - ' + error.message);
         });

         videoElement.player = player;

         @self.FVideoPlayer = player;
    }
 end;
end;

procedure TQTXShakaPlayer.OpenMedia(AMediaFile: String; ALicenseServer, ACertServer: String='');
begin
 asm
  const player = @FVideoPlayer;
  const videoElement = @FVideoHandle;

  const playerConfig = {
        manifest: {
          dash: {
            ignoreMinBufferTime: true,
          },
          defaultPresentationDelay: 0
        },
        streaming: {
          lowLatencyMode: true,
          inaccurateManifestTolerance: 0,
          rebufferingGoal: 0.1,
          preferNativeHls: true,
        },
        abr: {
          enabled: true,
          useNetworkInformation: false,
          defaultBandwidthEstimate: 1000000 / 240,
          switchInterval: 120,
        },

      };

  if (@ALicenseServer !== "null" && @ALicenseServer !== null) {
        playerConfig.drm = {
          advanced: {
            "com.apple.fps": {
              serverCertificateUri: @ACertServer
            }
          },
          servers: {
            "com.widevine.alpha": @ALicenseServer,
            "com.apple.fps": @ALicenseServer,
          },
        };
      }

  videoElement.playbackRate = 1.0;

  player.configure(playerConfig);
  player.load(@AMediaFile);
 end;
end;


{ TQTXShakaUIPlayer }
procedure TQTXShakaUIPlayer.InitializePlayer;
begin
 inherited InitializePlayer;
 asm
  const video = @FVideoHandle;
  video.controls = false;
  video.style.width = '100%';

  const player = @FVideoPlayer;
  player.configure('ui.addPictureInPictureButton', true);

  video.parentElement.addEventListener('keyup', function(event) {
      if (!video.paused && event.key.toLowerCase() === 'f') {
        event.preventDefault();
        video.requestFullscreen();
      }
  });

  const ui = new shaka.ui.Overlay(player, video.parentElement, video);
  const config = {
      'addSeekBar': true,
      'seekBarColors': {
        base: 'rgba(255,255,255,.2)',
        buffered: 'rgba(255,255,255,.4)',
        played: '#2f80ed',
      }
    }
  ui.configure(config);
  @FShakaUI = ui;
 end;
end;

procedure TQTXShakaUIPlayer.SetPoster(const AValue: String);
begin
 inherited SetPoster(AValue);
 FVideoHandle.Poster := AValue;
end;

{ TQTXVideo }
constructor TQTXVideo.Create(AOwner: TQTXComponent; CB: TQTXVideoConstructor);
begin
  inherited Create(AOwner, procedure(Widget: TQTXWidget)
  begin
   FVideoHandle := document.createElement('video');
   Widget.Handle.appendChild(FVideoHandle);
   PositionMode := TQTXWidgetPositionMode.cpAbsolute;
   if assigned(CB) then CB(self);
  end);
end;

(* Example Player

  Add this to your index.html

   
   
   


*)

end.

Sidemenu

Hackbart — Tue, 18 Jun 2024 20:09:22 +0000

Jons Desktop system lacks on one small thing. You get confused by the buttons if you have more than a bunch of icons. The attached unit has a slim side menu which tries to solve that issue.

The usage is quite simple:

var FToolbar := TQTXSideMenuList.Create( self, procedure (Toolbar: TQTXSideMenuList)
      begin
        Toolbar.RightMenu := true;
        Toolbar.Add(false, 'fa-chart-simple', 'Auswertungen', nil);
        Toolbar.Add(false, 'fa-tv', 'Alle Sender', nil);
        Toolbar.Add(false, 'fa-cube', 'Paketübersicht', nil);
        Toolbar.Add(false, 'fa-home', 'Haushaltsverwaltung', nil);

        Toolbar.Add(false, 'fa-user-group', 'Gruppenverwaltung', nil);
        Toolbar.Add(false, 'fa-globe', 'Netzwerke verwalten', nil);
        Toolbar.Add(false, 'fa-cogs', ' Portal-Benutzerverwaltung', nil);
        Toolbar.Add(false, 'fa-house-signal', 'Aktive Verbindungen', nil);

        Toolbar.Add(false, 'fa-users', 'Kundenaktivitäten', nil);
        Toolbar.Add(false, 'fa-film', 'Apps verwalten', nil);
        Toolbar.Add(false, 'fa-info', 'Änderungsprotokoll', nil);
        Toolbar.Add(false, 'fa-newspaper', 'Nachrichtenverwaltung', nil);

        Toolbar.Add(true, 'fa-power-off', 'Abmelden', nil);
      end);

desktop.sidemenu.pas_.zip

QR Code Generator

Hackbart — Fri, 07 Jun 2024 19:32:34 +0000

If you ever need to generate a QR code you might check the following project: https://github.com/jeromeetienne/jquery-qrcode
The usage is quite simple, create a qrCode class and render it into an element. For example like this.

function generateQRCode(const AText: String): String;
begin
 asm
            var tempDiv = document.createElement("div");
            document.body.appendChild(tempDiv);
            var qrCode = new QRCode(tempDiv, {
                text: @AText,
                width: 256,
                height: 256,
                correctLevel: QRCode.CorrectLevel.H
            });

            setTimeout(() => {
                var qrImage = tempDiv.getElementsByTagName("img");
                var canvas = document.createElement("canvas");
                document.body.appendChild(canvas);
                var context = canvas.getContext("2d");
                canvas.width = qrImage.width;
                canvas.height = qrImage.height;
                context.drawImage(qrImage, 0, 0);

                var base64Jpg = canvas.toDataURL("image/jpeg");
                @result = base64Jpg;

                canvas.remove();
                tempDiv.remove();
            }, 100);
  end;
end;

Sidemenu

Hackbart — Wed, 17 Apr 2024 18:58:45 +0000

Hi,

the attached class is based on this idea: https://codepen.io/JFarrow/pen/nJgRga

You easily can create the same menu using this code:

 var LList = TQTXSideMenuList.Create(self, nil);

  LList.Add(false,'fa-home', 'Community Dashboard', nil);
  LList.Add(false,'fa-globe', 'Global Surveyors', nil);
  LList.Add(false,'fa-comments', 'Group Hub Forums', nil);
  LList.Add(false,'fa-camera-retro', 'Survey Photos', nil);
  LList.Add(false,'fa-film', 'Surveying Tutorials', nil);
  LList.Add(false,'fa-book', 'Surveying Jobs', nil);
  LList.Add(false,'fa-cogs', 'Tools & Resources', nil);
  LList.Add(false,'fa-map-marker', 'Member Map', nil);
  LList.Add(false,'fa-info', 'Documentation', nil);

  LList.Add(true, 'fa-power-off', 'Logout', nil);

I tried to keep it simple and not using any asm instructions for it. In my case I will expand in order to arrange the menu located either on the left or right side of a page.

Christian

sidemenu.zip

QR Code Scanner

Hackbart — Mon, 29 Jan 2024 07:31:16 +0000

Hi, this is a small snippet and shows how to use the QR code scanner from here:

https://raw.githubusercontent.com/nimiq/qr-scanner/master/qr-scanner.legacy.min.js

unit qrscanner;

interface

uses
  qtx.sysutils, qtx.classes, qtx.dom.widgets, qtx.dom.types;

type
 TQTXQRScanner = class;
 TQTXQRScannerConstructor = procedure (QTXScanner: TQTXQRScanner);

 TOnGetQRCode = procedure(Sender: TObject; Result: String);

 TQTXQRScanner = class(TQTXWidget)
 private
  FOnGetQRCode: TOnGetQRCode;
  FVideoElement: THandle;
  FScanner: THandle;
 public
  constructor Create(AOwner: TQTXComponent; CB: TQTXQRScannerConstructor); reintroduce; virtual;

  property OnGetQRCode: TOnGetQRCode read FOnGetQRCode write FOnGetQRCode;
 end;

implementation

constructor TQTXQRScanner.Create(AOwner: TQTXComponent; CB: TQTXQRScannerConstructor);

 procedure Callback(AResult: Variant);
 begin
  if assigned(FOnGetQRCode) then FOnGetQRCode(Self, AResult.data);
 end;

begin
  inherited Create(AOwner, procedure(Widget: TQTXWidget)
  begin
   Style.width := '100%';
   Style.height := '100%';

   asm
    const video = document.createElement('video');
    video.id = 'qr-video';

    @self.FVideoElement = video;
   end;
   Widget.Handle.appendChild(FVideoElement);
   if assigned(CB) then CB(self);

   TQTXDispatch.Execute(procedure()
   begin
    asm
      const scanner = new QrScanner(video, result => {
         @Callback(result);
        }, {
          highlightScanRegion: true,
          highlightCodeOutline: true,
        });

     @self.FScanner = scanner;
     scanner.start();
    end;
   end,1000);
  end);
end;

end.

Generate MD5

Hackbart — Tue, 21 Nov 2023 19:40:34 +0000

Hi,

i am not sure if you ever needed to create an md5 hash function, but you might find this one helpful:

function MD5(const AInput: String): String;
begin
 asm
    var hc="0123456789abcdef";
    function rh(n) {var j,s="";for(j=0;j<=3;j++) s+=hc.charAt((n>>(j*8+4))&0x0F)+hc.charAt((n>>(j*8))&0x0F);return s;}
    function ad(x,y) {var l=(x & 0xFFFF)+(y & 0xFFFF);var m=(x>>16)+(y>>16)+(l>>16);return (m<<16)|(l & 0xFFFF);}
    function rl(n,c)            {return (n<>>(32-c));}
    function cm(q,a,b,x,s,t)    {return ad(rl(ad(ad(a,q),ad(x,t)),s),b);}
    function ff(a,b,c,d,x,s,t)  {return cm((b & c)|((~b) & d),a,b,x,s,t);}
    function gg(a,b,c,d,x,s,t)  {return cm((b & d)|(c & (~d)),a,b,x,s,t);}
    function hh(a,b,c,d,x,s,t)  {return cm(b^c^d,a,b,x,s,t);}
    function ii(a,b,c,d,x,s,t)  {return cm(c^(b|(~d)),a,b,x,s,t);}
    function sb(x) {
        var i;var nblk=((x.length+8)>>6)+1;var blks=new Array(nblk*16);for(i=0;i
Frankly I dislike the fact to use third party libraries for basic things and this one is not grown directly on "my dung", but it works and fulfills my requirements.
Cheers
Christian

Clock Component

Hackbart — Fri, 13 Oct 2023 08:27:51 +0000

Hi,

I've developed a compact clock class for a side project. The main code is written in ASM-JavaScript Blocks, and I've utilized CSS for rendering. While it may not be the optimal approach for a Qtx framework, I've chosen to use JavaScript for most of my internal processes in most of my projects. Maybe somebody has the nerve to wrap this into a package?

The usage itself is extremely simple. Just put the Watch on the Form and add a timer to update the hour and minute pointers.

var LWatch := TQTXWatch.create(self, procedure(Watch: TQTXWatch)
  begin
      var LTimer := TQTXEventRepeater.Create(
      function(Sender: TQTXCustomRepeater): TQTXRepeatResult
       begin
         Watch.SetTime(now);
         result := TQTXRepeatResult.rrContinue;
       end, 1000);
  end);

Christian

qtx.dom_.watch_.pas_.zip

TODO List Example

Hackbart — Thu, 10 Aug 2023 09:05:01 +0000

Hi, I wrote a simple TODO List Widget. Maybe somebody will find it as useful as I do :)

unit qtx.dom.todo;

interface

uses
  qtx.sysutils, qtx.classes, qtx.dom.widgets;

type
 TQTXTodoList = class;
 TQTXTodoListConstructor = procedure (Dashboard: TQTXTodoList);

  TQTXTodoList = class(TQTXWidget)
  private
   FItems: Array of TQTXWidget;
  public
   constructor Create(AOwner: TQTXComponent; CB: TQTXTodoListConstructor); reintroduce; virtual;
   procedure Add(ADescription: String);
   procedure Clear;

   property  Items: TQTXWidget read ( FItems );
   property  ItemCount: integer read (FItems.length);
  end;

implementation uses qtx.dom.stylesheet;

constructor TQTXTodoList.Create(AOwner: TQTXComponent; CB: TQTXTodoListConstructor);
begin
  inherited Create(AOwner, procedure(Widget: TQTXWidget)
  begin
    TQTXWidget.create(AOwner, procedure(Widget: TQTXWidget)
    begin
       Widget.InnerHtml := #'
        
      ';
    end);

    Widget.Width := 500;
    Widget.Height := 300;
    Widget.Style.overflowY := 'auto';
    if assigned(CB) then CB(self);
  end);
end;

procedure TQTXTodoList.Clear;
begin
 FItems.Clear;
end;


procedure TQTXTodoList.Add(ADescription: String);
begin
 var LItem = TQTXWidget.Create(self, procedure(Widget: TQTXWidget)
 begin
  Widget.CssClasses.ClassRemove('TQTXWidget');
  Widget.DisplayMode := TQTXWidgetDisplayMode.cdBlock;
  Widget.InnerHtml :=   ''+
  '  '+
  '  '+
  '  '+ADescription+''+
  '';
 end);
 FItems.Push(LItem);
end;

initialization
begin
 var lSheet := TQTXCSSRules.Global;
  lSheet.AddStyles(
   #'
      .TQTXTodoList {
        background: #FFF;
        font-size: 20px;
        max-width: 15em;
        margin: auto;
        padding: 0.5em 1em;
        box-shadow: 0 5px 30px rgba(0, 0, 0, 0.2);
      }
      .TQTXTodoList::-webkit-scrollbar {
        width: 8px;
      }

      .TQTXTodoList::-webkit-scrollbar-track {
        background-color: transparent; /* Hintergrundfarbe der Scrollleisten-Spur */
      }

      .TQTXTodoList::-webkit-scrollbar-thumb {
        background-color: rgba(0, 0, 0, 0.2); /* Farbe des Scrollleisten-Griffs */
      }

      .TQTXTodo {
        display: block;
        position: relative;
        padding: 1em 1em 1em 16%;
        margin: 0 auto;
        cursor: pointer;
        border-bottom: solid 1px #ddd;
      }
      .TQTXTodo:last-child {
        border-bottom: none;
      }
      .TQTXTodoState {
        position: absolute;
        top: 0;
        left: 0;
        opacity: 0;
      }
      .TQTXTodoText {
        color: #135156;
        transition: all 0.4s linear 0.4s;
      }
      .TQTXTodoIcon {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        width: 100%;
        height: auto;
        margin: auto;
        fill: none;
        stroke: #27FDC7;
        stroke-width: 2;
        stroke-linejoin: round;
        stroke-linecap: round;
      }
      .TQTXTodoLine,
      .TQTXTodoBox,
      .TQTXTodoCheck {
        transition: stroke-dashoffset 0.8s cubic-bezier(0.9, 0, 0.5, 1);
      }
      .TQTXTodoCircle {
        stroke: #27FDC7;
        stroke-dasharray: 1 6;
        stroke-width: 0;
        transform-origin: 13.5px 12.5px;
        transform: scale(0.4) rotate(0deg);
        -webkit-animation: none 0.8s linear;
                animation: none 0.8s linear;
      }
      .TQTXTodoBox {
        stroke-dasharray: 56.1053, 56.1053;
        stroke-dashoffset: 0;
        transition-delay: 0.16s;
      }
      .TQTXTodoCheck {
        stroke: #27FDC7;
        stroke-dasharray: 9.8995, 9.8995;
        stroke-dashoffset: 9.8995;
        transition-duration: 0.32s;
      }
      .TQTXTodoLine {
        stroke-dasharray: 168, 1684;
        stroke-dashoffset: 168;
      }
      .TQTXTodoCircle {
        -webkit-animation-delay: 0.56s;
                animation-delay: 0.56s;
        -webkit-animation-duration: 0.56s;
                animation-duration: 0.56s;
      }
      .TQTXTodoState:checked ~ .TQTXTodoText {
        transition-delay: 0s;
        color: #5EBEC1;
        opacity: 0.6;
      }
      .TQTXTodoState:checked ~ .TQTXTodoIcon .TQTXTodoBox {
        stroke-dashoffset: 56.1053;
        transition-delay: 0s;
      }
      .TQTXTodoState:checked ~ .TQTXTodoIcon .TQTXTodoLine {
        stroke-dashoffset: -8;
      }
      .TQTXTodoState:checked ~ .TQTXTodoIcon .TQTXTodoCheck {
        stroke-dashoffset: 0;
        transition-delay: 0.48s;
      }
      .TQTXTodoState:checked ~ .TQTXTodoIcon .TQTXTodoCircle {
        -webkit-animation-name: explode;
                animation-name: explode;
      }
   ');
end;
end.

Regards,

Christian

Diary Class Example

Hackbart — Sun, 21 May 2023 18:41:23 +0000

Hi,

I built a new small project to test grids aligning automatically depending on the available browser dimension. I wrapped this in a small Widget. Feel free to use or better to improve it.

Diary.zip

Unordered List Example

Hackbart — Mon, 15 May 2023 09:36:45 +0000

The attached example uses

...

I am not sure if it is on purpose, or just forgotten. In the past I used these lists to build menus, so I wrote two tiny classes and a simple example for testing. It should be wrapped in a class I guess, but so far a simple:

TQTXDOMUList.Create(self, procedure(List: TQTXDOMUList)
  begin
   for var i := 0 to high(C_Items) do
    TQTXDOMLItem.Create(List, procedure(Item: TQTXDOMLItem)
    begin
     Item.InnerHtml := C_Items;
    end);
  end);

does the job too.

UnorderedList.zip