Sync displays using current time - javascript

I'm making a digital signage system and I'd like to sync the displays so that they all show the same screen at the same time. I'm thinking that the simplest way of doing this is using the current time as a marker - all the machines running the displays will have the accurate time, and the amount of slides they have will be the same.
Is there a calculation I could perform on the current time to work out which slide to display which could be used on each screen, with a slide display time of 30 seconds for example?

I have no experience working with this.
But speaking with a colleague whom has, he pointed me in the direction of Synchroscope.
Seems like the right way to approach it?
Hope it helps!
Synchroscope Guide

Thanks to Bergi's suggestion of using Modulo, I've found a solution. Here is my Javascript code that changes the screen/slide every 30 seconds:
var sec = Math.floor(Date.now() / 1000);
var nearest30Sec = Math.round(sec / 30);
var currentSlide = ((nearest30Sec - 1) % 10) + 1;
currentSlide will produce a number between 1 and 10, which will change every 30 seconds.

Related

Javascript per second calculation

I am currently wracking my brain to work out what should probably be a relatively simple per second calculation. I have a loading bar increase and at the end of that, it adds 1 to the total. The loading bar consists of:
wId = setInterval(worker_identify_call, wIdSpeed);
and
function worker_identify_call(){
worker_identify_amount++;
wElem.style.width = worker_identify_amount + '%';
}
wIdSpeed = 250.
I am trying to calculate how long, in seconds, it will take to reach the top of the loading bar (100%).
I currently have ((1000/wIdSpeed).toFixed(2)) but that just calculates how long a cycle of setInterval takes.
CodePen with example here.
Any help is appreciated!
If you want to recalculate after every cycle you have to move workerString(); to inside the function that loops.
As for the math, you need to get the remaining (100 - worker_identify_amount) and check how many things it's adding per second and figure out the result from that.
I'm in idiot. For anyone that wants to find this in the future, it would be:
(((wIdSpeed/1000)*100).toFixed(2));
Where wIdSpeed is the speed of your interval.

making a trigger from html to ifttt

Background:
I am working on a temperature monitoring project Obniz microcontroller. The goal is to make a notification whenever the temperature exceed the selected threshold.
I searched a lot about making a trigger so that ifttt can read my trigger but I can't find the perfect way for my temperature monitoring project.
This is my js code that I want to be triggered:
var t = document.getElementById("tThresh");
var tempThresh = t.options[t.selectedIndex].value;
if (obj.temperature > tempThresh){
led1.on()
obniz.display.print("The temperature is too high")
obniz.display.clear();
};
Can anyone help me?
Why not a litle setTimeout looking each 1 - 5 minutes the latest temperature and determinate in this one if latest temperature is higher than the limit if yes do what you need to do.
Example:
var limit = 60;
var current = 30;
setTimeout(function(){
if(current >= limit){
window.alert("Temperature is being a litle bit high.");
}
}, 3000);

Change FlipClock duration seconds timer setting

I have FlipClock code as following
var clockDuration = $('.clock-duration').FlipClock({
// ... your options here
});
Clock working fine but I have requirement as follows
For e.x - Normally Clock start as 00:00(mm:ss) and after 60 seconds it shows 00:59(mm:ss) and after that it will change minute 01:00(mm:ss) but I want change this when clock start it should be started as 00:01 and after 60 seconds it should shown as 00:60 and after that 01:00
Basically I need to change FlipClock start and end seconds setting
Can you please help me out from this stuck?
I refer following site for this but not found solution for this
FlipClock
With such requirements I can see only 4 solutions:
Change core code of FlipClock javascript file.
Make javascript callback funcion on seconds change in FlipClock and change text in time block manually. It's pretty complex with many exeptions that will be finded.
As you want to show after 60 seconds time: 00:60 and then 01:00, so you want in 1 second show 2 seconds... That's very strange behavior that makes no sense and no real profit. Best solution - give up in this idea, because it will cost much time with bad results in the end.
Make your own timer.
I think 3 is best. Next best is 4 alternative.

HTML/Javascript Ascending Number

