Show image in web page

[ottob]

I have created a plugin and want to display an image in a HS web page. And I am afraid I don't have to much web experience.
Creating page etc works fine but it will not load image. Security reasons maybe?

The image load code is:
stb.Append("<img src=" & ControlChars.Quote + "pricechart.png" & ControlChars.Quote & " width =" & ControlChars.Quote & "1024" & ControlChars.Quote & " height=" & ControlChars.Quote & "480" & ControlChars.Quote & ">")

I have tried to save image in all thinkable folders, as \html\images\pricechart.png and others. Also specifying path in html code.
Strange thing, it was working for a short time, but then I changed the file name, and suddenly it did not work any more.
It might have been that the page was buffered, and I did not close down Chrome at that time. I noticed that later that it was running old code if you did not close between tests.

Also: When you set up a web-page in HS: I assume HS has a build-in web-server. But what is the "home directory" for a web-page? Like for an ASP.NET server it should be C:\inetpub\
So I don't understand how HS is handlig web-pages in this aspect. I assume the image should be saved here?

I appreciate any help would be fine.

[jon00]

The HS web server references off the html directory.

For an image (placed in the html/images folder) all you need is:

 stb.Append("<img src='/images/pricechart.png' width='1024' height='480'>")

The more standard way to do this now is use:

stb.Append("<img src='/images/pricechart.png' style='width: 1024px; height: 480px;'>")

I will add both a " and ' are valid in html.

If you wanted to use quotes, just use:

 stb.Append("<img src=""/images/pricechart.png"" style=""width: 1024px; height: 480px;"">")

[pseudocode]

For a plugin everything should be in a folder named for your plugin ID inside the html folder, e.g.

homeseer/html/pluginid/mypage.html
homeseer/html/pluginid/image.png

If you want to you can create a subfolder for images, pretty much anything is OK your html/pluginid folder.

As Jon said, the root for HomeSeer web pages overall is homeseer/html - so your page would be accessed at http://(homeseer ip)/pluginid/mypage.html

But the root for an html page is the path of the page itself, so on that page you just need to use <img src="image.png"> to embed an image in the same folder.

[jon00]

For a plugin everything should be in a folder named for your plugin ID inside the html folder, e.g.

homeseer/html/pluginid/mypage.html
homeseer/html/pluginid/image.png

According to the docs: https://docs.homeseer.com/display/HS...ll+File+Format

Plugin images can be placed in:

homeseer/html/images/pluginid/image.png

Most PI's use this format.

[ottob]

jon00 and pseudocode Thanks a lot. I got it working now.
Worthwhile mentioning for other newbees:
I was a bit unsure if it was relative homeseer directory or relative the visual studio project dir I should put the image. I mean, that is where I have my plugin.exe.
But, it is relative homeseer directory.

[pseudocode]

According to the docs: https://docs.homeseer.com/display/HS...ll+File+Format

Plugin images can be placed in:

homeseer/html/images/pluginid/image.png

Most PI's use this format.

Actually that page says images/pluginid, not html/images/pluginid - but I'm fairly sure that's a typo and you are correct that it's below html.

I've found it's easier to have a clear root path at /pluginid and work from there, then everything is self-contained and things like build and packaging scripts are easier than having multiple folders to worry about.

A typical reason for having an images folder is for security - so only images can be served from there. Unfortunately HS doesn't do that, it's happy to serve html files from the images folder (which include lucid scripting tags), so the separation is a bit pointless.