We Keep Coding

Using {{value}} in the JavaScript block of the thinger.io HTML widget

I try to write HTML widget with JavaScript code in the thinger.io Dashboard. The data from the "thing" can be used in the HTML by inserting the next code {{value}} into some HTML tag body.
But, I cannot use it in the JavaScript block.
Pure HTML widget:
For example use in the HTML widget:
<h1>Millis data</h1>
<p>Millis value is </p><b>{{value}}</b>
The result of this
Widget with JavaScript block (don't work as needed):
I tried to use the same data for plotting (Plotly example).
I can use in the HTML tag id=data, but, I don't know how to use this data in the JavaScript block.
My try:
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
<div id="data" value={{value}}>Data - {{value}}</div>
<div id="tester" style="width:900px;height:300px;"></div>
<script>
TESTER = document.getElementById('tester');
Plotly.newPlot( TESTER, [{
x: [1, 2, 3, 4, 5],
y: [1, 2, 4, 8, 16] }], {
margin: { t: 0 } } );
</script>
And resulting widget:
- The data on the plot are hard coded for example only.
I need help with integrating the ```{{value}}`` data into a JavaScript code in the thinger.io HTML widget.

There doesn't appear to be documented way to get the value in the HTML widget.
Instead it is possible to use a MutationObserver to listen to changes to the data div. This can create the Plotly plot when there is an update to the div. (You can also use jQuery to handle the change but this approach uses fewer dependencies.)
<div id="data" value={{value}}>Data - {{value}}</div>
<div id="tester" style="width:900px;height:300px;"></div>
<script>
var createPlot = function(dataEl) {
let value = dataEl.getAttribute('value');
console.log(`creating plot with: ${value}`);
if (value) {
TESTER = document.getElementById('tester');
Plotly.newPlot( TESTER, [{
x: [1, 2, 3, 4, 5],
y: JSON.parse(value) }], {
margin: { t: 0 } }
);
}
}
var dataEl = document.getElementById('data');
var script = document.createElement('script');
script.onload = function () {
createPlot(dataEl);
};
script.src = "https://cdn.plot.ly/plotly-latest.min.js";
document.head.appendChild(script);
var observer = new MutationObserver(function(mutations) {
// create plot only if Plotly has loaded
if (Plotly) {
createPlot(dataEl);
}
});
// setup the observer
var target = document.querySelector('#data');
var config = { attributes: true, attributeFilter: [ 'value'] };
observer.observe(target, config);
</script>
The plotly script may be loaded after the div is updated. So the trigger to create the plot could be either the script loading or the div mutating. In either case both plotly needs to be loaded and the div needs to be updated.
The value attribute is also a string so it needs to be converted from a string using JSON.parse().
Testing
To test this, I created an HTTP device and added a property with the string value [20,41,63,83,103]:
The widget was configured using this property:
And the result:

add script in function.php

I need to put my script in my function.php on my Wordpress but I don't found how to do it. Need help!
here's..:
<script type="text/javascript">
$(function() {
$( '#ri-grid' ).gridrotator( {
rows : 3,
columns : 5,
animType : 'fadeInOut',
animSpeed : 500,
interval : 1200,
step : 1,
w320 : {
rows : 3,
columns : 5
},
w240 : {
rows : 3,
columns : 5
}
} );
});
</script>
Thx.

Wordpress isn't that straightforward. For it to be so modular and user-friendly with plug-n-play, it has a complex structure.
There are different ways of adding scripts and it all depends on when they need to be available and/or executed.

FancyBox popup loses all styling when loading Partial View

I am trying to load a partial view in my MVC project using fancybox. It seems to load the content correctly. Most of it anyway as it seems to cut the page short, but it loses all styling from the view when it loads it.
I have included my CSS files in my partial view but still no luck.
My partial view is as follows:
#model ApprovalSystem.ViewModels.RequestDetailViewModel
#section styles
{
<link href="~/Content/Site.css" rel="stylesheet" />
<link href="~/Content/material.min.css" rel="stylesheet" />
<link href="~/Content/jquery.fancybox.min.css" rel="stylesheet" />
}
//CONTENT HERE - Not providing it all as it is quite large. Classes and all remain in the partial view though so cannot see that being an issue.
#section scripts
{
<script>
$(document).ready(function () {
$('[data-fancybox]').fancybox({
maxWidth : 800,
maxHeight : 600,
fitToView : false,
width : '70%',
height : '70%',
autoSize : false,
closeClick : false,
openEffect : 'none',
closeEffect : 'none'
});
})
</script>
}
My link to open the fancybox is:
<a data-fancybox href="#Url.Action("DetailPartial", new { id = Model.Request.ParentRequestId })" class="mui-btn mui-btn--fab mui-btn--small fancybox.ajax">#Model.Request.ParentRequestId</a>
And the controller method to return the partial view is:
public async Task<ActionResult> DetailPartial(int id)
{
var request = _uow.RequestService.Get(id);
var currentUser = await AzureGraph.GetUser();
ViewBag.CurrentUser = currentUser.DisplayName;
ViewBag.NextApprover = _uow.ResponseService.Get().Where(r => r.RequestId == id && r.ResponseStatus == RequestStatus.NotProcessed).Select(r => r.Responder).FirstOrDefault();
RequestDetailViewModel viewModel = new RequestDetailViewModel()
{
Request = request
};
if (request.FolderId != null)
viewModel.Attachments = await AzureGraph.GetFileSystemObjects(request.FolderId);
else
viewModel.Attachments = new List<FSObject>();
return PartialView("DetailPartial", viewModel);
}
I am all out of ideas and any help would be greatly appreciated.
EDIT - Added screenshot

Managed to solve this. The issue was that because the partial view had no layout, sections werent being loaded correctly. So i created a basic layout for partial views and it now works as expected.

Edge Animate: how to move javascript into html?

I need to create a self-contained html banner in Edge Animate. For this I have already encoded the images to base24. I just need to include the javascript into that html. When I publish my banner, Edge by default adds a 'edge_includes' folder which contains 'edge.6.0.0.min.js' and a javascript file in the same location as the html file which is called the same as the html file but with a '_edge.js' extention. Like for example 'text_edge.js'. Both .js files need to be moved to the published html file.
The 'edge.6.0.0.min.js' file I can move easily enough by moving it's script between the script tags of the html file which mentions that .js file.
The test_edge.js file however is more difficult. A typical published html file contains this amongst others:
<script> AdobeEdge.loadComposition('test', 'EDGE-102396420', {
scaleToFit: "none",
centerStage: "none",
minW: "0px",
maxW: "undefined",
width: "300px",
height: "250px" }, {"dom":{}}, {"dom":{}});
</script>
This is - I guess - where Edge loads that 'test_edge.js' file, through 'loadComposition'. But how can I copy the contents of that test_edge.js file into my html file then? I can't replace 'test' with the contents of 'test_edge.js' for example. Is there some other way to load that file's content into my html file? By coping it between script tags and making loadComposition load that scripted part instead of the external test_edge.js file for example?

It might be strange, but it should work if you just put the js inside the <script> tags. The header should look something like this:
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=Edge"/>
<title>Untitled</title>
<!--Adobe Edge Runtime-->
<style>
.edgeLoad-EDGEK-472634723 { visibility:hidden; }
</style>
<script>
//Here goes the whole content from the test_edge.js
//Just ctrl+C and ctrl+V everything from it
</script>
<script>
//Here goes the whole content from the edge.6.0.0.min.js
//Just ctrl+C and ctrl+V everything from it
</script>
<script>
//Here goes the AdobeEdge.loadComposition stuff...
</script>
</head>
And also don't forget to create the class itself inside the <body> part
<div class="EDGE-102396420"></div>

Had a similar issue wanted to integrating js into one html, but I couldn't get it to work wihtout some tweaking in the edge runtime itself, so unfortunately it'll ruin the cdn speed adobe gives you. But otherwise the approach is similar to the answer given by #Klajbar.
If you make a check inside the edge runtime to can ensure compatibility with other files the requires edge runtime
What I did was to add a variable in loadComposition and then encapsulate the call which has f.load(a + "_edge.js") in a if statement to make sure is runs without the variable if need be.
Excerpt from modified edge.runtime.js example
//added inline as last variable
loadComposition: function(a, b, c, g, m,inline) {
function n(a, g) {
W(function() {
var m =
d("." + b),
k = /px|^0$/,
n = c.scaleToFit,
e = c.centerStage,
h = c.minW,
f = c.maxW,
l = c.width,
s = c.height,
y = m[0] || document.getElementsByTagName("body")[0];
"absolute" != y.style.position && "relative" != y.style.position && (y.style.position = "relative");
s && (y.style.height = s);
l && (y.style.width = l);
/^height$|^width$|^both$/.test(n) && (h = k.test(h) ? parseInt(h, 10) : void 0, f = k.test(f) ? parseInt(f, 10) : void 0, v(d(y), n, h, f, !1, c.bScaleToParent));
/^vertical$|^horizontal$|^both$/.test(e) && t(y, e);
a && L(H[b], null, a.dom, a.style, m[0], g + b);
m.removeClass("edgeLoad-" +
b)
})
}
/** removed some code here just for legibility **/
//if statement to override loading js files
if(!inline){
ba ? (window.edge_authoring_mode ||
(g ? (f.definePreloader(g), e()) : f.load(a + "_edgePreload.js", e)), a && (c && c.bootstrapLoading ? ka.push(a) : window.edge_authoring_mode && c.sym ? f.load(a +
"_edge.js?symbol=" + c.sym) : f.load(a + "_edge.js"))) : window.edge_authoring_mode ||
(m ? (f.defineDownLevelStage(m), h()) : f.load(a + "_edgePreload.js", h))
f.load(a + "_edge.js");
}
Once that's done you can include the code into the same html, where runtime is loaded first, then loadComposition block, then the _edge.js code.
Example:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=Edge"/>
<title>Untitled</title>
<script>
//modified edge.runtime.js file
</script>
<style>
.edgeLoad-EDGE-24658395 { visibility:hidden; }
</style>
<script>
AdobeEdge.loadComposition('jem%26fix_afrens_930x180_uge14', 'EDGE-24658395', {
scaleToFit: "none",
centerStage: "none",
minW: "0px",
maxW: "undefined",
width: "930px",
height: "180px"
}, {"dom":{}}, {"style":{"${symbolSelector}":{"isStage":"true","rect":["undefined","undefined","960px","180px"]}},"dom":{}},true);
//notice appeded boolean value as the end to enable the override.
</script>
<!--Adobe Edge Runtime End-->
<script id="test">
// contents of _edge.js file
</script>
</head>
<body style="margin:0;padding:0;">
<div id="Stage" class="EDGE-24658395">
</div>
</body>
</html>
I just used it for loading just one _edge.js and haven't tested if you choose including the preloading stuff.

Just put you *_edge.js after runtime js.
In runtime js search for timeout function = 10 sec.
Change this to 0 sec, and runtime will start your animate at once load.
But you still will have error load *_edge.js in console. It is not so important.

Put absolute path of the folder where the test_edge.js file is present.
For example
test_edge.js file is under a/b/c folder then
<script> AdobeEdge.loadComposition('/a/b/c/test', 'EDGE-102396420', {
scaleToFit: "none",
centerStage: "none",
minW: "0px",
maxW: "undefined",
width: "300px",
height: "250px" }, {"dom":{}}, {"dom":{}});
</script>

Adobe Edge Embed js in html file
When you see edge html files. There are two js and images.
Both js are externally called. One is library and second is function called js ex.(728x90_edge.js)
Now, when upload all files in DFP type custom, then you use macro for 728x90_edge.js and all images src in this js.
Then how to use macro for images. That is challenge.
So you will have to embed this js in html. then you will use macro for images.
Follow the steps.
1, download liabrary js
remove below line in liabrary(edge.6.0.0.min.js), search after beautify
"_edge.js?symbol=" +
4.+ "_edge.js"
save and embed in html (<script type="text/javascript" src="edge.6.0.0.min - Copy.js"></script>)
cut all code from 728x90_edge.js and embed in html, after end of loadComposition function closing </script>
Now 728x90_edge.js will be empty, it's only use for loading.
use full name of file in AdobeEdge.loadComposition('728x90', 'EDGE-11479078', {
Ex. AdobeEdge.loadComposition('728x90_edge.js', 'EDGE-11479078', {
Now upload all files html, images and two js files.
Now you can use macro for two js file and images.
It's working on Local and DFP.

Retrieve Plotly brush limits in Django environment

First of all I would like to say I have very few experience in Django and plotly, so excuse me if I may be asking something which makes no sense or has very few meaning.
In Django enviroment I know that programming logic takes place in the "Views.py" file, and all variables set on this file can be transfered to the "template.html" file and use them inside double curly braces "{{ VariableFromView }}".
I was wondering if there is any way, once the plot is created, to retrieve the limits of the displayed area in the plotly plot, either on the "view.py" or "template.py" files, and save them in a variable which could be used in the "template.html" file, such as:
Variable definition example:
xbrush = [plotly.xmin, plotly.xmax]
ybrush = [plotly.ymin, plotly.ymax]
Variable call in template
{{ xbrush }}
{{ ybrush }}
In my case I amb using Python code for the "Views.py" and Javascript and html for the "templates.html" file (as well as a little bit of Django template language for dealing with variables)
Thank you very much for your help!

There are multiple ways to achieve the same. I would suggest you to go through django tutorial once again to get better understanding of template context and variables. Since you already have variables xbrush and ybrush in your views.py, just make sure you return these in the context of your response. Like render('template.html', {'xbrush':xbrush, 'ybrush': ybrush}).Now in your template.html you can access these values using {{ xbrush }}. So now all you need now is create a script tag in your html file and now you can assign these values to javascript variables like var xbrush = {{ xbrush }}

You'll need to do this using JavaScript, since rendering and all interaction with a Plotly plot is done in the browser. There's a full example (including a CodePen) that's close to what you're trying to do in the Plotly documentation here: https://plot.ly/javascript/zoom-events/
var plot = document.getElementById('plot').contentWindow;
var plotTwo = document.getElementById('plotTwo').contentWindow;
document.getElementById('plot').onload = function() {
pinger = setInterval(function(){
plot.postMessage({task: 'ping'}, 'https://plot.ly')
}, 100);
};
window.addEventListener('message', function(e) {
var message = e.data;
if(message.pong) {
console.log('Initial pong, frame is ready to receive');
clearInterval(pinger);
// Listening for zoom events, but you can also listen
// for click and hover by adding them to the array
plot.postMessage( {
task: 'listen',
events: ['zoom']
}, 'https://plot.ly');
plotTwo.postMessage({
task: 'relayout',
'update': {
'xaxis.fixedrange': true,
'yaxis.fixedrange': true
},
}, 'https://plot.ly');
}
else if( message.type == 'zoom' ){
console.log('zoom', message);
drawRectangle( message['ranges'] );
}
else {
console.log(message);
}
});
function drawRectangle( ranges ){
var rect = {
'type': 'rect',
'x0': ranges['x'][0],
'y0': ranges['y'][0],
'x1': ranges['x'][1],
'y1': ranges['y'][1],
'fillcolor': 'rgba(128, 0, 128, 0.7)',
}
plotTwo.postMessage({
'task': 'relayout',
'update': { shapes: [rect] },
}, 'https://plot.ly');
}
function newPlot(){
var plotURL = document.getElementById('plotURL').value + '.embed';
var iframe = document.getElementById('plot');
iframe.src = plotURL;
var iframeTwo = document.getElementById('plotTwo');
iframeTwo.src = plotURL;
}