All posts tagged 'photos'

Its Done

Thursday, 8 January 2009 15:50 by frimbooze

I done some more work on the photo display widget. I have done the following today. I would say I have done a fair days work.

Fixed the upload handler , now returns text/html instead of text/plain, the upload control uses a normal submission inside and temp Iframe. When the content type was set as ‘plain’ the returned JSON would be encapsulated insde <pre> html tags causing a eval error.
Since the above was fixed had the upload form refresh the datastore to include the new images.
I added a click listener to the dataview control, when an image is clicked it will load a new window positioned at the top of the screen(useful for the large screen shots) with the image inside, though not as pretty as say ‘lightbox’, it works.
Implemented a pass key on the image upload form a security to stop unwanted uploads.
Fixed a CSS issue with the dataview, overflows of floated elements.

Be the first to rate this post

Currently 0/5 Stars.
1
2
3
4
5

Tags:		javascript, images, photos
Categories:		CSS and Javascript
Actions:		E-mail \| Permalink \| Comments (847) \| Comment RSS

Been Learning

Wednesday, 7 January 2009 20:13 by frimbooze

I had a very happy Christmas and new year but now its back to work and learning. I purchased Learning Ext JS from packet publishing, the book came with a password protected pdf version which is always a plus with me.

I rate this book very highly for a beginner like me with plenty of well explained explanations. My two great criticisms

(1) Used coldfusion and PHP , should stick to one backend language.

(2) Not enough Meat once the beginners tag ends.

For the price and with the inclusion of an e-book and removing the beginner tag on one of the harder JavaScript libraries its a must buy and if you pirate it burn in hell.

The result of my first successful (nearly finished) project with the Ext JS library and .net background

The can be found on the root page (aka my portal) at http://www.icomefromthenet.net.

It allows images (jpg,gif,png) to be uploaded , these images are stored in a sql-lite DB. The Json stream is loaded at page start with the data filtered on the client side using the Ext JS store widget. An generic ASHX handler is used to retrieve each image from the DB, optional thumbnail function is included as well.

Areas Used from the Libary

DataVew and x-templates
FormPanel, normal Panel
FileUpload control
DB Bound combo Box
Json Store and Http Proxy.

Still to complete

Fix the DataVew CSS
Upload more photos
A Better selection of photos onload.
Maybe Less Blue.

Be the first to rate this post

Currently 0/5 Stars.
1
2
3
4
5

Tags:		extjs, javascript, photos, learning
Categories:		CSS and Javascript
Actions:		E-mail \| Permalink \| Comments (425) \| Comment RSS

A custom User Control - Photos

Saturday, 12 January 2008 07:19 by Frimbob

Overview: I was looking for the ability to print out a page of photos without having to mannualy create a page, to this end I have created a custom user control that will search a set folder at run-time for images under sub-directories, with each catagory being its own catagory.

The challange included.

Methods to paraise the directories and a relation data-store
Developing a function that would print each catagory, and the Correct relative Paths.
Develop the HTML that would allow an assingable number of photos on each line.
CSS techniques to make them look good.

Part 1 -The Properties

[code:vb] <%@ Control Language="VB" ClassName="PhotoDisplay" %> <%@ Import Namespace="System.IO" %> <%@ Import Namespace="BlogEngine.Core" %> <%@ Import Namespace="System.Data" %> <script runat="server">   'Image Folder Property Private _imageFolderPath As String = "../pics/photos/" Private intItemsPerRow As Integer = 4   Public Property ItemsPerRow() As Integer Get Return intItemsPerRow End get Set(byVal value AS Integer) intItemsPerRow = value End Set End Property   Public Property ImageFolderPath() As String Get Return _imageFolderPath End Get Set(ByVal value As String) _imageFolderPath = value End Set End Property [/code]

Nothing too Special Here 2 public properties that can be set on the tag, the first being the root folder for the images and the second the number of photos on each row.

Part 2 - The Data Structures

