Thanks to visit codestin.com
Credit goes to github.com

Skip to content

Commit 6c56807

Browse files
michaelbabynmichaelbabyn
authored
Merge pull request plotly#1161 from plotly/interactive-facial-overlay-make-zoomable
fix zooming on interactive facial overlays example
2 parents ca38130 + 015e94f commit 6c56807

File tree

2 files changed

+68
-56
lines changed

2 files changed

+68
-56
lines changed

‎_posts/python/style/images/2015-06-30-images.html

Lines changed: 34 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -346,7 +346,7 @@ <h4 id="Zoom-on-Static-Images">Zoom on Static Images<a class="anchor-link" href=
346346
<span class="n">yaxis</span> <span class="o">=</span> <span class="n">go</span><span class="o">.</span><span class="n">layout</span><span class="o">.</span><span class="n">YAxis</span><span class="p">(</span>
347347
<span class="n">visible</span><span class="o">=</span><span class="kc">False</span><span class="p">,</span>
348348
<span class="nb">range</span> <span class="o">=</span> <span class="p">[</span><span class="mi">0</span><span class="p">,</span> <span class="n">img_height</span><span class="o">*</span><span class="n">scale_factor</span><span class="p">],</span>
349-
<span class="c1"># the scaleanchor attribute ensures that the aspect ratio stays constant</span>
349+
<span class="c1"># the scaleanchor attribute ensures that the aspect ratio stays constant</span>
350350
<span class="n">scaleanchor</span> <span class="o">=</span> <span class="s1">&#39;x&#39;</span><span class="p">),</span>
351351
<span class="n">width</span> <span class="o">=</span> <span class="n">img_width</span><span class="o">*</span><span class="n">scale_factor</span><span class="p">,</span>
352352
<span class="n">height</span> <span class="o">=</span> <span class="n">img_height</span><span class="o">*</span><span class="n">scale_factor</span><span class="p">,</span>
@@ -387,7 +387,7 @@ <h4 id="Zoom-on-Static-Images">Zoom on Static Images<a class="anchor-link" href=
387387

388388

389389
<div class="output_html rendered_html output_subarea output_execute_result">
390-
<iframe id="igraph" scrolling="no" style="border:none;" seamless="seamless" src="https://plot.ly/~michaelbabyn/184.embed" height="450.0px" width="800.0px"></iframe>
390+
<iframe id="igraph" scrolling="no" style="border:none;" seamless="seamless" src="https://plot.ly/~PythonPlotBot/2841.embed" height="450.0px" width="800.0px"></iframe>
391391
</div>
392392

393393
</div>
@@ -427,6 +427,7 @@ <h4 id="Interactive-Facial-Recognition-Overlays">Interactive Facial Recognition
427427
<span class="kn">import</span> <span class="nn">numpy</span> <span class="k">as</span> <span class="nn">np</span>
428428
<span class="kn">import</span> <span class="nn">dlib</span>
429429

430+
430431
<span class="c1">#load dlib&#39;s pretrained face detector</span>
431432
<span class="n">cnn_human_detector</span> <span class="o">=</span> <span class="n">dlib</span><span class="o">.</span><span class="n">cnn_face_detection_model_v1</span><span class="p">(</span><span class="s1">&#39;mmod_human_face_detector.dat&#39;</span><span class="p">)</span>
432433

@@ -442,31 +443,36 @@ <h4 id="Interactive-Facial-Recognition-Overlays">Interactive Facial Recognition
442443
<span class="n">dog_dets</span> <span class="o">=</span> <span class="n">cnn_dog_detector</span><span class="p">(</span><span class="n">img</span><span class="p">,</span> <span class="mi">1</span><span class="p">)</span>
443444

444445
<span class="n">layout</span><span class="o">=</span> <span class="n">go</span><span class="o">.</span><span class="n">Layout</span><span class="p">(</span>
445-
<span class="n">xaxis</span> <span class="o">=</span> <span class="n">go</span><span class="o">.</span><span class="n">layout</span><span class="o">.</span><span class="n">XAxis</span><span class="p">(</span><span class="n">showticklabels</span> <span class="o">=</span> <span class="kc">False</span><span class="p">,</span>
446-
<span class="n">showgrid</span><span class="o">=</span><span class="kc">False</span><span class="p">,</span>
447-
<span class="n">zeroline</span><span class="o">=</span><span class="kc">False</span><span class="p">,</span>
448-
<span class="nb">range</span> <span class="o">=</span> <span class="p">[</span><span class="mi">0</span><span class="p">,</span><span class="n">img</span><span class="o">.</span><span class="n">shape</span><span class="p">[</span><span class="mi">1</span><span class="p">]]</span>
449-
<span class="p">),</span>
450-
<span class="n">yaxis</span> <span class="o">=</span> <span class="n">go</span><span class="o">.</span><span class="n">layout</span><span class="o">.</span><span class="n">YAxis</span><span class="p">(</span><span class="n">showticklabels</span> <span class="o">=</span> <span class="kc">False</span><span class="p">,</span>
451-
<span class="n">showgrid</span><span class="o">=</span><span class="kc">False</span><span class="p">,</span>
452-
<span class="n">zeroline</span><span class="o">=</span><span class="kc">False</span><span class="p">,</span>
453-
<span class="nb">range</span> <span class="o">=</span> <span class="p">[</span><span class="mi">0</span><span class="p">,</span><span class="n">img</span><span class="o">.</span><span class="n">shape</span><span class="p">[</span><span class="mi">0</span><span class="p">]]</span>
454-
<span class="p">),</span>
455-
<span class="n">autosize</span><span class="o">=</span><span class="kc">False</span><span class="p">,</span>
456-
<span class="n">height</span><span class="o">=</span><span class="n">img</span><span class="o">.</span><span class="n">shape</span><span class="p">[</span><span class="mi">0</span><span class="p">],</span>
457-
<span class="n">width</span><span class="o">=</span><span class="n">img</span><span class="o">.</span><span class="n">shape</span><span class="p">[</span><span class="mi">1</span><span class="p">],</span>
458-
<span class="n">images</span><span class="o">=</span> <span class="p">[</span><span class="nb">dict</span><span class="p">(</span>
459-
<span class="n">source</span><span class="o">=</span> <span class="s2">&quot;https://raw.githubusercontent.com/michaelbabyn/plot_data/master/beethoven.jpg&quot;</span><span class="p">,</span>
460-
<span class="n">xref</span><span class="o">=</span> <span class="s2">&quot;paper&quot;</span><span class="p">,</span>
461-
<span class="n">yref</span><span class="o">=</span> <span class="s2">&quot;paper&quot;</span><span class="p">,</span>
462-
<span class="n">x</span><span class="o">=</span> <span class="mi">0</span><span class="p">,</span>
463-
<span class="n">y</span><span class="o">=</span> <span class="mi">1</span><span class="p">,</span>
464-
<span class="n">sizex</span><span class="o">=</span> <span class="mi">1</span><span class="p">,</span>
465-
<span class="n">sizey</span><span class="o">=</span> <span class="mi">1</span><span class="p">,</span>
466-
<span class="n">sizing</span><span class="o">=</span> <span class="s2">&quot;stretch&quot;</span><span class="p">,</span>
467-
<span class="n">opacity</span><span class="o">=</span> <span class="mi">1</span><span class="p">,</span>
468-
<span class="n">layer</span><span class="o">=</span> <span class="s2">&quot;below&quot;</span><span class="p">)]</span>
469-
<span class="p">)</span>
446+
<span class="n">xaxis</span> <span class="o">=</span> <span class="n">go</span><span class="o">.</span><span class="n">layout</span><span class="o">.</span><span class="n">XAxis</span><span class="p">(</span>
447+
<span class="n">showticklabels</span> <span class="o">=</span> <span class="kc">False</span><span class="p">,</span>
448+
<span class="n">showgrid</span><span class="o">=</span><span class="kc">False</span><span class="p">,</span>
449+
<span class="n">zeroline</span><span class="o">=</span><span class="kc">False</span><span class="p">,</span>
450+
<span class="nb">range</span> <span class="o">=</span> <span class="p">[</span><span class="mi">0</span><span class="p">,</span> <span class="n">img</span><span class="o">.</span><span class="n">shape</span><span class="p">[</span><span class="mi">1</span><span class="p">]]</span>
451+
<span class="p">),</span>
452+
<span class="n">yaxis</span> <span class="o">=</span> <span class="n">go</span><span class="o">.</span><span class="n">layout</span><span class="o">.</span><span class="n">YAxis</span><span class="p">(</span>
453+
<span class="n">showticklabels</span> <span class="o">=</span> <span class="kc">False</span><span class="p">,</span>
454+
<span class="n">showgrid</span><span class="o">=</span><span class="kc">False</span><span class="p">,</span>
455+
<span class="n">zeroline</span><span class="o">=</span><span class="kc">False</span><span class="p">,</span>
456+
<span class="nb">range</span> <span class="o">=</span> <span class="p">[</span><span class="mi">0</span><span class="p">,</span> <span class="n">img</span><span class="o">.</span><span class="n">shape</span><span class="p">[</span><span class="mi">0</span><span class="p">]],</span>
457+
<span class="n">scaleanchor</span> <span class="o">=</span> <span class="s1">&#39;x&#39;</span>
458+
<span class="p">),</span>
459+
<span class="n">autosize</span><span class="o">=</span><span class="kc">False</span><span class="p">,</span>
460+
<span class="n">height</span><span class="o">=</span><span class="n">img</span><span class="o">.</span><span class="n">shape</span><span class="p">[</span><span class="mi">0</span><span class="p">],</span>
461+
<span class="n">width</span><span class="o">=</span><span class="n">img</span><span class="o">.</span><span class="n">shape</span><span class="p">[</span><span class="mi">1</span><span class="p">],</span>
462+
<span class="n">margin</span> <span class="o">=</span> <span class="p">{</span><span class="s1">&#39;l&#39;</span><span class="p">:</span> <span class="mi">0</span><span class="p">,</span> <span class="s1">&#39;r&#39;</span><span class="p">:</span> <span class="mi">0</span><span class="p">,</span> <span class="s1">&#39;t&#39;</span><span class="p">:</span> <span class="mi">0</span><span class="p">,</span> <span class="s1">&#39;b&#39;</span><span class="p">:</span> <span class="mi">0</span><span class="p">},</span>
463+
<span class="n">images</span><span class="o">=</span> <span class="p">[</span><span class="nb">dict</span><span class="p">(</span>
464+
<span class="n">source</span><span class="o">=</span> <span class="s2">&quot;https://raw.githubusercontent.com/michaelbabyn/plot_data/master/beethoven.jpg&quot;</span><span class="p">,</span>
465+
<span class="n">x</span><span class="o">=</span><span class="mi">0</span><span class="p">,</span>
466+
<span class="n">sizex</span><span class="o">=</span><span class="n">img</span><span class="o">.</span><span class="n">shape</span><span class="p">[</span><span class="mi">1</span><span class="p">],</span>
467+
<span class="n">y</span><span class="o">=</span><span class="n">img</span><span class="o">.</span><span class="n">shape</span><span class="p">[</span><span class="mi">0</span><span class="p">],</span>
468+
<span class="n">sizey</span><span class="o">=</span><span class="n">img</span><span class="o">.</span><span class="n">shape</span><span class="p">[</span><span class="mi">0</span><span class="p">],</span>
469+
<span class="n">xref</span><span class="o">=</span><span class="s2">&quot;x&quot;</span><span class="p">,</span>
470+
<span class="n">yref</span><span class="o">=</span><span class="s2">&quot;y&quot;</span><span class="p">,</span>
471+
<span class="n">opacity</span><span class="o">=</span><span class="mf">1.0</span><span class="p">,</span>
472+
<span class="n">layer</span><span class="o">=</span><span class="s2">&quot;below&quot;</span><span class="p">,</span>
473+
<span class="n">sizing</span><span class="o">=</span><span class="s2">&quot;stretch&quot;</span>
474+
<span class="p">)]</span>
475+
<span class="p">)</span>
470476

471477
<span class="n">humans</span><span class="o">=</span><span class="p">[</span>
472478
<span class="n">go</span><span class="o">.</span><span class="n">Scatter</span><span class="p">(</span>
@@ -512,7 +518,7 @@ <h4 id="Interactive-Facial-Recognition-Overlays">Interactive Facial Recognition
512518

513519

514520
<div class="output_html rendered_html output_subarea output_execute_result">
515-
<iframe id="igraph" scrolling="no" style="border:none;" seamless="seamless" src="https://plot.ly/~michaelbabyn/152.embed" height="388px" width="561px"></iframe>
521+
<iframe id="igraph" scrolling="no" style="border:none;" seamless="seamless" src="https://plot.ly/~PythonPlotBot/2843.embed" height="388px" width="561px"></iframe>
516522
</div>
517523

518524
</div>

‎_posts/python/style/images/images.ipynb

Lines changed: 34 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -288,7 +288,7 @@
288288
{
289289
"data": {
290290
"text/html": [
291-
"<iframe id=\"igraph\" scrolling=\"no\" style=\"border:none;\" seamless=\"seamless\" src=\"https://plot.ly/~michaelbabyn/184.embed\" height=\"450.0px\" width=\"800.0px\"></iframe>"
291+
"<iframe id=\"igraph\" scrolling=\"no\" style=\"border:none;\" seamless=\"seamless\" src=\"https://plot.ly/~PythonPlotBot/2841.embed\" height=\"450.0px\" width=\"800.0px\"></iframe>"
292292
],
293293
"text/plain": [
294294
"<plotly.tools.PlotlyDisplay object>"
@@ -314,7 +314,7 @@
314314
" yaxis = go.layout.YAxis(\n",
315315
" visible=False,\n",
316316
" range = [0, img_height*scale_factor],\n",
317-
"# the scaleanchor attribute ensures that the aspect ratio stays constant\n",
317+
" # the scaleanchor attribute ensures that the aspect ratio stays constant\n",
318318
" scaleanchor = 'x'),\n",
319319
" width = img_width*scale_factor,\n",
320320
" height = img_height*scale_factor,\n",
@@ -368,7 +368,7 @@
368368
{
369369
"data": {
370370
"text/html": [
371-
"<iframe id=\"igraph\" scrolling=\"no\" style=\"border:none;\" seamless=\"seamless\" src=\"https://plot.ly/~michaelbabyn/152.embed\" height=\"388px\" width=\"561px\"></iframe>"
371+
"<iframe id=\"igraph\" scrolling=\"no\" style=\"border:none;\" seamless=\"seamless\" src=\"https://plot.ly/~PythonPlotBot/2843.embed\" height=\"388px\" width=\"561px\"></iframe>"
372372
],
373373
"text/plain": [
374374
"<plotly.tools.PlotlyDisplay object>"
@@ -386,6 +386,7 @@
386386
"import numpy as np\n",
387387
"import dlib\n",
388388
"\n",
389+
"\n",
389390
"#load dlib's pretrained face detector\n",
390391
"cnn_human_detector = dlib.cnn_face_detection_model_v1('mmod_human_face_detector.dat')\n",
391392
"\n",
@@ -401,31 +402,36 @@
401402
"dog_dets = cnn_dog_detector(img, 1)\n",
402403
"\n",
403404
"layout= go.Layout(\n",
404-
" xaxis = go.layout.XAxis(showticklabels = False,\n",
405-
" showgrid=False,\n",
406-
" zeroline=False,\n",
407-
" range = [0,img.shape[1]]\n",
408-
" ),\n",
409-
" yaxis = go.layout.YAxis(showticklabels = False,\n",
410-
" showgrid=False,\n",
411-
" zeroline=False,\n",
412-
" range = [0,img.shape[0]]\n",
413-
" ),\n",
414-
" autosize=False,\n",
415-
" height=img.shape[0], \n",
416-
" width=img.shape[1],\n",
417-
" images= [dict(\n",
418-
" source= \"https://raw.githubusercontent.com/michaelbabyn/plot_data/master/beethoven.jpg\",\n",
419-
" xref= \"paper\",\n",
420-
" yref= \"paper\",\n",
421-
" x= 0,\n",
422-
" y= 1,\n",
423-
" sizex= 1,\n",
424-
" sizey= 1,\n",
425-
" sizing= \"stretch\",\n",
426-
" opacity= 1,\n",
427-
" layer= \"below\")]\n",
428-
" )\n",
405+
" xaxis = go.layout.XAxis(\n",
406+
" showticklabels = False,\n",
407+
" showgrid=False,\n",
408+
" zeroline=False,\n",
409+
" range = [0, img.shape[1]]\n",
410+
" ),\n",
411+
" yaxis = go.layout.YAxis(\n",
412+
" showticklabels = False,\n",
413+
" showgrid=False,\n",
414+
" zeroline=False,\n",
415+
" range = [0, img.shape[0]],\n",
416+
" scaleanchor = 'x'\n",
417+
" ),\n",
418+
" autosize=False,\n",
419+
" height=img.shape[0], \n",
420+
" width=img.shape[1],\n",
421+
" margin = {'l': 0, 'r': 0, 't': 0, 'b': 0},\n",
422+
" images= [dict(\n",
423+
" source= \"https://raw.githubusercontent.com/michaelbabyn/plot_data/master/beethoven.jpg\",\n",
424+
" x=0,\n",
425+
" sizex=img.shape[1],\n",
426+
" y=img.shape[0],\n",
427+
" sizey=img.shape[0],\n",
428+
" xref=\"x\",\n",
429+
" yref=\"y\",\n",
430+
" opacity=1.0,\n",
431+
" layer=\"below\",\n",
432+
" sizing=\"stretch\"\n",
433+
" )]\n",
434+
")\n",
429435
"\n",
430436
"humans=[\n",
431437
" go.Scatter(\n",

0 commit comments

Comments
 (0)