Jump to content

quanliking

uniGUI Subscriber
  • Posts

    16
  • Joined

  • Last visited

Posts posted by quanliking

  1. Thanks, Sherzod, irigsoft

    I am use sgcWebSocket for MQTT communication, I can not give the example by now.

    because sgcWebSocket publish event handler can not execute the playsound logic right(can not hear sound), so I put a timer with a MainForm variable(not global variable) named 'IsAudioOn', where 'IsAudioOn' is true, timer play sound.

    It seem no problem at the surface, but I have 64 win10 terminals, and I find only part of terminals play sound, others could play sounds only after I touch the physical 'volume control key' with my hand. 

    It is weird. I tried many times and reached a conclusion that that browser play sound is not reliable when you have many devices to play sounds, not work every time.

    Now I have Client + Browser architecture, Client play sounds with sgcWebSocket MQTT for communications and Browser embed in Client do business logic with sgcWebSocket MQTT for communications.It is compromise that part business logic(play sound)move to Client, but it is reliable.

     

      

        

  2. I am developing a 'Service evaluation system' use uniGUI.

    I tried to modify example "HTML5 Audio", but it not work. I can hear sound by click the button with my finger, but can not hear sound by triggering by an event, for example MQTT publish event.I think it is Chrome browser js restrictions.

    Can anybody provide examples?  Thanks.

  3.  

    Thanks Majori, iORM looks great and in active development.

    Few MVVM for delphi framework give uniGUI samples, they only provide VCL/FMX. So we have difficult to test with uniGUI.

     

    iORM:

    MVVM support components

    Dependency Injection Container

    ...

     

    Samples:

    https://github.com/mauriziodm/iORM/tree/master/Samples/BOM_MVVM_CrossFramework/uniGUI

    https://github.com/mauriziodm/iORM/tree/master/Samples/PhoneContacts_MVVM_CrossFramework/uniGUI

    https://github.com/mauriziodm/iORM/tree/master/Samples/PhoneContacts_MVVM_CrossFramework/uniGUI_mobile

    ...

     

    I am happy to learn it.

  4. Hi Eric,

     

    First,sorry I am not pro in design patterns and amateur in uniGUI, if I have time I will try to create more components interfaces.

     

    I am also studying MVVP in Delphi and will provide sample code for uniGUI soon.

     

    There is too many MVC, MVP, MVVM...frameworks, each has its Pros and Cons,hard to select, I wish everyone find a framework fit his/her need and make life easy.

  5. :) For you guys like MVP pattern, welcome to improve the samples below and add more uniGUI components. Only realize UniEdit and UniComboBox components.

     

    References:

    Eduardo:

    http://forums.unigui.com/index.php?/topic/4151-tms-aurelius-livebinding-unigui-vclfmx/?hl=mvp

     

    Daniele Teti's programming blog:

    http://www.danieleteti.it/category/programming/design-patterns/mvp/

     

    Complied with:

    Embarcadero® Delphi 10.2 Version 25.0.29039.200

    uniGUI Web Application Framework Version:1.0.2 build 1431
     
     
     
     

     

     

    MVP.rar

    post-3992-0-93074000-1516194288_thumb.jpg

  6. Hi, I want to use third party javascript library for my web front end, so I search posts for how to use javascript library like c3js working under uniGUI, I found uniHtMLFrame component can do it, following is my steps:

     

    step1:

    ServerModule.pas -> CustomFiles -> Add

    css/c3.css
    js/d3.v3.min.js
    js/c3.js

     

    step2:

    Main.pas -> Add

    UniHTMLFrame1\ UniButton1\ UniButton2\ UniButton3

    Click UniButton1 Load html file into UniHTMLFrame1.

    Click UniButton2 Update Web Front End with javascript code random numbers.

    Click UniButton3 Update Web Front End with uniGui(delphi code) random numbers.

    procedure TMainForm.UniButton1Click(Sender: TObject);
    begin
      HTML.HTML.LoadFromFile('files\simple.html');
    end;
    
    procedure TMainForm.UniButton2Click(Sender: TObject);
    begin
      UniSession.AddJS(
        'var chart = c3.generate({                                                                                                                  ' +
        '  data: {                                                                                                                                  ' +
        '    columns: [                                                                                                                             ' +
        '      [''data1'', Math.random()*1000, Math.random()*1000, Math.random()*1000, Math.random()*1000, Math.random()*1000, Math.random()*1000], ' +
        '      [''data2'', Math.random()*1000, Math.random()*1000, Math.random()*1000, Math.random()*1000, Math.random()*1000, Math.random()*1000]  ' +
        '    ],                                                                                                                                     ' +
        '    onclick: function (d, element) { console.log("onclick", d, element); },                                                                ' +
        '    onmouseover: function (d) { console.log("onmouseover", d); },                                                                          ' +
        '    onmouseout: function (d) { console.log("onmouseout", d); },                                                                            ' +
        '  }                                                                                                                                        ' +
        '});                                                                                                                                        ' );
    end;
    
    procedure TMainForm.UniButton3Click(Sender: TObject);
    var
      data1: array[0..5] of Integer;
      data2: array[0..5] of Integer;
      i: Integer;
    begin
      for i := 0 to 5 do
      begin
        data1[i] := Random(1000);
        data2[i] := Random(1000);
      end;
      UniSession.AddJS(
        'var chart = c3.generate({                                                                                                                                                                 ' +
        '  data: {                                                                                                                                                                                 ' +
        '    columns: [                                                                                                                                                                            ' +
        '      [''data1'', ' + IntToStr(data1[0]) + ', ' + IntToStr(data1[1]) + ', ' + IntToStr(data1[2]) + ', ' + IntToStr(data1[3]) + ', ' + IntToStr(data1[4]) + ', ' + IntToStr(data1[5]) +'], ' +
        '      [''data2'', ' + IntToStr(data2[0]) + ', ' + IntToStr(data2[1]) + ', ' + IntToStr(data2[2]) + ', ' + IntToStr(data2[3]) + ', ' + IntToStr(data2[4]) + ', ' + IntToStr(data2[5]) +'], ' +
        '    ],                                                                                                                                                                                    ' +
        '    onclick: function (d, element) { console.log("onclick", d, element); },                                                                                                               ' +
        '    onmouseover: function (d) { console.log("onmouseover", d); },                                                                                                                         ' +
        '    onmouseout: function (d) { console.log("onmouseout", d); },                                                                                                                           ' +
        '  }                                                                                                                                                                                       ' +
        '});                                                                                                                                                                                       ' );
    end;
    

    simple.html

    <html>
      <head>
        <!-- link rel="stylesheet" type="text/css" href="../css/c3.css" -->
      </head>
      <body>
        <div id="chart"></div>
    
        <!-- script src="../js/d3.v3.min.js" charset="utf-8"></script -->
        <!-- script src="../js/c3.js"></script -->
        <script>
          var chart = c3.generate({
            data: {
              columns: [
                ['data1', 30, 200, 100, 400, 150, 250],
                ['data2', 50, 20, 10, 40, 15, 25]
              ],
              onclick: function (d, element) { console.log("onclick", d, element); },
              onmouseover: function (d) { console.log("onmouseover", d); },
              onmouseout: function (d) { console.log("onmouseout", d); },
            }
          });
        </script>
      </body>
    </html>
    

    The code run smoothly and I attach uniGUI project including csj3. If you have more concise code, let me know.

     

    My question: Is there more easy and Efficient method to interface between Server End and Front End javascript?

    because I need to monitor some modbus device like thermometers or switches connecting to my uniGUI server directly, and updating the display accordingly, and it is realtime monitor and quick response, the smaller traffic between server and web front is welcome.

     

    thermometers <-- Modbus TCP/RTU --> uniGUI server <-- javascript --> web front (C3js)

     

    Thanks Farshad Mohajeri, Delphi Developer,  mohammad et al for your valuable posts.

    C3js.rar

×
×
  • Create New...