App: HTML TimeLine - an Import/Export App

[Jingo]

Hello all... happy to report that I bring to you a brand new APP based upon this request by Markus (https://www.photools.com/community/index.php?topic=9843.0).... this time, in the form of an Import/Export application (though it could be easily changed to just be a normal app - something I will probably do soon).

The HTML Timeline App (as I'm calling it) will allow you to display your images in a collapsible timeline view sorted by year and then further by date and time.  You can click a YEAR to see all images within or select an individual date/time to just see that single item.  Currently, I display keywords with each image - but the code is easily modifiable to display whichever data you would like to see.

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.  Personally, I use this via the browser and directly access the app via the HTML address (http://127.0.0.1:50519/user/TimeLine/index.html)  -this way as new images are selected, a simple F5 (refresh) in the browser tab will update the display.  You can also save the website locally from the browser and then share it with others.. NEAT!

I won't lie - this one took a bit of thought and stretched my programming skills quite a bit in order to dynamically create the HTML code on the fly. I accomplished it using DOM elements and was able to group like images (YEAR) together while still adding new images to their own sections.  It's a bit hard to explain.. but as always, I have fully documented the code for others to learn and modify as needed.

So.. without further ado... here we go!

The all important APP ICON:


The APP as shown in the browser (6 images selected in IMatch):


The APP with a single date/time selected:


The APP with a single year selected:


I do hope this is useful to the community... It is lightweight and really demonstrates the power between the readily available Javascript applications... and IMatch, IMWS and APPS!  I'm happy to help anyone that is having trouble so please just send me a PM or respond to this string... always happy to help!

To install, just unzip the attached TimeLine.zip file and place the app folder into your C:\ProgramData\photools.com\imatch6\webroot\apps path (it goes here because it is an Import/Export app).  Because of this, it might need to be re-added each time IMatch is updated with a new version.  This is why I will most likely change it to a normal user app soon. 

The app will appear in the Import/Export panel and can also be used from the browser by heading to (http://127.0.0.1:50519/imatch/apps/Timeline/index.html).  As always.. use with caution... I've tested it and use it.. but what works for me might not work for you.

And.. finally.. Enjoy!   

Addendum from Moderater sinus/Markus:
I deleted the "old" export - App, because Jingo has the App updated.

Attached is the newest version
Instead of the old one, the latest version is added as a zip. The version is 1.2 from Jingo/Andy.
With this timeline app, you can simply select some images and then right-click or left-click on the app icon. This means you don't need to drag and drop the images onto the app anymore.


Addendum II from Moderater sinus/Markus:
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, please see the last attachement.

[zematima]

Hi:
Works great.
Thanks for your effort.
Best regards,
JRosa

[Mario]

Thanks for sharing!

Should this not also work from the user path? There should be no limitation tying impexp apps to the "system" folder...

[sinus]

And.. finally.. Enjoy!   

Hey Andy
This is really simply great and cool!
You made my day!
Thanks a lot for your effort!


I simply selected about 50 images and ... it worked really!

Of course I have some questions 

I did not look now into the code (I have a bit stress just now), nevertheless I ask or mention some things:

1) I am quite sure, that I will be able to slightly make the images smaller

2) I'm also quite sure (you already mentioned it) that instead of the keywords I can use for example Headline, Description and City - fields

3) As you can see on my attachement, it seems, that the sort-order inside a year is correct. But the sort-order of the main-year (in the grey rectangle) ist not always correct. What field do you use for the sort - order? (I think, it is not only the order from the file-window, because there I had another sort-order). Because I can then change this field, that the order is correct. Because this images are old image, it is very good possible, that some date-fields are not correct, that is why I can correct then these fields.

4) Then the most important thing for me to understand your app correct: Are the used images (including the text-fields) stored somewhere, that I could store them on a stick?
Or must I have for a running app (html) in every case IMatch?
If the images are not exported in a way, do you think, it is possible to do this?

I mean, if I have a timeline with 10-50 images, I can imagine, that I would export these images and if necessary, to rename these files, that the app can use them with the same name what is in the html.
I can see in the html (view source) lines like:

Code Select Expand

src="http://127.0.0.1:50519/v1/files/image?auth_token=3&id=508930&imagesize=SMALL" that is why I think, maybe I could e.g. store all files in a folder and give this image here the necesary file-name.

Because then I could create some timelines and store them in a folder, save the whole stuff on a stick, take it at home and let run it on a laptop (without IMatch).
But, Andy, do not take me wrong. Althoug I am afraid, this is not possible, I ask only, to understand this stuff, what it does (as I said, I have not looked yet into the folder or code)

There are of course slide-show - programs out there, but to create such a nice thing, what you did, I guess, we can search long, specially if we can take here with your app some metadata-fields from IMatch.

I think at a holiday, say with 10 days. This is a really good way to browse through these 10 days. From my point of view, it is more interesting as simply look picture after picture.
Or even more interesting, a timelife from your own life, from birth till now.

And so on.

Oh, boy, I really envy you for your skills.

[sinus]

