JAV Database HTA Application: Work In Progress…pretty much

[Casshern2]

For those interested in a bare bones and basic visual catalog of your JAV that has no bells or whistles or anything fancy other than being able to see what you have and where you have it via covers and not just a list…read on. (whew!)

I’ve created an even more basic HTML Application (HTA) for others to test and see if it is something they’d like to use. Basic now, but we can expand later with time and talent from the community (hopefully!) If you are intimidated by KODI or other software for any reason (or just don’t want to install anything like that) and don’t mind getting your data any way you can into a CSV file, even manually, you might get some use out of this.

At a minimum you will need:

Your own cover images
A CSV file you can add to and edit
Your time

As it stand for this basic version you will have the following fields: Code, Size, and Storage. Of course, you can rename these as you want but you will need to change some code in the HTA which is very simple to do using any text editor. With this HTA you will be able to search for any specific title code (JUFD-215 for example) or any codes (JUFD) and see which ones you have, how big their files sizes are, and where you have them.

I will answer any questions on this thread and eventually post changes or additions to the code. Others that know HTA, VBScript, or CSS are welcome to post changes and enhancements as well! I’m a working stiff so I’ll answer as I can. This is a very small application, your CSV file will quickly outgrow its file size. This version is just 6KB in size!

NOTE: This is for Windows users only. Below is a link to a package that has everything you need to get started, including a small listing and covers as an example. If you have questions please try to read any posts here you haven’t read yet, maybe your answer will be found. Of course I and hopefully others will be happy to answer anything we can. There is something from Microsoft you may have to install for this to work for you, it is just a component that lets you query against the CSV file. Most machines should have it already, but to test if you need it just open the HTA application and search for “all” (without the quotes). If you see titles returned you’re good. If you see an error, you need to install the component.

The Package
https://filejoker.net/0i8cckoeca85
https://mega.nz/#!iQ1h1Y4S!WiU7kioIqjLnaAVWt9NIumFJBbG1rGSr9Onuht0G8IE

Microsoft Component
https://www.microsoft.com/en-us/download/details.aspx?id=8247

To search in the HTA, simply enter your search keyword (all) and hit Enter. Type exit and hit Enter to close out.



A Pathetic Plea to KODI and Other Video Database Software Users:

This is small. It won’t be 10% of what you’re using. As much as your comments are welcomed I ask that comparisons to other software in terms of ability and functionality be anything but condescending. No bashing or you will be banned from viewing any new Marvel movies for the next two years. And I know you don’t want to miss Avengers: Infinity War!

 

[Casshern2]

First and foremost you need your data for this to work. So, get a CSV file of your data in Excel or by hand in Notepad. I’ve included a sample in The Package provided in the post above that you can edit for your collection.

So-You-Know: What in an HTA Application?
https://en.wikipedia.org/wiki/HTML_Application

From The Package you will find you will need to have the assets for your HTA in the same place. Of course, if you want to separate the images you can, but you’ll need to change the paths in the code using a text editor. All contents in the package should be placed in the same folder/path. I keep mine in a folder named JAD on the root C drive.

C:\JAD
C:\JAD\Images

The Package contents:

file.hta: This is the application. This is what you double-click to open your library. This can be renamed to anything you want. Mine is named JAD.hta (JAV Archive on Demand)

style.css: This is required for the HTML visuals. If you know what you’re doing you can edit and improve on this, otherwise you should leave it as-is for now. Admittedly I did a lot of searching for examples to get it working.

library.csv: This is the data behind the application. If you have Excel you can open/edit it there. If not, you can open it in Notepad or any other text editor. Take a look at the section Your Own CSV below for an explanation on how you can do this without having to have Microsoft Office/Excel.

images folder: This folder is where you will place all of your cover images. I designed it to use just the front cover image of a DVD cover. If you want the full covers there will need to be some adjustments to the code and you’ll have to see how comfortable you are with the images being resized. If you have 10 titles, you need those 10 cover images. 1000 = 1000 cover images. You get the picture. To give you an idea of that storage impact I have around 1300 titles so far listed in this thing and the covers alone are 85MB total. Perhaps double that if you use the full cover.

Your Own CSV

A standard CSV would look like this if opened in a text editor. This includes the Headers (or Field Names):

Code,Size,Storage
JUFD-125,1.25GB,Disc01
ASW-015,1.06GB,HDD01
ABNOMAL-025,2.25GB,Disc03

Notice how the last field, the Storage locations (Disc01, HDD01, Disc03) does not have a comma at the end of it. That tells the code that is the end of that record.

However, so long as the rest of the values are separated by the commas, you can space it out so it is easier to read and maintain. These also work just fine, any way that looks right to you, just keep those commas as the separator and you DO NOT need a comma after the last record of each title/row.

 