I'm trying to make a simple javascript game. Basically, you get pancakes at a certain amount per second. In the code, I call this value (the rate at which you get pancakes) pps. I want to make it so that as the HTML span tag that shows the total amount of pancakes gets more pancakes, (at the rate of pps), it ascends so it looks nicer.
For example, if I get pancakes at 5 pps, right now it just goes 0, 5, 10, etc... every second. I want it to go 0,1,2,3,4,5(1 second), next second 6,7,8,9,10, etc...
Here is the code that I have so far, for the pancake counter:
pps = 100;
tp = 0;
window.setInterval(function(){
tp += parseInt(pps);
document.getElementById("test").innerHTML = tp;
}, 1000);
Anyone know how to do this?
This is a problem common to all games, and one that you need to solve correctly for your game to work outside of your own computer.
The correct solution is that you need to measure the elasped time between each iteration of your game loop, or between each frame render. This is, in practice, going to be a very small number; you can think of this number as a "scaling factor".
If your game was about moving a space ship, and you wanted it to move 5 screen units per second, your game loop would:
Find the time elapsed since the last interval, in seconds. In a game rate-limited to 60 frames-per-second, this would be around 1/60th of a second
Multiply the ship's speed (5 units per second) by 1/60; the ship would move 0.8333... units this tick
move the ship by that amount.
By the time 1 full second has passed, the ship will have moved 5 units.
The exact same principal applies to your PPS.
The important part is that, in the real world, it will not be exactly 1/60th of a second between frames. If you're not computing the "scaling factor" each iteration of your loop, your game will slowly accrue error. setInterval is particularly bad for this, and not at all suitable as a source for time in a game.
The implementation in JavaScript is simple: Each game loop, record the current time from whatever source of time is available to you; in your case, you can use get Date().getTime(), which returns the time since the UNIX epoch in milliseconds. Record this value.
In the subsequent redraw, you will again call get Date().getTime(), and then subtract the previous value to the the elapsed time. That is your scaling factor, in milliseconds. You can multiply pps by that value to determine how many pancakes to add.
It's important that you still follow this approach, even if you're using setInterval. You might think you can simply setInterval(..., 1000 / 60) to invoke your callback 60 times per second, but setInterval (and setTimeout) are not accurate - they invoke your callback at least that far in the future, but potentially much further. You still need to scale pps by the elapsed times since the last redraw.
Here's a simple implementation:
var PPS = 5;
var lastTime = new Date().getTime();
var cakes = 0;
setInterval(function () {
var currentTime = new Date().getTime()
var elapsedTime = currentTime - lastTime;
lastTime = currentTime;
cakes += (PPS * (elapsedTime / 1000)) // elapsedTime is in milliseconds, divide by 1000 to get fractional seconds
document.getElementById('pps').innerText = cakes;
}, 10);
<div id="pps"></div>
As an aside, the incorrect solution is one you find in a lot of old games: Increment things as fast as you can. On old computers this was a viable solution; the game redrew slowly enough that the game would advance smoothly. As computers got faster, the game would run faster, until it became unplayable.
A simple interval timer would do the trick. Something like this:
function incrementToNumber(tag, currentNumber, targetNumber) {
var numTicks = targetNumber - currentNumber;
var interval = setInterval(function() {
currentNumber++;
tag.innerText = currentNumber;
if(currentNumber == targetNumber) {
clearInterval(interval);
}
}, 1000 / numTicks);
}
That particular function increments over the course of one second. To change the time it takes to increment, swap out the 1000 with whatever milliseconds you want it to take.
For a version that increases forever:
function inrementForever(tag, currentPancakes, pancakesPerSecond) {
setInterval(function() {
currentPancakes++;
tag.innerText = currentPancakes;
}, 1000 / pancakesPerSecond);
}

ajax/JS timed countdown?

Let me explain what I'm trying to do.
I want to make a simple box which counts down numbers at intervals I specify.
For example, I'd like to set it to start at 150, and then I want to set it to drop by 15 every 30 seconds.
Is this possible with AJAX/Javascript? If so, could someone point me in the right direction?
Would really appreciate any help on this script, been Googling for hours now! :(
Cheers
Kieran
Have a look at the setTimeout or setInterval methods, they allow you to execute a function after a specified number of milliseconds (1000ms = 1second). Use that, to call a function that keeps dropping the number and writes it to a HTML element to the user can see it.
this isn't tested, but i hope it shows you the way to go.
var start = 150;
var drop = 15;
var interval = 30;
function countdown(){
document.getElementById('mybox').innerHTML = start;
start-=drop;
window.setTimeout("countdown",interval*1000);
}
countdown();
You may use jQuery to do that, see http://keith-wood.name/countdown.html -> tab Callbacks
Keep in mind that 30 seconds in my browser are not necessarily equal to 30 seconds in your browser. It depends on the workload of the browser.
The time difference is minor for a short time but can increase over a long time. The times will drift apart. If the times must not be equal (or nearly equal) between two visitors than such simple solution should be fine.
We had once a problem to introduce a live clock / countdown in one of our projects. We build a script with javascript, ajax and PHP for clock synchronisation (server time was timeserver).
You should use setInterval / clearInterval which is made for this kind of tasks:
function cooldown(element, start, stop, step, delay) {
var current = start;
element.innerHTML = current;
var timer = setInterval(function () {
current -= step;
if(current < stop) current=stop;
element.innerHTML = current;
if(current == stop) clearInterval(timer);
}, delay*1000);
}
Demonstrated here : http://jsfiddle.net/PCMHn/

Categories