display the time in UniLabel (client side)

[gerardocrisci]

What is the easiest way to update a UniLabel to display the time the client side. (No UniTimer)

Some examples, please.

[Hayri ASLAN]

Add this code to Form.Onready

UniSession.AddJS('(function () { '+
  '  function checkTime(i) { '+
  '     return (i < 10) ? "0" + i : i; '+
  ' } '+
  ' function startTime() { '+
  '     var today = new Date(), '+
  '          h = checkTime(today.getHours()),  '+
  '         m = checkTime(today.getMinutes()),  '+
  '         s = checkTime(today.getSeconds());   '+
  '     document.getElementById('''+UniLabel1.JSName+'_id'').innerHTML = h + ":" + m + ":" + s; '+
  '      t = setTimeout(function () { '+
  '         startTime()   '+
  '     }, 500);  '+
  ' }      '+
  ' startTime();  '+
  '})();');

[gerardocrisci]

thank you

 

UniLabel1.JSName+'_id'

It is a safe definition of the name unigui components to javascript?

 

but I used in

      ClientEvents.ExtEvents.Strings = (


                  function mouseout(sender, eOpts)
                  {
                    MainForm.UniLabel1.getEl().setStyle("font-weight","normal"); 
                  }
                  function mouseover(sender, eOpts)
                  {
                    MainForm.UniLabel1.getEl().setStyle("font-weight","bold"); 
                  }


        }

his name defined in the editor...  MainForm.UniLabel1.

[cjmoore]

Hi Hayri, is it possible to to use your function to put the time into a specific TUniStatusbar panel eg Panel[1]?

Using the above I can get the time onto the statusbar using the above (equivalent of setting statusbar.simpletext) but I can't see how display the value in a specific panel

 

 

[Sherzod]

Hi,

Also you can use this approach too:

UniStatusBar1 -> ClientEvents -> ExtEvents -> function afterrender:

function afterrender(sender, eOpts)
{
    var runner = new Ext.util.TaskRunner(),
        clockPnl, updateClock;
        
    clockPnl = sender.items.getAt(0); //UniStatusBar1.Panels[0] for example
    
    updateClock = function() {
        clockPnl.setHtml(Ext.Date.format(new Date(), 'g:i:s A'));
    };

    sender._task = runner.start({
        run: updateClock,
        interval: 1000
    });
    
}

 

[cjmoore]

Perfect - thank you. 

[eduardosuruagy]

Is there a way to set a countdown timer starting at 5 minutes? And when he finishes, can I get his finish?

[picyka]

15 minutes ago, eduardosuruagy said:

Is there a way to set a countdown timer starting at 5 minutes? And when he finishes, can I get his finish?

TrayClock (on the client side) - Components and Code Samples - uniGUI Discussion Forums

[Sherzod]

22 minutes ago, eduardosuruagy said:

Is there a way to set a countdown timer starting at 5 minutes?

 

7 minutes ago, picyka said:

TrayClock (on the client side) - Components and Code Samples - uniGUI Discussion Forums

 

You can modify the code for the countdown.

[eduardosuruagy]

Great job, I managed to do the countdown, but how do you know when the timer reaches zero?

[Sherzod]

Well,

12 minutes ago, eduardosuruagy said:

I managed to do the countdown

In what manner?

[eduardosuruagy]

2 minutes ago, Sherzod said:

Bem,

De que maneira?

  JSCODE := Self.Name + '.seconds = 60; ' +
  '' + Self.Name+'.timer = Ext.TaskManager.start({ ' +
  '  run: function() { ' +
  '      var date = new Date(null); ' +
  '      date.setSeconds(--' + Self.Name + '.seconds); ' +
  '      var timeString = date.toISOString().substr(11, 8); ' +
  '      '+Self.Name+'.UniLabelTimer.setHtml(''<i class="far fa-clock"></i> Tempo: '' + timeString); ' +
  '  }, ' +
  '  interval: 1000 ' +
  '});';
 

[Sherzod]

32 minutes ago, eduardosuruagy said:

but how do you know when the timer reaches zero?

You can test this for zero:

17 minutes ago, eduardosuruagy said:

.seconds

 

[eduardosuruagy]

12 minutes ago, Sherzod said:

Você pode testar isso para zero:

 

Sorry, I couldn't do it.
I wanted to execute a command when the timer reaches zero, how can I catch this event and execute the command?

[Sherzod]

1 hour ago, eduardosuruagy said:

I wanted to execute a command when the timer reaches zero, how can I catch this event and execute the command?

 

1 hour ago, eduardosuruagy said:

JSCODE := Self.Name + '.seconds = 60; ' +

Are you using a minute countdown?

[eduardosuruagy]

Yes and when it reaches zero I would like to execute an event or show a message to the user

[Sherzod]

4 minutes ago, eduardosuruagy said:

Yes and when it reaches zero I would like to execute an event or show a message to the user

Well, inside the run function:

     if (condition that seconds is equal to or less than zero...) {
         Ext.TaskManager.stop(' + Self.Name + '.timer); //I think you should also stop the timer
         ajaxRequest(...); //There may be other codes as well
     }

 

[eduardosuruagy]

22 minutes ago, Sherzod said:

Well, inside the run function:

     if (condition that seconds is equal to or less than zero...) {
         Ext.TaskManager.stop(' + Self.Name + '.timer); //I think you should also stop the timer
         ajaxRequest(...); //There may be other codes as well
     }

 

Would the code look like this?

 

  JSCODE := Self.Name + '.seconds = 60; ' +
  '' + Self.Name+'.timer = Ext.TaskManager.start({ ' +
  '  run: function() { ' +
  '      var date = new Date(null); ' +
  '      date.setSeconds(--' + Self.Name + '.seconds); ' +
  '      var timeString = date.toISOString().substr(11, 8); ' +

  '      if (timeString == ''0'') { '+
  '       Ext.TaskManager.stop(' + Self.Name + '.timer); '+
  '       ajaxRequest(''stopTime''); '+
  '       }; '+
  ' '+
  '      '+Self.Name+'.UniLabelTimer.setHtml(''<i class="far fa-clock"></i> Tempo: '' + timeString); ' +
  '  }, ' +
  '  interval: 1000 ' +
  '});';

  UniSession.JSCode(JSCODE);
 

[eduardosuruagy]

  '' + Self.Name+'.timer = Ext.TaskManager.start({ ' +
  '  run: function() { ' +
  '      var date = new Date(null); ' +
  '      date.setSeconds(--' + Self.Name + '.seconds); ' +
  '      var timeString = date.toISOString().substr(11, 8); ' +
  ' '+
  '      '+Self.Name+'.UniLabelTimer.setHtml(''<i class="far fa-clock"></i> Tempo: '' + timeString); ' +
  ' '+
  '      if (timeString == "00:00:00") { '+
  '       ajaxRequest("stopTime"); '+
  '       Ext.TaskManager.stop(' + Self.Name + '.timer); '+
  '       }; '+
  ' '+
  '  }, ' +
  '  interval: 1000 ' +
  '});';
 

 

This way the timer stops, but I don't receive the stopTime event

[Sherzod]

5 minutes ago, eduardosuruagy said:

if (timeString == ''0'') {

You need to check for the seconds variable.

 

6 minutes ago, eduardosuruagy said:

ajaxRequest(''stopTime'');

Well, this is wrong of course, follow the sequence of parameters.