[otns] Update OTNS codelab to OTNS2.

[EskoDijk]

This updates the OTNS codelab to use the new OTNS2 simulator, which is currently not yet in the OpenThread project Github. The PR for OTNS2 is currently here.

It should be merged/accepted only after we have accepted OTNS2. This could be considered a draft PR, until that time. Some verification / fixes and checking required time may still be needed.

[Vyrastas]

This all looks great, thanks for doing the update! A few comments

[EskoDijk]

@Vyrastas I've now made an update based on your review. Also added one more paragraph about timestamps correlation.

For merging this update we would probably have to wait until the OTNS2 PR is done (openthread/ot-ns#530) ?

[Vyrastas]

Thanks for making all the image updates @EskoDijk !

Just some copyedit nits, otherwise looks good to me. And yes we should wait for the other PR to be in before submitting this.

Have you had anyone else try out this updated version of the codelab? I only reviewed from an editorial standpoint, I did not verify that it works as written.

[EskoDijk]

Thanks, updated with the suggestions now.

Have you had anyone else try out this updated version of the codelab? I only reviewed from an editorial standpoint, I did not verify that it works as written.

No, not yet. I could do a first pass myself to spot any issues, using this rendering. If we know any testing candidates let me know :)

What I notice there is that some screenshots (ones that are wider) need to be enlarged, preferably to fill the entire width of the text-box/content-area in some cases.

As a test, I added a commit using width="95%" (or similar) to set the width relative to the column width , for some pictures. The text is now much better readable. (In the real website, the column is slightly narrower though but comparable.)
So if that looks ok I'll adjust all the images to the right width. For the wider screenshots, they need to fill 100% of column width while for the narrower screenshots it should be less.

[Vyrastas]

I would make the width here consistent with the others, otherwise they are all fine

[Vyrastas]

As a test, I added a commit using width="95%" (or similar) to set the width relative to the column width , for some pictures. The text is now much better readable. (In the real website, the column is slightly narrower though but comparable.) So if that looks ok I'll adjust all the images to the right width. For the wider screenshots, they need to fill 100% of column width while for the narrower screenshots it should be less.

Everything looks fine on the openthread.io version (which I can't share externally), except for one image which I flagged (smaller width than the others). Thanks for doing the extra work to make it look nice!