Recent

Author Topic: Best way to change HTML content in real time  (Read 682 times)

Mr.Madguy

  • Hero Member
  • *****
  • Posts: 603
Best way to change HTML content in real time
« on: September 25, 2020, 06:01:00 am »
As you know, I currently use streaming to show image on 3 TVs via 3 computers from one computer. But I don't like this solution. It causes too much load on server's CPU. Because it needs to render 1920x1080 video in real time. Due to this reason server can't render more than one video at once. And I can be asked to render individual picture for every TV at any moment. First I wanted to make some simple program, that would use TImage and PasLibVLC. Because at the end I currently need just two things: slide-show and video. But it would be inventing bicycle. And therefore I decided to use embedded Chromium instead.

Problem is - I'm not familiar with Web technologies. It's not hard to make static HTML page with slide-show and video on it. There are many HTML5/CSS guides in Internet. It's not hard to setup HTTP server. What is hard for me - is to refresh page in browser without using VNC to reload browser on all 3 computers. How can I signal to browser and force it to refresh page via existing tools, i.e. HTTP server?

My current idea is - to use some bash script to store update time stamp in my static HTTP page and some XML/JSON file near it, load this file every minute via AJAX, compare two time stamps and reload page, if they don't match. But may be there is better and easier way to do it? I just don't know, what capabilities current Web technologies have.

Or may be I shouldn't use browser itself to do it? May be it's better to load this XML/JSON via Pascal and force browser to reload page programmatically?
« Last Edit: September 25, 2020, 06:05:41 am by Mr.Madguy »
DynamicData 3.0 is released!
Since now development is frozen - only optimization passes will be made at some point.
Lack of multiple inheritance turns it into abomination.

trev

  • Global Moderator
  • Hero Member
  • *****
  • Posts: 1062
  • Former Delphi 1-7, 10.2 User
Re: Best way to change HTML content in real time
« Reply #1 on: September 25, 2020, 06:42:29 am »
If you simply need to have a page refresh itself every X number of seconds, then you can simply include:

<META HTTP-EQUIV=refresh CONTENT='X;url=http://xxx/xxx.html'>

in the page.
o Lazarus v2.1.0 r63871, FPC v3.3.1 r47164, macOS 10.14.6, Xcode 11.3.1
o Lazarus v2.1.0 r64160, FPC v3.3.1 Nov 27 21:16:31, macOS 11.0.1 (aarch64), Xcode 12.2
o Lazarus v2.1.0 r61574, FPC v3.3.1 r42318, FreeBSD 12.1 amd64 (VMware VM)
o Lazarus v2.1.0 r61574, FPC v3.0.4, Ubuntu 20.04 (PD VM)

Mr.Madguy

  • Hero Member
  • *****
  • Posts: 603
Re: Best way to change HTML content in real time
« Reply #2 on: September 25, 2020, 07:44:09 am »
If you simply need to have a page refresh itself every X number of seconds, then you can simply include:

<META HTTP-EQUIV=refresh CONTENT='X;url=http://xxx/xxx.html'>

in the page.
I don't think it's good idea to just refresh page every X seconds, because that will interrupt animations and videos. I need to refresh only when content has changes.

I will try to do it in Pascal. That will be more reliable, I guess.

How to beat "Unsupported CEF library version" error? I can't find any information about required CEF version inside fpCEF3. How to determine, what version is required? I try to use latest one.
DynamicData 3.0 is released!
Since now development is frozen - only optimization passes will be made at some point.
Lack of multiple inheritance turns it into abomination.

ps

  • Full Member
  • ***
  • Posts: 131
    • CSS
Re: Best way to change HTML content in real time
« Reply #3 on: September 25, 2020, 08:57:09 am »
you can do this very simple with Pas2js target.

Code: Pascal  [Select][+][-]
  1.  window.setInterval(@MyUpdateProc, 5000); // check every 5 sec.  

Code: Pascal  [Select][+][-]
  1. procedure MyUpdateProc;
  2. var
  3.   xhr : TJSXMLHttpRequest;
  4. begin
  5.   xhr := TJSXMLHttpRequest.New;
  6.   xhr.addEventListener('load',TJSRawEventHandler( procedure (event: TEventListenerEvent)
  7.     begin
  8.       // logic to replace content on webpage
  9.        xhr := TJSXMLHttpRequest(event.target)
  10.        TJSHTMLElement(document.getElementById('YOUR_ID_IN_THML')).innerText := xhr.responseText;
  11.     end));
  12.   xhr.open('PUT', 'URLTOGETDATA');
  13.   xhr.setRequestHeader('Content-Type', 'application/json;charset=UTF-8');
  14.   xhr.send('REQUEST BODY HERE');
  15. end;


