A web metro interface to build tiles - metroJS

Published on by Yousfi Benameur


Metro JS is a JavaScript plugin for jQuery developed to easily enable Metro interfaces on the web.
Following are the main features :
- liveTile
-Description: Turns a container into a liveTile
-applicationBar
-While fully functional, the application bar is still being finished and currently requires all static markup.
-The documentation for .applicationBar is still being constructed. The basic premise is that a container is fixed
to the bottom of the window or document when position: fixed; is not supported. Turning on theming will generate
the theme links inside of the container.
-Hardware acceleration. CSS animations, transforms and transitions are used to boost performance when available.
-Custom triggering functions to allow for custom flip-list patterns .You can implement your own triggerDelay
function to affect the randomness of flip list.
-Animation repeat property to allow for a static number of animations (i.e. data-repeat=”5?) data-repeat is
available.
the project is in development phase.its Created by Drew Green Well.
can read infos at :
http://jquer.in/responsive/metro-js/
http://www.drewgreenwell.com/projects/metrojs?utm_source=jquer.in&utm_medium=website&utm_campaign=content-curation
can download the library  MetroJS-full0.9.71.zip (262 ko) :
metroJS.min.js  metrojs.js
metroCss.min.css & metroCss.css
and some JPG.
can customize the metrojs.css with a builder themes generator
(http://www.drewgreenwell.com/projects/metrojs?utm_source=jquer.in&utm_medium=website&utm_campaign=content-curation#liveTileMethods)
metroJS methods are in this link also.
As it metroJS can build a complet web site.
VFP can take advantage of the power of the web to animate tiles. There are a multitude of documented classes that can be
customized and used with simplicity.
I adapted this tool to run environment by using the beforeNavigate2 method.i dont go inside javascript methods, i show the important of this application.
first download some pngs (for personal use only) with the first code below.


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


*first this code  downloads 26 web/icons/images to pôpulate the custom metroJS tiles.
*26 images (2jpg and 24 png) are stored in folder ymages(from source)
*can run the form ymetroJS but without images!
*note:images downloaded are not free and must be used as personal purpose only.

Declare Integer URLDownloadToFile In urlmon.Dll Integer pCaller, String szURL, String szFileName, Integer dwReserved, Integer lpfnCB
Declare Integer DeleteUrlCacheEntry In wininet String lpszUrlName

m.yrep=addbs(justpath(sys(16,1)))
if ! directory(m.yrep+"yimages")
md (m.yrep+"yimages")
endi

create cursor ycurs (url c(200))

insert into ycurs values ( "https://cdn3.iconfinder.com/data/icons/picons-social/57/72-windows8-128.png")
insert into ycurs values ( "https://cdn4.iconfinder.com/data/icons/social-media-2070/140/_windows-128.png")
insert into ycurs values ( "https://cdn0.iconfinder.com/data/icons/social-network-9/50/14-128.png")
insert into ycurs values ( "http://i39.servimg.com/u/f39/15/54/62/74/untitl37.jpg")
insert into ycurs values ( "https://cdn1.iconfinder.com/data/icons/social-shade-rounded-rects/512/windows_store-128.png")
insert into ycurs values ( "https://cdn2.iconfinder.com/data/icons/metro-uinvert-dock/128/Windows_Media_Player_alt.png")
insert into ycurs values ( "https://cdn4.iconfinder.com/data/icons/refresh_cl/128/Windows/Windows_Tools.png")
insert into ycurs values ( "https://cdn2.iconfinder.com/data/icons/icons-mega-pack-1-and-2/128/Windows_Media_Center.png")
insert into ycurs values ( "https://cdn2.iconfinder.com/data/icons/sleekxp/Windows-Close-Program.png")
insert into ycurs values ( "https://cdn2.iconfinder.com/data/icons/icons-mega-pack-1-and-2/128/Windows_Media_Player_12.png")
insert into ycurs values ( "https://cdn2.iconfinder.com/data/icons/icons-mega-pack-1-and-2/128/Windows_Media_Player_10.png")
insert into ycurs values ( "https://cdn1.iconfinder.com/data/icons/ilive-by-wwalczyszyn/128/Windows_Live_Mesh.png")
insert into ycurs values ( "https://cdn2.iconfinder.com/data/icons/Qetto___icons_by_ampeross-d4njobq/128/windows.png")
insert into ycurs values ( "https://cdn1.iconfinder.com/data/icons/ampola-final-by-ampeross/128/windows_mobile.png")
insert into ycurs values ( "https://cdn3.iconfinder.com/data/icons/humano2/128x128/emblems/emblem-art2.png")
insert into ycurs values ( "https://cdn2.iconfinder.com/data/icons/metro-ui-icon-set/128/Adobe_Acrobat_Reader.png")
insert into ycurs values ( "https://cdn2.iconfinder.com/data/icons/document-11/512/Document-41-128.png")
insert into ycurs values ( "https://cdn3.iconfinder.com/data/icons/aurora/PNG/128x128/icontexto-aurora-folders-windows.png")
insert into ycurs values ( "https://cdn1.iconfinder.com/data/icons/education-color-filled-line/160/48-128.png")
insert into ycurs values ( "https://cdn4.iconfinder.com/data/icons/REALVISTA/networking/png/128/satellite.png")
insert into ycurs values ( "https://cdn3.iconfinder.com/data/icons/2001/space/HAL-9000.png")
insert into ycurs values ( "https://cdn0.iconfinder.com/data/icons/halloween-avatars/128/Kokey-01.png")
insert into ycurs values ( "https://cdn3.iconfinder.com/data/icons/internet-and-web-4/78/internt_web_technology-01-128.png")
insert into ycurs values ( "https://cdn3.iconfinder.com/data/icons/softwaredemo/PNG/128x128/Globe1.png")
insert into ycurs values ( "https://cdn3.iconfinder.com/data/icons/oldschool_babasse/Png/Hardware/globe.png")
insert into ycurs values ( "https://sanjeetv.files.wordpress.com/2016/04/taghit-algeriajpg.jpg")

*brow


scan
lcDownloadURL =allt( url)
lcDownloadLoc =m.yrep+"yimages\"+trans(recno())+iif(recno()=4 or recno()=26,".jpg",".png")
lnResult = DeleteUrlCacheEntry(lcDownloadURL)
lnResult = URLDownloadToFile(0, lcDownloadURL, lcDownloadLoc , 0,0)
If lnResult = 0
Wait Window "Download "+lcDownloadLoc +"  Complete" Nowait
*Else
*!*  Messagebox("Download fails")
Endi
endscan
local m.oo
m.oo=m.yrep+"yimages"
run/n explorer &oo




A web metro interface to build tiles - metroJS

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


*1* this code builds a metro menu from javascript library 
*may be sure all librariries are downloaded (or web linked in code).
*may be sur 26 images/icons are downloaded into the folder yimages with code above (can customize these).


publi yform
yform=newObject("ymetroJS")
yform.show
read events
retu
*
DEFINE CLASS ymetroJS AS form
BorderStyle = 3
Height = 654
Width = 886
ShowWindow = 2
ShowTips = .T.
AutoCenter = .T.
Caption = "MetroJS sample"
BackColor = RGB(0,0,0)
Name = "Form1"

ADD OBJECT olecontrol1 AS olecontrol WITH ;
Oleclass="shell.explorer.2", ;
Top = 0, ;
Left = 0, ;
Height = 624, ;
Width = 888, ;
Anchor = 15, ;
Name = "Olecontrol1"

ADD OBJECT shape1 AS shape WITH ;
Top = 631, ;
Left = 24, ;
Height = 20, ;
Width = 20, ;
Anchor = 768, ;
Curvature = 99, ;
MousePointer = 15, ;
ToolTipText = "Summary help", ;
BackColor = RGB(0,255,0), ;
Name = "Shape1"

ADD OBJECT label1 AS label WITH ;
AutoSize = .T., ;
FontBold = .T., ;
FontSize = 14, ;
Anchor = 768, ;
BackStyle = 0, ;
Caption = "", ;
Height = 25, ;
Left = 96, ;
Top = 628, ;
Width = 2, ;
ForeColor = RGB(255,255,255), ;
Name = "Label1"

PROCEDURE yactions
lparameters url
url=right(allt(url),2)
if !int(val(url))>0
return .f.
endi
*can code your vfp actions (even navigations url) from here
*if navigation urls, preferable to add target="_blank" to fire a new window(and dont use the form)

do case
case right(allt(url),3)=="#01"
*run/n mspaint
case right(allt(url),3)=="#02"
*run/n notepad
case right(allt(url),3)=="#03"
*****
case right(allt(url),3)=="#04"
case right(allt(url),3)=="#05"
case right(allt(url),3)=="#06"
case right(allt(url),3)=="#07"
case right(allt(url),3)=="#08"
case right(allt(url),3)=="#09"
case right(allt(url),3)=="#10"
case right(allt(url),3)=="#11"
case right(allt(url),3)=="#12"

case right(allt(url),3)=="#13"
case right(allt(url),3)=="#14"
case right(allt(url),3)=="#15"
case right(allt(url),3)=="#16"
case right(allt(url),3)=="#17"
case right(allt(url),3)=="#18"
case right(allt(url),3)=="#19"
case right(allt(url),3)=="#20"
case right(allt(url),3)=="#21"
case right(allt(url),3)=="#22"
case right(allt(url),3)=="#23"
case right(allt(url),3)=="#24"
case right(allt(url),3)=="#25"
endcase
*fire a sound here
set bell to addbs(getenv("windir"))+"media\notify.wav"
??chr(7)

thisform.label1.caption="submenu "+url+" of yactions:  can do something from here !"
inke(1.5)  &&sleep is not adequat(block tiles and navigation here)
thisform.label1.caption=""
ENDPROC

PROCEDURE ybuild
Local m.myvar
TEXT to m.myvar noshow
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>Live Tiles</title>
<link href="MetroJs.css" rel="stylesheet" type="text/css">
</head>
<body bgcolor=black>
<div class="tiles"  style="margin-top:10px;float:left;height:560px;width:95%;background-color:black;border-width:5px;border-style:solid;border-color:white;border-radius:25px;padding:10px;">

<div class="content-wrapper tiles blue">
<section class="tile-group four-wide first"  style="margin-top:0px;">
		<div class="live-tile" data-delay="6000" data-mode="flip" data-bounce="true" data-direction="horizontal">
			<div>
				<a href="#01"> <img src="yimages/1.png" class="full" alt="Taghit" title="Taghit" /></a>
			</div>
			<div>
				<a href="#02" > <img src="yimages/2.png" title="ymetroJS" class="full" alt="ymetroJS" /></a>
			</div>
		</div>
		<div class="live-tile two-wide exclude">
			<div><p>Hello, <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.Lorem ipsum dolor sit amet, consectetur adipiscing elit.Lorem ipsum dolor sit amet, consectetur adipiscing elit.Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p></p></div>
		<div><a href="#27"> <img class="full" src="yimages/26.jpg" alt="B.Yousfi" /></a></div>
		</div>
		
		<div class="live-tile me" data-mode="slide" data-stops="50%,100%,0px" data-link="#03" a-bounce="true" data-stack="true" data-delay="4250">
			<div><img class="full" src="yimages/3.png" alt="B.Yousfi" /></div>
			<div class="accent orange"><span class="p-left p-bottom metroExtraLarge">B.Yousfi</span></div>
		</div>
		
		<div class="live-tile two-wide accent emerald" data-pause-onhover="true" data-bounce="true" data-link="#04" data-new-window="false" >
		 <div>
				<a href="#03"><img class="full" src="yimages/4.jpg" alt="" /></a></div>
			<div>
				<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.Lorem ipsum dolor sit amet, consectetur adipiscing elit.Lorem ipsum dolor sit amet, consectetur adipiscing elit.Lorem ipsum dolor sit amet, consectetur adipiscing elit.Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
				<span class="tile-title">B.Yousfi</span>
			</div>
		</div>
		
		<div class="live-tile skills exclude">
<ul class="flip-list skill-list nineTiles" data-mode="flip-list" data-back-isbg="true" data-always-trigger="true" data-pause-onnhover="true" data-swap="image" data-initdelay="2000" data-delay="5000">
<li><div><a href="#04"><img src="yimages/26.jpg" alt="front"></a></div> <div class="accent"><a href="#05"> <img src="yimages/3.png" alt="back" ></a></div></li>
				<li data-direction="horizontal">   <div><a href="#83"><img src="yimages/4.jpg" alt="front"></a></div><div><img src="yimages/5.png" alt="back" ></a></a></div></li>
				<li><div><a href="#06"><img src="yimages/6.png" alt="front"></a></div>    <div><a href="#06"><img src="yimages/7.png" alt="back" ></div></a></li>
				<li><div><a href="#08"><img src="yimages/8.png" alt="front"></a></div>    <div><a href="#08"><img src="yimages/9.png" alt="back" ></div></a></li>
				<li><div><a href="#10"><img src="yimages/26.jpg" alt="front"></a></div>        <div><a href="#10"><img src="yimages/10.png" alt="back" ></a></div></li>
				<li><div><a href="#12"><img src="yimages/11.png" alt="front" ></a></div>  <div><a href="#12"><img src="yimages/12.png" alt="back" >  </a></div></li>
				<li><div><a href="#13"><img  src="yimages/13.png" alt="front"></a></div>  <div><a href="#13"><img src="yimages/14.png" alt="back" >  </a></div></li>
				<li><div><a href="#14"><img  src="yimages/15.png" alt="front" ></a></div> <div><a href="#14"><img src="yimages/16.png" alt="back" >  </a></div></li>
				<li><div><a href="#15"><img  src="yimages/17.png" alt="front" ></a></div> <div><a href="#15"><img src="yimages/18.png" alt="back" >  </a></div></li>
			</ul>
		</div>
		<div class="live-tile projects" data-mode="slide" data-swap-back="image" data-stack="true" data-bounce="true" data-link="#05" data-stops="100%" data-delay="8000">
			<div>
				<p>
					<span class="metroExtraLarge title">Projects</span>
					<a href="#16"><img src="yimages/26.jpg" alt="projects" class="full head" /></a>
				</p>
			</div>
			<div>
				<a href="#17"><img src="yimages/19.png" class="full" alt=""></a>
			</div>
		</div>

<div class="tile-strip four-wide half-tall">
			<ul class="flip-list color-strip" data-mode="flip-list" data-always-trigger="true" data-initdelay="250" data-delay="3500">
				<li class="half-tile" data-direction="horizontal"><div></div><div class="accent orange"><p>1.Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p></div></li>
				<li class="half-tile"><div><a href="#18"><img src="yimages/20.png" alt="front" ></a></div><div class="accent green"><p>2.Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p></div></li>
				<li class="half-tile"><div><a href="#19"><img src="yimages/21.png" alt="front" ></a></div><div class="accent teal"><p>3.Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p></div></li>
				<li class="half-tile"><div><a href="#20"><img src="yimages/22.png" alt="front" ></a><div class="accent red"><p>4.Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p></div></li>
				<li class="half-tile"><div><a href="#21"><img src="yimages/23.png" alt="front" ></a></div><div class="accent yellow"><p>5.Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p></div></li>
				<li class="half-tile"><div><a href="#22"><img src="yimages/24.png" alt="front" ></a></div><div class="accent steel"><p>6.Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p></div></li>
				<li class="half-tile"><div><a href="#23"><img src="yimages/26.jpg" alt="front" ></a></div><div class="accent pink"><p>7.Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p></div></li>
				<li class="half-tile"><div><a href="#24"><img src="yimages/25.png" alt="front" ></a><div class="accent purple"><p>8.Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p></div></li>
			</ul>
		</div>
		<br>
	  <center><h2 style="color:red ;">yMetroJS UI menu sample </h2></center>
	</section>
*note:jquery-1.js  is a light version of jquery (91.6 ko)
<script src="jQuery-1.js" type="text/javascript"></script>
<script src="MetroJs.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
$(".live-tile,.flip-list").liveTile();
});
</script>

