GIMP as alternative for Photoshop

As our company is more and more focussing on OpenSource (free) solutions for all kinds of software (I hope they dare to throw off Microsoft Office soon for normal users soon in favour of Lotus Symphony) I decided to take a look at GIMP.

GIMP is the GNU Image Manipulation Program. It is a freely distributed piece of software for such tasks as photo retouching, image composition and image authoring.

Logo GIMP

As a Photoshop crack I was in the beginning a bit reserved to GIMP since Photoshop has got just everything you need, but it has it’s price-tag. Since I want that all developers have at least a better alternative that MS-Paint and Adobe Photoshop is too expensive there is a need to look for alternatives.

After reading an article on Smashing Magazine how to tweak GIMP a bit more and playing around with it I am starting to like it. At least for most handlings (multiple layers, resize, rotate, coloring).

Luckily there are pro’s you can learn a lot from.

Another step to a richer and cheaper developer’s desktop =)

Pagination on a View in the Notes client

A problem with Notes Views is that when they contain a lot of documents scrolling becomes inevitable. Even when you apply categorized columns it will become necessary that users click through the Views. An option would be that you just start typing and hopefully Notes will lead you to the nearest corresponding document.

When you apply categorized views the categories are displayed vertically below each other so for travelling users with smaller screens it will become tasly to open and close the categories just to see thse categories and corresponding documents displayed in a properly in the overview.

Maybe XPages in the Notes client will bring us some relief, but we are not there yet.

So how do we cope with the issue for the time being?

On the web it is common practice to have some sort of pagination on top / below lists of documents so you can navigate through the list without the need to scroll up and down or move you mouse across the screen. The pagination can be based on number of available pages or just available short cuts (example: the first letter of an available lastname). I myself have written some articles about pagination on this blog which you may check out yourself.

So this is all about the web, I adress this article to pagination in the Notes client.

The simplest way I found is to create a list of similar shortcuts, containing javascript, and render pass thru HTML in Notes. In this example I explain how I added pagination to a list (a Notes View) of persons. The thought is to show a list of persons form which their lastname start with a certain letter. What I needed to accomplish this:

• A Form with an Embedded View. This View should be categorized by the first letter of the lastname @LowerCase(@Trim(Tx_LastName);1). SaveOptions are set to zero ofcourse.
• The Embedded View has the ‘Show single category option’ in use.  As formula write the name of the Field that will acts as a temporary container (Tmp_LastName).
• Add a Field named TmpLastName on top of the Embedded View. Make it editable. As default value give it the value “a” (you could check if this value is really available or not).
• On top of the Form add the following JavaScript and CSS code:

<script language=”Javascript”>
var entryNumber = “”;
function showTab(lastName) {
entryNumber = lastName;
document.forms[0].LastName.value = entryNumber;
entryNumber = “”;
document.forms[0].set_field.click()
}
</script>

<style type=”text/css”>
font {
font-family: “Default Sans Serif”, sans-serif;
font-style: normal;
font-weight: normal;
font-size: 8pt;
color: black;
text-decoration: none;
text-align: left;
text-indent: 1ex;
}
A:link {color: blue; text-decoration: none}
A:visited {color: blue; text-decoration: none}
A:active {color: blue; text-decoration: none}
A:hover {color: blue; text-decoration: none}
</style>

• As final step you need to add a computed text just above the Embedded View. Mark the text as passthru HTML. A Value enter:

varList:=@DbColumn( “”: “NoCache” ; “” : “” ; “PersViewCategorized” ; 1 );
tmpList:=@Implode(”<a href=\”javascript:showTab(’” + varList + “‘)\”>” + varList+ “</a>” + ” | ” );
@LeftBack(tmpList;”|”)

Here we make a call to first column in the same Embedded View. Around each found category we wrap a JavaScript call which will put the value in the temporary field and finally we call the button to update the UI.

Here is a screendump that shows how it could look like:

A problem discovered

Well everything  looked shiny untill I tried to load the Form in a Frameset. When pressing on one of the links I got the message:

Some work to do IBM….

Mimicing the preview-switch option

I thought I give this Thursday a ‘SnTT’ swing (what happened with that phenomena?).

My collegue Tomas can be sometime tough with progressive ideas, but this makes you just try that extra effort to make something in Notes a little bit better than expected.

When I asked him for ideas for a standard development template he liked the ideas to have multiple collapsible preview panes BUT he wanted the option for the user to switch in preview in bottom or preview on side, just like in the Notes 8 mail template.

Since we know that the mail is a composite application with it specific functionality a different approach to provide something similar in the ‘classic’ client.

Solution

The following image shows the frameset for my application:

So in frame ‘main’ I have a frameset. By default the frameset is the one that contains a preview on the bottom. This frameset is called ‘$fs-notes-documents-vr’ (vr for vertical). I have a second frameset that is called ‘$fs-notes-documents-hr’ (hr vor horizontal) that will be displayed in frame ‘main’ when the user chooses for a preview on side.

