MagicMirror² v2.4.1 is available! For more information about this release, check out this topic.
Please read the release notes carefully since this update requires adjustments to your Raspberry Pi configuration!

Help with converting this HTML file to MM2 module format...



  • @Sean

    Breaking News
    
    
    
    <div>
        <h2><img src="pix/break_news.png" alt="Breaking News" /></h2>
        <div>
            <div>
                <div>
                    <ul>
                      <li>
                        <div>
                         <img src="pix/kansas-city-star.png" alt="Kansas City, MO News" />
                        </div>
                          <h3><a href="https://www.kansascity.com/news/" target="myIframe">The Kansas City Star</a></h3>
                      </li>
                 <li>
                   <div>
                    <img src="pix/logos-1.png" alt="Wall St. Journal" />
                   </div>
                     <h3><a href="https://www.wsj.com/news/us" target="myIframe">Wall St. Journal</a></h3>
                 </li><li>
                   <div>
                    <img src="pix/washingtonpost.png" alt="Washington Post" />
                   </div>
                   <h3><a href="https://www.washingtonpost.com/?reload=true" target="myIframe">Washington Post</a></h3>
                 </li>
                 <li>
                   <div>
                    <img src="pix/usa_today.png" alt="USA Today" />
                   </div>
                   <h3><a href="http://rssfeeds.usatoday.com/UsatodaycomNation-TopStories" target="myIframe">USA Today</a></h3>
                 </li>
                 <li>
                   <div>
                    <img src="pix/TheIrishNews.jpg" alt="Irish News" />
                   </div>
                   <h3><a href="http://www.irishnews.com/news/worldnews/" target="myIframe">Irish News</a></h3>
                 </li>
                 <li>
                   <div>
                      <img src="pix/bbc-news.png" alt="BBC World News" />
                   </div>
                   <h3><a href="https://www.bbc.com/news/world" target="myIframe">BBC World News</a></h3>
                 </li>
                    </ul>
                     
                     
                </div>
            </div>
        </div>
    </div>
    


  • @Sean
    Here is the CSS file to go with it…

    @import url('https://fonts.googleapis.com/css?family=Macondo+Swash+Caps');
    
    .breaking-news{
        width: 100%;
        background-color: rgb(255, 0, 0);
    }
    .news-title img{
        float:left;
        height:45px;
        line-height:40px;
    }
    .news-content{
        height:40px;
        padding-top:5px;
        padding-bottom:5px
        box-sizing:border-box;
    }
    .news-content li{
        margin-left:30px;
        display:inline-block;
        height:40px;
        line-height:40px;
    }
    .news-item{
        float:left;
    }
    .news-item img{
        position:relative;
        height:25px;
        line-height:40px;
        margin-right:15px;
        padding-top:5px;
        padding-bottom:5px
    }
    .ticker-title{
        font-size:20px;
        font-weight:400;
        font-family:"Macondo Swash Caps";
        display:inline-block;
        margin-top:2px;
    }
    
    .ticker-title a{
        color:#ffffff;
        text-decoration:none;
    }
    .ticker-title a:hover{
        color:#0000ff;
    }
    .tickercontainer,.tickercontainer .mask,ul.news-ticker{
        -webkit-transition:all 0 linear;
        -moz-transition:all 0 linear;
        -o-transition:all 0 linear;
        transition:all 0 linear;
        list-style:none;
    }
    
    .tickercontainer{
        overflow:hidden;
    }
    .tickercontainer .mask{
        position:relative;
        overflow:hidden;
    }
    
    .news-ticker{
        position:relative;
        list-style-type:none;
    }
    
    ul.news-ticker{
        -webkit-transition:all 0s linear;
        -moz-transition:all 0s linear;
        -o-transition:all 0s linear;
        transition:all 0s linear;
        position:relative;
        list-style-type:none;
    }
    
    


  • @Sean

    Here are the pics being used…

    6_1533647363528_washingtonpost.png 5_1533647363527_usa_today.png 4_1533647363527_TheIrishNews.jpg 3_1533647363526_logos-1.png 2_1533647363526_kansas-city-star.png 1_1533647363526_break_news.png 0_1533647363519_bbc-news.png


  • Module Developer

    I’d put them in a different structure, perhaps, depending on what you want to achieve.

    If it’s just this list that you want: Remove all line breaks and tabs, lead all quotation marks with a backslash (\") and put that complete one line of code in:

    targetElement.innerHTML = "your Code here";
    

    More flexible:


    var newsSources = [
    {
    “id”:“washington_post”,
    “name”:“Washington Post”,
    “alt”:“Washington Post”,
    “link”:“https://www.washingtonpost.com/?reload=true
    },
    {
    “id”:“usa_today”,
    “name”:“USA Today”,
    “alt”:“USA Today”,
    “link”:“http://rssfeeds.usatoday.com/UsatodaycomNation-TopStories
    },
    {
    “id”:“irish_news”,
    “name”:“Irish News”,
    “alt”:“Irish News”,
    “link”:“http://www.irishnews.com/news/worldnews/
    },
    {
    “id”:“wall_street_journal”,
    “name”:“Wall St. Journal”,
    “alt”:“Wall St. Journal”,
    “link”:“https://www.wsj.com/news/us
    },
    {
    “id”:“kansas_city_star”,
    “name”:“The Kansas City Star”,
    “alt”:“Kansas City, MO News”,
    “link”:“https://www.kansascity.com/news/
    },
    {
    “id”:“bbc_news”,
    “name”:“BBC World News”,
    “alt”:“BBC World News”,
    “link”:“https://www.bbc.com/news/world
    }
    ];
    newMainElement = document.createElement(“div”);
    newMainHeadline = document.createElement(“h2”);
    newMainHeadline.innerHTML = “< img src=“pix/break_news.png” alt=“Breaking News” />”;
    newMainElement.apply(newMainHeadline);
    frstWrapper = document.createElement(“div”);
    scndWrapper = document.createElement(“div”); // really neccessary?
    thrdWrapper = document.createElement(“div”); // really neccessary?
    newsList = document.createElement(“ul”);
    for (i=0; i< =newsSources.length; i++) {
    newsItem = document.createElement(“li”);
    newsLogo = document.createElement(“div”);
    newsLogo.innerHTML = “< img src=“pix”+newsSources[i].id+”.png" alt=""+newsSources[i].alt+"" />"
    newsLink = document.createElement(“h3”);
    newsLink.innerHTML = “< a href=”"+newsSources[i].link+"" target=“myIframe”>"+newsSources[i].name+"";
    newsItem.apply(newsLogo);
    newsItem.apply(newsLink);
    newsList.apply(newsItem);
    }
    thrdWrapper.apply(newsList); // really neccessary? see above
    scndWrapper.apply(thrdWrapper); // really neccessary? see above
    frstWrapper.apply(scndWrapper);
    newMainElement.apply(frstWrapper);


    I didn’t use the code block because it can’t handle \".
    In < img and < a you have to remove the space.
    id = image name, you’ll have to adapt a little, I wrote them in a more uniform style.
    alt = could be the same as the name, but I put it in as you varied a little with your alt titles.


    Oh, by the way:
    Seems like this could also be a good case for a template system.
    https://forum.magicmirror.builders/topic/2443/html-templating-system
    https://forum.magicmirror.builders/topic/5053/better-way-to-use-html-in-module-development