You’ve probably heard a lot about the new HTML5. And it's feature called "canvas element". As the name implies, this is a special element that allows us to create and modify graphics. So also a slideshow within a HTML-page, which then is run in HTML5 aware browser.
After having studied some articles in the WEB about How-to-generate-a-HTML5-slideshow, I decided to write my own 32-bit "HTML5-Slideshow-Creator" (realized in MortScript language) to be used on Windows computers, which produces the HTML5 page.
Code:
// html5-slideshow-creator
// © 2014 jwoegerbauer
// GPL v3
//
// This program is free software: you can redistribute it and/or modify
// it under the terms of the GNU General Public License as published by
// the Free Software Foundation, either version 3 of the License, or
// (at your option) any later version.
//
// This program is distributed in the hope that it will be useful,
// but WITHOUT ANY WARRANTY; without even the implied warranty of
// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
// GNU General Public License for more details.
//
// You should have received a copy of the GNU General Public License
// along with this program. If not, see <http://www.gnu.org/licenses/>.
//
//
ErrorLevel("warn")
//
// User settings, change according to your needs
//
mSlideshowTitle="HTML5-Slideshow"
// Important: all images the slideshow is made up must have same width and height
mImageWidth=800
mImageHeight=600
//
// Do NOT edit below
//
mBegin=TimeStamp()
mCWD=SystemPath("ScriptPath")
mScriptName=SystemPath("ScriptName")
mInputDir=""&SelectDirectory(mScriptName,"Determine path to image files","C:\")
If((mInputDir EQ "")||(Length(mInputDir)<4))
// Quit
Exit
EndIf
mZipFile=mCWD\mSlideshowTitle
mZipFile&=".zip"
mOutputDir=mCWD\mSlideshowTitle
DelTree(mOutputDir)
Sleep(1000)
If(FileExists(mZipFile))
Delete(mZipFile)
Sleep(1000)
EndIf
// NTFS: default cluster size is 4KB
mClusterSize=4096
mFreeDiskSpace=FreeDiskSpace(mCWD,KB)
mHTMLSlideShowDiskSpaceNeeded=0
mCount=0
ForEach mImage In Files(mInputDir\"*.*")
mImageExt=ToLower(FileExt(mImage))
If((mImageExt EQ ".jpg")||(mImageExt EQ ".bmp")||(mImageExt EQ ".png"))
mCount+=1
mHTMLSlideShowDiskSpaceNeeded+=(FileSize(mImage)+mClusterSize-1)/mClusterSize*mClusterSize
EndIf
Sleep(1)
EndForEach
If(mCount<1)
// Quit
Exit
EndIf
// Add a few KBs
mHTMLSlideShowDiskSpaceNeeded+=(5*mClusterSize)
If(mHTMLSlideShowDiskSpaceNeeded>mFreeDiskSpace)
// Quit
Exit
EndIf
MkDir(mOutputDir)
mCount=0
while((NOT DirExists(mOutputDir))&&(mCount<20))
Sleep(100)
mCount+=1
endwhile
If(NOT DirExists(mOutputDir))
// Quit
Exit
EndIf
mOutputImagesDir=mOutputDir\"img"
MkDir(mOutputImagesDir)
mCount=0
While((NOT DirExists(mOutputImagesDir))&&(mCount<20))
Sleep(100)
mCount+=1
EndWhile
If(NOT DirExists(mOutputImagesDir))
// Quit
DelTree(mOutputDir)
Exit
EndIf
mOutputPhotosDir=mOutputImagesDir\"photos"
MkDir(mOutputPhotosDir)
mCount=0
While((NOT DirExists(mOutputPhotosDir))&&(mCount<20))
Sleep(100)
mCount+=1
EndWhile
If(NOT DirExists(mOutputPhotosDir))
// Quit
DelTree(mOutputDir)
Exit
EndIf
//
// Create .HTML5 slideshow (ie. package of .HTMl & .JS & .CSS & image files)
mOutFile=mOutputDir\mSlideshowTitle&".html"
WriteFile(mOutFile,"",0)
mHTML=""
mHTML&='<!DOCTYPE html>^NL^'
mHTML&='<html>^NL^'
mHTML&='<head>^NL^'
mHTML&='<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />^NL^'
mHTML&='<title>'
mHTML&=mSlideshowTitle
mHTML&='</title>^NL^'
mHTML&='<link rel="stylesheet" type="text/css" href="styles.css" />^NL^'
mHTML&='</head>^NL^'
mHTML&='<body>^NL^'
mHTML&='<div id="slideshow">^NL^'
mHTML&='<ul class="slides">^NL^'
WriteFile(mOutFile,mHTML,1)
mImagesCount=0
ForEach mImage in Files(mInputDir\"*.*")
mImageExt=ToLower(FileExt(mImage))
If((mImageExt EQ ".jpg")||(mImageExt EQ ".bmp")||(mImageExt EQ ".png"))
mImageName=FileBase(mImage)
mHTML='<li><img src="'&mImage&'" width="'&mImageWidth&'" height="'&mImageHeight&'" alt="'&mImageName&'"/></li>^NL^'
WriteFile(mOutFile,mHTML,1)
// store a copy of the image
Copy(mImage,mOutputPhotosDir\mImageName&mImageExt)
mImagesCount+=1
EndIf
Sleep(1)
EndForEach
If(mImagesCount<1)
// Quit
DelTree(mOutputDir)
Exit
EndIf
mHTML='</ul>^NL^'
mHTML&='<span class="arrow previous"></span>^NL^'
mHTML&='<span class="arrow next"></span>^NL^'
mHTML&='</div>^NL^'
mHTML&='<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>^NL^'
// Alternative:
// mHTML&='<script src=http://ajax.microsoft.com/ajax/jQuery/jquery-1.4.2.min.js"></script>^NL^'
mHTML&='<script src="script.js"></script>^NL^'
mHTML&='</body>^NL^'
mHTML&='</html>^NL^'
WriteFile(mOutFile,mHTML,1)
// Copy additional files
Copy(mCWD\"Sources\script.js",mOutputDir\"script.js")
Copy(mCWD\"Sources\styles.css",mOutputDir\"styles.css")
Copy(mCWD\"Sources\arrows.png",mOutputImagesDir\"arrows.png")
Copy(mCWD\"Sources\bg.jpg",mOutputImagesDir\"bg.jpg")
//
// Check to see whether there is still enough free disk space to create .ZIP file
mFreeDiskSpace=FreeDiskSpace(mCWD,KB)
If(mHTMLSlideShowDiskSpaceNeeded<mFreeDiskSpace)
//
// Compress folder that contains HTML5 slideshow into .ZIP
// Note: We use 7za.exe because MortScript's mortzip doesn't work properly with folders containing subfolders
// Usage: 7za <command> [<switches>...] <archive_name> [<file_names>...] [<@listfiles...>]
mCompressor=mCWD\"7za.exe"
If(FileExists(mCompressor))
mCompressorParams='a '
mCompressorParams&='-tzip "'
mCompressorParams&=mZipFile
mCompressorParams&='" "'
mCompressorParams&=mOutputDir
mCompressorParams&='"'
RunWait(mCompressor,mCompressorParams)
EndIf
EndIf
//
// Notify user
mEnd=TimeStamp()
mMsgText="^NL^"
mMsgText&=mSlideshowTitle
mMsgText&=" created.^NL^^NL^"
mMsgText&="Photos added: "
mMsgText&=mImagesCount
mMsgText&="^NL^"
mMsgText&="Time elapsed: "
mMsgText&=mEnd-mBegin+1
mMsgText&=" seconds.^NL^"
mMsgText&="^NL^"
mMsgText&="Slideshow created is located in^NL^"
mMsgText&=mOutputDir
mMsgText&="^NL^"
If(FileExists(mZipFile))
mMsgText&="ZIP-file created is located in^NL^"
mMsgText&=mCWD
mMsgText&="^NL^"
EndIf
Message(mMsgText,mScriptName)
//
//
The full project-package I've uploaded .
You unzip it, locate folder "html5-slideshow-creator"
and then therein simply run "html5-slideshow-creator.exe". That's all.
Enjoy.
BTW: The produced slideshow was only tested with Internet Explorer 11.
----------------------
What you must know - browser related:
» People with JavaScript switched off.
These users will only see the first slide, and will be unable to switch to a different one.
» People with JavaScript switched on, but with no support for canvas.
For visitors from this group, the slides will change instantaneously, without transitioning effects.
» People with JavaScript enabled and canvas support.
These are people who use the latest versions of Firefox, Safari, Chrome, Opera and IE9.x . They will enjoy the slideshow in its full glory.
Reply With Quote
[TOOL] Simple HTML5-Slideshow-Creator
Originally Posted by Philquad
Posting Permissions
Bookmarks