Hello there, i would like to use the "Autolevels" plugins created by Aldo from (Field Of view)... it's work well but only with Flash... but i need it for HTML5. I've PM Aldo and send a mail but no answer, i think he have lots of work... this plugins is 2010...but it's look so interesting to have a good immersion. (Sorry for my english, i'm french...)
I've found the source of the action script... (it's free) :
https://github.com/fieldOfView/krpano_fovplugins/tree/master/autolevels/source/
And i've found an ASC3 (action script) translator to JS (Javascript) there:
Then ASC3: autolevels.as
Is Now in JS:
(function() { var Program = {}; Program["autolevels"] = function(module, exports) { var autolevels = function() { this.$init(); if (stage == null) { this.addEventListener(Event.ADDED_TO_STAGE, this.startPlugin); this.addEventListener(Event.REMOVED_FROM_STAGE, this.stopPlugin); } else { stage.scaleMode = StageScaleMode.NO_SCALE; stage.align = StageAlign.TOP_LEFT;
var format = new TextFormat(); format.font = "_sans"; format.size = 14; format.align = "center"; var txt = new TextField(); txt.textColor = 0xffffff; txt.selectable = false; txt.htmlText = "<b>autolevels plugin</b> for KRPano" + "\n\n" + "Aldo Hoeben / fieldOfView.com"; txt.autoSize = "center"; txt.setTextFormat(format); addChild(txt);
var resize = function(event) { txt.x = (stage.stageWidth - txt.width) / 2; txt.y = (stage.stageHeight - txt.height) / 2; return; }
stage.addEventListener(Event.RESIZE, resize); resize(null); } return; };
autolevels.prototype = Object.create(Sprite.prototype);
autolevels.prototype.$init = function() { this.krpano = null; this.plugin_object = null; this.colortransform = null; this.activecolortransform = null; this.scalematrix = null; this.panosprite = null; this.meterbitmap = null; }; autolevels.prototype.krpano = null; autolevels.prototype.plugin_object = null; autolevels.prototype.enabled = false; autolevels.prototype.effect = 0; autolevels.prototype.adaptation = 0; autolevels.prototype.coloradjust = 0; autolevels.prototype.attenuation = 0; autolevels.prototype.threshold = 0; autolevels.prototype.maxmultiplier = 0; autolevels.prototype.levelsinvalid = true; autolevels.prototype.colortransform = null; autolevels.prototype.activecolortransform = null; autolevels.prototype.scalematrix = null; autolevels.prototype.panosprite = null; autolevels.prototype.meterbitmap = null; autolevels.prototype.startPlugin = function(event) { this.krpano = krpano_as3_interface.getInstance();
this.panosprite = this.krpano.get("image.layer"); this.meterbitmap = new BitmapData(80, 60, false);
this.activecolortransform = new ColorTransform();
// todo: only update scalematrix on screen resizes this.scalematrix = new Matrix(); //this.krpano.addPluginEventListener(this, krpano_as3_interface.PLUGINEVENT_RESIZE, this.resizePlugin); //this.resizePlugin(null);
this.krpano.addPluginEventListener(this, krpano_as3_interface.PLUGINEVENT_REGISTER, this.registerPlugin); this.krpano.addPluginEventListener(this, krpano_as3_interface.PLUGINEVENT_UPDATE, this.updatePlugin);
addEventListener(Event.ENTER_FRAME, this.enterFrameHandler);
this.krpano.set("autolevels.onviewchange", this.viewChanged); var onviewchange = this.krpano.get("events.onviewchange"); if (onviewchange == null) onviewchange = ""; this.krpano.set("events.onviewchange", "autolevels.onviewchange();" + onviewchange);
return; }; autolevels.prototype.stopPlugin = function(event) { // reset colortransform this.colortransform = new ColorTransform(); this.panosprite.transform.colorTransform = this.colortransform;
removeEventListener(Event.ENTER_FRAME, this.enterFrameHandler); this.krpano.removePluginEventListener(this, krpano_as3_interface.PLUGINEVENT_REGISTER, this.registerPlugin); this.krpano.removePluginEventListener(this, krpano_as3_interface.PLUGINEVENT_UPDATE, this.updatePlugin); //this.krpano.removePluginEventListener(this, krpano_as3_interface.PLUGINEVENT_RESIZE, this.resizePlugin);
var onviewchange = this.krpano.get("events.onviewchange"); if (onviewchange == null) onviewchange = ""; onviewchange = onviewchange.split("autolevels.onviewchange();").join(""); this.krpano.set("events.onviewchange", onviewchange);
this.plugin_object = null; this.krpano = null; return; }; autolevels.prototype.registerPlugin = function(event) { this.plugin_object = this.krpano.get(event.data); this.plugin_object.registerattribute("enabled", true); this.plugin_object.registerattribute("effect", Number(1)); this.plugin_object.registerattribute("adaptation", Number(0.1)); this.plugin_object.registerattribute("coloradjust", Number(1)); this.plugin_object.registerattribute("threshold", Number(1)); this.plugin_object.registerattribute("attenuation", Number(0)); this.plugin_object.registerattribute("maxmultiplier", Number(10000));
this.enabled = (this.plugin_object.enabled != null) ? Boolean(this.plugin_object.enabled) : true; this.effect = (this.plugin_object.effect != null) ? Math.min(Math.max(Number(this.plugin_object.effect), 0), 1) : 1; this.adaptation = (this.plugin_object.adaptation != null) ? Math.min(Math.max(Number(this.plugin_object.adaptation), 0.0001), 1) : 0.1; this.coloradjust = (this.plugin_object.coloradjust != null) ? Math.min(Math.max(Number(this.plugin_object.coloradjust), 0), 10) : 1; this.threshold = (this.plugin_object.threshold != null) ? Math.min(Math.max(Number(this.plugin_object.threshold), 0), 255) : 1; this.attenuation = (this.plugin_object.threshold != null) ? Math.min(Math.max(Number(this.plugin_object.attenuation), 0), 0.999) : 0; this.maxmultiplier = (this.plugin_object.maxmultiplier != null) ? Math.max(Number(this.plugin_object.maxmultiplier), 0) : 10000;
return; }; autolevels.prototype.updatePlugin = function(event) { // in any case, the meter bitmap needs to be recalculated this.levelsinvalid = true;
switch (event.data) { case "enabled": this.enabled = Boolean(this.plugin_object.enabled); if (!this.enabled) { this.colortransform = new ColorTransform(); this.activecolortransform = new ColorTransform(); } break; case "effect": this.effect = Math.min(Math.max(Number(this.plugin_object.effect), 0), 1); break; case "adaptation": this.adaptation = Math.min(Math.max(Number(this.plugin_object.adaptation), 0.0001), 1); break; case "coloradjust": this.coloradjust = Math.min(Math.max(Number(this.plugin_object.coloradjust), 0), 10); break; case "threshold": this.threshold = Math.min(Math.max(Number(this.plugin_object.threshold), 0), 255); break; case "attenuation": this.attenuation = Math.min(Math.max(Number(this.plugin_object.attenuation), 0), 0.999); break; case "maxmultiplier": this.maxmultiplier = Math.max(Number(this.plugin_object.maxmultiplier), 0); break; } }; autolevels.prototype.enterFrameHandler = function(event) { if (this.enabled && this.levelsinvalid) { this.updateLevels(); }
this.activecolortransform.redMultiplier += (this.colortransform.redMultiplier - this.activecolortransform.redMultiplier) * this.adaptation; this.activecolortransform.redOffset += (this.colortransform.redOffset - this.activecolortransform.redOffset) * this.adaptation; this.activecolortransform.greenMultiplier += (this.colortransform.greenMultiplier - this.activecolortransform.greenMultiplier) * this.adaptation; this.activecolortransform.greenOffset += (this.colortransform.greenOffset - this.activecolortransform.greenOffset) * this.adaptation; this.activecolortransform.blueMultiplier += (this.colortransform.blueMultiplier - this.activecolortransform.blueMultiplier) * this.adaptation; this.activecolortransform.blueOffset += (this.colortransform.blueOffset - this.activecolortransform.blueOffset) * this.adaptation;
this.panosprite.transform.colorTransform = this.activecolortransform;
return; }; autolevels.prototype.resizePlugin = function(event) { this.scalematrix.identity(); var screenwidth = this.krpano.get("view.r_screenwidth"); var screenheight = this.krpano.get("view.r_screenheight"); this.scalematrix.translate(-screenwidth * this.attenuation / 2, -screenheight * this.attenuation / 2); this.scalematrix.scale(this.meterbitmap.width / screenwidth / (1 - this.attenuation), this.meterbitmap.height / screenheight / (1 - this.attenuation));
this.levelsinvalid = true; }; autolevels.prototype.viewChanged = function() { this.levelsinvalid = true; }; autolevels.prototype.updateLevels = function() { // temporarily reset colortransform this.colortransform = new ColorTransform(); this.panosprite.transform.colorTransform = this.colortransform;
// copy sprite into small bitmapdata and get a histogram // todo: only update scalematrix on screen resizes this.resizePlugin(null);
this.meterbitmap.draw(this.panosprite, this.scalematrix); var histogram = this.meterbitmap.histogram();
// analyse histogram var minvalues = []; var maxvalues = [];
var channel; for (channel = 0; channel < 3; channel++) { for (var i = 0; i < 256; i++) { if (minvalues[channel] == null && histogram[channel][i] > this.threshold) { minvalues[channel] = i * this.effect; } if (maxvalues[channel] == null && histogram[channel][255 - i] > this.threshold) { maxvalues[channel] = 255 - (i * this.effect); } if (minvalues[channel] != null && maxvalues[channel] != null) { break; } } }
// calculate greyscale values and mix with rgb channels minvalues[3] = (minvalues[0] + minvalues[1] + minvalues[2]) / 3; maxvalues[3] = (maxvalues[0] + maxvalues[1] + maxvalues[2]) / 3; for (channel = 0; channel < 3; channel++) { minvalues[channel] = minvalues[channel] * this.coloradjust + minvalues[3] * (1 - this.coloradjust); maxvalues[channel] = maxvalues[channel] * this.coloradjust + maxvalues[3] * (1 - this.coloradjust); }
this.colortransform.redMultiplier = Math.min(255.0 / (maxvalues[0] - minvalues[0]), this.maxmultiplier); this.colortransform.redOffset = -minvalues[0] * this.colortransform.redMultiplier; this.colortransform.greenMultiplier = Math.min(255.0 / (maxvalues[1] - minvalues[1]), this.maxmultiplier); this.colortransform.greenOffset = -minvalues[1] * this.colortransform.greenMultiplier; this.colortransform.blueMultiplier = Math.min(255.0 / (maxvalues[2] - minvalues[2]), this.maxmultiplier); this.colortransform.blueOffset = -minvalues[2] * this.colortransform.blueMultiplier;
this.levelsinvalid = false; }
module.exports = autolevels; }; if (typeof module !== 'undefined') { module.exports = AS3JS.load({ program: Program, entry: "", entryMode: "" }); } else if (typeof window !== 'undefined' && typeof AS3JS !== 'undefined') { window[''] = AS3JS.load({ program: Program, entry: "", entryMode: "" }); }})();
Display More
And ASC3 : krpano_as3_interface.as
Is now in JS:
(function() { var Program = {}; Program["krpano_as3_interface"] = function(module, exports) { var krpano_as3_interface; module.inject = function() { krpano_as3_interface = module.import('', 'krpano_as3_interface'); };
var krpano_as3_interface = function() { this.$init(); };
krpano_as3_interface.instance = null; krpano_as3_interface.getInstance = function() { if (krpano_as3_interface.instance == null) { krpano_as3_interface.instance = new krpano_as3_interface(); }
return krpano_as3_interface.instance; }; krpano_as3_interface.STARTDEBUGMODE = null; krpano_as3_interface.DEBUG = null; krpano_as3_interface.INFO = null; krpano_as3_interface.WARNING = null; krpano_as3_interface.ERROR = null; krpano_as3_interface.PLUGINEVENT_REGISTER = null; krpano_as3_interface.PLUGINEVENT_RESIZE = null; krpano_as3_interface.PLUGINEVENT_UPDATE = null;
krpano_as3_interface.$cinit = function() { krpano_as3_interface.instance = null; krpano_as3_interface.STARTDEBUGMODE = 0xFF; krpano_as3_interface.DEBUG = 0; krpano_as3_interface.INFO = 1; krpano_as3_interface.WARNING = 2; krpano_as3_interface.ERROR = 3; krpano_as3_interface.PLUGINEVENT_REGISTER = "krpano.registerplugin"; krpano_as3_interface.PLUGINEVENT_RESIZE = "krpano.resizeplugin"; krpano_as3_interface.PLUGINEVENT_UPDATE = "krpano.updateplugin";
};
krpano_as3_interface.prototype.$init = function() { this.set = null; this.get = null; this.call = null; this.trace = null; this.addPluginEventListener = null; this.removePluginEventListener = null; }; krpano_as3_interface.prototype.set = null; krpano_as3_interface.prototype.get = null; krpano_as3_interface.prototype.call = null; krpano_as3_interface.prototype.trace = null; krpano_as3_interface.prototype.addPluginEventListener = null; krpano_as3_interface.prototype.removePluginEventListener = null
module.exports = krpano_as3_interface; }; if (typeof module !== 'undefined') { module.exports = AS3JS.load({ program: Program, entry: "", entryMode: "" }); } else if (typeof window !== 'undefined' && typeof AS3JS !== 'undefined') { window[''] = AS3JS.load({ program: Program, entry: "", entryMode: "" }); }})();
I've write all the JS on a new file named "Autolevels.js" but it not work... i now the code is not easy like copy past but anyone want to help me ?
regards all