Upcoming Games


Full list
Add a game

Upcoming Events

No events to display

We are not planning any more in-person events until the COVID-19 situation has improved.

V5.3 CSS Abilities

You are here: Home > Forum > Customising SimSig > CSS Window Customisations > V5.3 CSS Abilities

Page 2 of 2

V5.3 CSS Abilities 01/10/2020 at 00:41 #132828
Gwasanaethau
Avatar
462 posts
Hi all!

I've been away for a good while with work/lockdown and just recently been able to get into SimSig again. I love this new feature, and can honestly see myself spending more time customising the CSS than actually signalling for the next while!

Anyway, I am struggling to adjust one of the items on the timetable popup window: the bit regarding the most recently seen path/platform/line codes (the blue arrow in the attached image). Is it possible to update this? The wiki/forum doesn't seem to shed any light on it in my search thus far.

Thanks in advance!

Gwasanaethau.

Post has attachments. Log in to view them.
Last edited: 01/10/2020 at 01:03 by Gwasanaethau
Reason: Erroneously labelled the popup window "F2".

Log in to reply
The following user said thank you: DonRiver
V5.3 CSS Abilities 14/02/2021 at 06:33 #137218
DonRiver
Avatar
116 posts
I would also very much like to remove that "most recently seen" line from the popup timetable, or at least set the font colour separately. What's the name of its class Geoff?

Today is actually the first day I've made good use of the simplifier. And I was only able to do this via CSS. I removed the final six columns, which always seem to be blank, and this let me fit the table in a useful size and format onto the screen.

I have a request for the simplifier. Can you add child classes to the entire table row based on the delay? I'd suggest "Early", "Right Time", "Late", and "Very Late" as the categories, with 1E, 5L, 20L as the thresholds between them.

Or you could do something wild:
- have three subclasses of td: td.early, td.righttime, td.late
- dynamically create subclasses of those based on the string shown in the Delay column
- we can then set thresholds as we like, by assigning defaults to td.early and td.late, then overwriting for other values minute by minute:

[code]
/* earlier than 2E is blue. 10L-20L is orange. Later than 20L is red. */
td.early{color:blue;}
td.late{color:red;}
td.early.2E,td.early.1E,td.righttime,td.late.1L,td.late.2L, /* and so on */ td.late.9L,td.late.10L{color:green;}
td.late.11L,td.late.12L, /* etc */ td.late.19L, td.late.20L{color:orange;}
[/code]

Or keep it very simple:
[code]
/* early is blue, right time is green, late is red */
td.early{color:blue;}
td.righttime{color:green;}
td.late{color:red;}
[/code]

Unrelated to CSS but it would be amazing if the simplifier could a) automatically refresh at intervals and b) have its GUI reviewed - hide the location selection pane or move it to a dialogue box, so it (and its eyeball-searing grey and white pixels) aren't occupying scarce screen space!

Log in to reply
The following user said thank you: Gwasanaethau
V5.3 CSS Abilities 14/02/2021 at 21:18 #137237
DonRiver
Avatar
116 posts
Ah! I've figured it out. SimSig doesn't use the CSS stylesheet for the grey background on the "Most recent codes" row - the style is inline in the HTML. And I'm guessing there's no convenient class name to style it with.

It can be overridden from the CSS with !important
https://stackoverflow.com/questions/16813220/how-can-i-override-inline-styles-with-external-css

This CSS snippet will overwrite that row to use a red background. It finds the cells (td) of the first row (tr) of the last table and overwrites its built-in background style:

```
table:last-of-type tr:first-child td {
background-color: red !important;
}
```

So to remove it:
```
table:last-of-type tr:first-child td {
display: none;
}
```

A bit of testing suggests that even when a train doesn't have the "Most recently seen" line, it's still the first line of the table. It doesn't hit the "Location Arr Dep/Pass" row instead.

EDIT: Oh. The `:last-of-type` and `:first-child` filters don't work with whatever SimSig is using to render HTML on Windows. It works fine if you're using Wine.

It would be _tremendously_ helpful if:

1. the rendered HTML is _entirely_ styled from the CSS, with _no_ inline styling whatsoever
2. examples of the rendered HTML were available as .HTML files so we can edit the stylesheet using any browser's built-in development tools. We can do this for the simplifier but not the other two.

Last edited: 15/02/2021 at 00:14 by DonRiver
Reason: None given

Log in to reply
The following user said thank you: Gwasanaethau
V5.3 CSS Abilities 16/02/2021 at 13:14 #137282
DonRiver
Avatar
116 posts
Replying here to a post from the Timetable Popup Templates thread:

