BASIC scripting: output

sinus · August 12, 2017, 10:50:11 AM

Hi all
I started with a very, very basic script. I am not even able to do a proper output.

$:-\$

I tried to find another example, but they all are so sophisticated, that I cannot adapt it.
Or, like the samples, works a lot with console.log, what does not help me.

Here is a short working example, very basic.
I select some images and the filenames should be displayed inside the IMatch-app.

In the console this works. But not in the IMatch - app, here only one file is displayed, instead of several files.
I have read, that I should take innerHTML for this. Hope this is correct.

And I guess, I should alter this line, but I tried a lot, without success.
document.getElementById("info").innerHTML = (f.fileName);

Can please anbody help me?

Code Select

    <body>
<!-- html-section -->
        <div class="html-container">
            <p id="app-name">id1: an id, this text will be only displayed, if the id will not be overwritten by JS</p>
			
            <h1 id="info">id 2: another id, because not filled with JS, this text will be displayed</h1>
<!-- from mario -->			
            <h2 class="text-center"> Happy <i class="fa fa-smile-o"></i> Coding!</h2>
        </div>

<!-- script-html-section -->
        <script>
            $(document).ready(function () {
			IMWS.get('v1/files',{
			idlist: IMatch.idlist.fileWindowSelection,
			fields: 'id,filename'
			}).then(function(response) {

			response.files.forEach(function(f) {
			$('#app-name').text(f.fileName);
			        console.log(f.fileName);
					
			document.getElementById("info").innerHTML = (f.fileName);
		}, this);
                });
            });
        </script>
    </body>

ubacher · August 12, 2017, 11:32:26 AM

This will overwrite each filename. If you want all you need to concatenate them onto a string and
display this string. Do this inside the loop and then display the string after.

sinus · August 12, 2017, 12:00:43 PM

Quote from: ubacher on August 12, 2017, 11:32:26 AM
This will overwrite each filename. If you want all you need to concatenate them onto a string and
display this string. Do this inside the loop and then display the string after.

Thanks.
Yes, I want simply display the names of all the selected files (about 10).
I can see them in the console log, but not in the IMatch-app.

Yes, do it inside the look and dispay the string after, fine, but I am not able to do this.
As long as I am not able to do at least some basic stuff with JS and IMatch, I will "stuck" with IM5. $:-\$

BTW, I have read also your "start-thread" (thanks!), but it helped me not here.
What I am struggling, I guess, is the relation (Zusammenarbeit) between IMatch and JS.

That is why I tried to search for an easy script, what takes simply all the selected files and display the filenames (and maybe 1 metadata-field) in the IMatch-app-panel.
That's it, not more.
But there is no such an easy working! sample here, all is for me too complicated.

Hence I ask such basic stuff.

I have made (well, clutted together from here and there

) for example a JS-script, see attachement. This works fine.
So I am not a TOTALLY beginner, but I am a beginner working with IMatch and JS of course.
If I look at W3 or other sides, I can see and also work with several JS-scripts. But they do not know IMatch.

So the only place to find such samples is here, but I cannot find such a basic samples. For example the IMatch-samples works all with console.log.
But this is exactly the problem, with console it works but not with the output in the IMatch-app-panel. There I can see only one filename, while in the console - log are all the selected names.
Or your examples, what you have uploaded (thanks really), are also too complicated for me, unfortunately.

I have seen your questions and your big steps in your knowledge. I envy you, your understanding is much better than mine to see quickly some "relations" and "ways" for scripting.

Hmm, see it this way:
I must explain for a person, how to take pictures with my Nikon, this person has never worked with a camera.
Well, if I then explain for him, how to calculate the depth of field, where to overexpose an image, the handling of RAW and jpg, where to store the name of the photographer for the metadata, then I thnk, this person would be totally overhelmed.
What this person should know, is simply, where to push the button.
And where to see the images after shooting, where to see the next image and so on.
Thats it.

All other stuff, if this person is interested, he will lern after this. Step by step.

So I see me here. I see only one image after pushing the button, but I can not see the next image.

thrinn · August 12, 2017, 12:17:45 PM

Hi Markus,
for a really basic and clumsy example just change your line

Code Select

document.getElementById("info").innerHTML = (f.fileName);
to

Code Select

