Pulling web-page content into a bot (via an iFrame)?

Neil Shearing · September 13, 2014

Hi guys,

Is there a way to display the content of webpage inside a bot and use the standard UI Editor to position it? Would an iFrame work...?

The idea is to have a short "message of the day" display inside the bot and change it by updating the HTML file on the server...

I can't figure this one out. Help gratefully accepted.

Code Docta (Nick C.) · September 13, 2014

read the file via url into a varuable and put in a stat monitor basically

one way is use $read file in a set

Neil Shearing · September 13, 2014

thanks, I'll give that a shot.

Neil Shearing · September 13, 2014

read the file via url into a varuable and put in a stat monitor basically

one way is use $read file in a set

OK, that pulled in the raw content of the HTML file as plain text and displayed it. Is there a way to render it as HTML in the stat monitor so I could include a hyperlink for example?

stanf · September 13, 2014

is this what you want

-------------------------------------------------------

ui html panel(" <iframe src=\"http://disney.com/\"width =750 height =750></iframe> ", 600)

Neil Shearing · September 13, 2014

Thanks stanf

To be honest, I'm not sure. I've been trying to figure this out all day. If I use "UI HTML Panel" instead of "UI Stat Monitor", I have to include all the other UI information for my bot in the panel, right? That's a bit daunting. I was hoping to use the in-built UI Editor and just include an iframe or sneak some HTML in some other way, rather than having to code a whole UI. Or have I totally misunderstood the situation?

stanf · September 13, 2014

I may not be the best source of info , as i dont use ubot 5, i use 4.

and for building ui panels i own several of the ui builders ovailable in the for sale section

stanf · September 13, 2014

i think i might understand what you want is a sort of splash page with a banner or something like that?

Neil Shearing · September 13, 2014

I want a HTML "message of the day" panel inside my bots which I can update by editing the appropriate HTML file on my server.

I could let people know of new versions, other products or even serve banner ads in free versions.

There's probably an easy way to accomplish what I want... I'm just too new to know what it is.

stanf · September 13, 2014

lets tart here .

where do you want it

in the browser erea

or the ui panel erea

Neil Shearing · September 13, 2014

I wanted it in the UI panel area.

darryl561 · September 14, 2014

You will have to right click and edit the ui html panel and add the following code before the closing </style> tag.

I don't think you will need to change the value for z-index, but you will have to set the width and height to what you want for your iframe, and you will need to change the left and top values to position it.

.frame {
    position: absolute;
    z-index: 3;
    left: 280px;
    top: 10px;
    width: 350px;
    height: 350px;   
}

After the <style> tags you will see some code like below that contains any elements you have added. Just add your iframe code

eg. <iframe class="frame" src="http://bing.com/"width =350 height =350></iframe> before the 2 closing </div> tags like in the code below.

<div id="Background">
	<div class="editorarea" id="wrapper">
		<input class="textbox TextBox0 TextBox0input" type="text" id="TextBox0" variable="#TextBox0" />
		<label class="label Label0 Label0label" id="Label0" variable="#Label0" fillwith="innerhtml">
			my label
		</label>
		<iframe class="frame" src="http://bing.com/"width  =350 height =350></iframe>
	</div>
</div>

I made the iframe class name frame, but you can make it whatever you like, just make sure you have the same class name in both pieces of code that you add. Also make sure the height and width are the same in both codes.

Cheers.

PS This would be much easier to do with my UI Builder

Add the code below to a new bot and it should give you a good idea of how it works

ui html panel("<style>
#droparea \{
    position: relative;
\}

