How to trigger javascript functions in the resourcesFolder on a special day

I’d like to trigger functions on various days.
How can i get the date and call then a javascript snippet in the resourcesFolder for that day?

Any help would be greatly appreciated

Olof

    setDateString()//2015_6_25


function setDateString() {
var now = new Date();
var day = now.getDate();
var month = now.getMonth() +1;
var year = now.getFullYear();
var dateString = year.toString() + '_' + month.toString() +  '_' + day.toString();
return dateString;
}

this’ll return a datestring

so if you’ve got a list

var myDates = ['2015_6_25', '2015_6_29', '2015_6_31', ...]

you can check against it and run a function

1 Like

Hi Hans,

thanks for your quick response. This datestring is very helpful.
But whats is the right notation to run a function from the resourcesFolder?

For example 2015_6_25 is true then run my function e3 within my resourcesFolder.

Olof

Hi Hans,

i was a little bit confused and tired yesterday.
So now I came up with this:

	setDateString()//2015_6_25


function setDateString() {
var now = new Date();
var day = now.getDate();
var month = now.getMonth() +1;
var year = now.getFullYear();
var dateString = year.toString() + '_' + month.toString() +  '_' + day.toString();
return dateString;
}

var myDates = ['2015_6_26', '2015_7_4', '2015_7_5', '2015_7_6', '2015_7_7','2015_7_8','2015_7_9','2015_7_10','2015_7_11','2015_7_12','2015_7_13','2015_7_14','2015_7_15','2015_7_16','2015_7_17','2015_7_18','2015_7_19','2015_7_20','2015_7_21']
	{

if (myDates == '2015_6_23');

hypeDocument.functions().d1(hypeDocument, element, event);

};
	{

if (myDates == '2015_6_26');

hypeDocument.functions().d2(hypeDocument, element, event);

}

Code can be written maybe more clean. But for the moment it worked for me.

Thanks for helping me with that.

Olof

Moment.js is a great way to work with dates. Here's a quick example:

Run this in the <head> of your document:

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.3/moment.min.js"></script>

