/// <summary> /// This is a javascript application. /// </summary> /// <param name="page">HTML document rendered by the web server which can now be enhanced.</param> public Application(IApp page) { // http://docs.webplatform.org/wiki/dom/shadowdom/ShadowRoot // https://www.w3.org/Bugs/Public/show_bug.cgi?id=24867 //new ShadowLayout().AttachTo(Native.document.documentElement.shadow); var s = new ShadowLayout().AttachTo(Native.shadow); // http://w3c.github.io/webcomponents/spec/shadow/#dfn-content-element-select // http://caniuse.com/#feat=shadowdom new IHTMLButton { "select all buttons" }.AttachToDocument().onclick += e => { // this aint working. why? // spec says it should. but nothing shows up. 20140812 s.SelectedContent.select = ".what"; }; //new IHTMLButton { "select this button" }.AttachToDocument().onclick += // e => // { // s.SelectedContent.select = "button"; // }; }
/// <summary> /// This is a javascript application. /// </summary> /// <param name="page">HTML document rendered by the web server which can now be enhanced.</param> public Application(IApp page) { // used by // X:\jsc.svn\examples\javascript\chrome\extensions\ChromeExtensionShadowExperiment\ChromeExtensionShadowExperiment\Application.cs // X:\jsc.svn\examples\javascript\Test\TestShadowBody\TestShadowBody\Application.cs //var s = new ShadowLayout().AttachTo(Native.document.documentElement.shadow); var s = new ShadowLayout().AttachTo(Native.shadow); // forms shall use position fixed // to prevent overflow!? __Form.InternalHTMLTargetAttachToDocument = (that, yield) => { if (that.HTMLTarget.parentNode == null) { //that.HTMLTarget.AttachTo(Native.document.documentElement.shadow); that.HTMLTarget.AttachTo(Native.shadow); } // animate! yield(true); }; new FooUserControl().AttachControlTo( s.TopSideBar ); }
/// <summary> /// This is a javascript application. /// </summary> /// <param name="page">HTML document rendered by the web server which can now be enhanced.</param> public Application(IApp page) { var s = new ShadowLayout().AttachTo(Native.shadow); s.ShadowHeader = this.ShadowHeader; new { }.With( async delegate { await Task.Delay(500); await this.WebMethod2(); } ); }
/// <summary> /// This is a javascript application. /// </summary> /// <param name="page">HTML document rendered by the web server which can now be enhanced.</param> public Application(IApp page) { // this will override everything being shown //page.body.shadow.appendChild("the shadow"); var s = new ShadowLayout().AttachTo(Native.document.documentElement.shadow); // override the whole document. //Native.document.documentElement.shadow.appendChild("the shadow"); //Console.WriteLine(new { Native.document.documentElement.parentNode }); // :40ms {{ parentNode = [object HTMLDocument] }} //Native.document.documentElement.parentNode.shadow.appendChild("the shadow"); // cool! new IHTMLIFrame { src = "http://example.com" }.AttachTo( s.TopSideBar ); }
/// <summary> /// This is a javascript application. /// </summary> /// <param name="page">HTML document rendered by the web server which can now be enhanced.</param> public Application(IApp page) { // if we are running in a SYSTEM account // the chrome no-sandbox only allows software renderer // where we get 1 frame per sec. // on older systems we may not get GL_OES_standard_derivatives // http://stackoverflow.com/questions/16795278/disable-some-gl-extensions-for-debugging-three-js-app // ( parameters.bumpMap || parameters.normalMap ) ? "#extension GL_OES_standard_derivatives : enable" : "", // or that system is just old as hell // http://stackoverflow.com/questions/16795278/disable-some-gl-extensions-for-debugging-three-js-app //http://thematicmapping.org/playground/webgl/earth/ // https://sites.google.com/a/jsc-solutions.net/backlog/knowledge-base/2014/201402/20140222 // Earth params var radius = 0.5; //var segments = 32; var segments = 128; var rotation = 6; var scene = new THREE.Scene(); locations = new ArrayList(); var camera = new THREE.PerspectiveCamera(45, Native.window.aspect, 0.01, 1000); camera.position.z = 1.5; var renderer = new THREE.WebGLRenderer( new { preserveDrawingBuffer = true } ); renderer.setSize(); scene.add(new THREE.AmbientLight(0x333333)); var light = new THREE.DirectionalLight(0xffffff, 1); light.position.set(5, 3, 5); scene.add(light); parent = new THREE.Object3D(); scene.add(parent); #region sphere var sphere = new THREE.Mesh( new THREE.SphereGeometry(radius, segments, segments), new THREE.MeshPhongMaterial( new { map = new THREE.Texture().With( async s => { //0:75ms event: _2_no_clouds_4k_low view-source:36543 //Application Cache Progress event (1 of 2) http://192.168.1.72:22248/view-source 192.168.1.72/:1 //Application Cache Progress event (2 of 2) 192.168.1.72/:1 //Application Cache Cached event 192.168.1.72/:1 //1:1018ms event: _2_no_clouds_4k_low done view-source:36543 //1:1019ms event: _2_no_clouds_4k view-source:36543 //event.returnValue is deprecated. Please use the standard event.preventDefault() instead. view-source:2995 //1:16445ms event: _2_no_clouds_4k done // ~ tilde to open css editor? Console.WriteLine("event: _2_no_clouds_4k_low"); s.image = await new _2_no_clouds_4k_low(); s.needsUpdate = true; Console.WriteLine("event: _2_no_clouds_4k_low done"); await 20000; Console.WriteLine("event: _2_no_clouds_4k"); s.image = await new _2_no_clouds_4k(); s.needsUpdate = true; Console.WriteLine("event: _2_no_clouds_4k done"); } ), bumpMap = THREE.ImageUtils.loadTexture( new elev_bump_4k().src //new elev_bump_4k_low().src ), // applies onyl to shaders to create the shadow bumpScale = 0.001, specularMap = new THREE.Texture().With( async s => { Console.WriteLine("event: water_4k_low"); s.image = await new water_4k_low(); s.needsUpdate = true; Console.WriteLine("event: water_4k_low done"); await 20000; Console.WriteLine("event: water_4k"); s.image = await new water_4k(); s.needsUpdate = true; Console.WriteLine("event: water_4k done"); } ), //specular = new THREE.Color("grey") specular = new THREE.Color(0xa0a0a0) }) ); #endregion // http://stackoverflow.com/questions/12447734/three-js-updateing-texture-on-plane //sphere.rotation.y = rotation; parent.rotation.y = rotation; //sphere.position.x = 10; //sphere.position.y = 10; //sphere.position.z = 10; //sphere.position.normalize(); //sphere.position.multiplyScalar(200); parent.add(sphere); //scene.add(sphere); #region clouds var clouds = new THREE.Mesh( new THREE.SphereGeometry( //radius + 0.003, radius + 0.006, segments, segments), new THREE.MeshPhongMaterial( new { //map = THREE.ImageUtils.loadTexture( // //new fair_clouds_4k().src // new fair_clouds_4k_low().src // ), map = new THREE.Texture().With( async s => { Console.WriteLine("event: fair_clouds_4k_low"); s.image = await new fair_clouds_4k_low(); s.needsUpdate = true; Console.WriteLine("event: fair_clouds_4k_low done"); await 20000; Console.WriteLine("event: fair_clouds_4k"); s.image = await new fair_clouds_4k(); s.needsUpdate = true; Console.WriteLine("event: fair_clouds_4k done"); } ), transparent = true }) ); //clouds.rotation.y = rotation; parent.add(clouds); //scene.add(clouds); #endregion var citiesData = new XElement("cities"); { var cityH = new XElement("city"); cityH.Add(new XElement("name", "Tallinn")); cityH.Add(new XElement("longitude", "24.7281")); cityH.Add(new XElement("latitude", "59.4339")); citiesData.Add(cityH); } { var cityH = new XElement("city"); cityH.Add(new XElement("name", "London")); cityH.Add(new XElement("longitude", "-0.116667")); cityH.Add(new XElement("latitude", "51.5")); citiesData.Add(cityH); } var shadowL = new ShadowLayout().AttachTo(Native.shadow); page.dataHolder = citiesData; #region Location on sphere Action AddCities = async delegate { //var table = await this.GetAllCities(); //Console.WriteLine(table.Rows.Count.ToString()); //for (var r = 0; r < table.Rows.Count; r++) //{ // var latitude = (double)table.Rows[r]["Latitude"]; // var longtitude = (double)table.Rows[r]["Longtitude"]; // addLocation(latitude, longtitude, radius, 0.001, parent, 6); // Console.WriteLine(latitude.ToString()); // await 100; //} var elemList = citiesData.Elements(); Console.WriteLine(elemList.Count().ToString()); foreach (var i in elemList) { //Console.WriteLine(i.ToString()); //foreach (var t in i.Elements()) //{ // Console.WriteLine(t.ToString()); //} //var l = i.Element("name"); //if (l == null) //{ // Console.WriteLine("F**k"); //} //else //{ // Console.WriteLine(l.Value); //} //Console.WriteLine(i.Element("longitude")); //Console.WriteLine(i.Element("latitude")); var lat = i.Element("latitude"); if (lat != null) { Console.WriteLine("Latitude not null"); var latitude = Convert.ToDouble(lat.Value); Console.WriteLine(latitude.ToString()); var longit = i.Element("longitude"); if (longit != null) { Console.WriteLine("Longitude not null"); var longtitude = Convert.ToDouble(longit.Value); addLocation(latitude, longtitude, radius, 0.001, parent, 6); Console.WriteLine(longtitude.ToString()); } } } }; citiesData.Changed += (send, arg) => { //if(arg.ObjectChange == XObjectChange.Value) //{ //Console.WriteLine(citiesData); //Console.WriteLine("Sender name "+((XAttribute)send).Name); //Console.WriteLine("Sender val " + ((XAttribute)send).Value); removeLocations(); AddCities(); //} }; AddCities(); #endregion var stars = new THREE.Mesh( new THREE.SphereGeometry(90, 64, 64), new THREE.MeshBasicMaterial( new { map = THREE.ImageUtils.loadTexture(new galaxy_starfield().src), side = THREE.BackSide }) ); scene.add(stars); this.canvas = (IHTMLCanvas)renderer.domElement; //renderer.domElement.AttachToDocument(); this.canvas.AttachTo(shadowL.webGlCanvas); this.canvas.style.SetLocation(0, 0); // jsc, what pointers do we have in store? this.canvas.css.style.cursor = IStyle.CursorEnum.pointer; this.canvas.css.active.style.cursor = IStyle.CursorEnum.move; var old = new { parent = new { parent.rotation.x, parent.rotation.y }, //sphere = new //{ // //sphere.rotation.x, // //sphere.rotation.y //}, //clouds = new //{ // //clouds.rotation.x, // //clouds.rotation.y, //}, CursorX = 0, CursorY = 0 }; #region onmousedown this.canvas.onmousedown += e => { var pointerLock = this.canvas == Native.document.pointerLockElement; if (e.MouseButton == IEvent.MouseButtonEnum.Middle) { this.canvas.requestFullscreen(); this.canvas.requestPointerLock(); } else { // movementX no longer works old = new { parent = new { parent.rotation.x, parent.rotation.y }, //sphere = new //{ // sphere.rotation.x, // sphere.rotation.y //}, //clouds = new //{ // clouds.rotation.x, // clouds.rotation.y, //}, e.CursorX, e.CursorY }; if (pointerLock) { // skip } else { e.CaptureMouse(); } } }; #endregion var z = camera.position.z; var sfx = new TestWebGLEarthShadowDomXML.HTML.Audio.FromAssets.SatelliteBeep_Sputnik1 { autobuffer = true, // this aint working //loop = true }; sfx.play(); //sfx.AttachToHead(); // http://soundfxnow.com/sound-fx/sputnik-satellite-beeping/ this.canvas.onmousewheel += e => { //camera.position.z = 1.5; // min max. shall adjust speed also! // max 4.0 // min 0.6 z -= 0.1 * e.WheelDirection; z = z.Max(0.6).Min(4.5); //Native.document.title = new { camera.position.z }.ToString(); }; // X:\jsc.svn\examples\javascript\Test\TestMouseMovement\TestMouseMovement\Application.cs #region onmousemove this.canvas.onmousemove += e => { var pointerLock = this.canvas == Native.document.pointerLockElement; //Console.WriteLine(new { e.MouseButton, pointerLock, e.movementX }); if (e.MouseButton == IEvent.MouseButtonEnum.Left) { if (pointerLock) { parent.rotation.x += 0.01 * e.movementY; parent.rotation.y += 0.01 * e.movementX; //sphere.rotation.x += 0.01 * e.movementY; //sphere.rotation.y += 0.01 * e.movementX; //clouds.rotation.x += 0.01 * e.movementY; //clouds.rotation.y += 0.01 * e.movementX; } else { parent.rotation.x = old.parent.x + 0.01 * (e.CursorY - old.CursorY); parent.rotation.y = old.parent.y + 0.01 * (e.CursorX - old.CursorX); //sphere.rotation.x = old.sphere.x + 0.01 * (e.CursorY - old.CursorY); //sphere.rotation.y = old.sphere.y + 0.01 * (e.CursorX - old.CursorX); //clouds.rotation.x = old.clouds.x + 0.01 * (e.CursorY - old.CursorY); //clouds.rotation.y = old.clouds.y + 0.01 * (e.CursorX - old.CursorX); } // Native.document.title = new { e.movementX, e.movementY }.ToString(); } }; #endregion // could we Native.window.onframe += e => { if (this.canvas.parentNode == null) { return; } camera.aspect = canvas.clientWidth / (double)canvas.clientHeight; camera.updateProjectionMatrix(); camera.position.z += (z - camera.position.z) * e.delay.ElapsedMilliseconds / 200; // the larger the vew the slower the rotation shall be var speed = 0.0001 * e.delay.ElapsedMilliseconds + 0.007 * 96.0 / canvas.clientHeight * 1.0 / camera.position.z; //Native.document.title = new { s = 96.0 / canvas.clientHeight }.ToString(); //Native.document.title = new { speed }.ToString(); //controls.update(); //sphere.rotation.y += speed; //clouds.rotation.y += speed; parent.rotation.y += speed; renderer.render(scene, camera); }; Native.window.onresize += delegate { //if (canvas.parentNode == Native.document.body) // are we embedded? if (page != null) { renderer.setSize(); } }; //new IStyle(this.canvas.css.before) //{ // content = "'do a middle click to maximize the earth dashboard'", // left = "1em", // bottom = "1em", // color = "white", // position = IStyle.PositionEnum.absolute //}; }
/// <summary> /// This is a javascript application. /// </summary> /// <param name="page">HTML document rendered by the web server which can now be enhanced.</param> public Application(IApp page) { // if we are running in a SYSTEM account // the chrome no-sandbox only allows software renderer // where we get 1 frame per sec. // on older systems we may not get GL_OES_standard_derivatives // http://stackoverflow.com/questions/16795278/disable-some-gl-extensions-for-debugging-three-js-app // ( parameters.bumpMap || parameters.normalMap ) ? "#extension GL_OES_standard_derivatives : enable" : "", // or that system is just old as hell // http://stackoverflow.com/questions/16795278/disable-some-gl-extensions-for-debugging-three-js-app //http://thematicmapping.org/playground/webgl/earth/ // https://sites.google.com/a/jsc-solutions.net/backlog/knowledge-base/2014/201402/20140222 // Earth params var radius = 0.5; //var segments = 32; var segments = 128; var rotation = 6; var scene = new THREE.Scene(); locations = new ArrayList(); var camera = new THREE.PerspectiveCamera(45, Native.window.aspect, 0.01, 1000); camera.position.z = 1.5; var renderer = new THREE.WebGLRenderer( new { preserveDrawingBuffer = true } ); renderer.setSize(); scene.add(new THREE.AmbientLight(0x333333)); var light = new THREE.DirectionalLight(0xffffff, 1); light.position.set(5, 3, 5); scene.add(light); parent = new THREE.Object3D(); scene.add(parent); #region sphere var sphere = new THREE.Mesh( new THREE.SphereGeometry(radius, segments, segments), new THREE.MeshPhongMaterial( new { map = new THREE.Texture().With( async s => { //0:75ms event: _2_no_clouds_4k_low view-source:36543 //Application Cache Progress event (1 of 2) http://192.168.1.72:22248/view-source 192.168.1.72/:1 //Application Cache Progress event (2 of 2) 192.168.1.72/:1 //Application Cache Cached event 192.168.1.72/:1 //1:1018ms event: _2_no_clouds_4k_low done view-source:36543 //1:1019ms event: _2_no_clouds_4k view-source:36543 //event.returnValue is deprecated. Please use the standard event.preventDefault() instead. view-source:2995 //1:16445ms event: _2_no_clouds_4k done // ~ tilde to open css editor? Console.WriteLine("event: _2_no_clouds_4k_low"); s.image = await new _2_no_clouds_4k_low(); s.needsUpdate = true; Console.WriteLine("event: _2_no_clouds_4k_low done"); await 20000; Console.WriteLine("event: _2_no_clouds_4k"); s.image = await new _2_no_clouds_4k(); s.needsUpdate = true; Console.WriteLine("event: _2_no_clouds_4k done"); } ), bumpMap = THREE.ImageUtils.loadTexture( new elev_bump_4k().src //new elev_bump_4k_low().src ), // applies onyl to shaders to create the shadow bumpScale = 0.001, specularMap = new THREE.Texture().With( async s => { Console.WriteLine("event: water_4k_low"); s.image = await new water_4k_low(); s.needsUpdate = true; Console.WriteLine("event: water_4k_low done"); await 20000; Console.WriteLine("event: water_4k"); s.image = await new water_4k(); s.needsUpdate = true; Console.WriteLine("event: water_4k done"); } ), //specular = new THREE.Color("grey") specular = new THREE.Color(0xa0a0a0) }) ); #endregion // http://stackoverflow.com/questions/12447734/three-js-updateing-texture-on-plane //sphere.rotation.y = rotation; parent.rotation.y = rotation; //sphere.position.x = 10; //sphere.position.y = 10; //sphere.position.z = 10; //sphere.position.normalize(); //sphere.position.multiplyScalar(200); parent.add(sphere); //scene.add(sphere); #region clouds var clouds = new THREE.Mesh( new THREE.SphereGeometry( //radius + 0.003, radius + 0.006, segments, segments), new THREE.MeshPhongMaterial( new { //map = THREE.ImageUtils.loadTexture( // //new fair_clouds_4k().src // new fair_clouds_4k_low().src // ), map = new THREE.Texture().With( async s => { Console.WriteLine("event: fair_clouds_4k_low"); s.image = await new fair_clouds_4k_low(); s.needsUpdate = true; Console.WriteLine("event: fair_clouds_4k_low done"); await 20000; Console.WriteLine("event: fair_clouds_4k"); s.image = await new fair_clouds_4k(); s.needsUpdate = true; Console.WriteLine("event: fair_clouds_4k done"); } ), transparent = true }) ); //clouds.rotation.y = rotation; parent.add(clouds); //scene.add(clouds); #endregion var citiesData = new XElement("cities"); { var cityH = new XElement("city"); cityH.Add(new XElement("name", "Tallinn")); cityH.Add(new XElement("longitude", "24.7281")); cityH.Add(new XElement("latitude", "59.4339")); citiesData.Add(cityH); } { var cityH = new XElement("city"); cityH.Add(new XElement("name", "London")); cityH.Add(new XElement("longitude", "-0.116667")); cityH.Add(new XElement("latitude", "51.5")); citiesData.Add(cityH); } var shadowL = new ShadowLayout().AttachTo(Native.shadow); page.dataHolder = citiesData; #region Location on sphere Action AddCities = async delegate { //var table = await this.GetAllCities(); //Console.WriteLine(table.Rows.Count.ToString()); //for (var r = 0; r < table.Rows.Count; r++) //{ // var latitude = (double)table.Rows[r]["Latitude"]; // var longtitude = (double)table.Rows[r]["Longtitude"]; // addLocation(latitude, longtitude, radius, 0.001, parent, 6); // Console.WriteLine(latitude.ToString()); // await 100; //} var elemList = citiesData.Elements(); Console.WriteLine(elemList.Count().ToString()); foreach (var i in elemList) { //Console.WriteLine(i.ToString()); //foreach (var t in i.Elements()) //{ // Console.WriteLine(t.ToString()); //} //var l = i.Element("name"); //if (l == null) //{ // Console.WriteLine("F**k"); //} //else //{ // Console.WriteLine(l.Value); //} //Console.WriteLine(i.Element("longitude")); //Console.WriteLine(i.Element("latitude")); var lat = i.Element("latitude"); if (lat != null) { Console.WriteLine("Latitude not null"); var latitude = Convert.ToDouble(lat.Value); Console.WriteLine(latitude.ToString()); var longit = i.Element("longitude"); if(longit != null) { Console.WriteLine("Longitude not null"); var longtitude = Convert.ToDouble(longit.Value); addLocation(latitude, longtitude, radius, 0.001, parent, 6); Console.WriteLine(longtitude.ToString()); } } } }; citiesData.Changed += (send, arg) => { //if(arg.ObjectChange == XObjectChange.Value) //{ //Console.WriteLine(citiesData); //Console.WriteLine("Sender name "+((XAttribute)send).Name); //Console.WriteLine("Sender val " + ((XAttribute)send).Value); removeLocations(); AddCities(); //} }; AddCities(); #endregion var stars = new THREE.Mesh( new THREE.SphereGeometry(90, 64, 64), new THREE.MeshBasicMaterial( new { map = THREE.ImageUtils.loadTexture(new galaxy_starfield().src), side = THREE.BackSide }) ); scene.add(stars); this.canvas = (IHTMLCanvas)renderer.domElement; //renderer.domElement.AttachToDocument(); this.canvas.AttachTo(shadowL.webGlCanvas); this.canvas.style.SetLocation(0, 0); // jsc, what pointers do we have in store? this.canvas.css.style.cursor = IStyle.CursorEnum.pointer; this.canvas.css.active.style.cursor = IStyle.CursorEnum.move; var old = new { parent = new { parent.rotation.x, parent.rotation.y }, //sphere = new //{ // //sphere.rotation.x, // //sphere.rotation.y //}, //clouds = new //{ // //clouds.rotation.x, // //clouds.rotation.y, //}, CursorX = 0, CursorY = 0 }; #region onmousedown this.canvas.onmousedown += e => { var pointerLock = this.canvas == Native.document.pointerLockElement; if (e.MouseButton == IEvent.MouseButtonEnum.Middle) { this.canvas.requestFullscreen(); this.canvas.requestPointerLock(); } else { // movementX no longer works old = new { parent = new { parent.rotation.x, parent.rotation.y }, //sphere = new //{ // sphere.rotation.x, // sphere.rotation.y //}, //clouds = new //{ // clouds.rotation.x, // clouds.rotation.y, //}, e.CursorX, e.CursorY }; if (pointerLock) { // skip } else { e.CaptureMouse(); } } }; #endregion var z = camera.position.z; var sfx = new TestWebGLEarthShadowDomXML.HTML.Audio.FromAssets.SatelliteBeep_Sputnik1 { autobuffer = true, // this aint working //loop = true }; sfx.play(); //sfx.AttachToHead(); // http://soundfxnow.com/sound-fx/sputnik-satellite-beeping/ this.canvas.onmousewheel += e => { //camera.position.z = 1.5; // min max. shall adjust speed also! // max 4.0 // min 0.6 z -= 0.1 * e.WheelDirection; z = z.Max(0.6).Min(4.5); //Native.document.title = new { camera.position.z }.ToString(); }; // X:\jsc.svn\examples\javascript\Test\TestMouseMovement\TestMouseMovement\Application.cs #region onmousemove this.canvas.onmousemove += e => { var pointerLock = this.canvas == Native.document.pointerLockElement; //Console.WriteLine(new { e.MouseButton, pointerLock, e.movementX }); if (e.MouseButton == IEvent.MouseButtonEnum.Left) { if (pointerLock) { parent.rotation.x += 0.01 * e.movementY; parent.rotation.y += 0.01 * e.movementX; //sphere.rotation.x += 0.01 * e.movementY; //sphere.rotation.y += 0.01 * e.movementX; //clouds.rotation.x += 0.01 * e.movementY; //clouds.rotation.y += 0.01 * e.movementX; } else { parent.rotation.x = old.parent.x + 0.01 * (e.CursorY - old.CursorY); parent.rotation.y = old.parent.y + 0.01 * (e.CursorX - old.CursorX); //sphere.rotation.x = old.sphere.x + 0.01 * (e.CursorY - old.CursorY); //sphere.rotation.y = old.sphere.y + 0.01 * (e.CursorX - old.CursorX); //clouds.rotation.x = old.clouds.x + 0.01 * (e.CursorY - old.CursorY); //clouds.rotation.y = old.clouds.y + 0.01 * (e.CursorX - old.CursorX); } // Native.document.title = new { e.movementX, e.movementY }.ToString(); } }; #endregion // could we Native.window.onframe += e => { if (this.canvas.parentNode == null) return; camera.aspect = canvas.clientWidth / (double)canvas.clientHeight; camera.updateProjectionMatrix(); camera.position.z += (z - camera.position.z) * e.delay.ElapsedMilliseconds / 200; // the larger the vew the slower the rotation shall be var speed = 0.0001 * e.delay.ElapsedMilliseconds + 0.007 * 96.0 / canvas.clientHeight * 1.0 / camera.position.z; //Native.document.title = new { s = 96.0 / canvas.clientHeight }.ToString(); //Native.document.title = new { speed }.ToString(); //controls.update(); //sphere.rotation.y += speed; //clouds.rotation.y += speed; parent.rotation.y += speed; renderer.render(scene, camera); }; Native.window.onresize += delegate { //if (canvas.parentNode == Native.document.body) // are we embedded? if (page != null) renderer.setSize(); }; //new IStyle(this.canvas.css.before) //{ // content = "'do a middle click to maximize the earth dashboard'", // left = "1em", // bottom = "1em", // color = "white", // position = IStyle.PositionEnum.absolute //}; }
/// <summary> /// This is a javascript application. /// </summary> /// <param name="page">HTML document rendered by the web server which can now be enhanced.</param> public Application(ChromeExtensionShadowExperiment.HTML.Pages.IApp page) { // based on // X:\jsc.svn\examples\javascript\chrome\extensions\ChromeExtensionWithWorker\ChromeExtensionWithWorker\Application.cs // X:\jsc.svn\examples\javascript\Test\TestShadowDocumentWithForms\TestShadowDocumentWithForms\Application.cs // lets test shadow on external web apps // first lets get this test running in chrome dynamic self = Native.self; dynamic self_chrome = self.chrome; object self_chrome_tabs = self_chrome.tabs; if (self_chrome_tabs != null) { #region Installed chrome.runtime.Installed += delegate { // our API does not have a Show new chrome.Notification { Message = "Extension Installed!" }; }; #endregion var IgnoreSecondaryUpdatesFor = new List<TabIdInteger>(); chrome.tabs.Created += async (z) => { var n = new chrome.Notification { Message = "Created! " + new { z.id } }; }; chrome.tabs.Activated += async (z) => { var n = new chrome.Notification { Message = "Activated! " + new { z } }; }; #region Updated chrome.tabs.Updated += async (i, x, tab) => { // chrome://newtab/ if (tab.url.StartsWith("chrome-devtools://")) return; if (tab.url.StartsWith("chrome://")) return; if (tab.status != "complete") return; if (IgnoreSecondaryUpdatesFor.Contains(tab.id)) return; // inject? // what if we sent the uri to our android tab? var n = new chrome.Notification { Message = "Updated! " + new { tab.id, tab.url } }; IgnoreSecondaryUpdatesFor.Add(tab.id); await tab.pageAction.async.onclick; var nn = new chrome.Notification { Message = "Clicked " + new { tab.id, tab.url } }; // X:\jsc.svn\examples\javascript\chrome\extensions\ChromeExtensionHopToTab\ChromeExtensionHopToTab\Application.cs // document.currentScript? var code = await new WebClient().DownloadStringTaskAsync( new Uri(Worker.ScriptApplicationSource, UriKind.Relative) ); // https://developer.chrome.com/extensions/tabs#method-executeScript // https://developer.chrome.com/extensions/tabs#type-InjectDetails // https://developer.chrome.com/extensions/content_scripts#pi // Content scripts execute in a special environment called an isolated world. // They have access to the DOM of the page they are injected into, but not to any JavaScript variables or // functions created by the page. It looks to each content script as if there is no other JavaScript executing // on the page it is running on. The same is true in reverse: JavaScript running on the page cannot call any // functions or access any variables defined by content scripts. var result = await tab.id.executeScript( //new { file = url } new { code } ); }; #endregion return; } // run it // save view-source // subst // test in chrome // 1999999999 // X:\jsc.svn\examples\javascript\Test\TestShadowBody\TestShadowBody\Application.cs var s = new ShadowLayout().AttachTo(Native.shadow); // youtube //s.TopSideBar.style.zIndex = 19999999999; // forms shall use position fixed // to prevent overflow!? __Form.InternalHTMLTargetAttachToDocument = (that, yield) => { if (that.HTMLTarget.parentNode == null) { that.HTMLTarget.AttachTo(Native.shadow); } // animate! yield(true); }; s.TopSideBar.style.Opacity = 0.7; new FooUserControl { }.AttachControlTo( s.TopSideBar ); }