Another timeline-App

[sinus]

Hello everybody
Here is another timeline to download.
It is based on the timeline of Jingo (Andy), which you can download here (https://www.photools.com/community/index.php?topic=10010.0) and where you can find a lot of information.
In order not to mix any questions/problems with the one from Andy, I made this separate thread.

1) To create a timeline you can simply select some pictures in IMatch and then run the app

2) The app arranges the images by date and year and displays them on a vertical timeline

3) At some pictures I have set a link, so you can get more information by clicking on this link. You can see it in the 2nd attachment (arrow) and my example.
Since this doesn't happen soooooo often, and you can see that for sure, the text (more info) is written in capital letters.
I made the links in IMatch in the attributes with the file set "notes" and the field "link". The variable is {File.AT.Notes.link}
IF you are interested in that (hardly anyone will be), you could change it yourself (search for comments in html) or ask here what you have to do.
But I guess, this is not interesting for you, hence you can simply ignore this 

4) I hope, I forgot nothing

Ah, yes, if you do not like the universe-background, simply delete the img-folder (with the image in it) and you will get a dark background (see also the difference in the attachement 3, what is without the image).

I don't want to omit to thank Jingo (Andy) once again for his effort.
The idea for the timeline was mine, but without the app that Andy implemented, I would never have been able to make my version!
Thanks a lot, Andy!

[sinus]

Ah, my example was too large for the first post, I try it here again, maybe without the ohter attachement it works.
(simply a example from the app)

[wolboe]

Hello Markus,
at first glance - perfectly done. 
Question: is the file name deliberately shortened or only for me?

Wolfgang

[Jingo]

Nice work Markus... for those that have a lot of info in their images like you do - I really like your version as it presents this info in a wonderful way!  Glad you were able to extend the app for your use and appreciate you sharing your version -  makes me feel happy! - Andy.

[sinus]

Nice work Markus... for those that have a lot of info in their images like you do - I really like your version as it presents this info in a wonderful way!  Glad you were able to extend the app for your use and appreciate you sharing your version -  makes me feel happy! - Andy.

Thanks, Andy, if you really feel happy, then I think, this is great.
Usually people tend to look, to emphasize that it is they who have made a difference.
You feel good when others have achieved something too.

This is rather rare and I find this a very nice trait of yours. Thanks a lot.

And yes, I think, we made a really good app, like you wrote once.

[sinus]

Hello Markus,
at first glance - perfectly done. 
Question: is the file name deliberately shortened or only for me?

Wolfgang

Wolfgang, thank a lot for your nice words!
Hm, I am not sure, if I understand, maybe I made an error.

To be honest, I "worked" quite a lot for this app, based on Jingo's code, and wanted finally upload it too, just in case, someone finds it also nice.
And you found just 5 minute before I upload even a good thing (sorting stuff), and I am not sure, finally, what you mean now.

It was very good, that you wrote this about the profile, if I understand, we can use your line for this. I personally use filename, because the date/time is at the beginning of every file of me.

I hope really, you can use also this or Andy's timeline here and there.
If I think at a vacation or a cross section of some years or the highlights of a "career" or even a wedding, I am sure, such a timeline is nice.
Specialy looking back at a live I personally like it, if I have the years in mind, better than simply see picture after picture.

Thanks for your help! 

[wolboe]

Hello Markus,
line 181: {File.NameS|substr:0,4} is the reason.

Wolfgang

[zematima]

Hi Markus:
Trying your app.
Works very well.
Trying to adapt for my needs.
Biiiig mistake... The doubts began:
So, as far as I can see, the variables you use are of the type {File.MD.something}.
1 - If I want to put the aperture, model, make,country, etc, they are not of the same type:
For instance for the Model is {File.MD.Exif::Main\271\Make\0} . It doesn't work.
How can I retrieve these variables?
2 - You have the Colapse Button with the name ALLE BILDER. Where on the code is that name so I can translate it?
For now is enough.
Thanks for your time.
Be safe,
JRosa

