App: HTML TimeLine - an Import/Export App

[Jingo]

The path to the "Timeline" folder is C: \ ProgramData \ photools.com \ imatch6 \ webroot \ user \ TimeLine
and -yes - I can see the app icon in the App manager and it is nothing to see in the Import/Export panel.

Another thought - what version of IMatch are you running?  The latest version was developed on and tested for version 2020.4.4.

[wolboe]

I'm running this  Version 2020.4.4.

[sinus]

The path to the "Timeline" folder is C: \ ProgramData \ photools.com \ imatch6 \ webroot \ user \ TimeLine
and -yes - I can see the app icon in the App manager and it is nothing to see in the Import/Export panel.

Another thought - what version of IMatch are you running?  The latest version was developed on and tested for version 2020.4.4.

Wolfgang, Andy, hmm. Curious, really.
I have tested your app even with IMatch 2019 (on an older computer), no problems, worked out of the box.

I have no idea ... Jingo, you have in the json still this entry:

Code Select Expand

   "supportsDrop": true,
    "version" : "1.2",

But I think, this cannot be the reason, that Wolfgang and JRosa have troubles?

[zematima]

Hi all:
Same problem here .
Version 1.2 only the Expand All button works...
Last version of IMatch.

In the browser after pressing F12
<pre style="word-wrap: break-word; white-space: pre-wrap;">Error 404: Not Found
Not found</pre>

Yesterday I tried the first version. It worked in IMatch but not in the browser. Same Error (404:Not Found). Tried Edge, Chrome and Internet Explorer.

I think that the earliest version should be in the first post with a prefix 01,02,etc, so for those who download the oldest versions knew that they have the latest one, and don't have to go to the json file to confirm.

Best regards,
JRosa

[wolboe]

I think that the problem is line 131 in index.html (version 1.2) - I replaced it with line 147 from index.html of the variant import/export - and everything works.

line 131:  sortprofile: 'Capture Time',
new line 131:  sortby: 'datetime',

Wolfgang

[sinus]

Thanks, Wolfgang and JRosa

I think, these are interesting infos for Jingo, what both of you made. I am sure, he will check the code and maybe change some stuff and maybe upload a new version.

Great, Wolfgang, that it works now for you. Well done!
It is interesting: the App from Andy works really out of the box, means with this line, what you have mentioned.

But all my files for date/time are based on the filename. I have ALWAYS the same and correct date in the filename, hence I do not use this line for my own App (what is basically the App from Jingo).
I cannot use this line, because not all my files, specially old ones, has the correct date/time in the metadata, but in the filename.
If I must correct a date, simply change the filename: done. That is why a lot of date/time problems here affects me not really. 
Instead the line, what you mentioned (and you have corrected for you)

Code Select Expand

sortprofile: 'Capture Time',

I have the line

Code Select Expand

  sortby: 'filename',

But as I wrote, for me both works ... but the sort order is sometimes not correct, if I use Jingo's line.

BTW: the difference between sortprofile and sortby ... don't ask me, I do not know 

@Jingo:
IF you maybe upload a new version, you could also change the description of the json, because there still is displayed "drop images ... " or something like this, what the user then sees, when he hover over your icon (what is nice, btw).

[wolboe]

@Markus:
The most important reason: Jingo used a sorting PROFILE - if that doesn't exist, nothing happens - and that's how it was with me.
Now have a sorting PROFILE profile 'Capture time' created and everything is running.

Wolfgang

[sinus]

@Markus:
The most important reason: Jingo used a sorting PROFILE - if that doesn't exist, nothing happens - and that's how it was with me.
Now have a sorting PROFILE profile 'Capture time' created and everything is running.

Wolfgang

Ah, that is the reason, now I understand.
Thanks for your explanation ... phew, as Mario pointed out, a small thing, and it runs not.

[zematima]

Hi:
Tried what Wolfgang said.
Working. Well done.

After changing the line , it worked inside IMatch but not in the browser.
So I changed the HTML address by the one below. Now everything is working.


Sinus:
As Mario said you can edit the posts as a Moderator.
You must change in the first post of Jingo the line that says:

