Re: Getting Browser Widget to Read Local Assets
BR,
assuming you don't have a local server running:
It is an essential difference whether you set the htmltext or
set the URL of the widget.
If the image is called in the htmltext then there is no way but
using a dataURL (=inline image), no matter if it is an img tag or
called in the style tag. But that works always.
If you save the same htmltext to a html file then the image from
a local path that is *relative* to that file is loaded.
There are very few cases where *absolute* file:// - syntax works
and there will be increasing less cases.
If the image becomes "tinted" (by acting on it's data), then you
will need a local server running that calls that html file.
If you use a video file instead of an image (or a webcam) then
you will need a https - connection to your local server. This is
very hard to install except you use a solution like the commercial
MAMP Pro (assuming you are on Mac).
Also look at the following:
> BR wrote:
> on mouseup
>put the uAlphabetA of this stack into imageVariable
>put the uAlphabetA of this stack into img "alphabet"
># just checking it’s artist's versions an "A" at 122px H,122px W
>put base64Encode(imageVariable) into b64Data
>replace linefeed with empty in b64Data
>set the htmltext of widget "browser" to the fld "html" #--> **
> end mouseup
>
> This image there. It appears into stack and also in the variables
> we have in the html
> [snip] background-image: url('data:image/jpg;base64,') [snip]
You have to fill the placeholder , for instance this way:
...(replace line ** in mouseUp):
set the htmltext of widget "browser" to merge(fld "html")
...
and then in the html:
background-image: url('data:image/jpg;base64,[[b64Data]]')
___
use-livecode mailing list
use-livecode@lists.runrev.com
Please visit this url to subscribe, unsubscribe and manage your subscription
preferences:
http://lists.runrev.com/mailman/listinfo/use-livecode
Re: Getting Browser Widget to Read Local Assets
HH wrote:
You could also do step 1 to 4 once and put compress(fld "HTML")
into a , then set later on in btn "LoadURL" the
htmltext to decompress().
BR: Thanks for your attentive in response to my query. I am keeping you posts
in a folder entitled "Browser Widget Manual"
I tried this but it did not work, I think I missing a piece of the puzzle
on mouseup
put the uAlphabetA of this stack into imageVariable
put the uAlphabetA of this stack into img "alphabet"
# just checking it’s artist's versions an "A" at 122px H,122px W
put base64Encode(imageVariable) into b64Data
replace linefeed with empty in b64Data
set the htmltext of widget "browser" to the fld "html"
end mouseup
This image there. It appears into stack and also in the variables
we have in the html
[snip] background-image: url('data:image/jpg;base64,') [snip]
??
---
It this coding to a "stack local " to base64 only required if you want to use
it as a background image? What about a
A couple of months ago I imported an entire HTML5 app folder done in React, to
a local folder, let's call it
/workout
Index.html
assets
workout.livecode # with a browser widget
it showed images in its asset folder.
But today I cannot getting img src working with
/MyTest
browserTesting.livecode
/alphabet
A_122x122_thm.jpg
# the above appears as an image, but with a ? mark in it.
Loading. Please wait...
If the web site is slow or if you have a bad connection - cancel by going
Home
BR
___
use-livecode mailing list
use-livecode@lists.runrev.com
Please visit this url to subscribe, unsubscribe and manage your subscription
preferences:
http://lists.runrev.com/mailman/listinfo/use-livecode
Re: Getting Browser Widget to Read Local Assets
Field and button names below relate to my example stack.
http://forums.livecode.com/viewtopic.php?p=173867#p173867
To use a local file (= NOT from a local or remote server) you have
to load the image from a stack property or url("binfile:"...) and
add it inline (base64 encoded):
Step 1: imageVariable = stack property or url("binfile:"...)
Step 2: put base64Encode(imageVariable) into b64Data
Step 3: replace linefeed with empty in b64Data --> IMPORTANT!!
Step 4: write in fld "HTML" of my example stack
background-image: url('data:image/jpg;base64,')
The width x height of the image to load and the width x height
of the loader in fld "HTML" should roughly coincide:
You don't really want to load a 1200x800 image as background
into a 192x128 rotating DOM object?
You could also do step 1 to 4 once and put compress(fld "HTML")
into a , then set later on in btn "LoadURL" the
htmltext to decompress().
And if the image is large, then you could use in the script of
widget "Browser" of the example stack:
on hideloader
delete widget "loader" --> instead of hide widget "loader"
end hideloader
___
use-livecode mailing list
use-livecode@lists.runrev.com
Please visit this url to subscribe, unsubscribe and manage your subscription
preferences:
http://lists.runrev.com/mailman/listinfo/use-livecode
Getting Browser Widget to Read Local Assets
I finally got around to implementing this. Works great! In terms of being a
loader for
on browserDocumentLoadComplete pURL
if pURl is not empty then
send "hideloader" to me in 1 second
end if
[snip]
One caveat: Old path problem. I can't get the browser to read a local image in
this case. Tried full path
specialFolderPath("resources")
which yields this:
background-image
url(
'/Users/brahmanathaswami/Documents/_Siva-Siva-App/assets/img/siva-darshan/who-is-siva_1200x800.jpg');
I tried a manual relative path
background-image
url( '../assets/img/siva-darshan/who-is-siva_1200x800.jpg');
against this folder layout
assets
img
siva-darshan
who-is-siva_1200x800.jpg
view
SivaSivaBrowser.livecode
It still doesn’t show?
BR
hh wrote:
The following works tested here on desktop, should work everywhere where
the browser widget works.
1. Overlay browser widget "browser" with a browser widget "loader" (that
displays a loading animation).
2. Load the slow loading url into widget "browser".
3. Hide widget "loader" by browserDocumentLoadComplete of widget "browser".
For example:
http://forums.livecode.com/viewtopic.php?p=173867#p173867
___
use-livecode mailing list
use-livecode@lists.runrev.com
Please visit this url to subscribe, unsubscribe and manage your subscription
preferences:
http://lists.runrev.com/mailman/listinfo/use-livecode