Personally, I use this via the browser and directly access the app via the HTML address (http://127.0.0.1:50519/imatch/apps/Timeline/index.html)  -this way as new images are selected, a simple F5 (refresh) in the browser tab will update the display.  You can also save the website locally from the browser and then share it with others.. NEAT

If I put your http://127.0.0.1:50519/imatch/apps/Timeline/index.html in my google-Browser, then I get:

Error 404: Not Found
Not found

Not important, because in the IMatch-window it works great!

[Jingo]

Hey Andy
This is really simply great and cool!
You made my day!
Thanks a lot for your effort!


I simply selected about 50 images and ... it worked really!

My pleasure Markus!!  Glad you like it... was really a great deal of fun for me to code while stuck in the house... and I learned a super amount about DOM and dynamic HTML generation!

1) I am quite sure, that I will be able to slightly make the images smaller

Yes.. just change the end of this line of code to the desired size.. the files/image endpoint has a list of valid size options here: http://127.0.0.1:50519/imatch/apps/imws-doc/index.html#/files.imagesize

Code Select Expand

   return IMatch.IMWSUrl() + '/v1/files/image?auth_token=' + IMatch.authToken() + '&id=' + file.id + '&imagesize=SMALL';

2) I'm also quite sure (you already mentioned it) that instead of the keywords I can use for example Headline, Description and City - fields

Indeed... just change out or add data to the layout variable and then modify the DOM code section that currently adds the keywords.  For example, I am also retrieving the Headline and Description in f["v3"].. so just change the below line to this instead:

Code Select Expand

   divcode += "Description: " + f["v3"] + "</dd>";

3) As you can see on my attachement, it seems, that the sort-order inside a year is correct. But the sort-order of the main-year (in the grey rectangle) ist not always correct. What field do you use for the sort - order? (I think, it is not only the order from the file-window, because there I had another sort-order). Because I can then change this field, that the order is correct. Because this images are old image, it is very good possible, that some date-fields are not correct, that is why I can correct then these fields.

My images are always sorted by "capture time" in the file window... so, the selection of images are always pre-sorted using capture time.  In the program, the file results are further sorted by datetime which could be the issue - this might refer to the FILE date/time.  If you change this line of code, and try again - does it correctly sort the images this time around?

old:

Code Select Expand

sortby: 'datetime',

new:

Code Select Expand

sortprofile: 'Capture Time',

4) Then the most important thing for me to understand your app correct: Are the used images (including the text-fields) stored somewhere, that I could store them on a stick?
Or must I have for a running app (html) in every case IMatch?
If the images are not exported in a way, do you think, it is possible to do this?

Oh, boy, I really envy you for your skills.

Yes... you should be able to load this in your browser using the name of the path provided (unless you placed the app under a different path or name?).  Once loaded, you can right click the HTML page and "Save As".. using the webpage option, it will save ALL images and the necessary files and the webpage then can be shared with others.. when they load the index.html file within the folder, it should work just like you see on your system.. even without Imatch!

Let me know if these tweaks work.. if so, I'll be making a round 2 today, moving this into a regular APP and perhaps adding a button option for output image size.  Enjoy!! - Andy.

[Jingo]

Also - here is a version that will now work as a normal APP - easier to open in the browser using the normal app drop down window.  I modified this version to also use the 'Capture Time' sort profile, so that bug with the incorrect sort is now corrected.

Just unzip this version in your normal app path: C:\ProgramData\photools.com\imatch6\webroot\user     .... and selected images will now work!  Enjoy!



Addendum from Moderater sinus/Markus:
I deleted the "old" export - App, because Jingo has the App updated.

Attached is the newest version 1.2
Instead of the old one, the latest version is added as a zip. The version is 1.2 from Jingo/Andy.
With this timeline app, you can simply select some images and then right-click or left-click on the app icon.


Addendum II from Moderater sinus/Markus:
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, please see the attachement.

[thrinn]

Wow! Nice work! Have to try it out as soon as I can find some time!

[sinus]

Hey Jingo
Thanks again, your new app is even better and now it works, let run it in the browser.
And yes, simply select other images and refresh the browser and it is updated. Cool.

With your help above I have changed some things:

1) First changed the SMALL

Code Select Expand

   return IMatch.IMWSUrl() + '/v1/files/image?auth_token=' + IMatch.authToken() + '&id=' + file.id + '&imagesize=SMALL';
to
T

2) then changed this here:

Code Select Expand

{
    title: "Headline",
    type: "var",
    value: "<div class=\"title\">{File.MD.headline}</div>"
   },
   {
    title: "Description",
    type: "var",
    value: "<div class=\"title\">{File.MD.description}</div>"
   },

and changed

Code Select Expand

// mjh original von Jingo: divcode += "Keywords: " + f["v4"] + "</dd>";
divcode += "" + f["v3"];
divcode += "" + f["v4"] + "</dd>";

This worked fine.


Then about the sort order.
3) for the year I changed this:

Code Select Expand

   // orginal Jingo: value: "{File.MD.createdate|format:YYYY}"
   value: "{File.NameS|substr:0,4}"

I have the correct date always in the filename, hence I took this. Of course I could changed the metadata-fields, but this here is easier. 

4) Then finally your proposal where to change

Code Select Expand

// Build the IMWS request parameters to pass into the IMWS.get from the list of variables, tags and fields.
var params = {
  idlist: dropObject.idlistFiles,
  sortby: 'filename',
  tagcreateDate: 'XMP::xmp\\CreateDate\\CreateDate\0|format:YYYY',
  fields: 'id,protected,dateTime'
}

So I took sortby filename. I am not sure, if this is good, but finally it works.
(my filenames are always in this manner: 20200208-1538-384171-s-pri-text_m - hence the date time is always correct and in the same place)