[code:vb] Private Function FolderListArray(ByVal _imageFolderPath As String) As Object Dim photoCollection As New NameValueCollection Dim j As Integer Dim aryChildFolder() As String Dim strFileName As String Dim strFolderName As String Dim SplitAry1() As String Dim SplitAry2() AS String Dim i As Integer 'increment each directory Dim l As Integer   'store the directories here if (Directory.Exists(MapPath(_imageFolderPath)) ) Then Dim aryDirectories() As String = Directory.GetDirectories(MapPath(_imageFolderPath)) Dim length As Integer = aryDirectories.Length For i = 0 To length - 1 'create a ary for the childfolders file list aryChildFolder = Directory.GetFiles(aryDirectories(i), "*.jpg") 'assign the list For j = 0 To aryChildFolder.Length - 1 strFileName = Path.GetFileName(aryChildFolder(j)) strFolderName = Path.GetDirectoryName(aryChildFolder(j)) SplitAry1 = strFolderName.Split("\") SplitAry2 = _imageFolderPath.Split("/") strFolderName =" " For l = 0 To SplitAry2.Length - 1 Step 1 If (SplitAry2(l).Length > 0 And SplitAry2(l) <> "..") Then strFolderName = strFolderName & "/" & SplitAry2(l) 'equal to current End If Next l strFolderName = strFolderName & "/" & SplitAry1(SplitAry1.Length - 1)' the childDirectory strFolderName = strFolderName.Trim() strFolderName = strFolderName.Replace("~", "") 'only work if ~ char exists in string which sould only be at the start strFolderName = strFolderName.TrimStart("/") strFolderName = strFolderName.Trim() 'add the items to the collection photoCollection.Add(strFolderName, strFileName) Next jNext i   'Dim jjjj = HttpContext.Current.Request.ApplicationPath 'aryDirectories(i)   'return a the collection FolderListArray = photoCollection Else 'return an empty collection FolderListArray = photoCollection End If End Function [/code]

This function will return a NamedValueCollection , the basic structure has each subdirectory as the key with each graphics file assoicated to that key, since a directory requires a unique name all keys will be unique.

The MapPath function is used to resolve a full path from the application root the _imageFolderPath property is not enough for the Directory.Get methods.

The Directory.GetFiles(aryDirectories(i), "*.jpg") ensures that only JPEG files are save into the collection.

The above code can utilize parameters with the "~" or the relative ".." pass to it, the above code creates a key that drives from the root of the applicaiton to the parent directory . The images however must be organised into a subdirectory even if you just call it e.g "allphotos".

If there are no files found or issue with the paths, the named colleciton will be return as empty and an error will print.

Part 3 - The Html

[code:vb] Private Function CreateHTML(ByRef aryCollection As Object) As String 'create the stringbuilder Dim strHtmlString As New StringBuilder 'to build the HTML String Dim aryValues() As String 'Holds an array of Keys Dim i As Integer 'loop counter Dim intNumbOfRows As Integer 'loop counter Dim k As Integer 'loop counter   'Preview Image Html Start strHtmlString.Append("<div>") 'opening tag strHtmlString.Append("") strHtmlString.Append("<img id=""imgPreview"" alt=""PreviewImage"" style=""padding:5px; background:white;"" />") strHtmlString.Append("") strHtmlString.Append("</div>") 'close the opening tag strHtmlString.Append(" ") 'preview Image Stop   'Catagory Html Start For Each key As String In aryCollection.Keys 'loop through every subDirectory strHtmlString.Append("<div>") 'opening tag strHtmlString.Append("") strHtmlString.Append(key) ' Name of the Catagory strHtmlString.Append("") strHtmlString.Append(" (Click Image to Enlarge)") strHtmlString.Append("<hr />") 'line space strHtmlString.Append("<table cellspacing=""10"">") 'opend the table aryValues = aryCollection.GetValues(key) If (((aryValues.Length) Mod intItemsPerRow) > 0) Then ' if there is a remainder do an integer division and add one to round up 'the rounding will round down so add extra row to compensate intNumbOfRows = (aryValues.Length \ intItemsPerRow) + 1 'rounds up Else : intNumbOfRows = ((aryValues.Length) / intItemsPerRow) ' no round as there is no remainder End If While (i < aryValues.Length) 'loop through all files in the subdirectory For j As Integer = 1 To intNumbOfRows strHtmlString.Append("<tr>") While (k < intItemsPerRow And i < aryValues.Length) strHtmlString.Append("<td>") 'background: #b4afa3; strHtmlString.Append("") strHtmlString.Append("<img style=""padding:5px; background:white;"" src=""") strHtmlString.Append(key) strHtmlString.Append("/") strHtmlString.Append(aryValues(i)) strHtmlString.Append(""" width="" 100px "" onclick='imgPreview.src = this.src; window.scrollTo(0,80);'/>") strHtmlString.Append("") strHtmlString.Append("</td>") k = k + 1 'move onto next item i = i + 1 ' move onto next image in the subdirectory End While k = 0 'reset for next loop strHtmlString.Append("</tr>") Next j End While i = 0 'reset for next loop strHtmlString.Append("</table>") 'close the table strHtmlString.Append("</div>") 'close opening tag Next key 'Catagory Html Stop 'Return the HTML String CreateHTML = strHtmlString.ToString End Function [/code]

The above code builds a table for each catagory using the paramert 'intItemsPerRow', to determine the need number of table rows. inline evet hander is used to print each image to the previmage at the top of the page.

Part 4 - The PageLoad

[code:vb] Public Sub Page_Load() Dim aryCollection As NameValueCollection Dim strHtml As String   aryCollection = FolderListArray(_imageFolderPath) If(aryCollection.Count > 0) then strHtml = CreateHTML(aryCollection) Label1.Text = strHtml Else Label1.Text = "Error Directory does not exist or invaid path given " End if End Sub </script> <asp:Label ID="Label1" runat="server" EnableViewState="false" Text="Label"></asp:Label> [/code]

The Label1 is used to hold the HTML, if the namedvalue collection is = 0 then and error is printed.

Be the first to rate this post

Currently 0/5 Stars.
1
2
3
4
5

Tags:		user controls, photos
Categories:		ASP.NET
Actions:		E-mail \| Permalink \| Comments (224) \| Comment RSS

IComeFromTheNet.net

Its Done

Been Learning

A custom User Control - Photos

Part 1 -The Properties

Part 2 - The Data Structures

Part 3 - The Html

Part 4 - The PageLoad

Search

Pages

Categories

Tags

Archive

Blogroll

Disclaimer