MagicMirror Forum
    • Recent
    • Tags
    • Unsolved
    • Solved
    • MagicMirror² Repository
    • Documentation
    • 3rd-Party-Modules
    • Donate
    • Discord
    • Register
    • Login
    A New Chapter for MagicMirror: The Community Takes the Lead
    Read the statement by Michael Teeuw here.

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

    Scheduled Pinned Locked Moved Development
    4 Posts 2 Posters 1.1k Views 2 Watching
    Loading More Posts
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes
    Reply
    • Reply as topic
    Log in to reply
    This topic has been deleted. Only users with topic management privileges can see it.
    • justjim1220J Offline
      justjim1220 Module Developer
      last edited by

      This post is deleted!
      1 Reply Last reply Reply Quote 0
      • justjim1220J Offline
        justjim1220 Module Developer
        last edited by

        This post is deleted!
        1 Reply Last reply Reply Quote 0
        • justjim1220J Offline
          justjim1220 Module Developer
          last edited by

          @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

          1 Reply Last reply Reply Quote 0
          • D Offline
            doubleT Module Developer
            last edited by doubleT

            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

            1 Reply Last reply Reply Quote 0
            • 1 / 1
            • First post
              Last post
            Enjoying MagicMirror? Please consider a donation!
            MagicMirror created by Michael Teeuw.
            Forum managed by Sam, technical setup by Karsten.
            This forum is using NodeBB as its core | Contributors
            Contact | Privacy Policy