And guess, what?
I works perfect!!! You made really a great job, such an output from IMatch-images was not possible until now.
See my attachements.
Of course I will try to tweak here and there (e.g. the headline and description different fonts and not uppercase), but for such things does not hurry.

Now still some questions, what I do not fully understand.
This app works only on the same computer, when IMatch runs, is this correct?
If IMatch is closed, then it works still, I think!?

Hence I cannot save some files and the images on a stick and let it run somewhere else, correct?
Or let it run like your ftp-gallery somewhere on the net?
This is not possible, am I right here, because your app fetches the images somehow (with the magic of IMatch and your "program-tricks") in the right place.

It is really impressive, I can select say all images from my sister over 5 years and get a nice presentaion, really cool!

[Jingo]

Very nice Markus!  Glad you were able to tweak the code to meet your needs.. it is always my hope that the APP provides a basis to allow others to expand and enrich the app to meet an individual need.  KUDOS to you for already making it work for you!!

So- to answer your last question.. you will be able to share the results of the timeline with others.. but only a static version of what you output from your IMATCH. 

Here is how:

1 - With Imatch running and your images selected, open the APP in your browser using the remote address or from the APP panel->Open in Browser command
2 - Once the timeline appears, right click and choose: Save Page As...
3 - Choose to a save location and ensure the bottom "Save As Type" option is Web Page Complete.

So, you will now have a "HTML Timeline Report".html file along with a HTML Timeline Report subfolder.  The subfolder contains all the images and JS/CSS files, while the main html file is the code that is the webpage. 

You can now package up those 2 things and share via email, usb stick, upload to a web host, etc... when you run the html file, your exported timeline should work just fine!  Each time you want to share a new "Timeline", just follow the steps above and that static version will be created.


BTW: I should add that KUDOS should also go to the original person that wrote and shared the Timeliner.JS code...  His/her work can be found on their website and Github pages.

[sinus]

Very nice Markus!  Glad you were able to tweak the code to meet your needs.. it is always my hope that the APP provides a basis to allow others to expand and enrich the app to meet an individual need.  KUDOS to you for already making it work for you!!

Thanks, Andy
Well, I am a typical "code-check-change-a-bit" - user, I think. 
That is why I like it so much, that IMario uses in his help so often examples with code (receipes) and so on. And not only a fraction of it, but a code, what works really.

Your code for this timeline-app worked from the start on great. Hence I am able, to change here and there something, and you have even showed me, what to change. 

So- to answer your last question.. you will be able to share the results of the timeline with others.. but only a static version of what you output from your IMATCH. 

Here is how:

1 - With Imatch running and your images selected, open the APP in your browser using the remote address or from the APP panel->Open in Browser command
2 - Once the timeline appears, right click and choose: Save Page As...
3 - Choose to a save location and ensure the bottom "Save As Type" option is Web Page Complete.

So, you will now have a "HTML Timeline Report".html file along with a HTML Timeline Report subfolder.  The subfolder contains all the images and JS/CSS files, while the main html file is the code that is the webpage. 

You can now package up those 2 things and share via email, usb stick, upload to a web host, etc... when you run the html file, your exported timeline should work just fine!  Each time you want to share a new "Timeline", just follow the steps above and that static version will be created.

You made my second day!!!  Thanks a lot, I really really appreciate this ... and it worked perfectly.
I tried this even on my handy: perfect!
Curious, stupid me, this is what I wanted since ages, that I can use IMatch as base and then load the result on my stick.
I never never was able to do so, I have also not read this "trick" (you can call it basic knowledge  ) in the IMatch-help, maybe I have overlooked it.

Because NOW I can use also some other apps on the same way, I tried just Mario's pinboard-app, and it works also great! I mean, e.g. this pinboard-app looks cool, but only see it on the PC with IMatch is not that interesting. But now for me this is a new dimension. I can use some apps (and now even try again myself a bit) and show the result with images-text to others, simply online or with a stick or on my tablet or whatever. COOL! 

I thought always, I can do with IMatch always all, and I can print the results with images and text to a pdf. Perfect with Design & Print.
But not "digital" in a way, with images AND text. And that is why most of some slideshow-programs or wordpress or whatever is not the perfect solution for me, because they support mostly no metadata-text, and if, only title and description. But inside IMatch we have all information, why should we write it again, better we use it and "pull" them out.
Now this is possible with your help, thanks a lot, Andy! If you once here in Switzerland, I own you a beer, ähem, two, no, three ... 

BTW: I should add that KUDOS should also go to the original person that wrote and shared the Timeliner.JS code...  His/her work can be found on their website and Github pages.

Yes, you  are correct. KUDOS for both of you. Tarek coded the basic and you brought it to IMatch.  Cool, and I hope, that some other user will also use your great app, it has a real big potencial.

[zematima]

Hi Jingo:
Sorry to bother you, but I can't open the app.
I extracted the zipped file to:
C:\ProgramData\photools.com\imatch6\webroot\imatch\apps
Then I open IMatch and I can see the app in the apps panel. So far so good.
Choose 2 images and then what do I do?
With this version where do I drop the files?
I can see the drop down menu, but that´s all
With the older version, I dropped the files into the box that said "Drop the files here". Open the browser and all worked fine.
Thanks for your effort,
JRosa

[sinus]

