Jump to content

Recommended Posts

Hi,

i'm currently working on a media project which is caused by its nature partially browser based. 95% of it are made in lazarus and 5% (probably less) is running in a browser. Since i am not quite familiar with javascript it takes longer to achieve everything using js, so my second attempt is  to use sms instead. The application itself is a analyzer for ATSC 3 and it streams the tv signal as DASH transmission via an embedded web server. It also offers tuner related informations and statistics in json format. What i try to achieve is to load the json response from the server and to assemble a tree view with the data i received. The idea is to have the same tree structure like in the original server application).example.thumb.PNG.fa01a5f700fd743466cc6dd29dd0a89c.PNG

Does somebody have a suggestion how to create such a tree view display? I honestly did not thought that it is easier to play a video back, than building a tree with data :wub:

Christian

	
OPERATING MODE	"2"
FREQUENCY (HZ)	"599000000"
BANDWIDTH (HZ)	"6000000"
INTERMEDIATE FREQUENCY (HZ)	"6000000"
RSSI (dBm)	"-59"
MASTER LOCK	"1"
SNR (dB * 100)	"1500"
SIGNAL QUALITY (%)	"30"
BOOTSTRAP DONE	"1"
BOOTSTRAP EASINFO	"0"
BOOTSTRAP MAJOR	"0"
BOOTSTRAP MINOR	"0"
BOOTSTRAP PREAMBLE STRUCTURE	"5"
BOOTSTRAP BSR COEFFICIENT	"2"
LLS VALID BITMASK	"1"
PLP VALID BITMASK	"1"
L1B LOCK	"1"
L1D LOCK	"1"
BASEBAND FRAMES	"66832"
BASEBAND FRAME RF ERRORS	"0"
BASEBAND FRAME CC ERRORS	"1"
BASEBAND FRAME UNCORRECTED RF ERRORS	"96"
BER	"0"
OFFSET (HZ)	"24"
PACKET ERROR	"0"
L1B_FRAME_LENGTH_MODE	"1"
L1B_NUM_SUBFRAMES	"1"
L1B_PREAMBLE_NUM_SYMBOLS	"2"
L1B_L1_DETAIL_FEC_TYPE	"1"
L1B_FIRST_SUB_FFT_SIZE	"0"
L1B_FIRST_SUB_NUM_OFDM_SYMBOLS	"71"
L1B_FIRST_SUB_REDUCED_CARRIERS	"0"
L1B_FIRST_SUB_SCATTERED_PILOT_PATTERN	"2"
L1B_FIRST_SUB_SCATTERED_PILOT_BOOST	"0"
L1B_FIRST_SUB_SBS_FIRST	"1"
L1B_FIRST_SUB_SBS_LAST	"1"
REQUESTED PLP#0	"0"
L1D_GUARD_INTERVAL (PLP#0)	"0"
L1D_PLP_MOD (PLP#0)	"0"
L1D_PLP_COD (PLP#0)	"0"
L1D_FREQUENCY_INTERLEAVER (PLP#0)	"0"
L1D_PLP_TI_MODE (PLP#0)	"0"
PLP0_LAYER_TYPE	"0"
PLP1_LAYER_TYPE	"0"
PLP2_LAYER_TYPE	"0"
PLP3_LAYER_TYPE	"0"

 

Link to post
Share on other sites
  • Moderators

There is a treeview component in the 'native rtl' (demodocum)

See 'JTreeView' under 'Components' in the demo

usage:

    var TreeView1 := JW3TreeView.Create(self);
    TreeView1.SetBounds(0, 0, 250, 200);
    TreeView1.Subject := 'Job roles';

    TreeView1.Add('ceo','','chief executive officer');       //root
    TreeView1.Add('cto', 'ceo','chief technology officer');
    TreeView1.Add('dev1', 'cto','developer 1');
    TreeView1.Add('dev2', 'cto','developer 2');
    TreeView1.Add('dev3', 'cto','developer 3');
    TreeView1.Add('assistent', 'dev2','assistant developer 2');
    TreeView1.Add('cfo', 'ceo','chief financial officer');
    TreeView1.Add('accountant', 'cfo','bean counter');
    TreeView1.Add('cmo', 'ceo','chief marketing officer');

component code

unit JTreeView;

interface

uses
  JElement, JListBox, JPanel;

type
  JW3TreeNode = class
  public
    Node, ParentNode, NodeDescription : String;
    Level : Integer;
    Children : Array of JW3TreeNode;
    Expanded: Boolean;
    Showing: Boolean;
  end;

  JW3TreeView = class(TElement)
  private
    ListBox: JW3ListBox;
    Title : JW3Panel;
    Function  FindNode(ThisNode: string):JW3TreeNode;
    Procedure HideAllChildren(node: JW3TreeNode);
    Procedure Order(node: JW3TreeNode);
    Node : JW3TreeNode;
    Root : JW3TreeNode;
  public
    constructor Create(parent: TElement); virtual;
    Procedure Add(NewNode, ParentNode, NodeDescription: String);
    Procedure ShowTree;
    Subject: String := 'TreeView...';
  end;


implementation

uses Globals;

{ JW3TreeView }

constructor JW3TreeView.Create(parent: TElement);
begin
  inherited Create('div', parent);
  setProperty('background-color', 'white');

  Title := JW3Panel.Create(self);
  Title.SetProperty('background-color','#699BCE');
  Title.SetProperty('color','white');
  Title.SetProperty('border','1px solid white');

  ListBox := JW3ListBox.Create(self);
  ListBox.Top := 25;

  //self.Observe;
  self.OnReadyExecute := procedure(sender: TObject)
  begin
    Title.SetBounds(0,0,width-2,22);
    Title.handle.value := Subject;
    Title.SetProperty('font-size', '0.95em');
    Title.Text := Subject;
    ListBox.Width := self.Width;
    ListBox.Height := self.Height - 25;

    ShowTree;
  end;

end;

Procedure JW3TreeView.Add(NewNode, ParentNode, NodeDescription: string);
begin
//
  Node := JW3TreeNode.Create;
  Node.Node := NewNode;
  Node.ParentNode := ParentNode;
  Node.NodeDescription := NodeDescription;
  Node.Expanded := false;
  Node.Showing := false;
  If ParentNode = '' then
  begin
    Root := Node;
    Node.Level := 1;
    //Node.Expanded := true;    //only when initially displaying all levels 2
    Node.Showing := True;
  end;
  var Parent := JW3TreeNode.Create;
  Parent := FindNode(ParentNode);
  If assigned(Parent) then
  begin
    var temp := JW3TreeNode.Create;            //  eliminate unwanted double ups
    Temp := FindNode(NewNode);
    If (not assigned(temp)) or (temp.ParentNode <> parent.node) then begin
      Parent.Children.push(Node);
      Node.Level := Parent.Level + 1;
      //If node.level = 2 then node.Showing := true;   //see line 82
    end;
  end;

end;

Function JW3TreeView.FindNode(ThisNode:string):JW3TreeNode;
begin
  var queue: Array of JW3TreeNode = [Root];
  while (queue.length > 0) do
  begin
    var node := queue[0];
    queue.delete(0);
    if node.Node = ThisNode then
      result := node;
    for var i := 0 to node.Children.length - 1 do
    begin
      queue.push(node.Children[i]);
    end;
  end;
end;

Procedure JW3TreeView.HideAllChildren(node: JW3TreeNode);
begin

  Node.Showing := false;
  Node.Expanded := false;

  for var i := 0 to node.Children.length -1 do
  begin
    HideAllChildren(node.Children[i]);
  end;
end;

Procedure JW3TreeView.ShowTree;
begin
  ListBox.Clear;
  Order(Root);
end;

Procedure JW3TreeView.Order(node: JW3TreeNode);
begin
  if Node.Showing then begin
    var Item := JW3Panel.Create(Self);
    Item.SetAttribute('type','text');
    Item.setProperty('background-color', 'whitesmoke');
    Item.SetProperty('font-size', '0.85em');
    Item.Height := 21;

    var prefix : string := '';
    If node.children.count > 0
      then prefix := '▸ '               //triangle right
      else prefix := '  ▫ ';  //white square
    If node.children.count > 0 then
      If node.Children[0].Showing then
        prefix := '▾ ';                 //triangle down

    var s: string := '';
    For var i := 1 to node.Level do begin
      S := S + '  ';
    end;
    S := S + prefix;

    Item.SetinnerHTML(S + node.NodeDescription);
    Item.tag := node.NodeDescription;

    ListBox.Add(Item);

    Item.OnClick := procedure(Sender:TObject)
    begin
      Subject := (Sender as TElement).tag;
      Title.Text := Subject;

      node.expanded := not node.expanded;
      For var j := 0 to Node.Children.Count -1 do
        Node.Children[j].Showing := Node.Expanded;
      If Node.Expanded = false then
      begin
        HideAllChildren(Node);
        Node.Showing := true;
      end;
      ShowTree;
    end;

    Item.handle.ondblclick := procedure
    begin
      window.postMessage([self.handle.id,'dblclick',subject],'*');  //= title.handle.value
    end;

  end;

  for var i := 0 to node.Children.length -1 do
  begin
    Order(node.Children[i]);
  end;
end;

end.


//
The same guts, in regular RTL code format, is used here

(https://www.lynkfs.com/Experiments/Menu/Copperhead.MenuNodes.pas)

and walking the tree

Procedure Traverse(node: TCHMenuNode);
    begin
      writeln(node.NodeDescription)

      for var i := 0 to node.Children.length -1 do
      begin
        Traverse(node.Children[i]);
      end;
    end;

  Traverse(MenuNodes.Root);

 

Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...