EASY example JS like VB in IMatch5

sinus · June 24, 2017, 12:03:00 PM

Hello
I have read and tried really a lot to create a JS.
I am able to produce some examples, because Mario has delivered with IMatch a lot of examples, tipps and documentation.
But all these examples are for me only fractions and to create a fully, easy JS I am not able.

What I (and I guess also some other users) need, is an EASY, fully working example.
For example I select an image, and let run the app.
Then some fields (NOT all) should appear in the app OR in a separate window.
And then I should be able to edit these datas and the file would have the editing data also.

Ideal would be, if 2-3 metadata-fields would be there (e.g. headline, description, city). If I the miss a field for me, I think, I could add such a field, because I have wiht these 3 fiels a working example.
If all fields would be used, then the "commands" (iterate over all...) are too complicated to put only some fields out.
Ideal would be the same for 2-3 attributes-fields. Because these fields are different for all users. 2-3 examples like in the help (notes...) would be helpful.
Changing such working fields would be also again doable for such users like me (hopefully).

In IMatch 5 is such a script, coming with IMatch and calls "Custom Metadata input form", created by the master himself

(some parts of the scripts are "taken" from JavaScript).

Such a script like this would help a lot. It has all (except attributes/properties), with what I can try to work, add (fields) and change.

I cannot find this or a equal script-example in IMatch2017, created with JavaScript.
Or did I overlooked it?

Bear in mind, I have and try really hard, but until now without success.

Attached a screenshot of the script for IM5 (a system-script).

Mario · June 24, 2017, 01:15:17 PM

QuoteFor example I select an image, and let run the app.

You can use the Copy/Paste example Iterating over All Selected Files https://www.photools.com/dev-center/doc/imatch/tutorial-recipes.html

This code gets the id and filename of all selected files. It then iterates over each file in the result and prints the file name to the console.
Could not be easier. Just copy/paste into your test app and run it.

Directly below you'll find the example Accessing Metadata with /files which shows you how you can request metadata tags like title or headline.

I'm sure I've mentioned the code recipes a number of times. Did you look at them? Copied/pasted code into your test app to see what it does? This is how you lean programming.

And of course the Metadata Example included in IMatch shows how to access individual metadata tags, update them, delete them etc. Did you study this example?
This is basically the metadata input form example, just for JavaScript. It has several sections, to be easier to understand. I cannot help you better than this.

If you have specific questions to the code recipes after trying them out, let me know.

sinus · June 24, 2017, 05:15:21 PM

Thanks Mario,
Idid already. But where I am struggling:

If I have the output, all fields are "together", how can I open a "new window" and set each field (headline...) neatly separately, like

headline: Beach
Description: dogs and cats

I think, having the output in the console is not so good for this, and if I do it in the same app-panel, all other text goes away, hence I mthink, the best woould be, that a new window (box or so) would open.

Code Select

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <script src="/system/jquery/dist/jquery.min.js"></script>
        <link rel="stylesheet" href="/system/font-awesome/css/font-awesome.min.css" />
        <link rel="stylesheet" href="/system/animate.css/animate.min.css" />
        <link rel="stylesheet" href="/system/bootstrap/dist/css/bootstrap.min.css" />
        <link rel="stylesheet" href="/system/bootstrap/dist/css/bootstrap-theme.min.css" />
        <link rel="stylesheet" href="/system/themes/slate/bootstrap.min.css" />
        <script src="/system/imws/imwslib.js"></script>
        <script src="/system/imatch/imatchlib.js"></script>
    </head>

    <body>
        <!-- This makes up the entire body of the HTML page -->
        <div class="container">
    		<p id="demo"></p>
        </div>
	
        <script>
    IMWS.get('v1/files',{
    idlist: IMatch.idlist.fileWindowSelection,
    fields: 'id,filename',
    tagtitle: 'title',
    tagdate: 'XMP::xmp\\ModifyDate\\ModifyDate',
	tagheadline: 'headline',
    tagMySillyName: 'description'
}).then(function(response) {
    //console.log(JSON.stringify(response,null,2)); 
	//document.write(JSON.stringify(response,null,2)); 
	document.getElementById("demo").innerHTML = (JSON.stringify(response,null,2)); 
});
        </script>
    </body>
