XWidgetSoft Forum
https://xwidget.com/bbs/

Day and Night images am/pm
https://xwidget.com/bbs/viewtopic.php?f=8&t=3710		 Page 1 of 1
Author:  Jimking [ October 28th, 2013, 11:20 am ]
Post subject:  Day and Night images am/pm
Helpppp guys!!!

I'm making a special fancy clock and need the scipt for making a little "trick"..
The widget will have two backgrounds for day and night that will change automatically and use this script:
Quote:
function datetimecore1OnUpdate(Sender)
{
var mydate = new Date();
var h = mydate.getHours();
if(h>19||h<6) //night
{
image1.src=widgetpath+"2.png"
}
else //day 6:00~20:00
{
image1.src=widgetpath+"1.png"
}
}


This is OK and I have NO problem with it!

Here is what I want to do:

I have 4 images: AM / PM for day and AM / PM for night. I would like to show each image on the right time according the script times on the top.
I already used a similar function for this widget (check the attach file) without script but I need to be combined with DAY and NIGHT function and they will be also invisible with 24h clock.
I will try to be more clear possible:
- The day AM image will show at 6:00~12:00 call it "amday" for the script
- The day PM image will show at 12:00~20:00 call it "pmday" for the script
- The night PM image will show at 20:00~0:00 call it "pmnight" for the script
- The night AM image will show at 0:00~6:00 call it "amnight" for the script

Check the screenshots below to see what I mean:
https://play.google.com/store/apps/deta ... .halloween

Attachments:
card_game_clock_v2.xwp [1.12 MiB]
Downloaded 411 times
Author:  Jimking [ October 28th, 2013, 3:32 pm ]
Post subject:  Re: Day and Night images am/pm
Edit: I used this example
viewtopic.php?f=3&t=2888

but this method works when you have two png files for all day, one for "am" and one for "pm".
Author:  Jimking [ October 28th, 2013, 4:25 pm ]
Post subject:  Re: Day and Night images am/pm
Found this script by qiancang:
Quote:
if(h<6) //00:00-6:00
{
//write your code
}
else if(h<12) //6:00-12:00
{
//write your code
}

else if(h<18) //12:00-18:00
{
//write your code
}

else //18:00-00:00
{
//write your code
}


I can paste the 4 png files am/pm day and am/pm night on the two initial images, so will have the 4 images that this script requires.. :idea:
But I think that the clock should be only 12h...
Author:  meme [ October 28th, 2013, 4:35 pm ]
Post subject:  Re: Day and Night images am/pm
Is this OK ?

function datetimecore1OnUpdate(Sender) // only needs to be triggered every minute or hour.
{
var mydate = new Date();
var h = mydate.getHours();

if(h>=0 && h<=5)
image1.src=widgetpath+"1.png"

if(h>=6 && h<=11)
image1.src=widgetpath+"2.png"

if(h>=12 && h<=19)
image1.src=widgetpath+"3.png"

if(h>=20 && h<=23)
image1.src=widgetpath+"4.png"

}
Author:  Jimking [ October 28th, 2013, 4:53 pm ]
Post subject:  Re: Day and Night images am/pm
This WORKS meme!!! :D
This works with the 4 am/pm images pasted on the 2 day/night images.

It could be great if can work with 24h too...

I can create four more 4 "empty" images without the am/pm on them..
Also I have the 4 am/pm images separate.. That must be hidden on 24h mode..
Can the script be "modified" so will work on 12h and 24h mode?

If it will be a trouble doing this don't worry meme..! ;)
Author:  meme [ October 28th, 2013, 5:32 pm ]
Post subject:  Re: Day and Night images am/pm
Code:
Can the script be "modified" so will work on 12h and 24h mode?
Not exactly sure what you mean?
How is the mode selected and saved ?
What are the differences between to two modes, exactly ?
Author:  Jimking [ October 28th, 2013, 5:50 pm ]
Post subject:  Re: Day and Night images am/pm
I mean meme that your previous (working of course) script code is for 12h mode. This means that we have these four images:

But the am/pm are part of the images and didn't change/HIDE on 24h clock. (right click option) From 9:05 am to 21:05 for example

Attachments:
oooo.jpg
oooo.jpg [ 112.06 KiB | Viewed 29887 times ]
Author:  meme [ October 28th, 2013, 6:44 pm ]
Post subject:  Re: Day and Night images am/pm
var h = mydate.getHours(); // h is not affected by the setting for 12h and 24h mode it will be a number from 0 to 23 representing the hour.
The "%is12hr" tag can be use to detect which mode is selected and tell the code what to do.
Not sure exactly what you want it to do....
Author:  Jimking [ October 28th, 2013, 7:14 pm ]
Post subject:  Re: Day and Night images am/pm
Here is what I mean..