Jan in post 137273 said:
GeoffM in post 137259 said:
- The browser component SimSig uses is in the Borland Delphi libraries, which itself uses a standard Windows component. However, it is believed that that is indeed old now.
That standard Windows component is basically Internet Explorer. One specific problem with that is that without further configuration, it defaults to IE7 (!) compatibility mode, which might explain why a number of CSS features aren't working as expected, like for example nth-child and friends. There are supposed to be some magic incantations that can make it switch to IE11-mode, but one attempt to do this wasn't successful so far (issue #31011).
Wine on the other hand AFAIK defaults to using Gecko (Firefox) to emulate Windows's web browser control, so you'll naturally have much easier access to recent(ish) web features.
This is interesting - an incantation in the CSS, or in the SimSig code that invokes the popup?

Log in to reply
V5.3 CSS Abilities 16/02/2021 at 17:29 #137285
GeoffM
Avatar
5595 posts
DonRiver in post 137282 said:
This is interesting - an incantation in the CSS, or in the SimSig code that invokes the popup?
I'm not sure I understand what you mean by invoking a pop-up?

SimSig Boss
Log in to reply
V5.3 CSS Abilities 16/02/2021 at 17:31 #137286
DonRiver
Avatar
116 posts
GeoffM in post 137285 said:
DonRiver in post 137282 said:
This is interesting - an incantation in the CSS, or in the SimSig code that invokes the popup?
I'm not sure I understand what you mean by invoking a pop-up?

Sorry Geoff - I meant the SimSig code that says "hey, here's some lovely HTML, why not display it in a handy window"

Log in to reply
V5.3 CSS Abilities 16/02/2021 at 17:39 #137287
GeoffM
Avatar
5595 posts
DonRiver in post 137286 said:
GeoffM in post 137285 said:
DonRiver in post 137282 said:
This is interesting - an incantation in the CSS, or in the SimSig code that invokes the popup?
I'm not sure I understand what you mean by invoking a pop-up?

Sorry Geoff - I meant the SimSig code that says "hey, here's some lovely HTML, why not display it in a handy window"
It's like plugging in a black box - you put the HTML code into it, and it renders a web page out of it with clickable hyperlinks etc. How it does that is something we don't necessarily need to know: Jan saying Wine uses the Gecko engine is interesting to know.

We're limited in some ways because the version of Delphi used is a little old now, and you can't just plug in any old component: it has to be compatible. We also can't "just" upgrade to a newer Delphi because the language has changed a lot - and the components. There's nothing wrong with an older language except the support for newer stuff. And rewriting 206596 lines of code is not trivial.

SimSig Boss
Log in to reply
The following user said thank you: DonRiver
V5.3 CSS Abilities 16/02/2021 at 22:02 #137297
DonRiver
Avatar
116 posts
I've never used Delphi myself - don't even know what the source code looks like. Is 206596 lines of code literal? or representative :D

While I have your ear, and if you're passing this way to put a class on the Most Recently Seen line anyway… could I make two small(?) additional pleas about the timetable HTML?

- I'd like my popup timetable to include timing points already visited (possibly displayed in a different style e.g. grey text). Could the timetable HTML include these rows too, with an extra class on the tablerows such that they're hidden (display: none; ) in the default CSS or even styled that way inline in the HTML? Then us weirdos can make it visible if we want.

- Clicking on a bad train description raises a "Cannot find timetable for TYPO" messagebox - and then closes my carefully-positioned timetable window. If "Multiple pop-up TT windows" is turned off, could it keep the timetable window open, and instead of a messagebox display an empty timetable with "Cannot find timetable" in the description field?

Cheers!


Post has attachments. Log in to view them.
Last edited: 16/02/2021 at 22:07 by DonRiver
Reason: removed unexpected smiley

Log in to reply
V5.3 CSS Abilities 17/02/2021 at 00:09 #137304
GeoffM
Avatar
5595 posts
DonRiver in post 137297 said:
I've never used Delphi myself - don't even know what the source code looks like. Is 206596 lines of code literal? or representative :D
It's what the compiler reported this morning, and yes it counts blank lines and comment lines too.

DonRiver in post 137297 said:
- I'd like my popup timetable to include timing points already visited (possibly displayed in a different style e.g. grey text). Could the timetable HTML include these rows too, with an extra class on the tablerows such that they're hidden (display: none; ) in the default CSS or even styled that way inline in the HTML? Then us weirdos can make it visible if we want.
I'll see what I can do but the code deletes locations already visited so it's not trivial to do.

DonRiver in post 137297 said:
- Clicking on a bad train description raises a "Cannot find timetable for TYPO" messagebox - and then closes my carefully-positioned timetable window. If "Multiple pop-up TT windows" is turned off, could it keep the timetable window open, and instead of a messagebox display an empty timetable with "Cannot find timetable" in the description field?
That's already been done and is being tested currently (ie next Loader release).

SimSig Boss
Log in to reply
The following users said thank you: DonRiver, StepSig
V5.3 CSS Abilities 15/04/2021 at 19:46 #138655
Jan
Avatar
780 posts
Jan in post 137273 said:
GeoffM in post 137259 said:
- The browser component SimSig uses is in the Borland Delphi libraries, which itself uses a standard Windows component. However, it is believed that that is indeed old now.
That standard Windows component is basically Internet Explorer. One specific problem with that is that without further configuration, it defaults to IE7 (!) compatibility mode, which might explain why a number of CSS features aren't working as expected, like for example nth-child and friends. There are supposed to be some magic incantations that can make it switch to IE11-mode, but one attempt to do this wasn't successful so far (issue #31011).
Wine on the other hand AFAIK defaults to using Gecko (Firefox) to emulate Windows's web browser control, so you'll naturally have much easier access to recent(ish) web features.

Second time's the charm: Just a small heads-up that a second attempt at fixing this problem has been successful. This means that with the next loader release, timetable, simplifier and train list will now all render in IE11 mode on Windows, so you can start using some slightly more modern CSS features from that point onwards.

Two million people attempt to use Birmingham's magnificent rail network every year, with just over a million of them managing to get further than Smethwick.
Log in to reply
The following user said thank you: DonRiver