Posts made by DDE12

DDE12

@MarcLandis
That is unfortunate. I looked around a bit to see if there is another option but did not find anything free. (:

DDE12

@sdetweil
In tinkering around, I am able to move it in custom.css with the following and possibly avoid addressing every individual icon.

.weather .weathericon {
	display: inline-block;
	transform: translate(-31px, -32px) !important;
	outline: 1px solid blue;
}

The problem with what I have above is that it will only make it look okay on one screen resolution. How do I move it to the top left of the module space so that it is relative (stays in the top left regardless of screen resolution).

DDE12

@sdetweil
Thank you for helping me.

<div id="module_3_weather" class="module weather" style="transition: opacity 1.5s ease 0s; position: static; opacity: 1;">
  <header class="module-header" style="display: none;"></header>
    <div class="module-content">
      <div>        
        <div class="normal medium"> </div>
        <div class="large">
          <span class="light wi weathericon wi-day-sunny">
	    ::before
	  </span>
          <span class="light bright">81°</span>
	  <span class="normal medium feelslike">
	    <span class="dimmed"> Feels like 81° </span>	
	  </span>			
	 </div>
<!-- Uncomment the line below to see the contents of the `current` object. -->
<!-- <div style="word-wrap:break-word" class="xsmall dimmed">{&quot;date&quot;:&quot;2024-10-06T16:11:01.142Z&quot;,&quot;windSpeed&quot;:5.81,&quot;windFromDirection&quot;:237,&quot;sunrise&quot;:&quot;2024-10-06T11:39:13.000Z&quot;,&quot;sunset&quot;:&quot;2024-10-06T23:11:13.000Z&quot;,&quot;temperature&quot;:26.76,&quot;minTemperature&quot;:null,&quot;maxTemperature&quot;:null,&quot;weatherType&quot;:&quot;day-sunny&quot;,&quot;humidity&quot;:0.45,&quot;precipitationAmount&quot;:null,&quot;precipitationUnits&quot;:null,&quot;precipitationProbability&quot;:null,&quot;feelsLikeTemp&quot;:null}</div> -->
</div></div></div>

DDE12

@JohnGalt
Have you made any progress figuring this out? I am having the same problem. The module loads but doesn’t show that it is getting any data.

DDE12

I am trying t get things lined up but I don’t know enough to get this looking good and would really appreciate some help. In the default Weather module I have made some changes to hide the wind info and move the Feels Like temp into the same area as the icon and temperature. I changed the icons to a set of svg images in a custom css. In the custom css I added the following to change the size of the weather icon size:

.weather .weathericon { 
	width: 2.75em !important;
	height: 2.75em !important;}

Currently I have:
Weather malaligned.png

And would like to get to:
Current weather.jpg

Following is my current.njk

{% macro humidity() %}
    {% if current.humidity %}
        <span class="humidity"><span>{{ current.humidity | decimalSymbol }}</span><sup>&nbsp;<i class="wi wi-humidity humidity-icon"></i></sup></span>
    {% endif %}
{% endmacro %}
{% if current %}
    {% if not config.onlyTemp %}
        <div class="normal medium">
		
            {# Start of config setting I added #}
			{% if config.showWindInfo %}           
                <span class="wi wi-strong-wind dimmed"></span>
                <span>
                    {{ current.windSpeed | unit("wind") | round }}
                    {% if config.showWindDirection %}
                        <sup>
                            {% if config.showWindDirectionAsArrow %}
                                <i class="fas fa-long-arrow-alt-down" style="transform:rotate({{ current.windFromDirection }}deg)"></i>
                            {% else %}
                                {{ current.cardinalWindDirection() | translate }}
                            {% endif %}
                            &nbsp;
                        </sup>
                    {% endif %}
                </span>
            {% endif %} 
			{# End of config setting I added #}
            
            {% if config.showHumidity === "wind" %}
                {{ humidity() }}
            {% endif %}
            {% if config.showSun %}
                <span class="wi dimmed wi-{{ current.nextSunAction() }}"></span>
                <span>
                    {% if current.nextSunAction() === "sunset" %}
                        {{ current.sunset | formatTime }}
                    {% else %}
                        {{ current.sunrise | formatTime }}
                    {% endif %}
                </span>
            {% endif %}
            {% if config.showUVIndex %}
                <td class="align-right bright uv-index">
                    <div class="wi dimmed wi-hot"></div>
                    {{ current.uv_index }}
                </td>
            {% endif %}
        </div>
    {% endif %}
    <div class="large">
        {% if config.showIndoorTemperature and indoor.temperature or config.showIndoorHumidity and indoor.humidity %}
            <span class="medium fas fa-home"></span>
            <span style="display: inline-block">
                    {% if config.showIndoorTemperature and indoor.temperature %}
                            <sup class="small" style="position: relative; display: block; text-align: left;">
                                    <span>
                                        {{ indoor.temperature | roundValue | unit("temperature") | decimalSymbol }}
                                    </span>
                            </sup>
                    {% endif %}
                    {% if config.showIndoorHumidity and indoor.humidity %}
                            <sub class="small" style="position: relative; display: block; text-align: left;">
                                    <span>
                                            {{ indoor.humidity | roundValue | unit("humidity") | decimalSymbol }}
                                    </span>
                            </sub>
                    {% endif %}
            </span>
        {% endif %}
        <span class="light wi weathericon wi-{{ current.weatherType }}"></span>
        <span class="light bright">{{ current.temperature | roundValue | unit("temperature") | decimalSymbol }}</span>
		{# Start of changes I made #}
		{% if (config.showFeelsLike) and not config.onlyTemp %}
			<span class="normal medium feelslike">
				<span class="dimmed">
					{{ "FEELS" | translate({DEGREE: current.feelsLike() | roundValue | unit("temperature") | decimalSymbol }) }}
				</span>	
			</span>
		{% endif %}
		{# End of changes I made #}		
		{% if config.showHumidity === "temp" %}
            <span class="medium bright">{{ humidity() }}</span>
        {% endif %}
    </div>
	{# {% if (config.showFeelsLike or config.showPrecipitationAmount or config.showPrecipitationProbability) and not config.onlyTemp %} #}
    {% if (config.showPrecipitationAmount or config.showPrecipitationProbability) and not config.onlyTemp %}
        <div class="normal medium feelslike">
            {% if config.showFeelsLike %}
                <span class="dimmed">
                    {% if config.showHumidity === "feelslike" %}
                        {{ humidity() }}
                    {% endif %}
					{#{{ "FEELS" | translate({DEGREE: current.feelsLike() | roundValue | unit("temperature") | decimalSymbol }) }}#}
                </span>
                <br />
            {% endif %}
            {% if config.showPrecipitationAmount and current.precipitationAmount %}
                <span class="dimmed">
                    <span class="precipitationLeadText">{{ "PRECIP_AMOUNT" | translate }}</span> {{ current.precipitationAmount | unit("precip", current.precipitationUnits) }}
                </span>
                <br />
            {% endif %}
            {% if config.showPrecipitationProbability and current.precipitationProbability %}
                <span class="dimmed">
                    <span class="precipitationLeadText">{{ "PRECIP_POP" | translate }}</span> {{ current.precipitationProbability }}%
                </span>
            {% endif %}
        </div>
    {% endif %}
    {% if config.showHumidity === "below" %}
        <span class="medium dimmed">{{ humidity() }}</span>
    {% endif %}
{% else %}
    <div class="dimmed light small">{{ "LOADING" | translate }}</div>
{% endif %}
<!-- Uncomment the line below to see the contents of the `current` object. -->
<!-- <div style="word-wrap:break-word" class="xsmall dimmed">{{current | dump}}</div> -->

Thank you for taking a look at this.

DDE12

@sdetweil

admin@raspberrypi:~/Desktop/MagicMirror $ npm run start

> magicmirror@2.28.0 start
> DISPLAY="${DISPLAY:=:0}" ./node_modules/.bin/electron js/electron.js

[2024-09-28 14:20:56.806] [LOG]   Starting MagicMirror: v2.28.0 
[2024-09-28 14:20:56.892] [LOG]   Loading config ... 
[2024-09-28 14:20:56.899] [LOG]   config template file not exists, no envsubst 
[2024-09-28 14:20:56.909] [LOG]   Loading module helpers ... 
[2024-09-28 14:20:59.198] [LOG]   Initializing new module helper ... 
[2024-09-28 14:20:59.201] [LOG]   Module helper loaded: MMM-Gas 
[2024-09-28 14:20:59.202] [LOG]   All module helpers loaded. 
[2024-09-28 14:20:59.224] [LOG]   Starting server on port 8080 ...  
[2024-09-28 14:21:00.473] [LOG]   Server started ... 
[2024-09-28 14:21:00.479] [LOG]   Connecting socket for: MMM-Gas 
[2024-09-28 14:21:00.482] [LOG]   Starting module: MMM-Gas 
[2024-09-28 14:21:00.485] [LOG]   Sockets connected & modules started ... 
[2024-09-28 14:21:02.543] [LOG]   Launching application. 
[2024-09-28 14:21:07.261] [INFO]  System information:
### SYSTEM:   manufacturer: Raspberry Pi Foundation; model: Raspberry Pi 2 Model B Rev 1.2; raspberry: [object Object]; virtual: false
### OS:       platform: linux; distro: Raspbian GNU/Linux; release: 11; arch: arm; kernel: 6.1.21-v7+
### VERSIONS: electron: 31.1.0; used node: 20.14.0; installed node: 20.11.0; npm: 10.2.4; pm2: 5.4.1
### OTHER:    timeZone: America/New_York; ELECTRON_ENABLE_GPU: undefined

It doesn’t look like it is fetching the gas prices. ??

DDE12

I recently noticed that the MMM-Gas module is not showing/working. All of my other modules are working. I removed all the modules except MMM-Gas from config.js and disabled the default modules and am just getting a black screen. There is no Loading or Undefined message. I deleted the module and reinstalled but got the same results. MM is installed on a Raspberry Pi. Please let me know what further info I can provide or steps to take to troubleshoot further. Thank you!

DDE12

@sdetweil Seems to be working great! Thank you very much for taking the time to make this a multi-instance module! Also great that you eliminated the need for npm install node-fetch@2. Even though I don’t know very much about java script, I understand it much better than these horoscopes :grinning_squinting_face:

DDE12

Thank you for the advice. I looked at your module and some others that allow for multiple instances but could not get it to work. I looked at some of the requests for multiple instances in the original (https://github.com/morozgrafix/MMM-horoscope) and the author commented that it would require rebuilding the entire module.
As a work around, I cloned a second MMM-horoscope module and renamed the folder to MMM-horoscope2. Then renamed MMM-horoscope.js and MMM-horoscope.css to MMM-horoscope2.js and MMM-horoscope2.css. Then renamed all the .MMM-horoscope in the css to .MMM-horoscope2. Finally, I ran npm install in MMM-horoscope2 folder followed by npm install node-fetch@2.

DDE12

I am trying to use two instances of https://github.com/philking98/MMM-horoscope to display the horoscope for Gemini and Sagittarius. I get the different signs displayed but the Gemini horoscope is duplicated under Sagittarius. I tried adding a delay but both of the instances appear to load at the same time. Is there a trick to slow one of them down so that hopefully it will pull the correct data? Thank you for taking a look at this.

{ // MMM-horoscope Gemini
        module: 'MMM-horoscope',
	position: 'top_right',  
	config: {
		initialLoadDelay: 5000,
		sign: 'gemini', // Zodiac sign
		useTextIcon: false
	}
},
{ // MMM-horoscope Sagittarius
	module: 'MMM-horoscope',
	position: 'top_right', 
	config: {
		sign: 'sagittarius', // Zodiac sign
		useTextIcon: false
	}
},

Horoscope output.PNG