[Casshern2]

This HTA comes with the ability to enlarge the image you hover over.

Normal


Hover over the image


The way to change this is within the CSS file. Below is the default, scale(1.2). That makes the image enlarge to 1.2X the displayed size. When I change those scale values to 2.0 I see the image shown at 2X the displayed size.

.grow:hover
{
box-shadow: 0px 0px 20px #000000;
z-index: 2;
-webkit-transition: all 200ms ease-in;
-webkit-transform: scale(1.2);
-ms-transition: all 200ms ease-in;
-ms-transform: scale(1.2);
-moz-transition: all 200ms ease-in;
-moz-transform: scale(1.2);
transition: all 200ms ease-in;
transform: scale(1.2);
}

Changed to scale(2.0)


Note: I say enlarge, but in reality all of the cover images I have are roughly 378x534 (or around that) and my HTA resizes them to 146x211, which is the size I settled on for me to have a good row of images without much space at the end in full screen. So when I hover over them they get a bit closer to their real size which is why there is no blurring or artifacts normally associated with enlarging an image.

 

[Casshern2]

I’ve made some enhancements to the HTA. If by chance anyone grabbed The Package you can place this HTA in the same folder as your other assets. You won’t have to overwrite anything. To test this version simply double-click this new HTA file: file01272018.hta

The HTA is up to a whopping 9KB now!

So You Know
All enhancements and/or corrective versions will be posted with their creation date. This one, for example, is named file01272018.hta.

What’s Changed?

Recordset paging. With over 1300 of my titles being tracked with the original HTA, searching for “all” would load that entire library worth of images. That means I would need to scroll all the way to the bottom of the display, at 10 titles across per row, that’s 130 rows. This is the equivalent of IE loading 1300 cover images. With today’s PCs that really isn’t a big deal but to me it just didn’t look very clean, it just looked like a dump of everything. Plus, I’m assuming other software being used doesn’t do that? (Can anyone comment to that?)

With ADO recordset paging I can tell the HTA (by changing a value in the code in two places) to display X number of titles at a time. With the above example’s numbers I could tell it to display 10 records only per “page”. Providing a Next and Previous button I would then potentially have to click Next 130 times to reach the last of the titles. If I changed that to 30 per page that’s roughly 43 or so Next clicks to reach the last of the titles. 60 per page, 22 pages or so.



That being said, the way to display more or less images per row is to adjust the size of the images. That is done within the HTA. To edit the values open your HTA with Notepad or any text/html editor.

...right-click


Search for width= and you will find where to change the width and height. Be sure to use a cover to determine what each value should be by resizing and noting the dimensions. Just making all images 144 pixels wide may produce jagged rows if some images are taller than others. Adjust the height to go with your width for a uniform look.

For my images 144x203 makes a good row of titles at full screen. Test to see how many you are comfortable having per row.

EDIT: You will need to find these values in two places and change them.


144x203 = 10 titles per row


120x170 = 12 titles per row


Show Stats. Each title now has some stats underneath them. Also, when you hover over a title the stats will display at the top. Of course, you will only be able to see that if you haven't scrolled down enough for it to be out of sight, but, that's what the stats under each image are for.



BTW - You can change your displayed name to whatever you want in the HTA code, it is right at the very top. Just change YOUR APP NAME HERE to whatever you want to call yours. Or, delete those words to have no name.

 

[Casshern2]

You can also change the background color to suit your tastes. I started with white, then changed to black before settling on the color you see in the HTA in The Package (and the above posts). The link below will lead to a page where you can fine tune your color preference.

http://htmlcolorcodes.com/color-picker/