I have ready the 4 am/pm ONLY images (separate from the main image) and the 2 backgound images day/night.

Attachments:
1.png
1.png [ 201.99 KiB | Viewed 29884 times ]
c.png
c.png [ 205.57 KiB | Viewed 29884 times ]
Author:  meme [ October 28th, 2013, 10:18 pm ]
Post subject:  Re: Day and Night images am/pm
Something like....

function datetimecore1OnUpdate(Sender) // only needs to be triggered every minute or hour.
{
var mydate = new Date();
var h = mydate.getHours(); // a number from 0 to 23 representing the hour
var m = datetimecore1.get("%is12hr"); // returns true if in 12Hr mode, false if in 24Hr mode

if(h>=0 && h<=5 && m=="true") //................................................................modify these lines to get the logic you need
image1.src=widgetpath+"1.png"

if(h>=6 && h<=11 && m=="false") //................................................................modify these lines to get the logic you need
image1.src=widgetpath+"2.png"

if(h>=12 && h<=19) //................................................................modify these lines to get the logic you need
image1.src=widgetpath+"3.png"

if(h>=20 && h<=23) //................................................................modify these lines to get the logic you need
image1.src=widgetpath+"4.png"

}
Author:  Jimking [ October 29th, 2013, 4:21 am ]
Post subject:  Re: Day and Night images am/pm
Here is the widget meme to check it.. I tested but seems to not work properly.. Also the am/pm images are not disappear with %24h clock..

Attachments:
halloween_fancy_clock_ok(1).xwp [790.73 KiB]
Downloaded 408 times
Author:  digigamer [ October 29th, 2013, 6:29 am ]
Post subject:  Re: Day and Night images am/pm
Use this code: (Remove all that existed before but keep backup first :mrgreen: )
Code:
var mydate = new Date();
function datetimecore1OnUpdate(Sender) // only needs to be triggered every minute or hour.
{

var h = mydate.getHours(); // a number from 0 to 23 representing the hour
var m = datetimecore1.get("%is12hr"); // returns true if in 12Hr mode, false if in 24Hr mode

if(h>18||h<6) //night
{
if(m == 'true') {
  image2.Visible = true;
  image2.Src = datetimecore1.get("%AMPM")+"night.png";
} else {
  image2.Visible = false;
}
image1.src=widgetpath+"2.png";
}
else //day 6:00~20:00
{
 if(m == 'true') {
  image2.Visible = true;
  image2.Src = datetimecore1.get("%AMPM")+"day.png";
} else {
  image2.Visible = false;
}
image1.src=widgetpath+"1.png";
}
}
Author:  Jimking [ October 29th, 2013, 6:52 am ]
Post subject:  Re: Day and Night images am/pm
Thanks DG but are missing some things again:
-The AM/PM can now be hidden. OK
BUT
- The background didn't changed day/night

-The other two am/pm night images are not showing.
Author:  Jimking [ October 29th, 2013, 7:37 am ]
Post subject:  Re: Day and Night images am/pm
qiancang wrote:
most convenient way to modify

The day/night background images not work properly qiancang...
From 6.00-20.00 should be "day" and 20.00-6.00 "night

In folder:
image for day -> "1"
image for night-> "2"

Also the am/pm images should be hidden with %24H clock

When I use the right click menu for 12h/24h changes the backround.... :(
Author:  qiancang [ October 29th, 2013, 7:56 am ]
Post subject:  Re: Day and Night images am/pm
it must be ok now

Attachments:
halloween_fancy_clock_ok.xwp [790.75 KiB]
Downloaded 434 times
Author:  Jimking [ October 29th, 2013, 8:07 am ]
Post subject:  Re: Day and Night images am/pm
qiancang wrote:
it must be ok now

ALL work ok now.!
10000000 thanks qiancang!!! :D :D :D
This widget was a headache and a real challenge to combine all the modes... 8-)
Author:  digigamer [ October 29th, 2013, 10:18 pm ]
Post subject:  Re: Day and Night images am/pm
About the times... Sorry, our sunset occurs at about 17:00 - 18:30, so little bit accustomed to it. I think you should take that into consideration too.
Author:  meme [ October 29th, 2013, 11:27 pm ]
Post subject:  Re: Day and Night images am/pm
How far do you want to go....
Get the sunrise and sunset tags from the accweathercore to control the times things change in your location.
Author:  Jimking [ October 30th, 2013, 3:49 am ]
Post subject:  Re: Day and Night images am/pm
digigamer wrote:
About the times... Sorry, our sunset occurs at about 17:00 - 18:30, so little bit accustomed to it. I think you should take that into consideration too.