Code: Text  [Select][+][-]
  1. <body>
  2.   <h1>My simple refresh screen example</h1>
  3.   <p id="YOUR_ID_IN_THML"></p>
  4.   <script>rtl.run();</script>
  5. </body>
  6. </html>
« Last Edit: September 25, 2020, 08:58:50 am by ps »
Small simple CSS/box model implementation: https://github.com/pst2d/csscontrols/tree/dev

Mr.Madguy

  • Hero Member
  • *****
  • Posts: 603
Re: Best way to change HTML content in real time
« Reply #4 on: September 25, 2020, 09:21:18 am »
Ok, I'll try. Browser works. I just needed to load CEF binaries with fpCEF3 version - not Chromium version. But currently I can't load anything, but about:blank. I call Load('URL'), but nothing happens. What can be wrong?
DynamicData 3.0 is released!
Since now development is frozen - only optimization passes will be made at some point.
Lack of multiple inheritance turns it into abomination.

Mr.Madguy

  • Hero Member
  • *****
  • Posts: 603
Re: Best way to change HTML content in real time
« Reply #5 on: September 25, 2020, 04:43:47 pm »
Ok. Overall it works. It just needs more testing before finally replacing old system. Approach is very simple. I have test directory, where test HTMLs are stored. And three project directories. When I need to deploy them - I use deploy bash script, that creates subdirectories with timestamp names and stores this timestamps in special file. Every client just checks this file and reads timestamps. If "http://host/timestamp/Index.html" differs from currently opened page - new page is opened.

But I have problems with that bash script. May be it's due to running it with root privileges. When I try to run it "NC-style", i.e. just run MC, go to proper directory, Ctrl+Enter it, add parameters, bash just says "bash: deploy.sh: Command not found". I need to go to that directory and specify full paths every time, i.e. something like "bash /var/www/html/Test/deploy.sh Site1". Why it works this way?
DynamicData 3.0 is released!
Since now development is frozen - only optimization passes will be made at some point.
Lack of multiple inheritance turns it into abomination.

lucamar

  • Hero Member
  • *****
  • Posts: 3227
Re: Best way to change HTML content in real time
« Reply #6 on: September 25, 2020, 06:29:45 pm »
I'm not quite sure how MC does it but, might it be because it isn't in the path? Have you tried launching it as "./deploy.sh Site1"?
Turbo Pascal 3 CP/M - Amstrad PCW 8256 (512 KB !!!) :P
Lazarus/FPC 2.0.8/3.0.4 & 2.0.10/3.2.0 - 32/64 bits on:
(K|L|X)Ubuntu 12..18, Windows XP, 7, 10 and various DOSes.

zamronypj

  • Full Member
  • ***
  • Posts: 104
    • Fano Framework, Free Pascal web application framework
Re: Best way to change HTML content in real time
« Reply #7 on: September 25, 2020, 07:32:46 pm »
As you know, I currently use streaming to show image on 3 TVs via 3 computers from one computer. But I don't like this solution. It causes too much load on server's CPU. Because it needs to render 1920x1080 video in real time.

if your goal is to share display of one computer to one or more displays via physical cable, maybe you should use vga splitter.
Fano Framework, Free Pascal web application framework https://fanoframework.github.io
Personal Projects https://v3.juhara.com
Github https://github.com/zamronypj

Mr.Madguy

  • Hero Member
  • *****
  • Posts: 603
Re: Best way to change HTML content in real time
« Reply #8 on: September 25, 2020, 09:57:50 pm »
if your goal is to share display of one computer to one or more displays via physical cable, maybe you should use vga splitter.
No, goal is to show different pictures on different TVs. Otherwise we wouldn't need to buy 3 mini-PCs for this purpose. There actually 5 TVs, i.e. two of them are already connected via HDMI splitters. And it's possible, that there will be 5 more of them in a future.
I'm not quite sure how MC does it but, might it be because it isn't in the path? Have you tried launching it as "./deploy.sh Site1"?
Dunno. I suspect, that this folders can have some sort of special access rights, so I shouldn't put any scripts there. But I'll try. Life isn't easy, when you use Linux. Some small nuances make things counter-intuitive.
« Last Edit: September 25, 2020, 10:01:31 pm by Mr.Madguy »
DynamicData 3.0 is released!
Since now development is frozen - only optimization passes will be made at some point.
Lack of multiple inheritance turns it into abomination.

 

TinyPortal © 2005-2018