</html>

Mario · June 24, 2017, 06:25:39 PM

QuoteI think, having the output in the console is not so good for this

Yes, it is. Because it does not confuse matters.
Learning how to retrieve data from IMWS via /files is one thing.
Creating and filling a form is another thing.

It seems you want to create a form ("Formular") - which is done in HTML using a <form> HTML tag. HTML is a great tool to create forms.
You have to learn how to create forms then. Like you had to learn how to use the dialog editor in WinWrap Basic.
<forms> in HTML are easy and powerful. And they can do a lot more than the simple dialog boxes you had in Basic.

Many of the IMatch sample apps use forms to display contents. And there are thousands of HTML tutorials out there which explain how to create forms in HTML.

In your HTML you do something like:

<form>
Title: <input type="text" id="form-title"><br/>
Description: <textarea id="form-description" rows="5"></textarea>
</form>

Note that I give each form element unique id.
I also used an <input> element (one line only) and a <textarea> which can display multiple rows of text. Just for show.

In your <script> code you can then set the contents of these form elements with jQuery easily:

<script>
...

$('#form-title').val('This is my title');
$('#form-description').val('And the description goes here...');

You can use the val() any number of times (to display other text) and you can also use it to get the current value (if the user has changed something).

Now, you have all the parts. Create your form, retrieve the data from IMatch via /files, then put the data received into your form as shown above.

About a dozen examples shipped with IMatch show how to do this. Formatting the form is another issue, but the Bootstrap library shipped with IMatch and by default incldued in all IMatch apps created with the AppWizard) make this easier. For a description with tons of examples, see

https://www.w3schools.com/bootstrap/bootstrap_forms.asp

and the official web page

http://getbootstrap.com/css/#forms

sinus · June 24, 2017, 08:07:20 PM

AHHHH, I begin to understand! Slowly. but step by step.
Thanks a lot!

I understand, that I can design the form with html/Bootstrap. I will have to lern this.

I see, how I can bring some text into the form (e.g. This is my title).

One (hopefully) last question:
How can I bring the real text from the file to the form?
I tried the field "description" on different ways without success.

Code Select

       <div class="container">
    		<p id="demo"></p>
			
			<form>
  Title: <input type="text" id="form-title"><br/>
  Description: <textarea id="form-description" rows="4"></textarea>
</form>

        </div>
	
        <script>
    IMWS.get('v1/files',{
    idlist: IMatch.idlist.fileWindowSelection,
    fields: 'id,filename',
    tagtitle: 'title',
    tagdate: 'XMP::xmp\\ModifyDate\\ModifyDate',
	tagheadline: 'headline',
    tagMySillyName: 'description'
	
}).then(function(response) {
    //console.log(JSON.stringify(response,null,2)); 
	//document.write(JSON.stringify(response,null,2)); 
	
	$('#form-title').val('This is my title');
	$('#form-description').val('description');

	document.getElementById("demo").innerHTML = (JSON.stringify(response,null,2)); 
});
        </script>

I think, I must change in this line something, but I tried several things without success:
$('#form-description').val('description');

Attached the output, what makes me positive.

Mario · June 24, 2017, 08:20:13 PM

You are requesting data for the file window selection. This means that you can get 0 to many files in your response.
Is this what you want? Or do you want to show the data of the focused file? I suppose that is what you want.

1. Change your code to use IMatch.idlist.fileWindowFocusedFile instead of IMatch.idlist.fileWindowSelection
This means that your script requests the data only for the currently focused file. Not for all selected files.

2. if you look at the JSON returned by IMWS (in the console in your browser or in the App Output panel in IMatch), you see that it contains an array name files.
We check if this array has at least one file:

if (response.files.length > 0) {
}

We need to do this because there may be no focused file or the file window is empty!.

