Font-Awesome Icon Question Relating to MMM-WeatherChart

[ankonaskiff17]

Not an issue but was wondering if there is a way to increase size of Font-Awesome icons without increasing the size of the temperature values on the line chart? Tried to find information on FA in general and came across some information on the FA site that icons and text linked in some way and you can't increase size of text or icon without increasing size of both.

[mtatsuma]

Hi

I don't get exactly what you are trying to do, but I found the information about the icon sizing of FA.
https://fontawesome.com/v5.15/how-to-use/on-the-web/styling/sizing-icons

If you share your code, I may be able to help you more.

[ankonaskiff17]

As far as the weather chart, it is pretty basic. It works fine. The issue is that I have it on a big screen and have had to scale up the various modules. An example is default table setting in many modules is "small". I had to change table to medium.
You have a fontSize line in configuration so that is easily corrected.
My plan is to have Pi plugged in to one of HDMI ports on TV so I can use TV remote and toggle between TV shows, and the MM.
I sit back from TV and since original concept is to use a much smaller monitor to make mirror, modules are plug and play with minor settings changes in config.js
This will be in bedroom at far side of room and the icons are hard to tell difference between various icons module pulls based on weather from OpenWeather

[ankonaskiff17]

{
module: "MMM-WeatherChart",
position: 'top_center',
config: {
updateInterval: 30 * 60 * 1000,
retryDelay: 10000,
apiKey: 'f989b741411e6f489fafff720357ace6',
lat: 34.13178062588381,
lon: -80.84202412490625,
units: 'imperial',
height: '800px',
width: '2000px',
fontSize: '30px',
fontWeight: 'normal',
dataNum: 24,
dataType: 'daily',
nightBorderDash: [5, 1],
showIcon: true,
showRain: true,
showZeroRain: true,
rainUnit: 'inch',
includeSnow: true,
showSnow: true,
showZeroSnow: true,
rainMinHeight: 0.1,
hourFormat: '12h',
fillColor: 'rgba(191, 128, 128, .3)',
colorSnow: "rgba(65, 105, 226, 1)",
colorRain: "rgba(219, 112, 146, 1)",
}
},

[mtatsuma]

I got your situation and I understand the weather icon is too small to check the weather on your TV.

MMM-WeatherChart downloads the icon images documented in https://openweathermap.org/weather-conditions#Icon-list by default. You can change the base url from the iconURLBase config option after you prepare your own large size images.

I tried to add an config option to change the icon size in Chart.js, but it did not work well at that time.
I will try that again if I have time.

[ankonaskiff17]

Thank you for reply. Initially I thought that the icons were Font-Awesome but then realized they were coming from OpenWeatherMap because they have color and I think the Font-Awesome free icons are black and white. You have to pay for colored icons from Font-Awesome. I have a question about the right and left margins but I would need to send some screen shots to describe question. I saw in your code that you are doing some sort of math to prevent I think Y-axis from getting chopped off. As I said though, picture would be best for me to show you. From: tatsuma ***@***.***> Sent: Thursday, October 7, 2021 9:08 AM To: mtatsuma/MMM-WeatherChart ***@***.***> Cc: ankonaskiff17 ***@***.***>; Author ***@***.***> Subject: Re: [mtatsuma/MMM-WeatherChart] Font-Awesome Icon Question Relating to MMM-WeatherChart (#37) I got your situation and I understand the weather icon is too small to check the weather on your TV. MMM-WeatherChart downloads the icon images documented in https://openweathermap.org/weather-conditions#Icon-list by default. You can change the base url from the iconURLBase config option after you prepare your own large size images. I tried to add an config option to change the icon size in Chart.js, but it did not work well at that time. I will try that again if I have time. — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub <#37 (comment)> , or unsubscribe <https://github.com/notifications/unsubscribe-auth/AMT3ATKZAAHQTDI6Y3R3DBLUFWLULANCNFSM5E2E432A> . Triage notifications on the go with GitHub Mobile for iOS <https://apps.apple.com/app/apple-store/id1477376905?ct=notification-email&mt=8&pt=524675> or Android <https://play.google.com/store/apps/details?id=com.github.android&referrer=utm_campaign%3Dnotification-email%26utm_medium%3Demail%26utm_source%3Dgithub> . <https://github.com/notifications/beacon/AMT3ATLGHJPS6HLS7BSZRBDUFWLULA5CNFSM5E2E432KYY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOG7SVC6I.gif>

…

-- This email has been checked for viruses by Avast antivirus software. https://www.avast.com/antivirus

[KamiSchami]

Hi, greetings from Germany. Thanks for the module. Can I also save the icons on the sd cards and insert the path? I would like to have identical icons as currentweather. Thank you

[mtatsuma]

Hi, KamiSchami

Yes, you can.

If you place all your icons at the path MMM-WeatherChart/images/, you must configure iconURLBase as modules/MMM-WeatherChart/images/.

Your image file names must be same with the openweather's ones documented here

[KamiSchami]

Hi, ok great, it works. Thank you. One more question... How can I move the icons up a bit more since they sometimes overlap the chart? thank you

[mtatsuma]

The default icons from openweather have 50 x 50 size and the module adjust the margin between icons and line chart assuming the default icon size.

Is it possible to change the size of your icons to 50 x 50?

or you have to use large icons?

[KamiSchami]

Hi, i use 50 x 50 Icons 🙈

[mtatsuma]

What version of MMM-WeatherChart are you using?
If you use an old version, you can update to v3.2.0 or above and solve the issue.

Could you check the following command output?

$ cd MMM-WeatherChart/
$ git show --summary

[mtatsuma]

@ankonaskiff17

I added an option to use larger icon image (100 x 100) from openweather. It may solve your issue. Please try it by cloning the latest module and setting largeOpenWeatherIcon as true in your config.

[KamiSchami]

Hi, I'm using an older version because my MM also has an older version. Unfortunately, the new version of the module does not work for me.

[mtatsuma]

I set the required MM version as 2.15.0 because it is not tested well for older versions.

You may be able to edit and change the required MM version for a work around if updating your MM is difficult.
https://github.com/mtatsuma/MMM-WeatherChart/blob/master/MMM-WeatherChart.js#L59

[RedIron1908]

Hello I have been trying for 2 days that I can insert other icons.
I have already changed the iconUrlBase and accordingly inserted a folder with the icons and labeled with the icon names 01d.png etc. what else needs to be done?

thx