In my horizontal menu (alternative menu) I have added 2 action buttons:

• Preview on Bottom.

@SetTargetFrame(”Main”);
@Command( [OpenFrameset] ; “$fs-notes-documents-vr” );
@Environment(”AppCode-AppPreview”;”$fs-notes-documents-vr”)

• Preview on Side.

@SetTargetFrame(”Main”);
@Command( [OpenFrameset] ; “$fs-notes-documents-hr” );
@Environment(”AppCode-AppPreview”;”$fs-notes-documents-hr”)

These actions will place the appropiate frameset in frame ‘main’ and set an environment variable. This variable is being read when the ‘default’ frameset (the frameset that contains frame ‘main’) is being used when opening the application.

For frame ‘main’ I have as computed value:

varFrSetDefault:=@Environment( “AppCode-AppPreview” );
@If ( varFrmSetDefault = “” ; “$fs-notes-documents-vr” ; varFrmSetDefault)

So if the user has used the application before and has set a preview preference the next time the user comes in the application the ‘prefered’ frameset / preview option is being used!

Too bad there is no option to read which design element is currently used in a frame (like in a @GetTargetFrame). In that way I would have been able to re-open the currently opened view / folder (okej I could use another environment variable for that).

Maintaining the universal identifier when copying documents from one App. to another

I received an incident that some documents where removed from an application in production. Since it was not sure when the documents where deleted and what other changes have occured in the application the quickest way was to quickly copy the documents from the recovery database back into the production database.

Unfortunately the documents are being linked on our intranet so a copy and paste action would modify their universal ids.

This code will reset the universal ID to the one of the original even though a copy is being made via an agent:

Sub Initialize

Dim ws As New NotesUIWorkspace

Dim destinationDb As New NotesDatabase( “ServerName”, “directory\application.nsf” )

Dim uiView As NotesUIView

Set uiView = ws.Currentview

Dim dc As NotesDocumentCollection

Set dc = uiView.Documents

Dim orgDoc  As NotesDocument

Dim newDoc  As NotesDocument

Dim junkUNID As String

Dim dontWantThisDoc  As NotesDocument

Set orgDoc = dc.GetFirstDocument

Do Until (orgDoc Is Nothing)

Set newDoc = orgDoc.CopyToDatabase(destinationDb)

junkUNID = newDoc.UniversalID

newDoc.UniversalID = orgDoc.UniversalID

Set dontWantThisDoc = destinationDb.GetDocumentByUNID(junkUNID)

‘Call dontWantThisDoc.Remove(True)

Set orgDoc = dc.GetNextDocument(orgDoc)

Loop

End Sub

XML4j.jar and LotusXSL.jar installed on server – How to investigate which applications are using them?

We have some additional programs installed on our servers which are a legacy of previous versions of Domino. With the preparation for an upgrade to 8.5 we are investigating if we still need them.

For example in the Notes 8 Designer Help I read:

Lotus Domino Designer includes the XML4J parser and LotusXSL processor in the product so you can parse and transform XML data without a separate download.

• What is the easiest way to investigate if any application is still using these programs?

(ps our environmentscomes near to 10.000 applications)

Implementing ImageFlow in a Domino app

For my ‘photogallery’ application I got a bit tired of the Smoothgallery implementation. Basically I was looking for sometime more attractive and less ‘busy’. That is when I bumped into ImageFlow a JS image gallery in a iTunes alike way (and probably more Apple software which I do not use).

Here is what it looks like in my app:

this is how it looks in my app

Some rules for implementing ImageFlow in your Domino app:

• ImageFlow is written for PHP applications, so for each image you include the reference gets rewritten in a following format:

<img width=”400″ height=”300″ alt=”Image 4″ longdesc=”img/img1.png” src=”reflect2.php?img=img/img1.png” style=”cursor: default; display: block; left: 351.665px; height: 329.215px; width: 292.635px; top: 118.524px; visibility: visible; z-index: 18;”/>

If you look at the imageflow.packed.js package you get lost since it is packed. Dive in the imageflow.js and search for the following lines:

 

var src = node.getAttribute(’src’,2);

//src =  ’reflect’+version+’.php?img=’+src+thisObject.reflectionGET;

Change the last line into:

src =  src+thisObject.reflectionGET;

 

Then upload the following files to your database:

• imageflow.css
• imageflow.js
• slider.png (the dot image that is used on the slider)

In the download on the ImageFlow site in the index.html you find the source how to structure your HTML. Modify the references to the images in your Notes app and you are good to go!

Happy coding =)

Implementing Smoothgallery into a Domino application

It was a while since I opened my Designer client for developing a new project due to other responsibilities. At this time I am prototyping a basic Notes application where users can upload images via the Notes client and browse through them via a Web browser.

So what is the status? Well in a couple of days I have come pretty far:

 

