Text layout issues.

[ScottChapman]

(I thought there was an issue on this, but couldn't find it...)

I frequently have text overlap issues when the weather gets complicated (see included picture).

I was thinking of ways to give more space to the forecast text; maybe:

-------------------------------------------------------
|     Icon   |               10% rain 35/24 F  |
|   Date    |                                            |
| - - - - - - - - - - - - - - - - - - - - - - - - - - -  |
|   forecast text                                     |
-------------------------------------------------------

or maybe:

-------------------------------------------------------
|  Date        10% rain 35/24F                |
| - - - - - - - - - - - - - - - - - - - - - - - - - - -  |
|   Icon  | forecast text                          |
|   Icon  | forecast text                          |
|   Icon  | forecast text                          |
-------------------------------------------------------

Dunno, the text is pretty useful, gotta think there is some reasonable layout that makes it less likely that there would be overlap (and maybe just truncate then).

(sorry for the crappy layout examples, but I think you get the idea...)

[BertLindeman]

Hi Scott, do you mean "Day forecast test truncation" #108 Maybe you did not find it because it's closed?

[ScottChapman]

Oh yea, not sure how I missed that (I did a bunch of queries including closed ones), but yea that's the one.

It is an issue (even if there is no obvious fix), at least for me. very week there seems like there is at least one day that has some serious overlap/truncation issue. Maybe keep this one open since I like the layouts here better than the one in #108

I just think they key is to give the forecast more space even if that means giving it a smaller font. I do realize the is no (obvious) way to avoid it, but surely we could make it happen less frequently?

Is this not an issue for anyone else?

[BertLindeman]

I agree that the current text layout is (much) better than before #108 And yes overlap occurs from time to time:

Blown-up like this it's even almost readible ;-)

I do not think that a variable fontsize depending on the contents is the solution. It might be ugly.

[EDIT} We could ask for more stable weather . . . .

[ScottChapman]

;-)

But yea, I agree that having different font sizes for the same features would not be great. Though I suppose it would be possible to do it per-display (meaning perhaps a smaller font is used for all the forecasts if any day be too long). But I'm not enamored with that idea either.

Just spit-ballin'. Trying to find something relatively simple and not too sucky...

[BertLindeman]

Had to look it up in the urban dicrtionary. ;-) Did you mean in the examples above to overlay the icon in the forecast boxes with the date [time]? Maybe that would be legible? And it would make it possible to keep the forecast text asis.

Have to add: Either way it's a great clock!

[ScottChapman]

I did't think of overlaying. I could try to mock up a better example of each. I guess I could try to mock it up in google slides to give the opportunity to mess around with it.

[BertLindeman]

Interesting! But there's always the thing to get it programmed ;-)

[xenon462]

here is my decision. need to change date format. you need to align the date on the left. The text needs to be aligned to the right.

[BertLindeman]

@xenon462 (How should I call you?) You have a great clock here! Did not fiddle with fontsizes but set the fontattr to use Arial as it's designed for it legibility, like this in Config:

fontattr = 'font-family:arial; '

Used your align changes. Could not yet get the clock use the font color I added in the config ;-( .

In my PyQTclock all date and time formats are in Config.py, so easily changed.

My clock at the moment, not too bad I think:

Bert

[feh123]

The arial idea is very good - that separates my weather text really well. I do like the pale background and the dark text/clock. How do you alter these colours - currently I just take the default settings? Thanks.

[BertLindeman]

@feh123 It's not really difficult. I assume that you installed in the default location: /home/pi/PiClock/Clock/

The settings used by default are in the file Config.py Save a copy and step by step update your Config.py

Look in /home/pi/PiClock/Clock/images for the images you like best.

In my Config.py (part of them):

squares1 = 'images/squares1-jean.png'
squares2 = 'images/squares2-jean.png'
textcolor = '#000040'
textfont = 'arial' # was 'sans-serif'
clockface = 'images/clockface3-darkblue.png'
hourhand = 'images/hourhand-darkblue.png'
minhand = 'images/minhand-darkblue.png'
sechand = 'images/sechand-darkblue.png'

background = 'images/myclockbackground.jpg'

Create a picture / drawing you like or crawl the web to find a nice picture. and place it in the images directory. Update your Config.py and restart the clock. And if you are happy show us ;-)

[feh123]

The details are great. However I hit a problem with my own .jpg or .png background - on startup I see the error incorrect RGB format. Everything else works and I get the blue clock and text but a dark blank background. I have checked the .jpg and .png images already in the folder and I can see no difference to mine. Have you seen this before? Thanks.

[BertLindeman]

Yes I see on startup of the clock:

libpng warning: iCCP: known incorrect sRGB profile
libpng warning: iCCP: known incorrect sRGB profile
libpng warning: iCCP: known incorrect sRGB profile
libpng warning: iCCP: known incorrect sRGB profile

I did not bother to get rid of it, as you saw in a previous post. Many items on the net state: "ignore". Like (an older post) on Stackoverflow

But you say you (only?) get a black background. Do you see any other errors in your log?

[feh123]

There is nothing up to the RGB errors and after that the log just show mapbox api loading and rainviewer starting to grab radar images. I then get all the normal text data, icons, clock and weather images, forecast text (all in blue). All that is missing is my backgound .jpg (or .png - I have tried both). The images are in the right folder (I have VNC enabled and can see them). I can even open them and see the photos using VNC. I can also use the clockbackground-jean.png without a problem!

[BertLindeman]

Hmm, Probably not the case, but just incase (assuming you use user pi):

