TiddlyWiki as a repository including images

[Anthony Muscio]

People of the tiddlywiki universe,

I use tiddlywiki as a PIM/Task manager and paste relevant information
into tiddlers I manage with my own custom environment.

The only limitation I have found is images, does anyone know if it is
possible to do the following using a plugin, bookmarklet or other
wise, does it need to be invented ?

Capture an image with Print screen. Eg; a software error, a screen
shot etc....

Create a tiddler and paste an image into it (from clipboard).

Ideally the image would just be placed in a folder "images" under the
tiddlywiki source file and a link inserted in the tiddler and
displayed in the tiddler view.

This would make it allot simpler than having to paste the image into a
folder and browse to a link. I got this idea/expectation after using
the great treepad.com tools, just I like the browser aspects of
tiddlywiki more.

Thanks for any ideas.

[Mark S.]

I spent way too much evaluating all those 2 pane information managers.
Looked at dozens. Treepad was my runner-up to TW. TakeNote 2nd runner
up. SqlNotes 3rd runner up. The main thing is that info in Treepad is
locked away in a semi-proprietary format (even if the specs are
released). What happens if the owner gets hit by a bus? Or sells it to
a company that decides to charge mega bucks (this sorta of actually
happened to me after using InfoSelect for two years in the 90s.). The
data in TW, on the other hand, is stored in a kind of lose XML style
format which should not be difficult to convert into something that
can be sucked up by future Wiki systems, assuming that the whole Wiki
thing isn't a passing fad.

Back to the topic.

You can use print-screen to grab your screen. Then paste into an
editor (you can even use MS-Paint, though PaperPort and other image
editors work better). Size and crop your image, and then save below
your tw file directory (like in tw/screenshots).

There's a plugin called FileDropPlugin. You can import it from:

http://bradleymeck.tiddlyspot.com/

Its original intention was to drag and drop text files into a new
tiddler, but I've adapted it to create relative links, including
images, instead. The code goes in FileDropPlugin Config. Code below.

Now you can drag your image file from your directory, and have an
image link appear in a tiddler, using a relative path that will make
it easy to transfer your TW and subdirectories together. If the image
takes up too much screen real-estate, then you can modify it using
Eric Shulman's sizing plugin:

http://www.tiddlytools.com/

Import ImageSizePlugin (and any supporting plugins ... can't
remember).

Now you have a tiddler that shows a screen shot. The configuration
code is pretty easy, so if you want to customize it so that images
always are shown as thumbnails initially, that should be possible.

-- Mark

My FileDropPluginConfiguration code, for what its worth. Its windows-
centric, and works for me, but use at your own risk, of course. Goes
in the systemConfig tiddler, [[FileDropPlugin Config]]

config.macros.fileDrop.addEventListener("application/x-moz-
file",function(nsiFile)
{
// Given file path or url, convert into standard local path
function normalizedPathArray(str) {
var idx = str.lastIndexOf(":") ;
if (idx != -1) str = str.substring(idx-1) ;
str = str.replace(/\\/g,"/") ;
var ret = str.split("/") ;
ret[0] = ret[0].toLowerCase() ;
return ret ;
}
var newDate = new Date();
//var t = nsiFile.path.replace(/\\/g , "_") ;
var localPathArray = normalizedPathArray(document.URL) ;
var droppedPathArray = normalizedPathArray(nsiFile.path) ;
var sharedPath = [] ;
for(var i=0;i<localPathArray.length;i++) {
if(localPathArray[i] != droppedPathArray[i]) break ;
sharedPath[i] = localPathArray[i] ;
}

var filePath = "file:///" + droppedPathArray.join("/") ;
if (sharedPath.length) {
filePath = "" ;
for(i=0;i<localPathArray.length - sharedPath.length-1;i++)
filePath += "../" ;
filePath += droppedPathArray.slice(sharedPath.length).join
("/") ;
//filePath = "../" + sharedPath.join("/") ;
}
var fileExt = "" ;
if(nsiFile.path.indexOf(".")!=-1) {
var fileExt = nsiFile.path.slice(nsiFile.path.lastIndexOf(".")
+1) ;
}

// Determine whether this is any of the know web image types
var isImageType = false ;
isImageType = (new RegExp(/jpg|jpeg|png|gif|tif+/i)).test
(fileExt) ;

// Generate title we'll use
var t = droppedPathArray.join("_") ;
t = t.replace(/[:.]/g,'_').replace(/__/g,"_") ;

// Generate the file or image link to be displayed
var fileLink = "" ;
if(isImageType) {
var fileLink = "[img[" + droppedPathArray
[droppedPathArray.length-1] +
"|" + filePath + "]]" ;
} else {
var fileLink = "[[" + droppedPathArray
[droppedPathArray.length-1] +
"|" + filePath + "]]" ;
}
store.saveTiddler
(null,t,fileLink,config.options.txtUserName,newDate,[]);
story.displayTiddler(null,t)
})

// End of code ==================================================

[Anthony Muscio]

Mark S,

Thanks for the considered response, I will investigate your detailed suggestions soon. In the mean time I have located and inspired by you the following tools;
PasteOff
http://blogs.technet.com/tristank/articles/pasteoff_utility.aspx

Which allows you to save images on the clipboard to a file in a nominated folder
..\images (under my tiddlywiki)

Then using Quickedit plugin I can insert image by only browsing to the subfolder.

This reduces the past into application step, next will be to use filedrop or your custom version rather than quickedit.