Yes I know that the values of day/night time are relevant. Is an average value..
Even from the same coutry between winter and summer. Like here in Italy for example that now with the -1 winter hour is dark from 17:00..
Author:  Oletik [ December 13th, 2013, 11:49 am ]
Post subject:  Re: Day and Night images am/pm
meme wrote:
How far do you want to go....
Get the sunrise and sunset tags from the accweathercore to control the times things change in your location.

It's a good idea! How to write code for this?
Author:  Jimking [ December 13th, 2013, 12:49 pm ]
Post subject:  Re: Day and Night images am/pm
Oletik wrote:
meme wrote:
How far do you want to go....
Get the sunrise and sunset tags from the accweathercore to control the times things change in your location.

It's a good idea! How to write code for this?

This is a finished project. Check the script in this widget and change the sunrise/sunset times manually..
Author:  digigamer [ December 13th, 2013, 10:40 pm ]
Post subject:  Re: Day and Night images am/pm
Oletik wrote:
meme wrote:
How far do you want to go....
Get the sunrise and sunset tags from the accweathercore to control the times things change in your location.

It's a good idea! How to write code for this?

You have to pull the time from %sunrise & %sunset tags, parse them into a date using date.parse or whatever and compare it to the current date. But since the time returned by %sunrise isn't so fixed,it was a bit difficult to do! :!:
Author:  meme [ December 14th, 2013, 1:39 am ]
Post subject:  Re: Day and Night images am/pm
Why would this not work ? add accweathercore to the widget then