3. If there is a file, we can access the data as response.files[0] 0 means the first element in the array.

4. Your code makes IMWS return the description in the element MySillyName, so to access it you use

response.files[0].MySillyName

5. Since you want to put this data into your form:

$('#form-description').val(response.files[0].MySillyName);

6. The complete code would look like this:

IMWS.get('v1/files',{
idlist: IMatch.idlist.fileWindowFocusedFile,
tagMySillyName: 'description'
}).then(function(response) {
if (response.files.length > 0) {
$('#form-description').val(response.files[0].MySillyName);
}
});

In clear text:

Get me the description tag for the currently focused file in MySillyName.
Set the form field with the id form-description to MySillyName

7. Task for you:

Get the title and put it into the form-title element.

sinus · June 25, 2017, 10:58:50 AM

Hello Mario

Thanks a lot, (first) success!

Cool, thanks really!!!
Your detailed answer is great, specialy worthful is for me, that you have explained the lines in details.
You would have been a very good teacher!

As you can see in the attachment, finally it worked.
I can see some fields in the form.

Now I can lern how to make it better looking and more things.

Is this then the right way, that I can even overwrite such values and send the edited fields back to image (in the file)?
If yes, great, the I try to lern this stuff, if not, well then I have first lerned to display the fields.

My working code:

Code Select

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <script src="/system/jquery/dist/jquery.min.js"></script>
        <link rel="stylesheet" href="/system/font-awesome/css/font-awesome.min.css" />
        <link rel="stylesheet" href="/system/animate.css/animate.min.css" />
        <link rel="stylesheet" href="/system/bootstrap/dist/css/bootstrap.min.css" />
        <link rel="stylesheet" href="/system/bootstrap/dist/css/bootstrap-theme.min.css" />
        <link rel="stylesheet" href="/system/themes/slate/bootstrap.min.css" />
        <script src="/system/imws/imwslib.js"></script>
        <script src="/system/imatch/imatchlib.js"></script>
    </head>

    <body>
        <!-- This makes up the entire body of the HTML page -->
        <div class="container">
    		<p id="oben"></p>
<form>
  Title: <input type="text" id="form-headline"><br/>
  Description: <textarea id="form-description" rows="4"></textarea><br/>
  City: <input type="text" id="form-city">
</form>
        </div>
	
        <script>
    IMWS.get('v1/files',{
    idlist: IMatch.idlist.fileWindowFocusedFile,
    fields: 'id,filename',
	tagheadline: 'headline',
    tagMySillyName: 'description',
	tagcity: 'city'
	
}).then(function(response) {
    //console.log(JSON.stringify(response,null,2)); 
	//document.write(JSON.stringify(response,null,2)); 

	$('#form-headline').val(response.files[0].headline);
	$('#form-description').val(response.files[0].MySillyName);
	$('#form-city').val(response.files[0].city);

	document.getElementById("oben").innerHTML = (JSON.stringify(response,null,2)); 
	console.log(JSON.stringify(response,null,2)); 
});
        </script>
    </body>
</html>

Mario · June 25, 2017, 12:40:15 PM

QuoteIs this then the right way, that I can even overwrite such values and send the edited fields back to image (in the file)?

Yes. You can access the form control values also via val(). See the Metadata Sample Script, which has a) a form, b) reads data from IMatch, c) stores data back to IMatch, d) has many comments, e) can run in your browser so you can use and learn how to use the debugger etc.

sinus · June 25, 2017, 02:18:01 PM

Quote from: Mario on June 25, 2017, 12:40:15 PM
QuoteIs this then the right way, that I can even overwrite such values and send the edited fields back to image (in the file)?

Yes. You can access the form control values also via val(). See the Metadata Sample Script, which has a) a form, b) reads data from IMatch, c) stores data back to IMatch, d) has many comments, e) can run in your browser so you can use and learn how to use the debugger etc.

Great. I will check all this out and finally I am hopefully replace my old scripts, so that I can really change to IM2017.