@font-face \{
    font-family: \'Open Sans\';
    font-style: normal;
    font-weight: 300;
    src: local(\'Open Sans Light\'), local(\'OpenSans-Light\'), url(https://themes.googleusercontent.com/static/fonts/opensans/v6/DXI1ORHCpsQm3Vp6mXoaTXhCUOGz7vYGh680lGh-uXM.woff) format(\'woff\');
\}

@font-face \{
    font-family: \'Open Sans\';
    font-style: normal;
    font-weight: 400;
    src: local(\'Open Sans\'), local(\'OpenSans\'), url(https://themes.googleusercontent.com/static/fonts/opensans/v6/cJZKeOuBrn4kERxqtaUH3T8E0i7KZn-EPnyo3HZu7kw.woff) format(\'woff\');
\}

@font-face \{
    font-family: \'Open Sans\';
    font-style: normal;
    font-weight: 600;
    src: local(\'Open Sans Semibold\'), local(\'OpenSans-Semibold\'), url(https://themes.googleusercontent.com/static/fonts/opensans/v6/MTP_ySUJH_bn48VBG8sNSnhCUOGz7vYGh680lGh-uXM.woff) format(\'woff\');
\}

@font-face \{
    font-family: \'Open Sans\';
    font-style: normal;
    font-weight: 700;
    src: local(\'Open Sans Bold\'), local(\'OpenSans-Bold\'), url(https://themes.googleusercontent.com/static/fonts/opensans/v6/k3k702ZOKiLJc3WVjuplzHhCUOGz7vYGh680lGh-uXM.woff) format(\'woff\');
\}

.editorarea \{
    width: 100%;
    height: 100%;
\}

#Background \{
    width: 100%;
    height: 100%;
 \}
html, body \{
    padding: 0px;
    margin: 0px;
\}
/*default user element styles*/

.image \{
    background-image: url(data:image/png;base64,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);
    width: 96px;
    height: 96px;
\}

.textbox \{
    position: relative;
    padding: 0 10px;
    background: #fff;
    border: 1px solid #d8d8d8;
    height: 36px;
    width: 150px;
    line-height: 34px;
    font-size: 12pt;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    -ms-border-radius: 4px;
    -o-border-radius: 4px;
    border-radius: 4px;
    font-family: \"Open Sans\";
\}

.textarea \{
    position: relative;
    padding: 0 10px;
    background: #fff;
    border: 1px solid #d8d8d8;
    height: 72px;
    width: 150px;
    line-height: 34px;
    font-size: 12pt;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    -ms-border-radius: 4px;
    -o-border-radius: 4px;
    border-radius: 4px;
    font-family: \"Open Sans\";
\}


.dropdown \{
    position: relative;
    padding: 0 10px;
    background: #fff;
    border: 1px solid #d8d8d8;
    height: 36px;
    width: 150px;
    line-height: 34px;
    font-size: 12pt;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    -ms-border-radius: 4px;
    -o-border-radius: 4px;
    border-radius: 4px;
    font-family: \"Open Sans\";
\}

.button \{
    background: none repeat scroll 0% 0% #3085D6;
    border: 1px solid #3085D6;
    height: 36px;
    line-height: 34px;
    display: inline-block;
    width: 120px;
    padding: 0px ;
    text-align: center;
    font-weight: 600;
    font-family: \"Open Sans\";
    font-size: 16px;
    color: white;
\}

    .button:hover \{
        background-color: #77beff;
    \}

    .button:active \{
        background-color: #004f99;
    \}

/*DropDown Styles are in SelectBoxIt.css*/

.p, .label \{
    font-family: \"Open Sans\";
    color: black;
    
\}

.checkboxTable \{
    width: auto;
    height: auto;
\}

    .checkboxTable .label \{
        text-align: left;
        margin: 0 5px 0 5px;
    \}

    .checkboxTable td \{
        width: auto;
        height: auto;
    \}

.checkbox \{
    width: 28px;
    height: 28px;
    position: relative;
\}

    .checkbox input \{
        visibility: hidden;
    \}

    .checkbox label \{
        cursor: pointer;
        position: absolute;
        width: 20px;
        height: 20px;
        left: 4px;
        top: 4px;
        border: solid 1px #999;
        border-radius: 3px 3px 3px 3px;
    \}

        .checkbox label:after \{
            -ms-filter: \"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)\";
            filter: alpha(opacity=0);
            opacity: 0;
            content: \'\';
            position: absolute;
            width: 9px;
            height: 5px;
            background: transparent;
            top: 4px;
            left: 4px;
            border: 3px solid #000000;
            border-top: none;
            border-right: none;
            -webkit-transform: rotate(-45deg);
            -moz-transform: rotate(-45deg);
            -o-transform: rotate(-45deg);
            -ms-transform: rotate(-45deg);
            transform: rotate(-45deg);
        \}

        .checkbox label:hover::after \{
            -ms-filter: \"progid:DXImageTransform.Microsoft.Alpha(Opacity=30)\";
            filter: alpha(opacity=30);
            opacity: 0.3;
        \}

    .checkbox input[type=checkbox]:checked + label:after \{
        -ms-filter: \"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)\";
        filter: alpha(opacity=100);
        opacity: 1;
    \}

/*input[type=radio] \{
	visibility: hidden;
\}*/

.radio \{
    width: 28px;
    height: 28px;
    -webkit-border-radius: 50px;
    -moz-border-radius: 50px;
    border-radius: 50px;
    position: relative;
\}

    .radio label \{
        cursor: pointer;
        position: absolute;
        width: 20px;
        height: 20px;
        border: solid 1px #999;
        -webkit-border-radius: 50px;
        -moz-border-radius: 50px;
        border-radius: 50px;
        left: 4px;
        top: 4px;
    \}
    
    .radio input \{
        visibility: hidden;
    \}
        .radio label:after \{
            -ms-filter: \"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)\";
            filter: alpha(opacity=0);
            opacity: 0;
            content: \'\';
            position: absolute;
            width: 16px;
            height: 16px;
            background: #787878;
            -webkit-border-radius: 50px;
            -moz-border-radius: 50px;
            border-radius: 50px;
            top: 2px;
            left: 2px;
        \}

        .radio label:hover::after \{
            -ms-filter: \"progid:DXImageTransform.Microsoft.Alpha(Opacity=30)\";
            filter: alpha(opacity=30);
            opacity: 0.3;
        \}

    .radio input[type=radio]:checked + label:after \{
        -ms-filter: \"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)\";
        filter: alpha(opacity=100);
        opacity: 1;
    \}

#Background \{  background-color: #FFF; \}
.TextBox0 \{
    position: absolute;
    z-index: 1;
    left: 40px;
    top: 80px;
    width: 240px;
    height: 36px;
    
\}
.TextBox0input \{
    background-color: rgb(255, 255, 255);
    font-family: \'Open Sans\';
    color: rgb(0, 0, 0);
    font-weight: normal;
    font-style: normal;
    text-decoration: none;
    font-size: 12pt;
    text-align: left;
    border-top-color: rgb(216, 216, 216);
    border-right-color: rgb(216, 216, 216);
    border-bottom-color: rgb(216, 216, 216);
    border-left-color: rgb(216, 216, 216);
    border-top-width: 2px;
    border-right-width: 2px;
    border-bottom-width: 2px;
    border-left-width: 2px;
    border-top-style: solid;
    border-right-style: solid;
    border-bottom-style: solid;
    border-left-style: solid;
    width: 216px;
    height: 32px;
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
    border-bottom-left-radius: 4px;
    
\}
.Label0 \{
    position: absolute;
    z-index: 2;
    left: 80px;
    top: 30px;
    width: 150px;
    height: 20px;
    
\}
.Label0label \{
    width: 150px;
    height: 20px;
    font-family: \'Open Sans\';
    color: rgb(0, 0, 0);
    font-weight: normal;
    font-style: normal;
    text-decoration: none;
    font-size: 12pt;
    text-align: left;
    
\}
.frame \{
    position: absolute;
    z-index: 2;
    left: 280px;
    top: 10px;
    width: 350px;
    height: 350px;
    
\}
</style>
<div id=\"Background\">
	<div class=\"editorarea\" id=\"wrapper\">
		<input class=\"textbox TextBox0 TextBox0input\" type=\"text\" id=\"TextBox0\" variable=\"#TextBox0\" />
		<label class=\"label Label0 Label0label\" id=\"Label0\" variable=\"#Label0\" fillwith=\"innerhtml\">
			my label
		</label>
		<iframe class=\"frame\" src=\"http://bing.com/\"width  =350 height =350></iframe>
	</div>
</div>", 360)

Code Docta (Nick C.) · September 14, 2014

Yep, recommend the next gen ui builder for this job for sure...soooooooo flexable like Yoga for UI's

you can also use a splash page so wh+-*en bot loads just nav to your html page

like the default is google.com change that when you compile bot on the "dev options" tab at bottom

TC

Neil Shearing · September 14, 2014

Hi Darryl,

That is a thing of beauty and worked perfectly. Thanks!

I'll look into your UI Builder.

darryl561 · September 14, 2014

Hi Darryl,

That is a thing of beauty and worked perfectly. Thanks!

I'll look into your UI Builder.

No worries Neil, glad it helps.

Cheers.

Pulling web-page content into a bot (via an iFrame)?

Recommended Posts

Neil Shearing 0

Link to post

Share on other sites

Code Docta (Nick C.) 638

Link to post

Share on other sites

Neil Shearing 0

Link to post

Share on other sites

Neil Shearing 0

Link to post

Share on other sites

stanf 43

Link to post

Share on other sites

Neil Shearing 0

Link to post

Share on other sites

stanf 43

Link to post

Share on other sites

stanf 43

Link to post

Share on other sites

Neil Shearing 0

Link to post

Share on other sites

stanf 43

Link to post

Share on other sites

Neil Shearing 0

Link to post

Share on other sites

darryl561 177

Link to post

Share on other sites

Code Docta (Nick C.) 638

Link to post

Share on other sites

Neil Shearing 0

Link to post

Share on other sites

darryl561 177

Link to post

Share on other sites

Join the conversation