... via the HTML address (http://127.0.0.1:50519/imatch/apps/Timeline/index.html) ...

by this one:

... via the HTML address (http://127.0.0.1:50519/user/TimeLine/index.html) ...

Best regards,
JRosa

[sinus]

Hi:
Tried what Wolfgang said.
Working. Well done.

After changing the line , it worked inside IMatch but not in the browser.
So I changed the HTML address by the one below. Now everything is working.


Sinus:
As Mario said you can edit the posts as a Moderator.
You must change in the first post of Jingo the line that says:

... via the HTML address (http://127.0.0.1:50519/imatch/apps/Timeline/index.html) ...

by this one:

... via the HTML address (http://127.0.0.1:50519/user/TimeLine/index.html) ...

Best regards,
JRosa

Thanks, JRosa

also well done 

Cool, when Jingo awakes in the morning, he will see a lot news here.  (though I do not know, where he lives, what time he has)

I will try to do so, change the line in the first post of Jingo.

[Jingo]

also well done 

Cool, when Jingo awakes in the morning, he will see a lot news here.  (though I do not know, where he lives, what time he has)

I will try to do so, change the line in the first post of Jingo.

Indeed!  Good morning and thanks everyone for catching all this! I did indeed include a sort profile that I thought was standard.. but I guess was something I built in my version many many MANY releases ago?  I added that code to ensure the sort order returned was date based since the for each iterates over the results and we want the results in date/time order.  I can't use the sortby variable because that uses FILE date/time which may not match the capture date time for most folks - and that is not available as a sort field.  Quandary!!

Any way.. I guess editing the original post and adding a big RED note about building the Sort Profile: Capture Time using: Date & Time and then Filename as parameters should be added... Markus, can you please add this detail? 

Thanks all for reviewing and finding this stuff....  the perils of APP development using your OWN database rather than a default one!

[sinus]

Andy, could you please correct this phrases, then I would add them bigger and in Red  in the posts with the zipped files.
Do not hesitate to change that, even if you completely rewrite it.


Please note, important:
If the app is not running, please create a sort profile in IMatch.
The sort profile should be called Capture Time and using Date & Time and then Filename as parameters.
Then you will have a lot of fun with this fine App.

Thanks.
BTW: I have not yet totally finnished my "own" Timeline-App, but hopefully soon.

[Jingo]

Andy, could you please correct this phrases, then I would add them bigger and in Red  in the posts with the zipped files.
Do not hesitate to change that, even if you completely rewrite it.


Please note, important:
If the app is not running, please create a sort profile in IMatch.
The sort profile should be called Capture Time and using Date & Time and then Filename as parameters.
Then you will have a lot of fun with this fine App.

Thx Markus - just a few tiny edits please:

In order to use the APP, you will need to create a Sort Profile (https://www.photools.com/help/imatch/#rmh_config_sortpresets.htm).  The Sort Profile is used to force the selected files to always sort by capture time - important for a timeline of course.

The Sort Profile should have the name: Capture Time and use the Sort By value of Date & Time:

[sinus]

Hey Andy
Thanks for your help.
Sounds very good, your sentences! 
I did add them at the posts.

I hope, that some users will use the App. I personally do not understand full the whole code, but because I have looked carefully at your code, I think, I understand it much better.
And this is good for other Apps. 

Have a good day!

[wolboe]

I think that the problem is line 131 in index.html (version 1.2) - I replaced it with line 147 from index.html of the variant import/export - and everything works.

line 131:  sortprofile: 'Capture Time',
new line 131:  sortby: 'datetime',

Wolfgang

Everything works with the "new line 131:  sortby: 'datetime'" without sort profile - (why) is this version worse?
It would be easier since you don't have to create a profile.
Wolfgang

[sinus]

Thanks, Wolfgang

From my point of view you are right.
Your line works also for me. 

[sinus]

I think that the problem is line 131 in index.html (version 1.2) - I replaced it with line 147 from index.html of the variant import/export - and everything works.

line 131:  sortprofile: 'Capture Time',
new line 131:  sortby: 'datetime',

Wolfgang

Everything works with the "new line 131:  sortby: 'datetime'" without sort profile - (why) is this version worse?
It would be easier since you don't have to create a profile.
Wolfgang

And, Wolfgang, thanks, I have used your line in my code also, what I just uploaded, thanks for that!
I hope and think, it works 

Because in my own code here I use simple the filename (sortby: 'filename',), because all my date/time are at the beginning of every filename. Makes life for me easier, because the filename is unique, I can change it easy and though we have some date-fields, what date/time should go, some software does sometimes change them.
We have enough posts here for this and other date/time problems.

I do this filename-system since a long time and I am always happy with this system.

[Jingo]

I think that the problem is line 131 in index.html (version 1.2) - I replaced it with line 147 from index.html of the variant import/export - and everything works.

line 131:  sortprofile: 'Capture Time',
new line 131:  sortby: 'datetime',

Wolfgang

Everything works with the "new line 131:  sortby: 'datetime'" without sort profile - (why) is this version worse?
It would be easier since you don't have to create a profile.
Wolfgang

My understanding (and I could be wrong) is that the sortby: datetime uses the SYSTEM date and time - the timestamp of your images in windows.... the sortprofile can use the CAPTURE date and time - the timestamp from your image metadata that is the actual date of photo.  IF these are the same for your system - then you can use either... if your system date/time is NOT the same as the CAPTURE date/time (my scenario) - then the images may not sort the way you want.

[Mario]

sortby "datetime" uses the IMatch File DateTime (based on EXIF or whatever). The same you see in file windows or which is used when you create a sort profile with DateTime.

[sinus]

This App works very well.

I am trying to add a link, with the idea, that I can create a link in the metadata-field (in my case I use Attributes) and if there is an entry, I can click on it and it opens a link!

Works nice with html-files, with this variable and line:

Code Select Expand

value: "{File.AT.Anmerkungen.link|default:;;prefix:<a href='http://www.;postfix:' target='_blank' <style='font-size: 0.85em'>mehr Infos}</a>"
(Anmerkungen is the set and link is the file-field from Attributes)

This does a prefix with <a href='http://www.
then addes the value of the field, e.g. "photools.com" or "faz.de" or whatever, this gives

<a href='http://www.photools.com

and the postfix add this: ' target='_blank' <style='font-size: 0.85em'>mehr Infos}</a>"

what ends with a nice htlm-link:
<a href='http://www.photools.com' target='_blank' <style='font-size: 0.85em'>mehr Infos}</a>"

This works nice and very good.

Now I am trying to add a pdf-file, that I could enter not a link to a website, but a link to a pdf, and this pdf would be locally.
This is important, because, then I can take all this stuff with me on a stick and look it in a tablet, or even on a handy (works nice).

But I cannot let this run. I try and have looked on the web and also in the IMatch-forum, because I can remember, I had this problem once and it was solved, but stupid me, I cannot find the solution again. And more stupid, I have not saved it on my computer.

It has to do, I think, with file:/// or href or whatwever.
Also on the web I found they call simply solution like

Code Select Expand


<iframe id="iframepdf" src="files/example.pdf"></iframe>
or

Code Select Expand

<p>Open a PDF file <a href="/uploads/media/default/0001/01/5xxc.pdf">example</a>.</p>

but all these solutions does not work.

I wonder, if someone of you has a solution?!

[Jingo]

This App works very well.

But I cannot let this run. I try and have looked on the web and also in the IMatch-forum, because I can remember, I had this problem once and it was solved, but stupid me, I cannot find the solution again. And more stupid, I have not saved it on my computer.

I wonder, if someone of you has a solution?!

Looks like you asked back in March last year in this forum post: https://www.photools.com/community/index.php?topic=8911.msg62636#msg62636

Mario pointed you to this document which have some details on opening a PDF file from a URL and the command link: https://www.adobe.com/content/dam/acom/en/devnet/acrobat/pdfs/pdf_open_parameters.pdf

Does this format not work correctly... my understanding is it should so long as the PDF location is correct: file:///C:/Users/My%20folder%20Name/File%20Name.pdf  (note the %20 here to represent spaces...)

[sinus]

Ahhh, Jingo

Thanks a lot and sorry!


I knew, I have asked this once, but I searched and searched ... you are much better organized then me and you have also a very good memory.

OK, I will read and check again this sources.

BTW: I want use this for the timeline. Usually a timeline does not show a lot of images, say from a birthday, but only one (like the new event here with IMatch or a master-stack).
But if you sit on your sofa an shows (maybe) once your wife a timeline and she sees the birthday of a child and says "I want see more images for this", then it would be cool, if you could click on the image and opens more image from this specific event.

For such things I create some pdfs and can show them, if someone asks. 

[Jingo]

Yes... that would be great... of course, the APP could also be extended to allow you have "links" for the keywords or categories.. and if you click them, it loads other images from the IM database (if running via the APP)... lots of possibilities!

[sinus]

Yes... that would be great... of course, the APP could also be extended to allow you have "links" for the keywords or categories.. and if you click them, it loads other images from the IM database (if running via the APP)... lots of possibilities!

added later:
Only read this, if you are bored, I am afraid, it is written a bit curious.

Hmmm, your remarks brings me always new ideas. 
I always try to learn some JS when I have time, but to be honest, this is very difficult, I find.

That's why I sometimes ask something that I could probably find out by myself with a lot, a lot of trying and a lot of time, but I only want to know if what I want to find is even possible.
If I ask too much, just write, then I stop.

Events:
that's the crucial point for a timeline. One usually shows ONE picture of an event on one timeline. So you can see events well in a temporal context.
In my private timeline, for example, I have added historical events. Because I find it interesting, how old was I or my siblings, when Kennedy was killed, when the moon landing was or the Chernobyl thing happened.

That's why I have also added the age to my timeline from the family-members and integrated it into the timeline (as the attachment shows, with the age in brackets).

Since I have other information for some events, I use the attributes of IMatch.
That means, in case of the moon landing I write a website with more information into an attribute field.
This will only appear in the pictures where it says "more info" (see attachement) and this works really very good.

The image in the timeline is simply in my case the master stack, the image of an IMatch stack on top.
From such an event I can create a pdf within IMatch, with Design & Print. There I have a lot of possibilities, a great tool.
And now I just want to make a link in a second field in the attributes, which I can click on, and then the pdf for this event appears.
And the interesting thing is that I can view the whole timeline with all pictures and pdf independently of IMatch, for example on a mobile phone.

I don't use the new events of IMatch at the moment (not even the people recognition), because basically I see it that events are roughly the same as stacks: one image represents several images.
Maybe I'll use the IMatch events one day, but I don't know yet, because I already built my whole DB with stacks ant it works great.

Now finally my question: 
You say that you can "get" other images from IMatch with such links.
Whether you can't get other pictures of a stack or an IMatch event with one click on a link?

That means I would click and the 30 other pictures of an event would appear in a new tab, I could view them and then go back to the timeline!?

That would be super cool, of course, but I think if that's even possible, it would be very complicated.
I'm just asking so that I asked this, because I'm very happy with the pdf solution.
Because a click like that to get other pictures, hm, I think it's really not possible, because if I have 10 events in a timeline with more pictures of one event, I would have to load all of them on a stick, in case I want to see them later.

I have to do that with pdfs too, but it's much easier to load the 10 pdfs onto the stick than to load all the pictures.

Hm, while I'm writing this, I realized that, so I really think that the idea of getting all pictures of an event with one click is probably not a good idea.

Hmm, I'm not going to delete this text now, maybe somebody is interested anyway.

[sinus]

Andy,
thanks your  App I could finally the system-export-App "HTML Report Demo App" from a EXPORT-app lead into a "normal APP".
For this I could compare your html with the Demo-App from Mario.

Very good, because now I am the first time able to get the selected images into a html.
Now I can start to try and understand step by step to "arrange" such images on a html-window.
For example 3 images horizontal, then the next line and so on.

This will take time, because I think, here html, css and maybe bootstrap is involved and first I have to understand this good.
Then maybe the next step would be JS. 

But with your great app you have laid the ground for me.
Thanks for that! 

[Jingo]

My pleasure Markus... with all the great info on the internet about JS, Bootstrap and HTML - really almost anything you need to do can be found quickly and adapted.  For playing around, I recommend sites like Jsfiddle.net... lets you create HTML, CSS and JS together and see instant results!   My next goal is to wean myself onto VUE and try to use some of the new apps as a guide.  The code is so much more "modular" and looks really great.. but is a bit more complex as well (at least to me).

For arranging things, I'm still old school and use tables, rows and columns... <table><tr><td> - that way, you can display info in a controlled fashion.  However, there are many tools out there using more advanced things too... all depends on your end result.

Enjoy the journey!! - Andy.

[sinus]

Enjoy the journey!! - Andy.

Thanks, Andy, for the tips.
Hey, and enjoy also your journey ... whereby your water is deep (vue), at least for me, but the country you will reach is perhaps even more interesting and beautiful. 
Have a good time - Markus

[sinus]

For arranging things, I'm still old school and use tables, rows and columns... <table><tr><td> - that way, you can display info in a controlled fashion.  However, there are many tools out there using more advanced things too... all depends on your end result.

Enjoy the journey!! - Andy.

Thanks Andy,
this Jsfiddle.net is really cool, Mario has also once mentioned this, I think.

For arrange things  like images, I have read a bit and I think, I have a look at the "css-grid-system", seems logical to me and I can, it seems, doing a lot only with css.

At a first step I try to check it and then I try to arrange several selected images from IMatch on the screen, like 3 horizontal and so on.
But this will take time. 

VUE seems intersting, but to be honest, looks too complicated for me. 

[sinus]

Hey Andy
I hope, you don't mind, if I ask still here something.

The timeline works really great. We can select one month or 50 years.
What I would like to have is giving the user at the top of the timeline a information, how long this timeline is.

I could manage (phew, took a loooooong time) somehow, to count:

-all images
-all years (in the meantime I use mostly monthes, instead year 2018 I use 2018-Oktober, 2018-November and so on)

This works and I write at the head a line like:
Total 112 images in 16 different monthes


I think, this is quite good.
But if you have a timeline, say start with your childhood and end in 2000, it would be nice to say this at the beginning with something like:

First image in 1970, last image in 2000.

Now to be honest, I have no idea how to achieve this.
The easiest way (maybe) would be to store the date-value of the first image and store the date-value from the last image.
And with this two "variables" we could simply add in somewhere at the start of the timeline, that the user sees immediately the time-span.

I have really not the knowledge, to do so.
Do you have an idea, how we could achieve this?

My proposal is simply an idea. Maybe there is another, but if you have different timelines, it would be really nice giving at the top some information.
Maybe you have another idea.

[Jingo]

Hi Markus - no worries... this was quite easy to do though there are a number of new lines of code to accomplish it.... and you might want to integrate it better in your version.   I've attached an updated index.html that shows the code but in general we need the following:

A new output line someplace in the <body> HTML code .. I just chose a quick <pre> result line but it is "ugly":

Code Select Expand

<pre id="output"></pre>

Next, we'll need a variable to hold the initial year value - since we sort all images by year, we know the first image is the oldest.  Add a variable at the top of the <script>:

Code Select Expand

       
// variable to control the first and last date/time in the timeline
var time_from;

Now, we want to seed this value only the first time, so add this code inside the response.files.forEach(function(f) call:

Code Select Expand


                    // setup the first year as we run through this the first time.
                    if (time_from == undefined) {
                        time_from = dYear;
                    }


Finally, we will want to see the header text with the first and last year... since we update the year each time through the header year setup - it is easiest to just add the text update code here and allow it to update each iteration... the end result will be the last year updated the last time through the loop and we will have the results we want:

Code Select Expand


                      // update the header with the from thru information each time the year changes - the last time will be the correct value.
                      result.text("Timeline contains images from: " + time_from + " Thru: " + dYear);


The end result:




ENJOY!!! - Andy.

[sinus]

Wow, that looks very good, Andy!

Thanks a lot, here you see the difference between a real "coder" (you) and a "copy, trial and error-user" (that is me). 

Your output looks very good and your explanations are super.
I will try to add this in my code and will report, when I have success.

Thanks, Jingo!

[Jingo]

Wow, that looks very good, Andy!

Thanks a lot, here you see the difference between a real "coder" (you) and a "copy, trial and error-user" (that is me). 

Your output looks very good and your explanations are super.
I will try to add this in my code and will report, when I have success.

Thanks, Jingo!

Thanks Markus - but don't confuse me with some "super-coder".... it took me about 25 minutes to code this solution and it didn't work for the first 20!   

Enjoy!

[sinus]

OK, Andy,
not super-coder ... but let's say quite a very good coder.   

Thanks, your code in your timline works, great.
Because I have really altered some things (not only years, but monthes and monthes in words (replace 07 ...) and some other stuff, it is not that easy.

The end-date I could manage. But not the start - date (with the first date), but I am quite positive, that I can manage it tomorrow or a day later.
As you have written once, every time we "code" we do also lern stuff.
And that is the good thing, I have lerned in the last weeks really a lot from you. 

BTW: I have managed even to START a new app, where the selected images simply flows into a group of 3 or 4 images as a colon with some texte below (headline ...) and then comes the next line, really cool, I could never do this until now. 

I wish you a very good day.

[Jingo]

Thx Markus... I try my best for sure!

If you send me your latest version, I can review and see how to fit the code in... I might want to add in some of your changes like the month breakdown as well because I think that is very cool.  In fact, I was thinking of combining both versions into a single one with an option to output either version.. that way, we have one unified app but the user can choose which HTML to output!

[sinus]

Thx Markus... I try my best for sure!

If you send me your latest version, I can review and see how to fit the code in... I might want to add in some of your changes like the month breakdown as well because I think that is very cool.  In fact, I was thinking of combining both versions into a single one with an option to output either version.. that way, we have one unified app but the user can choose which HTML to output!

Hi Andy
Oh, an option, what a clever idea! Could be very useful, indeed, aber I guess, quite difficult to create. 
Attached my changed files. BTW, I have, as you know, the dates in the filename, but of course it makes more sense to use the correct metadata-fields.

Here are some infos, maybe helps you also:
I'll send you the code and my modified files below.
Hopefully I haven't forgotten anything, otherwise please contact me.

It's just that I made some changes, but you can easily take them out, of course.
These are for example the 3 colors I used (see below), but I left them in because it might be interesting for you to see them. But in this case there are only 2 lines (I think) that you can delete.
Or the possibility to use left (from the attributes in IMatch), just take it out :-)

I have tried to document some things in the code.

So, in general (you know most of it anyway, but just for the sake of completeness):

- I take the date from the filename, because all my files have this format in front: 20190125-1614-364495-s-sin-schnee_a, so the year, months, days and then the time is in front.

- Then I have a count of the number of pictures and the months, analogous to what you already know (from the posts with JRosa)

- In the attributes I have created a set/field, where I can put in e.g. a web-site. If the field has a value (link) then the word "more Infos" is shown, when you click on it the link opens in a new tab

- By clicking on a picture, the same picture opens larger in a new tab

- Instead of just setting the date/time where you can click on it, I added the headline. If you have a lot of data, you don't know exactly what is behind the date, but if a short text (headline in my case) is displayed, you know much better what it is

- I personally have 3 types of pictures: professional, private and sinus (the agency). But it is interesting for me to show them all. So that I can see immediately what is private when I have 200 pictures, I have created 3 different colors for the 3 types. I have tested this, and at the moment I think that this is quite nice, because I can see immediately what is professional, private or sinus (the agency). The more pictures I have, the more interesting this becomes. It's based on a variable, "if the filename says -priv-, then it's private, so use that color. If -bus- is in the filename, take another one and so on. Of course, you could use this differently, for example "if USA, then green, if Europe, then blue, etc.. Or if keyword ... then etc...

So, that's it, that's a bit much information, Andy, but I know that you can quickly see what it's all about.

And do not forget: of course you can do, whatever you want, finally it is your App.  

[sinus]

Hi Andy

I still cannot see the "big image" behind the IMatch endpoints and so on.
Though Mario's help and docs (WebServices) I finally do not understand this really, how to get benefit of all his work with endpoints.
If I would understand, I had not to ask such a (I guess) basic question.

In your timeline you can select say 50 images.
They will appear nicely.

Say, you want now display one image from this list additionally above, a bit smaller.

Say, you would show the birthday of Anne with 50 images in the timeline.
And at first you want show a small image (simply to arise the interest of the user), when Ann blows out the candles, and this would be image nr. 7 in your sorted list.

How can you do this, I tried and tried ... no success. 

Do you know this?

I mean of course not, that you should really integrate this in your timeliine, surely not.
If you could give me a hint, what I could try, this would be enough for me to look further.

[Jingo]

Hi Markus - Ok... so, there are of course a number of ways to accomplish this but using the code from the timeline and its dynamically created HTML code at run time... let's review:

To get access to the images from the database, we use the call:

Code Select Expand

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

This sends a server request to IMWS with our parameters and gets a list of data from the server which is stored in "response". We then parse through the response files using the forEach loop:

Code Select Expand

response.files.forEach(function(f)

This will loop through each "files" entry in the response list (ie: response.files[0], response.files[1]), setup a pointer "f" to that entry (for easy coding access) and provide us with a door into the provided data.

Using this type of loop, instead of setting up the HTML page code as we currently do (looping and use all the files).. you could perhaps check for a certain attribute or keyword and then "save off" that image id and only display that entry with a hidden group of info like we do for the Year currently. 

For example, you might have a group of keywords all labeled "Granny's 70th Party" but one of those images (the best of them) has a 4 rating.  You could loop through the images, find all entries with "Granny's 70th Party" and save them to an array... also, find the entry with a 4 rating and call the HTML code function to display that entry and build a "hidden" class with the other images.  This would be similar to how clicking the year hides/shows entries..

Does this make sense?  If it does, give it a shot....  if not, let me know and I can  try to pull something together to demonstrate. 

Enjoy! - Andy.

[BanjoTom]

Wanted to try out this app, but it's not working.  I downloaded and unzipped the "Timeline.zip" file and copied the unzipped folder "Timeline" into c:\ProgramData\photools.com\imatch6\webroot\user\.  But when I open IMatch (2020.5.6) and then open App Manager I do NOT see the new Timeline app at all. The attached screenshot shows what I DO see. 

Where have I gone wrong?  Maybe Jingo or Sinus or some other more experienced user can help...  The app sure looks intriguing! 

[wolboe]

.....
To use, just open the Import/Export panel, select your images and drag them to the App... the HTML panel will open and your images will display. ...

[BanjoTom]

But the app doesn't show in either the "Import/Export" panel nor in the App Manager.  So... what's wrong? Do I have to somehow update the App Manager to get it to display the App that everyone else seems to see -- the one with the zig-zag red line that I can see in the file "Timeline.png"?

[thrinn]

I did not follow this thread in detail, but I understand that the current version is not an Import / Export app anymore. Instead, it will (should!) show up in the App manager.

However, there is a small bug in the app.json file that prevents the app to appear. In the description section, the language is missing. Therefore, the JSON file is not well-formed.

To correct it, just open the app.json file in a text editor (notepad is sufficient) and add "en": before the "Select some files and..." part. The line should look like this:

Code Select Expand


    "description":
        {
           "en": "Select some files and click left on the App ... or right click on the App and select 'Open App in web browser...'"
        },


After saving the app.json file, close and reopen the app manager. The app should appear as "HTML Timeline".

[sinus]

Does this make sense?  If it does, give it a shot....  if not, let me know and I can  try to pull something together to demonstrate. 

Enjoy! - Andy.

Thanks, Andy!
Yes, it makes a lot sense for me. 
Your explanations are always welcome and very good to understand!
I will look carefully at them and I think, I can get further with it.

But as usually ... it takes some time! 

[sinus]

Wanted to try out this app, but it's not working.  I downloaded and unzipped the "Timeline.zip" file and copied the unzipped folder "Timeline" into c:\ProgramData\photools.com\imatch6\webroot\user\.  But when I open IMatch (2020.5.6) and then open App Manager I do NOT see the new Timeline app at all. The attached screenshot shows what I DO see. 

Where have I gone wrong?  Maybe Jingo or Sinus or some other more experienced user can help...  The app sure looks intriguing!

Hey BanjoTom
I hope and guess, Thorsten gave you the correct answer.
Phew, cool, Thorsten, to see something "small" like this.

[Jingo]

That is the problem with trying to use a forum entry to keep user built APP and shared items up to date... since the poster cannot modify their posts for very long - new files get attached and updated along the thread and it gets confusing and lost in the shuffle.

Here is the latest Timeline APP source code which is just a normal App as Thorsten notes... it should work out of the box!

[BanjoTom]

Thorsten's clear suggestion worked perfectly!  THANKS!  Now I'll play some more with this delightful app!   

[Jingo]

Thorsten's clear suggestion worked perfectly!  THANKS!  Now I'll play some more with this delightful app!   

Great to hear.. hope you enjoy the app!  If you didn't install the latest version that I attached to my very last message - I would suggest doing so as it has a few bug fixes and a better implementation of the timeline bar. 

Enjoy!! -Andy.