Images Displayed in Hello World & Coding Issue

[Angel]

Hello!

I'm interested in generating new images on my app based on what time of day it is. So, in theory the app will say the current time and there will be a morning picture, a different picture will be displayed at lunch, and a different picture will be displayed for the afternoon. That's the idea I'm working toward. I successfully uploaded images to my database and wanted to use those. Is there a tutorial that can help me out?

I wanted to adapt the Hello World tutorial for my project since it already has coding for generating the current time. I successfully got the coding from the Hello World tutorial to work, and I can adapt it so it only displays the time (which is what I want) but I wanted to know if there was a command I could add to the coding along the lines of:

if it's between x and y times then display this image.
if it's after y time then display this image.

I looked up javascript coding online, but Appery's Server Code Script feature (the one the tutorial says to use to input the Hello World script) doesn't recognize any of the code I found in other places. I keep getting error messages. I was testing what I would be able to do with tutorials from this website (http://www.w3schools.com/js/default.asp) but I didn't get far when I tried to bring it over to the Script writer in appery.

TL;DR: I want to adapt Appery's Hello World tutorial so it displays a picture at certain times during the day, but I'm having a language barrier with the coding. Please help.

[Evgene Karachevtsev]

Hello Angel,

1) Create a start page page. On that page invoke your js code on load event. Please change page background after calculations in js code
2) You don't need a server code, because it doesn't change anything on a client side.
Please don't forget: custom app code (HTML, JavaScript, CSS, PhoneGap) is outside the scope of our support
http://devcenter.appery.io/support-po...

[Louis]

Hi Angel,

Here's a way that I would do it.

• I would include the moment.js (http://momentjs.com/) library to display current time (Create new Javascript Upload). This way would mean the current time is always based off the device's local date / time.

• Use an IF statement (http://www.w3schools.com/js/js_if_els...) to either set background of an image to a new URL (CSS) or set SRC of an image to a new URL.

  I.E. on page load:
  code
  var currentHour = moment().hour(); /* Get current hour */

  if (currentHour >= 12) {
  Appery('photo_img').attr("src", "http://yourimagepath.com"); /* This assumes you will be using appery image, if it's a div you will need to set background CSS */
  } else if (...) {
  etc.
  }

  /code
  and so on..

  Note: Using moment.js will also let you display current date/time with ease: codemoment().format('MMMM Do YYYY, h:mm:ss a');/code

[Angel]

Thanks for the feedback!

Follow up question. I am definitely using appery image for my pictures. Do I actually use "http://yourimagepath.com" or is there some other http:// I'm supposed to be using?

Here's a screen shot of what the coding I have looks like. I'm testing for a successful run:

and here is where my images are uploaded on the Media Manager in the App Building page:

I'm correct in that I have to name the files from here, yes? Or should I be linking this to the files on the back end of the server?

[Angel]

Also, Thanks for your quick response, Evgene. I have no idea what you mean when you say to "change the page background." Can you link me to a tutorial with instructions on how to do that?

Thanks!

[Evgene Karachevtsev]

Hello Angel,

1) Here is the tutorial you asked
http://www.w3schools.com/cssref/pr_ba...
2) Page in Appery.io is a structure of 3 items : header, page container, footer
For changing background for a page container, you need with jquery (integrated in Appery.io) find an element on you page with attribute name "mobilecontainer" or by Id CURRENT_PAGE+"_mobilecontainer", for instance your current page called "startScreen" in Appery.io builder then you need to find on your page div tag with id="startScreen_mobilecontainer"

[Angel]

I'm sorry, I don't understand what you're trying to tell me in your last response. I'm not trying to change the color of my app's background. I'm trying to display an image based on what time it is.

[Here's the Time]
[Here's a corresponding image that goes along with the time]

An example would be: if the time is in the morning a picture of a sun would display. If the time is at night a picture of a moon would display instead of the sun.

I've set the page event to "Load" and set Action as "Run JavaScript". There are no errors in the coding that I can see, but still when I test the app nothing comes up for my page. Am I still missing something? Is this what you were trying to tell me? Were you talking about something I'm supposed to do in the back end, or is this something staring me in the face that I can't see?

[Yurii Orishchuk]

Hi Angel,

Here is code example:

pre

var images = {
night: "http://upload.wikimedia.org/wikipedia/commons/4/41/Siberischer_tiger_de_edit02.jpg",
day: "http://www.molomo.ru/img/tiger.jpg"
};

var onInterval = function(){

Code: Select all

 var pageContainer = jQuery('[name="mobilecontainer"]'); 

 var time = new Date(); 

 //Night by default. 
 var imageIndex = "night"; 

 var hours = time.getHours(); 
 if(hours  8 && hours < 20) 
     imageIndex = "day"; 

 pageContainer&#46;css({ 
     "background-image": "url(" + images[imageIndex] + ")", 
     "background-size": "contain" 
 }); 

}

//Check every 60s.
window.setInterval(onInterval, 60000);

/pre

Learn this code to undestand how it works.

Regards.