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:
(https://www.photools.com/community/index.php?action=dlattach;topic=10010.0;attach=23785)
The APP as shown in the browser (6 images selected in IMatch):
(https://www.photools.com/community/index.php?action=dlattach;topic=10010.0;attach=23787)
The APP with a single date/time selected:
(https://www.photools.com/community/index.php?action=dlattach;topic=10010.0;attach=23789)
The APP with a single year selected:
(https://www.photools.com/community/index.php?action=dlattach;topic=10010.0;attach=23791)
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! 8)
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.
Hi:
Works great.
Thanks for your effort.
Best regards,
JRosa
Thanks for sharing!
Should this not also work from the user path? There should be no limitation tying impexp apps to the "system" folder...
Quote from: Jingo on April 07, 2020, 12:00:47 AM
And.. finally.. Enjoy! 8)
Hey Andy
This is really simply great and cool!
You made my day!
Thanks a lot for your effort!(http://www.sinusbild.com/holen/congrats-to-Jingo.jpg)
I simply selected about 50 images and ... it worked really!Of course I have some questions 8)
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:
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.
Quote from: Jingo on April 07, 2020, 12:00:47 AM
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!
Quote from: sinus on April 07, 2020, 11:54:28 AM
Hey Andy
This is really simply great and cool!
You made my day!
Thanks a lot for your effort!
(http://www.sinusbild.com/holen/congrats-to-Jingo.jpg)
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!
Quote from: sinus on April 07, 2020, 11:54:28 AM
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
return IMatch.IMWSUrl() + '/v1/files/image?auth_token=' + IMatch.authToken() + '&id=' + file.id + '&imagesize=SMALL';Quote from: sinus on April 07, 2020, 11:54:28 AM
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:
divcode += "Description: " + f["v3"] + "</dd>";Quote from: sinus on April 07, 2020, 11:54:28 AM
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:
sortby: 'datetime',new:
sortprofile: 'Capture Time',Quote from: sinus on April 07, 2020, 11:54:28 AM
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.
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!
(https://www.photools.com/community/index.php?action=dlattach;topic=10010.0;attach=23798)
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.
Wow! Nice work! Have to try it out as soon as I can find some time!
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
return IMatch.IMWSUrl() + '/v1/files/image?auth_token=' + IMatch.authToken() + '&id=' + file.id + '&imagesize=SMALL';
to
T
2) then changed this here:
{
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
// 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:
// 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
// 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! :)
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.
Quote from: Jingo on April 07, 2020, 08:17:36 PM
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. 8)
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. :D
Quote from: Jingo on April 07, 2020, 08:17:36 PM
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!!! ;D 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 8)) 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 ... ;D
Quote from: Jingo on April 07, 2020, 08:17:36 PM
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. :D Cool, and I hope, that some other user will also use your great app, it has a real big potencial.
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
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.
Quote from: zematima on April 08, 2020, 09:54:58 AM
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!
Quote from: sinus on April 08, 2020, 07:16:20 AM
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 ... ;D
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!
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.
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
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.
Quote from: Jingo on April 08, 2020, 01:58:03 PM
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 ... 8) ;D :D ... an IMatch-Tour :D
Quote from: sinus on April 08, 2020, 04:22:54 PM
Quote from: Jingo on April 08, 2020, 01:58:03 PM
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 ... 8) ;D :D ... an IMatch-Tour :D
Sounds like maybe an
IMatch Users Conference might be in order... :) (after this Pandemic is over)...
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
Quote from: Tveloso on April 08, 2020, 05:36:40 PM
Quote from: sinus on April 08, 2020, 04:22:54 PM
Quote from: Jingo on April 08, 2020, 01:58:03 PM
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 ... 8) ;D :D ... an IMatch-Tour :D
Sounds like maybe an IMatch Users Conference might be in order... :) (after this Pandemic is over)...
Sign me up! 8)
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 :D
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.
@Jingo
Consider using a Bootstrap Media Object (https://getbootstrap.com/docs/4.3/components/media-object/) or maybe cards (https://getbootstrap.com/docs/4.3/components/card/) for simple flex layouts. They take care of wrapping, aligning the image etc.
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?
{
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 :D
Quote from: sinus on April 09, 2020, 05:34:18 PM
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?
{
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 :D
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!
Quote from: Jingo on April 09, 2020, 05:43:10 PM
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). :D
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.
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:
+ "'class='media' width='200'><BR><BR>";This one, text on the left and image on the right, is maybe even better then vice-versaIn 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.
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!
Quote from: Jingo on April 10, 2020, 02:10:16 PM
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.
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. 8)
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:
.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.
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....
Quote from: Jingo on April 14, 2020, 04:58:29 PM
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...
Quote from: Jingo on April 14, 2020, 04:58:29 PM
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%. ;D
From your original script:
First I changed the color to a brighter blue to see the vertical line better..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: // 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
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 yearI think, if we could eliminate these two "errors", the app would be finished and fine. :D
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.
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! ;D
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.
(https://www.photools.com/community/index.php?action=dlattach;topic=10010.0;attach=23936)
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.
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
Quote from: wolboe on April 15, 2020, 06:26:23 PM
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.
Quote from: wolboe on April 15, 2020, 06:26:23 PM
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.
Hey Andy,
cooler as cool! :D
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 ;D
Quote from: sinus on April 15, 2020, 06:54:25 PM
Hey Andy,
cooler as cool! :D
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 ;D
Woot woot... STARS for all of us! 8) ;D :)
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? :P
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?
@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
Quote from: wolboe on April 15, 2020, 07:43:51 PM
@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.
Quote from: wolboe on April 15, 2020, 07:43:51 PM
@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?
Quote from: sinus on April 15, 2020, 08:13:59 PM
Quote from: wolboe on April 15, 2020, 07:43:51 PM
@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!
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
Quote from: wolboe on April 15, 2020, 09:16:46 PM
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.
Welcome to the wonderful wold of software development. (https://www.photools.com/community/Smileys/photools/rolleye11.gif)
So many different PC's. So many different configurations. So many different setups. So many different combinations of installed software and hardware. So many ... (https://www.photools.com/community/Smileys/photools/ashamed06.gif)
I sometimes wonder how I do it (https://www.photools.com/community/Smileys/photools/confused06.gif) (https://www.photools.com/community/Smileys/photools/innocent01.gif)
Or how many animated smileys I can place in a post (https://www.photools.com/community/Smileys/photools/sign20.gif)
Remember: (https://www.photools.com/community/Smileys/photools/sign15.gif)
Better: Paaaaaarrrtyyy... (https://www.photools.com/community/Smileys/photools/party22.gif)
After COVID 19 is over (https://www.photools.com/community/Smileys/photools/ashamed03.gif)
:) ;) :D 8)
and only one Mario! ;D
Quote from: wolboe on April 15, 2020, 09:16:46 PM
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...
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.
Quote from: wolboe on April 15, 2020, 11:24:14 PM
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.
I'm running this Version 2020.4.4.
Quote from: Jingo on April 16, 2020, 01:39:11 AM
Quote from: wolboe on April 15, 2020, 11:24:14 PM
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:
"supportsDrop": true,
"version" : "1.2",But I think, this cannot be the reason, that Wolfgang and JRosa have troubles?
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
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
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. ;D
Instead the line, what you mentioned (and you have corrected for you)
sortprofile: 'Capture Time',
I have the line
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 8)
@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).
@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
Quote from: wolboe on April 16, 2020, 11:43:16 AM
@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.
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
Quote from: zematima on April 16, 2020, 12:42:59 PM
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, JRosaalso well done :D
Cool, when Jingo awakes in the morning, he will see a lot news here. ;D
(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.
Quote from: sinus on April 16, 2020, 01:03:01 PM
also well done :D
Cool, when Jingo awakes in the morning, he will see a lot news here. ;D (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!
Andy, could you please correct this phrases, then I would add them bigger and in Red ;D 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.
Quote from: sinus on April 16, 2020, 09:25:33 PM
Andy, could you please correct this phrases, then I would add them bigger and in Red ;D 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:
(https://www.photools.com/community/index.php?action=dlattach;topic=10010.0;attach=23966)
Hey Andy
Thanks for your help.
Sounds very good, your sentences! :D
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. ;D
Have a good day!
Quote from: wolboe on April 16, 2020, 09:58:13 AM
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
Thanks, Wolfgang
From my point of view you are right.
Your line works also for me. :)
Quote from: wolboe on April 17, 2020, 09:12:56 AM
Quote from: wolboe on April 16, 2020, 09:58:13 AM
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.
Quote from: wolboe on April 17, 2020, 09:12:56 AM
Quote from: wolboe on April 16, 2020, 09:58:13 AM
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.
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.
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:
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
<iframe id="iframepdf" src="files/example.pdf"></iframe>
or
<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?!
Quote from: sinus on April 27, 2020, 01:37:22 PM
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...)
Ahhh, Jingo
Thanks a lot and sorry!
:D :D
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. 8)
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!
Quote from: Jingo on April 27, 2020, 08:14:05 PM
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. ;D
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: 8)
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.
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! :)
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.
Quote from: Jingo on May 01, 2020, 02:09:45 PM
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. 8)
Have a good time - Markus
Quote from: Jingo on May 01, 2020, 02:09:45 PM
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 ;D 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. 8)
VUE seems intersting, but to be honest, looks too complicated for me. ::)
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.
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":
<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>:
// 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:
// 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:
// 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:
(https://www.photools.com/community/index.php?action=dlattach;topic=10010.0;attach=24336)
ENJOY!!! - Andy.
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). 8)
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!
Quote from: sinus on May 06, 2020, 04:18:55 PM
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). 8)
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! 8)
Enjoy!
OK, Andy,
not super-coder ... but let's say quite a very good coder. 8)
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. :D
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. ;D
I wish you a very good day.
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!
Quote from: Jingo on May 06, 2020, 07:40:02 PM
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. 8)
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. ;D
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.
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:
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:
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.
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!
Quote from: Jingo on April 07, 2020, 12:00:47 AM
.....
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. ...
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"?
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:
"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".
Quote from: Jingo on June 07, 2020, 08:18:04 PM
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. :D
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! 8)
Quote from: BanjoTom on June 07, 2020, 09:39:13 PM
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.
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!
Thorsten's clear suggestion worked perfectly! THANKS! Now I'll play some more with this delightful app! :)
Quote from: BanjoTom on June 09, 2020, 01:52:56 AM
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.