# How do i make a plot over a picture

**URL:** <https://scilab.discourse.group/t/how-do-i-make-a-plot-over-a-picture/940>\
**Category:** Graphics and plotting\
**Created:** [May 7, 2025, 9:52am UTC](https://scilab.discourse.group/t/how-do-i-make-a-plot-over-a-picture/940 "2025-05-07T09:52:47Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![pascal](https://yyz2.discourse-cdn.com/free1/user_avatar/scilab.discourse.group/pascal/32/40_2.png) [@pascal](https://scilab.discourse.group/u/pascal)\
**Post date:** [May 7, 2025, 9:52am UTC](https://scilab.discourse.group/t/how-do-i-make-a-plot-over-a-picture/940/1 "2025-05-07T09:52:47Z")

</div>

Hi Scilab Team,

how can i plot a polyline by plot(x,y) over a picture plotted by uicontrol.

 ![image](https://global.discourse-cdn.com/free1/uploads/utc/original/1X/72f3828e35b0190228dccbeda44b83b4d365332d.jpeg)

is it the order of the code, first plot than picture or is there some layer function?

M.f.G. Pascal

---

<div class="post-metadata">

**Author:** ![mottelet](https://yyz2.discourse-cdn.com/free1/user_avatar/scilab.discourse.group/mottelet/32/13_2.png) [@mottelet](https://scilab.discourse.group/u/mottelet)\
**Post date:** [May 7, 2025, 11:41am UTC](https://scilab.discourse.group/t/how-do-i-make-a-plot-over-a-picture/940/2 "2025-05-07T11:41:02Z")

</div>

Hello,

There is no way to plot over an uicontrol image. However, this is possible if the image is displayed by using Matplot, but the image has to be read by using imread, which implies that you must have IPCV or Scicv toolbox. For example:

```auto
clf
http_get("https://www.fileformat.info/format/jpeg/sample/0c047d42fdfb419e86c594f0f7ad3ce1/SPACE.JPG","space.jpg",follow=%t);
x=imread("space.jpg");
Matplot1(x,[0 0 10 2]).data=x;
t=0:0.01:10;
plot(t,1+sin(2*t),'r',"thickness",2)

```

the recursive assignment above (Matplot1 call) is necessary because there is a bug in Matplot1 implementation.

 ![img](https://global.discourse-cdn.com/free1/uploads/utc/original/1X/2b7b97dfb3094359556b67b06333e91bcaf91a2a.jpeg)

---

<div class="post-metadata">

**Author:** ![pascal](https://yyz2.discourse-cdn.com/free1/user_avatar/scilab.discourse.group/pascal/32/40_2.png) [@pascal](https://scilab.discourse.group/u/pascal)\
**Post date:** [May 7, 2025, 11:53am UTC](https://scilab.discourse.group/t/how-do-i-make-a-plot-over-a-picture/940/3 "2025-05-07T11:53:52Z")

</div>

ok, i hoped that there was something without using an Atom-package.

thank for the quick reply. 🙂

M.f.g. Pascal

---

<div class="post-metadata">

**Author:** ![philipp](https://yyz2.discourse-cdn.com/free1/user_avatar/scilab.discourse.group/philipp/32/53_2.png) [@philipp](https://scilab.discourse.group/u/philipp)\
**Post date:** [May 7, 2025, 10:22pm UTC](https://scilab.discourse.group/t/how-do-i-make-a-plot-over-a-picture/940/4 "2025-05-07T22:22:08Z")

</div>

Well,  
as mentioned above: Using an Image Prcessing toolbox is the easy way.  
But: If you strictly want to avoid that you may try this:

```auto
f = figure();
x = linspace(0,20,200);
plot(x,sin(x))
e = gce();
c = e.children;
h = xstring(0,-1,"$\scalebox{1}{\includegraphics{path-to-your-image}}$");
c.data(:,3) = 0.1; // <<<==== HERE, use the "z" value > 0, to put the plot "on top" of the image
c.thickness = 2;

```

 ![grafik](https://global.discourse-cdn.com/free1/uploads/utc/original/1X/75c597deefcc595574abbb2fa232f182cbf77bc5.jpeg)

Found this workaround here:

> **[\[Scilab-users\] Put an image as the background of an axis](https://users.scilab.narkive.com/F5lyv4lm/scilab-put-an-image-as-the-background-of-an-axis#post11)**

BR  
Philipp

---

<div class="post-metadata">

**Author:** ![pascal](https://yyz2.discourse-cdn.com/free1/user_avatar/scilab.discourse.group/pascal/32/40_2.png) [@pascal](https://scilab.discourse.group/u/pascal)\
**Post date:** [May 8, 2025, 6:05am UTC](https://scilab.discourse.group/t/how-do-i-make-a-plot-over-a-picture/940/5 "2025-05-08T06:05:31Z")

</div>

does it also works with uicontrol than xstring?

---

<div class="post-metadata">

**Author:** ![pascal](https://yyz2.discourse-cdn.com/free1/user_avatar/scilab.discourse.group/pascal/32/40_2.png) [@pascal](https://scilab.discourse.group/u/pascal)\
**Post date:** [May 8, 2025, 6:13am UTC](https://scilab.discourse.group/t/how-do-i-make-a-plot-over-a-picture/940/6 "2025-05-08T06:13:49Z")

</div>

works 🙂 like you propose.

---

<div class="post-metadata">

**Author:** ![pascal](https://yyz2.discourse-cdn.com/free1/user_avatar/scilab.discourse.group/pascal/32/40_2.png) [@pascal](https://scilab.discourse.group/u/pascal)\
**Post date:** [June 2, 2025, 2:03pm UTC](https://scilab.discourse.group/t/how-do-i-make-a-plot-over-a-picture/940/7 "2025-06-02T14:03:46Z")

</div>

with JCEF and Browser i could manage this:

f1 = figure(“infobar\_visible”,“on”,“toolbar\_visible”,“on”,“dockable”,“on”,“menubar\_visible”,“on”,“default\_axes”,“off”,“axes\_size”,[1200,900],“layout”,“border”,“resize”,“on”,“tag”,“com”);

fr = uicontrol(f1, “style”,“frame”,“backgroundcolor”, [1 1 1],“layout”,“border”);

```
html=[...
"<!DOCTYPE html>"
"<html lang=''en''>"
    "<head>"
    "<meta charset=''UTF-8''>"
    "<meta name=''viewport'' content=''width=device-width, initial-scale=1.0''>"
    "<title>Overlay Images</title>"
    "<style>"
    " .image-container {"
    " position: fixed;"
    " right:0;bottom:0;"
    " width: 903px;"
    " height: 638px;"
    " }"
    " .background {"
    " position: fixed;"
    " right:0;bottom:0;"
    " z-index: 1;"
    " width: 100%;"
    " height: 100%;"
    " opacity: 1.0;"
    " }"
    " .foreground {"
    " position: fixed;"
    " left:-192px;bottom:-33px;"
    " z-index: 2;"
    " width: 130%;"
    " height: 118%;"
    " opacity: 0.5;"
    " }"
    "</style>"
    "</head>"
    "<body>"
    " <div class=''image-container''>"
    " <img src=''C:\Users\buehlpas\Documents\Scilab\FH_50.png'' alt=''Background Image'' class=''background''>"
    " <img src=''C:\Users\buehlpas\Documents\Scilab\GV_VWI.svg'' alt=''Foreground Image'' class=''foreground''>"
    " </div>"
    "</body>"
"</html>"];

```

mputl(html,TMPDIR+“/com.html”);  
browser = uicontrol(fr,“style”,“browser”,“debug”, “on”,“string”,TMPDIR+“/com.html”,“callback”, “”,“tag”, “browser”);

as an example