Lorem Ipsum App

[Mario]

Yesterday I've ported (and improved lots) my "Generate Test Data" IMatch script to IMatch 2017.

The Lorem Ipsum app does only one thing: It fills selected metadata tags with 'plausible' random values.

I use this for testing.
For example, if I need 1000 files with 20 to 50 hierarchical keywords.
Or when I need to fill the title, description for 10,000 files with plausible values to test search functions or to do some performance testing.

The app can also set date and time of selected files to a date and time from a given range.
And it can set the GPS coordinates of files based on a center coordinate and distance.
Very helpful if you quickly need 5000 GPS-coded files from the UK when you need to do some map panel testing.

The performance of the app is better than the old Basic script!

I think I will include this app in IMatch 2017 because it demonstrates several real-word programming topics:

Getting the selected files from the file window.
Monitoring the selection in the file window.
Loading files from the server (the source keywords and the lorem ipsum are stored in files on the server).
Processing files in batch.
Setting multiple metadata tags in one IMWS call.
<form> processing.
Storing and restoring user settings.
...

This is how the app looks in an IMatch 2017 app panel (click to zoom):



And this is what the app produces: Lorem Ipsum text and plausible keywords:

[sinus]

Sounds cool, is for surely cool.
This means, I can fill some data with such a script into one or several files. Yeah!

[PoeschelA]

