How to format time with moment.js zone() method? - momentjs

I am using moment.js v2.5, utcOffset is not available in v2.5. I only get the current user's Time.now.utc_offset //19800(UTC offset for
India) from rails backend.
Why does zone() and utcOffset() return opposite values of each other (check the snippet of code included)?
How to calculate proper time with zone() method in moment.js ?
$(document).ready(function(){
moment.suppressDeprecationWarnings = true
$('.utc span').text(moment().utcOffset());
$('.zone span').text(moment().zone());
// 19800/60 => 330
$('.india.zone span').text(moment(1519043028734).zone(330).format('HH:mm'))
$('.india.utc span').text(moment(1519043028734). utcOffset(330).format('HH:mm'))
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.20.1/moment.min.js"></script>
<p class="zone">Zone: <span></span></p>
<p class="utc">UTC: <span></span></p>
<p class="india zone">Zone:<span></span></p>
<p class="india utc">UTC:<span></span></p>

utcOffset:
Get the UTC offset in minutes.
Note: Unlike moment.fn.zone this function returns the real offset from UTC, not the reverse offset (as returned by Date.prototype.getTimezoneOffset).
So, basically, zone() has the same output of Date.prototype.getTimezoneOffset:
The time-zone offset is the difference, in minutes, between UTC and local time. Note that this means that the offset is positive if the local timezone is behind UTC and negative if it is ahead. For example, for time zone UTC+10:00 (Australian Eastern Standard Time, Vladivostok Time, Chamorro Standard Time), -600 will be returned.
To get proper time with zone() you can simply change sign to your offset (e.g. -330 instead of 300)
$(document).ready(function(){
moment.suppressDeprecationWarnings = true
$('.utc span').text(moment().utcOffset());
$('.zone span').text(moment().zone());
// 19800/60 => 330
$('.india.zone span').text(moment(1519043028734).zone(330*-1).format('HH:mm'))
$('.india.utc span').text(moment(1519043028734). utcOffset(330).format('HH:mm'))
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.20.1/moment.min.js"></script>
<p class="zone">Zone: <span></span></p>
<p class="utc">UTC: <span></span></p>
<p class="india zone">Zone:<span></span></p>
<p class="india utc">UTC:<span></span></p>

Related

How can I change text for 60 days through scripting?

I'm kind of new at programming so bear with me because this is probably easy to solve but I just don't really have much practise.
I've been working on an automatic "daily tip" system, with tips each day for the first 3 months (60 days).
Basically a code that changes text every day for 60 days. After the 60 days, the idea I had was for the code to to reset and go back to the first tip, on the first day.
However, I can't seem to find a way to make the code place a different text when it gets back to sunday (0). It displays the first text again, instead of the second text I had planned.
I have no idea how to make it and have been stuck for 3 days thinking about this. I heard about these forums and decided to give it a go.
I don't know if I was clear, but if not, the idea is basically to:
if - Week1, sunday(0): Tecna: Need any guidance with our website? Visit the forums! They're the most practical way to get help from people just like you, as well as from the minimods! Plus, you get virtual coins for each message you post!
if - Week 2, sunday(0): Tecna: According to cyberpsychology, the nickname and avatar you chose and represent yourself with on the web can tell others a lot about you. So, choose carefully!
If you guys could find a way to make this work, I'd be very, very grateful! I have been browsing different topics related to this, but none attempted a text change if the week ends, resetting after 7 days. I want it to reset after 60.
function Horoscopo() {
var data = new Date();
var dia = data.getDay()
var mes = data.getMonth()
var diames = data.getDate()
// Weekly Tips
if (dia == 0) {
$("strong.tip").html("<span class='formalFont'>Why do you hear the sea in a seashell? Abandoned by the mollusks and other undersea animals, shells can be put up against your ear. The ambient noise around the shell will resonate inside the shell, creating a sound similar to crashing waves!</span>");
}
if (dia == 1) {
$("strong.tip").html("<span class='formalFont'>Need any guidance with our website? Visit the forums! They're the most practical way to get help from people just like you, as well as from the minimods! Plus, you get virtual coins for each message you post!</span>");
}
if (dia == 2) {
$("strong.tip").html("<span class='formalFont'>The forums are the best hangout spots to spend time with friends! Endless chats, tons of games, contests, stories... there's just so much fun! I don't even know where to begin!</span>");
}
if (dia == 3) {
$("strong.tip").html("<span class='formalFont'>Put your feet in the spotlight! I have two choices for you: round toe boots from the 60s, with a low heel or wedge -- or heels wrapped in soft legwarmers!</span>");
}
if (dia == 4) {
$("strong.tip").html("<span class='formalFont'>Vain Pirates? Not exactly! Pirates wore earrings because they believed piercing the ear could improve eyesight. It also helped them be recognized after death!</span>");
}
if (dia == 5) {
$("strong.tip").html("<span class='formalFont'>What's the largest city in the world? It's Tokyo, the capital of Japan with a staggering 35.7 million people! Second is New York, followed by Sao Paulo and Seoul!</span>");
}
if (dia == 6) {
$("strong.tip").html("<span class='formalFont'>The plants need plenty of water this season! Whatever you do, don't water them when the sun is high in the sky, that causes the leaves to burn! The ideal time is around sunset.</span>");
}
</script>
<body onload="Horoscopo();">
<div style="width:200px; float:left; padding-bottom:10px;">
<div style="padding-bottom:0px;">
<div style="background:url(../medias/images/Horoscope/totd_stella.png); width:207px; height:auto; background-repeat:no-repeat; background-color:#78cce4;">
<table style="border: 0px; cellpadding: 0px; cellspacing: 0px">
<tbody>
<tr>
<td>
<div class="menuBlackFont" style="text-align: left; color:#FFFFFF; padding-top: 5px; padding-left: 10px; padding-bottom: 120px;">
<span>Tip of the Day</span>
</div>
<div style="background:url(../medias/images/Horoscope/speech_bubble_top.png); width:200px; height:33px;">
</div>
<div style="background:url(../medias/images/Horoscope/speech_bubble_center.png);
width:200px; background-repeat:repeat-y;">
<div style="padding-left:15px; padding-right:15px;">
<strong class="tip"><span class="formalFont"></span></strong>
</div>
</div>
<div style="background:url(../medias/images/Horoscope/speech_bubble_bottom.png); width:200px; height:25px;"></div>
</td>
</tr>
</tbody>
</table>
</div>
<p></p>
</div>

HERE Map Tile Labels only using specified language at certain zoom levels?

We are using HERE JS API to show a HERE map widget on our site. We need specify a specific language for the map tiles, so we found this API reference that says we can send in a map tile language on creation of the defaultLayers.
ex: this doc, though we did find we had to use "lg" instead of "lang".
We pass in the language on layer creation as follows:
var maptypes = platform.createDefaultLayers({
tileSize: devicePixelRatio > 1 ? 512 : 256,
ppi: devicePixelRatio > 1 ? 320 : 72,
lg: "hin"
});
It seems to partially work. At farther away zoom levels, I can see the labels are in Hindi. However, sometimes when I zoom in or out, the labels become romanized English characters. Is this expected behavior? Is there any way I can resolve this?
Hindi showing up initially:
English showing up in labels when zoomed in by minimal amount:
These are the versions we are using:
<script src="https://js.api.here.com/v3/3.0/mapsjs-core.js" type="text/javascript" charset="utf-8"></script>
<script src="https://js.api.here.com/v3/3.0/mapsjs-service.js" type="text/javascript" charset="utf-8"></script>
<script src="https://js.api.here.com/v3/3.0/mapsjs-ui.js" type="text/javascript" charset="utf-8"></script>
<script src="https://js.api.here.com/v3/3.0/mapsjs-mapevents.js" type="text/javascript" charset="utf-8"></script>
As you have already figured out in order to change the language of the map tiles you need to pass the lg parameter. It is stated in the HERE Map Tile API documentation.
The MARC three-letter language code for requesting a map tile rendered in a specific language. If the given language is not available, the default language eng is used.
So that is why specifying lg=hin won't show absolutely all labels in that language.
About createDefaultLayers method. So you can call it by passing several arguments or an object. Example:
const tileSize = devicePixelRatio > 1 ? 512 : 256;
const ppi = devicePixelRatio > 1 ? 320 : 72;
platform.createDefaultLayers(tileSize, ppi, "hin");
or (mind the ES6 object initialiser notation)
platform.createDefaultLayers({tileSize, ppi, lg: "hin"});
Try with the following dependencies
<link rel="stylesheet" type="text/css" href="https://js.cit.api.here.com/v3/3.0/mapsjs-ui.css?dp-version=1549984893" />
<script type="text/javascript" src="https://js.cit.api.here.com/v3/3.0/mapsjs-service.js"></script>
<script type="text/javascript" src="https://js.cit.api.here.com/v3/3.0/mapsjs-ui.js"></script>
<script type="text/javascript" src="https://js.cit.api.here.com/v3/3.0/mapsjs-mapevents.js"></script>
<script type="text/javascript" src="https://js.cit.api.here.com/v3/3.0/mapsjs-clustering.js"></script>
<script type="text/javascript" src="https://js.cit.datalens.api.here.com/latest/mapsjs-datalens.js"></script>

How does the asset schema property work with img assets?

I am trying to pass an image as an asset property type to some other component (so that either a #selector or a url(url) can be passed) but it seems to take in the entire html component, instead of just the url.
<!DOCTYPE html>
<html>
<head>
<title>Hello, WebVR! - A-Frame</title>
<meta name='description' content='Hello, WebVR! - A-Frame'>
<script src='../../global/js/aframe-v0.8.0.min.js'></script>
<script>
AFRAME.registerComponent('some-component', {
schema: {
image: {type:'asset', default:''},
model: {type:'asset', default:''}
},
init: function() {
console.log(this.data.image); //prints out <img id="SomeImage" src="../../someDir/someFile.jpg">
console.log(this.data.model); //prints out '../../someDir/someModel.gltf'
}
});
</script>
</head>
<body>
<a-scene >
<a-assets timeout='3000'>
<!-- this works as an asset no problem -->
<a-asset-item id='SomeModel' src='../../global/assets/models/gltf/UserHead/UserHead.gltf'></a-asset-item>
<!-- this does not pass as an asset but rather an html element -->
<img id='SomeImage' src='../../global/assets/textures/equirectangular/CloudySky.jpg'>
</a-assets>
<a-entity some-component='image:#SomeImage; model:#SomeModel;'></a-entity>
</a-scene>
</body>
</html>
Thought I might look to see how A-Frame handles this in the material component can't see where does the 'src' property on material come from?
<a-entity id='skyBox'
geometry='primitive:sphere; radius:50; segments-height:6; segments-width:6;'
material='shader:flat; src:#skyMap; side:back; height:2048; width:2048'>
</a-entity>
Material component (can't see src): https://github.com/aframevr/aframe/blob/master/src/components/material.js
Thanks!
EDIT:
As per Piotr's discoveries below it looks like images are handed as a special case, as can be in the src code here with frame 0.8.0 where an image source is handed like this:
hash: function (data) {
if (data.src.tagName) {
// Since `data.src` can be an element, parse out the string if necessary for the hash.
data = utils.extendDeep({}, data);
data.src = data.src.src;
}
return JSON.stringify(data);
},
So basically if an image we the asset property will not handle image's properly and an additional step of grabbing the url from it via
data.src.src
OR
data.src.getAttribute('src');
Please correct me if i'm wrong, but i think it's not in the material schema.
I think the devil's in the component.js, which not only seems to allow you to assign a value to any given property, but also has the constructor for any component, and parses the schema.
That being said, the material does not need a src in the schema, as it seems to be a part of every component. Furthermore there are multiple parsers like the assetParse, or src-loader, checking whether an attribute is a html element, or even a video / image asset.
As for the material part, check out the dist source code, where
I think what you're looking for is:
module.exports.updateMapMaterialFromData
where you can see a-frame team uses the data.src for the material, and updates the texture with it. Just give it a ctrl+F (only 3 hits).
So when
module.exports.updateMapMaterialFromData('map', 'src', shader, data);
is called, with the given definition:
module.exports.updateMapMaterialFromData = function (materialName, dataName, shader, data) {
var el = shader.el;
var material = shader.material;
var src = data[dataName];
.......
makes src = data[src] => they make updates using a local variable src.
Also you can see the src-loader in action where the material system is registered, and when a src attribute is found out, the validateSrc function fires one of the two callbacks:
utils.srcLoader.validateSrc(src, loadImageCb, loadVideoCb);

Embedded Google calendar : how to set range of hours to display?

Given the following embedding code:
<iframe src="https://www.google.com/calendar/embed?
title=2014 PLIDAM International Symposium (Paris)&
dates=20140611/20140615&
mode=WEEK&
showNav=1&
showDate=1&
showPrint=1&
showTabs=1&
showCalendars=0&
showTz=1;
height=600&
wkst=2&
bgcolor=%23666666&
src=vdfmfbp0msroletduigs2qtkoc%40group.calendar.google.com&
color=%232952A3&
ctz=Europe%2FParis"
style=" border:solid 1px #777 " width="800" height="600" frameborder="0" scrolling="no"></iframe>
Is there a parameter to set the hours to display/focus_on from 09:00 to 18:00 (6pm), aka the working hours ? Same for days, is there someways to just display/focus_on the rights 4 days only.
Fiddle here
There doesn't appear to be a way to do this through the API, currently. I would use javascript/jQuery to remove the elements you don't want to show in the DOM after the iframe has finished loading.
So, you could delete the Wednesday column, if you know the column index, by something like this:
$("tr").each(function() {
$(this).filter("td:eq(3)").remove();
});
You can also scroll a specific div into view:
https://stackoverflow.com/a/4884904/5129424
$("#myImage")[0].scrollIntoView();

Google Visualization and Plone - "e[0].K is undefined" error message

I just posted this in the Google Visualization group, but I thought I would reach out to the Plone community as well for help.
I am using Plone 4.2.4 and wanted to integrate Google Charts with an Oracle back end via cx_Oracle. There is already a very nice package called EEA.Daviz. However, it was way more than I needed and I thought I could do it on my own, so I created some page templates and Python code that wraps the Javascript. On my laptop (Mac OS X) it all worked fine.
However, once I pushed it to my server (SLES 10), BarCharts stopped working. I have only tested Bar, Line and Motion charts. All I get is a red error box that says "e[0].K is undefined". After googling around, I found a very similar description of my problem that suggests it is a Google Visualization error and the fix is to change the width and height properties. However, changing the height or width did not fix it. What is very strange is that, if I copy the example JS from the BarChart page and copy it into a vanilla Zope Page Template, it works just fine. However, once I wrap it in the master template, I get the red error message again.
So I am confused. I have the same theme installed on my laptop and it did not give me any problems. I know I can display BarCharts on the server without the theme in a vanilla Page Template.
Can anyone point me in the right direction?
ZPT that Works:
<html>
<head>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script>
google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['COUNTRY', ' COUNT'],
['Austria', 19],
['Belgium', 73],
['Bulgaria', 20]]
); var options = {
title: 'Test Bar Chart'}; var chart = new google.visualization.BarChart(document.getElementById('chart_div'));
chart.draw(data, options);}
</script>
</head>
<body>
<div id="chart_div" style="width: 900px; height: 1000px;"></div>
</body>
</html>
ZPT that does NOT work:
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"
xmlns:tal="http://xml.zope.org/namespaces/tal"
xmlns:metal="http://xml.zope.org/namespaces/metal"
xmlns:i18n="http://xml.zope.org/namespaces/i18n"
lang="en"
metal:use-macro="context/main_template/macros/master"
i18n:domain="plone">
<metal:main fill-slot="javascript_head_slot">
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script>
google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['COUNTRY', ' COUNT'],
['Austria', 19],
['Belgium', 73],
['Bulgaria', 20]]
); var options = {
title: 'Test Bar Chart'}; var chart = new google.visualization.BarChart(document.getElementById('chart_div'));
chart.draw(data, options);}
</script>
</metal:main>
<body>
<metal:main fill-slot="main">
<tal:main-macro metal:define-macro="main">
<div id="chart_div" style="width: 900px; height: 1000px;"></div>
</tal:main-macro>
</metal:main>
</body>
</html>
I've tested your second example and it seems to work as intended so maybe there is something wrong with your data coming from Oracle (format, missing values, etc). You'll have to do some JS debugging out there. Try adding a breakpoint to see what e[0] is and why it doesn't have the K attribute (or why e is an empty Array).
Also, EEA Daviz is a bundle that brings together multiple Visualization frameworks (Google Charts, Simile Exhibit and in the near future Highcharts) but you can always use one or more of its components without bringing in the entire plane Thus, you should also try EEA Google Charts. Don't forget that you'll need collective.js.jqueryui < 1.9 for Plone 4.2.x

Resources