Correct img format for browser widget.

classic Classic list List threaded Threaded
16 messages Options
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Correct img format for browser widget.

Mark Wieder via use-livecode
Can someone tell me the correct format for an image src tag to use with the browser widget?
I have a folder of HTML and an associated folder of images yet I am unable to get the images to show.
They are .png.
I have tried
Src = "full path to image"
Src = "relative path to image"
Src ="file://fullpath to image"
Src="binfile:/full path to image"

None of them work, although the last does show a ? Icon where the image should appear. All the others show nothing.

James



_______________________________________________
use-livecode mailing list
[hidden email]
Please visit this url to subscribe, unsubscribe and manage your subscription preferences:
http://lists.runrev.com/mailman/listinfo/use-livecode
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: Correct img format for browser widget.

Mark Wieder via use-livecode
You have to set it in the HTML, with HTML-syntax.
LC Script may help with that by sending the imagedata to the HTML page.

Examples how to do this can be found (look at handler "chooseScript" in the card's script and make the widget or revBrowser display visible) as follows.

[a] using a browser widget with LC 8/9 on Mac/Win/linux:
http://livecodeshare.runrev.com/stack/826/LC-ImageToolBox89%3A-Basics_ROI

[b] using revBrowser with LC 6/7/8/9, Mac only:
http://livecodeshare.runrev.com/stack/827/LCImageToolBox6789%3A-Basics_ROI

Or download [a] or [b] directly into LC 8/9 (Mac/win/linux) or LC 6/7/8/9 (Mac) from "Sample stacks" of the LC toolbar.

> James H. wrote:
> Can someone tell me the correct format for an image src tag to use with the browser widget?
> I have a folder of HTML and an associated folder of images yet I am unable to get the images to show.
> They are .png.
> I have tried
> Src = "full path to image"
> Src = "relative path to image"
> Src ="file://fullpath to image"
> Src="binfile:/full path to image"
>
> None of them work, although the last does show a ? Icon where the image should appear. All the others show nothing.

_______________________________________________
use-livecode mailing list
[hidden email]
Please visit this url to subscribe, unsubscribe and manage your subscription preferences:
http://lists.runrev.com/mailman/listinfo/use-livecode
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: Correct img format for browser widget.

Mark Wieder via use-livecode
In reply to this post by Mark Wieder via use-livecode
... Or in case you meant simple HTML load (not canvas2d):

<img src="...">

where src = "full http-path to image" (local server is running)
or src = "relative path to image"

for example:
src="http://localhost:8888/tests/images/myimage42.png"
src="../images/myimage42.png"

The relative path has to be relative to the *calling webpage* (the stack path doesn't matter).

> James H. wrote:
> Can someone tell me the correct format for an image src tag to use with the browser widget?
> I have a folder of HTML and an associated folder of images yet I am unable to get the images to show.
> They are .png.
> I have tried
> Src = "full path to image"
> Src = "relative path to image"
> Src ="file://fullpath to image"
> Src="binfile:/full path to image"
>
> None of them work, although the last does show a ? Icon where the image should appear. All the others show nothing.


_______________________________________________
use-livecode mailing list
[hidden email]
Please visit this url to subscribe, unsubscribe and manage your subscription preferences:
http://lists.runrev.com/mailman/listinfo/use-livecode
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: Correct img format for browser widget.

Mark Wieder via use-livecode
In reply to this post by Mark Wieder via use-livecode
hh wrote:

> ... Or in case you meant simple HTML load (not canvas2d):
>
> <img src="...">
> where src = "full http-path to image" (local server is running)
> or src = "relative path to image"

Actually I am not loading a file from a server, I am setting the htmltext of the widget.

The file I am loading is actually a markdown which I convert to xhtml using mergMarkdownToXHTML.
I then set the htmltext of the widget to this converted content.
Now the text etc all display fine as I would expect, however the images don't.
The image tags in the markdown are correctly converted to <img src="..."> but obviously the path to the image file is not being correctly interpreted by LC.
If I was to display this in a text field (by setting its htmltext) I would need to change the img tag's src attribute to include the "binfile:/" prefix.
When I do this the image displays as expected in the text field.

However, this displays the images at the size they exist on disk.

I notice the dictionary (which is using the browser widget) does not do this. It actually scales the images down where required.
So I thought rather than set the htmltext of the field, let me set the htmltext of a browser widget.
However none of the forms of the URL for the images that I have tried work.
I do not know javascript and while I can sort of follow the logic behind the guide display in the dictionary I can't fathom how it actually works.
It is taking the markdown, converting it the a form of html and it correctly shows the text and the images.
I am trying to do this without the javascript.


James





_______________________________________________
use-livecode mailing list
[hidden email]
Please visit this url to subscribe, unsubscribe and manage your subscription preferences:
http://lists.runrev.com/mailman/listinfo/use-livecode
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: Correct img format for browser widget.

Mark Wieder via use-livecode
In reply to this post by Mark Wieder via use-livecode
You can have that without a (local) server when using a browser widget.

Although you can NOT display an image from disk without javascript by
only setting the htmltext with a correct filepath, for example as follows.
(This is a browser engine thing, can not be influenced by the widget.)

Example htmltext of the widget or text of the file "flower2b.html":
<html><body><img src='flower2b.png' width='80' height='60'></body></html>

But it works if you set the URL of the widget to a (local) html-file that
has exactly this text as html (if 'flower.png' is in the same folder).
*** Then the htmltext of the widget is 'anchored' in the local file system
and can use a full or relative path.

BTW. To display an image "/home/jh/images/flower.png" from disk in a field
for example at size 80x60 at char 42:

1. create an img "i1"
2. set the filename of img "i1" to "/home/jh/images/flower.png"
3. set the width of img "i1" to 80; set the height of img "i1" to 60
4. set the imagesource of char 42 of fld 1 to "i1"

> James H. wrote:
> > hh wrote:
> > ... Or in case you meant simple HTML load (not canvas2d):
> > <img src="...">
> > where src = "full http-path to image" (local server is running)
> > or src = "relative path to image"
>
> Actually I am not loading a file from a server, I am setting the htmltext of the widget.
>
> The file I am loading is actually a markdown which I convert to xhtml using mergMarkdownToXHTML.
> I then set the htmltext of the widget to this converted content.
> Now the text etc all display fine as I would expect, however the images don't.
> The image tags in the markdown are correctly converted to <img src="..."> but obviously the path to the image file is not being correctly interpreted by LC.
> If I was to display this in a text field (by setting its htmltext) I would need to change the img tag's src attribute to include the "binfile:/" prefix.
> When I do this the image displays as expected in the text field.
>
> However, this displays the images at the size they exist on disk.
>
> I notice the dictionary (which is using the browser widget) does not do this. It actually scales the images down where required.
> So I thought rather than set the htmltext of the field, let me set the htmltext of a browser widget.
> However none of the forms of the URL for the images that I have tried work.
> I do not know javascript and while I can sort of follow the logic behind the guide display in the dictionary I can't fathom how it actually works.
> It is taking the markdown, converting it the a form of html and it correctly shows the text and the images.
> I am trying to do this without the javascript.

_______________________________________________
use-livecode mailing list
[hidden email]
Please visit this url to subscribe, unsubscribe and manage your subscription preferences:
http://lists.runrev.com/mailman/listinfo/use-livecode
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: Correct img format for browser widget.

Mark Wieder via use-livecode
In reply to this post by Mark Wieder via use-livecode
Hi James,

Can you post an example of your actual filepath?

With HTML, the first part of the path to the local disk usually looks like this:

"file:///C:/users/pictures/mypicture.png"

LC should be able to give you the right full path to a document- but make sure to try using the "file:///" prefix inside the HTML text of the browser widget.

I have not tested this, but it has worked for me in the past.

Sent from my iPhone

> On Jul 16, 2017, at 1:53 AM, James Hale via use-livecode <[hidden email]> wrote:
>
> hh wrote:
>
>> ... Or in case you meant simple HTML load (not canvas2d):
>>
>> <img src="...">
>> where src = "full http-path to image" (local server is running)
>> or src = "relative path to image"
>
> Actually I am not loading a file from a server, I am setting the htmltext of the widget.
>
> The file I am loading is actually a markdown which I convert to xhtml using mergMarkdownToXHTML.
> I then set the htmltext of the widget to this converted content.
> Now the text etc all display fine as I would expect, however the images don't.
> The image tags in the markdown are correctly converted to <img src="..."> but obviously the path to the image file is not being correctly interpreted by LC.
> If I was to display this in a text field (by setting its htmltext) I would need to change the img tag's src attribute to include the "binfile:/" prefix.
> When I do this the image displays as expected in the text field.
>
> However, this displays the images at the size they exist on disk.
>
> I notice the dictionary (which is using the browser widget) does not do this. It actually scales the images down where required.
> So I thought rather than set the htmltext of the field, let me set the htmltext of a browser widget.
> However none of the forms of the URL for the images that I have tried work.
> I do not know javascript and while I can sort of follow the logic behind the guide display in the dictionary I can't fathom how it actually works.
> It is taking the markdown, converting it the a form of html and it correctly shows the text and the images.
> I am trying to do this without the javascript.
>
>
> James
>
>
>
>
>
> _______________________________________________
> use-livecode mailing list
> [hidden email]
> Please visit this url to subscribe, unsubscribe and manage your subscription preferences:
> http://lists.runrev.com/mailman/listinfo/use-livecode

Sent from my iPhone

> On Jul 16, 2017, at 1:53 AM, James Hale via use-livecode <[hidden email]> wrote:
>
> hh wrote:
>
>> ... Or in case you meant simple HTML load (not canvas2d):
>>
>> <img src="...">
>> where src = "full http-path to image" (local server is running)
>> or src = "relative path to image"
>
> Actually I am not loading a file from a server, I am setting the htmltext of the widget.
>
> The file I am loading is actually a markdown which I convert to xhtml using mergMarkdownToXHTML.
> I then set the htmltext of the widget to this converted content.
> Now the text etc all display fine as I would expect, however the images don't.
> The image tags in the markdown are correctly converted to <img src="..."> but obviously the path to the image file is not being correctly interpreted by LC.
> If I was to display this in a text field (by setting its htmltext) I would need to change the img tag's src attribute to include the "binfile:/" prefix.
> When I do this the image displays as expected in the text field.
>
> However, this displays the images at the size they exist on disk.
>
> I notice the dictionary (which is using the browser widget) does not do this. It actually scales the images down where required.
> So I thought rather than set the htmltext of the field, let me set the htmltext of a browser widget.
> However none of the forms of the URL for the images that I have tried work.
> I do not know javascript and while I can sort of follow the logic behind the guide display in the dictionary I can't fathom how it actually works.
> It is taking the markdown, converting it the a form of html and it correctly shows the text and the images.
> I am trying to do this without the javascript.
>
>
> James
>
>
>
>
>
> _______________________________________________
> use-livecode mailing list
> [hidden email]
> Please visit this url to subscribe, unsubscribe and manage your subscription preferences:
> http://lists.runrev.com/mailman/listinfo/use-livecode
_______________________________________________
use-livecode mailing list
[hidden email]
Please visit this url to subscribe, unsubscribe and manage your subscription preferences:
http://lists.runrev.com/mailman/listinfo/use-livecode
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: Correct img format for browser widget.

Mark Wieder via use-livecode
One other solution...

You can convert the image source to a data URL. You can construct the htmltext for the dataurl in LC, and replace the current image SRC information with dataURL SRC information. Then, when you set the htmltext of the browser widget, the images will show up without needing to access the local file from within the widget.



Sent from my iPhone

> On Jul 16, 2017, at 8:53 AM, [hidden email] wrote:
>
> Hi James,
>
> Can you post an example of your actual filepath?
>
> With HTML, the first part of the path to the local disk usually looks like this:
>
> "file:///C:/users/pictures/mypicture.png"
>
> LC should be able to give you the right full path to a document- but make sure to try using the "file:///" prefix inside the HTML text of the browser widget.
>
> I have not tested this, but it has worked for me in the past.
>
> Sent from my iPhone
>
> On Jul 16, 2017, at 1:53 AM, James Hale via use-livecode <[hidden email]> wrote:
>
>> hh wrote:
>>
>>> ... Or in case you meant simple HTML load (not canvas2d):
>>>
>>> <img src="...">
>>> where src = "full http-path to image" (local server is running)
>>> or src = "relative path to image"
>>
>> Actually I am not loading a file from a server, I am setting the htmltext of the widget.
>>
>> The file I am loading is actually a markdown which I convert to xhtml using mergMarkdownToXHTML.
>> I then set the htmltext of the widget to this converted content.
>> Now the text etc all display fine as I would expect, however the images don't.
>> The image tags in the markdown are correctly converted to <img src="..."> but obviously the path to the image file is not being correctly interpreted by LC.
>> If I was to display this in a text field (by setting its htmltext) I would need to change the img tag's src attribute to include the "binfile:/" prefix.
>> When I do this the image displays as expected in the text field.
>>
>> However, this displays the images at the size they exist on disk.
>>
>> I notice the dictionary (which is using the browser widget) does not do this. It actually scales the images down where required.
>> So I thought rather than set the htmltext of the field, let me set the htmltext of a browser widget.
>> However none of the forms of the URL for the images that I have tried work.
>> I do not know javascript and while I can sort of follow the logic behind the guide display in the dictionary I can't fathom how it actually works.
>> It is taking the markdown, converting it the a form of html and it correctly shows the text and the images.
>> I am trying to do this without the javascript.
>>
>>
>> James
>>
>>
>>
>>
>>
>> _______________________________________________
>> use-livecode mailing list
>> [hidden email]
>> Please visit this url to subscribe, unsubscribe and manage your subscription preferences:
>> http://lists.runrev.com/mailman/listinfo/use-livecode
>
> Sent from my iPhone
>
>> On Jul 16, 2017, at 1:53 AM, James Hale via use-livecode <[hidden email]> wrote:
>>
>> hh wrote:
>>
>>> ... Or in case you meant simple HTML load (not canvas2d):
>>>
>>> <img src="...">
>>> where src = "full http-path to image" (local server is running)
>>> or src = "relative path to image"
>>
>> Actually I am not loading a file from a server, I am setting the htmltext of the widget.
>>
>> The file I am loading is actually a markdown which I convert to xhtml using mergMarkdownToXHTML.
>> I then set the htmltext of the widget to this converted content.
>> Now the text etc all display fine as I would expect, however the images don't.
>> The image tags in the markdown are correctly converted to <img src="..."> but obviously the path to the image file is not being correctly interpreted by LC.
>> If I was to display this in a text field (by setting its htmltext) I would need to change the img tag's src attribute to include the "binfile:/" prefix.
>> When I do this the image displays as expected in the text field.
>>
>> However, this displays the images at the size they exist on disk.
>>
>> I notice the dictionary (which is using the browser widget) does not do this. It actually scales the images down where required.
>> So I thought rather than set the htmltext of the field, let me set the htmltext of a browser widget.
>> However none of the forms of the URL for the images that I have tried work.
>> I do not know javascript and while I can sort of follow the logic behind the guide display in the dictionary I can't fathom how it actually works.
>> It is taking the markdown, converting it the a form of html and it correctly shows the text and the images.
>> I am trying to do this without the javascript.
>>
>>
>> James
>>
>>
>>
>>
>>
>> _______________________________________________
>> use-livecode mailing list
>> [hidden email]
>> Please visit this url to subscribe, unsubscribe and manage your subscription preferences:
>> http://lists.runrev.com/mailman/listinfo/use-livecode
_______________________________________________
use-livecode mailing list
[hidden email]
Please visit this url to subscribe, unsubscribe and manage your subscription preferences:
http://lists.runrev.com/mailman/listinfo/use-livecode
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: Correct img format for browser widget.

Mark Wieder via use-livecode
In reply to this post by Mark Wieder via use-livecode
Hi Hermann,

Is this part of the same-source policy for web pages? The HTML file and the image file needing to be in the same folder?

Sent from my iPhone

> On Jul 16, 2017, at 5:45 AM, hh via use-livecode <[hidden email]> wrote:
>
> You can have that without a (local) server when using a browser widget.
>
> Although you can NOT display an image from disk without javascript by
> only setting the htmltext with a correct filepath, for example as follows.
> (This is a browser engine thing, can not be influenced by the widget.)
>
> Example htmltext of the widget or text of the file "flower2b.html":
> <html><body><img src='flower2b.png' width='80' height='60'></body></html>
>
> But it works if you set the URL of the widget to a (local) html-file that
> has exactly this text as html (if 'flower.png' is in the same folder).
> *** Then the htmltext of the widget is 'anchored' in the local file system
> and can use a full or relative path.
>
> BTW. To display an image "/home/jh/images/flower.png" from disk in a field
> for example at size 80x60 at char 42:
>
> 1. create an img "i1"
> 2. set the filename of img "i1" to "/home/jh/images/flower.png"
> 3. set the width of img "i1" to 80; set the height of img "i1" to 60
> 4. set the imagesource of char 42 of fld 1 to "i1"
>
>> James H. wrote:
>>> hh wrote:
>>> ... Or in case you meant simple HTML load (not canvas2d):
>>> <img src="...">
>>> where src = "full http-path to image" (local server is running)
>>> or src = "relative path to image"
>>
>> Actually I am not loading a file from a server, I am setting the htmltext of the widget.
>>
>> The file I am loading is actually a markdown which I convert to xhtml using mergMarkdownToXHTML.
>> I then set the htmltext of the widget to this converted content.
>> Now the text etc all display fine as I would expect, however the images don't.
>> The image tags in the markdown are correctly converted to <img src="..."> but obviously the path to the image file is not being correctly interpreted by LC.
>> If I was to display this in a text field (by setting its htmltext) I would need to change the img tag's src attribute to include the "binfile:/" prefix.
>> When I do this the image displays as expected in the text field.
>>
>> However, this displays the images at the size they exist on disk.
>>
>> I notice the dictionary (which is using the browser widget) does not do this. It actually scales the images down where required.
>> So I thought rather than set the htmltext of the field, let me set the htmltext of a browser widget.
>> However none of the forms of the URL for the images that I have tried work.
>> I do not know javascript and while I can sort of follow the logic behind the guide display in the dictionary I can't fathom how it actually works.
>> It is taking the markdown, converting it the a form of html and it correctly shows the text and the images.
>> I am trying to do this without the javascript.
>
> _______________________________________________
> use-livecode mailing list
> [hidden email]
> Please visit this url to subscribe, unsubscribe and manage your subscription preferences:
> http://lists.runrev.com/mailman/listinfo/use-livecode

_______________________________________________
use-livecode mailing list
[hidden email]
Please visit this url to subscribe, unsubscribe and manage your subscription preferences:
http://lists.runrev.com/mailman/listinfo/use-livecode
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: Correct img format for browser widget.

Mark Wieder via use-livecode
So - thinking about this dime more - the browser widget uses a dummy URL if not told to load a specific URL, and the dummy URL would not have permission to access local drives, for security reasons.

That would mean the "file:///" prefix would not work either.

So he would have to either save the HTML file to the local disk, or convert to dataURLs.

Fortunately, it is only a few lines of code to convert to a dataURL, and he can build it into his HTML without having to use JavaScript.

Sent from my iPhone

> On Jul 16, 2017, at 9:10 AM, [hidden email] wrote:
>
> Hi Hermann,
>
> Is this part of the same-source policy for web pages? The HTML file and the image file needing to be in the same folder?
>
> Sent from my iPhone
>
>> On Jul 16, 2017, at 5:45 AM, hh via use-livecode <[hidden email]> wrote:
>>
>> You can have that without a (local) server when using a browser widget.
>>
>> Although you can NOT display an image from disk without javascript by
>> only setting the htmltext with a correct filepath, for example as follows.
>> (This is a browser engine thing, can not be influenced by the widget.)
>>
>> Example htmltext of the widget or text of the file "flower2b.html":
>> <html><body><img src='flower2b.png' width='80' height='60'></body></html>
>>
>> But it works if you set the URL of the widget to a (local) html-file that
>> has exactly this text as html (if 'flower.png' is in the same folder).
>> *** Then the htmltext of the widget is 'anchored' in the local file system
>> and can use a full or relative path.
>>
>> BTW. To display an image "/home/jh/images/flower.png" from disk in a field
>> for example at size 80x60 at char 42:
>>
>> 1. create an img "i1"
>> 2. set the filename of img "i1" to "/home/jh/images/flower.png"
>> 3. set the width of img "i1" to 80; set the height of img "i1" to 60
>> 4. set the imagesource of char 42 of fld 1 to "i1"
>>
>>> James H. wrote:
>>>> hh wrote:
>>>> ... Or in case you meant simple HTML load (not canvas2d):
>>>> <img src="...">
>>>> where src = "full http-path to image" (local server is running)
>>>> or src = "relative path to image"
>>>
>>> Actually I am not loading a file from a server, I am setting the htmltext of the widget.
>>>
>>> The file I am loading is actually a markdown which I convert to xhtml using mergMarkdownToXHTML.
>>> I then set the htmltext of the widget to this converted content.
>>> Now the text etc all display fine as I would expect, however the images don't.
>>> The image tags in the markdown are correctly converted to <img src="..."> but obviously the path to the image file is not being correctly interpreted by LC.
>>> If I was to display this in a text field (by setting its htmltext) I would need to change the img tag's src attribute to include the "binfile:/" prefix.
>>> When I do this the image displays as expected in the text field.
>>>
>>> However, this displays the images at the size they exist on disk.
>>>
>>> I notice the dictionary (which is using the browser widget) does not do this. It actually scales the images down where required.
>>> So I thought rather than set the htmltext of the field, let me set the htmltext of a browser widget.
>>> However none of the forms of the URL for the images that I have tried work.
>>> I do not know javascript and while I can sort of follow the logic behind the guide display in the dictionary I can't fathom how it actually works.
>>> It is taking the markdown, converting it the a form of html and it correctly shows the text and the images.
>>> I am trying to do this without the javascript.
>>
>> _______________________________________________
>> use-livecode mailing list
>> [hidden email]
>> Please visit this url to subscribe, unsubscribe and manage your subscription preferences:
>> http://lists.runrev.com/mailman/listinfo/use-livecode

_______________________________________________
use-livecode mailing list
[hidden email]
Please visit this url to subscribe, unsubscribe and manage your subscription preferences:
http://lists.runrev.com/mailman/listinfo/use-livecode
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: Correct img format for browser widget.

Mark Wieder via use-livecode
In reply to this post by Mark Wieder via use-livecode
> Jonathan wrote:
> Is this part of the same-source policy for web pages? The HTML file and the image file
> needing to be in the same folder?

No. I wrote this only because the example used a relative path pointing to the same folder:

> Example htmltext of the widget or text of the file "flower2b.html":
> <html><body><img src='flower2b.png' width='80' height='60'></body></html>

But the same-source-policy is becoming more and more strong.
The browser (or webkit repspectively) wants a clear "base-url" when making the decision
whether 'same-source' is fulfilled.
This may be a problem here because such a "base-url" is derived by also checking the
html-file origin. And in the case of an empty URL of the widget (htmltext only is set)
there is no file origin ...



_______________________________________________
use-livecode mailing list
[hidden email]
Please visit this url to subscribe, unsubscribe and manage your subscription preferences:
http://lists.runrev.com/mailman/listinfo/use-livecode
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: Correct img format for browser widget.

Mark Wieder via use-livecode
James - if you look at the example stack on LiveCode share "browser widget image manipulator" it has some LC code for creating a dataURl for an image.

Use that to create the data URL for the image.  

Basically:

Get the image info from the image file like this:

Put URL "binfile:imagepath" into timageinfo

Put base64encode(timageinfo) into timageinfo

Replace linefeed with empty in timageinfo


Then you follow the example in the stack for putting that base 64 image information into the SRC of the image.

Then you replace your old SRC with the new SRC in the htmltext.

Then you set the HTML text of your widget with the adjusted HTMLtext.

In this way you won't have to use JavaScript and it should display well.

If this does not work, let me know and I will write out the script.



Sent from my iPhone

On Jul 16, 2017, at 9:37 AM, hh via use-livecode <[hidden email]> wrote:

>> Jonathan wrote:
>> Is this part of the same-source policy for web pages? The HTML file and the image file
>> needing to be in the same folder?
>
> No. I wrote this only because the example used a relative path pointing to the same folder:
>
>> Example htmltext of the widget or text of the file "flower2b.html":
>> <html><body><img src='flower2b.png' width='80' height='60'></body></html>
>
> But the same-source-policy is becoming more and more strong.
> The browser (or webkit repspectively) wants a clear "base-url" when making the decision
> whether 'same-source' is fulfilled.
> This may be a problem here because such a "base-url" is derived by also checking the
> html-file origin. And in the case of an empty URL of the widget (htmltext only is set)
> there is no file origin ...
>
>
>
> _______________________________________________
> use-livecode mailing list
> [hidden email]
> Please visit this url to subscribe, unsubscribe and manage your subscription preferences:
> http://lists.runrev.com/mailman/listinfo/use-livecode

_______________________________________________
use-livecode mailing list
[hidden email]
Please visit this url to subscribe, unsubscribe and manage your subscription preferences:
http://lists.runrev.com/mailman/listinfo/use-livecode
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: Correct img format for browser widget.

Mark Wieder via use-livecode
In reply to this post by Mark Wieder via use-livecode
An option for James could be to put ONE html-file in the images folder
with content:

<html><body><img id='jh' src=''></body></html>

And then set any image of that images folder by changing the HTML by
javascript:

on mouseUp
  put "flower2.png" into nn -- give the name directly
  put line 42 of myImages into nn -- a list containing the image names
  setImage nn,400,300
end mouseUp

on setImage iName,iWidth,iHeight
  put  "var jh = document.getElementById('jh');" & \
       "jh.setAttribute('src','" & iName & "');" & \
       "jh.setAttribute('width','" & iWidth & "');" & \
       "jh.setAttribute('height','" & iHeight & "');" & \
       "jh.setAttribute('alt','"&iName&"');" into js
  do js in widget "browser"
end setImage

(If there are several images to be displayed at once then simply replicate
the id in the html and correspondingly the js in the handler.)


_______________________________________________
use-livecode mailing list
[hidden email]
Please visit this url to subscribe, unsubscribe and manage your subscription preferences:
http://lists.runrev.com/mailman/listinfo/use-livecode
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: Correct img format for browser widget.

Mark Wieder via use-livecode
In reply to this post by Mark Wieder via use-livecode
Thank you so much Hermann and Jonathan

It took me a little time but I worked out what to do after looking at your suggestions.

The fact that setting the htmltext of the browser widget breaks the img URL's makes sense from a security and logical point of view.

I then tried Jonathan's technique of using the image data.
This worked a treat but for some files was quite slow on my larger files.
e.g. one html had 200 images. It took some 20 secs for the browser to load.

So I thought I would try Hermann's later suggesting of just saving the file as an html and setting the URL of the browser to it.
The conversion from markdown left the img tags in the correct format for a browser to locate the files.

After finding Trevor's function for correctly URL encoding the file name I was able to successfully load the files into the browser widget and display the images.
The 200 image file loaded in less than a second which was good.

The final issue was the varying width of the images.
I simply loaded an array keyed on the file names with a single value, image width.
I didn't want any widths greater than 800 pixels so a simply if statement set all widths > 800 to 800
Then a simple replace loop using the image size array "gimagescale"...
repeat for each key ikey in gimagescale

     replace ikey&quote&" " with ikey&quote&" width = "&quote&gimagescale[ikey]&quote in nfile

end repeat

and the img tags were in a format I wanted.

Loading into the browser widget was fast and the images all fitted in the browser's width.

Setting the htmltext of a field was my first choice. But the html of the converted markdown docs was more than LC's htmltext function could handle.
And to be honest, the browser's rendering looked better.
Had the html been simpler, using a field would have been just as fast.

Anyway, my issue is resolved.

Thank you both again for your help.

James






_______________________________________________
use-livecode mailing list
[hidden email]
Please visit this url to subscribe, unsubscribe and manage your subscription preferences:
http://lists.runrev.com/mailman/listinfo/use-livecode
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: Correct img format for browser widget.

Mark Wieder via use-livecode
It sounds like the dataURL method costs about a tenth of a second per image, for moderately large images.

I had never tested that, but it's good to know. For my purposes right now, that is not an issue, but it could be for plenty of situations.


Sent from my iPhone

> On Jul 16, 2017, at 11:42 PM, James Hale via use-livecode <[hidden email]> wrote:
>
> Thank you so much Hermann and Jonathan
>
> It took me a little time but I worked out what to do after looking at your suggestions.
>
> The fact that setting the htmltext of the browser widget breaks the img URL's makes sense from a security and logical point of view.
>
> I then tried Jonathan's technique of using the image data.
> This worked a treat but for some files was quite slow on my larger files.
> e.g. one html had 200 images. It took some 20 secs for the browser to load.
>
> So I thought I would try Hermann's later suggesting of just saving the file as an html and setting the URL of the browser to it.
> The conversion from markdown left the img tags in the correct format for a browser to locate the files.
>
> After finding Trevor's function for correctly URL encoding the file name I was able to successfully load the files into the browser widget and display the images.
> The 200 image file loaded in less than a second which was good.
>
> The final issue was the varying width of the images.
> I simply loaded an array keyed on the file names with a single value, image width.
> I didn't want any widths greater than 800 pixels so a simply if statement set all widths > 800 to 800
> Then a simple replace loop using the image size array "gimagescale"...
> repeat for each key ikey in gimagescale
>
>     replace ikey&quote&" " with ikey&quote&" width = "&quote&gimagescale[ikey]&quote in nfile
>
> end repeat
>
> and the img tags were in a format I wanted.
>
> Loading into the browser widget was fast and the images all fitted in the browser's width.
>
> Setting the htmltext of a field was my first choice. But the html of the converted markdown docs was more than LC's htmltext function could handle.
> And to be honest, the browser's rendering looked better.
> Had the html been simpler, using a field would have been just as fast.
>
> Anyway, my issue is resolved.
>
> Thank you both again for your help.
>
> James
>
>
>
>
>
>
> _______________________________________________
> use-livecode mailing list
> [hidden email]
> Please visit this url to subscribe, unsubscribe and manage your subscription preferences:
> http://lists.runrev.com/mailman/listinfo/use-livecode

_______________________________________________
use-livecode mailing list
[hidden email]
Please visit this url to subscribe, unsubscribe and manage your subscription preferences:
http://lists.runrev.com/mailman/listinfo/use-livecode
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: Correct img format for browser widget.

Mark Wieder via use-livecode
In reply to this post by Mark Wieder via use-livecode
Hi James,

Just a quick note - you can set the max-width of images in CSS. That will limit their size with just one line.

Sent from my iPhone

> On Jul 16, 2017, at 11:42 PM, James Hale via use-livecode <[hidden email]> wrote:
>
> Thank you so much Hermann and Jonathan
>
> It took me a little time but I worked out what to do after looking at your suggestions.
>
> The fact that setting the htmltext of the browser widget breaks the img URL's makes sense from a security and logical point of view.
>
> I then tried Jonathan's technique of using the image data.
> This worked a treat but for some files was quite slow on my larger files.
> e.g. one html had 200 images. It took some 20 secs for the browser to load.
>
> So I thought I would try Hermann's later suggesting of just saving the file as an html and setting the URL of the browser to it.
> The conversion from markdown left the img tags in the correct format for a browser to locate the files.
>
> After finding Trevor's function for correctly URL encoding the file name I was able to successfully load the files into the browser widget and display the images.
> The 200 image file loaded in less than a second which was good.
>
> The final issue was the varying width of the images.
> I simply loaded an array keyed on the file names with a single value, image width.
> I didn't want any widths greater than 800 pixels so a simply if statement set all widths > 800 to 800
> Then a simple replace loop using the image size array "gimagescale"...
> repeat for each key ikey in gimagescale
>
>    replace ikey&quote&" " with ikey&quote&" width = "&quote&gimagescale[ikey]&quote in nfile
>
> end repeat
>
> and the img tags were in a format I wanted.
>
> Loading into the browser widget was fast and the images all fitted in the browser's width.
>
> Setting the htmltext of a field was my first choice. But the html of the converted markdown docs was more than LC's htmltext function could handle.
> And to be honest, the browser's rendering looked better.
> Had the html been simpler, using a field would have been just as fast.
>
> Anyway, my issue is resolved.
>
> Thank you both again for your help.
>
> James
>
>
>
>
>
>
> _______________________________________________
> use-livecode mailing list
> [hidden email]
> Please visit this url to subscribe, unsubscribe and manage your subscription preferences:
> http://lists.runrev.com/mailman/listinfo/use-livecode

_______________________________________________
use-livecode mailing list
[hidden email]
Please visit this url to subscribe, unsubscribe and manage your subscription preferences:
http://lists.runrev.com/mailman/listinfo/use-livecode
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: Correct img format for browser widget.

Mark Wieder via use-livecode
Hi Jonathan,

Cool.
Works a treat and no need for array.
Using a percentage also means I can allow the browser widget to be resized.
Very cool.

<style>
img {
   Max-width: 90%;
  }
</style>

James

On 17 Jul 2017, at 22:00, [hidden email] wrote:
> Just a quick note - you can set the max-width of images in CSS. That will limit their size with just one line.


_______________________________________________
use-livecode mailing list
[hidden email]
Please visit this url to subscribe, unsubscribe and manage your subscription preferences:
http://lists.runrev.com/mailman/listinfo/use-livecode
Loading...