AmCharts4 - Unable to load file - external JSON file produced from SQL database - json
I'm struggling to open my json arranged data in AmCharts4. In my previous charts I used very simple script (chart.data = ;), which unfortunately does not work this time. So I'm using chart.dataSource.url function proposed by AmCharts documentation. When, I load example file found on web everything works fine, as soon as I switch to my file the chart is not able to load file. I'm not able to find a similar problem on web, therefore I would be very grateful for help.
Here is my example with working url and my not working file.
Thanks in advance:
<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script src="https://www.amcharts.com/lib/4/core.js"></script>
<script src="https://www.amcharts.com/lib/4/charts.js"></script>
<script src="https://www.amcharts.com/lib/4/themes/animated.js"></script>
<style>
</style>
</head>
<body>
<div id="chartdiv"></div>
</body>
</html>
<!-- Styles -->
<style>
#chartdiv {
width: 100%;
height: 500px;
}
</style>
<!-- Resources -->
<script src="https://cdn.amcharts.com/lib/4/core.js"></script>
<script src="https://cdn.amcharts.com/lib/4/charts.js"></script>
<script src="https://cdn.amcharts.com/lib/4/themes/animated.js"></script>
<!-- Chart code -->
<script>
am4core.ready(function() {
// Themes begin
am4core.useTheme(am4themes_animated);
// Themes end
var chart = am4core.create('chartdiv', am4charts.XYChart)
// Modify chart's colors
chart.colors.list = [
am4core.color("#264B29"),
am4core.color("#94B255"),
am4core.color("#456C39"),
am4core.color("#C4D563"),
am4core.color("#698F47"),
am4core.color("#F9F871"),
];
chart.legend = new am4charts.Legend()
chart.legend.position = 'top'
chart.legend.paddingBottom = 20
chart.legend.labels.template.maxWidth = 95
var xAxis = chart.xAxes.push(new am4charts.CategoryAxis())
xAxis.dataFields.category = 'year'
xAxis.renderer.cellStartLocation = 0.1
xAxis.renderer.cellEndLocation = 0.9
xAxis.renderer.grid.template.location = 0;
var yAxis = chart.yAxes.push(new am4charts.ValueAxis());
function createSeries(value, name) {
var series = chart.series.push(new am4charts.ColumnSeries())
series.dataFields.valueY = value
series.dataFields.categoryX = 'year'
series.name = name
series.events.on("hidden", arrangeColumns);
series.events.on("shown", arrangeColumns);
var bullet = series.bullets.push(new am4charts.LabelBullet())
bullet.interactionsEnabled = false
bullet.dy = 30;
bullet.label.text = '{valueY}'
bullet.label.fill = am4core.color('#ffffff')
return series;
}
// Add data
//Working url
//chart.dataSource.url = "https://s3-us-west-2.amazonaws.com/s.cdpn.io/t-160/sample_data_serial.json";
//My SQL produced JSON file is not working
chart.dataSource.url = "data/my-file.php";
chart.dataSource.adapter.add("parsedData", function(data) {
var newData = [];
data.forEach(function(dataItem) {
var newDataItem = {};
Object.keys(dataItem).forEach(function(key) {
if (typeof dataItem[key] === "object") {
newDataItem["_id"] = dataItem[key]["#id"];
dataItem[key]["Column"].forEach(function(dataItem) {
newDataItem[dataItem["#name"]] = dataItem["#id"];
});
} else {
newDataItem[key] = dataItem[key];
}
});
newData.push(newDataItem);
});
data = newData;
return data;
});
createSeries('cars', 'The First');
createSeries('motorcycles', 'The Second');
createSeries('bicycles', 'The Third');
//createSeries('bilanca_lsk_lst', 'T4');
function arrangeColumns() {
var series = chart.series.getIndex(0);
var w = 1 - xAxis.renderer.cellStartLocation - (1 - xAxis.renderer.cellEndLocation);
if (series.dataItems.length > 1) {
var x0 = xAxis.getX(series.dataItems.getIndex(0), "yearX");
var x1 = xAxis.getX(series.dataItems.getIndex(1), "yearX");
var delta = ((x1 - x0) / chart.series.length) * w;
if (am4core.isNumber(delta)) {
var middle = chart.series.length / 2;
var newIndex = 0;
chart.series.each(function(series) {
if (!series.isHidden && !series.isHiding) {
series.dummyData = newIndex;
newIndex++;
}
else {
series.dummyData = chart.series.indexOf(series);
}
})
var visibleCount = newIndex;
var newMiddle = visibleCount / 2;
chart.series.each(function(series) {
var trueIndex = chart.series.indexOf(series);
var newIndex = series.dummyData;
var dx = (newIndex - trueIndex + middle - newMiddle) * delta
series.animate({ property: "dx", to: dx }, series.interpolationDuration, series.interpolationEasing);
series.bulletsContainer.animate({ property: "dx", to: dx }, series.interpolationDuration, series.interpolationEasing);
})
}
}
}
});
// end am4core.ready()
</script>
I found a typing error in my-file.php
Anyhow, after I solved typing issue the chart.dataSource.url function still did not work, but It worked using next php include script.
chart.data = <?php include './data/my-file.php'; ?>;
Related
How to close a docking panel when opening a new instance in the autodesk forge viewer api?
I have been displaying data attached to a few nodes in the viewer using a custom docking panel. I have attached the listener event on the click of those nodes and instantiating a new docking panel instance.
It works fine. New custom panel get's displayed every time I click on a node. There is a close handler attached to the close button which closes the panel.
But, how can I close the existing panel before opening a new one? I tried to initialize the viewer with initializeCloseHandler so that wherever clicked the opened docking panel closes. But it's not working. I am unable to get the viewer instance there.
Now both instances get added one above another. I am attaching a screenshot of it for reference - https://i.stack.imgur.com/lT5Y1.png
How can I achieve this? This is what I have tried so far,
Sample code:
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1, user-scalable=no" />
<meta charset="utf-8">
<link rel="stylesheet" href="https://developer.api.autodesk.com/modelderivative/v2/viewers/7.*/style.min.css" type="text/css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://developer.api.autodesk.com/modelderivative/v2/viewers/7.*/viewer3D.min.js"></script>
<style>
body {
margin: 0;
}
#forgeViewer {
width: 100%;
height: 100%;
margin: 0;
background-color: #F0F8FF;
}
</style>
</head>
<body>
<div id="forgeViewer"></div>
</body>
<script>
var viewer;
var options = {
env: 'AutodeskProduction',
api: 'derivativeV2', // for models uploaded to EMEA change this option to 'derivativeV2_EU'
getAccessToken: function(onTokenReady) {
var token = 'access token here';
var timeInSeconds = 3600; // Use value provided by Forge Authentication (OAuth) API
onTokenReady(token, timeInSeconds);
}
};
SimplePanel = function(parentContainer, id, title, content, x, y)
{
this.content = content;
Autodesk.Viewing.UI.DockingPanel.call(this, parentContainer, id, title,{shadow:false});
// Auto-fit to the content and don't allow resize. Position at the coordinates given.
//
this.container.style.height = "250px";
this.container.style.width = "450px";
this.container.style.resize = "auto";
this.container.style.left = x + "px";
this.container.style.top = y + "px";
this.container.style.zIndex = 2;
};
SimplePanel.prototype = Object.create(Autodesk.Viewing.UI.DockingPanel.prototype);
SimplePanel.prototype.constructor = SimplePanel;
SimplePanel.prototype.initialize = function()
{
this.title = this.createTitleBar(this.titleLabel || this.container.id);
this.container.appendChild(this.title);
this.container.appendChild(this.content);
this.initializeMoveHandlers(this.container);
this.closer = document.createElement("span");
this.closer = this.createCloseButton();
this.initializeCloseHandler(this.closer);
this.container.appendChild(this.closer);
var op = {left:false,heightAdjustment:45,marginTop:0};
this.scrollcontainer = this.createScrollContainer(op);
// console.log("id - "+viewer.model.getFragmentList().fragments.fragId2dbId);
console.log(viewer.getSelection());
var id = viewer.getSelection();
var dataItem;
var data = [
{
id:"2648",
name:"Chiller",
temp:"300 deg",
serviceReq:true,
reservations:"3"
},
{
id:"2228",
name:"Door",
temp:"150 deg",
serviceReq:false,
reservations:"4"
},
{
id:"2198",
name:"Cooler",
temp:"400 deg",
serviceReq:true,
reservations:"2"
}
]
data.forEach(item => {
if(item.id == id){
dataItem = item;
}
})
var html = [
'<div class="uicomponent-panel-controls-container">',
'<div class="panel panel-default">',
'<table class="table table-hover table-responsive" id = "clashresultstable">',
'<thead>',
'<th>Key</th><th>Value</th>',
'</thead>',
'<tbody>',
'<tr><td>ID</td><td>'+dataItem.id+'</td></tr>',
'<tr><td>Name</td><td>'+dataItem.name+'</td></tr>',
'<tr><td>Temperature</td><td>'+dataItem.temp+'</td></tr>',
'<tr><td>Service Requests</td><td>'+dataItem.serviceReq+'</td></tr>',
'<tr><td>Reservations</td><td>'+dataItem.reservations+'</td></tr>',
'</tbody>',
'</table>',
'</div>',
'</div>'
].join('\n');
$(this.scrollContainer).append(html);
this.initializeMoveHandlers(this.title);
};
Autodesk.Viewing.Initializer(options, function() {
var htmlDiv = document.getElementById('forgeViewer');
viewer = new Autodesk.Viewing.GuiViewer3D(htmlDiv);
var startedCode = viewer.start();
if (startedCode > 0) {
console.error('Failed to create a Viewer: WebGL not supported.');
return;
}
console.log('Initialization complete, loading a model next...');
});
var documentId = 'urn:(urn)';
Autodesk.Viewing.Document.load(documentId, onDocumentLoadSuccess, onDocumentLoadFailure);
function onDocumentLoadSuccess(viewerDocument) {
var defaultModel = viewerDocument.getRoot().getDefaultGeometry();
viewer.loadDocumentNode(viewerDocument, defaultModel);
viewer.addEventListener( Autodesk.Viewing.SELECTION_CHANGED_EVENT, event=>{
var content = document.createElement('div');
var mypanel = new SimplePanel(NOP_VIEWER.container,'mypanel','My Panel',content,20,20);
mypanel.setVisible(true);
})
}
// function closer(){ -- tried to attach this handler to the viewer instance,but didn't work
// SimplePanel.setVisible(false);
// }
function onDocumentLoadFailure() {
console.error('Failed fetching Forge manifest');
}
</script>
</html>````
[1]: https://i.stack.imgur.com/lT5Y1.png
I would advise you to use a viewer extension to manage your panel in order to reuse the same panel instance. Here are some examples for you:
https://github.com/yiskang/forge-au-sample/blob/master/properties/scripts/AdnPropsPanel.js
https://github.com/yiskang/forge-au-sample/blob/master/model-structure/scripts/AdnStructurePanel.js
If you don't want to implement an extension, you may store the mypanel variable somewhere, and use if statement to destroy the old panel before creating a new one.
var mypanel = null;
// Other code snippet
viewer.addEventListener( Autodesk.Viewing.SELECTION_CHANGED_EVENT, event=> {
if( mypanel != null ) {
//NOP_VIEWER.container.removeChild( mypanel.container );
mypanel.uninitialize();
mypanel = null;
}
var content = document.createElement('div');
mypanel = new SimplePanel(NOP_VIEWER.container,'mypanel','My Panel',content,20,20);
mypanel.setVisible( true );
})
Hope it helps!
How to syncronize iframes (html5-banner)?
I would like to synchronize two advertising banners (html5) on a website. The banners are displayed in iframes. I have unfortunately only access to the code of the two banner. I'm trying to use localconnection.js
The html5 banner I create with adobe animate. My two test banners contain a very simple animation. The one banner is a little shorter, in order to demonstrate the temporal "diverge" with different banners. The animation of the right banner I stopped in the first picture (directly behind the Connect) - which should then be "pushed" from the left banner. Is that right? And if so, how do I do that?
HTML - Banner 1:
<!DOCTYPE html>
<!--
NOTES:
1. All tokens are represented by '$' sign in the template.
2. You can write your code only wherever mentioned.
3. All occurrences of existing tokens will be replaced by their appropriate values.
4. Blank lines will be removed automatically.
5. Remove unnecessary comments before creating your template.
-->
<html>
<head>
<meta charset="UTF-8">
<meta name="authoring-tool" content="Adobe_Animate_CC">
<title>sky1</title>
<!-- write your code here -->
<script src="https://code.createjs.com/createjs-2015.11.26.min.js"></script>
<script src="sky1.js"></script>
<script src="localconnection.js"></script>
<script>
var canvas, stage, exportRoot;
function init() {
canvas = document.getElementById("canvas");
handleComplete();
}
function handleComplete() {
//This function is always called, irrespective of the content. You can use the variable "stage" after it is created in token create_stage.
exportRoot = new lib.sky1();
stage = new createjs.Stage(canvas);
stage.addChild(exportRoot);
//Registers the "tick" event listener.
createjs.Ticker.setFPS(lib.properties.fps);
createjs.Ticker.addEventListener("tick", stage);
//Code to support hidpi screens and responsive scaling.
(function(isResp, respDim, isScale, scaleType) {
var lastW, lastH, lastS=1;
window.addEventListener('resize', resizeCanvas);
resizeCanvas();
function resizeCanvas() {
var w = lib.properties.width, h = lib.properties.height;
var iw = window.innerWidth, ih=window.innerHeight;
var pRatio = window.devicePixelRatio || 1, xRatio=iw/w, yRatio=ih/h, sRatio=1;
if(isResp) {
if((respDim=='width'&&lastW==iw) || (respDim=='height'&&lastH==ih)) {
sRatio = lastS;
}
else if(!isScale) {
if(iw<w || ih<h)
sRatio = Math.min(xRatio, yRatio);
}
else if(scaleType==1) {
sRatio = Math.min(xRatio, yRatio);
}
else if(scaleType==2) {
sRatio = Math.max(xRatio, yRatio);
}
}
canvas.width = w*pRatio*sRatio;
canvas.height = h*pRatio*sRatio;
canvas.style.width = w*sRatio+'px';
canvas.style.height = h*sRatio+'px';
stage.scaleX = pRatio*sRatio;
stage.scaleY = pRatio*sRatio;
lastW = iw; lastH = ih; lastS = sRatio;
}
})(false,'both',false,1);
}
</script>
<!-- write your code here -->
</head>
<body onload="init();" style="margin:0px;">
<canvas id="canvas" width="200" height="668" style="display: block; background-color:rgba(255, 255, 255, 1.00)"></canvas>
</body>
</html>
js - Banner 1:
(function (lib, img, cjs, ss) {
var p; // shortcut to reference prototypes
lib.webFontTxtInst = {};
var loadedTypekitCount = 0;
var loadedGoogleCount = 0;
var gFontsUpdateCacheList = [];
var tFontsUpdateCacheList = [];
// library properties:
lib.properties = {
width: 200,
height: 668,
fps: 24,
color: "#FFFFFF",
opacity: 1.00,
webfonts: {},
manifest: []
};
lib.ssMetadata = [];
lib.updateListCache = function (cacheList) {
for(var i = 0; i < cacheList.length; i++) {
if(cacheList[i].cacheCanvas)
cacheList[i].updateCache();
}
};
lib.addElementsToCache = function (textInst, cacheList) {
var cur = textInst;
while(cur != exportRoot) {
if(cacheList.indexOf(cur) != -1)
break;
cur = cur.parent;
}
if(cur != exportRoot) { //we have found an element in the list
var cur2 = textInst;
var index = cacheList.indexOf(cur);
while(cur2 != cur) { //insert all it's children just before it
cacheList.splice(index, 0, cur2);
cur2 = cur2.parent;
index++;
}
}
else { //append element and it's parents in the array
cur = textInst;
while(cur != exportRoot) {
cacheList.push(cur);
cur = cur.parent;
}
}
};
lib.gfontAvailable = function(family, totalGoogleCount) {
lib.properties.webfonts[family] = true;
var txtInst = lib.webFontTxtInst && lib.webFontTxtInst[family] || [];
for(var f = 0; f < txtInst.length; ++f)
lib.addElementsToCache(txtInst[f], gFontsUpdateCacheList);
loadedGoogleCount++;
if(loadedGoogleCount == totalGoogleCount) {
lib.updateListCache(gFontsUpdateCacheList);
}
};
lib.tfontAvailable = function(family, totalTypekitCount) {
lib.properties.webfonts[family] = true;
var txtInst = lib.webFontTxtInst && lib.webFontTxtInst[family] || [];
for(var f = 0; f < txtInst.length; ++f)
lib.addElementsToCache(txtInst[f], tFontsUpdateCacheList);
loadedTypekitCount++;
if(loadedTypekitCount == totalTypekitCount) {
lib.updateListCache(tFontsUpdateCacheList);
}
};
// symbols:
(lib.Symbol1 = function(mode,startPosition,loop) {
this.initialize(mode,startPosition,loop,{});
// Ebene 1
this.shape = new cjs.Shape();
this.shape.graphics.f("#990033").s().p("AvyMwIAA5fIflAAIAAZfg");
this.shape.setTransform(101.1,81.7);
this.timeline.addTween(cjs.Tween.get(this.shape).wait(1));
}).prototype = p = new cjs.MovieClip();
p.nominalBounds = new cjs.Rectangle(0,0,202.3,163.4);
// stage content:
(lib.sky1 = function(mode,startPosition,loop) {
this.initialize(mode,startPosition,loop,{});
// timeline functions:
this.frame_0 = function() {
LC.key = '123';
LC.name = 'links';
LC.frames = 'rechts';
LC.onConnect = function () {
console.log('Do this as soon as connection established!');
LC.rechts.document.getElementsByTagName('body')[0].style.backgroundColor = 'red';
};
LC.connect();
}
// actions tween:
this.timeline.addTween(cjs.Tween.get(this).call(this.frame_0).wait(203));
// animation
this.instance = new lib.Symbol1();
this.instance.parent = this;
this.instance.setTransform(100,80.6,1,1,0,0,0,101.1,81.7);
this.timeline.addTween(cjs.Tween.get(this.instance).wait(1).to({x:100.1,y:85.7},0).wait(1).to({y:90.8},0).wait(1).to({y:95.9},0).wait(1).to({y:101},0).wait(1).to({y:106.1},0).wait(1).to({y:111.3},0).wait(1).to({y:116.4},0).wait(1).to({y:121.5},0).wait(1).to({y:126.6},0).wait(1).to({x:100.2,y:131.7},0).wait(1).to({y:136.8},0).wait(1).to({y:141.9},0).wait(1).to({y:147},0).wait(1).to({y:152.1},0).wait(1).to({y:157.2},0).wait(1).to({y:162.3},0).wait(1).to({y:167.4},0).wait(1).to({y:172.6},0).wait(1).to({x:100.3,y:177.7},0).wait(1).to({y:182.8},0).wait(1).to({y:187.9},0).wait(1).to({y:193},0).wait(1).to({y:198.1},0).wait(1).to({y:203.2},0).wait(1).to({y:208.3},0).wait(1).to({y:213.4},0).wait(1).to({y:218.5},0).wait(1).to({x:100.4,y:223.6},0).wait(1).to({y:228.7},0).wait(1).to({y:233.9},0).wait(1).to({y:239},0).wait(1).to({y:244.1},0).wait(1).to({y:249.2},0).wait(1).to({y:254.3},0).wait(1).to({y:259.4},0).wait(1).to({y:264.5},0).wait(1).to({x:100.5,y:269.6},0).wait(1).to({y:274.7},0).wait(1).to({y:279.8},0).wait(1).to({y:284.9},0).wait(1).to({y:290.1},0).wait(1).to({y:295.2},0).wait(1).to({y:300.3},0).wait(1).to({y:305.4},0).wait(1).to({y:310.5},0).wait(1).to({x:100.6,y:315.6},0).wait(1).to({y:320.7},0).wait(1).to({y:325.8},0).wait(1).to({y:330.9},0).wait(1).to({y:336},0).wait(1).to({y:341.1},0).wait(1).to({y:346.2},0).wait(1).to({y:351.4},0).wait(1).to({y:356.5},0).wait(1).to({x:100.7,y:361.6},0).wait(1).to({y:366.7},0).wait(1).to({y:371.8},0).wait(1).to({y:376.9},0).wait(1).to({y:382},0).wait(1).to({y:387.1},0).wait(1).to({y:392.2},0).wait(1).to({y:397.3},0).wait(1).to({y:402.4},0).wait(1).to({x:100.8,y:407.5},0).wait(1).to({y:412.7},0).wait(1).to({y:417.8},0).wait(1).to({y:422.9},0).wait(1).to({y:428},0).wait(1).to({y:433.1},0).wait(1).to({y:438.2},0).wait(1).to({y:443.3},0).wait(1).to({y:448.4},0).wait(1).to({x:100.9,y:453.5},0).wait(1).to({y:458.6},0).wait(1).to({y:463.7},0).wait(1).to({y:468.9},0).wait(1).to({y:474},0).wait(1).to({y:479.1},0).wait(1).to({y:484.2},0).wait(1).to({y:489.3},0).wait(1).to({y:494.4},0).wait(1).to({x:101,y:499.5},0).wait(1).to({y:504.6},0).wait(1).to({y:509.7},0).wait(1).to({y:514.8},0).wait(1).to({y:519.9},0).wait(1).to({y:525},0).wait(1).to({y:530.2},0).wait(1).to({y:535.3},0).wait(1).to({y:540.4},0).wait(1).to({x:101.1,y:545.5},0).wait(1).to({y:550.6},0).wait(1).to({y:555.7},0).wait(1).to({y:560.8},0).wait(1).to({y:565.9},0).wait(1).to({y:571},0).wait(1).to({y:576.1},0).wait(1).to({y:581.2},0).wait(1).to({y:586.4},0).wait(1).to({y:581.5},0).wait(1).to({y:576.6},0).wait(1).to({y:571.7},0).wait(1).to({y:566.8},0).wait(1).to({y:561.9},0).wait(1).to({y:557},0).wait(1).to({y:552.1},0).wait(1).to({y:547.2},0).wait(1).to({y:542.3},0).wait(1).to({y:537.4},0).wait(1).to({y:532.5},0).wait(1).to({y:527.6},0).wait(1).to({y:522.7},0).wait(1).to({y:517.8},0).wait(1).to({y:512.9},0).wait(1).to({y:508},0).wait(1).to({y:503.1},0).wait(1).to({y:498.2},0).wait(1).to({y:493.3},0).wait(1).to({y:488.4},0).wait(1).to({y:483.5},0).wait(1).to({y:478.6},0).wait(1).to({y:473.7},0).wait(1).to({y:468.8},0).wait(1).to({y:463.9},0).wait(1).to({y:459},0).wait(1).to({y:454.1},0).wait(1).to({y:449.2},0).wait(1).to({y:444.3},0).wait(1).to({y:439.4},0).wait(1).to({y:434.5},0).wait(1).to({y:429.6},0).wait(1).to({y:424.7},0).wait(1).to({y:419.8},0).wait(1).to({y:414.9},0).wait(1).to({y:410},0).wait(1).to({y:405.1},0).wait(1).to({y:400.2},0).wait(1).to({y:395.3},0).wait(1).to({y:390.4},0).wait(1).to({y:385.5},0).wait(1).to({y:380.6},0).wait(1).to({y:375.7},0).wait(1).to({y:370.8},0).wait(1).to({y:365.9},0).wait(1).to({y:361},0).wait(1).to({y:356.1},0).wait(1).to({y:351.2},0).wait(1).to({y:346.3},0).wait(1).to({y:341.4},0).wait(1).to({y:336.5},0).wait(1).to({y:331.6},0).wait(1).to({y:326.7},0).wait(1).to({y:321.8},0).wait(1).to({y:316.9},0).wait(1).to({y:312},0).wait(1).to({y:307.1},0).wait(1).to({y:302.2},0).wait(1).to({y:297.3},0).wait(1).to({y:292.4},0).wait(1).to({y:287.5},0).wait(1).to({y:282.6},0).wait(1).to({y:277.7},0).wait(1).to({y:272.8},0).wait(1).to({y:267.9},0).wait(1).to({y:263},0).wait(1).to({y:258.1},0).wait(1).to({y:253.2},0).wait(1).to({y:248.3},0).wait(1).to({y:243.4},0).wait(1).to({y:238.5},0).wait(1).to({y:233.6},0).wait(1).to({y:228.7},0).wait(1).to({y:223.8},0).wait(1).to({y:218.9},0).wait(1).to({y:214},0).wait(1).to({y:209.1},0).wait(1).to({y:204.2},0).wait(1).to({y:199.3},0).wait(1).to({y:194.4},0).wait(1).to({y:189.5},0).wait(1).to({y:184.6},0).wait(1).to({y:179.7},0).wait(1).to({y:174.8},0).wait(1).to({y:169.9},0).wait(1).to({y:165},0).wait(1).to({y:160.1},0).wait(1).to({y:155.2},0).wait(1).to({y:150.3},0).wait(1).to({y:145.4},0).wait(1).to({y:140.5},0).wait(1).to({y:135.6},0).wait(1).to({y:130.7},0).wait(1).to({y:125.8},0).wait(1).to({y:120.9},0).wait(1).to({y:116},0).wait(1).to({y:111.1},0).wait(1).to({y:106.2},0).wait(1).to({y:101.3},0).wait(1).to({y:96.4},0).wait(1).to({y:91.5},0).wait(1).to({y:86.6},0).wait(1).to({y:81.7},0).wait(1));
}).prototype = p = new cjs.MovieClip();
p.nominalBounds = new cjs.Rectangle(98.9,332.9,202.3,163.4);
})(lib = lib||{}, images = images||{}, createjs = createjs||{}, ss = ss||{});
var lib, images, createjs, ss;
HTML - Banner 2:
<!DOCTYPE html>
<!--
NOTES:
1. All tokens are represented by '$' sign in the template.
2. You can write your code only wherever mentioned.
3. All occurrences of existing tokens will be replaced by their appropriate values.
4. Blank lines will be removed automatically.
5. Remove unnecessary comments before creating your template.
-->
<html>
<head>
<meta charset="UTF-8">
<meta name="authoring-tool" content="Adobe_Animate_CC">
<title>sky2</title>
<!-- write your code here -->
<script src="https://code.createjs.com/createjs-2015.11.26.min.js"></script>
<script src="sky2.js"></script>
<script src="localconnection.js"></script>
<script>
var canvas, stage, exportRoot;
function init() {
canvas = document.getElementById("canvas");
handleComplete();
}
function handleComplete() {
//This function is always called, irrespective of the content. You can use the variable "stage" after it is created in token create_stage.
exportRoot = new lib.sky2();
stage = new createjs.Stage(canvas);
stage.addChild(exportRoot);
//Registers the "tick" event listener.
createjs.Ticker.setFPS(lib.properties.fps);
createjs.Ticker.addEventListener("tick", stage);
//Code to support hidpi screens and responsive scaling.
(function(isResp, respDim, isScale, scaleType) {
var lastW, lastH, lastS=1;
window.addEventListener('resize', resizeCanvas);
resizeCanvas();
function resizeCanvas() {
var w = lib.properties.width, h = lib.properties.height;
var iw = window.innerWidth, ih=window.innerHeight;
var pRatio = window.devicePixelRatio || 1, xRatio=iw/w, yRatio=ih/h, sRatio=1;
if(isResp) {
if((respDim=='width'&&lastW==iw) || (respDim=='height'&&lastH==ih)) {
sRatio = lastS;
}
else if(!isScale) {
if(iw<w || ih<h)
sRatio = Math.min(xRatio, yRatio);
}
else if(scaleType==1) {
sRatio = Math.min(xRatio, yRatio);
}
else if(scaleType==2) {
sRatio = Math.max(xRatio, yRatio);
}
}
canvas.width = w*pRatio*sRatio;
canvas.height = h*pRatio*sRatio;
canvas.style.width = w*sRatio+'px';
canvas.style.height = h*sRatio+'px';
stage.scaleX = pRatio*sRatio;
stage.scaleY = pRatio*sRatio;
lastW = iw; lastH = ih; lastS = sRatio;
}
})(false,'both',false,1);
}
</script>
<!-- write your code here -->
</head>
<body onload="init();" style="margin:0px;">
<canvas id="canvas" width="200" height="668" style="display: block; background-color:rgba(255, 255, 255, 1.00)"></canvas>
</body>
</html>
js - Banner 2:
(function (lib, img, cjs, ss) {
var p; // shortcut to reference prototypes
lib.webFontTxtInst = {};
var loadedTypekitCount = 0;
var loadedGoogleCount = 0;
var gFontsUpdateCacheList = [];
var tFontsUpdateCacheList = [];
// library properties:
lib.properties = {
width: 200,
height: 668,
fps: 24,
color: "#FFFFFF",
opacity: 1.00,
webfonts: {},
manifest: []
};
lib.ssMetadata = [];
lib.updateListCache = function (cacheList) {
for(var i = 0; i < cacheList.length; i++) {
if(cacheList[i].cacheCanvas)
cacheList[i].updateCache();
}
};
lib.addElementsToCache = function (textInst, cacheList) {
var cur = textInst;
while(cur != exportRoot) {
if(cacheList.indexOf(cur) != -1)
break;
cur = cur.parent;
}
if(cur != exportRoot) { //we have found an element in the list
var cur2 = textInst;
var index = cacheList.indexOf(cur);
while(cur2 != cur) { //insert all it's children just before it
cacheList.splice(index, 0, cur2);
cur2 = cur2.parent;
index++;
}
}
else { //append element and it's parents in the array
cur = textInst;
while(cur != exportRoot) {
cacheList.push(cur);
cur = cur.parent;
}
}
};
lib.gfontAvailable = function(family, totalGoogleCount) {
lib.properties.webfonts[family] = true;
var txtInst = lib.webFontTxtInst && lib.webFontTxtInst[family] || [];
for(var f = 0; f < txtInst.length; ++f)
lib.addElementsToCache(txtInst[f], gFontsUpdateCacheList);
loadedGoogleCount++;
if(loadedGoogleCount == totalGoogleCount) {
lib.updateListCache(gFontsUpdateCacheList);
}
};
lib.tfontAvailable = function(family, totalTypekitCount) {
lib.properties.webfonts[family] = true;
var txtInst = lib.webFontTxtInst && lib.webFontTxtInst[family] || [];
for(var f = 0; f < txtInst.length; ++f)
lib.addElementsToCache(txtInst[f], tFontsUpdateCacheList);
loadedTypekitCount++;
if(loadedTypekitCount == totalTypekitCount) {
lib.updateListCache(tFontsUpdateCacheList);
}
};
// symbols:
(lib.Symbol1 = function(mode,startPosition,loop) {
this.initialize(mode,startPosition,loop,{});
// Ebene 1
this.shape = new cjs.Shape();
this.shape.graphics.f("#990033").s().p("AvyMwIAA5fIflAAIAAZfg");
this.shape.setTransform(101.1,81.7);
this.timeline.addTween(cjs.Tween.get(this.shape).wait(1));
}).prototype = p = new cjs.MovieClip();
p.nominalBounds = new cjs.Rectangle(0,0,202.3,163.4);
// stage content:
(lib.sky2 = function(mode,startPosition,loop) {
this.initialize(mode,startPosition,loop,{});
// timeline functions:
this.frame_0 = function() {
LC.key = '123';
LC.name = 'rechts';
LC.frames = 'links';
LC.onConnect = function () {
console.log('Do this as soon as connection established!');
LC.links.document.getElementsByTagName('body')[0].style.backgroundColor = 'blue';
};
LC.connect();
this.stop();
}
// actions tween:
this.timeline.addTween(cjs.Tween.get(this).call(this.frame_0).wait(202));
// animation
this.instance = new lib.Symbol1();
this.instance.parent = this;
this.instance.setTransform(100,80.6,1,1,0,0,0,101.1,81.7);
this.timeline.addTween(cjs.Tween.get(this.instance).wait(1).to({x:100.1,y:85.7},0).wait(1).to({y:90.8},0).wait(1).to({y:95.9},0).wait(1).to({y:101},0).wait(1).to({y:106.1},0).wait(1).to({y:111.3},0).wait(1).to({y:116.4},0).wait(1).to({y:121.5},0).wait(1).to({y:126.6},0).wait(1).to({x:100.2,y:131.7},0).wait(1).to({y:136.8},0).wait(1).to({y:141.9},0).wait(1).to({y:147},0).wait(1).to({y:152.1},0).wait(1).to({y:157.2},0).wait(1).to({y:162.3},0).wait(1).to({y:167.4},0).wait(1).to({y:172.6},0).wait(1).to({x:100.3,y:177.7},0).wait(1).to({y:182.8},0).wait(1).to({y:187.9},0).wait(1).to({y:193},0).wait(1).to({y:198.1},0).wait(1).to({y:203.2},0).wait(1).to({y:208.3},0).wait(1).to({y:213.4},0).wait(1).to({y:218.5},0).wait(1).to({x:100.4,y:223.6},0).wait(1).to({y:228.7},0).wait(1).to({y:233.9},0).wait(1).to({y:239},0).wait(1).to({y:244.1},0).wait(1).to({y:249.2},0).wait(1).to({y:254.3},0).wait(1).to({y:259.4},0).wait(1).to({y:264.5},0).wait(1).to({x:100.5,y:269.6},0).wait(1).to({y:274.7},0).wait(1).to({y:279.8},0).wait(1).to({y:284.9},0).wait(1).to({y:290.1},0).wait(1).to({y:295.2},0).wait(1).to({y:300.3},0).wait(1).to({y:305.4},0).wait(1).to({y:310.5},0).wait(1).to({x:100.6,y:315.6},0).wait(1).to({y:320.7},0).wait(1).to({y:325.8},0).wait(1).to({y:330.9},0).wait(1).to({y:336},0).wait(1).to({y:341.1},0).wait(1).to({y:346.2},0).wait(1).to({y:351.4},0).wait(1).to({y:356.5},0).wait(1).to({x:100.7,y:361.6},0).wait(1).to({y:366.7},0).wait(1).to({y:371.8},0).wait(1).to({y:376.9},0).wait(1).to({y:382},0).wait(1).to({y:387.1},0).wait(1).to({y:392.2},0).wait(1).to({y:397.3},0).wait(1).to({y:402.4},0).wait(1).to({x:100.8,y:407.5},0).wait(1).to({y:412.7},0).wait(1).to({y:417.8},0).wait(1).to({y:422.9},0).wait(1).to({y:428},0).wait(1).to({y:433.1},0).wait(1).to({y:438.2},0).wait(1).to({y:443.3},0).wait(1).to({y:448.4},0).wait(1).to({x:100.9,y:453.5},0).wait(1).to({y:458.6},0).wait(1).to({y:463.7},0).wait(1).to({y:468.9},0).wait(1).to({y:474},0).wait(1).to({y:479.1},0).wait(1).to({y:484.2},0).wait(1).to({y:489.3},0).wait(1).to({y:494.4},0).wait(1).to({x:101,y:499.5},0).wait(1).to({y:504.6},0).wait(1).to({y:509.7},0).wait(1).to({y:514.8},0).wait(1).to({y:519.9},0).wait(1).to({y:525},0).wait(1).to({y:530.2},0).wait(1).to({y:535.3},0).wait(1).to({y:540.4},0).wait(1).to({x:101.1,y:545.5},0).wait(1).to({y:550.6},0).wait(1).to({y:555.7},0).wait(1).to({y:560.8},0).wait(1).to({y:565.9},0).wait(1).to({y:571},0).wait(1).to({y:576.1},0).wait(1).to({y:581.2},0).wait(1).to({y:586.4},0).wait(1).to({y:581.4},0).wait(1).to({y:576.4},0).wait(1).to({y:571.4},0).wait(1).to({y:566.4},0).wait(1).to({y:561.4},0).wait(1).to({y:556.4},0).wait(1).to({y:551.4},0).wait(1).to({y:546.4},0).wait(1).to({y:541.4},0).wait(1).to({y:536.4},0).wait(1).to({y:531.4},0).wait(1).to({y:526.4},0).wait(1).to({y:521.4},0).wait(1).to({y:516.4},0).wait(1).to({y:511.4},0).wait(1).to({y:506.4},0).wait(1).to({y:501.4},0).wait(1).to({y:496.4},0).wait(1).to({y:491.4},0).wait(1).to({y:486.4},0).wait(1).to({y:481.4},0).wait(1).to({y:476.4},0).wait(1).to({y:471.4},0).wait(1).to({y:466.4},0).wait(1).to({y:461.4},0).wait(1).to({y:456.4},0).wait(1).to({y:451.4},0).wait(1).to({y:446.4},0).wait(1).to({y:441.5},0).wait(1).to({y:436.5},0).wait(1).to({y:431.5},0).wait(1).to({y:426.5},0).wait(1).to({y:421.5},0).wait(1).to({y:416.5},0).wait(1).to({y:411.5},0).wait(1).to({y:406.5},0).wait(1).to({y:401.5},0).wait(1).to({y:396.5},0).wait(1).to({y:391.5},0).wait(1).to({y:386.5},0).wait(1).to({y:381.5},0).wait(1).to({y:376.5},0).wait(1).to({y:371.5},0).wait(1).to({y:366.5},0).wait(1).to({y:361.5},0).wait(1).to({y:356.5},0).wait(1).to({y:351.5},0).wait(1).to({y:346.5},0).wait(1).to({y:341.5},0).wait(1).to({y:336.5},0).wait(1).to({y:331.5},0).wait(1).to({y:326.5},0).wait(1).to({y:321.5},0).wait(1).to({y:316.5},0).wait(1).to({y:311.5},0).wait(1).to({y:306.5},0).wait(1).to({y:301.6},0).wait(1).to({y:296.6},0).wait(1).to({y:291.6},0).wait(1).to({y:286.6},0).wait(1).to({y:281.6},0).wait(1).to({y:276.6},0).wait(1).to({y:271.6},0).wait(1).to({y:266.6},0).wait(1).to({y:261.6},0).wait(1).to({y:256.6},0).wait(1).to({y:251.6},0).wait(1).to({y:246.6},0).wait(1).to({y:241.6},0).wait(1).to({y:236.6},0).wait(1).to({y:231.6},0).wait(1).to({y:226.6},0).wait(1).to({y:221.6},0).wait(1).to({y:216.6},0).wait(1).to({y:211.6},0).wait(1).to({y:206.6},0).wait(1).to({y:201.6},0).wait(1).to({y:196.6},0).wait(1).to({y:191.6},0).wait(1).to({y:186.6},0).wait(1).to({y:181.6},0).wait(1).to({y:176.6},0).wait(1).to({y:171.6},0).wait(1).to({y:166.6},0).wait(1).to({y:161.6},0).wait(1).to({y:156.6},0).wait(1).to({y:151.7},0).wait(1).to({y:146.7},0).wait(1).to({y:141.7},0).wait(1).to({y:136.7},0).wait(1).to({y:131.7},0).wait(1).to({y:126.7},0).wait(1).to({y:121.7},0).wait(1).to({y:116.7},0).wait(1).to({y:111.7},0).wait(1).to({y:106.7},0).wait(1).to({y:101.7},0).wait(1).to({y:96.7},0).wait(1).to({y:91.7},0).wait(1).to({y:86.7},0).wait(1).to({y:81.7},0).wait(2));
}).prototype = p = new cjs.MovieClip();
p.nominalBounds = new cjs.Rectangle(98.9,332.9,202.3,163.4);
})(lib = lib||{}, images = images||{}, createjs = createjs||{}, ss = ss||{});
var lib, images, createjs, ss;
it's better to call LC.connect(); function at the end of handleComplete() event, because as soon as exportRoot defined, it's available to use it main Animation object.
For example :
.....
exportRoot = new lib.sky2();
stage = new createjs.Stage(canvas);
stage.addChild(exportRoot);
LC.key = '123';
LC.name = 'links';
LC.frames = 'rechts';
LC.onConnect = function () {
exportRoot.play();
LC.rechts.exportRoot.play();
};
exportRoot.stop();
LC.connect();
.....
on the other animation you only need to define & call LC.connect(); like this :
.....
exportRoot = new lib.sky2();
stage = new createjs.Stage(canvas);
stage.addChild(exportRoot);
LC.key = '123';
LC.name = 'rechts'; // adjust name
LC.frames = 'links'; // adjust frames
LC.onConnect = function () {
// no action needed here
};
exportRoot.stop();
LC.connect();
....
How to integrate a dynamic graph in a webpage?
I am getting dynamically generated data from my Raspberry PI in .csv format and I want to make a webpage for my institute to analyze the waveform of the output . The main feature of this graph is that the graph should auto-update according to the modified data. How should I go about making this?
I am assuming that the solution you are looking for must work in HTML 5 and JavaScript where there is NO server side processing. The raspberry pi posts a file to the server.
We are using morris charts which is JavaScript library
http://morrisjs.github.io/morris.js/
Morris uses a json format
1: read the csv file
2: convert the csv data to a json object
3: initialise the chart
try this example csv data
"elapsed","value",b
"Oct-12",24,2
"Oct-13",34,22
"Oct-14",33,7
"Oct-15",22,6
"Oct-16",28,17
"Oct-17",60,15
"Oct-18",60,17
"Oct-19",70,7
"Oct-20",67,18
"Oct-21",86,18
"Oct-22",86,18
$(document).ready(function() {
$.ajax({
url: "linechartdata.csv",
success: function(data) {
processData(data)
}
});
});
function processData(data) {
var record_num = 3; // or however many elements there are in each row
var dataLines = data.split(/\r\n|\n/);
var entries = dataLines[0].split(',');
var records = [];
var headers = entries.splice(0, record_num);
console.log(dataLines.length)
for (var i = 1; i < dataLines.length; i++) {
var obj = dataLines[i].split(',');
if (obj.length == headers.length) {
var tarr = [];
for (var j = 0; j < headers.length; j++) {
//doing it this way to get strings and numbers
var field01;
var field02;
var field03;
if (j == 0) {
field01 = obj[j]
}
if (j == 1) {
field02 = obj[j]
}
if (j == 2) {
field03 = obj[j]
}
var o = {
elapsed: field01,
value: field02,
b: field03
}
records.push(o);
}
}
}
initChart(records)
}
function initChart(records) {
var chart = Morris.Line({
element: 'morris-chart-network',
data: records,
axes: false,
xkey: 'elapsed',
ykeys: ['value', 'b'],
labels: ['Download Speed', 'Upload Speed'],
yLabelFormat: function(y) {
return y.toString() + ' Mb/s';
},
gridEnabled: false,
gridLineColor: 'transparent',
lineColors: ['#5b6b79', '#a5a5a5'],
lineWidth: [2, 1],
pointSize: [0, 2],
fillOpacity: .7,
gridTextColor: '#999',
parseTime: false,
resize: true,
behaveLikeLine: true,
hideHover: 'auto'
});
};
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Morris Chart</title>
</head>
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/morris.js/0.5.1/morris.css">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/morris.js/0.5.1/morris.min.js"></script>
<body>
<div>Morris Chart</div>
<div id="morris-chart-network" style="width:800px;height:600px">
</div>
<div>
example
</div>
I need with parsing an array from google script to HTML
I have a date picker that I'd like to use to choose an event and then show details from a spread sheet.
HTML:
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Datepicker - Default functionality</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.0/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.0/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css">
<script>
$(function() {
$( "#datepicker" ).datepicker({
onSelect: function(date) {
var stuff= updDate(date);
},
selectWeek: true,
inline: true,
startDate: '01/01/2000',
firstDay: 1,
});
});
</script>
<script>
function updDate(date){
google.script.run.updDate(date);
}
</script>
</head>
<body>
<p>Date: <input type="text" id="datepicker" onchange="updDate()"></p>
Hello, world!
<input type="button" value="Close"
onclick="google.script.host.close()" />
</body>
</html>
Google Script:
function updDate(date){
var searchString = date;
var data = SpreadsheetApp.getActiveSheet().getDataRange().getValues();
var s2 = SpreadsheetApp.openById("*************");
var row = new Array();
var k;
for (var i in data) {
//Logger.log("length is: "+data[i].length)
//var p = data[i].length
for (var j in data[i]) {
//Logger.log("We are at i: "+i) //Row
//Logger.log("We are at j: "+j) //Col
if (i !=0){
if(data[i][j] != ""){
if(j == 4){
//Logger.log("date from picker: " + date);
//Logger.log("date from Data: " + data[i][j]);
var ssDate = Utilities.formatDate(data[i][j], "GMT", "MM/dd/yyyy");
//Logger.log("date post Convert: " +ssDate);
if(date == ssDate){
k= i
var p = data[i].length
Logger.log("P is: " +p);
}
}
}
}
}
}
Logger.log("K is: "+k)
var q = 1
while (q <= p){
row[q] = data[k][q];
q++
}
Logger.log("Row: " +row);
return row;
}
Eventually I'd like to get the data read into a table but I've been hitting a wall when it comes to successfully getting the data read into a variable in the HTML.
Right now I get this error:
Uncaught ScriptError: The script completed but the returned value is not a supported return type.
Any help in returning the array "row"(in the google script) to the variable "stuff"(in the HTML) successfully or any pointers about how to better execute this task would be greatly appreciated.
Loren
Edit code:
function updDate(date){
var stuff = google.script.run.withSuccessHandler(myReturnFunction).updDate(date);
Console.log(stuff)
}
function myReturnFunction(){
window.myReturnFunction = function(whatGotReturned) {console.log(whatGotReturned);};
}
Sandy Good had it right in the comments above:
function updDate(date){
var junk = google.script.run.withSuccessHandler(myReturnFunction).updDate(date);
}
function myReturnFunction(whatGotReturned){
console.log(whatGotReturned);
}
WinRT - how to tell if device is on battery or wall powered?
Say I want to tailor my application to throttle throughput when running on battery power, but go full bore when it's plugged to a wall socket. Is there an event to plug into to detect when these things happen like when internet connection is detected?
Apparently there's this trigger you can plug in to. It only fires off when the device is plugged in.
IE and WebView http://ie.microsoft.com/testdrive/HTML5/PowerMeter/Default.html can poll the cpu power states
eg: http://apps.microsoft.com/windows/app/plugged-in/2b91b1e1-9e30-4a96-bc95-b196e46bef9d
In c#/xaml try:
XAML
<WebView x:Name="BatteryCheck_WV" Source="ms-appx-web:///Assets/JSBatteryCheck.html" Height="50" Width="50" Visibility="Collapsed" />
c#
var PeriodicTimer = ThreadPoolTimer.CreatePeriodicTimer(async (timer) =>
{
await Dispatcher.RunAsync(Windows.UI.Core.CoreDispatcherPriority.Low,
async () =>
{
if (Window.Current.Visible) BatteryStatus.IsOn= Convert.ToBoolean(await BatteryCheck_WV.InvokeScriptAsync("IsPluggedIn", null));
});
}, new TimeSpan(0, 0, 0, 1, 0));
html/js
<!DOCTYPE html>
<html>
<head>
<title>JSBatteryCheck</title>
<script type="text/javascript">
var batterytimeOut;
var timeOutGo = true;
var lastDisplayUpdateTime = new Date();
var MilliSeconds = 1000;
var displayUpdateInterval = 200;
var values = [];
var maxValues = displayUpdateInterval;
var PluggedIn = true;
var currentTicksPerMilliSecond = 0;
function GetTicksPerSecond() {
if ((new Date() - lastDisplayUpdateTime) >= displayUpdateInterval) {
lastDisplayUpdateTime = new Date;
currentTicksPerMilliSecond = Avg();
values = [];
if (!isNaN(currentTicksPerMilliSecond)) {
PluggedIn = (currentTicksPerMilliSecond > 9) ? false : true;
}
}
else Tick();
if (timeOutGo) batterytimeOut = setTimeout(function () { GetTicksPerSecond() }, 1);
}
function StartTimer() {
timeOutGo = true;
GetTicksPerSecond();
return "";
}
function Tick() {
if (values.length > maxValues) values.shift();
else values.push(new Date());
}
function Avg() {
if (values.length > 1) {
var earliest = values[0];
var latest = values[values.length - 1];
var elapsed = latest - earliest;
var elapsedSeconds = elapsed / MilliSeconds;
var avg = MilliSeconds / ((values.length - 1) / elapsedSeconds);
return parseInt(avg);
}
else return NaN;
}
function StopTimeOut() {
clearTimeout(batterytimeOut);
batterytimeOut = null;
timeOutGo = false;
}
function IsPluggedIn() {
return String(PluggedIn);
}
</script>
</head>
<body onload="GetTicksPerSecond()">
<div id="PowerStatus"></div>
<button onclick="StopTimeOut()">Stop timeout</button>
</body>
</html>
For background tasks SystemTriggerType.BackgroundWorkCostChange event is best but needs lock screen access