/// <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) { // user gets to drop a csv // with X and Y fields. // where is our csv parser? assetslibary? // show title? #region test new { }.With( async delegate { { fixup: await Task.CompletedTask; } var bytes = new byte[] { 0xcc }; await new IHTMLButton { "test worker " + new { Thread.CurrentThread.ManagedThreadId, bytes = bytes.ToHexString() } }.AttachToDocument().async.onclick; await default(HopToWorker); var output = "hello " + new { Thread.CurrentThread.ManagedThreadId, bytes = bytes.ToHexString() }; Console.Title = "progress!"; await Task.Delay(500); new { }.With( async delegate { { fixup: await Task.CompletedTask; } // is this supposed to work? var output2 = "hello " + new { Thread.CurrentThread.ManagedThreadId }; await default(HopToUI); new IHTMLPre { "progress... " + new { Thread.CurrentThread.ManagedThreadId, output2 } }.AttachToDocument(); } ); await Task.Delay(500); await default(HopToUI); new IHTMLPre { "ready " + new { Thread.CurrentThread.ManagedThreadId, output } }.AttachToDocument(); // ready { ManagedThreadId = 1, output = hello { ManagedThreadId = 10 } } } ); #endregion Native.css[IHTMLElement.HTMLElementEnum.head].style.display = IStyle.DisplayEnum.block; Native.css[IHTMLElement.HTMLElementEnum.title].style.display = IStyle.DisplayEnum.block; new { }.With( async delegate { { fixup: await Task.CompletedTask; } Native.document.documentElement.css.hover.style.backgroundColor = "pink"; //Native.document.documentElement.css.dragover // while await ondrop ? Native.document.documentElement.ondragover += ee => { Native.document.documentElement.style.backgroundColor = "cyan"; // await leave? unless ondrop? }; Native.document.documentElement.ondragleave += delegate { Native.document.documentElement.style.backgroundColor = ""; }; new IHTMLPre { "drop a file" }.AttachToDocument(); //Native.document.documentElement.ondrop += e => //var e = await Native.document.documentElement.async.ondrop; var f = await Native.document.documentElement.async.ondropfile; Native.document.documentElement.style.backgroundColor = "yellow"; new IHTMLPre { new { Thread.CurrentThread.ManagedThreadId, f.name, f.size } }.AttachToDocument(); // { name = download.csv, size = 20851425 } var sw = Stopwatch.StartNew(); // if the drop is from a network share it wil take a while.. //{ ManagedThreadId = 1, name = data.csv, size = 110777754 } //{ ManagedThreadId = 1, ElapsedMilliseconds = 43418 } var bytes = await f.readAsBytes(); new IHTMLPre { new { Thread.CurrentThread.ManagedThreadId, sw.ElapsedMilliseconds } }.AttachToDocument(); // nuget google await google.maps.api; #region map var div = new IHTMLDiv { }.AttachToDocument(); div.style.border = "1px dashed red"; div.style.height = "300px"; div.style.left = "0px"; div.style.right = "0px"; // https://developers.google.com/maps/documentation/javascript/reference?csw=1#MapOptions map = new google.maps.Map(div, new { disableDefaultUI = true, center = new { lat = 59.4329527, lng = 24.7023564 }, zoom = 6.0 } ); new IHTMLPre { () => new { zoom = map.getZoom() } }.AttachToDocument(); var marker0 = new google.maps.Marker( new { position = new { lat = 59.4329527, lng = 24.7023564 }, //label = "T", //title = "Tallinn", map } ); #endregion await new IHTMLButton { "go" }.AttachToDocument().async.onclick; var bytes1 = bytes; await default(HopToWorker); // start the static line reader. WorkerReader = new StreamReader(new MemoryStream(bytes1)); // now before we jump back to ui. lets start reading the lines... // working... { ManagedThreadId = 1, output = hello { ManagedThreadId = 11, Length = 20851425, WorkerReaderLineCount = 0 } } new { }.With( async delegate { { fixup: await Task.CompletedTask; } var output = "hello " + new { Thread.CurrentThread.ManagedThreadId }; await default(HopToUI); WorkerUI = new IHTMLPre { "working... " + new { Thread.CurrentThread.ManagedThreadId, output } }.AttachToDocument(); // cant jump back can we? } ); var header = WorkerReader.ReadLine(); #region rows // Jkn;Kohanimi;Keel;Kohanime staatus;Kohanime olek;Nimeobjekti liik;Lisainfo;Maakond,omavalitsus,asustusüksus;X;Y; //EIC;X;Y;ID;IK3MAX A;POSTOFFICE;ADDRESS //00117987-Y;6590203.66;534216.50;6250743;2916.98;Tallinn Harju maakond;Tallinn, Nooda tee, 7 //var headerX = header.Split(';').TakeWhile(x => x != "X").Count(); //var headerY = header.Split(';').TakeWhile(x => x != "Y").Count(); var line1 = WorkerReader.ReadLine(); var sw1 = Stopwatch.StartNew(); WorkerReaderLineCount = 0; var HasLine = !string.IsNullOrEmpty(line1); // URI malformed at decodeURIComponent while (HasLine) { WorkerReaderLineCount++; //await Task.Delay(33); //Console.WriteLine("520 " + new { WorkerReaderLineCount }); var x = new CSVHeaderLookup { header = header, line = line1 }["X"]; var y = new CSVHeaderLookup { header = header, line = line1 }["Y"]; //Console.WriteLine("525 " + new { WorkerReaderLineCount }); // hop supports strings for now.. var lat = "" + (double)LEST97.lest_function_vba.lest_geo(x, y, 0); var lng = "" + (double)LEST97.lest_function_vba.lest_geo(x, y, 1); //Console.WriteLine("531 " + new { WorkerReaderLineCount }); #region progress //if (WorkerReaderLineCount % 500 == 1) { Console.Title = WorkerReaderLineCount + " in " + sw1.ElapsedMilliseconds + "ms " + new { WorkerReader.BaseStream.Position, WorkerReader.BaseStream.Length }; } if (WorkerReaderLineCount % 300 == 1) { new { }.With( async delegate { { fixup: await Task.CompletedTask; } var lng1 = lng; var lat1 = lat; var title1 = line1; var output = "working... " + WorkerReaderLineCount + " in " + sw1.ElapsedMilliseconds + "ms " + new { x, y, lat, lng }; await default(HopToUI); WorkerUI.innerText = output; Console.WriteLine(new { lng1, lat1 }); var position = new { // InvalidValueError: setPosition: not a LatLng or LatLngLiteral: in property lat: not a number lat = Convert.ToDouble(lat1), lng = Convert.ToDouble(lng1) }; Console.WriteLine(new { position }); // http://stackoverflow.com/questions/20044308/google-maps-api-3-show-hide-markers-depending-on-zoom-level // http://stackoverflow.com/questions/19304574/center-set-zoom-of-map-to-cover-all-markers-visible-markers var marker = new google.maps.Marker( new { // https://developers.google.com/maps/documentation/javascript/examples/marker-symbol-predefined // https://developers.google.com/maps/documentation/javascript/markers //icon = new marker().src, // can we have two zoom levels? icon = new markersmall().src, position, //label = "T", title = title1, map } ); // http://stackoverflow.com/questions/8198635/change-marker-icon-on-mouseover-google-maps-v3 AddZoomAwareMarker(map, marker, new markersmall().src, new markerxsmall().src); while (await marker.async.onmouseover) { Console.Title = title1; } } ); //await Task.Delay(300); } #endregion //Console.WriteLine("606 " + new { WorkerReaderLineCount }); //await Task.Delay(3); line1 = WorkerReader.ReadLine(); HasLine = !string.IsNullOrEmpty(line1); //Console.WriteLine("611 " + new { WorkerReaderLineCount }); } #endregion Console.WriteLine("done at " + new { WorkerReaderLineCount }); // done... { ManagedThreadId = 1, output = done { ManagedThreadId = 10, WorkerReaderLineCount = 153411, ElapsedMilliseconds = 99979 } } // done... { ManagedThreadId = 1, output = done { ManagedThreadId = 10, WorkerReaderLineCount = 153411, ElapsedMilliseconds = 260865 } } { var output = "done " + new { Thread.CurrentThread.ManagedThreadId, WorkerReaderLineCount, sw1.ElapsedMilliseconds }; await default(HopToUI); WorkerUI.innerText = "done... " + new { Thread.CurrentThread.ManagedThreadId, output }; // done... { ManagedThreadId = 1, output = done { ManagedThreadId = 10, WorkerReaderLineCount = 153411 } } } } ); }
/// <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) { // https://sites.google.com/a/jsc-solutions.net/backlog/knowledge-base/2015/201510/20151007 // https://developers.google.com/maps/documentation/javascript/examples/map-geolocation //chrome.AppWindow new { }.With( async delegate { // tested with // s6, s1, tab7, ipad2 // tested via nfc // SERIALNUMBER=38505300414, G=ARVO, SN=SULAKATKO, CN="SULAKATKO,ARVO,38505300414", OU=authentication, O=ESTEID (DIGI-ID), C=EE Native.document.body.style.backgroundColor = "yellow"; new IHTMLPre { " await google.maps.api" }.AttachToDocument(); await google.maps.api; new IHTMLPre { " await google.maps.api done" }.AttachToDocument(); // Failed to execute 'write' on 'Document': It isn't possible to write into a document from an asynchronously-loaded external script unless it is explicitly opened. //var api = new IHTMLScript //{ // //src = "https://maps.googleapis.com/maps/api/js?key=API_KEY&signed_in=true&callback=initMap" // src = "https://maps.googleapis.com/maps/api/js?&callback=initMap" // //async // //defer // //src = "https://maps.googleapis.com/maps/api/js?" //}; ////Native.document.head.onm //var initMapTask = new TaskCompletionSource<object>(); //// jsc is not exposing delegate as IFunction? //// Uncaught TypeError: window.initMap is not a function ////(Native.window as dynamic)["initMap"] = (Action)delegate //(Native.window as dynamic).initMap = (Action)delegate //{ // //Native.document.body.style.backgroundColor = "cyan"; // initMapTask.SetResult(null); //}; //new { }.With( // async delegate // { // await Native.document.head.async.onmutation; // new IHTMLPre { Native.document.head.AsXElement() }.AttachToDocument(); // await Native.document.head.async.onmutation; // new IHTMLPre { Native.document.head.AsXElement() }.AttachToDocument(); // await Native.document.head.async.onmutation; // new IHTMLPre { Native.document.head.AsXElement() }.AttachToDocument(); // } //); var div = new IHTMLDiv { //id = "map" }.AttachToDocument(); ////map.id = "map_canvas"; //await api.AttachToHead().async.onload; //new IHTMLPre { new { (Native.window as dynamic).google } }.AttachToDocument(); //new IHTMLPre { new { (Native.window as dynamic).google.maps } }.AttachToDocument(); //await initMapTask.Task; //new IHTMLPre { new { (Native.window as dynamic).google.maps.Map } }.AttachToDocument(); //api.onlo //await api.async.onc // {{ Map = function Eh(a,b) div.style.border = "1px dashed red"; div.style.height = "300px"; div.style.left = "0px"; div.style.right = "0px"; //div.style.SetSize(400, 300); // b: "projectionTopLeft" // http://stackoverflow.com/questions/5471848/how-to-get-screen-xy-from-google-maps-v3-latlng //await Native.window.async.onframe; var map = new google.maps.Map(div, new { //center = new { lat = -34.397, lng = 150.644 }, center = new { lat = 59.4329527, lng = 24.7023564 }, //https://www.google.ee/maps/@59.4329527,24.7023564,14z?hl=en zoom = 6.0 } ); new IHTMLPre { "do you see it?" }.AttachToDocument(); // https://developers.google.com/maps/documentation/javascript/examples/marker-labels // Uncaught TypeError: Cannot read property 'x' of undefined //var infoWindow = new google.maps.InfoWindow(new { map }); //infoWindow.setPosition(map.getCenter()); //infoWindow.setContent("InfoWindow"); // https://developers.google.com/maps/documentation/javascript/examples/event-simple var marker = new google.maps.Marker( new { position = map.getCenter(), //label = new { lat = 59.4329527, lng = 24.7023564 }.ToString(), label = "23", title = "click to zoom", map } ); //marker.onclick += delegate //{ // map.setZoom(8.0); // map.setCenter(marker.getPosition()); //}; //while (await marker.async.onclick) next: await marker.async.onclick; { map.setZoom(8.0); map.setCenter(marker.getPosition()); await marker.async.onclick; map.setZoom(6.0); map.setCenter(marker.getPosition()); goto next; } } ); }
/// <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) { // Z:\jsc.svn\examples\javascript\io\DropLESTToDisplay\DropLESTToDisplay\Application.cs // http://xgis.maaamet.ee/xGIS/XGis?app_id=UU82&user_id=at&bbox=529464.185181536,6581178.67615528,549196.965601648,6593508.79911233&LANG=1 // http://www.maaamet.ee/rr/geo-lest/files/geo-lest_function_vba.txt // can we have a list of cities on ? var Helsinki = new { x = 6671069.664199971, y = 552396.6626611819 }; var Tallinn = new { x = 6589000.065127177, y = 542791.0230507818 }; var Haapsalu = new { x = 6533398.0, y = 480832.0 }; var Narva = new { x = 6589333.658324879, y = 737954.1228769943 }; var Tartu = new { x = 6474047.4766877275, y = 659622.4604005406 }; // alright lets do this. new { }.With( async delegate { await google.maps.api; var div = new IHTMLDiv { }.AttachToDocument(); div.style.border = "1px dashed red"; div.style.height = "300px"; div.style.left = "0px"; div.style.right = "0px"; // Z:\jsc.svn\examples\javascript\io\DropLESTToDisplay\DropLESTToDisplay\Application.cs var map = new google.maps.Map(div, new { center = new { lat = 59.4329527, lng = 24.7023564 }, zoom = 6.0 } ); var all = new[] { Helsinki, Tallinn, Haapsalu, Narva, Tartu }; all.WithEach( data => { var marker = new google.maps.Marker( new { position = new { lat = LEST97.lest_function_vba.lest_geo(data.x, data.y, 0), lng = LEST97.lest_function_vba.lest_geo(data.x, data.y, 1) }, //label = "T", //title = "Tallinn", map } ); } ); new IHTMLPre { () => new { map.getCenter().lat, map.getCenter().lng, x = LEST97.lest_function_vba.geo_lest( map.getCenter().lat, map.getCenter().lng, 0), y = LEST97.lest_function_vba.geo_lest( map.getCenter().lat, map.getCenter().lng, 1), } }.AttachToDocument(); // Cannot read property 'getSouthWest' of undefined new IHTMLPre { // rectangle.addListener('bounds_changed', showNewRect); delegate { if (map.getBounds() == null) { return "n/a"; } var getSouthWest_lat = map.getBounds().getSouthWest().lat; var getSouthWest_lng = map.getBounds().getSouthWest().lng; var getNorthEast_lat = map.getBounds().getNorthEast().lat; var getNorthEast_lng = map.getBounds().getNorthEast().lng; var count = ( from data in all let lat = (double)LEST97.lest_function_vba.lest_geo(data.x, data.y, 0) let lng = (double)LEST97.lest_function_vba.lest_geo(data.x, data.y, 1) // lng left to right // lng bottom to top where lat <= getNorthEast_lat where lng <= getNorthEast_lng where lat >= getSouthWest_lat where lng >= getSouthWest_lng select data ).Count(); return new { getSouthWest_lat, getSouthWest_lng, getNorthEast_lat, getNorthEast_lng, count }.ToString(); } }.AttachToDocument(); // http://stackoverflow.com/questions/2472957/how-can-i-change-the-color-of-a-google-maps-marker #region Add new IHTMLButton { "Add" }.AttachToDocument().onclick += delegate { var data = new { map.getCenter().lat, map.getCenter().lng, x = LEST97.lest_function_vba.geo_lest(map.getCenter().lat, map.getCenter().lng, 0), y = LEST97.lest_function_vba.geo_lest(map.getCenter().lat, map.getCenter().lng, 1), }; new IHTMLPre { "new { x = " + data.x + ", y = " + data.y + " }" }.AttachToDocument(); var marker = new google.maps.Marker( new { position = new { lat = LEST97.lest_function_vba.lest_geo(data.x, data.y, 0), lng = LEST97.lest_function_vba.lest_geo(data.x, data.y, 1) }, //label = "H", title = data.ToString(), map } ); }; #endregion #region Add Bounds new IHTMLButton { "Add Bounds" }.AttachToDocument().onclick += delegate { new google.maps.Marker( new { position = new { map.getBounds().getSouthWest().lat, map.getBounds().getSouthWest().lng, }, map } ); new google.maps.Marker( new { position = new { map.getBounds().getNorthEast().lat, map.getBounds().getNorthEast().lng, }, map } ); new google.maps.Marker( new { position = new { map.getBounds().getSouthWest().lat, map.getBounds().getNorthEast().lng, }, map } ); new google.maps.Marker( new { position = new { map.getBounds().getNorthEast().lat, map.getBounds().getSouthWest().lng, }, map } ); }; #endregion } ); }
/// <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) { // https://sites.google.com/a/jsc-solutions.net/backlog/knowledge-base/2015/201510/20151007 // https://developers.google.com/maps/documentation/javascript/examples/map-geolocation //chrome.AppWindow new { }.With( async delegate { // tested with // s6, s1, tab7, ipad2 // tested via nfc // SERIALNUMBER=38505300414, G=ARVO, SN=SULAKATKO, CN="SULAKATKO,ARVO,38505300414", OU=authentication, O=ESTEID (DIGI-ID), C=EE Native.document.body.style.backgroundColor = "yellow"; new IHTMLPre { " await google.maps.api" }.AttachToDocument(); await google.maps.api; new IHTMLPre { " await google.maps.api done" }.AttachToDocument(); // Failed to execute 'write' on 'Document': It isn't possible to write into a document from an asynchronously-loaded external script unless it is explicitly opened. //var api = new IHTMLScript //{ // //src = "https://maps.googleapis.com/maps/api/js?key=API_KEY&signed_in=true&callback=initMap" // src = "https://maps.googleapis.com/maps/api/js?&callback=initMap" // //async // //defer // //src = "https://maps.googleapis.com/maps/api/js?" //}; ////Native.document.head.onm //var initMapTask = new TaskCompletionSource<object>(); //// jsc is not exposing delegate as IFunction? //// Uncaught TypeError: window.initMap is not a function ////(Native.window as dynamic)["initMap"] = (Action)delegate //(Native.window as dynamic).initMap = (Action)delegate //{ // //Native.document.body.style.backgroundColor = "cyan"; // initMapTask.SetResult(null); //}; //new { }.With( // async delegate // { // await Native.document.head.async.onmutation; // new IHTMLPre { Native.document.head.AsXElement() }.AttachToDocument(); // await Native.document.head.async.onmutation; // new IHTMLPre { Native.document.head.AsXElement() }.AttachToDocument(); // await Native.document.head.async.onmutation; // new IHTMLPre { Native.document.head.AsXElement() }.AttachToDocument(); // } //); var div = new IHTMLDiv { //id = "map" }.AttachToDocument(); ////map.id = "map_canvas"; //await api.AttachToHead().async.onload; //new IHTMLPre { new { (Native.window as dynamic).google } }.AttachToDocument(); //new IHTMLPre { new { (Native.window as dynamic).google.maps } }.AttachToDocument(); //await initMapTask.Task; //new IHTMLPre { new { (Native.window as dynamic).google.maps.Map } }.AttachToDocument(); //api.onlo //await api.async.onc // {{ Map = function Eh(a,b) div.style.border = "1px dashed red"; div.style.height = "300px"; div.style.left = "0px"; div.style.right = "0px"; //div.style.SetSize(400, 300); // b: "projectionTopLeft" // http://stackoverflow.com/questions/5471848/how-to-get-screen-xy-from-google-maps-v3-latlng //await Native.window.async.onframe; var map = new google.maps.Map(div, new { //center = new { lat = -34.397, lng = 150.644 }, center = new { lat = 59.4329527, lng = 24.7023564 }, //https://www.google.ee/maps/@59.4329527,24.7023564,14z?hl=en zoom = 6.0 } ); new IHTMLPre { "do you see it?" }.AttachToDocument(); // https://developers.google.com/maps/documentation/javascript/examples/marker-labels // Uncaught TypeError: Cannot read property 'x' of undefined //var infoWindow = new google.maps.InfoWindow(new { map }); //infoWindow.setPosition(map.getCenter()); //infoWindow.setContent("InfoWindow"); // https://developers.google.com/maps/documentation/javascript/examples/event-simple var marker = new google.maps.Marker( new { position = map.getCenter(), //label = new { lat = 59.4329527, lng = 24.7023564 }.ToString(), label = "23", title = "click to zoom", map } ); //marker.onclick += delegate //{ // map.setZoom(8.0); // map.setCenter(marker.getPosition()); //}; //while (await marker.async.onclick) next: await marker.async.onclick; { map.setZoom(8.0); map.setCenter(marker.getPosition()); await marker.async.onclick; map.setZoom(6.0); map.setCenter(marker.getPosition()); goto next; } } ); }
/// <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) { // Z:\jsc.svn\examples\javascript\io\DropLESTToDisplay\DropLESTToDisplay\Application.cs // http://xgis.maaamet.ee/xGIS/XGis?app_id=UU82&user_id=at&bbox=529464.185181536,6581178.67615528,549196.965601648,6593508.79911233&LANG=1 // http://www.maaamet.ee/rr/geo-lest/files/geo-lest_function_vba.txt // can we have a list of cities on ? var Helsinki = new { x = 6671069.664199971, y = 552396.6626611819 }; var Tallinn = new { x = 6589000.065127177, y = 542791.0230507818 }; var Haapsalu = new { x = 6533398.0, y = 480832.0 }; var Narva = new { x = 6589333.658324879, y = 737954.1228769943 }; var Tartu = new { x = 6474047.4766877275, y = 659622.4604005406 }; // alright lets do this. new { }.With( async delegate { await google.maps.api; var div = new IHTMLDiv { }.AttachToDocument(); div.style.border = "1px dashed red"; div.style.height = "300px"; div.style.left = "0px"; div.style.right = "0px"; // Z:\jsc.svn\examples\javascript\io\DropLESTToDisplay\DropLESTToDisplay\Application.cs var map = new google.maps.Map(div, new { center = new { lat = 59.4329527, lng = 24.7023564 }, zoom = 6.0 } ); var all = new[] { Helsinki, Tallinn, Haapsalu, Narva, Tartu }; all.WithEach( data => { var marker = new google.maps.Marker( new { position = new { lat = LEST97.lest_function_vba.lest_geo(data.x, data.y, 0), lng = LEST97.lest_function_vba.lest_geo(data.x, data.y, 1) }, //label = "T", //title = "Tallinn", map } ); } ); new IHTMLPre { () => new { map.getCenter().lat, map.getCenter().lng, x = LEST97.lest_function_vba.geo_lest(map.getCenter().lat, map.getCenter().lng, 0), y = LEST97.lest_function_vba.geo_lest(map.getCenter().lat, map.getCenter().lng, 1), } }.AttachToDocument(); // Cannot read property 'getSouthWest' of undefined new IHTMLPre { // rectangle.addListener('bounds_changed', showNewRect); delegate { if (map.getBounds() == null) { return("n/a"); } var getSouthWest_lat = map.getBounds().getSouthWest().lat; var getSouthWest_lng = map.getBounds().getSouthWest().lng; var getNorthEast_lat = map.getBounds().getNorthEast().lat; var getNorthEast_lng = map.getBounds().getNorthEast().lng; var count = ( from data in all let lat = (double)LEST97.lest_function_vba.lest_geo(data.x, data.y, 0) let lng = (double)LEST97.lest_function_vba.lest_geo(data.x, data.y, 1) // lng left to right // lng bottom to top where lat <= getNorthEast_lat where lng <= getNorthEast_lng where lat >= getSouthWest_lat where lng >= getSouthWest_lng select data ).Count(); return(new { getSouthWest_lat, getSouthWest_lng, getNorthEast_lat, getNorthEast_lng, count }.ToString()); } }.AttachToDocument(); // http://stackoverflow.com/questions/2472957/how-can-i-change-the-color-of-a-google-maps-marker #region Add new IHTMLButton { "Add" }.AttachToDocument().onclick += delegate { var data = new { map.getCenter().lat, map.getCenter().lng, x = LEST97.lest_function_vba.geo_lest(map.getCenter().lat, map.getCenter().lng, 0), y = LEST97.lest_function_vba.geo_lest(map.getCenter().lat, map.getCenter().lng, 1), }; new IHTMLPre { "new { x = " + data.x + ", y = " + data.y + " }" }.AttachToDocument(); var marker = new google.maps.Marker( new { position = new { lat = LEST97.lest_function_vba.lest_geo(data.x, data.y, 0), lng = LEST97.lest_function_vba.lest_geo(data.x, data.y, 1) }, //label = "H", title = data.ToString(), map } ); }; #endregion #region Add Bounds new IHTMLButton { "Add Bounds" }.AttachToDocument().onclick += delegate { new google.maps.Marker( new { position = new { map.getBounds().getSouthWest().lat, map.getBounds().getSouthWest().lng, }, map } ); new google.maps.Marker( new { position = new { map.getBounds().getNorthEast().lat, map.getBounds().getNorthEast().lng, }, map } ); new google.maps.Marker( new { position = new { map.getBounds().getSouthWest().lat, map.getBounds().getNorthEast().lng, }, map } ); new google.maps.Marker( new { position = new { map.getBounds().getNorthEast().lat, map.getBounds().getSouthWest().lng, }, map } ); }; #endregion } ); }
/// <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) { Native.body.Clear(); new IHTMLAnchor { href = "/jsc", innerText = "enter diagnostic mode" }.AttachToDocument(); new { }.With( async delegate { // Severity Code Description Project File Line //Error CS7069 Reference to type 'TaskAwaiter<>' claims it is defined in 'mscorlib', but it could not be found GoogleMapsTracker Z:\jsc.svn\examples\javascript\data\GoogleMapsTracker\Application.cs 40 // the new using // 4.6 // stored at Z:\jsc.svn\examples\javascript\data\packages // is that where jsc and nuget both agree to store it? no. jsc needs to mimick nuget here. // did we build it? await google.maps.api; var div = new IHTMLDiv { //}.AttachTo(Native.document.documentElement); // future jsc will have the ability to make offline edit and continue changes }.AttachTo(Native.body); div.style.position = IStyle.PositionEnum.absolute; div.style.borderBottom = "1px dashed red"; div.style.height = "400px"; div.style.top = "0px"; div.style.left = "0px"; div.style.right = "0px"; Native.body.style.marginTop = "420px"; // Free until exceeding 25,000 map loads per day for 90 consecutive days var map = new google.maps.Map(div, new { // https://developers.google.com/maps/documentation/javascript/examples/control-disableUI disableDefaultUI = true, center = new { lat = 59.4329527, lng = 24.7023564 }, //https://www.google.ee/maps/@59.4329527,24.7023564,14z?hl=en zoom = 6.0 } ); // https://developers.google.com/maps/documentation/javascript/examples/event-simple var flightPlanCoordinates = new[] { // Object literals are accepted in place of LatLng objects, as a convenience, in many places new { lat = 59.4329527 - 0.25, lng = 24.7023564 - 0.5}, new { lat = 59.4329527 - 0.25, lng = 24.7023564 + 0.5 }, // up, right new { lat = 59.4329527 + 0.25, lng = 24.7023564 + 0.5}, new { lat = 59.4329527 + 0.25, lng = 24.7023564 - 0.5}, // close the line //new { lat = 59.4329527 - 0.25, lng = 24.7023564 - 0.5}, }; // https://developers.google.com/maps/documentation/javascript/examples/polyline-simple var flightPath = new google.maps.Polyline(new { path = flightPlanCoordinates.Concat(flightPlanCoordinates.Take(1)).ToArray(), geodesic = true, strokeColor = "#FF0000", strokeOpacity = 1.0, strokeWeight = 2 }); // like a stlus huh. flightPath.setMap(map); // alternative is we play a pre recored session. new { }.With( async delegate { await new IHTMLButton { "load other replays (?)" }.AttachToDocument().async.onclick; var other = new IHTMLSelect { }.AttachToDocument(); var replayIDs = await base.GetAllReplays(); if (replayIDs.Length == 0) { other.Add("n/a"); return; } other.Add(replayIDs); var btn = new IHTMLButton { "select one of them!" }.AttachToDocument(); other.onchange += async delegate { var xreplayID = other[other.selectedIndex].value; btn.innerText = "show " + new { other.selectedIndex, xreplayID }.ToString(); var count = await base.GetReplayCount(xreplayID); btn.innerText = "show " + new { other.selectedIndex, xreplayID, count }.ToString(); }; btn.onclick += async delegate { // draw polygon onto map from database. var xreplayID = other[other.selectedIndex].value; var sw = Stopwatch.StartNew(); new IHTMLPre { () => new { sw.ElapsedMilliseconds } }.AttachToDocument(); var xreplay = await base.GetReplay(xreplayID); sw.Stop(); new IHTMLPre { () => new { xreplay.Length } }.AttachToDocument(); // can gmaps use our datarows too? yes. // will this work on android? and appengine, mysql? and ubuntu? var xreplayPath = new google.maps.Polyline(new { path = xreplay.ToArray(), geodesic = true, strokeColor = "#00FF00", strokeOpacity = 1.0, strokeWeight = 4 }); // like a stlus huh. xreplayPath.setMap(map); }; } ); // replayID lat as double lng as double comment // we are to record a new var replayID = "replayID" + new Random().Next().ToString("x8"); // lets use this id to stream to database. can be used for later replay? await new IHTMLButton { "record new session as " + replayID }.AttachToDocument().async.onclick; new IHTMLButton { "reload" }.AttachToDocument().onclick += delegate { Native.document.location.reload(); }; var sw1 = Stopwatch.StartNew(); var stop = new IHTMLButton { "stop" }.AttachToDocument().async.onclick; var stop2 = false; // can we now do the autodrawer? // load from db? var history = new List<google.maps.LatLng> { }; //var delete = delegate // Console: Uncaught SyntaxError: Unexpected token delete http://192.168.1.126:15175/view-source:80480 // should jsc rename delete token like we do for catch? Action dodelete = delegate { }; new { }.With( async delegate { // at every so often remember the point and redraw. //while await Task.Delay() do { // 1 fps? //await Task.Delay(1000 / 1); //await Task.Delay(1000 / 15); await Task.Delay(1000 / 4); // unless we did not move? history.Add( map.getCenter() ); while (history.Count > 128) history.RemoveAt(0); dodelete(); var historyPath = new google.maps.Polyline(new { path = history.ToArray(), geodesic = true, strokeColor = "#0000FF", strokeOpacity = 1.0, strokeWeight = 4 }); // like a stlus huh. historyPath.setMap(map); dodelete = delegate { historyPath.setMap(null); }; // show buzy div.style.borderBottom = "1px dashed red"; await base.AddHistory(replayID, map.getCenter().lng, map.getCenter().lat); // show ready div.style.borderBottom = "1px dashed blue"; } while (!stop.IsCompleted); sw1.Stop(); } ); var marker = new google.maps.Marker( new { position = map.getCenter(), label = "R", title = "click to zoom", map } ); // lets keep polling where are we looking at //new IHTMLPre { () => new { Position = marker.getPosition() } }.AttachToDocument(); new IHTMLPre { () => new { stop = stop.IsCompleted, sw1.ElapsedMilliseconds, history.Count, getCenter = map.getCenter(), map.getCenter().lat, map.getCenter().lng } }.AttachToDocument(); //new IHTMLPre { map.getCenter }.AttachToDocument(); //new IHTMLPre().Add() //while (!stop.IsCompleted) while (true) { await marker.async.onclick; // can we make the poly dissapear? flightPath.setMap(null); map.setZoom(8.0); map.setCenter(marker.getPosition()); await marker.async.onclick; // and reappeaar flightPath.setMap(map); map.setZoom(6.0); map.setCenter(marker.getPosition()); } } ); }