I just published a post on how to customize the landing page of your HXE system but not really personalizing it so I thought – hey why not do that now.

Since I am working on the server only image and in the previous blogs I showed how to add the XSC tooling I really don’t need that block on XSA as the server only image does not have XSA.

So I decided to modify my page content and add in a section to show me the weather. I found a easy little weather script called, Simple Weather.

        <script src="js/jquery.simpleWeather.min.js"></script>
        <style>
            h1.vTitle {
                color: #ffffff;
                font-variant: small-caps;
            }
            p.eTitle {
                color: #F0AB00;
                font-variant: small-caps;
            }
            body {
              padding: 45px 25px;
              font: 13px 'Open Sans', "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
            }
            @font-face {
                font-family: 'weather';
                src: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/93/artill_clean_icons-webfont.eot');
                src: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/93/artill_clean_icons-webfont.eot?#iefix') format('embedded-opentype'),
                     url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/93/artill_clean_icons-webfont.woff') format('woff'),
                     url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/93/artill_clean_icons-webfont.ttf') format('truetype'),
                     url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/93/artill_clean_icons-webfont.svg#artill_clean_weather_iconsRg') format('svg');
                font-weight: normal;
                font-style: normal;
            }
            i {
              color: #fff;
              font-family: weather;
              font-size: 150px;
              font-weight: normal;
              font-style: normal;
              line-height: 1.0;
              text-transform: none;
            }
            #weather, #localweather {
              width: 350px;
              margin: 0px auto;
              text-align: center;
              text-transform: uppercase;
              background: #1192d3;
              color: #ffffff;
            }
            .icon-0:before { content: ":"; }
            .icon-1:before { content: "p"; }
            .icon-2:before { content: "S"; }
            .icon-3:before { content: "Q"; }
            .icon-4:before { content: "S"; }
            .icon-5:before { content: "W"; }
            .icon-6:before { content: "W"; }
            .icon-7:before { content: "W"; }
            .icon-8:before { content: "W"; }
            .icon-9:before { content: "I"; }
            .icon-10:before { content: "W"; }
            .icon-11:before { content: "I"; }
            .icon-12:before { content: "I"; }
            .icon-13:before { content: "I"; }
            .icon-14:before { content: "I"; }
            .icon-15:before { content: "W"; }
            .icon-16:before { content: "I"; }
            .icon-17:before { content: "W"; }
            .icon-18:before { content: "U"; }
            .icon-19:before { content: "Z"; }
            .icon-20:before { content: "Z"; }
            .icon-21:before { content: "Z"; }
            .icon-22:before { content: "Z"; }
            .icon-23:before { content: "Z"; }
            .icon-24:before { content: "E"; }
            .icon-25:before { content: "E"; }
            .icon-26:before { content: "3"; }
            .icon-27:before { content: "a"; }
            .icon-28:before { content: "A"; }
            .icon-29:before { content: "a"; }
            .icon-30:before { content: "A"; }
            .icon-31:before { content: "6"; }
            .icon-32:before { content: "1"; }
            .icon-33:before { content: "6"; }
            .icon-34:before { content: "1"; }
            .icon-35:before { content: "W"; }
            .icon-36:before { content: "1"; }
            .icon-37:before { content: "S"; }
            .icon-38:before { content: "S"; }
            .icon-39:before { content: "S"; }
            .icon-40:before { content: "M"; }
            .icon-41:before { content: "W"; }
            .icon-42:before { content: "I"; }
            .icon-43:before { content: "W"; }
            .icon-44:before { content: "a"; }
            .icon-45:before { content: "S"; }
            .icon-46:before { content: "U"; }
            .icon-47:before { content: "S"; }
            
            #weather h2 {
              margin: 0 0 8px;
              color: #fff;
              font-size: 30px;
              font-weight: 300;
              text-align: center;
              text-shadow: 0px 1px 3px rgba(0, 0, 0, 0.15);
            }
            
            #weather ul {
              margin: 0;
              padding: 0;
            }
            
            #weather li {
              padding: 20px;
              display: inline-block;
              border-radius: 5px;
            }
            
            #weather .currently {
              margin: 0 20px;
            }            
        </style>

That section added to the HEAD of the page. Now to the body I added in my DIV section.

        <div class="col-sm-4">
            <div class="alert alert-info" id="weather"></div>
            <br />
            <div class="alert alert-info" id="localweather" style="background: #1192d3;"></div>
            <br />
            <br />
            <br />
            <br />
            <br />

        </div>

Then finally I added at the end of the file I add in a SCRIPT section.

    <script>
        $(document).ready(function() {
            $("#localweather").hide();
            loadWeather('Lippstadt','');
            loadLocalWeather();
        });
        
        setInterval(function() {
            loadLocalWeather();
        }, 1000);
        
        function loadWeather(location, woeid) {
          $.simpleWeather({
            location: location,
            woeid: woeid,
            unit: 'c',
            success: function(weather) {
              html = '<h2><i class="icon-'+weather.code+'"></i> '+weather.temp+'&deg;'+weather.units.temp+'</h2>';

              $("#weather").html(html);
            },
            error: function(error) {
              $("#weather").html('<p>'+error+'</p>');
            }
          });
        }      
</script>

You will notice there is a second function that runs in a loop called “loadLocalWeather()” now that function I decided to add in because I wanted to get the actual temperature in my home office.

To accomplish that I followed the steps outlined in our “IoT” tutorial for SAP HANA XSC.

Then it was a matter of adding in my “loadLocalWeather()” function.

function loadLocalWeather() {
    		$.ajax({
    		  type: "GET",
    		  url: "/craigcmehil/myiot/mydata.xsodata/HISTORY?$format=json&$orderby=ID desc&$top=1",
    		  dataType: 'json',
    		  async: false,
    		  success: function (data, status){
    		      html = '<h2>'+data.d.results[0]['TEMPERATURE']+'&deg;C     '+data.d.results[0]['HUMIDITY']+'%RH</h2>';
                  $("#localweather").show();
                  $("#localweather").html(html);
    		  } 
    		}); 
        }


Of course at this point I can really just keep adding anything I want or need to my page in terms of my development needs Рsuch as linking to JIRA or to a nifty to do list.

What do you need as a developer? As a development team?

To report this post you need to login first.

Be the first to leave a comment

You must be Logged on to comment or reply to a post.

Leave a Reply