Technology Blogs by SAP
Learn how to extend and personalize SAP applications. Follow the SAP technology blog for insights into SAP BTP, ABAP, SAP Analytics Cloud, SAP HANA, and more.
cancel
Showing results for 
Search instead for 
Did you mean: 
craigcmehil
Community Administrator
Community Administrator
0 Kudos
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?