JRosa
what do you mean with "drop down menu"?

I moved the extracted folder into
C:\ProgramData\photools.com\imatch6\webroot\user\

(from Jingo: Just unzip this version in your normal app path: C:\ProgramData\photools.com\imatch6\webroot\user)

and then I see this (attachement).
Then I select some images and click simply on the icon.
Then a windows opens with the timeline.

Hope this helps.

[Jingo]

Hi Jingo:
Sorry to bother you, but I can't open the app.
I extracted the zipped file to:
C:\ProgramData\photools.com\imatch6\webroot\imatch\apps
Then I open IMatch and I can see the app in the apps panel. So far so good.
Choose 2 images and then what do I do?
With this version where do I drop the files?
I can see the drop down menu, but that´s all
With the older version, I dropped the files into the box that said "Drop the files here". Open the browser and all worked fine.
Thanks for your effort,
JRosa

Hi JRosa - no worries.. glad to help!

Once you have the app installed, you use it like any IMatch APP... select the images you want to see in the timeline and then click the app icon... a new windows will appear with the timeline.   You can also choose to run the app in your browser by using the app drop down menu... enjoy!

[Jingo]

Because NOW I can use also some other apps on the same way, I tried just Mario's pinboard-app, and it works also great! I mean, e.g. this pinboard-app looks cool, but only see it on the PC with IMatch is not that interesting. But now for me this is a new dimension. I can use some apps (and now even try again myself a bit) and show the result with images-text to others, simply online or with a stick or on my tablet or whatever. COOL! 

If you once here in Switzerland, I own you a beer, ähem, two, no, three ... 

Yes.. the ability to work the apps in the browser is a huge thing because you have full access to the amazing development tools.. I use Firefox and honestly developed this entire app using the browser and Notepad++... I think I only ran the app in IMatch at the very end when I switched from the I/E panel to the APP panel..  You can run ANY IMatch APP this way.. even ones that are not APPs like the Event Panel.  I keep the IMWS doc app open while I develop in another browser window for quick access.

The best part... a quick F5 in the browser tabs updates whatever you do in IMatch... so you have MULTIPLE APPS running at the same time.. and they will either reflect the current state of IM (F5) or be in an older state for review!

Some day I will get to Switzerland and we'll have those beers together... then perhaps we can all head to Germany for some beers with Mario!  If anyone should visit the US - look me up for a Beer in the states!

[Mario]

You should really try Visual Studio Code. It has proper syntax highlighting, indicates errors in JavaScript automatically, has linting etc. Notepad++ is really dated now.

[zematima]

Hi all:
That's what I do and what I see:
I unzipped the app into C:\ProgramData\photools.com\imatch6\webroot\user as it is on file 0.jpg
Then if you follow the pictures you habe an idea:
1.jpg - Choose the files
2.jpg - Click on the app
3.jpg - That is what I get after clicking the app
4.jpg - Sinus , this is the drop down menu
Tried in Chrome and Edge.

If I use the "old" one here C:\ProgramData\photools.com\imatch6\webroot\imatch\apps , everything works fine.


Thank you all,
JRosa

[Jingo]

Hi Jrosa - and this is with the updated app (timeline-01.zip)?  Can you verify the following line is in the app.json file to be sure it is the correct version:

    "id": "photools.com.IMatch.TimeLineAPP",
    "version" : "1.1",

If it says version: 1.0 - then the folder is the Import/Export version... and you should delete the Timeline folder and reinstall using the 2nd zip file in the thread.. unfortunately, we can only modify a post for just so longer so updates and newer versions of apps will always be included later on down the thread instead of attached to the first entry.

[sinus]

Some day I will get to Switzerland and we'll have those beers together... then perhaps we can all head to Germany for some beers with Mario!  If anyone should visit the US - look me up for a Beer in the states!

Very good, we start here in Switzerland, then Germany to Mario, then to Thorsten (hm, I think, also Germany, not sure), then ...  ... an IMatch-Tour 

[Tveloso]

Some day I will get to Switzerland and we'll have those beers together... then perhaps we can all head to Germany for some beers with Mario!  If anyone should visit the US - look me up for a Beer in the states!

Very good, we start here in Switzerland, then Germany to Mario, then to Thorsten (hm, I think, also Germany, not sure), then ...  ... an IMatch-Tour 

Sounds like maybe an IMatch Users Conference might be in order...   (after this Pandemic is over)...

[zematima]

Hi Jingo:
Version 1.1 , unzipped into C:\ProgramData\photools.com\imatch6\webroot\user
This must be a problem with other thing, not with your app.
I can use the old one that is working quite well.
Thanks again,
JRosa

[Jingo]

Some day I will get to Switzerland and we'll have those beers together... then perhaps we can all head to Germany for some beers with Mario!  If anyone should visit the US - look me up for a Beer in the states!

Very good, we start here in Switzerland, then Germany to Mario, then to Thorsten (hm, I think, also Germany, not sure), then ...  ... an IMatch-Tour 

Sounds like maybe an IMatch Users Conference might be in order...   (after this Pandemic is over)...

Sign me up!   

[sinus]

Hey Jingo

Your app is really cool.
I try to change some things, but not a lot (what I could not anyway).
I was able to change some stuff, it is of course not finnished, but all things, what I ask you, are finally not really important things.

