txoof / epdlib

Python library for creating and writing modular layouts for e-paper screens
GNU General Public License v3.0
16 stars 8 forks source link

Add better documentation for how TextBlocks choose font sizes and display overflow text #19

Open jhaake2308 opened 2 years ago

jhaake2308 commented 2 years ago

On Waveshare 6" (HD), I am using the default rotation of "0" (hence widescreen horizontal), all is good:

Horizontal-WS

If I change the rotation to 90 (vertical, cable up !caution, with the 6" WS HD!) this happens:

Vertical

my layout:

solar = {

'title' : {
        'type': 'TextBlock',
        'image': None,
        'inverse': False,
        'padding': 0,
        'width': .75,
        'height': .1,
        'hcenter': False,
        'vcenter': True,
        'abs_coordinates': (0, 0),
        # no need for calculations, just use x = 0 and y = 0
        'relative': False,
        'max_lines': 1,
        'font': dir_path+'/../../fonts/Montserrat/Montserrat-SemiBold.ttf',
        'mode': 'L'
     },
'time': {
        'type': 'TextBlock',
        'image': None,
        'padding': 0,
        'width': .25,
        'height': .1,
        'hcenter': False,
        'vcenter': True,
        'align': 'right',
        # calculate the X value and use 0 for the Y coordinate
        'abs_coordinates': (None, 0),
        # use the calculate the X coordinate based on the size of the 'title' block
        # use the absolute Y value from the 'time' block
        'relative': ['title', 'time'],
        'max_lines': 1,
        'mode': 'L',
        'font': dir_path+'/../../fonts/Montserrat/Montserrat-SemiBold.ttf',
    },
    'daily_yield': {
        'type': 'TextBlock',
        # need 2 lines to make this work properly; text is a bit too long
        # can you shorten the text?
        'max_lines': 2,
        'height': 0.22,
        'width': 1,
        'hcenter': False,
        'vcenter': True,
        'padding': 10,
        # use 0 for the X coordinate and calculate the Y coordinate
        'abs_coordinates': (0, None),
        # use the absolute S value from 'daily_yield and calculate the Y based on 'title'
        'relative': ['daily_yield', 'title'],
        'mode': 'L',
        'font':  dir_path+'/../../fonts/Montserrat/Montserrat-Regular.ttf'        
    },

    'current_consumption' : {
        'type': 'TextBlock',
        # need 2 lines to make this work properly; text is a bit too long
        # can you shorten the text?
        'max_lines': 2,
        'height': 0.22,
        'width': 1,
        'hcenter': False,
        'vcenter': True,
        'padding': 10,
        'abs_coordinates': (0, None),
        'relative': ['current_consumption', 'daily_yield'],
        'mode': 'L',
        'font':  dir_path+'/../../fonts/Montserrat/Montserrat-Regular.ttf'
    },

    'current_yield' : {
        'type': 'TextBlock',
        # need 2 lines to make this work properly; text is a bit too long
        # can you shorten the text?
        'max_lines': 2,
        'height': 0.22,
        'width': 1,
        'hcenter': False,
        'vcenter': True,
        'padding': 10,
        'abs_coordinates': (0, None),
        'relative': ['current_yield', 'current_consumption'],
        'mode': 'L',
        'font':  dir_path+'/../../fonts/Montserrat/Montserrat-Regular.ttf'

    },

    'battery_SOC' : {
        'type': 'TextBlock',
        # need 2 lines to make this work properly; text is a bit too long
        # can you shorten the text?
        'max_lines': 2,
        'height': 0.22,
        'width': 1,
        'hcenter': False,
        'vcenter': True,
        'padding': 10,
        'abs_coordinates': (0, None),
        'relative': ['battery_SOC', 'current_yield'],
        'mode': 'L',
        'font':  dir_path+'/../../fonts/Montserrat/Montserrat-Regular.ttf'
    }

}

Fiddling around with the height = 0.22 is working (taking it down to e.g. 0.12), but not intended as height of 0.22 is good for layout-style horizontal. So is there a way to define different font sizing if using other rotation options than mentioned? Any help is highly appreciated!

Thank you BR Julius

txoof commented 2 years ago

The text blocks are actually doing exactly what they are supposed to do. The font & size you've chosen can't render in the space provided in the layout so epdlib displays as many full words as it can, then shows the ellipses glyph "..." To indicate the text overflows the space. The top left field is one word and too large in the x dimension to display so it just gives an ellipses

I should document this better.

The TextBlock layout type tries to calculate the maximum size for text given the max lines value, x & y dimensions and font. You are simply running out of x space.

There are a few solutions that you can mix and match to get the look you want: