MMM-NewsFeed multiple instances

[Egnos]

@sdetweil
I have already tried your advice but it didn’t work.
The strange thing is that if I launch the two modules together, only MMM-NewsFeed starts.
If I start them individually then the MMM-NewsFeed2 works too.
When launched together, MMM-NewsFeed always prevails, not allowing the execution of MMM-NewsFeed2.

daniele@raspberry:~/MagicMirror $ npm start

> magicmirror@2.20.0 start
> ./run-start.sh $1

[15.09.2022 13:57.13.128] [LOG] Starting MagicMirror: v2.20.0
[15.09.2022 13:57.13.132] [LOG] Loading config ...
[15.09.2022 13:57.13.135] [LOG] Loading module helpers ...
[15.09.2022 13:57.13.137] [LOG] No helper found for module: alert.
[15.09.2022 13:57.13.148] [LOG] Initializing new module helper ...
[15.09.2022 13:57.13.148] [LOG] Module helper loaded: updatenotification
[15.09.2022 13:57.13.149] [LOG] No helper found for module: clock.
[15.09.2022 13:57.13.379] [LOG] Initializing new module helper ...
[15.09.2022 13:57.13.379] [LOG] Module helper loaded: MMM-SystemStats
[15.09.2022 13:57.13.427] [LOG] Initializing new module helper ...
[15.09.2022 13:57.13.427] [LOG] Module helper loaded: MMM-NewsFeed
[15.09.2022 13:57.13.437] [LOG] Initializing new module helper ...
[15.09.2022 13:57.13.437] [LOG] Module helper loaded: MMM-NewsFeed2
[15.09.2022 13:57.13.438] [LOG] All module helpers loaded.
[15.09.2022 13:57.13.491] [LOG] Starting server on port 8080 ...
[15.09.2022 13:57.13.501] [LOG] Server started ...
[15.09.2022 13:57.13.502] [LOG] Connecting socket for: updatenotification
[15.09.2022 13:57.13.502] [LOG] Starting module helper: updatenotification
[15.09.2022 13:57.13.503] [LOG] Connecting socket for: MMM-SystemStats
[15.09.2022 13:57.13.503] [LOG] Connecting socket for: MMM-NewsFeed
[15.09.2022 13:57.13.504] [LOG] [FEED] MMM-NewsFeed Version: 1.2.0
[15.09.2022 13:57.13.505] [LOG] Connecting socket for: MMM-NewsFeed2
[15.09.2022 13:57.13.506] [LOG] [FEED] MMM-NewsFeed Version: 1.2.0
[15.09.2022 13:57.13.507] [LOG] Sockets connected & modules started ...
[15.09.2022 13:57.13.507] [LOG]
Ready to go! Please point your browser to: http://localhost:8080
Starting chromium browser now, have patience, it takes a minute
[15.09.2022 13:57.16.780] [INFO]  Checking git for module: MMM-SystemStats
[15.09.2022 13:57.16.835] [INFO]  Checking git for module: MMM-NewsFeed
[15.09.2022 13:57.16.850] [INFO]  Checking git for module: MMM-NewsFeed2
[15.09.2022 13:57.16.865] [INFO]  Checking git for module: default
[15.09.2022 13:57.23.546] [LOG]   [FEED] MMM-NewsFeed est now initialized!
[15.09.2022 13:57.23.910] [LOG]   [FEED] MMM-NewsFeed est now initialized!

[Egnos]

I realized that the two instances overlap, regardless of the position given in the configuration.
both modules work (MMM-NewsFeed and MMM-NewsFeed2) but “cover” each other …

[sdetweil]

@Egnos then you would have to have to fiddle with CSS
so would have to rename the css file and change the response to getStyles to the new name…

THEN you could use custom.css to attempt to fix

as I said, you could ‘try’ the rename approach… sometimes not so easy…

[Egnos]

@sdetweil said in MMM-NewsFeed multiple instances:

so would have to rename the css file and change the response to getStyles to the new name…

Below the “MMM-NewsFeed2.css” file contained in the module but I can’t find "getStyles ":

/* Magic Mirror
 * Module: NewsFeed
 *
 * By @bugsounet -- Dupont Cédric <bugsounet@bugsounet.fr>
 * MIT Licensed.
 */

#NEWSFEED_CONTENER {
  line-height:1.1em;
  width: 100%;
}

#NEWSFEED_CONTENER.showArticle {
  opacity: 1;
  transition: opacity 1s linear;
}

#NEWSFEED_CONTENER.hideArticle {
  opacity: 0;
  transition: opacity 1s linear;
}

#NEWSFEED_TITLE {
  margin-left: auto;
  margin-right: auto;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#NEWSFEED_ARTICLE {
  font-size: 90%;
  display: flex;
}

#NEWSFEED_CONTENT {
  padding: 10px;
  margin-top: 1px;
  font-size: 70%;
  text-align: left;
  height: 80px;
  display: flex;
}

#NEWSFEED_IMAGE {
  margin-right: 10px;
  float: left;
  max-width: 10vw;
  max-height: 10vh;
  text-align: left;
}

#NEWSFEED_DESCRIPTION {
  opacity: 0;
  line-height: 25px;
  text-align: justify;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}

#NEWSFEED_DESCRIPTION.showArticle {
  animation: 3s ease 0s normal forwards 1 fadein;
}

@keyframes fadein{
  0%   { opacity:0; }
  66%  { opacity:0; }
  100% { opacity:1; }
}

#NEWSFEED_DESCRIPTION.hideArticle {
  opacity: 1;
  animation: none;
}

#NEWSFEED_FOOTER {
  text-align:right;
}

#NEWSFEED_LOGO {
  font-size: 100%;
  font-weight: bold;
  display: flex;
}

#NEWSFEED_LOGO_PARTA {
  margin-left: 10px;
}

#NEWSFEED_LOGO_PARTB {
  margin-right: 10px;
}

#NEWSFEED_SOURCE {
  margin-right: 8px;
  font-weight: bold;
  margin-top: -9px;
  margin-bottom: 5px;
  text-align: left;
}

#NEWSFEED_SOURCE.start {
  animation-duration: .8s;
  animation-name: clignoter;
  animation-iteration-count: 2;
  transition: none;
  animation-delay: 1s;
}

#NEWSFEED_SOURCE.stop {
  animation-name: stopclignoter;
  animation-iteration-count: 1;

}

@keyframes clignoter {
  0%   { opacity:1; }
  40%  { opacity:0; }
  100% { opacity:1; }
}

@keyframes stopclignoter {
  0%   { opacity:1; }
}

#NEWSFEED_TIME {
  font-size: 50%;
  text-align: right;
  display: inline-block;
  margin-right: 10px;
  margin-top: 10px;
  margin-bottom: -5px;
}

#NEWSFEED_INFO {
  width: 100%;
  height: 110px;
}

#NEWSFEED_QRCODE {
  height: 120px;
  width: 120px;
  margin-top: 0px;
  margin-right: -10px;
  margin-left: 5px;
}

/** Vertical **/

#NEWSFEED_TITLE.vertical {
  display: none;
}

#NEWSFEED_CONTENT.vertical {
  font-size: 80%;
  display: inline-block;
}

#NEWSFEED_IMAGE.vertical {
  float: unset;
  display: block;
  margin-left: auto;
  margin-right: auto;
  /*
  max-width: 20vw;
  max-height: 20vh;
  */
}

#NEWSFEED_SOURCE.vertical {
  text-align: center;
  margin-top: auto;
  margin-bottom: auto;
  line-height: 22px;
}

#NEWSFEED_QRCODE.vertical {
  height: 100px;
  width: 100px;
  min-width: 100px;
  min-height: 100px;
  /* display: inline-block; */
  margin-right: 0px;
  margin-top: 3px;
  margin-left: 0px;
}

#NEWSFEED_CONTENER_TITLE {
  display: flex;
}

#NEWSFEED_DESCRIPTION.vertical {
  line-height: 20px;
  margin-top: 5px;
  -webkit-line-clamp: 10;
}

#NEWSFEED_TIME.vertical {
  font-size: 60%;
  margin-top: 0px;
}

[Anthony]

@Egnos Why don’t you try different modules?

[Egnos]

@Anthony said in MMM-NewsFeed multiple instances:

Why don’t you try different modules?

Hi @Anthony, I have not found any RSS Feed modules that show the image of the article.
Do you have something to advise me?

Thanks.

[sdetweil]

@Egnos getStyles is in the MMM-Newfeed2.js

[Anthony]

@Egnos I didn’t know you want a picture too. Although this, this and this seem to have a picture of the article but better is to check them yourself to see if they fit your needs.

[Egnos]

@sdetweil said in MMM-NewsFeed multiple instances:

getStyles is in the MMM-Newfeed2.js

yes yes, I already did. I tried to move it with the “custom.css” but I could not move it (probably due to my lack of knowledge of css …).
Can you recommend a few lines of CSS code to move MMM-Newsfeed2?

@Anthony said in MMM-NewsFeed multiple instances:

@Egnos I didn’t know you want a picture too. Although this, this and this seem to have a picture of the article but better is to check them yourself to see if they fit your needs.

Now I take a look at it, I typically avoid modules with API to get from registration. But if it’s the only solution …

Thank you all

[sdetweil]

@Egnos sorry, this one looks more difficult to move around