How to set Home Screen or Lock Screen image from a web application

In this tutorial, we’ll learn how to access the images from the picture Gallery and set the selected image as Home screen or Lock screen from a web application.

Tizen Application API provides methods to launch a provider (or service) application from your application. In our case the provider application we would be launching is Gallery application, from where we’ll select an image and the same image will be set as home screen or lock screen. The methods which aid in our implementation are, Application API’s Application control and launchAppControl to launch the Gallery application and SystemSettings API’s setProperty method to set the image as Home screen or Lock screen. 

Let’s understand how to launch the provider application (native gallery app). Firstly, create an ApplicationControl object with defining the functionality required from the application to be launched.The operation type would be “http://tizen.org/appcontrol/operation/pick” for selecting a file , with URI as null, and the MIME type as image/jpeg (for the jpeg images) or as image/* for any type of the image file.

var appControl = new tizen.ApplicationControl(
			    "http://tizen.org/appcontrol/operation/pick",
	      		     null,
			    "image/jpeg",
			     null);

Now, call the launchAppControl method to launch the suitable application (gallery app) to select the image file.

tizen.application.launchAppControl(appControl, null,
		    function() {console.log("Gallery launch successful"); },
		    function(e) {console.log("Gallery launch failed. Reason: " + e.message); }, GallareyImageSelected);

After successful launch of the provider application (gallery apps), the selected image data information will be passed back to the calling application as an reply in the success callback method of “ApplicationControlDataArrayReplyCallback” interface.

Currently only one image can be selected, so the variable “gSelectedImagePath” will have the path of the file selected. Once multiple file selection is supported, an array can be used to store the details of files selected.

//Function to retrieve the selected image details from gallery
var GallareyImageSelected = {
	     onsuccess: function(data) {
	       for(var i=0; i < data.length; i++) {
	           console.log("#"+i+" key:"+data[i].key);
	           for(var j=0; j < data[i].value.length; j++) {
	              gSelectedImagePath= data[i].value[j];
	              console.log("   value#"+j+":"+data[i].value[j]);
	           }
	       }
	       console.log("Selected image: "+ gSelectedImagePath);
	    },
	    // Something went wrong
	    onfailure: function() {
	       console.log('The launch application control failed');
	    }
	 }

Below is the function which sets the selected image as home screen or lock screen using the systemsetting API’s “setProperty” method.

//Function to set the selected Image as homescreen or lockscreen
function setScreenMode() {
	var ImageSet = document.getElementsByName("image");
	var selected= 1;
	var screen=null;

	// check if the image is selected or not
	if(!gSelectedImagePath) {
	   alert("Image not selected. Please select image from gallery !!");
	   return 0;
	}

	// Get the selected screen mode option
	for(var i = 0; i < ImageSet.length; i++) {
	   if(ImageSet[i].checked) {
	       gScreenMode = ImageSet[i].value;
	       selected=0;
	    }
	  }

// Check if the screen mode is selected
if(selected)  {
 alert("Please select the screen to set and save");
 return 0;
}
else {
    switch (gScreenMode) {
        case "homescreen":
	             screen="HOME_SCREEN";
	             break;
        case "lockscreen":
     	   	     screen="LOCK_SCREEN";
	     	     break;
        default:
     	             console.log("Screen mode not set");
}
  // Sets the image as home screen or lock screen
  try {
  tizen.systemsetting.setProperty(screen, gSelectedImagePath, successCB, errorCB);
  } catch (err){
 	 console.log("Fail to setProperty " + err);
 	 alert("Screen mode not choosen or Unable to set screen mode");
  }

 }
}