Stations view in two rows

This topic has 10 replies, 3 voices, and was last updated 3 years ago by tsikishome.

Viewing 11 posts - 1 through 11 (of 11 total)

Author

Posts
March 22, 2021 at 2:01 pm #69489

tsikishome
Participant

Hello, is there a possibility to change the UI to the stations are displayed in two rows?
The problem is that I want to build my 2nd ospi for my parents house but I will control up to 32 relays.
The UI seems to display the stations in a single row which is not convenient.

Is there a solution?
Best regards

April 7, 2021 at 7:09 am #69692

tsikishome
Participant

Hello all,
I would really hope that someone has done this before and could help.

April 8, 2021 at 9:46 am #69708

Ray
Keymaster

Did you mean two columns? You said two rows. Because the UI is designed primarily for mobile usage, it’s very difficult to fit two columns on one screen, especially for stations names that are relatively long.

You can customize the UI yourself: just replicate the UI code, make changes to the javascript, and then simply open the www/index.html in a browser to see the effect of your changes.

April 8, 2021 at 10:21 am #69710

tsikishome
Participant

Hello Ray,
Yes I meant two columns. My bad!
The ideal situation for me is to have 2 columns and use my iPad in landscape view. As well any pc browser.
Just today I was trying to find more info on the UI and found out that the UI assets can be stored locally and be altered which is good!
I will follow this road and inform with progress in case somebody is interested as well!

April 12, 2021 at 10:51 am #69751
tsikishome
Participant
Looking good so far.
Still some work to do because the active stations shown on the top are still in one column.
Attachments:
1. Screenshot-2021-04-12-at-6.48.29-PM.png
April 19, 2021 at 1:14 pm #69826

Ray
Keymaster

Cool, indeed looks very nice!

April 20, 2021 at 3:20 am #69840
tsikishome
Participant
Thanks Ray!
Yes it looks nice!
And with both some active zones.
Attachments:
1. Screenshot-2021-04-20-at-11.19.49-AM.png
April 20, 2021 at 3:23 am #69842
tsikishome
Participant
The problem now is that if an odd number of zones are activated,
the zones are not shown correctly as the elements are cut in half.
Keep looking.
Attachments:
1. Screenshot-2021-04-20-at-11.22.14-AM.png
April 20, 2021 at 5:11 am #69845
tsikishome
Participant
Fixed! Super happy with the final result!
Attachments:
1. Screenshot-2021-04-20-at-12.17.36-PM.png
April 23, 2021 at 10:04 pm #69883

Samer
Keymaster

Looks great, if you would be okay with it we could include this in the main repo. If you are interested please submit a pull request.

Thank you!

April 25, 2021 at 8:05 am #69903
tsikishome
Participant
Hello Samer, I don’t understand what you mean with pull request. Do you mean github? I am not sure what to do.

For anyone interested,
I changed the app.css file,
1. Changed this:
```
:not(input):not(textarea) {
    -webkit-touch-callout:none;
    -webkit-user-select:none;
    -moz-user-select:none;
    -ms-user-select:none;
    -ms-touch-select:none;
    -ms-content-zooming:none;
    -o-user-select:none;
    user-select:none;
}
```
to this:
```
:not(input):not(textarea) {
    -webkit-touch-callout:none;
    -webkit-user-select:none;
    -moz-user-select:none;
    -ms-user-select:none;
    -ms-touch-select:none;
    -ms-content-zooming:none;
    -o-user-select:none;
    user-select:none;
    margin: 0;
    -webkit-column-break-inside: avoid;
    page-break-inside: avoid;
    break-inside: avoid-column;
}
```
2. changed this:
```
#os-stations-list img, #os-running-stations img {
	display: none;
}
```
to this (added underneath):
```
#os-stations-list img, #os-running-stations img {
	display: none;
}
#os-stations-list{ column-count: 2; column-gap: 10px; -webkit-column-count: 2; -moz-column-count: 2;}
#os-running-stations{ column-count: 2; column-gap: 10px; -webkit-column-count: 2; -moz-column-count: 2;}
```
Author

Posts