Sunil Sindal

CoolClock - The Javascript Analog Clock Plugin for Oracle APEX 4.0

2011-04-12T11:52:00.000-07:00

About CoolClock

CoolClock is a customisable javascript analog clock.CoolClock was created by Simon Baird.

Requirements

CoolClock requires canvas suport therefore it works best in Firefox, Safari or Chrome. It can work in IE via the use of ExplorerCanvas however in IE it refreshes slowly, doesn't render as nicely and the second hand decoration is disabled due to a rendering glitch. CoolClock does not use Flash.

Download

CoolClock Oracle APEX Plugin can be downloaded from here

Using CoolClock Plugin

Steps

Click on Create Item.

Select Item Type as Plug-ins.

Select Plug-ins as Analog Clock.

Enter Item Name/Id, Sequence, Region to display the clock.

Set the item attributes.

Enter the Radius e.g. 60 and Parameters e.g. fancy myClock to display the clock.

Click Next.

Create Item.

Run the Page.

Coolclock plugin will be rendered in the body of your html file like the following:

<canvas id="clockid" class="CoolClock:Skin:Radius:noSeconds:GMTOffset"></canvas>

The colon delimited fields after CoolClock in the class control the appearance of the clock. The fields are as follows:

CoolClock	Required	Without that your canvas will be left alone
Skin	Optional. Default is "swissRail"	Specifies which skin to use. CoolClock includes skins like, "swissRail", "chunkySwiss", "fancy", "machine", "classic", "modern" and "simple". It's easy to create your own additional skins
Radius	Optional. Default is 85	Specifies the radius in pixels of the clock
noSeconds	Optional	If you include "noSeconds" as the last field then the clock will have no second hand. Use if your CPU usage is too high
GMTOffset	Optional	If you don't specify anything you get local time. If you specify a value here (in hours) it will be used as an offset from GMT (UTC). Eg, put -5 to indicate 5 hours behind GMT. You can specify fractions of hours, eg +2.5

You should be able to omit fields to indicate you want the default values, eg "Parameters="::noSeconds" means default skin and default size with no second hand.

If you want to add a real css class to your clock canvases you can do so by adding a space then the class. For example: Parameters="fancy myClock"

The id can be anything but it should be unique of course.

Creating Your Own Skin

You can design your own clock by creating a CoolClock "skin". Take a look at the CoolClock.config section the javascript file. Copy and paste an existing skin, for example copy these nine lines:

 swissRail: {
  outerBorder: { lineWidth: 1, radius:95, color: "black", alpha: 1 },
  smallIndicator: { lineWidth: 2, startAt: 89, endAt: 93, color: "black", alpha: 1 },
  largeIndicator: { lineWidth: 4, startAt: 80, endAt: 93, color: "black", alpha: 1 },
  hourHand: { lineWidth: 8, startAt: -15, endAt: 50, color: "black", alpha: 1 },
  minuteHand: { lineWidth: 7, startAt: -15, endAt: 75, color: "black", alpha: 1 },
  secondHand: { lineWidth: 1, startAt: -20, endAt: 85, color: "red", alpha: 1 },
  secondDecoration: { lineWidth: 1, startAt: 70, radius: 4, fillColor: "red", color: "red", alpha: 1 }
 },

Name your skin, eg change "swissRail" to "mySkin". Your skin is now available for use. Change the settings in your skin to change the look of your clock. The numbers refer to a percentage of the radius, so startAt: 0, endAt: 50 means a line from the center to 50% of the way to the edge. Alpha means the transparency of the element where alpha: 1 means solid. For example alpha: 0.5 means 50% transparent. Use the other skins for examples.

Examples

FOr more Examples please visithere

Rename the browse button of the filebrowse control

2010-10-23T06:54:00.000-07:00

To rename the browse button of the filebrowse control in HTML user the below trick


<html>
<head></head>
<body>
<form name="test_form" method="post" action="test.jsp">
<input type=file name=browse style="display: none;">
<input type=text name=file>
<input type=button value="Select a File..." onClick="browse.click();file.value=browse.value;">

<!-- must be clicked twice for the form to submit! -->
<input type=submit value="Submit The Form Now!">
</form>
</body>
</html>

the above method only works in IE.

Javascript method to rename the Browse button of the filebrowse control.

To work with other browsers try the below one.

<script language="JavaScript" type="text/javascript">
function HandleBrowseClick()
{
    var fileinput = document.getElementById("browse");
    fileinput.click();
    var textinput = document.getElementById("filename");
    textinput.value = fileinput.value;
}
</script>

<input type="file" id="browse" name="fileupload" style="display: none"/>
<input type="text" id="filename" readonly="true"/>
<input type="button" value="Click to select file" id="fakeBrowse" onclick="HandleBrowseClick();"/>

CSS method to rename the Browse button of the filebrowse control.

You can try the below method based on pure CSS


div.fileinputs {
 position: relative;
}

div.fakefile {
 position: absolute;
 top: 0px;
 left: 0px;
 z-index: 1;
}

input.file {
 position: relative;
 text-align: right;
 -moz-opacity:0 ;
 filter:alpha(opacity: 0);
 opacity: 0;
 z-index: 2;
}

<div class="fileinputs">
 <input type="file" class="file" />
 <div class="fakefile">
  <input />
  <img src="search.gif" />
 </div>
</div>

Validating a string with specific custom date format in VbScript

2010-08-24T23:40:00.000-07:00

I have search for a vbscript function to meet my requirement of validating a date string with a specific date format but my badluck i am unable to find which meets my requirement.So i finally decide to write my own script to fulfill my requirement.
My custom function to validate / check for a custom date format in a date string it returns True or False
Assumptions:
Date format contains date in DD format, month in MM or MMM format, year in YY or YYYY format.
e.g. DD-MM-YYYY or MM-DD-YYYY or YY-DD-MM or MM-YY-DD or MM/YY/DD etc
If year is in YY then it consider it to be 2000 year only e.g. 10-15-02 and format is YY-DD-MM
then it will check for a valid date of 2010 15th Feb .


Function CheckDate(strDate,strFormat)
strFormat=UCase(strFormat)
If(Len(strDate)=Len(strFormat)) Then 
 Dim iStartD,iLastD,iStartM,iLastM,iStartY,iLastY,iFirstSeperator,iLastSeperator
 
 iStartD=InStr(1,strFormat,"D")
 iLastD=InStrRev(strFormat,"D")
 iStartM=InStr(1,strFormat,"M")
 iLastM=InStrRev(strFormat,"M")
 iStartY=InStr(1,strFormat,"Y")
 iLastY=InStrRev(strFormat,"Y")
 For i=1 To Len(strFormat)
  Dim x,seperators
  seperators="/.-|:"
  x=Mid(strFormat,i,1)
  If(InStr(seperators,x)>0) Then
   iFirstSeperator=InStr(strFormat,x)
   iLastSeperator=InStrRev(strFormat,x)
   Exit For 
  End if
 Next
 'WScript.Echo iFirstSeperator&" "&iLastSeperator
 
 'WScript.Echo iStartD&" "&iLastD&" "&iStartM&" "&iLastM&" "&iStartY&" "&iLastY
 
 Dim vDate,vMonth,vYear,validDate
 validDate=False
 
 If(iLastD>1) Then 
  vDate=Mid(strDate,iStartD,iLastD-iStartD+1)
  Else
  vDate="01"
 End If 
 If(iLastM>1) Then 
  vMonth=Mid(strDate,iStartM,iLastM-iStartM+1)
  Else
  vMonth="01"
 End If 
 If(iLastY>1) Then 
  vYear=Mid(strDate,iStartY,iLastY-iStartY+1)
  Else
  vYear="2010"
 End If 
 If(Not Len(vYear)>2)Then 
 vYear="20"&vYear
 End If 
 'WScript.Echo vDate &" "&vMonth&" "&vYear
 If(Len(vMonth)>2) Then
  WScript.Echo IsDate(vDate&"-"&vMonth&"-"&vYear)
  If(IsDate(vDate&"-"&vMonth&"-"&vYear)) Then 
   WScript.Echo CDate(vDate&"-"&vMonth&"-"&vYear)
   validDate=True
  End If 
 ElseIf(Len(vMonth)<3) Then
  WScript.Echo IsDate(vYear&"/"&vMonth&"/"&vDate)
  If(IsDate(vYear&"/"&vMonth&"/"&vDate))Then 
  WScript.Echo CDate(vYear&"/"&vMonth&"/"&vDate)
   validDate=True
  End if
 End If 
 
 If(iFirstSeperator>1 And validDate=True) Then 
  If(Mid(strFormat,iFirstSeperator,1)=Mid(strDate,iFirstSeperator,1) And Mid(strFormat,iLastSeperator,1)=Mid(strDate,iLastSeperator,1)) Then 
  validDate=True
  Else
  validDate=False
  End If
 End If 
 
 Else
 validDate=False
 End If


CheckDate=validDate
End Function