Optimize generated web snippets for display in basic UI

Hi all,

to enrich my sitemaps I use some generated web-snippets; as you know some of them do not fit the style well; or have elements you do not want to display on your sitemap.

Be aware that such modifications may violate the terms of use of those elements; thus check carefully first. This is only a theoretical example how this works (do not use this technique on real webpages - if it’s legally ok for private use in a home automation system I can not say).

Anyhow - below the example:

The original snipped uses different dimensions and also shows additional elements I do not want to use/see. Once you have generated your snipped embed it in a page in “\conf\html” and add it to your UI. Then you can identify the unnecessary elements with a browser in development mode (in german chrome that’s “right click > Untersuchen”) - what you need are the CSS selectors for the elements.

Then add additional style sheet info with “!important” to your container page to override the defaults; for the page above this looks like this (note - I’ve changed some UID’s - thus you need to generate your own snipped to try this):

<html>
  <head>
    <style>
      #wcom-city {
         visibility : hidden !important;
         height     : 0px !important;
         width      : 0px !important;
      }
      
      #wcom-6efa66cf5460627997c641123567-weather > div:nth-child(3) {
         visibility : hidden !important;
         height     : 0px !important;
         width      : 0px !important;
      }
      
      #wcom-6efa66cf5460627997c641123567{
         height         : 200px !important;
         padding-bottom : 0px   !important;
         padding-right  : 0px   !important;
         padding-left   : 10px  !important;
         padding-top    : 0px   !important;
      }
    </style>
  </head>
  <body>
    <div 
      id="wcom-6efa66cf5460627997c641123567" 
      style="border: 0px; background-color: transparent;" 
      class="wcom-default w300x250">
      <link rel="stylesheet" href="//static1.wetter.com/woys/5/css/w.css" media="all"> 
        <div id="wcom-city" class="wcom-city">
          <a style="color: #000" href="http://www.wetter.com/schweiz/unterehrendingen/ehrendingen/CH0CH4064001.html" target="_blank" rel="nofollow" title="Wetter Ehrendingen">Wetter Ehrendingen</a>
        </div>
        
        <div id="wcom-6efa66cf5460627997c641123567-weather"></div>
          <script type="text/javascript" src="//static1.wetter.com/woys/5/js/w.js"></script>
          <script type="text/javascript">_wcomWidget({id: 'wcom-6efa66cf5460627997c641123567',location: 'CH0CH4064001',format: '300x250',type: 'summary'});</script>
        </div>
  </body>
</html>

with kind regards,
Patrik Gfeller

P.S.: I hope that future native Android & iOS app will have improved support for web elements; as they are very powerful to enrich the experience of the automation.

1 Like