• no UpperCase / lowerCase issue in the filename / path / Config-text
• pi is the owner of the jpg/png
• has read/execute access

That it is a valid jpg/png you already tested by looking at it. Coming at the end of my options ;-(

Would it be possible copy the image or drop a link to it here, so I could try it? (Think about copyright)

[feh123]

Cannot see any errors - permissions set in VNC and seem okay. Seem to be able to add all current images already in Clock/image folder without issue. No copyright. Hope this drag/drop works! Thanks for the help!

[BertLindeman]

Saved the image local as cold-snow-white.jpg made pi owner took my Config.py and made Config-snow.py Only changed background = 'images/clockbackground-kevin.png' into background = 'images/cold-snow-white.jpg'

And it works. The copy / paste / save via github has no doubt changed something. Not that it's readible combined with all other default colors ;-)

One thing I can suggest is look at the size (height x width) of your image and look what the size of the default images is. And adapt your image to that size. On the other hand.. The image in my /home/pi/PiClock/images directory is 2540 x 1905 and it works...

One last idea (very long shot): could there be a problem with the dashes in the name due to character encoding? rename the file to lowercase letters only e.g. coldsnowwhite.jpg and retry?

OK, ;-) ONE more thing: I just tested with a jpg picture that does NOT exist. No error message just a black background. An error message would be very nice.

Well enough written to get you busy ;-)

[feh123]

No luck so far - tried photo editors to take out EXIF etc, altered name, used smaller photo size.

Could you send the photo back to me - maybe that will work? Thanks!

[n0bel]

@ScottChapman @BertLindeman So I do love the conversation about changing the text format of the forecast. Great work and experimentation! My feeling was that it was "good enough" as is, but lets get it better if we can.

I'm looking seriously about how to incorporate your ideas into the master.

The last method shown here seems to me to show the best promise. https://github.com/n0bel/PiClock/issues/125#issuecomment-456015852

Since the text box size is well defined, I was thinking about an iterative approach where the size is checked with a set of progressively smaller font sizes, and then stopping when it fits.

[n0bel]

@feh123 @BertLindeman

One of the reasons I closed #108 is that open issues that have been resolved tend to go off topic, making it harder for people to find information about the multiple topics within the thread.

It'd be great for you to start a new issue dealing with the background image changes, because this is great information deserving of its own discussion.

[ScottChapman]

@n0bel - yea, I agree; I do like the proposed layout and I think it is worth trying.

If it still seems problematic then I'd be happy to put together some "mockup" mechanism for folks to play with and share (on a google doc).

Maybe put the changes on a branch for folks to test before pulling into master?

[BertLindeman]

Sorry @n0bel I do get easily distracted and so items widen. @feh123 Would you create a new issue like "background image does not show" or something similar? I have a python script to do some checks on the config. Might help. And I could paste your image back to you there.

[ScottChapman]

nudge

[ScottChapman]

Perhaps someone could just summarize the changes proposed here? I would like to try them out, and if they are good I can create a PR for them.

Thanks!

[n0bel]

There were several. 1) Put all date/time format strings in the config (with appropriate defaults in the startup area so old configs still work) 2) Make the label for the day/time on the forecast left justified 3) Make the label for the forecast information right justified 4) (maybe if needed) In additon to all this, do some calls to fontmetrics to determine if the text will fit, and if not drop the font size and try again until it fits.

I'm a little concerned about 2. The label will cover the weather icon, and possibly make it hard to read with the default icons and default colors. Perhaps the text would also need a drop shadow to improve the contrast of the similar colors.

Another idea I thought about was to make the day/time label oriented 90 degrees rotated. The description text could then encroach on the weather icon a bit as well.

Might make each item a separate commit or pull request to easily track whats going on.

[ScottChapman]

I just noticed (not sure why I didn't notice this before), but the dial of the clock isn't actually centered; there appears to be some space on the bottom. So, I had to take out a tape measure to confirm but it appears that the columns on the left are wider than the columns on right. I think that means you could actually make the columns on the right wider than the left and likely no one would notice...

Anyway, looking forward to the changes!

[BertLindeman]

The squares1 (right) and squares2 (left) images have the same size. But the left squares have a marge on the righthand side, see:

Is that the difference you see left and right?

You state

I think that means you could actually make the columns on the right wider than the left and likely no one would notice...

People that have customized their square*.png may notice ;-) But that is not very important, right.

[ScottChapman]

I don't know if that's it or not. I had to take a tape measure to what i was seeing on my screen and I was measuring to the edges of the visible part of the images.

[BertLindeman]

May this helps to see some sizes. Added some kind of grid as background:

[BertLindeman]

The grid jpg:

[BertLindeman]

One text layout wish from me I forgot to report. I use two thermometers on PiClock and their text is overlaying the clock image like this:

[xxxDrewedxxx]

I use this mostly for weather with the clock being secondary. As such I would like to be able to increase the size of the frames( tiles?) where the weather forecast and radar are. This would allow more test in a bigger font size. Is this easily do able? I've been able to move the radars around in PyQtPiClock, but haven't found what locates and sizes the rest.

[ScottChapman]

Any chance we can get these committed? They look like pretty good!

[n0bel]

@ScottChapman Get what committed? There are no pull request regarding things in this thread.

[ScottChapman]

Yea, I noticed that. Do the changes seem to be an improvement overall?

[BertLindeman]

Will attempt to create a PR for item 1 from n0bel:

1 Put all date/time format strings in the config (with appropriate defaults in the startup area so old configs still work)