Search This Blog

Thursday, February 3, 2022

Set Alarm In Oracle Apex Using HTML, CSS, JavaScript

Few days ago I had a plan to make a alarm clock in Oracle Apex. So I tried to find out something to do it. And finally did it using HTML,CSS, JavaScript. I feel it works very well. So I am going to share my tricks and code to you. You can try or use it if needed. Even you may customize it your self according to your requirement.  Follow below steps. 

Step 1. Create a new page and a region using static content type. 


Step 2. Copy-Paste this CSS and Java Codes into Page properties >> HTML Header 

<style>
/* (A) FONT */
#ctime#tpick {
  font-family: Impactsans-serif;
}
.header {
  text-align: center;
  font-weight: normal;
  margin: 5px 0 10px 0;
}

/* (B) CURRENT TIME */
#ctime {
  margin: 0 auto;
  max-width: 350px;
  padding: 10px;
  background: #000;
  text-align: center;
}
#ctime .header {
  color: #c61d1d;
}
#ctime .square {
  display: inline-block;
  padding: 10px;
  margin: 5px;
}
#ctime .digits {
  font-size: 24px;
  background: #fff;
  color: #000;
  padding: 20px 10px;
  border-radius: 5px;
}
#ctime .text {
  margin-top: 10px;
  color: #ddd;
}

/* (C) TIME PICKER */
#tpick {
  margin: 0 auto;
  max-width: 350px;
  padding: 10px;
  background: #f2f2f2;
  white-space: nowrap;
}
#tpick-h#tpick-m#tpick-s {
  display: inline-block;
  width: 32%;
}
#tpick select {
  box-sizing: padding-box;
  width: 100%;
  font-size: 1.2em;
  font-weight: bold;
  margin: 20px 0;
}
#tset#treset {
  box-sizing: padding-box;
  width: 50%;
  background: #3368b2;
  color: #fff;
  padding: 10px;
  border: 0;
  cursor: pointer;
}
#tset:disabled#treset:disabled {
  background: #aaa;
  color: #888;
}
</style>

<script>

var ac = {
  // (A) INITIALIZE ALARM CLOCK
  init : function () {
    // (A1) GET THE CURRENT TIME - HOUR, MIN, SECONDS
    ac.chr = document.getElementById("chr");
    ac.cmin = document.getElementById("cmin");
    ac.csec = document.getElementById("csec");

    // (A2) CREATE TIME PICKER - HR, MIN, SEC
    ac.thr = ac.createSel(23);
    document.getElementById("tpick-h").appendChild(ac.thr);
    ac.thm = ac.createSel(59);
    document.getElementById("tpick-m").appendChild(ac.thm);
    ac.ths = ac.createSel(59);
    document.getElementById("tpick-s").appendChild(ac.ths);

    // (A3) CREATE TIME PICKER - SET, RESET
    ac.tset = document.getElementById("tset");
    ac.tset.addEventListener("click", ac.set);
    ac.treset = document.getElementById("treset");
    ac.treset.addEventListener("click", ac.reset);

    // (A4) GET ALARM SOUND
    ac.sound = document.getElementById("alarm-sound");

    // (A5) START THE CLOCK
    ac.alarm = null;
    setInterval(ac.tick, 1000);
  },

  // (B) SUPPORT FUNCTION - CREATE SELECTOR FOR HR, MIN, SEC
  createSel : function (max) {
    var selector = document.createElement("select");
    for (var i=0; i<=max; i++) {
      var opt = document.createElement("option");
      i = ac.padzero(i);
      opt.value = i;
      opt.innerHTML = i;
      selector.appendChild(opt);
    }
    return selector
  },

  // (C) SUPPORT FUNCTION - PREPEND HR, MIN, SEC WITH 0 (IF < 10)
  padzero : function (num) {
    if (num < 10) { num = "0" + num; }
    else { num = num.toString(); }
    return num;
  },

  // (D) UPDATE CURRENT TIME
  tick : function () {
    // (D1) CURRENT TIME
    var now = new Date();
    var hr = ac.padzero(now.getHours());
    var min = ac.padzero(now.getMinutes());
    var sec = ac.padzero(now.getSeconds());

    // (D2) UPDATE HTML CLOCK
    ac.chr.innerHTML = hr;
    ac.cmin.innerHTML = min;
    ac.csec.innerHTML = sec;

    // (D3) CHECK AND SOUND ALARM
    if (ac.alarm != null) {
      now = hr + min + sec;
      if (now == ac.alarm) {
        if (ac.sound.paused) { ac.sound.play(); }
      }
    }
  },

  // (E) SET ALARM
  set : function () {
    ac.alarm = ac.thr.value + ac.thm.value + ac.ths.value;
    ac.thr.disabled = true;
    ac.thm.disabled = true;
    ac.ths.disabled = true;
    ac.tset.disabled = true;
    ac.treset.disabled = false;
  },

  // (F) RESET ALARM
  reset : function () {
    if (!ac.sound.paused) { ac.sound.pause(); }
    ac.alarm = null;
    ac.thr.disabled = false;
    ac.thm.disabled = false;
    ac.ths.disabled = false;
    ac.tset.disabled = false;
    ac.treset.disabled = true;
  }
};

// (G) START CLOCK ON PAGE LOAD
window.addEventListener("load", ac.init);
</script>

Step 3.  Copy-Paste this code into Page properties >> Region>> Source

<!-- (A) CURRENT TIME -->
<div id="ctime">
  <h1 class="header">THE CURRENT TIME</h1>
  <div class="square">
    <div class="digits" id="chr">00</div>
    <div class="text">HR</div>
  </div>
  <div class="square">
    <div class="digits" id="cmin">00</div>
    <div class="text">MIN</div>
  </div>
  <div class="square">
    <div class="digits" id="csec">00</div>
    <div class="text">SEC</div>
  </div>
</div>

<!-- (B) SET ALARM -->
<div id="tpick">
  <h1 class="header">
    SET ALARM
  </h1>
  <div id="tpick-h"></div>
  <div id="tpick-m"></div>
  <div id="tpick-s"></div>
  <div>
    <input type="button" value="Set" id="tset"/>
    <input type="button" value="Reset" id="treset" disabled/>
  </div>
</div>

<!-- (C) ALARM SOUND -->
<audio id="alarm-sound" loop>
  <source src="#APP_IMAGES#Arekbar.mp3" type="audio/mp3">
</audio>

Step 4.  Upload a ringtone in  
  • Shared Components
  • Static Application Files
  •   then copy the reference for use as your ringtone source. 


    Step 5. Change the music directory source form Step 3 code. Use here new directory of your ringtone. 

    <audio id="alarm-sound" loop>
      <source src="#APP_IMAGES#Arekbar.mp3" type="audio/mp3">
    </audio>

    That's All. Now Just Set Alarm And Enjoy It. Thank You.  :) 

    PDF to Text Covert by Oracle Apex

    Here are the steps to convert and get the character into a region by Oracle Apex. Step1.  Create a page and Copy-Pest the below code into Pa...