-
Notifications
You must be signed in to change notification settings - Fork 5
/
Test-With-Mobile.html
423 lines (379 loc) · 30.7 KB
/
Test-With-Mobile.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
<html>
<head>
<title>Optimize Your Power BI Embed Code</title>
</head>
<body>
<center>
<h1 id="ifgt">Optimize Your Power BI Embed Code</h1>
<p>This tool ensures your Power BI publish to web report fits nicely in your web page or blog.</p>
<br>
<br>
<table>
<tr><td>Page Width: </td><td><input id="pbirw" value="16"></input> pixels</td></tr>
<tr><td>Page Height:</td><td><input id="pbirh" value="9"></input> pixels</td></tr>
<!--<tr><td>Content Minimum Height:</td><td><input id="cmh"></input></td></tr> -->
<tr><td>Web Embed Url: </td><td><input id="url" style="width:400px;"></input></td></tr>
<tr><td> </td><td> </td></tr>
<tr><td>Specify a mobile view: </td><td><input id="isMobile" value=""></input> 0 | 1</td></tr>
<tr><td>Show mobile view if available width is lower than: </td><td><input id="cmw" value=""></input> pixels</td></tr>
<tr><td>Mobile Page Width: </td><td><input id="pbirwM" value="16"></input> pixels</td></tr>
<tr><td>Mobile Page Height:</td><td><input id="pbirhM" value="9"></input> pixels</td></tr>
<tr><td>Mobile Embed Url: </td><td><input id="urlM" style="width:400px;"></input></td></tr>
</table>
<br>
<br>
<button id="gec" onclick="generateEmbedCode()">Optimize</button>
<br>
<br>
<br>
<br>
<a href="#ifgt" onclick="insert('e169');">Example 16:9 report</a> |
<a href="#ifgt" onclick="insert('e43');">Example 4:3 report</a> |
<a href="#ifgt" onclick="insert('ecp');">Example Custom page size report</a> |
<a href="#ifgt" onclick="insert('reset');">Reset</a>
<br>
<br>
<br>
<br>
<textarea id="tFrame" style="display: none; height:300px; width:600px;" >
<iframe width="--CMW--px" height="--CMH--px" frameborder="0" allowFullScreen="true" pbi-resize="powerbi" pbi-resize-width="--PRW--" pbi-resize-height="--PRH--" pbi-resize-src="--PRS--" src="--URL--&shareUrl=true"></iframe>
<script type="text/javascript">var runScript=null;!function(){if("undefined"==typeof powerbiresize){powerbiresize=1;var e=function(){for(var e=document.querySelectorAll("[pbi-resize=powerbi]"),t=0;t<e.length;t++){e[t].style.width="100%";var i,r=e[t].getAttribute("pbi-resize-width"),s=e[t].getAttribute("pbi-resize-height"),n=e[t].getAttribute("pbi-resize-min-width"),h=e[t].getAttribute("pbi-resize-src"),d=e[t].getAttribute("pbi-resize-m-width"),l=e[t].getAttribute("pbi-resize-m-height"),p=e[t].getAttribute("pbi-resize-m-src"),u=e[t].getAttribute("src"),o=e[t].clientWidth;o<n&&!u.includes(p)?(p=p.includes("&shareUrl=true")?p:p+"&ShareUrl=true",u=e[t].src=p):n<=o&&!u.includes(h)&&(h=h.includes("&shareUrl=true")?h:h+"&ShareUrl=true",u=e[t].src=h);var b=(i=!!u.includes(p))?d/l:r/s,a=i?l:s,g=!1;if(o<569&&b===16/9)e[t].style.width="568.88px",e[t].style.height="376px",g=!0;else if(o<=437&&b===4/3)e[t].style.width="426.66px",e[t].style.height="376px",g=!0;else if(o<320||o/b<320||a<320&&b!==16/9&&b!==4/3){var w=Math.max(o,320)/b;w<320?(e[t].style.width=320*b+"px",e[t].style.height="376px"):(e[t].style.width=o<320?"320px":o+"px",e[t].style.height=w+56+"px"),g=!0}else e[t].style.width="100%",e[t].style.height=Math.max(e[t].clientWidth/b,320)+56+"px";g&&console.warn("pbi-resize: requested iframe dimension is below the minimum supported dimensions. Minimum supported width is 320px. Minimum supported height is 376px. Change your Power BI report page size to ensure your content looks great when embedded in your web page or blog.")}};window.addEventListener("load",e),window.addEventListener("resize",e),runScript=e}}();</script>
</textarea>
<textarea id="tFrameMobile" style="display: none; height:300px; width:600px;" >
<iframe width="--CMW--px" height="--CMH--px" frameborder="0" allowFullScreen="true" pbi-resize="powerbi" pbi-resize-width="--PRW--" pbi-resize-height="--PRH--" pbi-resize-src="--PRS--" pbi-resize-min-width="--PRMW--" pbi-resize-m-width="--PRWM--" pbi-resize-m-height="--PRHM--" pbi-resize-m-src="--PRSM--" src="--URL--&shareUrl=true"></iframe>
<script type="text/javascript">var runScript=null;!function(){if("undefined"==typeof powerbiresize){powerbiresize=1;var e=function(){for(var e=document.querySelectorAll("[pbi-resize=powerbi]"),t=0;t<e.length;t++){e[t].style.width="100%";var i,r=e[t].getAttribute("pbi-resize-width"),s=e[t].getAttribute("pbi-resize-height"),n=e[t].getAttribute("pbi-resize-min-width"),h=e[t].getAttribute("pbi-resize-src"),d=e[t].getAttribute("pbi-resize-m-width"),l=e[t].getAttribute("pbi-resize-m-height"),p=e[t].getAttribute("pbi-resize-m-src"),u=e[t].getAttribute("src"),o=e[t].clientWidth;o<n&&!u.includes(p)?(p=p.includes("&shareUrl=true")?p:p+"&ShareUrl=true",u=e[t].src=p):n<=o&&!u.includes(h)&&(h=h.includes("&shareUrl=true")?h:h+"&ShareUrl=true",u=e[t].src=h);var b=(i=!!u.includes(p))?d/l:r/s,a=i?l:s,g=!1;if(o<569&&b===16/9)e[t].style.width="568.88px",e[t].style.height="376px",g=!0;else if(o<=437&&b===4/3)e[t].style.width="426.66px",e[t].style.height="376px",g=!0;else if(o<320||o/b<320||a<320&&b!==16/9&&b!==4/3){var w=Math.max(o,320)/b;w<320?(e[t].style.width=320*b+"px",e[t].style.height="376px"):(e[t].style.width=o<320?"320px":o+"px",e[t].style.height=w+56+"px"),g=!0}else e[t].style.width="100%",e[t].style.height=Math.max(e[t].clientWidth/b,320)+56+"px";g&&console.warn("pbi-resize: requested iframe dimension is below the minimum supported dimensions. Minimum supported width is 320px. Minimum supported height is 376px. Change your Power BI report page size to ensure your content looks great when embedded in your web page or blog.")}};window.addEventListener("load",e),window.addEventListener("resize",e),runScript=e}}();</script>
</textarea>
<div id="outputContainer" style="display: none; width: 100%;">
<h2>Your optimized embed code</h2>
<p>(copy and paste it into your web page)</p>
<textarea id="oFrame" style="display: inline-block; height:220px; width:70%;" onclick="this.select()" ></textarea>
<br>
<br>
<button onclick="showResult();">Show me how it looks</button>
<br>
<br>
<div id="result" style="width: 70%; height:auto;"></div>
</div>
<br>
<br>
<br>
<a href="#i" onclick="showInstructions();">show instructions</a>
<br>
<br>
<br>
</center>
<div id="instructions" style="display: none; background-color: #FFF2F2; width: 100%;">
<h1 id="i">Instructions</h1>
<p>The iFrame below is sized to optimally fit its the container, based on first page <b>proportion</b>.</p>
<p><b>Before You Start</b>
<ul>
<li>Get the report <b>Page Width</b> and <b>Page Height</b> of your report page. Select the page in Power BI desktop or when editing the report in PowerBI.com then find the <b>Page Size</b> properties.</li>
<br>
<img alt="PageSize-Image" src="data:image/png;base64,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">
<br><br>
<li>Determine the <b>Content Minimum Width</b>, this is the smallest width at which your content will be presented. If you're syndicating your content, this will be the size of the content if the syndication engine removes the provided JavaScript. You can get this width from your web page team, they might refer to it as the column width. If you don't know this, use 600px or 800px.</li>
<blockquote>
<p><b>Important:</b>The minimum iFrame widths are as follows. If your Content Minimum Width is lower than these, change your page size in your Power BI file. When working with smaller iFrames, using the "custom" page size option, then setting the page height and width to 800px x 800px or 900px x 900px (square) often works well across devices and form factors.</p>
<ul>
<li>For 16:9 page size, the minimum iFrame width is 568.88px.</li>
<li>For 4:3 page size, the minimum iFrame width is 426.66px.</li>
<li>The absolute minimum iFrame width is 320px.</li>
<li>The absolute minimum iFrame height is 376px, which allows 320px for report content and 56px for the Power BI bottom bar.
</li>
</ul>
<p>The iFrame code will ensure the minimum sizes are enforced, potentially resulting in Power BI Content being cut off in your page. Adjust the page size in the report file to get narrower iFrames, down to the limit of 320px wide.</p>
<p>Power BI scales your report to fit the available space in the iFrame. This will scale your content proportionally based on iFrame size. The page size in your report adjust how big the fonts and UI contols appear within the available space. For example, if most of your users consume the content on mobile, setting a smaller page size will make the content more readable.</p>
</blockquote>
<br>
<li>Get the <b>Power BI Embed Code</b> for your Power BI report. <a href="https://powerbi.microsoft.com/en-us/documentation/powerbi-learning-6-6-publish-to-web/">Here's how.</a></li>
<br>
<li>Copy the optimized embed code and paste it into your HTML page.</li>
<br>
<li>Some content management systems don't allow the JavaScript to run. The minimum content width you specify will be used to size the report in this case.</li>
<br>
<li>The optimized embed code also shares your web page's URL when the user presses the 'Share' button in Power BI's tool bar. This drives more traffic to your page. Neat.</li>
</ul>
</p>
<br><br>
<center>
<a href="#di" onclick="showDetailInstructions();">how it works</a>
</center>
<div id="detailInstructions" style="display: none;">
<h1>Technical Details</h1>
<p>Start with the report page width and height. Use it to create a proportion as follows:</p>
<blockquote style="background-color: #FFF2D0;">
<b>Proportion</b> = (Report Page <b>Height</b>)/(Report Page <b>Width</b>)
</blockquote>
<ul>
<li>If your page size is set to 16:9, the proportion is <b>0.5625</b></li>
<li>If your page size is set to 4:3, the proportion is <b>0.75</b></li>
<li>If you set a specific page size, you'll need to calulate the proportion</li>
</ul>
<p>Now, calculate the iFrame <b>Content Minimum Height</b> as follows:</p>
<blockquote style="background-color: #FFF2D0;">
<b>Content Minimum Height</b> = (Content Minimum Width) * (Proportion) + 56
</blockquote>
<ul>
<li>Adding 56 provides room for the Power BI bottom bar.</li>
</ul>
<p>Annotate your iFrame as follows:
<ol>
<li>set the iframe width attribute to the <b>Content Minimum Width</b>: <b>width="600px"</b> <i>Note: add 'px' to the number to indicate pixels</i>
<li>set the iframe height attribute to the <b>Content Minimum Height</b>: <b>height="393.5px"</b> <i>Note: the example assumes a 16:9 width:height ratio</i>
<li>add the attribute: <b>pbi-resize="powerbi"</b></li>
<li>add the attribute: <b>pbi-resize-width="pageWidth"</b></li>
<li>add the attribute: <b>pbi-resize-height="pageHeight"</b></li>
<li>append the shareUrl query string parameter to the iFrame <b>src</b> Url: <b>&shareUrl=true</b>
<li>add the JavaScript specified below to the page.</li>
</ol>
</p>
<h3 id="rjs">Required JavaScript</h3>
<p>Place the following JavaScript on the page.</p>
<blockquote style="background-color: #FFF2D0;">
<pre>
<script type="text/javascript">
!function(){
//return;
if("undefined"==typeof powerbiresize){
powerbiresize=1;
var e=function(){
for(var e=document.querySelectorAll("[pbi-resize=powerbi]"),i=0;i<e.length;i++){
e[i].style.width= "100%";
var w = e[i].getAttribute("pbi-resize-width");
var h = e[i].getAttribute("pbi-resize-height");
var aw = e[i].clientWidth;
var p = w/h;
var p169 = 16.0/9.0;
var p43 = 4.0/3.0;
debugger;
var warn = false;
if(aw < 569 && p===p169)
{
e[i].style.width = "568.88px";
e[i].style.height = 320 +56+ "px";
warn = true;
}
else if(aw<=437 && p===p43)
{
e[i].style.width = "426.66px";
e[i].style.height = 320 + 56 + "px";
warn = true;
}
else if (aw < 320 || aw/p < 320 || (h < 320 && p!==p169 && p!==p43 ))
{
var mh = Math.max(aw,320) / p;
if(mh < 320)
{
e[i].style.width = 320 * p + "px";
e[i].style.height = 320 + 56 + "px";
}
else if (aw < 320)
{
e[i].style.width = 320 + "px";
e[i].style.height = mh + 56 + "px";
}
else
{
e[i].style.width = aw + "px";
e[i].style.height = mh + 56 + "px";
}
warn = true;
}
else
{
e[i].style.width= "100%";
e[i].style.height = Math.max(e[i].clientWidth/p,320)+56+"px";
}
if(warn){
console.warn("pbi-resize: requested iframe dimension is below the minimum supported dimensions. Minimum supported width is 320px. Minimum supported height is 376px. Change your Power BI report page size to ensure your content looks great when embedded in your web page or blog.");
}
}
};
window.addEventListener("load",e);
window.addEventListener("resize",e);
}
}();
</script>
</pre>
</blockquote>
</div>
<script type="text/javascript">
function generateEmbedCode()
{
//debugger;
var cmw = document.getElementById("cmw").value;
var pbirw = document.getElementById("pbirw").value;
var pbirh = document.getElementById("pbirh").value;
var url = document.getElementById("url").value;
var isMobile = document.getElementById("isMobile").value;
var pbirwM = document.getElementById("pbirwM").value;
var pbirhM = document.getElementById("pbirhM").value;
var urlM = document.getElementById("urlM").value;
var template = document.getElementById("tFrame").value;
var templateM = document.getElementById("tFrameMobile").value;
var oFrameElement = document.getElementById("oFrame");
var outputContainerElement = document.getElementById("outputContainer");
var cmh = cmw * pbirh / pbirw + 56;
if(url === "")
{
alert("Please provide a Power BI Embed code.");
return;
}
var output = template
.replace("--CMW--", cmw)
.replace("--CMH--", cmh)
.replace("--PRW--", pbirw)
.replace("--PRH--", pbirh)
.replace("--URL--", url);
var outputM = templateM
.replace("--CMW--", cmw)
.replace("--CMH--", cmh)
.replace("--PRW--", pbirw)
.replace("--PRH--", pbirh)
.replace("--URL--", url)
.replace("--PRS--", url)
.replace("--PRMW--", cmw)
.replace("--PRWM--", pbirwM)
.replace("--PRHM--", pbirhM)
.replace("--PRSM--", urlM);
if(isMobile=1)
{oFrameElement.value = outputM;}
else
{oFrameElement.value = output;}
outputContainerElement.style.display = 'inline-block';
};
function insert(example)
{
var sn = "https://app.powerbi.com/view?r=eyJrIjoiZDZlYmM1ZTQtYTBkZi00OGYzLThiNmUtMDU5Nzc0NDVjNTIyIiwidCI6IjNkODE4OGM4LTc3NTgtNDYzYy1iYjNmLTBlMTYwZGUzMzYwZiIsImMiOjN9";
var ft = "https://app.powerbi.com/view?r=eyJrIjoiODc4ZjNjNzItZDE5ZC00NTkxLWEwNTEtNzc5OTI3ZTA4NWUxIiwidCI6IjcyZjk4OGJmLTg2ZjEtNDFhZi05MWFiLTJkN2NkMDExZGI0NyIsImMiOjV9";
var cps = "https://app.powerbi.com/view?r=eyJrIjoiNjZlOWZlMmMtMjE2ZS00OTM5LWFmYTAtNmI4MjBlNjk3NDg2IiwidCI6IjNlN2ZjNjM1LTkxOTAtNDFmMC04MDZiLWI4OWIwZmJkNzU5ZSIsImMiOjF9";
switch(example)
{
case "e169":
writeExample("600", 16, 9, sn);
break;
case "e43":
writeExample("600", 4, 3, ft);
break;
case "ecp":
writeExample("600", 900, 930, cps);
break;
case "reset":
writeExample("600", 16, 9, "");
document.getElementById("result").innerHTML = "";
document.getElementById("outputContainer").style.display = 'none';
break;
}
}
function writeExample(contentMinimumWidth, pageWidth, PageHeight, embedCode)
{
document.getElementById("cmw").value = contentMinimumWidth;
document.getElementById("pbirw").value = pageWidth;
document.getElementById("pbirh").value = PageHeight;
document.getElementById("url").value = embedCode;
document.getElementById("oFrame").value = "";
}
function showResult(){
document.getElementById("result").innerHTML = document.getElementById("oFrame").value;
runScript();
}
function showInstructions()
{
debugger;
//document.getElementById("instructions").style = "display: inline-block; background-color: #FFF2F2;";
document.getElementById("instructions").style.display = 'inline-block';
}
function showDetailInstructions()
{
document.getElementById("detailInstructions").style.display = 'inline-block';
}
</script>
<script type="text/javascript">
var runScript = null;
!function(){
//return;
if("undefined"==typeof powerbiresize){
powerbiresize=1;
var e=function(){
for(var e=document.querySelectorAll("[pbi-resize=powerbi]"),i=0;i<e.length;i++){
e[i].style.width= "100%";
var w = e[i].getAttribute("pbi-resize-width");
var h = e[i].getAttribute("pbi-resize-height");
var wMin = e[i].getAttribute("pbi-resize-min-width");
var srcW = e[i].getAttribute("pbi-resize-src");
var wM = e[i].getAttribute("pbi-resize-m-width");
var hM = e[i].getAttribute("pbi-resize-m-height");
var srcM = e[i].getAttribute("pbi-resize-m-src");
var srcCurrent = e[i].getAttribute("src");
var aw = e[i].clientWidth;
var showMobile = false;
//show web or mobile view
if(aw < wMin && !srcCurrent.includes(srcM))
{
srcM = (srcM.includes("&shareUrl=true"))? srcM : srcM + "&ShareUrl=true";
e[i].src = srcM;
srcCurrent = srcM;
}
else if (aw >= wMin && !srcCurrent.includes(srcW))
{
srcW = (srcW.includes("&shareUrl=true"))? srcW : srcW + "&ShareUrl=true";
e[i].src = srcW;
srcCurrent = srcW;
}
showMobile = (srcCurrent.includes(srcM))? true : false;
var p = (showMobile)? wM/hM : w/h;
var cH = (showMobile)? hM : h;
var p169 = 16.0/9.0;
var p43 = 4.0/3.0;
debugger;
var warn = false;
if(aw < 569 && p===p169)
{
e[i].style.width = "568.88px";
e[i].style.height = 320 +56+ "px";
warn = true;
}
else if(aw<=437 && p===p43)
{
e[i].style.width = "426.66px";
e[i].style.height = 320 + 56 + "px";
warn = true;
}
else if (aw < 320 || aw/p < 320 || (cH < 320 && p!==p169 && p!==p43 ) )
{
var mh = Math.max(aw,320) / p;
if(mh < 320)
{
e[i].style.width = 320 * p + "px";
e[i].style.height = 320 + 56 + "px";
}
else if (aw < 320)
{
e[i].style.width = 320 + "px";
e[i].style.height = mh + 56 + "px";
}
else
{
e[i].style.width = aw + "px";
e[i].style.height = mh + 56 + "px";
}
warn = true;
}
else
{
e[i].style.width= "100%";
e[i].style.height = Math.max(e[i].clientWidth/p,320)+56+"px";
}
if(warn){
console.warn("pbi-resize: requested iframe dimension is below the minimum supported dimensions. Minimum supported width is 320px. Minimum supported height is 376px. Change your Power BI report page size to ensure your content looks great when embedded in your web page or blog.");
}
}
};
window.addEventListener("load",e);
window.addEventListener("resize",e);
runScript = e;
}
}();
</script>
</body>
</html>