thanks heaps
TonyM

--
TonyM

If you have not found an easy way to do it with TiddlyWiki, you have missed something.
www.tiddlywiki.com

[Mark S.]

Hello Tony,

It doesn't look like PasteOff lets you do any cropping. Most screen
shots have stuff you don't need. So you end up with MsPaint open
anyways. I just have Paint or other program open and paste into it.
Trim as needed. Save-as to desired target directory. After the first
save, the directory is remembered for other saves.

PaintShop has a cool screen capture utility, allowing you to capture
just the portion you want on the fly.

A program that combined cropping, sizing, and generated-name saving
would be pretty cool and save time. I suspect that there is something
like that out there, but haven't researched it.

-- Mark

On Feb 15, 5:13 pm, Anthony Muscio <anthony.mus...@gmail.com> wrote:
> Mark S,
>
> Thanks for the considered response, I will investigate your detailed
> suggestions soon. In the mean time I have located and inspired by you the
> following tools;

> PasteOffhttp://blogs.technet.com/tristank/articles/pasteoff_utility.aspx

[Anthony Muscio]

Mark,

Good ideas, especially when actively collecting images for training etc... I have used tools like that. However the majority of what I do is capture ALT-Print Screen (the active window only), perhaps for application error messages from which I cant copy the text. i use Photoshop Elements and its quickedit and full edit for cropping and finishing images.

For larger captures like webpages that have research material and images I use CutePDF Writer to print to PDF. I suppose I need to find a snazzy way now to link from tiddlywiki to PDF's, perhaps get the PDF to open inside a tiddler.

Yeah, "A program that combined cropping, sizing, and generated-name saving" would be cool.

Thanks Again
TonyM

[Mark S.]

I have a PDF capture program, but the PDF's created are "glass" --
essentially one big image and not searchable text like a true PDF.
Only slightly better than a screen capture.

If you make a Wiki style link to your PDF file in TW (either by hand
or with with the drag-n-drop feature), when clicked the link should
open in another window or tab (FireFox) assuming that you have your
browser set up to acknowledge PDFs that way. That's how it works on
mine anyways.

-- Mark

On Feb 15, 6:26 pm, Anthony Muscio <anthony.mus...@gmail.com> wrote:
> Mark,

[Anthony Muscio]

Yeah Glass, foggy Glass at that.

But it acts a bit like a photograph, you know moment in time, all the elements captured in 2D. if you really needed to you may be able to use OCR (Optical Character Recognition on it). In my test with cutePDF it includes a reference to the weblink which is a good way to return to the source if necessary.

Perhaps when I get adobe acrobat it will get better.

One trick I am investigating is using hTML
In a tiddler that puts a Live website in a tiddler,. but looking at doing it for a file - in this case the PDF.

eg;
<html><div align="center"><iframe src="file:///S:/Wiki/PDFResources/Mozilla Support.pdf" frameborder="0" width="100%" height="600"></iframe></div></html>

This points to a local file address for the PDF and opens the PDF inside the tiddler with all the acrobat reader plugin tools.

And using Firefox save as complete webpage to a subfolder
Using QuickEdit to insert a link (Just to get the file path and creating a tiddler as such;

[[TwitterSupportPage|file:///S:/Wiki/WebPageResource/15356.htm]]
<html><div align="center"><iframe src="file:///S:/Wiki/WebPageResource/15356.htm" frameborder="0" width="100%" height="600"></iframe></div></html>

Also lets you browse the saved web page in a tiddler, but this time the text fields, images etc... can be seperatly selected.

A friend just demonstrated screenHunter with alows rectangular pixel selection from your screen and direct write to file, not unlike pasteOff but with the cut or crop features you like.

I have also used star office to Export to PDF then link it in a a live website (PDF File Only), this allows you to put ritch PDF files into (Not really just looks it) Tiddly wiki. In this case the text can also be searched and cut and pasted.

Thanks for the inspiration

TonyM

[Mark S.]

You know about Eric Shulman's miniBrowser plugin, right? Let's you
browse a page right inside a tiddler.

Firefox under linux can save a web page to a ps file. Then you can
convert that file to a "real" PDF with the ghostscript ps2pdf utility.
Probably have to go back and hand-craft any links you want to be live.
The trade-off is that PS capture (and thus PDF) may not exactly
resemble the original. Especially if dependent on fonts not available
to linux.

I believe this is the technique used by Acrobat -- print to a PS
driver, convert to PDF.

Nitro PDF claims to work with the OCR software built into latest MS
Office suite, so you can get it "all".

What would be cool (again!) would be a tool that would let you drag
and drop a PDF file into TW, and create a link and thumbnail. I'm
thinking that if I create my own thumbnail, with same name as the PDF
but png extension, then a drag-n-drop script could know to look for
the thumbnail and create an image link. Not perfect automation, but a
start.

-- Mark

[ken robertson]

G'day guys,
I've got some really good ideas out of this thread. Thank you.

> Yeah, "A program that combined cropping, sizing, and generated-name saving" would be cool.

Who said that?

I use a Win only shareware utility called Kleptomania, which will OCR
the text from various Win dialogs (and other places) and/or grab a
rectangle of screen image. In addition, as I've just discovered,
it'll save what's on the clipboard to a pre-named, time-stamped GIF or
BMP (or TXT or RTF) files.
http://www.structurise.com/kleptomania/index.shtml

--
Regards
Ken