I am creating an openlaszlo application where an html tag will be present and i have some components that are draggable in the swf. I want to drag these components over the html. This is not possible.
So what i am thinking of is to take a screenshot of the html content and replace it with the actual html content when i need to drag over it.
Theoretically this should be possible and it's possible in flex I verified my self. I am trying to do the same thing in Openlaszlo. But i am not getting any leads
So far i have tried like this
And i am getting an error that the html tag is not object of IBitmapDrawable
<canvas width="800" height="600" bgcolor="white" debug="true">
<script when="immediate"><![CDATA[
class MagUtils {
#passthrough (toplevel: true) {
import flash.display.DisplayObject;
import flash.geom.Rectangle;
import flash.geom.Matrix;
import flash.geom.ColorTransform;
import flash.display.Bitmap;
import flash.display.BitmapData;
import flash.filters.*;
import flash.events.MouseEvent;
import mx.graphics.ImageSnapshot;
import flash.utils.ByteArray;
import flash.display.IBitmapDrawable;
}#
var temp:lz.view;
var colorTransform:ColorTransform;
var rect:Rectangle;
public function snap (m:IBitmapDrawable, t:lz.view):void {
temp = t;
var temp_mc = temp.sprite; // getMCRef();
var mainView_mc = main.sprite; // getMCRef();
var scale = 1;
var x;
var y;
var w;
var h;
var imageSnap:ImageSnapshot = ImageSnapshot.captureImage(m);
var imageByteArray:ByteArray = imageSnap.data;
colorTransform = new flash.geom.ColorTransform();
rect = new flash.geom.Rectangle(0, 0, temp.width, temp.height);
var bitmap:BitmapData = new flash.display.BitmapData(w, h, false);
bitmap.setPixels(rect, imageByteArray);
var bm:Bitmap = new Bitmap(bitmap);
temp.sprite.addChild (bm);
bitmap = null;
}
}
lz.MagUtils = new MagUtils();
]]>
</script>
<button name="magnifier" text="magnifyingtool" >
<handler name="onclick">
lz.MagUtils.snap(canvas.main.ht,canvas.temp);
</handler>
</button>
<view name="main" x="5" y="15" width="200" height="200" bgcolor="yellow">
<html name="ht" width="200" height="200" src="http:hello.html"/>
</view>
<view id="temp" name="temp" x="5" y="300" visible="true" width="200" height="200" bgcolor="gray">
</view>
</canvas>
And the HTML Content is
<!DOCTYPE html PUBLIC "-//IETF//DTD HTML 2.0//EN">
<HTML>
<HEAD>
<TITLE>
A Small Hello
</TITLE>
</HEAD>
<BODY>
<H1>Hi</H1>
<P>Test Page</P>
</BODY>
</HTML>
It's no possible to take a screenshot in Flash of elements which are not managed by the Flash display list, which includes iFrame content placed below the SWF movie in the browser. And that seems to be what you are trying to do.
If you want to drag a visual object from the iFrame into the SWF movie area, one approach might be to render the content in HTML into an HTML5 canvas element, extract the bitmap data and push that into the SWF movie to be displayed in an OpenLaszlo view. But that would mean that all visual elements you want to drag need to be drawn into an HTML5 canvas.
Here is an example where uses Flash Player's filter functionality to apply the filter to an image in an HTML5 canvas element:
http://www.quasimondo.com/archives/000695.php
Here are the links to the relevant files for this example:
The HTML page embedding an invisible SWF for processing the image.
JavaScript file with functions for sending the data to the SWF movie clip.
ActionScript class processing the image data sent from JavaScript, and passing the processed data back to the HTML page.
But I'm not sure that all the content you have in your iFrame can be rendered into a canvas element.
Related
I am try to load an uploaded PDF file to my view file with an <iframe> tag, How can i disable the mouse right click in that specific <iframe> tag
My code is like this:-
<iframe id="your_iframe_id" src="http://localhost/employee/assets/documents/1582002009.pdf#toolbar=0&navpanes=0&scrollbar=0" onload="injectJS()" readonly="true" style="width:1000px; height:600px;" frameborder="0"></iframe>
<script type="text/javascript">
function disableContextMenu()
{
window.frames["your i frame id"].document.oncontextmenu = function(){alert("No way!"); return false;};
// Or use this
// document.getElementById("your i frame id").contentWindow.document.oncontextmenu
= function(){alert("No way!"); return false;};;
}
</script>
dont remember call this function too. if its not working tell me
I'm using Aptana Studio 3 to create a map, I replaced the function init address to the appropriate address needed to link to the map I want to represent. When I Run it on Aptana Studio 3, it brings me to an unfinished build where the map isn't present and only an outline of the Map Area, plus instructional use on the bottom. I tried using other samples from the ArcGIS resource center to only get the same results if I implement it through Aptana or through Root Directory.
Create Map
<script type="text/javascript" src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=3.2"></script>
<script type="text/javascript">
dojo.require("esri.map");
function init() {
var map = new esri.Map("map");
var imageParameters = new esri.layers.ImageParameters();
imageParameters.format = "jpeg"; //set the image type to PNG24, note default is PNG8.
//Takes a URL to a non cached map service.
var dynamicMapServiceLayer = new esri.layers.ArcGISDynamicMapServiceLayer("http://maps.nbtexas.org/ArcGIS/rest/services/Maps/NewBraunfelsBaseMap/MapServer",
{"opacity":0.5, "imageParameters":imageParameters});
map.addLayer(dynamicMapServiceLayer);
}
dojo.addOnLoad(init);
</script> </head> <body class="claro">
<div id="map" style="width:900px; height:600px; border:1px solid #000;"></div>
Creates a map and adds an ArcGISDynamicMapServiceLayer.<br />
Map navigation using mouse:
<ul>
<li>Drag to pan</li>
<li>SHIFT + Click to recenter</li>
<li>SHIFT + Drag to zoom in</li>
<li>SHIFT + CTRL + Drag to zoom out</li>
<li>Mouse Scroll Forward to zoom in</li>
<li>Mouse Scroll Backward to zoom out</li>
<li>Use Arrow keys to pan</li>
<li>+ key to zoom in a level</li>
<li>- key to zoom out a level</li>
<li>Double Click to Center and Zoom in</li>
</ul> </body> </html>
I have a frameset where in one frame have a button that minimize its parent frameset to a certain size.
The code works but the problem is if I choose to resize frame with my mouse manually first and then press the minimize button it will resize incorrectly in IE8 and Chrome. It resize correctly in FF.
I have this HTML structure
...
<frameset cols="32%,*" border="2" frameborder="1" framespacing="1">
<frameset rows="350,*" border="2" frameborder="1" framespacing="1" id="searchResultFrameset">
<!-- The minimize button are in this frame searchResultFrame -->
<frame name="searchResultFrame" scrolling="no" src="dummy">
<frame name="itemFrame" frameborder="1" scrolling="no" id="itemFrame" src="dummy2"></frameset>
<frame name="contentFrame" frameborder="0" scrolling="yes" id="contentFrame" src="dummy3">
</frameset>
...
and this code that executes when pressing on the button.
// Minimize frame button
$('.minimizeFrame').toggle(function () {
parent.document.getElementsByTagName('frameset')[1].setAttribute('cols','22,*');
}, function () {
parent.document.getElementsByTagName('frameset')[1].setAttribute('cols','32%,*');
});
I can see that cols="32%,*" changes to cols="22,*" in the developer tools, but still it render in wrong size.
Why do it resize incorrectly after changes by the mouse? Am I missing something or is it a bug in browser? Or are there maybe an alternative solution to resize the frame without this bug?
Example
http://jsbin.com/ohihiy/2
Looks like it's this bug in Webkit that has been ignored since 2010:
https://bugs.webkit.org/show_bug.cgi?id=36584
This worked for me. I created a function that "resets" cols and "later" sets correct widths. It seems there must be a timeout after reset or a kind of loop that "touches" child frames
function init_page() {
function setCols(frms, cols) {
// for some magic reason we have to 1st -> reset current cols
frms.setAttribute('cols', '');
// and 2nd ask about child width (it's now clientWidth)
for (var i = 0; i < frms.children.length; ++i) {
if (frms.children[i] && (typeof frms.children[i].clientWidth != "undefined" || typeof frms.children[i].width != "undefined")) {
}
}
frms.setAttribute('cols', cols);
}
// Minimize frame button
$('#minimizeButton')
.toggle(function () {
setCols(parent.document.getElementsByTagName('frameset')[0], '50,*');
},
function () {
setCols(parent.document.getElementsByTagName('frameset')[0], '50%,*');
});
}
If I understand correctly your trying to set an attribute of an object that's in a different frame.
Some browsers don't accept that.
If I try to reproduce your problem I can see that in firefox I can toggle the frame's size (no problem).
In chromium however, I get a security error because I'm trying to set a property on another page namely the frameset page from within a page inside a frame.
edit: The following code works in IE8. Is that what you need?
Don't forget to add the jquery-1.8.2.min.js file
file: index.html
<!doctype html public "-//w3c//dtd html 4.01 frameset//en"
"http://www.w3.org/tr/html4/frameset.dtd">
<html>
<head>
<title>a simple frameset document</title>
</head>
<frameset cols="32%,*" border="2" frameborder="1" framespacing="1">
<frameset rows="350,*" border="2" frameborder="1" framespacing="1" id="searchResultFrameset">
<!-- The minimize button are in this frame searchResultFrame -->
<frame name="searchResultFrame" scrolling="no" src="frame1.html">
<frame name="itemFrame" frameborder="1" scrolling="no" id="itemFrame" src="dummy2"></frameset>
<frame name="contentFrame" frameborder="0" scrolling="yes" id="contentFrame" src="dummy3">
</frameset>
</html>
file: frame1.html
<html>
<head>
<script src="jquery-1.8.2.min.js"></script>
<script>
$(init_page);
function init_page()
{
// Minimize frame button
$('#minimizeButton')
.toggle(function ()
{
parent.document.getElementsByTagName('frameset')[0].setAttribute('cols','22,*');
},
function ()
{
parent.document.getElementsByTagName('frameset')[0].setAttribute('cols','32%,*');
});
}
</script>
</head>
<body>
<button id='minimizeButton'>toggle</button>
</body>
</html>
I was having the same issue, and I used the suggestion of hiding, then setting and then reappearing and it worked for me. See below example:
var $frames = $( <parentElement> ).find( '<framesetname>' )[ 0 ];
frames.hide().attr('cols', '*,500').show();
They worked for Chrome, Firefox, IE11 & Opera.
Hope it works for you.
For example, I am trying to iframe the youtube subscription box on the homepage, and the problem is, if I make the iframe really long, then it wastes space, but if I make the size I want, then if the user clicks the "load more videos" button, then it gets cut off. So is there any way to make the iframe (or any alternatives) be a percentage of the size, or dynamically change when the page changes?
Create a file and call it iframe.html
<html>
<head>
<script type="text/javascript"></span>
function autoIframe(frameId){
try{
frame = document.getElementById(frameId);
innerDoc = (frame.contentDocument) ? frame.contentDocument : frame.contentWindow.document;
if (innerDoc == null){
// Google Chrome
frame.height = document.all[frameId].clientHeight + document.all[frameId].offsetHeight + document.all[frameId].offsetTop;
}
else{
objToResize = (frame.style) ? frame.style : frame;
objToResize.height = innerDoc.body.scrollHeight + 18;
}
}
catch(err){
alert('Err: ' + err.message);
window.status = err.message;
}
}
</script>
</head>
<body>
<iframe id="tree" name="tree" src="tree.html" onload="if (window.parent && window.parent.autoIframe) {window.parent.autoIframe('tree');}"></iframe>
</body>
</html>
Now create an html page called tree.html and put some dummy content in it.Make sure that the iframe.html and the tree.html are in the same directory. Open the .html files in browser and you will observe the o/p.
Some more useful links :
How to detect iframe resize?
How to detect iframe iframe resize
The final goal is to display a few kml overlays on one map and set the transparency value by clicking on a control button for each kml layer (depending on how much layers there are).
My first idea was changing opacity/transparency directly by the div layer.. but I can't find any way to address the div where the kml layer is shown in the map.
Does someone know a way to address the div where the KML is inserted by the KmlLayer(..)?
Now I'm trying to find a way to do it via the KmlLayer Object..
but so far no luck either..
Any ideas how to handle this?
The Code is:
(function() {
window.onload = function(){
var myLatlng = new google.maps.LatLng(48.1497, 11.5795);
var myOptions = {
zoom: 10,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
var georssLayer = new google.maps.KmlLayer('somemap.kml',({'suppressInfoWindows': true}));
georssLayer.setMap(map);
}
})();
To the best of my knowledge it is not possible via standard google api but you can do this using jquery or some other library. KML images are just part of the DOM so if you can find the nodes you can manipulate their properties.
If you have multiple KML files you will probably need to name your images so that the name reflects which KML image belongs to. so if you have KML1 prepend KML1 to all your image names in that KML and search for that string using jQuery selector.
Here is an example using jquery which targets all images (for searches on substrings see http://api.jquery.com/attribute-contains-selector/):
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>Google Maps JavaScript API v3 Example: KmlLayer KML</title>
<script src="http://code.jquery.com/jquery-1.4.4.js"></script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".b_opacity").click(function(){
//this will find all the images in the map canvas container. Normally you would want to target specific images by the value of src
$("#map_canvas").find("img").css("opacity","0.4")
})
})
function initialize() {
var chicago = new google.maps.LatLng(41.875696,-87.624207);
var myOptions = {
zoom: 11,
center: chicago,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
var ctaLayer = new google.maps.KmlLayer('http://code.google.com/apis/kml/documentation/KML_Samples.kml');
ctaLayer.setMap(map);
}
</script>
</head>
<body onload="initialize()">
<div id="map_canvas" style="width: 600px;height: 600px;"></div>
<input type="button" value="dim the lights" class="b_opacity">
</body>
</html>
NOTE: please bear in mind that the css property opacity does not work in IE you have to use filter:alpha(opacity=40) for IE or you can use jQuery .fade() method.