function datetimecore1OnUpdate(Sender) //only needs to be triggered every minute or hour.
{

var h = parseInt(datetimecore1.get("%hour")); //number 0 to 23 the hour
var ap = datetimecore1.get("%AMPM");
var is12hr = datetimecore1.get("%is12hr"); //true if 12Hr mode, false if 24Hr mode
var sr = parseInt(accweathercore1.get("%sunRise")); //sunrise hour
var ss = parseInt(accweathercore1.get("%sunSet")); //sunset hour

if(is12hr=="true")
{
ampm_night.Visible = ampm_day.Visible = true;
if(h==12)
{
if(ap=="AM")h=0;
}
else if(ap=="PM") h=h+12;
}
else{ ampm_night.Visible = ampm_day.Visible = false;}

if(h>=sr && h<ss)
{
bg_day.Visible = true;
bg_night.Visible = false;
Author:  Oletik [ December 15th, 2013, 12:26 pm ]
Post subject:  Re: Day and Night images am/pm
Sunrise and sunset not only hours, but in minutes (exp: 6:04 ~ 18:58)
How to take a minutes? 18:58 it's almost 19:00, not 18:00
Author:  meme [ December 15th, 2013, 10:27 pm ]
Post subject:  Re: Day and Night images am/pm
does this work :?:

function datetimecore1OnUpdate(Sender) // only needs to be triggered every minute or hour.
{

var h = parseInt(datetimecore1.get("%hour")); //number 0 to 23 the hours
var m = parseInt(datetimecore1.get("%minute0")); //number 00 to 59 minutes
var ap = datetimecore1.get("%AMPM");
var is12hr = datetimecore1.get("%is12hr"); //true if 12Hr mode, false if 24Hr mode
var srh = parseInt(accweathercore1.get("%sunRise")); //sunrise hour
var srm = parseInt(accweathercore1.get("%sunRise").slice(-2)); //sunrise minute
var ssh = parseInt(accweathercore1.get("%sunSet")); //sunset hour
var ssm = parseInt(accweathercore1.get("%sunSet").slice(-2)); //sunset minute
var isDaytime;

if(is12hr=="true")
{
ampm_night.Visible = ampm_day.Visible = true;
if(h==12)
{
if(ap=="AM")h=0;
}
else if(ap=="PM") h=h+12;
}
else{ ampm_night.Visible = ampm_day.Visible = false;}

if((h>=srh && m>srm) || (h>=(srh+1))) //sun has risen
isDaytime = 1;

if((h>=ssh && m>ssm) || (h>=(ssh+1))) //sun has set
isDaytime = 0;

if(isDaytime = 1)
{
bg_day.Visible = true;
bg_night.Visible = false;
}
else
{
bg_day.Visible = false;
bg_night.Visible = true;
}
}
Author:  Oletik [ December 16th, 2013, 11:57 am ]
Post subject:  Re: Day and Night images am/pm
I don't use 12/24 & AM/PM mode. For myself I wrote:

function datetimecore1OnUpdate(Sender)
{
var hw = parseInt(datetimecore1.get("%hour")); //number 0 to 23 the hour
var mw = parseInt(datetimecore1.get("%minute0"));//number 00 to 59 minutes
var srh = parseInt(accweathercore1.get("%sunRise")); //sunrise hour
var srm = parseInt(accweathercore1.get("%sunRise").slice(-2)); //sunrise minute
var ssh = parseInt(accweathercore1.get("%sunSet")); //sunset hour
var ssm = parseInt(accweathercore1.get("%sunSet").slice(-2)); //sunset minute

if(hw>=srh && mw>=srm)
{
bg_day.Visible = true;
bg_night.Visible = false;
}
if(hw>=ssh && mw>=ssm)
{
bg_day.Visible = false;
bg_night.Visible = true;
}
}

Sorry but there is a bug somewhere. I tested by changing the system time.
Author:  meme [ December 16th, 2013, 12:11 pm ]
Post subject:  Re: Day and Night images am/pm
Very good, your welcome.

Quote:
if(hw>=srh && mw>=srm)
check if this line will work at startup if it is after the sunsrise hour but less than the sunrise minute, startup could be hours after the sunrise, same for the sunset. My reason for the (h>=(ssh+1))).
Author:  qiancang [ December 16th, 2013, 7:02 pm ]
Post subject:  Re: Day and Night images am/pm
function datetimecore1OnUpdate(Sender)
{
var curtime = datetimecore1.get("%time0"); // current time in string format, if you use 12h mode, you have to convert this time string to 24h mode and in '01:43' ,'13:54' format
var risetime = accweathercore1.get("%sunRise"); //sunrise time
var settime = accweathercore1.get("%sunSet"); //sunset time

if(risetime.length==4) risetime=0+risetime // 6:56 -> 06:56, you can do it without judgement since sunrise time always in morning

if(curtime>=risetime && curtime<=settime) //it's ok to compare them in string format directly
{
bg_day.Visible = true;
bg_night.Visible = false;
}
else
{
bg_day.Visible = false;
bg_night.Visible = true;
}
}


this code has potential risk for we may get nothing from accuweathercore in some conditions.

it will be perfect to deal with the following case

var risetime = accweathercore1.get("%sunRise"); //sunrise time
if(risetime=='') risetime ='06:00';
....
Author:  Oletik [ December 17th, 2013, 12:24 pm ]
Post subject:  Re: Day and Night images am/pm
Thank you, qiancang!
My quick test showed that it works well!
Author:  meme [ December 18th, 2013, 9:16 pm ]
Post subject:  Re: Day and Night images am/pm
Thank you, qiancang! good to know !
Author:  Oletik [ December 19th, 2013, 9:56 am ]
Post subject:  Re: Day and Night images am/pm
But why change bg_day to bg_night at sunset occurs at one minute later than the time of sunset?
At sunrise, all is well, minute in minute.
Author:  qiancang [ December 19th, 2013, 9:42 pm ]
Post subject:  Re: Day and Night images am/pm
Oletik wrote:
But why change bg_day to bg_night at sunset occurs at one minute later than the time of sunset?
At sunrise, all is well, minute in minute.


there are 4 kinds of judgetment sentence:


if(curtime>=risetime && curtime<=settime)
if(curtime>risetime && curtime<=settime)
if(curtime>risetime && curtime<settime)
if(curtime>=risetime && curtime<settime) //this one is what you want
Author:  Oletik [ December 20th, 2013, 7:28 am ]
Post subject:  Re: Day and Night images am/pm
Thank you very much!
Author:  Oletik [ December 21st, 2013, 12:13 pm ]
Post subject:  Re: Day and Night images am/pm
If change the city for the weather, the image (bg_day, bg_night) don't changing because DateTimeCore is set to the first city. It's bad. How to do so that with changing city for the weather the image change too?
Author:  meme [ December 21st, 2013, 2:31 pm ]
Post subject:  Re: Day and Night images am/pm
Quote:
DateTimeCore is set to the first city
The DateTimeCore is set to the time zone in DateTimeCore - DateTime Settings - Time Zone
Author:  Oletik [ December 22nd, 2013, 7:23 am ]
Post subject:  Re: Day and Night images am/pm
I know how to change Time Zone manually, thank's meme!
But how to do so that with changing city for the weather the image ("bg_day", "bg_night") automatically change to the city for the weather, not my location. For example: in my city now night and weather set for my city - "bg_night". When I change weather for New York, where now a day, "bg_night" must change to "bg_day" automatically.
Page 1 of 1 All times are UTC - 8 hours
Powered by phpBB® Forum Software © phpBB Group
http://www.phpbb.com/