• a project name for the application (you have to start with something)
• upload (of multiple ) images via the Notes client and automatically creating thumbnails – checked
• a nice interface for the Notes client – checked
• an attractive layout for the Web client – checked
• a lightbox function for display the high resolution images with a faded application in the background – checked
• different ways to navigate trhough the application (by categorie, tags, by author, archive, calendar) – checked
• additional features as RSS, simple search, option to leave comments – checked
• login function so a user can easily see his/hers contributions – checked

 

In the startpage I have the following features:

 

• a sliding gallery based upon Smoothgallery more about this later 
• overview of the last 3 added pictures
• an overview of the last 3 comments
• an archive overview
• a section with some contact information

 

Well I still have something left in my wishlist:

• XPaginate (is that correct?) the application ofcourse haha
• add an option to send email to people with a link of the image
• upload functionality from the Web client
• improve the search functionality (at this point it searches a view)
• … some more spice probably

Smoothgallery

Well this post is about the Smoothgallery which was really easy to implement. The gallery has the follwoing functions:

• a (main) slider for showing medium sized images, with previous and next image function
• a slider for showing thumbnails, this slider has a mouse-over sliding function
• some text / description that will be displayed as a layer on top of the current image in the (main) slider

Let me start by showing you some end-result, here is an image of the gallery as it will be presented by default. I marked the 3 sections described above:

 

gallery image

 

So how did I get this to work?

Start coping the files under the directories CSS, Images and Scripts in the download to your Shared Resources \ Files section. The gallery uses the  MooTools JS Framework.

To get the files loaded add the following references in your HTML Head Content:

 

html head section

Add also the following JS function somewhere on your form:

 

JS Function

And drop the follwoing code where you want to have the gallery displayed:

 

gallery position

The Computed Text is a @DbColumn to a view:

@Implode(@DbColumn(”":”";”":”";”$v-pixsmoothgallery”;1))

On the view we say we want to have its content to be displayed as HTML and the view has only one column with the following code:

 

formula in column

(My upload agent creates 3 kind of images for each upload: 1) the original size 2) a medium size 3) a thumbnail size. You can forget the firstline here in the code)

Is that’s it? Yeah! In practically half an hour job I had the complete gallery up and running.

Here are some screendumps of the app:

Just let me know if you are interested in more code-drops…

The Lotus Symphony Developer’s Workshop

 

Symphony API

Today I received a question from a developer who received the question from a customer to store Notes documents as PDF’s via a scheduled agent.

I remember the workshop “The Lotus Symphony Developer’s Workshop” @Lotusphere where in one of the excercises you transformed Symphony documents as PDF’s.

John D. Head wrote in the BP110 presentation:

“We can use a Java Agent to automate Symphony”,

which tends me to say: Yes, it should be possible to convert Lotus Notes documents to PDF using Lotus Symphony on a scheduled basis. Or am I wrong?

Ps. Has anyone the material/excercises/instructions from this hands-on lab?

2 embedded views on a form, one not showing :-?

I thought this way something of the past, but currently I am struggling with 2 embedded views on a form. Basically I was adding a tagcloud in Jake’s Blog template on the $$NavigatorTemplate for webLaunch form.

This form uses an embedded view to display a first amount of blogs. So I added a second embedded view below the document, just as Ferdy describes in his tagcloud approach. But the JS array tagMap (tip: define it as var tagMap= {};) showed no values. So after some other approaches I deleted the first embedded view and the tagcloud appeared.

Question: “Are 2 embedded views still not possible?”

Photo gallery – Some clues?

I have recently written a proposal to a customer regarding the development of an application where the customer can easily upload images and share them in the organization. The customer is working for a marketing department so probably it will be high-resolution pictures they want to share.

In my proposal I wrote that the application would combine techniques that are already available in the ‘Domino world’ to reduce the amount of development hours.

For example, for uploading and creating thumbnails automatically the ‘Picture Gallery‘ project on OpenNTF contains some Java ScriptLibraries that do that work for you. The libraries you can almost as good as copy & paste in your application.

However I have some doubts how I want to display the images. 

• The SimplePhotoAlbum uses flash and it looks like it is not using thumbnails but it is loading the high resolution pictures as thumbs. The same goes for Dewslider which seems easy to integrate.
• The gallery for the PictureGallery is not working on my local machine. The other project Domino-Piclens has nothing released.
• Unfortunately Philippe Gauvin has stopped blogging but he has some good examples using Lightbox and JonDesign’s Smooth SlideShow.
• Also Michel Van der Meiren describes his trimmed variant of Lightbox.

One feature that I have added in my project description is the possibility to comment on individual photo’s. But this is more a nice to have.

So where to start? Or what to choose? Did I forget an option? And ofcourse is there something you can share?

My thoughts are to distribute the end-result here as a download or on OpenNTF as a project, but then again I do not think that it will a continuous development…