</body></html>
ENDTEXT
Local m.lcdest
m.lcdest=m.yrep+"ymetroJS.html"
Strtofile(m.myvar,m.lcdest)
Thisform.olecontrol1.Navigate(m.lcdest)
ENDPROC

PROCEDURE Destroy
set curs on
clea events
ENDPROC

PROCEDURE Init
Publi m.yrep
m.yrep=Addbs(Justpath(Sys(16,1)))
Set Defa To (yrep)
set curs off
if ! file("jQuery-1.js") and ! file("metroJS.css")
messagebox("jQery-.js and metroJS.js files amust mandatory in the start folder making this code to work as well !",16+4096)
return .f.
endi
thisform.ybuild()
ENDPROC

PROCEDURE Load
set safe off
_screen.windowstate=1
close data all
ENDPROC

PROCEDURE olecontrol1.BeforeNavigate2
*** Événement de contrôle ActiveX  ***
LPARAMETERS pdisp, url, flags, targetframename, postdata, headers, cancel
cancel=.t.
thisform.yactions(url)
return .f.
ENDPROC

PROCEDURE olecontrol1.Init
this.silent=.t.
ENDPROC


PROCEDURE shape1.Click
local m.myvar
text to m.myvar noshow
Metro JS is a JavaScript plugin for jQuery developed to easily enable Metro interfaces on the web.
Following are the main features :
- liveTile
-Description: Turns a container into a liveTile
-applicationBar
-While fully functional, the application bar is still being finished and currently requires all static markup.
-The documentation for .applicationBar is still being constructed. The basic premise is that a container is fixed
to the bottom of the window or document when position: fixed; is not supported. Turning on theming will generate
the theme links inside of the container.
-Hardware acceleration. CSS animations, transforms and transitions are used to boost performance when available.
-Custom triggering functions to allow for custom flip-list patterns .You can implement your own triggerDelay
function to affect the randomness of flip list.
-Animation repeat property to allow for a static number of animations (i.e. data-repeat=”5?) data-repeat is
available.
the project is in development phase.its Created by Drew Green Well.
can read infos at :
http://jquer.in/responsive/metro-js/
http://www.drewgreenwell.com/projects/metrojs?utm_source=jquer.in&utm_medium=website&utm_campaign=content-curation
can download the library  MetroJS-full0.9.71.zip (262 ko) :
metroJS.min.js  metrojs.js
metroCss.min.css & metroCss.css
and some JPG.
can customize the metrojs.css with a builder themes generator
(http://www.drewgreenwell.com/projects/metrojs?utm_source=jquer.in&utm_medium=website&utm_campaign=content-curation#liveTileMethods)
metroJS methods are in this link also.
VFP can take advantage of the power of the web to animate tiles. There are a multitude of documented classes that can be
customized and used with simplicity.
I adapted this tool to run environment by using the beforeNavigate2 method.
first download some pngs (for personal use only).
endtext
*messagebox(m.myvar,0+32+4096,'Summary help')

#define MB_ICONINFORMATION 0x00000040
#define MB_OK 0x00000000
#define MB_APPLMODAL 0x00000000
#define  MB_DEFBUTTON1 0x00000000

DECLARE INTEGER MessageBox IN user32 As MessageBoxA;
INTEGER hwnd,;
STRING  lpText,;
STRING  lpCaption,;
INTEGER wType

*buttons
#define MB_ABORTRETRYIGNORE 0x00000002
#define MB_CANCELTRYCONTINUE 0x00000006
#define MB_HELP 0x00004000

#define MB_OKCANCEL 0x00000001
#define MB_RETRYCANCEL 0x00000005
#define MB_YESNO  0x00000004
#define MB_YESNOCANCEL 0x00000003

*Icons
#define  MB_ICONEXCLAMATION 0x00000030
#define MB_ICONWARNING 0x00000030

#define MB_ICONASTERISK 0x00000040
#define MB_ICONQUESTION 0x00000020
#define MB_ICONSTOP 0x00000010
#define MB_ICONERROR 0x00000010
#define MB_ICONHAND  0x00000010

*To indicate the default button, specify one of the following values.

#define MB_DEFBUTTON2 0x00000100
#define MB_DEFBUTTON3 0x00000200
#define MB_DEFBUTTON4 0x00000300

*To indicate the modality of the dialog box, specify one of the following values.

#define MB_SYSTEMMODAL 0x00001000
#define MB_TASKMODAL 0x00002000

*To specify other options, use one or more of the following values.
#define MB_DEFAULT_DESKTOP_ONLY 0x00020000
#define MB_RIGHT 0x00080000
#define MB_RTLREADING  0x00100000
#define MB_SETFOREGROUND  0x00010000
#define MB_TOPMOST  0x00040000
#define MB_SERVICE_NOTIFICATION 0x00200000

*Return code
#define IDABORT 3
#define IDCANCEL 2
#define IDCONTINUE 11
#define IDIGNORE 5
#define IDNO 7
#define IDOK 1
#define IDRETRY 4
#define IDTRYAGAIN 10
#define IDYES 6
MessageBoxA(_vfp.hwnd,m.myvar,"metroJS Tiles sample",MB_APPLMODAL+MB_OK +MB_ICONINFORMATION +MB_DEFBUTTON1 )
ENDPROC


ENDDEFINE
*
*-- EndDefine: ymetroJS


only one exercise thing must do is to manage html script.the JS libraries does the essential things.Adding tag div and tweaking them to build a real metro menu as win8/10 does.
only one exercise thing must do is to manage html script.the JS libraries does the essential things.Adding tag div and tweaking them to build a real metro menu as win8/10 does.
only one exercise thing must do is to manage html script.the JS libraries does the essential things.Adding tag div and tweaking them to build a real metro menu as win8/10 does.
only one exercise thing must do is to manage html script.the JS libraries does the essential things.Adding tag div and tweaking them to build a real metro menu as win8/10 does.

only one exercise thing must do is to manage html script.the JS libraries does the essential things.Adding tag div and tweaking them to build a real metro menu as win8/10 does.

A web metro interface to build tiles - metroJS

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


*2* added on friday 30 of december 2016
*A said above,this modified  code of *1* version, builds a metro menu from javascript library
*this code links directly to web to get the libraries(no need to download them)-internet must be connected-
*be sure 26 images/icons are downloaded into the folder yimages with code above (can customize these).(or can link them directly in web with their location,in code).
*note the metroJS.css in the first version *1* was customized particualry in tiles dimensions.this one uses the original css (150px width/height) and seems smaller then the first result.its normal.

publi yform
yform=newObject("ymetroJS")
yform.show
read events
retu
*
DEFINE CLASS ymetroJS AS form
BorderStyle = 3
Height = 654
Width = 886
ShowWindow = 2
ShowTips = .T.
AutoCenter = .T.
Caption = "MetroJS sample"
BackColor = RGB(0,0,0)
Name = "Form1"

ADD OBJECT olecontrol1 AS olecontrol WITH ;
Oleclass="shell.explorer.2", ;
Top = 0, ;
Left = 0, ;
Height = 624, ;
Width = 888, ;
Anchor = 15, ;
Name = "Olecontrol1"

ADD OBJECT shape1 AS shape WITH ;
Top = 631, ;
Left = 24, ;
Height = 20, ;
Width = 20, ;
Anchor = 768, ;
Curvature = 99, ;
MousePointer = 15, ;
ToolTipText = "Summary help", ;
BackColor = RGB(0,255,0), ;
Name = "Shape1"

ADD OBJECT label1 AS label WITH ;
AutoSize = .T., ;
FontBold = .T., ;
FontSize = 14, ;
Anchor = 768, ;
BackStyle = 0, ;
Caption = "", ;
Height = 25, ;
Left = 96, ;
Top = 628, ;
Width = 2, ;
ForeColor = RGB(255,255,255), ;
Name = "Label1"

PROCEDURE yactions
lparameters url
url=right(allt(url),2)
if !int(val(url))>0
return .f.
endi
*can code your vfp actions (even navigations url) from here
*if navigation urls, preferable to add target="_blank" to fire a new window(and dont use the form)

do case
case right(allt(url),3)=="#01"
*run/n mspaint
case right(allt(url),3)=="#02"
*run/n notepad
case right(allt(url),3)=="#03"
case right(allt(url),3)=="#04"
case right(allt(url),3)=="#05"
case right(allt(url),3)=="#06"
case right(allt(url),3)=="#07"
case right(allt(url),3)=="#08"
case right(allt(url),3)=="#09"
case right(allt(url),3)=="#10"
case right(allt(url),3)=="#11"
case right(allt(url),3)=="#12"
case right(allt(url),3)=="#13"
case right(allt(url),3)=="#14"
case right(allt(url),3)=="#15"
case right(allt(url),3)=="#16"
case right(allt(url),3)=="#17"
case right(allt(url),3)=="#18"
case right(allt(url),3)=="#19"
case right(allt(url),3)=="#20"
case right(allt(url),3)=="#21"
case right(allt(url),3)=="#22"
case right(allt(url),3)=="#23"
case right(allt(url),3)=="#24"
case right(allt(url),3)=="#25"
endcase
*fire a sound here
set bell to addbs(getenv("windir"))+"media\notify.wav"
??chr(7)

thisform.label1.caption="submenu "+url+" of yactions:  can do something from here !"
inke(1.5)  &&sleep is not adequat(block tiles and navigation here)
thisform.label1.caption=""
ENDPROC

PROCEDURE ybuild
local m.link1,m.link2
m.link1="http://www.drewgreenwell.com/content/metrojs.css"
m.link2="http://www.drewgreenwell.com/scripts/metrojs.js"

Local m.myvar
TEXT to m.myvar textmerge noshow
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>Live Tiles</title>
</head>
<body bgcolor=black>
<div class="tiles"  style="margin-top:10px;float:left;height:560px;width:75%;background-color:black;border-width:5px;border-style:solid;border-color:white;border-radius:25px;padding:10px;">

<div class="content-wrapper tiles blue">
<section class="tile-group four-wide first"  style="margin-top:0px;">
<div class="live-tile" data-delay="6000" data-mode="flip" data-bounce="true" data-direction="horizontal">
<div>
<a href="#01"> <img src="yimages/1.png" class="full" alt="Taghit" title="Taghit" /></a>
</div>
<div>
<a href="#02" > <img src="yimages/2.png" title="ymetroJS" class="full" alt="ymetroJS" /></a>
</div>
</div>
<div class="live-tile two-wide exclude">
<div><p>Hello, <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.Lorem ipsum dolor sit amet, consectetur adipiscing elit.Lorem ipsum dolor sit amet, consectetur adipiscing elit.Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p></p></div>
<div><a href="#27"> <img class="full" src="yimages/26.jpg" alt="B.Yousfi" /></a></div>
</div>

<div class="live-tile me" data-mode="slide" data-stops="50%,100%,0px" data-link="#03" a-bounce="true" data-stack="true" data-delay="4250">
<div><img class="full" src="yimages/3.png" alt="B.Yousfi" /></div>
<div class="accent orange"><span class="p-left p-bottom metroExtraLarge">B.Yousfi</span></div>
</div>

<div class="live-tile two-wide accent emerald" data-pause-onhover="true" data-bounce="true" data-link="#04" data-new-window="false" >
<div>
<a href="#03"><img class="full" src="yimages/4.jpg" alt="" /></a></div>
<div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.Lorem ipsum dolor sit amet, consectetur adipiscing elit.Lorem ipsum dolor sit amet, consectetur adipiscing elit.Lorem ipsum dolor sit amet, consectetur adipiscing elit.Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<span class="tile-title">B.Yousfi</span>
</div>
</div>

<div class="live-tile skills exclude">
<ul class="flip-list skill-list nineTiles" data-mode="flip-list" data-back-isbg="true" data-always-trigger="true" data-pause-onnhover="true" data-swap="image" data-initdelay="2000" data-delay="5000">
<li><div><a href="#04"><img src="yimages/26.jpg" alt="front"></a></div> <div class="accent"><a href="#05"> <img src="yimages/3.png" alt="back" ></a></div></li>
<li data-direction="horizontal">   <div><a href="#83"><img src="yimages/4.jpg" alt="front"></a></div><div><img src="yimages/5.png" alt="back" ></a></a></div></li>
<li><div><a href="#06"><img src="yimages/6.png" alt="front"></a></div>    <div><a href="#06"><img src="yimages/7.png" alt="back" ></div></a></li>
<li><div><a href="#08"><img src="yimages/8.png" alt="front"></a></div>    <div><a href="#08"><img src="yimages/9.png" alt="back" ></div></a></li>
<li><div><a href="#10"><img src="yimages/26.jpg" alt="front"></a></div>        <div><a href="#10"><img src="yimages/10.png" alt="back" ></a></div></li>
<li><div><a href="#12"><img src="yimages/11.png" alt="front" ></a></div>  <div><a href="#12"><img src="yimages/12.png" alt="back" >  </a></div></li>
<li><div><a href="#13"><img  src="yimages/13.png" alt="front"></a></div>  <div><a href="#13"><img src="yimages/14.png" alt="back" >  </a></div></li>
<li><div><a href="#14"><img  src="yimages/15.png" alt="front" ></a></div> <div><a href="#14"><img src="yimages/16.png" alt="back" >  </a></div></li>
<li><div><a href="#15"><img  src="yimages/17.png" alt="front" ></a></div> <div><a href="#15"><img src="yimages/18.png" alt="back" >  </a></div></li>
</ul>
</div>
<div class="live-tile projects" data-mode="slide" data-swap-back="image" data-stack="true" data-bounce="true" data-link="#05" data-stops="100%" data-delay="8000">
<div>
<p>
<span class="metroExtraLarge title">Projects</span>
<a href="#16"><img src="yimages/26.jpg" alt="projects" class="full head" /></a>
</p>
</div>
<div>
<a href="#17"><img src="yimages/19.png" class="full" alt=""></a>
</div>
</div>

<div class="tile-strip four-wide half-tall">
<ul class="flip-list color-strip" data-mode="flip-list" data-always-trigger="true" data-initdelay="250" data-delay="3500">
<li class="half-tile" data-direction="horizontal"><div></div><div class="accent orange"><p>1.Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p></div></li>
<li class="half-tile"><div><a href="#18"><img src="yimages/20.png" alt="front" ></a></div><div class="accent green"><p>2.Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p></div></li>
<li class="half-tile"><div><a href="#19"><img src="yimages/21.png" alt="front" ></a></div><div class="accent teal"><p>3.Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p></div></li>
<li class="half-tile"><div><a href="#20"><img src="yimages/22.png" alt="front" ></a><div class="accent red"><p>4.Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p></div></li>
<li class="half-tile"><div><a href="#21"><img src="yimages/23.png" alt="front" ></a></div><div class="accent yellow"><p>5.Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p></div></li>
<li class="half-tile"><div><a href="#22"><img src="yimages/24.png" alt="front" ></a></div><div class="accent steel"><p>6.Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p></div></li>
<li class="half-tile"><div><a href="#23"><img src="yimages/26.jpg" alt="front" ></a></div><div class="accent pink"><p>7.Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p></div></li>
<li class="half-tile"><div><a href="#24"><img src="yimages/25.png" alt="front" ></a><div class="accent purple"><p>8.Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p></div></li>
</ul>
</div>
<br>
<center><h2 style="color:red ;">yMetroJS UI menu sample</h2></center>
</section>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.js"></script>
<script src="<<m.link2>>" type="text/javascript"></script>
<link href="<<m.link1>>" rel="stylesheet" type="text/css">
<script type="text/javascript">
$(document).ready(function () {
$(".live-tile,.flip-list").liveTile();
});
</script>

</body></html>
ENDTEXT
Local m.lcdest
m.lcdest=m.yrep+"ymetroJS.html"
Strtofile(m.myvar,m.lcdest)
Thisform.olecontrol1.Navigate(m.lcdest)
ENDPROC

PROCEDURE Destroy
set curs on
clea events
ENDPROC

PROCEDURE Init
Publi m.yrep
m.yrep=Addbs(Justpath(Sys(16,1)))
Set Defa To (yrep)
set curs off
thisform.ybuild()
ENDPROC

PROCEDURE Load
set safe off
_screen.windowstate=1
close data all
ENDPROC

PROCEDURE olecontrol1.BeforeNavigate2
*** Événement de contrôle ActiveX  ***
LPARAMETERS pdisp, url, flags, targetframename, postdata, headers, cancel
cancel=.t.
thisform.yactions(url)
return .f.
ENDPROC

PROCEDURE olecontrol1.Init
this.silent=.t.
ENDPROC

PROCEDURE shape1.Click
local m.myvar
text to m.myvar noshow
Metro JS is a JavaScript plugin for jQuery developed to easily enable Metro interfaces on the web.
Following are the main features :
- liveTile
-Description: Turns a container into a liveTile
-applicationBar
-While fully functional, the application bar is still being finished and currently requires all static markup.
-The documentation for .applicationBar is still being constructed. The basic premise is that a container is fixed
to the bottom of the window or document when position: fixed; is not supported. Turning on theming will generate
the theme links inside of the container.
-Hardware acceleration. CSS animations, transforms and transitions are used to boost performance when available.
-Custom triggering functions to allow for custom flip-list patterns .You can implement your own triggerDelay
function to affect the randomness of flip list.
-Animation repeat property to allow for a static number of animations (i.e. data-repeat=”5?) data-repeat is
available.
the project is in development phase.its Created by Drew Green Well.
can read infos at :
http://jquer.in/responsive/metro-js/
http://www.drewgreenwell.com/projects/metrojs?utm_source=jquer.in&utm_medium=website&utm_campaign=content-curation
can download the library  MetroJS-full0.9.71.zip (262 ko) :
metroJS.min.js  metrojs.js
metroCss.min.css & metroCss.css
and some JPG.
can customize the metrojs.css with a builder themes generator
(http://www.drewgreenwell.com/projects/metrojs?utm_source=jquer.in&utm_medium=website&utm_campaign=content-curation#liveTileMethods)
metroJS methods are in this link also.
VFP can take advantage of the power of the web to animate tiles. There are a multitude of documented classes that can be
customized and used with simplicity.
I adapted this tool to run environment by using the beforeNavigate2 method.
first download some pngs (for personal use only).
endtext
*messagebox(m.myvar,0+32+4096,'Summary help')

#define MB_ICONINFORMATION 0x00000040
#define MB_OK 0x00000000
#define MB_APPLMODAL 0x00000000
#define  MB_DEFBUTTON1 0x00000000

DECLARE INTEGER MessageBox IN user32 As MessageBoxA;
INTEGER hwnd,;
STRING  lpText,;
STRING  lpCaption,;
INTEGER wType

*buttons
#define MB_ABORTRETRYIGNORE 0x00000002
#define MB_CANCELTRYCONTINUE 0x00000006
#define MB_HELP 0x00004000

#define MB_OKCANCEL 0x00000001
#define MB_RETRYCANCEL 0x00000005
#define MB_YESNO  0x00000004
#define MB_YESNOCANCEL 0x00000003

*Icons
#define  MB_ICONEXCLAMATION 0x00000030
#define MB_ICONWARNING 0x00000030

#define MB_ICONASTERISK 0x00000040
#define MB_ICONQUESTION 0x00000020
#define MB_ICONSTOP 0x00000010
#define MB_ICONERROR 0x00000010
#define MB_ICONHAND  0x00000010

*To indicate the default button, specify one of the following values.

#define MB_DEFBUTTON2 0x00000100
#define MB_DEFBUTTON3 0x00000200
#define MB_DEFBUTTON4 0x00000300

*To indicate the modality of the dialog box, specify one of the following values.

#define MB_SYSTEMMODAL 0x00001000
#define MB_TASKMODAL 0x00002000

*To specify other options, use one or more of the following values.
#define MB_DEFAULT_DESKTOP_ONLY 0x00020000
#define MB_RIGHT 0x00080000
#define MB_RTLREADING  0x00100000
#define MB_SETFOREGROUND  0x00010000
#define MB_TOPMOST  0x00040000
#define MB_SERVICE_NOTIFICATION 0x00200000

*Return code
#define IDABORT 3
#define IDCANCEL 2
#define IDCONTINUE 11
#define IDIGNORE 5
#define IDNO 7
#define IDOK 1
#define IDRETRY 4
#define IDTRYAGAIN 10
#define IDYES 6
MessageBoxA(_vfp.hwnd,m.myvar,"metroJS Tiles sample",MB_APPLMODAL+MB_OK +MB_ICONINFORMATION +MB_DEFBUTTON1 )
ENDPROC
ENDDEFINE
*
*-- EndDefine: ymetroJS


A web metro interface to build tiles - metroJS

in the form.yactions method can fire any UI application as new,sport,reader....here news UI app:

&&shellexecute
DECLARE INTEGER ShellExecute IN SHELL32.DLL INTEGER nWinHandle,;
                                            STRING cOperation,;
                                            STRING cFileName,;
                                            STRING cParameters,;
                                            STRING cDirectory,;
                                            INTEGER nShowWindow

result = ShellExecute(0, "open", explorer.exe,"shell:Bignews://","",1)

 

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


*3* 
*created  on monday 12 december 2016
*this is a simple demo of metroJS with slideshow and other tiles.
* VFP actions are not coded here.
*some images are from download made with the first code above (yimages folder), slideshow images are web linked directly.
*As can see ,able to  build beautiful diaporamas with metroJS library with many effects.


publi yform
yform=createObject("ymetroJS")
yform.show
read events
retu
*
DEFINE CLASS ymetroJS AS form
BorderStyle = 3
Height = 741
Width = 880
ShowWindow = 2
ShowTips = .T.
AutoCenter = .T.
Caption = "MetroJS sample"
WindowState = 2  &&0
Name = "Form1"

ADD OBJECT olecontrol1 AS olecontrol WITH ;
Oleclass="shell.explorer.2" , ;
Top = 0, ;
Left = 0, ;
Height = 740, ;
Width = 880, ;
Anchor = 15, ;
Name = "Olecontrol1"

PROCEDURE ybuild
*gather some web photos(10 here)
set memowidth to 8192
local m.myv
text to m.myv noshow
http://blauekamel.com/images/com_fwgallery/files/43/taghit-01.JPG
http://intymag.com/wp-content/uploads/2016/03/mon-weekend-%C3%A0-taghit-e1458230519606.jpg
http://www.vitaminedz.org/photos/118/118859-photos-taghit-palmeraie-et-dunes-dorees-novembre-2006.jpg
http://www.vitaminedz.com/photos/19/19939-taghit-l-enchanteresse-ou-carrement-l-nvoutante.jpg
https://s-media-cache-ak0.pinimg.com/originals/31/7f/e8/317fe8b6f51e0f58ebda83f70fb77a8f.jpg
https://upload.wikimedia.org/wikipedia/commons/thumb/f/fd/Vue_de_Taghit.jpg/280px-Vue_de_Taghit.jpg
http://www.algerie-focus.com/wp-content/uploads/2014/12/B%C3%A9char-Taghit_20-d%C3%A9cembre-2014.jpg
http://www.alger-culture.com/images/news/Kseur%20taghit.jpg
http://p2.storage.canalblog.com/20/24/763987/55549657.jpg
https://s-media-cache-ak0.pinimg.com/564x/1b/91/b4/1b91b48c267ff3cba9e548b227b5c5d2.jpg
endtext
local m.xx
m.xx=""
for i=1 to memlines(m.myv)
m.xx=m.xx+[<div ><img class="full" src="] + allt(mline(m.myv,i))+[" alt="]+trans(i)+[" /><span class="tile-title">Taghit Algeria -]+trans(i)+[</span></div>]+chr(13)
endfor

Local m.myvar
TEXT to m.myvar textmerge noshow
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>Live Tiles</title>
<link href="MetroJs.css" rel="stylesheet" type="text/css">
</head>
<body bgcolor=black>
<!-- Apply blue theme as default for all tiles, but use the tiles class to allow the theme to be swapped -->

<div class="tiles blue tile-group four-wide" style="with:100%;height:100%;"">

<!-- Sliding Tile that shows 100% of the back tile every 3 seconds -->
<div class="live-tile" data-speed="750" data-delay="3000">
<span class="tile-title">slide tile</span>
<div><img class="full" src="yimages/1.png" alt="1" /></div>
<div><img class="full" src="yimages/2.png" alt="2" /></div>
</div>

<!-- Red Flip Tile that flips every 4 seconds -->
<div class="red live-tile" data-mode="flip" data-delay="4000">
<div>
	<img class="full" src="yimages/3.png" alt="3" />
	<span class="tile-title">flip tile front</span>
</div>
<div>
	<img class="full" src="yimages/4.jpg" alt="4" />
	<span class="tile-title">flip tile back</span>
</div>
</div>

<!-- Carousel Tile that slides 4 tile faces every 3.5 seconds -->
<div class="live-tile" data-mode="carousel" data-direction="horizontal" data-delay="3500">
<div>
	<img class="full" src="yimages/5.png" alt="1" />
	<span class="tile-title">carousel slide 1</span>
</div>
<div>
	<img class="full" src="yimages/6.png" alt="2" />
	<span class="tile-title accent">carousel slide 2</span>
</div>
<div>
	<img class="full" src="yimages/7.png" alt="3" />
	<span class="tile-title">carousel slide 3</span>
</div>
<div>
	<img class="full" src="yimages/8.png" alt="4" />
	<span class="tile-title accent">carousel slide 4</span>
</div>
</div>

<!-- Mango Flip List that triggers every 3 seconds -->
<div class="list-tile mango">
<span class="tile-title">flip list</span>
<ul class="flip-list fourTiles" data-mode="flip-list" data-delay="2000">
	<li>
		<div><img class="full" src="yimages/9.png" alt="1" /></div>
		<div><img class="full" src="yimages/10.png" alt="1" /></div>
	</li>
	<li>
		<div><img class="full" src="yimages/11.png"  alt="2" /></div>
		<div><img class="full" src="yimages/12.png" alt="2" /></div>
	</li>
	<li>
		<div><img class="full" src="yimages/13.png" alt="3" /></div>
		<div><img class="full" src="yimages/14.png" alt="3" /></div>
	</li>
	<li data-direction="horizontal">
		<div><img class="full" src="yimages/26.jpg" alt="4" /></div>
		<div><img class="full" src="yimages/4.jpg" alt="4" /></div>
	</li>
</ul>
</div>
</div>

<!-- Orange Stati Tile -->
<!-- Carousel Tile that slides 4 tile faces every 3.5 seconds -->
<div class="live-tile" data-mode="carousel" data-direction="horizontal" data-delay="3500" style="width:100%;height:500px;">
<<m.xx>>
</div>

<script src="jQuery-1.js" type="text/javascript"></script>
<script src="MetroJs.js" type="text/javascript"></script>

<!-- Activate live tiles -->
<script type="text/javascript">
// apply regular slide universally unless .exclude class is applied
// NOTE: The default options for each liveTile are being pulled from the 'data-' attributes
$(".live-tile, .flip-list").not(".exclude").liveTile();
</script>

</body></html>
ENDTEXT

Local m.lcdest
m.lcdest=m.yrep+"ymetroJS.html"
Strtofile(m.myvar,m.lcdest)
Thisform.olecontrol1.Navigate(m.lcdest)
ENDPROC

PROCEDURE Resize
thisform.ybuild()
ENDPROC

PROCEDURE Load
set safe off
_screen.windowstate=1
close data all
ENDPROC

PROCEDURE Init
Publi m.yrep
m.yrep=Addbs(Justpath(Sys(16,1)))
Set Defa To (yrep)

if ! file("jQuery-1.js") and ! file("metroJS.css")
messagebox("jQery-.js and metroJS.js files amust mandatory in the start folder making this code to work as well !",16+4096)
return .f.
endi
thisform.ybuild()
*jQuery-1.js is a minimal version of jQuery
ENDPROC

PROCEDURE Destroy
clea events
ENDPROC

PROCEDURE olecontrol1.BeforeNavigate2
*** Événement de contrôle ActiveX  ***
LPARAMETERS pdisp, url, flags, targetframename, postdata, headers, cancel
cancel=.t.
*thisform.yactions(url)  &&actions are not coded here
return .f.
ENDPROC

PROCEDURE olecontrol1.Init
this.silent=.t.
ENDPROC

ENDDEFINE
*
*-- EndDefine: ymetroJS


can build wonderfull diaporamas with metroJS (there is numberous effects can experient).Note can link directly to any web image.
can build wonderfull diaporamas with metroJS (there is numberous effects can experient).Note can link directly to any web image.

can build wonderfull diaporamas with metroJS (there is numberous effects can experient).Note can link directly to any web image.

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


*4* metroJS application with tiles, slideshow and appbar.
*Please correct a syntax problem due to provider editor.(see below images)
*this code shows how to work a complet application with metroJS interface.
*1.make some tiles , each one can fires a vfp url (real web url or vfp codes with the beforNavigate2 method.
*2.make an animation as slideshow.yimages folder must exists with pngs downloaded as above.
*3.apply a metroJS appBar at bottom with some icons to fire any web link (or even vfp codes).this is shown or hidden (in part) with bubbles buttons
*i added a vfp toolbar container (can hide or show) whose can link to any other codes.
*thez code can show/hide the appbar and the vfp container.
*can link to downloaded metroJS essential files on disc (metrojs.js  metrojs.css and jquery light or standard) or directly to web site (warning can be broken or problem internet).
*urls are not linked in ths code.can customize them as in code * 1 *.
*as said can build a complet web site with this sample.
*for more stuffs visit the author site.

with _screen  &&to manage visibility of metroJS appBar
.addproperty("resp",1)
.addproperty("xfooter","")
endwith

publi yform
yform=newObject("ymetroJS")
yform.show
read events
retu
*
DEFINE CLASS ymetroJS AS form
BorderStyle = 3
Height = 654
Width = 886
ShowWindow = 2
ShowTips = .T.
AutoCenter = .T.
Caption = "MetroJS : tiles, slideshow and Appbar   application."
BackColor = RGB(0,0,0)
Name = "Form1"

ADD OBJECT olecontrol1 AS olecontrol WITH ;
oleclass="shell.explorer.2", ;
Top = 0, ;
Left = 0, ;
Height = 612, ;
Width = 888, ;
Anchor = 15, ;
Name = "Olecontrol1"

ADD OBJECT shape1 AS shape WITH ;
Top = 630, ;
Left = 24, ;
Height = 20, ;
Width = 20, ;
Anchor = 768, ;
Curvature = 99, ;
MousePointer = 15, ;
ToolTipText = "Summary help", ;
BackColor = RGB(0,255,0), ;
Name = "Shape1"

ADD OBJECT shape2 AS shape WITH ;
Top = 630, ;
Left = 54, ;
Height = 20, ;
Width = 20, ;
Anchor = 768, ;
Curvature = 99, ;
MousePointer = 15, ;
ToolTipText = "VFP Toolbar container", ;
BackColor = RGB(255,0,0), ;
Name = "Shape2"

ADD OBJECT shape3 AS shape WITH ;
Top = 630, ;
Left = 54+30, ;
Height = 20, ;
Width = 20, ;
Anchor = 768, ;
Curvature = 99, ;
MousePointer = 15, ;
ToolTipText = "Appbar (disable/enable)", ;
BackColor = RGB(0,0,255), ;
Name = "Shape3"


ADD OBJECT label1 AS label WITH ;
AutoSize = .T., ;
FontBold = .T., ;
FontSize = 14, ;
Anchor = 768, ;
BackStyle = 0, ;
Caption = "", ;
Height = 25, ;
Left = 96, ;
Top = 628, ;
Width = 2, ;
ForeColor = RGB(255,255,255), ;
Name = "Label1"

ADD OBJECT ycnt as ycont with ;
name="ycnt"

PROCEDURE shape2.Click
with thisform.ycnt
.visible=!.visible
.zorder(0)
endwith
ENDPROC

PROCEDURE Shape3.Click
_screen.resp=iif(_screen.resp=1,2,1)
thisform.ybuild()
thisform.olecontrol1.refresh
endproc


PROCEDURE yactions
lparameters url
url=right(allt(url),2)
if !int(val(url))>0
return .f.
endi
*can code your vfp actions (even navigations url) from here
*if navigation urls, preferable to add target="_blank" to fire a new window(and dont use the form)

do case
case right(allt(url),3)=="#01"
*run/n mspaint
case right(allt(url),3)=="#02"
*run/n notepad
case right(allt(url),3)=="#03"
*****
case right(allt(url),3)=="#04"
case right(allt(url),3)=="#05"
case right(allt(url),3)=="#06"
case right(allt(url),3)=="#07"
case right(allt(url),3)=="#08"
case right(allt(url),3)=="#09"
case right(allt(url),3)=="#10"
case right(allt(url),3)=="#11"
case right(allt(url),3)=="#12"

case right(allt(url),3)=="#13"
case right(allt(url),3)=="#14"
case right(allt(url),3)=="#15"
case right(allt(url),3)=="#16"
case right(allt(url),3)=="#17"
case right(allt(url),3)=="#18"
case right(allt(url),3)=="#19"
case right(allt(url),3)=="#20"
case right(allt(url),3)=="#21"

case right(allt(url),3)=="#22"
case right(allt(url),3)=="#23"
case right(allt(url),3)=="#24"
case right(allt(url),3)=="#25"

endcase
*fire a sound here
set bell to addbs(getenv("windir"))+"media\notify.wav"
??chr(7)

thisform.label1.caption="submenu "+url+" of yactions:  can do something from here !"
inke(1.5)  &&sleep is not adequat(block tiles and navigation here)
thisform.label1.caption=""
ENDPROC


PROCEDURE ybuild

if _screen.resp=1
text to _screen.xfooter noshow
<footer class="appbar">
<nav>
<ul id="menu" class="appbar-buttons">
<li>
<a href="#" class="home"><img src="yimages/3.png" alt=""  onclick="alert('can make a web url here.')"/></a>
<span class="charm-title">home</span>
</li>
<li>
<a href="#" class="about"><img src="yimages/8.png" alt="" <img src="yimages/4.jpg" alt="" onclick="alert('can make a web url here.')" /></a>
<span class="charm-title">About</span>
</li>
<li>
<a href="#" target="_blank" class="twitter"><img src="yimages/10.png" alt="" onclick="alert('can make a web url here.')"/></a>
<span class="charm-title">Twitter</span>
</li>

<li>
<a href="#" target="_blank" class="calc"><img src="yimages/11.png" alt=""  onclick="alert('can make a web url here.')"/></a>
<span class="charm-title">calc</span>
</li>
<li>
<a href="#" target="_blank" class="search"><img src="yimages/12.png" alt=""  onclick="alert('can make a web url here.')"/></a>
<span class="charm-title">Search</span>
</li>
<li>
<a href="#" target="_blank" class="camera"><img src="yimages/13.png" alt="" onclick="alert('can make a web url here.')" /></a>
<span class="charm-title">Camera</span>
</li>
<li>
<a href="#" target="_blank" class="camera"><img src="yimages/14.png" alt="" onclick="alert('can make a web url here.')"/></a>
<span class="charm-title">Camera1</span>
</li>
<li>
<a href="#" target="_blank" class="camera"><img src="yimages/15.png" alt="" onclick="alert('can make a web url here.')"/></a>
<span class="charm-title">Camera2</span>
</li>
<li>
<a href="#" target="_blank" class="camera"><img src="yimages/16.png" alt="" /></a>
<span class="charm-title">Camera3</span>
</li>
</ul>
</nav>
<a class="etc">ooo</a>
<ul class="theme-options clear">
</ul>
<ul class="base-theme-options clear">
</ul>
</footer>
endtext

else
_screen.xfooter=""
endi


*gather some web photos(10 here)
set memowidth to 8192

local m.myv
text to m.myv noshow
http://blauekamel.com/images/com_fwgallery/files/43/taghit-01.JPG
http://intymag.com/wp-content/uploads/2016/03/mon-weekend-%C3%A0-taghit-e1458230519606.jpg
http://www.vitaminedz.org/photos/118/118859-photos-taghit-palmeraie-et-dunes-dorees-novembre-2006.jpg
http://www.vitaminedz.com/photos/19/19939-taghit-l-enchanteresse-ou-carrement-l-nvoutante.jpg
https://s-media-cache-ak0.pinimg.com/originals/31/7f/e8/317fe8b6f51e0f58ebda83f70fb77a8f.jpg
https://upload.wikimedia.org/wikipedia/commons/thumb/f/fd/Vue_de_Taghit.jpg/280px-Vue_de_Taghit.jpg
http://www.algerie-focus.com/wp-content/uploads/2014/12/B%C3%A9char-Taghit_20-d%C3%A9cembre-2014.jpg
http://www.alger-culture.com/images/news/Kseur%20taghit.jpg
http://p2.storage.canalblog.com/20/24/763987/55549657.jpg
https://s-media-cache-ak0.pinimg.com/564x/1b/91/b4/1b91b48c267ff3cba9e548b227b5c5d2.jpg
endtext
local m.xx
m.xx=""
for i=1 to memlines(m.myv)
m.xx=m.xx+[<div ><img class="full" src="] + allt(mline(m.myv,i))+[" alt="]+trans(i)+[" /><span class="tile-title">Taghit Algeria -]+trans(i)+[</span></div>]+chr(13)
endfor

Local m.myvar
TEXT to m.myvar textmerge noshow
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.js"></script>
<link rel="stylesheet" type="text/css" href="http://www.drewgreenwell.com/content/metrojs.css">
<script type="text/javascript" src="http://www.drewgreenwell.com/scripts/metrojs.js"></script>
<title>Tiles layouts</title>
</head>
<body bgcolor=black >

<div class="tiles">
<div class="live-tile">
<div style="background-color:Red;">   <img src="yimages/1.png" alt="" /></div>
<div style="background-color:Orange;"><img src="yimages/2.png" alt="" /></div>
</div>
<div class="live-tile" data-mode="flip">
<div style="background-color:green;">   <img src="yimages/3.png" alt="" /></div>
<div style="background-color:red;">     <img src="yimages/5.png" alt="" /></div>
</div>
<div class="list-tile">
<ul class="flip-list fourTiles" data-mode="flip-list">
<li><div style="background-color:Blue;">  <img src="yimages/1.png" alt="" />  </div><div style="background-color:Orange;"> <img src="yimages/10.png" alt="" /></div></li>
<li><div style="background-color:Orange;"><img src="yimages/8.png" alt="" />  </div><div style="background-color:Blue;">   <img src="yimages/11.png" alt="" /></div></li>
<li><div style="background-color:Green;"> <img src="yimages/3.png" alt="" />  </div><div style="background-color:Red;">    <img src="yimages/12.png" alt="" /></div></li>
<li><div style="background-color:Red;">   <img src="yimages/7.png" alt="" />  </div><div style="background-color:Green;">  <img src="yimages/13.png" alt="" /></div></li>
</ul>
</div>
<div class="live-tile">
<div style="background-color:Red;">    <img src="yimages/3.png" alt="" /></div>
<div style="background-color:Orange;"> <img src="yimages/5.png" alt="" /></div>
</div>
<div class="list-tile">
<ul class="flip-list fourTiles" data-mode="flip-list">
<li><div style="background-color:Blue;">   <img src="yimages/14.png" alt="" /></div><div style="background-color:Orange;"><img src="yimages/18.png" alt="" /></div></li>
<li><div style="background-color:Orange;"> <img src="yimages/15.png" alt="" /></div><div style="background-color:Blue;">  <img src="yimages/19.png" alt="" /></div></li>
<li><div style="background-color:Green;">  <img src="yimages/17.png" alt="" /></div><div style="background-color:Red;">   <img src="yimages/20.png" alt="" /></div></li>
<li><div style="background-color:Red;">    <img src="yimages/18.png" alt="" /></div><div style="background-color:Green;"> <img src="yimages/21.png" alt="" /></div></li>
</ul>
</div>
<div class="live-tile">
<div style="background-color:cyan;">    <img src="yimages/9.png"  alt="" /></div>
<div style="background-color:mango;"> <img src="yimages/14.png" alt="" /></div>
</div>


<!-- Carousel Tile that slides 4 tile faces every 3.5 seconds -->
<div class="live-tile" data-mode="carousel" data-direction="horizontal" data-delay="3500" style="width:100%;height:500px;">
<<m.xx>>
</div>

</div>
<<_screen.xfooter>>

<script type="text/javascript">
$(document).ready(function () {
$(".live-tile,.flip-list").liveTile();
});

var appBar, metroJs;
$(document).ready(function(){
appBar = $(".appbar").applicationBar({
preloadAltBaseTheme: true,
bindKeyboard: true,
metroLightUrl: 'images/metroIcons_light.jpg',
metroDarkUrl: 'images/metroIcons.jpg'
});		
});
</script>
</body>
</html>
ENDTEXT
Local m.lcdest
m.lcdest=m.yrep+"ymetroJS.html"
Strtofile(m.myvar,m.lcdest)
Thisform.olecontrol1.Navigate(m.lcdest)
ENDPROC

PROCEDURE Load
set safe off
_screen.windowstate=1
close data all
ENDPROC

PROCEDURE Init
Publi m.yrep
m.yrep=Addbs(Justpath(Sys(16,1)))
Set Defa To (yrep)
set curs off
if ! file("jQuery-1.js") and ! file("metroJS.css")
messagebox("jQery-.js and metroJS.js files amust mandatory in the start folder making this code to work as well !",16+4096)
return .f.
endi
thisform.windowstate=2
thisform.ybuild()
ENDPROC

PROCEDURE Destroy	
clea events
ENDPROC

PROCEDURE olecontrol1.BeforeNavigate2
*** Événement de contrôle ActiveX  ***
LPARAMETERS pdisp, url, flags, targetframename, postdata, headers, cancel
cancel=.t.
*messagebox("url="+url+chr(13)+"Do some vfp commands from here",0+32+4096,'',1000)
*thisform.yactions(url)
return .f.
ENDPROC

PROCEDURE olecontrol1.Init
this.silent=.t.
ENDPROC

PROCEDURE shape1.Click
local m.myvar
text to m.myvar noshow
this code shows how to work a complet application with metroJS interface.
1.make some tiles , each one can fires a vfp url (real web url or vfp codes with the beforNavigate2 method.
2.make an animation as slideshow
3.apply a metroJS appBar at bottom with some icons to fire any web link (or even vfp codes).this is show
or hidden (in part) with bubbles buttons

can link to downloaded metroJS essential files on disc (metrojs.js  metrojs.css and jquery light or standard) or
directly to web site (warning can be broken or problem internet).
urls are not linked in ths code.can customize them
as said can build a complet web site with this sample.
for more stuffs visit the author site.
endtext
messagebox(m.myvar,0+32+4096,'Summary help')
ENDPROC

Procedure my
LPARAMETERS nButton, nShift, nXCoord, nYCoord
*--- aevent create an array laEvents
Aevents( myArray, 0)
*--- reference the calling object
loObject = myArray[1]
messagebox(loObject.name+" clicked ! can do same code from this point.",0+32+4096,'',1000)
endproc

ENDDEFINE
*
*-- EndDefine: yemtroJS

DEFINE CLASS ycont AS container
Anchor = 768
Top = 605
Left = 102
Width = 769
Height = 61
BackStyle = 0
BorderWidth = 0
Name = "ycont"


ADD OBJECT image1 AS image WITH ;
Picture = "yimages\8.png", ;
Stretch = 2, ;
Height  = 44, ;
Left = 40, ;
Top = 9, ;
Width  = 44, ;
Name = "Image1"


ADD OBJECT image2 AS image WITH ;
Picture = "yimages\10.png", ;
Stretch = 2, ;
Height  = 44, ;
Left = 100, ;
Top = 9, ;
Width  = 44, ;
Name = "Image2"

ADD OBJECT image3 AS image WITH ;
Picture = "yimages\15.png", ;
Stretch = 2, ;
Height  = 44, ;
Left = 161, ;
Top = 9, ;
Width  = 44, ;
Name = "Image3"

ADD OBJECT image4 AS image WITH ;
Picture = "yimages\13.png", ;
Stretch = 2, ;
Height  = 44, ;
Left = 225, ;
Top = 9, ;
Width  = 44, ;
Name = "Image4"

ADD OBJECT image5 AS image WITH ;
Picture = "yimages\14.png", ;
Stretch = 2, ;
Height  = 44, ;
Left = 288, ;
Top = 9, ;
Width  = 44, ;
Name = "Image5"

ADD OBJECT image6 AS image WITH ;
Picture = "yimages\22.png", ;
Stretch = 2, ;
Height  = 44, ;
Left = 351, ;
Top = 9, ;
Width  = 44, ;
Name = "Image6"

ADD OBJECT image7 AS image WITH ;
Picture = "yimages\24.png", ;
Stretch = 2, ;
Height  = 44, ;
Left = 423, ;
Top = 9, ;
Width  = 44, ;
Name = "Image7"

ADD OBJECT image8 AS image WITH ;
Picture = "yimages\3.png", ;
Stretch = 2, ;
Height  = 44, ;
Left = 490, ;
Top = 10, ;
Width  = 44, ;
Name = "Image8"

ADD OBJECT image9 AS image WITH ;
Picture = "yimages\25.png", ;
Stretch = 2, ;
Height  = 44, ;
Left = 556, ;
Top = 10, ;
Width  = 44, ;
Name = "Image9"

ADD OBJECT image10 AS image WITH ;
Picture = "yimages\19.png", ;
Stretch = 2, ;
Height  = 44, ;
Left = 619, ;
Top = 12, ;
Width  = 44, ;
Name = "Image10"

ADD OBJECT image11 AS image WITH ;
Picture = "yimages\2.png", ;
Stretch = 2, ;
Height  = 44, ;
Left = 680, ;
Top = 12, ;
Width  = 44, ;
Name = "Image11"

PROCEDURE Init
with this
.setall("mousepointer",15,"image")
for i=1 to .controlcount
if  lower(.controls(i).class)=="image"
bindevent(.controls(i),"mousedown",thisform,"my")
endi
endfor
endwith
ENDPROC

ENDDEFINE
*
*-- EndDefine: ycont


to correct :<a class="etc">ooo</a> is to replace with <a class="etc">&bull;&bull;&bull;</a>   its an editor problem  in line 263 of code above (3bullets) instead ooo.Click 1 bullet to work with appbar.
to correct :<a class="etc">ooo</a> is to replace with <a class="etc">&bull;&bull;&bull;</a>   its an editor problem  in line 263 of code above (3bullets) instead ooo.Click 1 bullet to work with appbar.
to correct :<a class="etc">ooo</a> is to replace with <a class="etc">&bull;&bull;&bull;</a>   its an editor problem  in line 263 of code above (3bullets) instead ooo.Click 1 bullet to work with appbar.

to correct :<a class="etc">ooo</a> is to replace with <a class="etc">&bull;&bull;&bull;</a> its an editor problem in line 263 of code above (3bullets) instead ooo.Click 1 bullet to work with appbar.

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


*5* metroJS themes-adapted from the author site.
* metroJS layouts
*layouts are predefined in metroJS librairies.they can be set by a builder generator (dimensions)
*can make a combination of layouts in function what needed by main menu.
*there is 22 themes colors can applied to layouts.This is an illustration.
*correct the 3 bullets as above.

publi yform
yform=newObject("JSthemes")
yform.show
read events
retu
*
DEFINE CLASS JSthemes AS form
BorderStyle = 3
Height = 597
Width = 879
ShowWindow = 2
ShowTips = .T.
AutoCenter = .T.
Caption = "MetroJS sample themes-appbar"
WindowState = 0
Name = "Form1"

ADD OBJECT olecontrol1 AS olecontrol WITH ;
Oleclass="shell.explorer.2", ;
Top = 0, ;
Left = 0, ;
Height = 600, ;
Width = 880, ;
Anchor = 15, ;
Name = "Olecontrol1"

PROCEDURE ybuild
local m.myvar
text to m.myvar textmerge noshow
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,height=728,initial-scale=1" />

<link rel="stylesheet" href="http://www.drewgreenwell.com/content/site.css?v=0.9.77" />
<link rel="stylesheet" href="http://www.drewgreenwell.com/content/fa/assets/css/dg-font-awesome.min.css" type="text/css">
<!--[if IE 7]>
<link rel="stylesheet" href="http://www.drewgreenwell.com/content/fa/assets/css/dg-font-awesome-ie7.min.css">
<![endif]-->
<link rel="stylesheet" href="http://www.drewgreenwell.com/scripts/metrojs/bundles/metrojs.min.css?v=0.9.77dev" type="text/css" />

<script type="text/javascript" src="http://www.drewgreenwell.com/scripts/modernizr-2.5.3.js"></script>
<script type="text/javascript">window.MetroJsVersion = '0.9.77';</script>
</head>
<body class="desktop dark about">
<header>
<br>
<div class="site-title"><a href="#">MetroJS themes</a></div>
</header>

<section class="interior-content panorama clear-fix">
<div id="tiles" class="content-wrapper tiles blue">
<div class="first tile-group four-wide">

<div class="live-tile two-wide two-tall exclude" >
	<div>
		<p>
			<span class="metroLarger">
			There is 22 <strong>metroJS themes </strong>can be set.see the appbar below and click on any preset color to see the refection on the tiles.
a builder (see link below) can generate tile dimensions and css wanted to work with.
			</span>
		</p>
	</div>
</div>

<div class="live-tile me" data-stops="50%,100%,0px" data-stack="true" data-bounce="true" data-delay="7000">
	<div><img src="yimages/4.jpg" alt="" class="full" /></div>
	<div><a class="metroExtraLarge bottom">About</a></div>
</div>

<div class="live-tile projects" data-link="#" data-swap-back="image" data-bounce="true" data-delay="5000">
	<div>
		<p>
			<span class="metroExtraLarge title">Hello!</span>
			<a href="#" class="head"> <img src="yimages/8.png" class="full" alt="" /></a>
			</p>
	</div>

	<div> <a href="#"><img src="yimages/26.jpg" class="full" alt="" /></a>  </div>
</div> 	
 <div class="live-tile two-wide exclude"><a href="#"><img src="yimages/26.jpg"  class="full" alt="" /></a> </div>		
</div>


<div class="live-tile two-wide two-tall exclude" >
	<div><a href="http://yousfi.over-blog.com"  target="_blank"><img src="yimages/10.png" class="full" alt="" /></a> </div>
</div>
</div>
</div>
</section>

<footer class="appbar">
<nav class="clear">
<ul class="appbar-buttons" id="menu">
	<li>
		<a class="home" href="#"><img alt="home" src="http://www.drewgreenwell.com/images/1pixel.gif"></a>
		<span class="charm-title">Home</span>
	</li>
	<li>
		<a class="about" href="#"><img alt="about" src="http://www.drewgreenwell.com/images/1pixel.gif"></a>
		<span class="charm-title">About</span>
	</li>
	<li>
		<a class="twitter" target="_blank" onclick="javascript:trackExternal(this);" href="http://www.twitter.com/dgreenwell" _target="_blank"><img alt="twitter" src="http://www.drewgreenwell.com/images/1pixel.gif"></a>
		<span class="charm-title">Twitter</span>
	</li>
</ul>
</nav>
<a class="etc">•••</a>
<div class="tray">
<section class="base-theme-options">
	<h2>Base Theme</h2>
	<ul></ul>
</section>
<section class="theme-options">
	<h2>Accent Color</h2>
	<ul></ul>
</section>
<section class="links clear">
	<ul>
		<li><a href="http://www.drewgreenwell.com/projects/metrojs/theme-generator" target="_blank">Generate a theme...</a></li>
	</ul>
</section>
</div>
</footer>

<script src="http://www.drewgreenwell.com/scripts/jquery-1.7.2.min.js" type="text/javascript"></script>
<script src="http://www.drewgreenwell.com/scripts/metrojs/bundles/metrojs.js?v=0.9.77" type="text/javascript"></script>
<script type="text/javascript">
var metroJs,
	appBar;
// remove the default theme set for noscript and apply user theme
$(document).ready(function () {
	$("body,.tiles").removeClass("dark blue");
	metroJs = jQuery.fn.metrojs;
	metroJs.theme.loadDefaultTheme();
});
</script>

<script type="text/javascript">
$(document).ready(function () {
	var projects_back = [
		{ alt: "WordStreamer", src: "http://www.drewgreenwell.com//images/projects/wordstreamer.png" },
		{ alt: "MetroJS", src: "http://www.drewgreenwell.com/images/projects/metro-js.png" },
		{ alt: "Sitefinity controls", src: "http://www.drewgreenwell.com/images/projects/archived-projects.png" },
		{ alt: "Archived Projects on SkyDrive", src: "http:/www.drewgreenwell.com/images/projects/sitefinity-controls.png" },
		{ alt: "LeapFrog Interactive Kinect", src: "http:/www.drewgreenwell.com/images/projects/leapfrog-kinect.jpg" }
	];
	$(".live-tile.me").liveTile();
	$(".live-tile.projects").liveTile({
		mode: 'slide',
		backImages: projects_back,
		backIsRandom: false,
		preloadImage: true,
		stops: "100%"
	});
});
</script>

<script type="text/javascript">

$(document).ready(function () {
	var doBind = (typeof (window.bindAppBarKeyboard) === "undefined" || window.bindAppBarKeyboard);
	// create the app bar
	appBar = $(".appbar").applicationBar({
	applyTheme: false, // apply theme example below
		preloadAltBaseTheme: true, // load both sets of images so there isn't a flicker when base theme is changed
		metroLightUrl: 'http://www.drewgreenwell.com/images/metroIcons_light.jpg',
		metroDarkUrl: 'http://www.drewgreenwell.com/images/metroIcons.jpg',
		bindKeyboard: doBind // bind the keyboard unless specified in an included script
	});
	// add the accents and base colors to the appbar
	metroJs.theme.appendAccentColors();
	metroJs.theme.appendBaseThemes();
});


</script>
<script type="text/javascript" src="http://www.drewgreenwell.com/scripts/jquery.mousewheel.min.js"></script>
<script type="text/javascript" src="http://www.drewgreenwell.com/scripts/dg/global.js?v=0.9.77"></script>
</body>
</html>
endtext

Local m.lcdest
m.lcdest=m.yrep+"ymetroJS.html"
Strtofile(m.myvar,m.lcdest)
Thisform.olecontrol1.Navigate(m.lcdest)
ENDPROC

PROCEDURE Destroy
clea events
ENDPROC

PROCEDURE Init
Publi m.yrep
m.yrep=Addbs(Justpath(Sys(16,1)))
Set Defa To (yrep)
thisform.windowstate=2
*if ! file("jQuery-1.js") and ! file("metroJS.css")
*messagebox("jQery-.js and metroJS.js files amust mandatory in the start folder making this code to work as well !",16+4096)
*return .f.
*endi
*lik here are web connected
thisform.ybuild()
*jQuery-1.js is a minimal version of jQuery
ENDPROC

PROCEDURE Load
set safe off
_screen.windowstate=1
close data all
ENDPROC


PROCEDURE Resize
thisform.ybuild()
ENDPROC

PROCEDURE olecontrol1.BeforeNavigate2
*** Événement de contrôle ActiveX  ***
LPARAMETERS pdisp, url, flags, targetframename, postdata, headers, cancel
cancel=.t.
*thisform.yactions(url)  &¬ coded here
return .f.
ENDPROC

PROCEDURE olecontrol1.Init
this.silent=.t.
ENDPROC

ENDDEFINE
*
*-- EndDefine: JSthemes


to correct :<a class="etc">ooo</a> is to replace with <a class="etc">&bull;&bull;&bull;</a>   its an editor problem  in line 263 of code above (3bullets) instead ooo.Click 1 bullet to work with appbar.

to correct :<a class="etc">ooo</a> is to replace with <a class="etc">&bull;&bull;&bull;</a> its an editor problem in line 263 of code above (3bullets) instead ooo.Click 1 bullet to work with appbar.

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


*6*created  on wednesday 14 december 2016
*this is a fullscreen slideshow application with metroJS library.(3.5 sec between slides).
*run this code with vfp9 & administrator privelege (due to new IE11 behavior )
*the slides are from web.can customize .....even on local disc.
*an embed  windows mediaplayer object can play (with loop) any sound (local or web).
*metroJS library is linked to the web directly(can download and play on local)
*all is shown with internetexplorer.application. (IE11 emulation)

declare integer BringWindowToTop in user32 integer
_screen.windowstate=1


*gather some web photos(10 here)
set memowidth to 8192
local m.myv
text to m.myv noshow
https://lh3.googleusercontent.com/-vz7E8c6DLGA/V_66U3CeDPI/AAAAAAAAGTs/58JOai0_kWIJIbOFmlBvgCfZtnyaviftACL0B/w702-h527-no/SAM_2260_resized.JPG
http://i.huffpost.com/gadgets/slideshows/404302/slide_404302_5029004_compressed.jpg
https://lh4.googleusercontent.com/-TE5q0pNeuf0/U1t3i6lrfBI/AAAAAAAAFtY/eJ3HJzoGqL83u0Mpshl1WPV5n3RyrfbBgCL0B/w622-h554-no/KSARLAHMAR__9_RESIZED_clipped.jpg
http://blauekamel.com/images/com_fwgallery/files/43/taghit-01.JPG
http://intymag.com/wp-content/uploads/2016/03/mon-weekend-%C3%A0-taghit-e1458230519606.jpg
http://www.vitaminedz.org/photos/118/118859-photos-taghit-palmeraie-et-dunes-dorees-novembre-2006.jpg
http://www.vitaminedz.com/photos/19/19939-taghit-l-enchanteresse-ou-carrement-l-nvoutante.jpg
https://s-media-cache-ak0.pinimg.com/originals/31/7f/e8/317fe8b6f51e0f58ebda83f70fb77a8f.jpg
https://lh3.googleusercontent.com/-OjTtDeBevT0/U1t3i5pcRUI/AAAAAAAAFtY/G-2-0WkbpHs82JkrLJiRVHruFdAYjTVwQCL0B/w623-h554-no/NKHILA15_RESIZED_clipped.jpg
https://upload.wikimedia.org/wikipedia/commons/thumb/f/fd/Vue_de_Taghit.jpg/280px-Vue_de_Taghit.jpg
http://www.algerie-focus.com/wp-content/uploads/2014/12/B%C3%A9char-Taghit_20-d%C3%A9cembre-2014.jpg
http://www.alger-culture.com/images/news/Kseur%20taghit.jpg
http://p2.storage.canalblog.com/20/24/763987/55549657.jpg
https://lh6.googleusercontent.com/-NtaG1d1rgkw/U1t3izVBVOI/AAAAAAAAFtY/7MAbBOfl1Losp_RjNlTak1IwpYbhcLoqwCL0B/w622-h554-no/MAHSAR0_RESIZED_clipped.jpg
https://s-media-cache-ak0.pinimg.com/564x/1b/91/b4/1b91b48c267ff3cba9e548b227b5c5d2.jpg
http://i.huffpost.com/gadgets/slideshows/404302/slide_404302_5029024_compressed.jpg
https://lh4.googleusercontent.com/-dq07ECqWIYs/U1t3ix9WjCI/AAAAAAAAFtY/c0lXNFiFxxY5QdSVdBc_0oorSxMB-dJrwCL0B/w622-h554-no/MERDOUFA_16_RESIZED_clipped.jpg
http://i.huffpost.com/gadgets/slideshows/404302/slide_404302_5029030_compressed.jpg
https://lh4.googleusercontent.com/-sUex89pwEQg/U1t3i9LhfRI/AAAAAAAAFtY/Dbe-pePrN4UM2RlqQ6UjIVNjlpXzT5c5wCL0B/w622-h554-no/OUDIANE_RESIZED_clipped.jpg
http://i.huffpost.com/gadgets/slideshows/404302/slide_404302_5029006_compressed.jpg
https://lh3.googleusercontent.com/-fHV01NV1V9A/U0O0DYnP4eI/AAAAAAAAFtg/Rho6-AV0JvItdD2gduxbC8QybYrTc5ojACL0B/w702-h527-no/SAM_1285.JPG
https://lh5.googleusercontent.com/-Zyv0ZSjlsOI/Uu68S7kvstI/AAAAAAAAAD0/NmHD8N80W68C_95yGxPZeMCQUV788URJwCL0B/w702-h527-no/SAM_0682-SNOW.gif
endtext
local m.xx
m.xx=""
for i=1 to memlines(m.myv)
m.xx=m.xx+[<div ><img class="full" src="] + allt(mline(m.myv,i))+[" alt="]+trans(i)+[" /><span class="tile-title"> Algeria -]+trans(i)+[</span></div>]+chr(13)
endfor


Local m.myvar
TEXT to m.myvar textmerge noshow
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.js"></script>
<link rel="stylesheet" type="text/css" href="http://www.drewgreenwell.com/content/metrojs.css">
<script type="text/javascript" src="http://www.drewgreenwell.com/scripts/metrojs.js"></script>
<title>Tiles layouts</title>
</head>
<body bgcolor=black oncontextmenu="return false;"  scroll="no">
<input type="button" value="X" style="cursor:pointer;color:white;background-color:black;float:right;" onclick="javascript:window.close();">
<br>
<!-- Carousel Tile that slides 4 tile faces every 3.5 seconds -->
<div class="live-tile" data-mode="carousel" data-direction="horizontal" data-delay="3500" style="width:100%;height:720px;">
<<m.xx>>
</div>

<object id="mediaplayer" classid="clsid:22d6f312-b0f6-11d0-94ab-0080c74c7e95" codebase="http://activex.microsoft.com/activex/controls/mplayer/en/nsmp2inf.cab#version=5,1,52,701" standby="loading microsoft windows media player components..." type="application/x-oleobject" width="1" height="1">
<param name="filename" value="https://archive.org/download/MoonlightSonata_755/Beethoven-MoonlightSonata.mp3">
<param name="animationatstart" value="true">
<param name="transparentatstart" value="true">
<param name="autostart" value="true">
<param name="showcontrols" value="false">
<param name="ShowStatusBar" value="false">
<param name="windowlessvideo" value="true">
<param name='loop' value='true'>
<embed src="https://archive.org/download/MoonlightSonata_755/Beethoven-MoonlightSonata.mp3" autostart="true" showcontrols="false" showstatusbar="0" bgcolor="white" width="1" height="1">
</object>

<script type="text/javascript">
$(document).ready(function () {
	$(".live-tile,.flip-list").liveTile();
});

</script>
</body>
</html>
ENDTEXT

Local m.yrep,m.lcdest
m.yrep=addbs(justpath(sys(16,1)))
m.lcdest=m.yrep+"ymetroJS.html"
Strtofile(m.myvar,m.lcdest)

*be sure ie starts with about:blank  page only (no history)
local apie
apie=newObject("internetexplorer.application")
with apie
.navigate(m.lcdest)
.fullscreen=1
try
bringwindowtotop(.hwnd)  &&actually available with administrator privelege!!
.visible=.t.
catch
endtry

endwith



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

 
*7* created on wednesday 15 december 2016
*this is a fullscreen slideshow application with metroJS library.it plays a random slide in 4 directions.
*Important:run this code with vfp9 & administrator privelege (due to new IE11 behavior )
*the slides are from web.can customize .....can be even from disc.
*an embed  windows mediaplayer object can play any sound (local or web).can customize the music at the code begin( a disc file or url).
*metroJS library is linked to the web directly(can download and play on local)
*all is show with internetexplorer.application. (IE11 emulation)
*internet must be connected.

declare integer BringWindowToTop in user32 integer

local m.ysound
m.ysound=getfile("mp3;wav;mid;")  && any sound format compatibe with WMP
_screen.windowstate=1

*gather some web photos(10 here)
set memowidth to 8192
local m.myv
text to m.myv noshow
https://lh3.googleusercontent.com/-vz7E8c6DLGA/V_66U3CeDPI/AAAAAAAAGTs/58JOai0_kWIJIbOFmlBvgCfZtnyaviftACL0B/w702-h527-no/SAM_2260_resized.JPG
http://i.huffpost.com/gadgets/slideshows/404302/slide_404302_5029004_compressed.jpg
https://lh4.googleusercontent.com/-TE5q0pNeuf0/U1t3i6lrfBI/AAAAAAAAFtY/eJ3HJzoGqL83u0Mpshl1WPV5n3RyrfbBgCL0B/w622-h554-no/KSARLAHMAR__9_RESIZED_clipped.jpg
http://blauekamel.com/images/com_fwgallery/files/43/taghit-01.JPG
http://intymag.com/wp-content/uploads/2016/03/mon-weekend-%C3%A0-taghit-e1458230519606.jpg
http://www.vitaminedz.org/photos/118/118859-photos-taghit-palmeraie-et-dunes-dorees-novembre-2006.jpg
http://www.vitaminedz.com/photos/19/19939-taghit-l-enchanteresse-ou-carrement-l-nvoutante.jpg
https://s-media-cache-ak0.pinimg.com/originals/31/7f/e8/317fe8b6f51e0f58ebda83f70fb77a8f.jpg
https://lh3.googleusercontent.com/-OjTtDeBevT0/U1t3i5pcRUI/AAAAAAAAFtY/G-2-0WkbpHs82JkrLJiRVHruFdAYjTVwQCL0B/w623-h554-no/NKHILA15_RESIZED_clipped.jpg
https://upload.wikimedia.org/wikipedia/commons/thumb/f/fd/Vue_de_Taghit.jpg/280px-Vue_de_Taghit.jpg
http://www.algerie-focus.com/wp-content/uploads/2014/12/B%C3%A9char-Taghit_20-d%C3%A9cembre-2014.jpg
http://www.alger-culture.com/images/news/Kseur%20taghit.jpg
http://p2.storage.canalblog.com/20/24/763987/55549657.jpg
https://lh6.googleusercontent.com/-NtaG1d1rgkw/U1t3izVBVOI/AAAAAAAAFtY/7MAbBOfl1Losp_RjNlTak1IwpYbhcLoqwCL0B/w622-h554-no/MAHSAR0_RESIZED_clipped.jpg
https://s-media-cache-ak0.pinimg.com/564x/1b/91/b4/1b91b48c267ff3cba9e548b227b5c5d2.jpg
http://i.huffpost.com/gadgets/slideshows/404302/slide_404302_5029024_compressed.jpg
https://lh4.googleusercontent.com/-dq07ECqWIYs/U1t3ix9WjCI/AAAAAAAAFtY/c0lXNFiFxxY5QdSVdBc_0oorSxMB-dJrwCL0B/w622-h554-no/MERDOUFA_16_RESIZED_clipped.jpg
http://i.huffpost.com/gadgets/slideshows/404302/slide_404302_5029030_compressed.jpg
https://lh4.googleusercontent.com/-sUex89pwEQg/U1t3i9LhfRI/AAAAAAAAFtY/Dbe-pePrN4UM2RlqQ6UjIVNjlpXzT5c5wCL0B/w622-h554-no/OUDIANE_RESIZED_clipped.jpg
http://i.huffpost.com/gadgets/slideshows/404302/slide_404302_5029006_compressed.jpg
https://lh3.googleusercontent.com/-fHV01NV1V9A/U0O0DYnP4eI/AAAAAAAAFtg/Rho6-AV0JvItdD2gduxbC8QybYrTc5ojACL0B/w702-h527-no/SAM_1285.JPG
https://lh5.googleusercontent.com/-Zyv0ZSjlsOI/Uu68S7kvstI/AAAAAAAAAD0/NmHD8N80W68C_95yGxPZeMCQUV788URJwCL0B/w702-h527-no/SAM_0682-SNOW.gif
endtext
local m.xx
m.xx=[ <div id="tile1" data-mode="carousel" data-start-now="false" class="live-tile" data-repeat='0'> ]
for i=1 to memlines(m.myv)
m.xx=m.xx+[<div ><img class="full" src="] + allt(mline(m.myv,i))+[" alt="]+trans(i)+[" /><span class="tile-title"> Algeria -]+trans(i)+[</span></div>]+chr(13)
endfor
m.xx=m.xx+"</div>"


Local m.myvar
TEXT to m.myvar textmerge noshow
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.js"></script>
<link rel="stylesheet" type="text/css" href="http://fiddle.jshell.net/css/normalize.css">
<link rel="stylesheet" type="text/css" href="http://fiddle.jshell.net/css/result-light.css">
<script type="text/javascript" src="http://www.drewgreenwell.com/scripts/metrojs.js"></script>
<link rel="stylesheet" type="text/css" href="http://www.drewgreenwell.com/content/metrojs.css">
<title>Tiles slideshow random</title>

<script type='text/javascript'>//<![CDATA[
$(window).load(function(){
// carousel mode: random
function getRandomOptions(){
// this could obviously be a lot more random
var doIt = Math.floor(Math.random() * 1001) % 2 == 0;
// set random options supported by the goto method
// http://www.drewgreenwell.com/projects/metrojs#liveTileMethods
return {
	index: "next",
	delay: 3500,
	animationDirection: doIt ? 'forward' : 'backward',
	direction: doIt ? 'vertical' : 'horizontal'
};
}
// setup the tile and then call goto on it the first time
$("#tile1").liveTile({
animationComplete: function(tileData){
$(this).liveTile("goto", getRandomOptions());
}
}).liveTile("goto", getRandomOptions());

});//]]>

</script>

</head>
<body bgcolor=black oncontextmenu="return false;"  scroll="no">
<input type="button" value="X" style="cursor:pointer;color:white;background-color:black;float:right;" onclick="javascript:window.close();">
<br>
<!-- Carousel Tile that slides 4 tile faces every 3.5 seconds -->
<div class="live-tile" data-mode="carousel" data-direction="horizontal" data-delay="3500" style="width:100%;height:720px;">
<<m.xx>>
</div>

<object id="mediaplayer" classid="clsid:22d6f312-b0f6-11d0-94ab-0080c74c7e95" codebase="http://activex.microsoft.com/activex/controls/mplayer/en/nsmp2inf.cab#version=5,1,52,701" standby="loading microsoft windows media player components..." type="application/x-oleobject" width="1" height="1">
<param name="filename" value="<<m.ysound>>">
<param name="animationatstart" value="true">
<param name="transparentatstart" value="true">
<param name="autostart" value="true">
<param name="showcontrols" value="true">
<param name="ShowStatusBar" value="true">
<param name="windowlessvideo" value="true">
<param name='loop' value='true'>
<embed src="<<m.ysound>>" autostart="true" showcontrols="true" showstatusbar="1" bgcolor="white" width="1" height="1">
</object>


<script>
// tell the embed parent frame the height of the content
if (window.parent && window.parent.parent){
window.parent.parent.postMessage(["resultsFrame", {
height: document.body.getBoundingClientRect().height,
slug: "34pfh"
}], "*")
}
</script>

</body>
</html>
ENDTEXT

Local m.yrep,m.lcdest
m.yrep=addbs(justpath(sys(16,1)))
m.lcdest=m.yrep+"ymetroJS.html"
Strtofile(m.myvar,m.lcdest)

*be sure IE11 starts with about:blank  page only (no history)
local apie
apie=newObject("internetexplorer.application")
with apie
.navigate(m.lcdest)
.fullscreen=1
try
bringwindowtotop(.hwnd)  &&actually available with administrator privelege!!
.visible=.t.
catch
endtry

endwith


Conclusion:   What is interesting in these tiles animations.Maybe javascript is multithread (native vfp is not multithread).vfp have difficulties to animate many process at once with timers.
Maybe its the only one advantage of javascript here.all the rest can be done with vfp (can add dll multithread to achieve this goal).

A web metro interface to build tiles - metroJS

Important:All Codes above are tested on VFP9SP2 & windows 10 pro and IE11 emulation.

To be informed of the latest articles, subscribe:
Comment on this post