Hence, if some points or all is not possible to change or too complicated, no problem.
Maybe you can give me a hint, where I could look and try, maybe not.

I attache 2 images, the first to show you my start-point (as it is now) and then my questions in image 2.

Hence I go to image 2:
I have made headline and description two different values (v3 and v4).

1) For me it would be best, if I could put the headline right near the image, and the description below, like my image shows. The description-text is mostly longer, hence it should wrap.
I found no way to move these two fields. Because it would bring a lot more space and therefore not that much scrolling, if the text is long.

Maybe it is not possible or too complicated. If not, then it will stay like it is below the image.
But in this case, is there a way, for wrap the long description-text? As you can see, it goes over the monitor, because it is that long.

later edited: hmmm, funny, I putted the timeline for a test online and there the wrapping works. see attachement 3

2) Where could I try to change the size of the date-time if expanded? As you can see, at the start, when collapsed I found the place, but not collapsed.

3) This small white line, in the attachement upper left, what is this and where could I change this (size/color)?
If found no way where to change. 

4) A vertical line, like here https://technotarek.com/timeliner/timeliner.html would be nice to have, but I guess, this is difficult to create.

As you can see, Andy, it is not that much to change for me. Would be nice, but if not, then not 

But finally it is a really very good system, this timeline, what impressed me the most, it's a ready-made solution.
What I'm asking here is only "design stuff" and finally not necessary.

[Mario]

@Jingo

Consider using a Bootstrap Media Object or maybe cards for simple flex layouts. They take care of wrapping, aligning the image etc.

[sinus]

Hey Jingo
I am of course not sure, but when I look at your images at the beginning, and I look at the keywords, where they are separated with ; then I think, your function does not work?
Because your code should replace keyword;keyword with keyword, keyword -  if I understand it correct (space after ; )
Because here this works also not, but my guess is only a shot in the dark, it could have to do with the following code?

Code Select Expand

{
   title: "Keywords",
   type: "var",
   value: "{File.MD.hierarchicalkeywords}",

   // A column can have a processor function as well whcih is used to format data that is retrieved from the database.
   // The code below calls this once the data has been retrieved
   // For keywords, we replace ; with ;<space> to allow wrapping.
   processor: function(v) {
    return v.replace(/;/g, '; ');
   }
  }

PS: I hesitated to send this minor thing, not that you miss Marios post above, what is for sure more interesting for you 

[Jingo]

Hey Jingo
I am of course not sure, but when I look at your images at the beginning, and I look at the keywords, where they are separated with ; then I think, your function does not work?
Because your code should replace keyword;keyword with keyword, keyword -  if I understand it correct (space after ; )
Because here this works also not, but my guess is only a shot in the dark, it could have to do with the following code?

Code Select Expand

{
   title: "Keywords",
   type: "var",
   value: "{File.MD.hierarchicalkeywords}",

   // A column can have a processor function as well whcih is used to format data that is retrieved from the database.
   // The code below calls this once the data has been retrieved
   // For keywords, we replace ; with ;<space> to allow wrapping.
   processor: function(v) {
    return v.replace(/;/g, '; ');
   }
  }

PS: I hesitated to send this minor thing, not that you miss Marios post above, what is for sure more interesting for you 

Hi Markus - actually, that code is from the HTML import/export example that Mario includes which I used for the basis of the app.  I left that code in there because it is cool.. but I'm not actually using it within the main code to made the swap.  It can be added back into the response.files.ForEach loop if desired.

I'll take a peek at your earlier items as well... and provide an update on how to accomplish what you are after  :-)

I'll also have to look into those other Bootstrap items that Mario discusses... they look like a better a way to accomplish keeping all these items together and formatted!

[sinus]

Hi Markus - actually, that code is from the HTML import/export example that Mario includes which I used for the basis of the app.  I left that code in there because it is cool.. but I'm not actually using it within the main code to made the swap.  It can be added back into the response.files.ForEach loop if desired.

I'll take a peek at your earlier items as well... and provide an update on how to accomplish what you are after  :-)

I'll also have to look into those other Bootstrap items that Mario discusses... they look like a better a way to accomplish keeping all these items together and formatted!

Cool, Andy, super.
I am really still fascinated, like your app works. Simply select some images and the resulat is here (in the webbroser). 

I hope I'm not bugging you, but here's an addendum:
I think, like I wrote above, it better, having the text beside the image.

I found now something in the original timeline and tried to include it in your app and found a place where it works.

I did it like you said and created all the files so that you can view them everywhere.
So now I can send you a zip here where you can see there.

So, with this addition.

Code Select Expand

function timelineEventDetail(f, evID) {
// This function builds the Event Detail with a link to the Image and a display of the keywords
divcode = "<dd class='timeline-event-content' id=" + evID + "EX>";
divcode += "<img src='" + getImageUrl(f) + "'class='media' width='200'><BR><BR>";
// mjh original von jingo: divcode += "Keywords: " + f["v4"] + "</dd>";
divcode += "" + f["v3"];
divcode += "" + f["v5"];
divcode += "" + f["v6"];
//divcode += "" + f["v7"] + " title";
divcode += "" + f["v4"];
divcode += "" + f["v8"] + "</dd>";
var tevent = document.getElementById(evID);
tevent.insertAdjacentHTML("beforeend", divcode);
}

the image is placed on the right (instead of the text on the right that I wrote) with this addon:

Code Select Expand

