Quiero hacer una pantalla que se mueva un cuadro cada hora
cuadrocadahora.hype.zip (19.6 KB)
¿Te refieres a animar cada segundo de la hora y cambiar a una nueva escena en la hora?
O cambia una sola vez cada hora.
¿Qué esperas que vea el usuario cuando salga de la página y regrese 5 horas después?
También el proyecto que publicaste solo tiene 3 rectángulos en una sola escena! ¿No estás seguro de lo que se supone que debemos entender por eso?
--
Do you mean animates every second in the hour and changes to a new scene on the hour.
Or changes once every hour only.
What do you expect the user to see when they leave the page and comes back 5 hours later.
Also the project you posted just has 3 rectangles on a single scene! Not sure what we are supposed to understand from that?
1 Like
OK La idea es esta basicamente que se mueva el cuadro rosado a la siguiente hora indicando el programa al aire cuando cumple la hora de la pc este cambia indicando que hay en parrilla a las 8 a.m. y asi hasta cumplir 24 Hras de Programación
cuadrocadahora.hype.zip (35.9 KB)
Debido a que estamos lidiando con el tiempo, esto obviamente no se ha probado completamente y se limita a las veces que usted dio ejemplo.
Le damos a cada Rectángulo de Evento un nombre de clase.
El nombre de la clase será el nombre de la palabra para la hora.
El rectángulo vivo y el texto en vivo también obtienen sus propios nombres de clase.
El código coincidirá con la hora de fechas actual con el valor i correspondiente en la matriz dg_val usando la hora como índice.
Luego hacemos que el rectángulo vivo y el texto en vivo se muevan al evento correcto haciendo coincidir la propiedad superior Rectángulo de eventos.
También obtenemos los minutos actuales de la hora y calculamos cuántos quedan hasta la hora siguiente.
Utilizamos los milisegundos resultantes para disparar un tiempo de espera para ejecutar el código de nuevo en la hora.
Because we are dealing with time, this obviously has not been fully tested and is limited to the times you exampled.
We give each Event Rectangle a class name.
The class name will be the word name for the hour.
The vivo rectangle and the en vivo text also get their own class names.
The code will match the current dates hour to the corresponding i value in the dg_val array using the hour as the index.
We then make the vivo Rectangle and en vivo text move to the correct event by matching the events Rectangle top property.
We also get the current minutes of the hour and calculate how many are left until the next hour.
We use the resulting milliseconds to fire a timeout to run the code again on the hour.
var date_ = new Date();
//********>>>>>>>>>>>>>>
date_.setHours(8);//-- para probar la hora comentar cuando termine la prueba -- for testing the hour comment out when finnished testing
///*******<<<<<<<<<<<<<<<<
var dg_val = ['zero', 'one', 'two', 'three', 'four', 'five', 'six', 'seven', 'eight', 'nine','ten', 'eleven', 'twelve', 'thirteen', 'fourteen', 'fifteen', 'sixteen', 'seventeen', 'eighteen', 'nineteen','twenty','twentyone','twentytwo','twentythree'];
var vivo_ = document.querySelector('.vivo')
var envivo_ = document.querySelector('.envivo')
var hour = dg_val[date_.getHours()]
var minutes = date_.getMinutes()
var currentHour = document.querySelector("." + hour)
var currentHourTop = hypeDocument.getElementProperty(currentHour, 'top')
hypeDocument.setElementProperty(vivo_, 'top', currentHourTop - 10, 1.0, 'easeinout')
hypeDocument.setElementProperty(envivo_, 'top', currentHourTop - 15, 1.0, 'easeinout')
var timeOut = ((60-minutes)*60) *1000 //== milliseconds
console.log(timeOut)
setTimeout(function(minutes){
hypeDocument.functions().vivo(hypeDocument, element, event)
}, timeOut);
--
cuadrocadahora_mhv1.hype.zip (51.4 KB)
2 Likes
works very well, 24 hours now I will try to change to a new scene the next day I will try
thank for your time thanks for your help and to the community that we are learning. 
2 Likes
No problem.
Let us know if you need more help.
One thing to note about timeouts is when the page is out of view ( hidden, tab change etc ) the browser will pause/throttle the running of the timeout
When you come back to the page the timeout will resume where it left off timing wise. Meaning out of sync timing by up to a couple of mins.
Also calling the function multiple times may result in more than one timeout.
There are ways to stop a timeout and start a new one and to try counter the pausing.
But it can get complex.
Dont know enough about your workflow to say if above would be an issue for you.
So thinking about it the simplest thing would be to get rid of the timeout
var date_ = new Date();
var dg_val = ['zero', 'one', 'two', 'three', 'four', 'five', 'six', 'seven', 'eight', 'nine', 'ten', 'eleven', 'twelve', 'thirteen', 'fourteen', 'fifteen', 'sixteen', 'seventeen', 'eighteen', 'nineteen', 'twenty', 'twentyone', 'twentytwo', 'twentythree'];
var vivo_ = document.querySelector('.vivo')
var envivo_ = document.querySelector('.envivo')
var hour = dg_val[date_.getHours()]
var currentHour = document.querySelector("[data-timeword=\"" + hour + "\"]")
var currentHourTop = hypeDocument.getElementProperty(currentHour, 'top')
hypeDocument.setElementProperty(vivo_, 'top', currentHourTop - 10, 1.0, 'easeinout')
hypeDocument.setElementProperty(envivo_, 'top', currentHourTop - 15, 1.0, 'easeinout')
and use a timeline to call the function every 30s or 1 min depending on your needs.
With this code we just have a repeating timeline ( not the main timeline ) call the function.This pretty much gives you a max known delay.
And you can even use the code for countering tab changes from the page to another and back to run the code when the page becomes visible again.
var hidden, visibilityChange;
if (typeof document.hidden !== "undefined") { // Opera 12.10 and Firefox 18 and later support
hidden = "hidden";
visibilityChange = "visibilitychange";
} else if (typeof document.msHidden !== "undefined") {
hidden = "msHidden";
visibilityChange = "msvisibilitychange";
} else if (typeof document.webkitHidden !== "undefined") {
hidden = "webkitHidden";
visibilityChange = "webkitvisibilitychange";
}
document.addEventListener(visibilityChange, handleVisibilityChange, false);
// if the page is shown, run the the vivo function again to counter browser throttling of settimersouts
function handleVisibilityChange() {
///console.log(document[hidden])
if (!document[hidden]) {
hypeDocument.functions().vivo(hypeDocument, element, event)
}
}
One last thing.
I changed the use of class names to use the HTML additional attributes.
I find this is cleaner and easier to manage.
cuadrocadahora_mhv12_notimeout.hype.zip (58.2 KB)
1 Like
esta version me ayuda mucho gracias
siempre esta Markhunte como lider
2 Likes