Closed towerleung closed 4 years ago
eouia
commented
4 years ago First, can you show me the screenshot how it is showing?
those values are used for two purpose - indicating downloading image size and using it as displaying on MM. About the distortion, I cannot agree it happens (Because image lays on the background, so it will not be affected by division's dimension.)
Show me your configuration (and if you did, CSS modification also)
towerleung
commented
4 years ago Thank you so much for the prompt reply.
Attached please find the screen capture of my MM screen, the config.js and also custom.css file. I display the Google Album photos in the "bottom center" section. All those photos in lanscape mode are displayed ok, but those portraite mode photos got 'cropped out'.
From: Seongnoh Sean Yi notifications@github.com Sent: Friday, April 3, 2020 3:54 PM To: eouia/MMM-GooglePhotos MMM-GooglePhotos@noreply.github.com Cc: towerleung towerleung@outlook.com; Author author@noreply.github.com Subject: Re: [eouia/MMM-GooglePhotos] Photo Orientation and Display Ratio (#70)
First, can you show me the screenshot how it is showing?
those values are used for two purpose - indicating downloading image size and using it as displaying on MM. About the distortion, I cannot agree it happens (Because image lays on the background, so it will not be affected by division's dimension.)
Show me your configuration (and if you did, CSS modification also)
— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHubhttps://github.com/eouia/MMM-GooglePhotos/issues/70#issuecomment-608287303, or unsubscribehttps://github.com/notifications/unsubscribe-auth/AFMU7OIMPTX3IO4ARK7SPQTRKWI4DANCNFSM4L3TC6AQ.
eouia
commented
4 years ago attached? where?
towerleung
commented
4 years ago 
Config File:
/ Magic Mirror Config Sample
*/
var config = { address: "0.0.0.0", // Address to listen on, can be: // - "localhost", "127.0.0.1", "::1" to listen on loopback interface // - another specific IPv4/6 to listen on a specific interface // - "", "0.0.0.0", "::" to listen on any interface // Default, when address config is left out, is "localhost" port: 8080, ipWhitelist: [], // Set [] to allow all IP addresses // or add a specific IPv4 of 192.168.1.5 : // ["127.0.0.1", "::ffff:127.0.0.1", "::1", "::ffff:192.168.1.5"], // or IPv4 range of 192.168.3.0 --> 192.168.3.15 use CIDR format : // ["127.0.0.1", "::ffff:127.0.0.1", "::1", "::ffff:192.168.3.0/28"],
language: "en",
timeFormat: 24,
units: "metric",
electronOptions: { fullscreen: true},
modules: [
{
module: "alert",
},
{
module: "MMM-Stock",
position: "top_bar",
config: {
companies: ["^HSI","^DJI","^IXIC","2800.HK","0005.HK"]
}
},
{
module: "clock",
position: "middle_center",
config: {
showWeek : "true",
displayType: "both",
analogSize : "150px",
analogFace : "simple",
secondsColor: "#FF0000",
analogPlacement: "right"
}
},
{
module: 'calendar_monthly',
position: 'top_right',
config: {
cssStyle: "block",
}
},
{
module: "currentweather",
position: "top_left",
config: {
location: "Hong Kong",
locationID: "1819729", //ID from http://bulk.openweathermap.org/sample/; unzip the gz file and find$
appid: "b7e656b5754fdb85f11d7852715ced73"
}
},
{
module: "weatherforecast",
position: "top_left",
header: "Weather Forecast",
config: {
location: "Hong Kong",
locationID: "1819729", //ID from https://openweathermap.org/city
appid: "b7e656b5754fdb85f11d7852715ced73"
}
},
{
module: 'MMM-Remote-Control',
config: {
customCommand: {}, // Optional, See "Using Custom Commands" below
customMenu: "custom_menu.json", // Optional, See "Custom Menu Items" below
showModuleApiMenu: true, // Optional, Enable the Module Controls menu
apiKey: "" // Optional, See API/README.md for details
}
},
{
module: "MMM-GooglePhotos",
position: "bottom_center",
config: {
albums: ["Photo Frame Display"], // your album id(s) from result of `auth_and_test.js`
refreshInterval: 1000*60,
sort: "random", //'time', 'reverse', 'random'
uploadAlbum: null, // Only album created by `create_uploadable_album.js`.
condition: {
fromDate: null, // Or "2018-03", RFC ... format available
toDate: null, // Or "2019-12-25",
minWidth: null, // Or 400
maxWidth: null, // Or 8000
minHeight: null, // Or 400
maxHeight: null, // Or 8000
minWHRatio: null,
maxWHRatio: null,
// WHRatio = Width/Height ratio ( ==1 : Squared Photo, < 1 : Portraited Photo, > 1 : Landscaped Photo)
},
showWidth: 1000, // These values will be used for quality of downloaded photos to show. real size to show in your MagicMirro$
showHeight:750,
timeFormat: "YYYY/MM/DD HH:mm", // Or `relative` can be used.
}
},
{
module: "newsfeed",
position: "upper_third", // This can be any of the regions. Best results in center regions.
config: {
feeds: [
{
title: "SCMP",
url: "https://www.scmp.com/rss/91/feed",
},
]
}
},
{
module: 'worldclock',
position: 'top_center', // This can be any of the regions, best results in top_left or top_right regions
config: {
// See 'Configuration options' for more information.
timeFormat: 'HH:mm A', //defined in moment.js format()
style: 'top', //predefined 4 styles; 'top', 'left','right','bottom'
offsetTimezone: null, // Or you can set `Europe/Berlin` to get timegap difference from this timezone. `null` will be UTC timegap.
clocks: [
{
title: "Hong Kong",
flag: "hk",
},
{
title: "Chicago", // Too long title could cause ugly text align.
timezone: "America/Chicago", //When omitted, Localtime will be displayed. It might be not your purporse, I bet.
flag: "us",
},
{
title: "Vancouver", // Too long title could cause ugly text align.
timezone: "Canada/Pacific", //When omitted, Localtime will be displayed. It$
flag: "ca",
},
{
title: "Bangolore", // Too long title could cause ugly text align.
timezone: "Asia/Kolkata", //When omitted, Localtime will be displayed. It$
flag: "in",
},
]
}
},
{
module: "MMM-NewsFeedTicker",
position: "bottom_bar",
//classes: "day_scheduler",
config: {
feeds: [
{
title: "HKET",
url: "http://www.etnet.com.hk/www/tc/news/rss.php?section=editor",
encoding: "UTF-8", //ISO-8859-1
className: "myClass",
defaultLogo : ""
},
{
title: "Google News",
url: "https://news.google.com/rss?pz=1&cf=all&hl=zh-HK&gl=HK&ceid=HK:zh-Hant",
encoding: "UTF-8", //ISO-8859-1
className: "myClass",
defaultLogo : ""
},
{
title: "RTHK Local",
url: "https://rthk.hk/rthk/news/rss/c_expressnews_clocal.xml",
encoding: "UTF-8", //ISO-8859-1
className: "myClass",
defaultLogo : ""
},
{
title: "RTHK International",
url: "https://rthk.hk/rthk/news/rss/c_expressnews_cinternational.xml",
encoding: "UTF-8", //ISO-8859-1
className: "myClass",
defaultLogo : ""
},
{
title: "RTHK Finance",
url: "https://rthk.hk/rthk/news/rss/c_expressnews_cfinance.xml",
encoding: "UTF-8", //ISO-8859-1
className: "myClass",
defaultLogo : ""
}
]
}
}
]};
/ DO NOT EDIT THE LINE BELOW / if (typeof module !== "undefined") {module.exports = config;}
towerleung
commented
4 years ago Sorry, forgot to upload the custom.css
display:none;}
display:none;}
background-size:cover;background-size:cover means Cover the region with background-image. So, if your division is landscaped shape, portrait image will try to cover whole region, So, width will be fit, but height will be over the region.
Use background-size:contain. It will Contain image in the region. So, in Landscaped division, portrait image will try to fit height. But in that case, you will get black margin in the side of photo because width of photo is smaller than division's width. (That's why GPHOTO_BACK is needed for better looks)
There be some options;
minWHRatio, maxWHRatio.GPHOTO_BACK to get better looks on background-size:containeouia
commented
4 years ago towerleung
commented
4 years ago After I changed to "background-size:contain" it worked like a charm! Sorry to bother you with this, it's not an issue but just configuration know-how gap. Thank you!
samssiegel
commented
2 years ago Just getting started, have landscape view and want to get rid of the blur portion, have the photos be only 'bottom-center'. I see that the MMM-GooglePhotos.css is where I'd set things but is there a place that outlines what each param does?
Many thanks!!!
eouia
commented
2 years ago If CSS of this module is not so easy for you to understand, that is because CSS itself means cascading styles - mixed components. I’m so sorry not to have outlined, but that is not so quite simple thing due to not only too many things to describe but also too complex for the relation among rules.
and what you need to look inside would be “#GPHOTO_BACK”.
samssiegel
commented
2 years ago Thanks, I will look at the “#GPHOTO_BACK” values/options!
The showWidth and ShowHeight configuration parameters accept percentage values but the new version seems to accept only absolute numbers.
If specifying the width and height with numbers (say 800, 600) the photo display would be 'distorted' for those photos in portrait orientation. Is there a way to configure the plug-in to display the photos in correct 'ration' automatically? Thanks.