+ "'class='media' width='200'><BR><BR>";

This one, text on the left and image on the right, is maybe even better then vice-versa
In any case, it would work without you having to invest time in it and it looks cool (except that the text does wrapping too near at the image)

But of course, maybe it's totally wrong what I did, we call this here "Pfahlbauer-Methode", deepL translates it as "Pile-dwelling method".

Attached the zip from the (test) - timeline.
Thanks for your really great work and have nice easter.

[Jingo]

Wow Markus... VERY well done!! 

This is what I LOVE about Imatch and Apps.... the ability to take an idea and then have other members tweak it and make it even better!

Love what you did... think it looks wonderful!  A totally different look and feel can be created just using a different css file as well.  The one I chose was the timeliner-future.css file...  by simply switching the .css file or even building your own - once can easily change font colors, fonts and the entire look/feel of the app!

Thx for sharing... great work again!

[sinus]

Thx for sharing... great work again!

Thanks for the encouraging words!
Very nice of you, but in principle I only looked here and there a little bit and above all I practiced try and error.

But I see that JavaScript is really cool and I'm trying to learn something there.
Anyway, you are right that you can achieve a lot with little change (e.g. with CSS).

What you did great and what I couldn't have done is to integrate the existing timeline (github) with IMatch.
And that is really cool.

[sinus]

Hey Jingo
Hopefully you had nice easter-days! Although Corona-stuff. 

I have in those days tried a bit look at your code, not easy. 

I wonder one thing specialy, please see my attachment.
You have there at the top left 3 "lines". I wonder how we can edit them.

I think, it has to do within the css with this lines:

Code Select Expand

.timeline-container {
  border-left: 4px solid rgba(15,119, 241, 0.95);
  margin: 20px auto;
  width: 900px;
}

Because also the original timelines, all has this vertical line, what is a nice design.
And it seems to be, that only this line is responsible to get the small vertical line. (see attement 2).
This vertical line does also expand long (verticl) and collapse to the necessary length, depending on the content.

But I tried different things, I could never achieve such a vertical line.
Has these 3 lines in your code something to do with this? Is this JS-stuff or css or whatever. 

I think, most of the code I have roughly understood, but with this line I am without any clue.

[Jingo]

Hi Markus - Indeed... the code for the "bar" on the timeline is controlled by CSS code from the original script.  There are many parts however to the bar appearing, each related to how the CSS is digested for each container.  I've been playing around with the code to determine why it is not working correctly and haven't figured it out.. yet.  I was able to get the bar extended by using some breaks.. but the bar should just "work".

I even stripped the code form the demo to its bare bones and compared it with the dynamic code I am creating and I just don't get it....

[sinus]

Hi Markus - Indeed... the code for the "bar" on the timeline is controlled by CSS code from the original script.  There are many parts however to the bar appearing, each related to how the CSS is digested for each container.  I've been playing around with the code to determine why it is not working correctly and haven't figured it out.. yet.  I was able to get the bar extended by using some breaks.. but the bar should just "work".

I even stripped the code form the demo to its bare bones and compared it with the dynamic code I am creating and I just don't get it....

Thanks, Andy, for your trouble.
I'm glad I didn't ask a stupid question.

Well, I'll keep looking. If you don't want to know for yourself, you don't have to keep looking, of course!
I only asked because I thought you just knew.

Because your app is already so cool (and works really great), this vertical line is not that important.

Thanks for your effort!
Best wishes from here, hope that Corona doesn't affect you too much...

[sinus]

Hi Markus - Indeed... the code for the "bar" on the timeline is controlled by CSS code from the original script.  There are many parts however to the bar appearing, each related to how the CSS is digested for each container.  I've been playing around with the code to determine why it is not working correctly and haven't figured it out.. yet.  I was able to get the bar extended by using some breaks.. but the bar should just "work".

I even stripped the code form the demo to its bare bones and compared it with the dynamic code I am creating and I just don't get it....

Hey Andy
I found out a bit more. (if you want not more hear about this, simply say it, no problem)
I'm a bit stubborn here because your app is very good, and for me it's almost perfect. Still say 5%. 

From your original script:
First I changed the color to a brighter blue to see the vertical line better.

Code Select Expand

.timeline-container {
  border-left: 4px solid rgba(120, 194, 236, 0.924);
  margin: 20px auto;
  width: 900px;
}

Then I deleted the div before class in this line:

Code Select Expand

// setup the HTML text with the timeline-wrapper which is the first major DIV control
    divcode = "<div class='timeline-wrapper' id='twrap" + cts + "'>";

And guess what?
Magically the vertical line appears. WOW.
Writing only

Code Select Expand

divcode = "<class='timeline-wrapper' id='twrap" + cts + "'>";
is maybe wrong, but it works ... except two things:

1) The blue field around the year disappears

2) The line goes only to the last year, no difference, if I use 20 years or like here 3, the line ends in the last year
I think, if we could eliminate these two "errors", the app would be finished and fine. 

You can see this in my attachement.
If you have more ideas about this, would be nice to hear your thoughts, if not, no problem.

[Jingo]

Hi Markus - well... spent a few hours on this and figured it out!  You were really close with your review but it turns out I was missing a crucial piece of HTML code that is used to draw the line...  This <br class='clear'> is used to trick the system into adding line detail.. it is needed at the end of each <dl> and - most importantly - before the timeline container itself is closed at the end of the main codeset.

Look for the divcode =  "<br class='clear'>" code members (there should be 2 of them) in order to find all the locations for differences which you can add to your code.  I also added the Expand All button so that works now as well.... I borrowed your color suggestions too!   

Finally, I added code (but commented it out on my version) that allows the "before" and "after" tick marks in the main timeline... if you would like to have smaller - white ticks... you can uncomment the "tick after" and/or "tick before" code in the functions.

I think this should just about do it!  Thanks for your review and edits Markus... I think we have finally a finished and working APP and I look forward to seeing your final version up and running (feel free to share your code if you'd like as well... I think it looks really sharp for folks with lots of details in their images).

Enjoy! -= Andy.




Addendum II from Moderater sinus/Markus:
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, please see the attachement.

[wolboe]

Sorry,
but I have exactly the same problems as JRosa described in #11 and #16 - what is the cause?
The first version (import/export) works perfectly. Now only the browser window opens and remains black, regardless of which browser you are using.

Wolfgang

[Jingo]

Sorry,
but I have exactly the same problems as JRosa described in #11 and #16 - what is the cause?
The first version (import/export) works perfectly. Now only the browser window opens and remains black, regardless of which browser you are using.

Wolfgang

Hi Wolfgang - can you please zip up the version you are using and post it here so I can take a look?  The latest zip file (on this message: https://www.photools.com/community/index.php?topic=10010.msg71432#msg71432) should be un-zipped and placed into the C:\ProgramData\photools.com\imatch6\webroot\user folder.  If you keep both versions, please be sure the foldername on one of them is unique or you will also get a duplicate app message in IMatch.

[sinus]

Sorry,
but I have exactly the same problems as JRosa described in #11 and #16 - what is the cause?
The first version (import/export) works perfectly. Now only the browser window opens and remains black, regardless of which browser you are using.

Wolfgang

Wolfgang,
curious, the last App from Jingo works here perfectly. I have downloaded it, extracted and simply put the whole folder into the directory:

C:\ProgramData\photools.com\imatch6\webroot\user

If you have not delete the first one, make sure, that you take the correct one.
With the new App, you can simply select some images and click on the App.

Hope, you can do it, because from my point of view this is a very cool app.

[sinus]

Hey Andy,

cooler as cool!

You found it and from my point of view this looks better then the "old" one.
Works out of the box here.
Really very interesting stuff.

I will study your new code (thanks for the explanations!!) and compare it with mine.
Of course, if mine is quite another one, I will upload it also here.

Yes, we did create a coop App ... where we should say, like you said,
Kudos for the first guy, what created this, Tarek.

And the next 8 of 10 stars goes to you, Andy! You have integrated the IMatch - system into this timeline-stuff!!!
Very cool!

OK, 1 stars still for me to asked here and gave the "tarek-link".
One star more I maybe can get, if I finally will upload also the app (with slightly other css).

Ah... yes, not to forget, the biggest star owns Mario for his great IMatch   

[Jingo]

Hey Andy,

cooler as cool!

You found it and from my point of view this looks better then the "old" one.
Works out of the box here.
Really very interesting stuff.

I will study your new code (thanks for the explanations!!) and compare it with mine.
Of course, if mine is quite another one, I will upload it also here.

Yes, we did create a coop App ... where we should say, like you said,
Kudos for the first guy, what created this, Tarek.

And the next 8 of 10 stars goes to you, Andy! You have integrated the IMatch - system into this timeline-stuff!!!
Very cool!

OK, 1 stars still for me to asked here and gave the "tarek-link".
One star more I maybe can get, if I finally will upload also the app (with slightly other css).

Ah... yes, not to forget, the biggest star owns Mario for his great IMatch   

Woot woot... STARS for all of us!   

Glad this is working...  really learned a great deal and this code will certainly get re-used for some other apps I'd like to create... like a simple offline version of my gallery... select some photos, add in some gallery details and click a button to get a folder based gallery!  Similar to the timeline.. but with albums... HMMMM!

Hopefully we can figure out why Wolfgang and JRosa are unable to use the app.. Kinda wish I never made the Import/Export version which I think is causing confusion...  I also wish there was a way for me to update the original post with the most up to date version all the time.. otherwise - folks could install the zip off the original post and not read all the other versions which are listed below.  Guess I would need to be a moderator of the Forum to do that (perhaps not possible by anyone other than Mario). 

I wonder if I should create an APP that contains links to a repository of APPS for download?    

[Mario]

Markus (sinus) can update the post. He is a moderator.

Let the users where it fails open the Output Panel for Apps. Maybe there is an error message in the console?

[wolboe]

@Jingo:
I use your unchanged current zip from #33.

@Markus:
The path to the "Timeline" folder is C: \ ProgramData \ photools.com \ imatch6 \ webroot \ user \ TimeLine. There is only one Timeline folder.
All other apps in IM work fine.
What is wrong?

Wolfgang

[sinus]

@Jingo:
I use your unchanged current zip from #33.

@Markus:
The path to the "Timeline" folder is C: \ ProgramData \ photools.com \ imatch6 \ webroot \ user \ TimeLine. There is only one Timeline folder.
All other apps in IM work fine.
What is wrong?

Wolfgang

hm, the zip of #33 is correct, Wolfgang.
I check again, what could be wrong.

[sinus]

@Jingo:
I use your unchanged current zip from #33.

@Markus:
The path to the "Timeline" folder is C: \ ProgramData \ photools.com \ imatch6 \ webroot \ user \ TimeLine. There is only one Timeline folder.
All other apps in IM work fine.
What is wrong?

Wolfgang

Wolfgang, I cannot see the error.
You have downloaded the zip from  #33.
Then you have extracted it and put the whole folder "TimeLine" into you mentioned path.

Then you select some images in IMatch, to be sure, only jpgs, and then you click on the App "HTML Timeline App" and you see only black?

You have not the wrong zip from Jingo?
You can try this, drag n drop some selected files on the app.
I tried this, with the newest App nothing happens.

@ Jingo, should I add your new app instead the old export-app at the beginning?

[Jingo]

@Jingo:
I use your unchanged current zip from #33.

@Markus:
The path to the "Timeline" folder is C: \ ProgramData \ photools.com \ imatch6 \ webroot \ user \ TimeLine. There is only one Timeline folder.
All other apps in IM work fine.
What is wrong?

Wolfgang

Wolfgang, I cannot see the error.
You have downloaded the zip from  #33.
Then you have extracted it and put the whole folder "TimeLine" into you mentioned path.

Then you select some images in IMatch, to be sure, only jpgs, and then you click on the App "HTML Timeline App" and you see only black?

You have not the wrong zip from Jingo?
You can try this, drag n drop some selected files on the app.
I tried this, with the newest App nothing happens.

@ Jingo, should I add your new app instead the old export-app at the beginning?

@wolfgang - are you also using the Import/Export version from the original post?  If so, then if you can please try deleting that version (which resides in the C:\ProgramData\photools.com\imatch6\webroot\imatch\apps path), restart IM and try again?  If you open the Console Panel - and reload the app.. do you get any warnings?

If you aren't using the import/export version - can you try opening the app in the browser (use the drop down menu and select: Open in Web Browser).  If you still only get a black screen, can you hit the F12 button to open the developer options and then click the Console Tab and then refresh the browser with F5.... do you see any errors or warnings?

@Markus - yes please.. that would be great!  Perhaps just add a MODERATOR note to say this is the latest version (by the way.. it is marked as version 1.2 in the app.json for reference).  THANKS!

[wolboe]

Thanks for the interest.
@Markus:
Drag n drop doesn't work for me either.
"Only black" is not exactly exact - I see the same as picture 3 in #16 plus the switch "expand/collaps all" - The switch also works. So "only" the pictures and texts are missing.

@Jingo:
I used the import / export version initially - but this directory is guaranteed to be deleted. The current "TimeLine" directory is now in the same place. I also see version 1.2 in app.json
Open in Web Browser: --> F12 --> console: "Diese Seite verwendet die nicht standardisierte Eigenschaft "zoom". Stattdessen sollte calc() in den entsprechenden Eigenschaftswerten oder "transform" zusammen mit "transform-origin: 0 0" verwendet werden. index.html"
I can not interpret it

F5 brings no change.

Wolfgang

[sinus]

Thanks for the interest.
@Markus:
Drag n drop doesn't work for me either.
"Only black" is not exactly exact - I see the same as picture 3 in #16 plus the switch "expand/collaps all" - The switch also works. So "only" the pictures and texts are missing.

@Jingo:
I used the import / export version initially - but this directory is guaranteed to be deleted. The current "TimeLine" directory is now in the same place. I also see version 1.2 in app.json
Open in Web Browser: --> F12 --> console: "Diese Seite verwendet die nicht standardisierte Eigenschaft "zoom". Stattdessen sollte calc() in den entsprechenden Eigenschaftswerten oder "transform" zusammen mit "transform-origin: 0 0" verwendet werden. index.html"
I can not interpret it

F5 brings no change.

Wolfgang

Wolfgang uses the correct version in this case.
Curious.
Here it worked really out of the box.
Hm, with the zoom-stuff, what Wolfgang described, I have no clue.

@Andy: I changed the zip for your first and sixt post. Hopefully the zip is correct. Should be.
Hmmm, soooo a pity, your App is really great, hopefully you have an explanation, why this works not for Wolfgang and JRosa.
If the App worked for Thorsten, I do not know, maybe he had not the time yet.

[Mario]

Welcome to the wonderful wold of software development.
So many different PC's. So many different configurations. So many different setups. So many different combinations of installed software and hardware. So many ... 

I sometimes wonder how I do it  
Or how many animated smileys I can place in a post

Remember:

Better: Paaaaaarrrtyyy... 

After COVID 19 is over

[sinus]

   

and only one Mario! 

[Jingo]

I used the import / export version initially - but this directory is guaranteed to be deleted. The current "TimeLine" directory is now in the same place. I also see version 1.2 in app.json
Open in Web Browser: --> F12 --> console: "Diese Seite verwendet die nicht standardisierte Eigenschaft "zoom". Stattdessen sollte calc() in den entsprechenden Eigenschaftswerten oder "transform" zusammen mit "transform-origin: 0 0" verwendet werden. index.html"
I can not interpret it

Wolfgang

Hmmm... when you say the current "TimeLine" directory is now in the same place...  it is in C:\ProgramData\photools.com\imatch6\webroot\user?  This is where the new version should be loaded and you should see the app icon in the APP MANAGER.  The app is not designed to be run from the Import/Export panel any longer...

[wolboe]

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.