[sinus]

Hi JRosa

I am not sure, if I understand you correct.
You are right, the variable works of this type "{File.MD.something}".

Maybe this is your problem:
If the variable is a IMatch shortcode like
{File.MD.description}
{File.MD.headline}

If your metadata-fields has not shortcodes, you must use double slashes, like here:

{File.MD.PLUS::XMP\\Custom2\\Custom2}

With only one slash it works not, do not ask me why 

Hope, this is, what you mean.

The second is easy, to change the "Alle Bilder" ... this is in the file

C:\ProgramData\photools.com\imatch6\webroot\user\sinus-TL-div-monate\js

and you can see it here, change it and it goes:

Code Select Expand

               // mjh: hat Einfluss
                expandAllText: options ['expandAllText'] || '+ alle Bilder',
                // sets the text of the expandAll selector after the timeline is fully collapsed
                // value: string
                // default: + expand all

                // mjh: hat Einfluss
                collapseAllText: options['collapseAllText'] || '- schliesse Bilder'
                //sets the text of the expandAll selector after the timeline is fully expanded
                // value: string
                // default: - collapse all

BTW, if you create a nice timeline for you, it would be nice, if you can finally upload an image or even the whole app.
From my point of view, it is almost all done in this timeline, except some, what I simply cannot do, maybe in the future. 

[zematima]

Thank you for your reply.
I will try and it and in a moment I will give some feedback.

[Mario]

With only one slash it works not, do not ask me why 

In JavaScript (and C, C++, ...) the \ in a string has a special meaning. If you want a literal \, you need to use \\ .
You knew that, one or two years ago...

[zematima]

Hi again:
I tried with the Model.
It works, but now I got what you see:
City and Local OK.
Keywords OK.
Description and Model what a mess...

I have this:
// unten eingesetzt als v4
  {
   title: "Description",
   type: "var",
   value: "<div style='font-weight:400; font-size:14px; color: rgb(165, 235, 255);'>{File.MD.description}</b></div>"
  },

  // unten eingesetzt als v5
  // bei location b eingesetzt, weil div ne zeile geben würde und a schon vergeben, hinten bei css schauen .timeline-series dt b
  {
   title: "Onde",
   type: "var",
   value: "<div style='font-weight:400; font-size:14px; color: rgba(165, 235, 255);'>{File.MD.city} - {File.MD.location}</b></div>"
  },

 
  // unten eingesetzt als v6
  {
   title: "Modelo",
   type: "var",
   value: "<div style='font-weight:400; font-size:22px;'>{File.MD.Exif::Main\\271\\Make\\0}</div>"
  },


And this:

divcode += "Palavras-chave:" + f["v3"] + "</dd>";
divcode += "Descrição:" + f["v4"] + "</dd>";
divcode += "Modelo:" + f["v6"] + "</dd>";


Thanks,
JRosa

[thrinn]

I have this:
// unten eingesetzt als v4
  {
   title: "Description",
   type: "var",
   value: "<div style='font-weight:400; font-size:14px; color: rgb(165, 235, 255);'>{File.MD.description}</b></div>"
  },

In the value string of Description (and also in the value string of Onda) there seems to be a superfluus closing tag </b> - or a missing opening <b> tag. In Markus' version, at least in the v5 part, the <b style=...> </b> is nested inside the enclosing <div></div>, so that the tags match.

I don't know if this causes your output, but the tags should match.

[zematima]

Thanks for the tip thrinn.
Took off all the 'b'.
Nothing changed.
I will keep looking.
Be safe,
JRosa

[sinus]

And this:

divcode += "Palavras-chave:" + f["v3"] + "</dd>";
divcode += "Descrição:" + f["v4"] + "</dd>";
divcode += "Modelo:" + f["v6"] + "</dd>";


Thanks,
JRosa