Dear Mario,
I changed to IMatch 2017 a few days ago and recognized that Scripts are dead and Apps are live. :-)
Ok, I have to re-write the workflow from scratch :-(
Therefore I'm searching for good examples, who to proceed with selected files, and found this entry.
Now my question: Where do I find this script (or can download)?
Thanks, Alexander

[Mario]

The Developer Center has lots of information about IMatch apps and developing.

The IMatch Developer Documentation explains the IMatchLib und IMWSLib classes which are part of IMatch and which make it easy to work with IMatch and IMWS scripting.

The Code Recipes is an excellent starting point, with lots of examples, "How to to this..." tutorials and plenty of code to copy/paste into your own code.

IMatch ships with over 20 Sample apps which demonstrate every aspect of the scripting system.

PS.: The Lorem Ipsum app is still internal and not shipped as part of IMatch. It is of limited use for regular people - filling metadata with random data is nothing you usually do 

[PoeschelA]

Hi, understand ... I'm searching for the "basic frame" to extend it for my needs.
"Basic frame" means ... do a couple of steps with all selected files (e.g. changing a part of the filename if necessary, adding categories if filename contains specific keywords, ... and many other things)
That's the reason why I were searching for such a "basic frame" to learn and copy.
Filling my photo metadata with random data isn't on my wishlist

[Mario]

Look at the Iterating over All Selected Files example in the Code Recipies for a start.

The sample app (in the App Manager) Process Files is a good example for how to process any number of files in an app.
It takes the current selection in the file window and then loops over these files and uses a progress bar as well. It does nothing else.
Check the comments in the index.html for places where you could hook in your own code.

To use this app for your own experiments, follow the 3 steps explained in the Using the Sample Apps for Your Own Experiments in the Code Recipes.

The Process Files app is a modal app. It shows a dialog box, blocking the IMatch user interface while it runs. Great for apps which process files and don't want the user to interfere.

[Carlo Didier]

I just tried out the progress bar as from the sample script "Process Files", but in my script I can't see the progress bar until the script is done. How can I update the display while it runs?

[Mario]

Look at the progress bar example.

[Carlo Didier]

I thought I had it all correct.

Code Select Expand

...
<div class="progress">
    <!-- We use a progress-bar-warning because the color looks nice. See http://getbootstrap.com/components/#progress for more info -->
    <div id="pbar" class="progress-bar progress-bar-warning" style="width:0%;">0%</div>
</div>
...
var perc = (idxFile * 100) / arrNewFiles.length;
$('#pbar').css('width',perc + '%');
$('#pbar').text(Math.floor(perc) + '%');
...
Problem is, it shows up correctly when all is finished, but it doesn't show during the progress. Like the app window isn't updating itself while the script runs.

[Mario]

You don't show us what your app is doing.
Do you update the progress bar in intervals? In a loop? From an AJAX query?
Have a close look at the progress bar and process files app and read the COMMENTS in these apps.
You need to allow your browser to update the DOM from time to time.

[Carlo Didier]

You need to allow your browser to update the DOM from time to time.

Yes, but how?

I run a loop. Full script attached (work in progress!).

[thrinn]

I checked your script, and it works for me (see screenshots) - at least for the first run. If the process bar arrived on "Done!", it will not be reinitialized when clicking on the Start button again. Only if you reload the app. But this is only a matter of resetting your vars.

[thrinn]

Side note: I see a lot of for loops in your code. For looping over an array, JS offers the foreach method.
Instead of

Code Select Expand


for (var idxFile = 0; idxFile < arrNewFiles.length; idxFile++) {
    var intFileID = arrNewFiles[idxFile].id;
// Some more code...
}

you can write:

Code Select Expand


arrNewFiles.foreach(actFile => {
   var intFileID = actFile.id;
});

actFile is the actual entry of the array in the loop (corresponds to arrNewFiles[idxFile] in your code).

Shorter and better to read, in my opinion.

[Carlo Didier]

I checked your script, and it works for me (see screenshots) - at least for the first run. If the process bar arrived on "Done!", it will not be reinitialized when clicking on the Start button again. Only if you reload the app. But this is only a matter of resetting your vars.

Very strange. Here, it jumps right to the last screen with the results ... (screenshots from a newer version - I'm still working on it, currently vetting out all unnecessary stuff and trying to format it the way I want without using the unreadable css files)
After clicking on the start button, nothing visual happens and after a few seconds (depending on the number of images) the end result appears.

[Carlo Didier]

Side note: I see a lot of for loops in your code. For looping over an array, JS offers the foreach method.
Instead of

Code Select Expand


for (var idxFile = 0; idxFile < arrNewFiles.length; idxFile++) {
    var intFileID = arrNewFiles[idxFile].id;
// Some more code...
}

you can write:

Code Select Expand


arrNewFiles.foreach(actFile => {
   var intFileID = actFile.id;
});

actFile is the actual entry of the array in the loop (corresponds to arrNewFiles[idxFile] in your code).

Shorter and better to read, in my opinion.

You're right. I know "foreach" from Powershell. I already planned to change that part. It is more elegant.

[Carlo Didier]

Side note: I see a lot of for loops in your code. For looping over an array, JS offers the foreach method.

I tried to replace this:

Code Select Expand

var arrNewFiles = response.categories[0].files
for (i = 0; i < response.categories[1].files.length; i++) {
    arrNewFiles.push(response.categories[1].files[i])
}

with this:

Code Select Expand

var arrNewFiles = response.categories[0].files
response.categories[1].files.foreach(objFile => {
    arrNewFiles.push(objFile)
});

but then I get this error:

WARN:TypeError: response.categories[1].files.foreach is not a function

[Carlo Didier]

Found it!
"foreach" is not "forEach"
No comment. Just see attached my rant on facebook ... 'nough said.

[Mario]

All proper programming languages are case-sensitive.
Did you install the VSCode extensions mentioned in the post I linked? If so you would have seen this flagged as a syntax error.

[Carlo Didier]

All proper programming languages are case-sensitive.

You know we agreed to disagree on that point. And even if millions do the same stupid thing doesn't make it less stupid. There is just no advantage to it being case-sensitive, only disadvantages.

Did you install the VSCode extensions mentioned in the post I linked? If so you would have seen this flagged as a syntax error.

That's the next thing I'll do.

[sinus]

All proper programming languages are case-sensitive.

You know we agreed to disagree on that point. And even if millions do the same stupid thing doesn't make it less stupid. There is just no advantage to it being case-sensitive, only disadvantages.

Did you install the VSCode extensions mentioned in the post I linked? If so you would have seen this flagged as a syntax error.

Did you not mention this once ... or twice? 

[Carlo Didier]

Did you not mention this once ... or twice? 

Nooooooo! 

[Mario]

Yep. did.
EsLint, HTMLHint, Bookmarks are truly indispensable extensions and make programming a lot safer and easier.
The spot duplicate and wrong variable use, typos in variables and function names etc.

I also use Git History for git and HTMLTagWrap because I write so much documentation in HTML now.

For PowerShell programming the PowerShell extension from Microsoft is cool, often better than the standard PowerShell ISE.
And Visual Studio Code is pure gold.

[Carlo Didier]

Yes, VSC seems very powerful.
I just went to the ESLint online documentation because I had no idea what it was or did. I understood the first paragraph, but the rest of the page was just more chinese to me.
When I look up ESLint in VSC, the description starts like this:

VS Code ESLint extension

Integrates ESLint into VS Code. If you are new to ESLint check the documentation.

The extension uses the ESLint library installed in the opened workspace folder. If the folder doesn't provide one the extension looks for a global install version. If you haven't installed ESLint either locally or globally do so by running npm install eslint in the workspace folder for a local install or npm install -g eslint for a global install.

On new folders you might also need to create a .eslintrc configuration file. You can do this by either using the VS Code command Create '.eslintrc.json' file or by running the eslint command in a terminal. If you have installed eslint globally (see above) then run eslint --init in a terminal. If you have installed eslint locally then run .\node_modules\.bin\eslint --init under Windows and ./node_modules/.bin/eslint --init under Linux and Mac.

Is it really that complicated to setup? Or can I just install the extension and go with the defaults? If not, then I'm completely lost again and I don't think the work to configure it is worth it.

[Mario]

Use defaults. Change as required to fit your needs.
I cannot provide support for Visual Studio Code extensions. There are tons of resources and communities out there which deal with HTML/CSS/JavaScript.