Click and drag within the color panel to select a color. Use the slider to move between base colors. The HTML code you’ll need is the very top option (inside the red box). Edit your HTA using your editing tool of choice and change the value bgcolor=XXXXXX. Search for body bgcolor="#575757" and change that value! Make sure you include the hash sign (#).

 

[Casshern2]

Anybody grab this just to see if it works, perhaps?

I've been working on it bit by bit, I wish I had my avisynth and MeGUI working together again so I could post some video samples of what it's looking like now!

Search for "venu"


Number of records returned


Hover over title - stats displayed

 

[Casshern2]

In another thread (HERE) @LoliKing25 asked about perhaps displaying the back and front (full cover) instead of just the front. You can but it would limit the number of titles that will fit on one "page" and will make you click Next a whole lot more. But, sure, it can be done.

 

[Casshern2]

Finally got my gear working for screen capture. I'll work on a demo video before long. Attached is another version. The style.css file can overwrite the one already being used.

 

[Casshern2]

Here is a look at file02122018.hta in action. (...as it were)

35.1MB
https://mega.nz/#!2ANwTAII!UcGCpX1AqUeyKBPwixfVb0Z0lFFgvf-TscE9lPfML9o

 

[kunoichi]

Nice work Casshern, pretty good for searching and getting a quick overview!

I played around with bootstrap a bit to make it slightly more modern-looking.

Feel free to use if you like!



I think it is a good idea to get to know Bootstrap or similar frameworks for layouts since it usually means less messing around with stylesheets and more focus on html, but on the other hand it usually takes quite a bit of practice to get to know the framework!



Bootstrap/jquery includes:

The code loads the jquery/bootstrap javascript/styles from CDNs, but they can easily be downloaded and included if needed. The javascript is mainly used for the fancy radiobuttons in this case.

<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">

<meta http-equiv="x-ua-compatible" content="IE=10"/>
<!--<HTA:APPLICATION APPLICATIONNAME="JAV ARCHIVE on DEMAND LIBRARY" ID="LIB" InnerBorder="No" Border="Thick" Navigable="yes" Icon="app.ico" VERSION="1.0" WindowState = "Normal" scroll="yes" />-->
<hta:application border="thick" borderstyle="static" caption="JAD" contextmenu="no"  Navigable="yes" scroll="auto" singleinstance="no">
<script src="http://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script language="VBscript">

Bootstrap styled html:

<body bgcolor="#575757" topmargin="0" onLoad="Fill()">
    <div class="mt-3 ml-5 mr-5 form-row">
        <div class="col-md-5">
            <div class="row form-group">
                <div class="col-md-8">
                    <input type="text" class="form-control" name="queryItem" onKeyPress="EnterKey()" class="textfield" align="center" size="145">
                </div>
                <div class="col-md-4 btn-group">
                    <button class="btn btn-outline-secondary" onClick="prev()"> &lt; Prev</button>
                    <button class="btn btn-outline-secondary" onClick="nxt()"> Next &gt;</button>
                </div>
            </div>
            
            <div class="row form-group">
                <div class="col-md-8">
                    <input class="btn btn-outline-info" type="button" name="setup" value="Setup">
                    <div class="btn-group btn-group-toggle float-right" data-toggle="buttons">
                        <label class="btn btn-secondary active">
                            <input type="radio" id="code" name="opt" checked> Code
                        </label>
                        <label class="btn btn-secondary">
                            <input type="radio" id="code" name="opt"> Star
                        </label>
                        <label class="btn btn-secondary">
                            <input type="radio" id="code" name="opt"> Storage
                        </label>
                    </div>   
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <p id="qSearch"></p>
        </div>
        <div class="col-md-4">
            <p class="float-right" id="qStats"></p>
        </div>
        <div class="col-md-12">
            <table border="0" cellspacing="14" cellspacing="0" bgcolor="white" bordercolor="silver" style="border-collapse:collapse">
                <tr>
                    <td align="center">
                        <p id="page"></p>
                    </td>
                </tr>
            </table>
        </div>

    </div>
</body>

 

[Casshern2]

@kunoichi that DOES look nice! Thanks so much for trying this out and providing some feedback and great suggestions and enhancements! I have seen bootstrap around and just the other day saw an ad on YouTube about learning it online. I'm old school when it comes to coding (still stuck on VB6, it's always had just what I need) but I know how fast this stuff moves. You've given me a great motivational post to look into bootstrap, if anything to be able to turn my little idea into something like your example, I like it!

 

[kunoichi]

Glad you liked it, another good thing to know is that there are so called themes and theme-rollers like Bootswatch, websites where you can view and download custom bootstrap themes if you don't like the defaults, it's as simple as replacing the bootstrap stylesheet! The minified versions (.min) are usually recommended for deployment of websites as they are compacted and load faster over the web.


Also note that some tutorials you find may be for the older bootstrap 3, a lot of things are the same in both versions but a few things were changed and added to bootstrap 4.
I don't want to cloud your thread with more developer stuff, but I hope you keep working on your project and keep up the good work!

 

[Casshern2]

Excellent! Thank you so much. No, feel free to post whatever you think helps, it's all appreciated.

 

[Casshern2]

Well, this is nice. Windows 10 doesn't support HTA!

I have a Windows 10 PC someone bought me (long story) that is still in the box, I haven't had a good weekend to set it up. Reading up on HTA support, though, Windows 10 doesn't have it. So...now I have to think of another way to do this! Maybe go back to my original plan I had, using IIS to serve Classic ASP. The WHOLE point, though, was to have something to share with others that was easy to use and maintain!

 

[kunoichi]