Hm, unfortunetaly I am really, really not an expert.

But I think to know, this "</dd> should appear only once at the very last entry:

Code Select Expand

divcode += "" + f["v7"];
//divcode += "" + f["v6"];
//divcode += "" + f["v7"] + " title";
divcode += "" + f["v4"];

divcode += "" + f["v8"] + "</dd>";

Like here would have this "</dd>" only the last line.

Could this help, maybe?
If not, you could also upload your html, that I (or someone  ) could have a look.

The ohter think, the translating from "Bilder", did it work?

BTW: your image looks nice, if the error goes away, it will be really cool

[zematima]

Thanks Markus.
I will give it a try today.
I will post as soon as I try.
Thanks,
JRosa

[sinus]

OK, thanks, JRosa!

Hopefully you have success. 

[Jingo]

Hi... the resulting output and the order of the nested <dd></dd> is very important... if you have too many end tags - poof... the whole thing doesn't work.

It is very important that the results follow the form:

<div class="timeline-wrapper">
   <h2 class="timeline-time"><span>YEAR</span></h2>
     <dl class="timeline-series">
       <dt class="timeline-event"><a>DATE-TIME</a></dt>
          <dd class="timeline-event-content">
          </dd>
          <dd class="timeline-event-content">
          </dd>
    </dl>
</div>

You can check the output yourself by using the browser and the inspection item under the developers tool.. this will show if you have too many tags or the order is not correct.  Good luck!

[zematima]

Hi Markus and Jingo:
Thanks again for the input.
So far this is what I get.
The translating from "Bilder", worked as you can see on the image. (When you know where it is , is easy...)
I have 2 other questions on the jpg attached.
Thanks again,
JRosa

[sinus]

Hey JRosa

Wow, looks really good! Congrats.

I could only have a short view .... I guess, I can help with the answer, problem is, I have really go at home just now. 

If Jingo is not quicker than me, I will answer, but the problem is really, I cannot say, when.

Sorry ... but they are easy, I think.

For a new line you must add somewhere (I cannot look now) <br>

[zematima]

Ok. Thanks.

[sinus]

Ok. Thanks.

The yellow sentences are controlled here:

Code Select Expand

/* Unterititel: das sind die Worte grad nach dem Titel mit verschiedenen Helligkeiten, etwas Spielerei wohl */
.step1 {
  color: rgba(255, 255, 1, 0.45);
padding: 0.2em;
}
.step2 {
  color: rgba(255, 255, 1, 0.65);
  padding: 0.2em;
}
.step3 {
  color: rgba(255, 255, 1, 0.9);
  padding: 0.2em;
}

/* der Satz nach dem Titel und dem Untertitel */
.lead {
  color: rgb(23, 79, 182);
  font-size: 2.3em;
  text-align: center;
  margin-bottom: 40px;
}

Because I have not your html, I do not know, what sentences they are really, either class "stepx" or "lead" is the correct one.

Also the second question I do not knwo exactly, because I have not your html.

But if your write one ore more <br> at the end of your variable, it should work, like here after headline:

Code Select Expand

// unten eingesetzt als v3
  {
   title: "Headline",
   type: "var",
   value: "<div style='font-weight:400; font-size:22px;'>{File.MD.headline}<br></div>"
  },


OK, here I am not very sure now, but almost. Because I am at home.
Hope, this helps.

[Jingo]

See Markus... you are now a coding and app expert!

[zematima]

Hi:
Thanks for all the input.
This is what I got. For now it's OK.
I mailed several photos to my sons using the browser with the command Save as and then Page Web Complete.
The only thing that happened is that the background photo is not included. Is there any chance to include the background photo?
Best regards,
JRosa

[Jingo]

I'm glad you find the APP (and Markus's modification) useful... always nice to see someone enjoying an APP you create!

The bkg image is actually a link in the CSS file within the APP... in order to include it in the exported HTML file - you will need to modify the output folder version:

Code Select Expand

timeliner-future.css 

body {
  background: #090a0f url("bg-space-mod.jpg") fixed no-repeat;

Include just the name of your background image and then copy that file to your output folder... and voila!

[zematima]

Hi Jingo?
Thanks a lot for the tip.
Everything working.
Best regards,
JRosa

[sinus]

I'm glad you find the APP (and Markus's modification) useful... always nice to see someone enjoying an APP you create!

That is really nice to hear.
Your timeline, JRosa, looks cool, the background is very good.
That is what Andy wrote, the background is simply file, the name is in the code.
If you do not copy the file (before sending the whole to your son) the bk is simply dark.

If you copy, the background reflects your image.
If you want another image, simply copy another file and change the name of the file (is even easier than change the code).

For me personally, a timeline is especially good "to see the relationship between time and images" when the photos are rather small, like you have on your attachment. This gives a good overview.

That was always my "idea" to create a timeline where someone else (like your son) has a good overview.
For example, if the time span is 2 years, and there is a birthday of yours listed as one picture, it would be cool if your son could click on the picture and another window opens with more pictures.

To achieve this, I first thought of a pdf. In the meantime I think more of another html-file, which shows more pictures.

I have to think about this further., also what is best in practice, like send to your son.

Anyway, I have experienced with several family members that this timeline has really created a "WOW" effect, really.
I have experienced this before, when I "only" showed photos in a slideshow, rarely.

