Simple Drag & Drop Mangareader Version 0

A little bit of an archive post for myself. And just in case others may interested, too.

There are plenty of manga reading online sites out there, but I don’t like them. Mainly because they are mostly page by page and the clicking/key-pressing for the next page makes me almost crazy. (I sometimes read faster than the next page is built, even with a quick connection.) So just download the Manga and you get a folder full of stuff, saved at least the on-the-fly internet loading amount of time. The standard Windows Image Previewer is ok, but only shows one image and upon pressing “->” key, there is a little flash and you have to wait a microsecond. Throught it was annoying. There are also some autoplay/diashow functions, but my reading speed is not constant (how could it with different text amount), so no avoiding the clicking. Also I have a 24″ widescreen monitor. I couldn’t quite find any image programm, who would show two pages (or more) at one go. Annoying². There are also some desktop manga readers, but they take their time to open and what I skimmed over only seemed to have one page a time, either.
I came cross one online mangareader (mangapark) by chance, which allows loading all images of a chapter. Scrolling the mousewheel is seriously more comfortable than the annoying clicking payge-by-page. But on that mangareader it’s still one page for the full widescreen width. Better but still suboptimal and what about the offline files?

So I went ahead and wrote a simple batch program that creates an html page for manga reading in a browser that can use the full width of the widescreen monitor. I went for batch (despite it being ugly), because I just wanted an easy script that can be easily edited if need be without any compiling and I also wanted to keep it light weight, since I don’t want any other functions.

Specification:

  • drag and drop multiple files or folders and have them shown in one page in the browser
  • no clicking, just scrolling when reading
  • multiple images in a line using full monitor widescreen width
  • lightweight
  • easily editable
  • no compiling needed
  • works on Windows 7

Concept:

  • page is created in the same folder as the dragged objects are in (i.e. my manga folder)
  • works recursively for folder-in-folders
  • HTML page is build in alphabetical order of the files (same as in windows explorer and sorting alphabetally ascending)
  • Auto open of the HTML page, after creation
  • CSS float to make use of full widescreen monitor width, default being float: right, since manga is being read from right to left
  • resizes images, if their resolution is too huge for the monitor, default of max height is 950px (since I have 1080px height resolution), no max-width defined as manga pages usually are portrait format
  • have some background colour to have some sort of frame to the pages

Known issues/What it doesn’t do (yet):

  • No Unicode: When filenames are in i.e. Japanese characters, it fails, as console/bacth doesn’t support unicode – will deal with that later, seems to a bit nastily complicated
  • Has a nasty problem with sorting files, when they are numbered 1, 2, (…), 9, 10, 11 (…), 99, 100, 101. It will come out in order 1, 10, 100, 2 (…), 99 – TODO later. Looked a bit into it, but looks a bit ugly and I also don’t want to rename all the files.
  • Created HTML file has to be manually deleted after creation – well, obviously, sorts of. tried linking into another bat file to delete it, but browsers wouldn’t support runnig the bat file
  • IMG Tags are also created for subdirs and non-img files, may thus have some weid broken image symbols especially, when you drag a folder-in-a-folder-in-a-folder-in-a-folder-(…)folder and when
  • there are other non-img files – Was too lazy to list all img extentions that there may be, minor issue to me
  • When multiple objects, say e.g. filename dir1 img1, img2, img3 are dropped and you drag the multiple selection at img2, it will show order img2, img3, <dir 1 files>, img1 – Didn’t find out how to solve this yet, but since I usually drag just the folders/files in order it’s a minor issue to me
  • Seems to have trouble working when dropped objects are in Windows library folders that contain “(” or “)” in their directory name – Have not the tiniest bit of a clue why as of yet
  • Float may look ugly for especially the first two lines, when the images don’t have the same height, mostly when a bigger image comes first then a smaller. – Didn’t yet bother to look, how to solve this in CSS, since
  • image usually have about the same height
  • The caption of a second directory may look ugly when using float – Didn’t yet bother to look, how to solve this in CSS, since it didn’t bother me
  • Prints quotes (“”) around directory name header writing, when it contains whitespaces, while it doesn’t when it doesn’t – minor issue, didn’t bother with that (Through I managed to avoid this when writing into the img src tag. Totally forgot how i did that, however)

