diff --git a/src/pyj/read_book/prefs/user_stylesheet.pyj b/src/pyj/read_book/prefs/user_stylesheet.pyj index 56baf64a78..ab6e673569 100644 --- a/src/pyj/read_book/prefs/user_stylesheet.pyj +++ b/src/pyj/read_book/prefs/user_stylesheet.pyj @@ -50,7 +50,7 @@ def background_widget(sd): def background_style_widget(sd): - ans = E.div(E.label( + ans = E.div(style='margin-bottom: 1ex', E.label( _('Background image style') + ':\xa0', E.select(name='background_image_style', E.option(_('Scaled'), value='scaled'), @@ -61,6 +61,17 @@ def background_style_widget(sd): return ans +def background_fade_widget(sd): + return E.div(E.label( + _('Background image fade (%)') + ':\xa0', + E.input( + name='background_image_fade', type='number', max='100', min='0', step='1', + value='' + sd.get('background_image_fade'), + title=_('Fading of the background image is done by blending it with the background color') + ), + )) + + def create_user_stylesheet_panel(container): sd = get_session_data() container.appendChild( @@ -71,6 +82,7 @@ def create_user_stylesheet_panel(container): E.div(_('Choose a background image to display behind the book text'), style='margin-bottom: 1.5ex'), background_widget(sd), background_style_widget(sd), + background_fade_widget(sd), ), E.div( style='flex-grow: 10; display: flex; flex-flow: column', @@ -115,5 +127,10 @@ def commit_user_stylesheet(onchange, container): if bis is not old: changed = True sd.set('background_image_style', bis) + old = int(sd.get('background_image_fade')) + bif = int(container.querySelector('input[name=background_image_fade]').value) + if old is not bif: + changed = True + sd.set('background_image_fade', bif) if changed: onchange() diff --git a/src/pyj/read_book/settings.pyj b/src/pyj/read_book/settings.pyj index 2057256846..e06842d750 100644 --- a/src/pyj/read_book/settings.pyj +++ b/src/pyj/read_book/settings.pyj @@ -17,6 +17,7 @@ def update_settings(settings): opts.user_stylesheet = settings.user_stylesheet or '' opts.hide_tooltips = settings.hide_tooltips opts.cover_preserve_aspect_ratio = settings.cover_preserve_aspect_ratio + opts.bg_image_fade = settings.bg_image_fade or 'transparent' update_settings() @@ -32,6 +33,7 @@ def apply_colors(): # set background color to transparent so that the users background # color which is set on the iframe is used instead elem.style.backgroundColor = 'transparent' + document.documentElement.style.backgroundColor = opts.bg_image_fade ss = document.getElementById('calibre-color-scheme-style-overrides') if not ss: ss = E.style(id='calibre-color-scheme-style-overrides', type='text/css') diff --git a/src/pyj/read_book/view.pyj b/src/pyj/read_book/view.pyj index 48104911a9..cf55baa25d 100644 --- a/src/pyj/read_book/view.pyj +++ b/src/pyj/read_book/view.pyj @@ -30,7 +30,8 @@ from read_book.toc import get_current_toc_nodes, update_visible_toc_nodes from read_book.touch import set_left_margin_handler, set_right_margin_handler from session import get_device_uuid, get_interface_data from utils import ( - html_escape, is_ios, parse_url_params, safe_set_inner_html, username_key + color_to_rgba, html_escape, is_ios, parse_url_params, safe_set_inner_html, + username_key ) from viewer.constants import READER_BACKGROUND_URL @@ -543,12 +544,19 @@ class View: def iframe_settings(self, name): sd = get_session_data() + bg_image_fade = 'transparent' + cs = self.get_color_scheme(True) + fade = int(sd.get('background_image_fade')) + if self.iframe.style.backgroundImage is not 'none' and fade > 0: + rgba = color_to_rgba(cs.background) + bg_image_fade = f'rgba({rgba[0]}, {rgba[1]}, {rgba[2]}, {fade/100})' return { 'margin_left': 0 if name is self.book.manifest.title_page_name else sd.get('margin_left'), 'margin_right': 0 if name is self.book.manifest.title_page_name else sd.get('margin_right'), 'read_mode': sd.get('read_mode'), 'columns_per_screen': sd.get('columns_per_screen'), - 'color_scheme': self.get_color_scheme(True), + 'color_scheme': cs, + 'bg_image_fade': bg_image_fade, 'base_font_size': sd.get('base_font_size'), 'user_stylesheet': sd.get('user_stylesheet'), 'keyboard_shortcuts': sd.get('keyboard_shortcuts'), diff --git a/src/pyj/session.pyj b/src/pyj/session.pyj index 1109401758..b029876b2f 100644 --- a/src/pyj/session.pyj +++ b/src/pyj/session.pyj @@ -36,6 +36,7 @@ defaults = { 'user_stylesheet': '', 'background_image': None, 'background_image_style': 'scaled', + 'background_image_fade': 0, 'current_color_scheme': 'white', 'user_color_schemes': {}, 'base_font_size': 16, @@ -62,6 +63,7 @@ is_local_setting = { 'user_stylesheet': True, 'background_image': True, 'background_image_style': True, + 'background_image_fade': True, 'current_color_scheme': True, 'base_font_size': True, 'controls_help_shown_count': True, diff --git a/src/pyj/utils.pyj b/src/pyj/utils.pyj index cb7a7054c6..cde25310a0 100644 --- a/src/pyj/utils.pyj +++ b/src/pyj/utils.pyj @@ -241,6 +241,18 @@ def sandboxed_html(html, style, sandbox): ans.srcdoc = final_html return ans + +def color_to_rgba(color): + # take an arbitrary color spec and return it as [r, g, b, a] + cvs = document.createElement('canvas') + cvs.height = 1 + cvs.width = 1 + ctx = cvs.getContext('2d') + ctx.fillStyle = color + ctx.fillRect(0, 0, 1, 1) + return ctx.getImageData(0, 0, 1, 1).data + + if __name__ is '__main__': from pythonize import strings strings()