And all this is only possible thanks to IMatch (that's Mario)  and Andy (Jingo)  , who created the app.

I think to create timelines, you'll have to search for a long time, which is so cool and where you can simply select pictures and then take them with the desired TExt (metadata).

Simply outstanding for me. 

[zematima]

Hi Markus:
My youngest son saw what I send him.
As an architect he was very excited with the idea of sending the html to a client and then he could see all the 3D's he has made for the project.
Thanks to IMatch (Mario) and Java experts.
Best regards,
JRosa

[sinus]

Yes, JRosa,
I believe, that your son liked this.
And that is exactly, what I missed so often: simply create a html and send it to someone or safe on stick and take it with me.
These htlm-stuff works even on my old handy, cool.

Your final timeline looks cool. I do not know, how many images you use for this, but your son has for sure a very good overview.

[sinus]

Just a remark:

If you have a lot of "events" in a year (or only one or two years), then it makes sense to add monthly sections - otherwise you have a year and maybe 100 files without any sections, and this is not what a timeline should be (from my point of view).

To do so, you must simply change the lines in the html ({File.NameS|substr:0,4}{File.NameS|substr:4,2}).

This depends of course of your filename-system. If you have not the date like me in the filename, you can use the date-field of the metadata.
({File.MD.createdate}, and format it in the correct way, like {File.MD.createdate|format:YYYY} gives a year and then add month and so on).

Code Select Expand

var layout = {
columns: [{
   title: "Year of Photo",
   type: "var",
   // orginal Jingo: value: "{File.MD.createdate|format:YYYY}"
  // UNTERSCHIED / Difference MONATE - JAHRE
   // must be a number, no spaces allowed
      value: "{File.NameS|substr:0,4}{File.NameS|substr:4,2}"

This gives you something like 202005 (year, month).

Finally change/add something like this in the html:

Code Select Expand

 
// find the timeline DIV and insert the divcode text before the end of the DIV element
// adjacent = angrenzend :-)
    timeline.insertAdjacentHTML("beforeend", divcode);
   
// setup and insert the <h2> and <dl> elements
 
  // UNTERSCHIED / difference MONATE - JAHRE   
//weil dYear eine nummer ist (Jahr) würde die als 202007 erscheinen, ich will aber 2020.07. deshalb zuerst nummer in string
  // because dYear is a number, this would give 202007, but I want 2020.07., hence nummer into string
  var numtostring = (dYear);
var gomonate = numtostring.toString();
 
   // UNTERSCHIED MONATE - JAHRE
// dann den entstandenen string gojahr mit punkt usw aufsplitten
  // then the string split into year-month
var gomonate = gomonate.substr(0, 4) + "." + gomonate.substr(4,2) + ".";
// UNTERSCHIED MONATE - JAHRE
// und dann diese neue variable gomonate verwenden, ergibt dann also zb 2020.07.
  // and then the with the new variable "gomonate" replace into real monthes with real letter, instead .01. better January and so on
gomonate = gomonate.replace('.01.', ' - Januar');
gomonate = gomonate.replace('.02.', ' - Februar');
gomonate = gomonate.replace('.03.', ' - März');
gomonate = gomonate.replace('.04.', ' - April');
gomonate = gomonate.replace('.05.', ' - Mai');
gomonate = gomonate.replace('.06.', ' - Juni');
gomonate = gomonate.replace('.07.', ' - Juli');
gomonate = gomonate.replace('.08.', ' - August');
gomonate = gomonate.replace('.09.', ' - September');
gomonate = gomonate.replace('.10.', ' - Oktober');
gomonate = gomonate.replace('.11.', ' - November');
gomonate = gomonate.replace('.12.', ' - Dezember');

// UNTERSCHIED MONATE - JAHRE
timelineTime(gomonate);
timelineSeries();
}

And you will get something like
2020 - May
2020 - Juni
...

see attachement.
Enjoy.

[mastodon]

Sorry to interupt, but where can I download this scipts? I only see the first one and modifications, is there a place to download the actual versions?

[Jingo]

Sorry to interupt, but where can I download this scipts? I only see the first one and modifications, is there a place to download the actual versions?

The original version of the APP can be found off the first post in this string: https://www.photools.com/community/index.php?topic=10010.0 

A modified version of the APP (by Markus) can found off the first post in this very article... it may not include all the changes discussed in this topic - but after downloading and installing, you can adjust the code as needed.

Enjoy either one! - Andy.

[zematima]

Hi Markus:
Just copied the code into my index.html and everything works fine.
Now we have the year and then inside the year the months.
One question:
Yesterday I changed the size of the logo. I remember that I changes a value like XXem
Today I can't remember where...
I think it was on the timeliner-mjh.js file , but where?
Thanks in advance,
JRosa

[sinus]

Hi JRosa
To be honest, I am not sure, what you mean.
If you mean the red rubberband (what I have taken also from the code from Jingo), than it is this line in your index.html:

Code Select Expand

<h1><img id="app-icon" src="timeline.png" class="animated rubberBand" style="height:3.2em; width:auto; margin-right:14px;">Timeline Markus</center></h1>

There you can change the size with the heigtht-tag ... if you use a size of 24em ... well, than it is a bit too big, I guess 

Hope this helps.

[zematima]

Hi Markus:
Precisely what I wanted.
Looking in the wrong file.
Thank you.
JRosa

[zematima]

Hi:
Tried the new code as I told you.
Only looked for the months.
The count isn't working.
If for instance you have five images in the same year but in 2 different months it counts the images (ok) in 2 years.(because the month is repeated twice)
You can see in the file attached but for 2 different years.
Tried again but with different years; 2 different months in 2019 and 2 different months in 2020 = 4 years.
Does it happens with you ?
Thanks in advance,
JRosa

[sinus]

Hi JRosa

The problem is this:
Jingo created the timeline with years, just as it was originally intended.
For example, if you have 100 pictures of 15 different years, it makes sense, I think.

But I work with very different time intervals.
If I work with 100 pictures, and they are in the same year (or in 2), it doesn't make that much sense, everything is listed one after the other.
Therefore I have divided my timeline into months of years.

Then the 100 pictures within a year are also divided into months and that's much more interesting to look at it that way, the list is not that long.
You can also click on a month to open all pictures instead of the whole year.

I also added counting the pictures/months later.
IF I would be a very good "coder", then I could certainly divide that into:

x pictures from x different years, divided into totally x months.

But I cannot do that.
And to be honest, for me this is not that important, of course, nice to have, but... 
So I just count the number of pictures and the number of months.

Sure, if I have for example November + December 2019 and January + April 2020, the system will show me:

x images of 4 months

because it's really four months, although from two different years.

I guess you added the months like I wrote it, but then it should not be 4 anos (years), but 4 months (monato, meses??).
The numbers are correct, but here we count months and not years.

By the way, just like you, I also put the headline behind the date (blue, Projecto A...), which I find more interesting, just the date.
I just took the code from Jingo (Andy), who wrote the whole thing, and changed it a bit as much as I could.

As you might have seen with his thread, I asked him if you can add the date of the first picture and the last one (the time span), Andy did that very quickly and it works fine for him.

Because I have not only years, but months, it is not easy for me to adopt his code.
So far I've only managed half of it (the end date), but at least, at some point I'll get the other half done. 

For example, as you've seen, I've just converted the months into words, so instead of 07, I wrote July. I think that's better too, but it doesn't make things easier.

So, if you rename "anos" to "meses" ??, then it would be correct, because the numbers are correct.
Sorry, JRosa, but that's the best I can do. In your case (your attachment) it would be ideal if it was called

"A total of 7 pictures from 4 different months in 2 years."
But I can't do that with my current knowledge, I'm really sorry.

[Jingo]

Hi all... this is easy to accomplish by using the modified code for the date range (in the other thread) to perform a simple year subtraction.... for my example, I would just output:

Code Select Expand

result.text("Total " + counter + "imagens em " + (dYear - time_from) + " anos differentes");


Enjoy!

[zematima]

Hi Markus and Andy:
Thank you both for your answers.
For now I changed different years to different months like Markus suggested.
Tomorrow I will try Andy's code.
Plenty of time to test...
By the way , which site do you recommend to begin study Java?
Thanks again,
JRosa

[sinus]

Hi Markus and Andy:
Thank you both for your answers.
For now I changed different years to different months like Markus suggested.
Tomorrow I will try Andy's code.
Plenty of time to test...
By the way , which site do you recommend to begin study Java?
Thanks again,
JRosa

Fine, JRosa
Plenty of time ... puh, I envy you. 

Java is not the same like "Java Script".
The App here is made of html, css and Java Script.

Mario has a good help-system:
https://www.photools.com/developer-center/

and he recommend e.g.
https://www.w3schools.com/js/

Would be cool, if you could lern more JS (Java Script), you can do very interesting things, together with IMatch.

[Jingo]

Hi Markus and Andy:
Thank you both for your answers.
For now I changed different years to different months like Markus suggested.
Tomorrow I will try Andy's code.
Plenty of time to test...
By the way , which site do you recommend to begin study Java?
Thanks again,
JRosa

Yes.. as Markus points out - Java and Javascript are 2 different things... Javascript is made to interact with browsers and is a quite powerful thing.  Combined with different script libraries (such as node.JS, Vue.js, etc) and advanced CSS (markup language).. you can do an awful lot to create apps that run in modern browsers!

To start with JS... there are tons of resources but the w3schools.com is quite good.  I also just do google searches to find ideas and then use tools like JSfiddle.net to try out code snippets.  First, you'll want to setup a decent code editor like Visual Studio Code and get comfortable with the developer tools in your browser (F12).  Open a simple IMatch app in the browser and play around... try adding a debug point and inspect variables... learn to review the network params and response packets (communication between the browser and IMWS calls)... it is really great stuff!

Once you have that ok... start to review apps and learn what the basic commands do... you can learn a lot just by reading the apps.. start with the small samples and work your way up!

Good luck and enjoy....

[zematima]

Hi:
Thanks both of you for your advices.
Best regards,
JRosa