24 jQuery themed std/scientific calculators

Published on December 4 2015 by Yousfi Benameur


this is a code to build one of 24 jQuery themed calculators.its a  jQuery plugin that attaches a popup calculator to an input field.

the libraries (js and css) are from the site http://keith-wood.name/calculator.html
i made all librairies linked to web library in this site but can save each library link (js or css file) in local disk and run all locally.its better because the links can be broken.
Here internet must be connected.
Of course the use is covered by the MIT licence (http://keith-wood.name/licence.html)

the 24 themed calculators are the follow (as specified in the form.comboBox).
there is a button "random" whose shows randomly a themed calcultor from the 24.
in this app must click on the textbox or icon calc to fire the attached themed calculator.
can use (close,use or erase buttons on calculator)...
can retrive the calculation result to visual foxpro as pointed on the specified button on the form.

1 - black-tie
2 - blitzer
3 - cupertino
4 - dark-hive
5 - dot-luv
6 - eggplant
7 - excite-bike
8 - flick
9 - hot-sneaks
10 - humanity
11 - le-frog
12 - mint-choc
13 - overcast
14 - pepper-grinder
15 - redmond
16 - smoothness
17 - south-street
18 - sunny
19 - start
20 - swanky-purse
21 - trontastic
22 - ui-darkness
23 - ui-lightness
24 - vader

i made a code for a browser on a form (*1*) and a second (*2*) code with internetexplorer.application (analog).
can  make another calculator arrangement as inline...
can see all styles made with jQuery in http://keith-wood.name/calculator.html
*can download many localisations packages to work with multi languages.
*can see QuickRef on the author page to see all  PEMs
*i added an option to switch between scientific and standard calculator in the first code.

Click on code to select [then copy] -click outside to deselect



*1* 24 themed jQuery  calculators
*update 05 december 2015: added switch between standard and scientific calculator & check if show calculator on start.

Publi oform
oform=Newobject("ytCalc")
oform.Show
Read Events
Retu
*
DEFINE CLASS ytCalc AS form
    BorderStyle = 0
	Top = 100
	Left = 100
	Height = 396
	Width = 564
	ShowWindow = 2
	ShowTips = .T.
	Caption = "Form1"
	MaxButton = .F.
	Name = "Form1"

	ADD OBJECT olecontrol1 AS olecontrol WITH ;
	    oleClass="shell.explorer.2", ;
		Top = 30, ;
		Left = -1, ;
		Height = 366, ;
		Width = 563, ;
		Name = "Olecontrol1"

	ADD OBJECT combo1 AS combobox WITH ;
		FontBold = .T., ;
		RowSourceType = 6, ;
		RowSource = "ycurs.theme", ;
		Height = 25, ;
		Left = 140, ;
		Top = 3, ;
		Width = 193, ;
		Name = "Combo1"

	ADD OBJECT command1 AS commandbutton WITH ;
		AutoSize = .T., ;
		Top = 1, ;
		Left = 340, ;
		Height = 29, ;
		Width = 75, ;
		FontBold = .T., ;
		FontSize = 10, ;
		Caption = "Random", ;
		MousePointer = 15, ;
		ForeColor = RGB(255,0,0), ;
		BackColor = RGB(128,255,0), ;
		Name = "Command1"

	ADD OBJECT command2 AS commandbutton WITH ;
		AutoSize = .T., ;
		Top = 0, ;
		Left = 418, ;
		Height = 29, ;
		Width = 90, ;
		FontBold = .T., ;
		FontSize = 10, ;
		Caption = "VFP return", ;
		MousePointer = 15, ;
		ForeColor = RGB(128,0,64), ;
		BackColor = RGB(0,255,255), ;
		Name = "Command2"

	ADD OBJECT label1 AS label WITH ;
		AutoSize = .T., ;
		FontBold = .T., ;
		FontSize = 18, ;
		BackStyle = 0, ;
		Caption = "?", ;
		Height = 32, ;
		Left = 521, ;
		MousePointer = 15, ;
		Top = 1, ;
		Width = 17, ;
		ForeColor = RGB(0,255,0), ;
		Name = "Label1"

	ADD OBJECT optiongroup1 AS optiongroup WITH ;
		AutoSize = .T., ;
		ButtonCount = 2, ;
		BackStyle = 0, ;
		Value = 2, ;
		Height = 27, ;
		Left = 31, ;
		Top = 0, ;
		Width = 104, ;
		Name = "Optiongroup1", ;
		Option1.BackStyle = 0, ;
		Option1.Caption = "Std", ;
		Option1.Value = 0, ;
		Option1.Height = 17, ;
		Option1.Left = 5, ;
		Option1.MousePointer = 15, ;
		Option1.Top = 5, ;
		Option1.Width = 36, ;
		Option1.AutoSize = .T., ;
		Option1.Name = "Option1", ;
		Option2.BackStyle = 0, ;
		Option2.Caption = "Scient.", ;
		Option2.Value = 1, ;
		Option2.Height = 17, ;
		Option2.Left = 44, ;
		Option2.MousePointer = 15, ;
		Option2.Top = 5, ;
		Option2.Width = 55, ;
		Option2.AutoSize = .T., ;
		Option2.Name = "Option2"

	ADD OBJECT check1 AS checkbox WITH ;
		Top = 5, ;
		Left = 3, ;
		Height = 17, ;
		Width = 18, ;
		AutoSize = .T., ;
		Alignment = 0, ;
		BackStyle = 0, ;
		Caption = "", ;
		Value = 1, ;
		ToolTipText = "Show calculator on start", ;
		Name = "Check1"

	PROCEDURE ybuild
		lparameters xx,xtheme
		local m.xtype
		do case
		case thisform.optionGroup1.value=2
		m.xtype=[prompt: 'Using ThemeRoller', layout: $.calculator.scientificLayout,]
		case thisform.optionGroup1.value=1
		m.xtype=[prompt: 'Using ThemeRoller', layout: $.calculator.standardLayout,]
		endcase
		if thisform.check1.value=1
		local m.ys
		m.ys=[$('#themeRollerCalc').calculator('show')]
		else
		m.ys=""
		endi

		Local m.myvar
		TEXT to m.myvar textmerge  noshow
		<!DOCTYPE html>
		<html>
		<head>
		<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
		<title>24 themed jQuery Calculator</title>

		<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/themes/<<xtheme>>/jquery-ui.css">
		<link rel="stylesheet" href="http://keith-wood.name/css/jquery.calculator.css" id="theme">
		<link rel="stylesheet" href="http://keith-wood.name/themesDemo/<<xtheme>>/jquery-ui.css" id="themeUI">
		<link rel="stylesheet" href="http://keith-wood.name/css/demo.css">
		<script src="http://keith-wood.name/js/modernizr-2.6.2.min.js"></script>
		<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
		<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
		<script src="http://keith-wood.name/js/jquery.plugin.js"></script>
		<script src="http://keith-wood.name/js/jquery.calculator.js"></script>
		<script src="http://keith-wood.name/js/demo.js"></script>

		<script>
		$(function () {

		$('#themeRollerCalc').calculator({useThemeRoller: true,
		   <<m.xtype>>
		    showOn: 'both', buttonImageOnly: true, buttonImage: 'http://keith-wood.name/img/calculator.png'});
		   <<m.ys>>
		    });
		</script>
		</head>
		<body bgcolor=bisque  oncontextmenu="return false;" >
		<center><p style="color:white;font-bold;background-color:navy;">24 jQuery themed Calculators - (from //keith-wood.name/calculator.html)</p></center>
		<p style="color:red;font-small;">click to fire themed calc</p>
		<table><tr>
		<td><p> <input type="text" id="themeRollerCalc"></p></td><td><p>theme:<<xx>>/24 - <<xtheme>> </p> </td>
		</tr><table>
		  </body>
		</html>
		ENDTEXT

		Local m.lcdest
		m.lcdest=Addbs(Sys(2023))+"test.html"
		Strtofile(m.myvar,m.lcdest)
		with thisform.olecontrol1
		.Navigate(m.lcdest)
		Endwith
	ENDPROC

	PROCEDURE Load
		declare integer Sleep in kernel32 integer

		create cursor ycurs (num i,theme c(20))
		insert into ycurs values(1,"black-tie")
		insert into ycurs values(2,"blitzer")
		insert into ycurs values(3,"cupertino")
		insert into ycurs values(4,"dark-hive")
		insert into ycurs values(5,"dot-luv")
		insert into ycurs values(6,"eggplant")
		insert into ycurs values(7,"excite-bike")
		insert into ycurs values(8,"flick")
		insert into ycurs values(9,"hot-sneaks")
		insert into ycurs values(10,"humanity")
		insert into ycurs values(11,"le-frog")
		insert into ycurs values(12,"mint-choc")
		insert into ycurs values(13,"overcast")
		insert into ycurs values(14,"pepper-grinder")
		insert into ycurs values(15,"redmond")
		insert into ycurs values(16,"smoothness")
		insert into ycurs values(17,"south-street")
		insert into ycurs values(18,"sunny")
		insert into ycurs values(19,"start")
		insert into ycurs values(20,"swanky-purse")
		insert into ycurs values(21,"trontastic")
		insert into ycurs values(22,"ui-darkness")
		insert into ycurs values(23,"ui-lightness")
		insert into ycurs values(24,"vader")
		sele ycurs
		locate
	ENDPROC

	PROCEDURE Init
		Set Safe Off
		this.caption="24 themed jQuery Calculators"
	ENDPROC

	PROCEDURE Destroy
		clea event
	ENDPROC

	PROCEDURE combo1.Click
		sele ycurs
		thisform.ybuild(num,allt(theme))
	ENDPROC

	PROCEDURE combo1.Init
		with this
		.listindex=1
		.style=2
		endwith
	ENDPROC

	PROCEDURE command1.Click
		&&random
		local xmin,xmax
		rand(-1)
		xmin = 1
		xmax = 24
		m.xx= INT((xmax - xmin + 1) * RAND( ) + xmin)
		sele ycurs
		go m.xx
		thisform.ybuild(num,allt(theme))
        thisform.combo1.value=theme
	ENDPROC

	PROCEDURE command2.Click
		local m.x
		try
		m.x=thisform.olecontrol1.document.getElementById("themeRollerCalc").value
		_cliptext=m.x
		messagebox("The value of jQuery themed calculator="+trans(m.x),0+32+4096,"value in clipboard")
		catch
		endtry
	ENDPROC

	PROCEDURE label1.Click
		local m.myvar
		text to m.myvar textmerge noshow
this is a code to build one of 24 jQuery themed calculators.the libraries (js and css) are from the
site http://keith-wood.name/calculator.html
i made all librairies linked to web library in this site but can save each library link (js or css file)
in local disk and run all locally.its better because the links can be broken.
Here internet must be connected.
Of course the use is strictly personal without the express permission of the author.

the 24 themed calculators are the follow (as specified in the form.comboBox).
there is a button "random" whose shows randomly a themed calcultor from the 24.
in this app must click on the textbox or icon calc to fire the calculator.
can use (close,use or erase buttons on calculator)...
-added functionalities in first code:
  -switch between scientific and standard calculator
  -Show or no the calculator at start
		endtext
		messagebox(m.myvar,0+32+4096,"Summary help")
	ENDPROC

ENDDEFINE
*
*-- EndDefine: ytcalc

Click on code to select [then copy] -click outside to deselect

 
 *2*
 *this is the same analog code but with the internetexplorer.application.
 *it seems some fast relative to the first code.
*jQuery calculators
*from http://keith-wood.name/calculator.html

local m.xx, m.xtheme,gnlower,gnUpper
m.xx=int(val(inputbox("Select a theme:1- 24 [0=random]  ","","0")))


if !between(m.xx,0,24)
m.xx=0
endi


if m.xx=0
  &&random
rand(-1)
gnLower = 1
gnUpper = 24
m.xx= INT((gnUpper - gnLower + 1) * RAND( ) + gnLower)
endi


do case
case m.xx=1
m.xtheme="black-tie"
case m.xx=2
m.xtheme="blitzer"
case m.xx=3
m.xtheme="cupertino"
case m.xx=4
m.xtheme="dark-hive"
case m.xx=5
m.xtheme="dot-luv"
case m.xx=6
m.xtheme="eggplant"
case m.xx=7
m.xtheme="excite-bike"
case m.xx=8
m.xtheme="flick"
case m.xx=9
m.xtheme="hot-sneaks"
case m.xx=10
m.xtheme="humanity"
case m.xx=11
m.xtheme="le-frog"
case m.xx=12
m.xtheme="mint-choc"
case m.xx=13
m.xtheme="overcast"
case m.xx=14
m.xtheme="pepper-grinder"
case m.xx=15
m.xtheme="redmond"
case m.xx=16
m.xtheme="smoothness"
case m.xx=17
m.xtheme="south-street"
case m.xx=18
m.xtheme="start"
case m.xx=19
m.xtheme="sunny"
case m.xx=20
m.xtheme="swanky-purse"
case m.xx=21
m.xtheme="trontastic"
case m.xx=22
m.xtheme="ui-darkness"
case m.xx=23
m.xtheme="ui-lightness"
case m.xx=24
m.xtheme="vader"
endcase

Local m.myvar
TEXT to m.myvar textmerge  noshow
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<title>24 themed jQuery Calculator</title>


<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/themes/<<m.xtheme>>/jquery-ui.css">

<link rel="stylesheet" href="http://keith-wood.name/css/jquery.calculator.css" id="theme">
<link rel="stylesheet" href="http://keith-wood.name/themesDemo/<<m.xtheme>>/jquery-ui.css" id="themeUI">
<link rel="stylesheet" href="http://keith-wood.name/css/demo.css">

<script src="http://keith-wood.name/js/modernizr-2.6.2.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
<script src="http://keith-wood.name/js/jquery.plugin.js"></script>
<script src="http://keith-wood.name/js/jquery.calculator.js"></script>
<script src="http://keith-wood.name/js/demo.js"></script>

<script>
$(function () {

$('#themeRollerCalc').calculator({useThemeRoller: true,
    prompt: 'Using ThemeRoller', layout: $.calculator.scientificLayout,
    showOn: 'both', buttonImageOnly: true, buttonImage: 'http://keith-wood.name/img/calculator.png'});

    });

</script>

</head>
<body bgcolor=bisque  oncontextmenu="return false;" >
<center><p style="color:white;font-bold;background-color:navy;">24 jQuery themed Calculators - (from //keith-wood.name/calculator.html)</p></center>
<p style="color:red;font-small;">click to fire themed calc</p>
<table><tr>    
	
<td><p> <input type="text" id="themeRollerCalc"></p></td><td><p>theme:<<m.xx>>/24 - <<m.xtheme>> </p> </td>
</tr><table>
  </body>
</html>

ENDTEXT
Set Safe Off
Local m.lcdest
m.lcdest=Addbs(Sys(2023))+"test.html"
Strtofile(m.myvar,m.lcdest)

Declare Integer BringWindowToTop In user32 Integer
declare integer Sleep in kernel32 integer
Local apie
apie=Newobject("internetexplorer.application")
With apie
	.Navigate(m.lcdest)
	.menubar=0
	.Toolbar=0
	.StatusBar=0
	.Resizable=0
	.Width=600
	.Height=400
	.Top=50
	.Left=(Sysmetric(1)-.Width)/2
	BringWindowToTop(.HWnd)
	.Visible=.T.
Endwith