Well, this is nice. Windows 10 doesn't support HTA!

I have a Windows 10 PC someone bought me (long story) that is still in the box, I haven't had a good weekend to set it up. Reading up on HTA support, though, Windows 10 doesn't have it. So...now I have to think of another way to do this! Maybe go back to my original plan I had, using IIS to serve Classic ASP. The WHOLE point, though, was to have something to share with others that was easy to use and maintain!

It worked in Windows 10 for me, but then suddenly stopped working for some reason...

However, it still works if you launch internet explorer (not edge), by typing win+R and entering iexplore, you can then drop your .hta file onto the classic internet explorer window and it should run again.

But if Microsoft says it's unsupported then it will probably disappear eventually anyway, along with internet explorer...

 

[Casshern2]

This is cross-platform (because of Java) and it is like VB6! I wonder...

https://www.b4x.com/b4j.html

 

[Penko-san]

This is rad! Its really hard to find organization software specifically for adult videos. Nothing out there has a good system for viewing certain performers or adding tags. I'd like to see where this project goes.

 

[Casshern2]

@Penko-san were you able to try it out? I’ve been so busy at work and home I haven’t had a chance to get back to this. I really want to keep it as an HTA but with Windows 10 supposedly not supporting it that’s discouraging. Although, as you may have seen in an earlier post by @kunoichi, Windows 10 will run it if a bit differently. I have a W10 box I haven’t set up yet and can’t wait to find out how this can work going forward because it is so easy to use and maintain, especially if you just want to track things and don’t want many bells and whistles. But, like my earlier posts, that doesn’t mean we can’t add bells and whistles.

 

[Casshern2]

Woohoo!

Visual Basic Script (VBScript)

VBScript is unrelated to Visual Basic 6.0 and this support statement. However, VBScript is currently shipping as part of Windows 7, Windows 8.1, Windows 10, Windows Server 2008 including R2, Windows Server 2012 including R2, and Windows Server 2016 and is governed by the OS support lifecycle.

 

[Casshern2]

@kunoichi I thank you SO MUCH for introducing Bootstrap into the mix. I really appreciate you taking the time to show what it can do, specifically for this project. I really like the way it looks. Unfortunately, I fell prey to exactly what you mentioned. I spent a lot of time trying to figure out how to use it in very specific ways for this thing, and that led to some slight frustration, which is NO fault of yours! That’s just my inability to either understand it as I need to or my belief that I should be able to make it look/work for me the way that I want it to right out of the box. Neither turned out to be true, apparently. Haha! But, hey, I gave it the old college try! AND…I’m pretty sure I will later be able to use its potential once I get the HTA running more stable. Heck, I haven’t even completed all the features I want to add to it yet. And that’s when I realized I was drifting away from the functions and working on the visuals. That’s a no-no in the development world. Plenty of time for the paint job after the car is on the road, right? THANKS again! No doubt I will get back to that later.

You’ll be (hopefully) glad to know that I am using, at least, bootstrap-like things? If that’s even a thing? So, being that I like the slight visuals I’ve added, that’s convincing enough for me to get back into bootstrap before it’s all over with. Unless you or someone else beats me to it!

@ding73ding had mentioned wanting or being able to do advanced searches and using Tags and the like in the project he’s working on. That’s something I’m working on adding to mine as well (Thanks ding!). I may have mentioned this earlier/elsewhere, but I think all this time I misunderstood the point of that JAV Database thread over in the Discussions. CodeGeek (I miss him!) was talking about creating an online database that could be used…I think. As selfless as that is, man, I would not want to be responsible for something like that. The questions and issues and requests for this and that from users would drive me nuts. That’s why I’m creating something that hopefully others can use as-is with the understanding that unless it is a minor tweak that can be enjoyed by all, I won’t be making many changes to it and everyone is free to do what they want with it. Open-source, I guess!

So, I’ve changed the way it looks and behaves just a bit again. I’ve now added a checkbox to either include or exclude VR titles. That’s just for my needs. I can show users how to remove that if they don’t need it. One thing I plan to add is a Settings form. That way users can adjust things like the background color, the size of the thumbnails, how many titles to show on the screen at once, things like that, including hiding the VR checkbox (hopefully). There is also now a toggle that will hide all cover images and allow you to at least see a generic image for each title. You know, in case you get the feeling you’re being watched. It’s a HORRIBLE feeling. That’s happened to me a few times, here, recently. Hence, this feature! I need to be more professional and have an actual change log. Where are my manners!

Let me know if anyone wants this version posted to try out.


https://mega.nz/#!PZUw1bhJ!lLrBAKMfFj6eDYY5W0c5aJ7CONt8s8eLKP-h0qgkM1Y