(The latest can be found here: http://cdnjs.com/libraries/moment.js/ )

Then, run this as an 'on scene load' for the scene where you running this calculation:

var month = moment().format("M");
var day = moment().date();
var year = moment().format("YYYY");

if (day == 04 && month == 7 && year == 2015 )
 {
 hypeDocument.functions().e01(hypeDocument, element, event);
   }
 if (day == 05 && month == 6 && year == 2015)
 {
 hypeDocument.functions().e02(hypeDocument, element, event);
 }
 
 else
 {
hypeDocument.functions().setup(hypeDocument, element, event);
 }

dateexample.zip (24.4 KB)

More info about this library: http://momentjs.com/docs/#/parsing/

If you wanted to determine if a time is between certain hours, you would detect the time, set a range, and run a conditional based on that range:

var format = 'hh:mm:ss'
var time = moment();
  beforeTime = moment('08:34:00', format);
  afterTime = moment('10:34:00', format);

if (time.isBetween(beforeTime, afterTime)) {

  console.log('is between 8:34 am and 10:34 am')

} else {

  console.log('is not between 8:34am and 10:34 am')

}
5 Likes

very cool. thank you…

Hi Daniel,
I got an error when i try your example.
console says on line 5:
Left hand side of operator ‘=’ must be a reference.

and
TypeError: undefined is not an object (evaluating ‘a.defineLocale’)
(anonyme Funktion)locales.min.js:75
index_hype_generated_script.js:5:58161

Any ideas?

My mistake – It should have been ‘==’ and not just ‘=’.

Here’s an example doc: dateexample.zip (24.4 KB)

Thanks Daniel,

i get it working.

#yeah

Olof

var month = moment().format("M");
var day = moment().date();
var year = moment().format("YYYY");

if (day == 04 && month == 7 && year == 2015 )
 {
 hypeDocument.functions().e01(hypeDocument, element, event);
   }
 if (day == 05 && month == 6 && year == 2015)
 {
 hypeDocument.functions().e02(hypeDocument, element, event);
 }
 
 else
 {
hypeDocument.functions().setup(hypeDocument, element, event);
 }
1 Like

Hello,
i try to do this with Scenes, but it doesnt work .
I have 5 scenes wich will be displayed on special dates.

I 've tried several things (commented out in the following code) with timeline and Scenes.
Where are my fault?
The first Scene should shown ever at start and again after the end.
The Second only the first 3 days in the month,
The third only the first 18 days and so on.

Here are my Code and what i tried.

 if (month == 3 && year == 2017 )
 {
  //hypeDocument.showSceneNamed('sc1', hypeDocument.kSceneTransitionCrossfade, 1.1)
  //hypeDocument.pauseTimelineNamed('Hauptzeitsachse')
  //hypeDocument.showNextScene(hypeDocument.kSceneTransitionCrossfade, 1.1)
  //hypeDocument.startTimelineNamed('Hauptzeitsachse');
  //hypeDocument.showNextScene(hypeDocument.kSceneTransitionCrossfade, 1.1)
 }
 
 if (day <=3  && month == 3 && year == 2017 )
 {
  //hypeDocument.continueTimelineNamed('Hauptzeitsachse', hypeDocument.kDirectionForward, false)
  
  //hypeDocument.showSceneNamed('sc2', hypeDocument.kSceneTransitionCrossfade, 1.1)
  //hypeDocument.startTimelineNamed('sc2');
  //hypeDocument.showNextScene(hypeDocument.kSceneTransitionCrossfade, 1.1)
  //hypeDocument.pauseTimelineNamed('Hauptzeitsachse')
 }
 
 if (day <= 18 && month == 3 && year == 2017 )
 {
  
  //hypeDocument.showSceneNamed('sc2', hypeDocument.kSceneTransitionCrossfade, 1.1)

  //hypeDocument.startTimelineNamed('sc3');
  //hypeDocument.showNextScene(hypeDocument.kSceneTransitionCrossfade, 1.1)

 }
 
 if (day <= 25 && month == 3 && year == 2017 )
 {
  //hypeDocument.startTimelineNamed('sc4');
 }
 
 if ((month == 3 && year == 2017 ) || (day <= 8 && month == 4 && year == 2017 ))
 {
  //hypeDocument.startTimelineNamed('sc5');

 }

Thanks a lot or help.
Best regards
Olli

Off the bat I see a problem with

if (day <= 18 && month == 3 && year == 2017 )
 {
  
  //hypeDocument.showSceneNamed('sc2', hypeDocument.kSceneTransitionCrossfade, 1.1)

  //hypeDocument.startTimelineNamed('sc3');
  //hypeDocument.showNextScene(hypeDocument.kSceneTransitionCrossfade, 1.1)

 }
 
 if (day <= 25 && month == 3 && year == 2017 )
 {
  //hypeDocument.startTimelineNamed('sc4');
 }

This is always going to fall through the code down to the 25th code. The 18th code is breifly going to fire but will be superseeded by the next IF block.

There are fixes to this like using return statments but to be honest it will be easier for people to help you if you post the project with your code.

Thanks a lot.
I ve solved the problem in an other way. I write the same in PHP and include depends on date other complete Hype Documents.
It is not the best solution for me but in works.

I try to solve it in Hype 3 too.

Best Regards
Olli

Hey Oli,

was to busy last week to provide you with a proper example.
In my example a specific
scene will loaded on a specific day… hope it helps.

dateToSceneWithMomentJS.zip (61.1 KB)

Olof

Many Thanks, i try it in the next few days

Hey folks!

Bumping this thread because I thought I could make a simple advent calendar using the moment.js and the code I saw in this tread. I’m in no way a coder so I’m absolutely lost. I have
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.min.js"></script> head html

Can anyone explain why scenes seem to work with the code in this thread but not timelines?

var month = moment().format("M");
var day = moment().date();
var year = moment().format("YYYY");
 
if (day == 1 && month == 11 && year == 2019 )
 {
  hypeDocument.startTimelineNamed('1');
 }
if (day == 2 && month == 11 && year == 2019 )
 {
  hypeDocument.startTimelineNamed('2');
 }
if (day == 3 && month == 11 && year == 2019 )
 {
  hypeDocument.startTimelineNamed('3');
 }
else  {
 hypeDocument.startTimelineNamed('nopeek', hypeDocument.kDirectionForward);
 }

 var x =  hypeDocument.sceneNames()
    console.log(x)	

It kinda works but it triggers timeline (today) 2 and nopeek. All timelines are in the same scene. Make the browser window mobile sized and click 1, 2 or 3. Why are multiple timelines triggered?

Any ideas?

//KennethXmas-tree-calendar.zip (361.6 KB)

It is triggering the '2' timeline because you were testing this on November 2nd, and thus 2 becomes the value of the date.

var day = moment().date();

If you were to test today on Nov 4, the day value would be 4. I assume instead what you will want to do is get the value number of the ball. For this you’ll need to attach some data to it, like by using the Additional HTML Attributes (recommended) or a class name.

The reason it always triggers the 'nopeek' timeline is because you have a bunch of ifs and a final else; this means that the else will always get called if the third if doesn’t pass. Instead you need else if to continue the statement. Instead you should use a structure like:

if(...) // first test
{

}
else if(...) // second test
{

}
else if(...) // third test
{

} 
else // everything else
{

}
1 Like

I am using a HYPE created document (with a similar moment.js-function) as a OAM Widget on a wordpress-site. On the Wordpress-site, i get “Error in undefined: ReferenceError: moment is not defined” in the console. What can be the problem? The document works without any problems when tested locally.

Try switching the embed mode to ‘iframe’ instead of ‘div’ in the Hype animations plugin page. The JS functions in the ‘head’ of your document are not included when using the ‘div’ method.

1 Like