TuTool

osman

Hey guys, me again.

Some of you may remember a program me and a friend made some time ago.
The tool would grab a part of your screen and ask for text to go along with it. In the end it would compile an html file with all the images and corresponding text in it.

I have been working on a newer version of it and started asking RenderHJS for his thoughts on it, and he had some good idea's that I didn't think of at all.
So now I am asking you guys the same thing, and I hope we can develop a nice workflow for the tool.


What does it do?
Well like the previous one it will respond to an hotkey you press and bring up the cropper. You can select a portion of the screen and press enter. This will popup the main UI. The main UI has a timeline with thumbnails showing every screenshot you took. It will ask for the text for the most recent one. You can go in and change the order, images and/or text for every 'node'.
You can add new nodes, delete or create custom ones ( text only, image only).


Now most of the stuff mentioned is optional, the ideal/default workflow is:
Press hotkey
Select portion of screen.
Press enter.
Enter text.
Press SAVE.
Repeat.
(in the end) compile.

It will compile an xml, html, txt, bb, and a stylesheet.css. It will ask if you would like to share this tutorial/document with others. If you press yes, it will be upload to a webpage where we can check out all of the tutorials, for free ofc.

My question is, what are your thoughts, ideas for this tool and especialy for the workflow. This is what renderhjs came up with, he wanted it to be able to capture the images very quickly, without having to input text right away, and in the end he would add text to every image, and compile:


I'd love to hear your thoughts.

mLichy

Oh, so you mean to show our workflow as we model /texture or whatever have you? Ah... that's really cool man

Yeah, I like the idea, and way you have it setup.

osman

Well eventualy, when the tool is done, it'd be cool to see everyones workflow for different aspects like modelling/texturing.
What I'm asking for in this thread is the workflow for this tool. How to work it, when should the cropper pop up, should the text-input popup, or should it be optional. Should it keep a single size for every image, or only for the width of the images or totaly different from the last one.
Should it remember the last used size etc etc.

mLichy

I would say, the first time you use it, have a pop-up for location to save all images/.html file/ect, and also ask about sizes and whatnot. Then after that remember the directory, but make sure it saves into separate directories.

A text input each image could be useful, but I'd say leave that option up to the person taking the images, since it might get annoying have to tag each image everytime without an option.

For crop size or location or whatever, I'd say let the person choose the crop field each time if they want, otherwise have it just do a screengrab of whatever screen you have active. (Not sure if you can choose or not when they are using Dual screens).

kodde

This sounds awesome.

I have to agree with mLichy. I'd have the Descriptive text input as an option. I personally would do it right away in order not to forget or get lazy at the end.

Regarding crop I think an option to resize the crop each time is nice, but many times you might want to keep the same cropped area (your whole viewport for instance). Maybe keep it like a Photoshop crop where you just point your mouse at the corner of the crop representation and click drag to resize, that way it doesn't have to be an extra click or dialogue beyond confirming the crop size.

I'd also want to be able to share my results with others on a private basis, meaning I wouldn't always want to upload it to a public space. So I'd have the option of just a regular save. I'm guessing you've already reasoned like this to begin with.

If this turns out as lovely as it sounds I'd be willing to pay for it.

osman

It currently works with project files. So you start a new project, and add images/text to it whenever you like. In the end you can compile it into whatever format you want( pdf is the only one i'm not very certain about).
As for the compiling, there are 3 options: Save to hdd, Upload to ftp(your own), and Update to public ftp( for everyone to see).

The crop tool has 2 modes right now:
1: Drag to crop. When you press the screenshot hotkey, it will overlay your whole screen with a tinted color, and when you drag, you can select an area, when you press enter it saves it.
2: It does not tint the whole screen, but opens a cropper window with handles to resize it and move it.

Both work different and have their pro's and cons.
For example, the second is way more waster to work with because there are less lines to draw and it works smoother with fullscreen.
The advantage of the first one is, it can capture file menus and it overall more like photoshop, so people are used to it.

I will implement both versions and eventualy build on the one that more people like.

And I will try to post some UI shots soon.

Lamont

Very cool application!

Rick Stirling

Can it export to Mediawiki formatting too?

renderhjs

may this push the discussion:


I think reduction in the flow design is key to a good tool, try to make as less action as possible and use as less GUI elements as possible.

Ghostscape

I would love some sort of multi-key system - something like F10 for a full screen dump, F11 for the cropper, and F12 for the cropper, followed by text+options.

It would be neat to have a simple highlighting system, too - when the full menu pops up, after the image has been cropped, left click+drag on the image would draw a transparent green box, and right click would draw a transparent red box, and then there would be a color picker/palette that would let you change the color of the next box you draw for that particular image, so you could do UI breakout type stuff. Ideally you'd have a color palette so the user could somehow easily color code the accompanying text, similar to this image from poop's tutorials:

mLichy

What render has looks very nice. Idk about the blue dot icon, but everything else looks good :P

Millah

A couple of additional ideas.

1. Adding in the ability to record audio clips quickly with each screenshot would be nice because I'd be able to say what I was thinking with each step, and then go back and type up the notes based on what my thoughts were. This would make it easier to create more complex tutorials.

2. Adding a "quick clip" record option would be cool for those times where actually showing a quick step or a toggle is beneficial. I'm not saying anything hugely fancy that would basically be a video tutorial, but instead something along the lines of animated gifs you see here sometimes where it loops between a paintover and the original version.