Tizen Developers

SOLVED: After some poking around on the config.xml I noticed you could add "priveleges" and I needed to add filesystem.read to the priveleges, now it works like a champ!

hey. i'm glad you got that issue sorted. i stumbled on this thread in search of how to add sounds to an analog watch. i'm so new to this thats its probably quite easy but i haven't been able to find any documentation on this at all. Or, it's very vague for me being so new to this. 

Just curious if you have any tips on adding sound. i basically want to have a sound hit on the hour. i'd appreciate any help on this!

Hello,

You can use following code:

<audio preload="auto" src="audio/sleep.mp3" autoplay></audio>

It will start automatically playing music.

If you don`t use "autoplay", you need add "controls" attribute or start/stop play sound using play()/pause() methods.

Hey. Thanks again for your previous help and guidance. I'm reaching out again after over a week of frustration on getting a Date on my analog watch widget... 

I've tried numerous codes. placement of code. and I'm sure it works as it's been tested on and in other widgets successfully. It's just I'm just more than stumped and know that it's probably something i'm missing in defining a var or function or something along this line so I'm just asking for a guideline. like what steps i take to implement a date (mm, dd, yyyy).

Please help!

Thanks!

ok. ive taken the past few days to try everything again but i'm getting a blank screen when i add this code to my script (JavaScript)

function showDate(day) {

        context.font = "35px monospace";

        context.textAlign = "center";

        context.textBaseline = "middle";

        context.fillStyle = "12f222";

        if (day < 10) day = " " + day;

        context.fillText(day, 110, 0);

then i think i've to implement

        var date = new Date();

        day = date.getDate();

but i don't know where to place this code. i've tried several areas but i keep getting blank screen. if this code isn't in the script my watch is fully functional. i'm totally new to Javascript and programming apps and i've come a long way but i'm missing something. 

so... i just want to get a date in my analog watch... month, day, year. 

here's JavaScript code:

var clockWidthHeight;//width and height of the clock
var clockDiv;
var secondHand;
var minuteHand;
var hourHand;
var centerImg;
var imgsLoaded = 0;
var secondHandSpeed;
var smoothRotation = true;
var useSecondHand = true;
var useCenterImg = false;
var imagesToLoad = 4;
var callInterval = 1000;
var retina = false;

// 시간 변경시 event받은 후 처리를 위함.
// API 이슈로 인하여 UI영역에 임시로 data객체를 노출함.(display : none) 설정함.
tizen.time.setDateTimeChangeListener(function(){ var temp = new Date(); $('#temp').text(temp); });

function setSecondStart(){
    var now = new Date();
    var secondAngle = 6 * now.getSeconds();//turn the time into angle
    secondHand.rotate(secondAngle, 'abs');//set the hand angle
//alert(4);
    
}

function rotateHands(){
//    alert(31);
    //get current time/date from local computer
    var now = new Date();
        
    //set the second hand
    
    var secondAngle = 24 * now.getSeconds();//turn the time into angle
    if(useSecondHand){
        
        if(smoothRotation){
            var smoothSecondAngle = now.getMilliseconds()/1000 * 24 + secondAngle;
            secondHand.rotate(smoothSecondAngle, 'abs');//set the hand angle
        }else{
            if(secondAngle == 0){
                secondHand.rotate(-6, 'abs');//set the hand angle
            }
            secondHand.rotate({ animateTo:secondAngle, duration:secondHandSpeed}, 'abs');
        }
    }
    
    
    
    
    
    //set the minute hand
    var minuteAngle = 6 * now.getMinutes();//turn the time into angle
    minuteHand.rotate(minuteAngle, 'abs');//set the hand angle
    
    //set the hour hand
    var hourAngle = 360/12 * now.getHours();//turn the time into angle
    hourHand.rotate((hourAngle + minuteAngle/12)%360, 'abs');//set the hand angle
//    alert(32);
}

function checkIfImagesLoaded(){
//    alert(21);
    imgsLoaded++;
    if(imgsLoaded == imagesToLoad){//once all the images are loaded
        
        if(retina){
            if(useSecondHand)secondHand.css( { "height":secondHand.height()/2, "width":secondHand.width()/2 } );
            minuteHand.css( { "height":minuteHand.height()/2, "width":minuteHand.width()/2 } );
            hourHand.css( { "height":hourHand.height()/2, "width":hourHand.width()/2 } );
            if(useCenterImg)centerImg.css( { "height":centerImg.height()/2, "width":centerImg.width()/2 } );
        }
        
        if(useSecondHand)secondHand.css( { "left": (clockWidthHeight - secondHand.width())/2 + "px", "top": (clockWidthHeight - secondHand.height())/2 + "px" });//set x and y pos
        minuteHand.css( { "left": (clockWidthHeight - minuteHand.width())/2 + "px", "top": (clockWidthHeight - minuteHand.height())/2 + "px" });//set x and y pos
        hourHand.css( { "left": (clockWidthHeight - hourHand.width())/2 + "px", "top": (clockWidthHeight - hourHand.height())/2 + "px" });//set x and y pos        
        if(useCenterImg)centerImg.css( { "left": (clockWidthHeight - centerImg.width())/2 + "px", "top": (clockWidthHeight - centerImg.height())/2 + "px" });//set x and y pos        
        if(useSecondHand)setSecondStart();
        
        //clockDiv.fadeIn();//fade it in
        clockDiv.find('img').show();
        //minuteHand.css({"display":"none"});
    
        //call rotatehands function
        setInterval(function(){
            rotateHands();
        }, callInterval);//1000 = 1 second
            
        rotateHands();//make sure they start in the right position
        
    }
//    alert(22);
}

AnalogClock = function(config){
    clockDiv = $("#" + config.divId);
    clockWidthHeight = config.clockWidthAndHeight;
    secondHandSpeed = config.secondHandSpeed;
    
    if(config.useSecondHand == "false"){
        useSecondHand = false;
        imagesToLoad = 3;
    }    
    
    if(config.smoothRotation == "true" && useSecondHand){
        smoothRotation = true;
        callInterval = 50;
    }
    
    useCenterImg = (config.useCenterImg=="true");
    
    //set clock holder css
    clockDiv.css({"height":clockWidthHeight + "px", "width":clockWidthHeight + "px", "position":"relative"});
    
    //add graphical elements 
    retina = window.devicePixelRatio > 1;//check if retina
    
    if(!retina){
        clockDiv.append("<img id='bg' src=" + config.clockFaceImg + " /><img id='hourHand' src=" + config.hourHandImg + " /><img id='minuteHand' src=" + config.minuteHandImg + " />");
        if(useSecondHand)clockDiv.append("<img id='secondHand' src=" + config.secondHandImg + " />");
        if(useCenterImg)clockDiv.append("<img id='centerImg' src=" + config.clockCenterImg + " />");
    }
    
    //define elements
    if(useSecondHand)secondHand = $("#secondHand");
    minuteHand = $("#minuteHand");
    hourHand = $("#hourHand");
    if(useCenterImg)centerImg = $("#centerImg");
    
    //check to see if the images are loaded
    $('#bg').load(function() {   checkIfImagesLoaded();  });
    if(useSecondHand)secondHand.load(function() {   checkIfImagesLoaded();  });
    minuteHand.load(function() {   checkIfImagesLoaded();  });
    hourHand.load(function() {   checkIfImagesLoaded();  });
    if(useCenterImg)centerImg.load(function() {   checkIfImagesLoaded();  });
    
    //set clock css
    var handIds = $("#" + config.divId + " #bg, #hourHand, #minuteHand, #secondHand, #centerImg");
    handIds.css({"position":"absolute", "display":"none"});
    //handIds.css({"position":"absolute"});
//    alert(1);
};

Run you application with "Debug As" und watch for errors on the Console tab of the Chrome Window

Hello,

As say Marco, Try to launch your app in Debug As mode and see log output on IDE or Chrome window.

Depends on this we try to help you.