$('#info').append('<br/>' + f.fileName);
The $('#info') is just jQuery syntax for document.getElementById('info'). Shorter and better for performance.
Then, instead of setting the content (what you did) to the filename, you should append it to whatever is there. Otherwise, in each loop you will overwrite the result of the previous one, that's why you see only one filename.
And the <br> is just a linebreak to get a new line for each filename.
Hope this helps.

sinus · August 12, 2017, 12:54:48 PM

This helps a lot, Thorsten, in fact you made my day!
Thanks a lot, also for your very good information, really additional helpful.

This append-thing is also that, what ubacher wrote about, I think (overwriting).

Hah, appreciate very much, it works now!
One single line an my day is fine!

Mario · August 12, 2017, 01:13:47 PM

Your forEach loop just overwrote whatever was in the HTML tag, every time. This was why the "last" file name always won.

In this recent thread https://www.photools.com/community/index.php?topic=7013.msg48726#msg48726 I showed John how to display data from an array (like your files) in a list. Check again the code example I've posted there for some additional ids.

Appending to a tag with the .append method works. But it looks better if you make a real list (like the <ul> example in the thread above).

The same method would also work if you want to display data for files in a table. You can see an example for this in the html-report app. You can run this app from the Import & Export panel. The app displays certain data for all selected files in a table.

It does basically what you do in your script. It gets data for some files, then runs in a loop through all the files.
For each file it appends a row with some columns to a table. Simple stuff but useful.
It even includes a thumbnail of each file!

This would be a good app to studio (and to trace through with the debugger in your browser).
The import code is the loop, which has barely 20 lines of code and does all the cool stuff.

I wrote the app so it also runs in an external browser, using the files currently selected in the file window.
Line 174 does the

IMWS.get('v1/files',params).then(function(response) {

and then creates the table from the result.

sinus · August 12, 2017, 02:28:47 PM

Mario,

Thanks also a lot for this detailed information.
Really cool stuff.
Since Thorsten gave me a start with one! good line, I was able to add some other fields.
Makes me feel much better.

And now, I think, I will be ready to study your examples, yes, looks very good.
I will study the thing what you explained to John (who is also happy, as it seems

) and this html-report app.

I guess, I am really someone, if I have a working easy example, then I can work with it and makes it better and better, step by step.

Now with your help and the help from Thorsten and ubacher I am at the start to climb the mountain.

In the post before I forgot to add my JScript, what I created. But here was IMatch not involved, hence I had a lot of examples, and I could take here and there some code.
(I have uploaded such an image in the past, but the script turned out to be very useful).

It works really fine, for example, it displays

- the actual moon
- the weather from 2 places
- the worldtime
- a basic calculator
- a slider with RGB-stuff
- a musicbox
- and a birthday and event - countdown
- a alarm-setter with music

Great, what can be done.

And now, if I can work and play with IMatch, I can play with image and with fields in the images.
If I am better in this and understand it better, then it makes more fun and I can create some useful, but also some funny apps, I hope.
Maybe not today, but tomorrow.

(well, joke beside, but in some monthes, I hope).

As you wrote in different places here, I am also sure, with JS and IMatch we can create some very usefull stuff.

sinus · August 12, 2017, 08:21:27 PM

At least I am now able to read and output metadata-fields and attributes from all selected files.

Thanks again for all your help.

The next step fro me is to try calculate some attributes - fields and then write them back.
Not easy for me, but at least I make progress, step by step.

If this is done, then it will be time for me to change really to IM2017.

Mario · August 12, 2017, 08:29:49 PM

IMWS.get('v1/attributes', {
idlist: IMatch.idlist.fileWindowSelection,
set: 'Rechnung'
}).then(function(response)) {
...
}

// Now you have the data for all selected files for the Attribute Set 'Rechnung'
// Note: Not all files must have data. Some files may have multiple records, other files just one.
// You need to consider this when you iterate and sum.

Basically you'll need two nested loops:

One loop over response.result (which has one entry for each file)
One loop over each element in the returned data array (these are the Attribute records per file)

This allows you, for example, to sum up the contents of the Attribute 'Preis' for each file.

sinus · August 12, 2017, 11:11:26 PM

Thanks, Mario
I will try to do so, like you wrote.

If things does work, it makes of course much more fun and slowly I begin to understand some things better.
I will try further.