Download:

Admittedly I never dealt much with batch before nor do I have any deeper knowledge on HTML+CSS, so I more or less patched things together by googling randomly around.

Code:
(in this post remove @ with < since wordpress messes up with the html tags…)

@echo off

REM =========================================================================
REM Set some Variables
REM =========================================================================

REM Set Filename
set htmlFile=aTextfiles.html

REM Set float direction
REM left of left to right
REM right for right to left
REM clear for no floating at all
set floatDir=right

REM Set Background colour
set bgColour=#FAEBD7

REM Set max pixel height of image for it to fit without scrolling
REM (should be a bit smaller than your monitor height resulution)
set maxHeight=950px

REM =========================================================================
REM console status notification
echo building...

REM =========================================================================
REM Write HTML Opening Tag
REM If File does no exist, create a new one, if file exists content is overwritten
echo ^<html^> > %htmlFile%

REM =========================================================================
REM Write Style Header
echo ^@style type="text/css"^> >> %htmlFile%

echo body >> %htmlFile%
echo { >> %htmlFile%
echo background-color:%bgColour%; >> %htmlFile%
echo } >> %htmlFile%

echo   .floatClass >> %htmlFile%
echo   { >> %htmlFile%
echo   float: %floatDir%; >> %htmlFile%
echo   margin: 5px 5px 5px 5px; >> %htmlFile%
echo   max-height: %maxHeight% >> %htmlFile%
echo   } >> %htmlFile%
echo ^@/style^> >> %htmlFile%

REM =========================================================================
REM Write Header caption
echo ^<br^>^<h1^>Simple Drag & Drop Mangareader Version 0^^<br^> >> %htmlFile%

REM =========================================================================
REM Write HTML Image Lines
REM =========================================================================
REM Parse through all arguments/dropped objects
REM Goto because arguments access is limited to 1-9
if [%1]==[] goto :eof
:loop

  REM write the directory name
  echo ^<br^>^<h3^>%1^^<br^> >> %htmlFile%

  REM Parse Files and write image HTML Codeline
  for /f "tokens=* delims=" %%a in ('dir %1  /s /b') do (
    echo   ^<br^>^@img class=floatClass src='%%a'^> >> %htmlFile%    
  )

REM Delete first argument and make 2nd to be 1st
shift
if not [%1]==[] goto loop

REM Write HTML closing tag
echo ^@/html^> >> %htmlFile%

REM start the HTML file
start %htmlFile%

REM @pause

Just in case anybody else starts using it, feel free to leave some feedback. =D

4 Responses to Simple Drag & Drop Mangareader Version 0

  1. kyokugen says:

    Nice!

    But you can have a slightly better effect using MangaMeeya’s thumbtail mode. You should give it a try.

    • Luna says:

      Interesting (und unexpected XD) feedback.
      Tried MangaMeeya out in the quick run. It’s certainly not bad, but not quite, what my requirements were, which made me write one myself. Which include drag and drop of a root file doesn’t simply show all files sequencially but makes a folder structure, scrolling is not monotounous of the same speed, but page by page, Perhaps, that is configurable, but at leaqst the thumnail size was reset at each startup and didn’t bother with it more.
      Also I have my browser open anyway all the time, which saves me the need to open a new application. In the broser, I can easily copy one certain page via grapgics drag and drop. (Like picking up some special page for making avatars etc.)
      And most of all, it doesn’t seem to support unicode file(path)names, when I dragged a kanji-ridden folder to it. Which is bad, since I have quite some of it. =X (Have solved the unicode issue in my script meanwhile, so I don’t see much of a advantage yet.)

      But thanks for the input anyway. In case, I should ever want to have a non-slim version, I may look back at it. =D

  2. John says:

    Neat, tried it out and works like a charm

    also thank you for scanlating kaguya hime!

  3. Pingback: Simple Drag & Drop Mangareader Version 0.9 | tsukiyadori

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: