예제 #1
0
        //public override IHTMLElement HTMLTargetContainerRef
        //{
        //    get
        //    {
        //        return InternalContainer;
        //    }
        //}

        public __ComboBox()
        {
            //Changes made due to select after not working
            //http://stackoverflow.com/questions/3532649/problem-with-select-and-after-with-css-in-webkit

            //Size comes from Control size
            #region InternalContainer
            this.InternalContainer = new IHTMLDiv();

            this.InternalContainer.style.position = ScriptCoreLib.JavaScript.DOM.IStyle.PositionEnum.absolute;
            this.InternalContainer.name           = "CSSComboBox";

            this.InternalContainer.style.left = "0px";
            this.InternalContainer.style.top  = "0px";
            #endregion

            #region InternalContainer
            this.InternalShadow = new IHTMLDiv();


            this.InternalShadow.style.position = ScriptCoreLib.JavaScript.DOM.IStyle.PositionEnum.absolute;
            this.InternalShadow.name           = "CSSComboBoxAfter";

            this.InternalShadow.style.left   = "0px";
            this.InternalShadow.style.top    = "0px";
            this.InternalShadow.style.right  = "0px";
            this.InternalShadow.style.bottom = "0px";
            #endregion

            this.InternalShadow.AttachTo(InternalContainer);


            this.InternalElement                = new IHTMLSelect().AttachTo(InternalContainer);
            this.InternalElement.style.left     = "0px";
            this.InternalElement.style.top      = "0px";
            this.InternalElement.style.width    = "100%";
            this.InternalElement.style.height   = "100%";
            this.InternalElement.style.position = ScriptCoreLib.JavaScript.DOM.IStyle.PositionEnum.absolute;



            this.InternalElement.onchange +=
                e =>
            {
                RaiseSelectedIndexChanged();
            };

            this.Items = new __ObjectCollection {
                Owner = this
            };

            this.InternalSetDefaultFont();
        }
예제 #2
0
        //public override IHTMLElement HTMLTargetContainerRef
        //{
        //    get
        //    {
        //        return InternalContainer;
        //    }
        //}

        public __ComboBox()
        {
            //Changes made due to select after not working
            //http://stackoverflow.com/questions/3532649/problem-with-select-and-after-with-css-in-webkit

            //Size comes from Control size
            #region InternalContainer
            this.InternalContainer = new IHTMLDiv();

            this.InternalContainer.style.position = ScriptCoreLib.JavaScript.DOM.IStyle.PositionEnum.absolute;
            this.InternalContainer.name = "CSSComboBox";

            this.InternalContainer.style.left = "0px";
            this.InternalContainer.style.top = "0px";
            #endregion

            #region InternalContainer
            this.InternalShadow = new IHTMLDiv();
            

            this.InternalShadow.style.position = ScriptCoreLib.JavaScript.DOM.IStyle.PositionEnum.absolute;
            this.InternalShadow.name = "CSSComboBoxAfter";

            this.InternalShadow.style.left = "0px";
            this.InternalShadow.style.top = "0px";
            this.InternalShadow.style.right = "0px";
            this.InternalShadow.style.bottom = "0px";
            #endregion

            this.InternalShadow.AttachTo(InternalContainer);


            this.InternalElement = new IHTMLSelect().AttachTo(InternalContainer);
            this.InternalElement.style.left = "0px";
            this.InternalElement.style.top = "0px";
            this.InternalElement.style.width = "100%";
            this.InternalElement.style.height = "100%";
            this.InternalElement.style.position = ScriptCoreLib.JavaScript.DOM.IStyle.PositionEnum.absolute;




            this.InternalElement.onchange +=
                e =>
                {

                    RaiseSelectedIndexChanged();
                };

            this.Items = new __ObjectCollection { Owner = this };

            this.InternalSetDefaultFont();
        }
예제 #3
0
        /// <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 combo = new IHTMLSelect().AttachToDocument();


            #region can we have a next button?
            // https://sites.google.com/a/jsc-solutions.net/work/knowledge-base/15-dualvr/20150807/shadertoy
            new IHTMLButton { "next" }.AttachToDocument().With(
                next =>
                {
                    new IStyle(next)
                    {
                        position = IStyle.PositionEnum.absolute,
                        right = "1px",
                        top = "1em",
                        bottom = "1em"
                    };

                    next.onclick += delegate
                    {
                        var n = (combo.selectedIndex + 1) % combo.childNodes.Length;
                        Console.WriteLine(new { n });
                        combo.selectedIndex = n;
                    };
                }
            );
            #endregion

            new[] { "red", "green", "blue" }.WithEach(
                async x =>
                {

                    var option = new IHTMLOption { value = x, innerText = new { x }.ToString() }.AttachTo(combo);

                    do
                    {
                        await option.async.onselect;

                        Native.css.style.borderLeft = $"1em {x} solid";

                        await option.async.ondeselect;


                        Native.css.style.borderRight = $"1em {x} solid";
                    }
                    while (await Native.window.async.onframe);

                }
            );
        }
예제 #4
0
        /// <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 combo = new IHTMLSelect().AttachToDocument();


            #region can we have a next button?
            // https://sites.google.com/a/jsc-solutions.net/work/knowledge-base/15-dualvr/20150807/shadertoy
            new IHTMLButton {
                "next"
            }.AttachToDocument().With(
                next =>
            {
                new IStyle(next)
                {
                    position = IStyle.PositionEnum.absolute,
                    right    = "1px",
                    top      = "1em",
                    bottom   = "1em"
                };

                next.onclick += delegate
                {
                    var n = (combo.selectedIndex + 1) % combo.childNodes.Length;
                    Console.WriteLine(new { n });
                    combo.selectedIndex = n;
                };
            }
                );
            #endregion

            new[] { "red", "green", "blue" }.WithEach(
                async x =>
            {
                var option = new IHTMLOption {
                    value = x, innerText = new { x }.ToString()
                }.AttachTo(combo);

                do
                {
                    await option.async.onselect;

                    Native.css.style.borderLeft = $"1em {x} solid";

                    await option.async.ondeselect;


                    Native.css.style.borderRight = $"1em {x} solid";
                }while (await Native.window.async.onframe);
            }
                );
        }
예제 #5
0
        // could assetslibrary auto byref those projects ?
        // https://sites.google.com/a/jsc-solutions.net/work/knowledge-base/15-dualvr/20150818
        // https://sites.google.com/a/jsc-solutions.net/work/knowledge-base/15-dualvr/20150809/chrome-filesystem

        /// <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.document.documentElement.style.overflow = IStyle.OverflowEnum.auto;


            // chrome by default has no scrollbar, bowser does
            Native.document.documentElement.style.overflow = IStyle.OverflowEnum.hidden;
            Native.body.style.margin = "0px";
            Native.body.Clear();

            // ipad?
            Native.window.onerror +=
                e =>
                {
                    new IHTMLPre {
                        "error " + new { e.error }
                    }.AttachToDocument();
                };

            // https://www.youtube.com/watch?v=tnS8K0yhmZU
            // http://www.reddit.com/r/oculus/comments/2sv5lk/new_release_of_shadertoy_vr/
            // https://www.shadertoy.com/view/lsSGRz

            // https://sites.google.com/a/jsc-solutions.net/backlog/knowledge-base/2015/201503/20150309
            // https://zproxy.wordpress.com/2015/03/09/project-windstorm/
            // https://github.com/jimbo00000/RiftRay


            #region += Launched chrome.app.window
            dynamic self = Native.self;
            dynamic self_chrome = self.chrome;
            object self_chrome_socket = self_chrome.socket;

            if (self_chrome_socket != null)
            {
                if (!(Native.window.opener == null && Native.window.parent == Native.window.self))
                {
                    Console.WriteLine("chrome.app.window.create, is that you?");

                    // pass thru
                }
                else
                {
                    // should jsc send a copresence udp message?
                    chrome.runtime.UpdateAvailable += delegate
                    {
                        new chrome.Notification(title: "UpdateAvailable");

                    };

                    chrome.app.runtime.Launched += async delegate
                    {
                        // 0:12094ms chrome.app.window.create {{ href = chrome-extension://aemlnmcokphbneegoefdckonejmknohh/_generated_background_page.html }}
                        Console.WriteLine("chrome.app.window.create " + new { Native.document.location.href });

                        new chrome.Notification(title: "ChromeUDPSendAsync");

                        var xappwindow = await chrome.app.window.create(
                               Native.document.location.pathname, options: null
                        );

                        //xappwindow.setAlwaysOnTop

                        xappwindow.show();

                        await xappwindow.contentWindow.async.onload;

                        Console.WriteLine("chrome.app.window loaded!");
                    };


                    return;
                }
            }
            #endregion



            Console.WriteLine("create WebGLRenderingContext");

            var gl = new WebGLRenderingContext(alpha: true);

            if (gl == null)
            {
                Native.body.style.backgroundColor = "yellow";

                new IHTMLPre {
                    // https://code.google.com/p/chromium/issues/detail?id=294207
                    "Rats! WebGL hit a snag.",

                    //new IHTMLAnchor { href = "about:gpu", innerText = "about:gpu" }
                }.AttachToDocument();
                return;
            }


            Native.body.style.backgroundColor = "blue";

            gl.oncontextlost += async e =>
            {
                //  The GPU process hung. Terminating after 10000 ms.

                // GpuProcessHostUIShim: The GPU process crashed!

                Native.body.style.backgroundColor = "red";

                Native.body.Clear();

                new IHTMLPre {
                    // https://code.google.com/p/chromium/issues/detail?id=294207
                    //"The GPU process crashed! (or did the graphics driver crash?)",
                    "The GPU process crashed! (or did the display driver crash?)",

                    //new IHTMLAnchor { href = "about:gpu", innerText = "about:gpu" }
                }.AttachToDocument();

                // reload?

                //if (Native.window.confirm("oncontextlost, retry or refresh later?"))
                //{
                //    Native.body.style.backgroundColor = "yellow";

                //    //e.
                //}

                await new IHTMLButton { "blacklist " + new { Native.document.location.hash } + " shader,  reload tab to reload gpu. (or restart browser)" }.AttachToDocument().async.onclick;

                Native.window.localStorage[new { Native.document.location.hash }] = "blacklisted";

                // reload gpu?
                Native.document.location.reload();
            };

            //gl.canvas.async.oncont

            var combo = new IHTMLSelect().AttachToDocument();

            combo.style.position = IStyle.PositionEnum.absolute;
            combo.style.left = "0px";
            combo.style.top = "0px";
            //combo.style.right = "0px";
            combo.style.width = "100%";

            combo.style.backgroundColor = "rgba(255,255,255,0.5)";
            //combo.style.backgroundColor = "rgba(255,255,0,0.5)";
            //combo.style.background = "linear-gradient(to bottom, rgba(255,255,255,0.5 0%,rgba(255,255,255,0.0 100%))";
            combo.style.border = "0px solid transparent";
            combo.style.fontSize = "large";
            combo.style.paddingLeft = "1em";
            combo.style.fontFamily = IStyle.FontFamilyEnum.Verdana;
            combo.style.cursor = IStyle.CursorEnum.pointer;



            //var mAudioContext = new AudioContext();


            var c = gl.canvas.AttachToDocument();

            #region onresize
            new { }.With(
                async delegate
                {
                    do
                    {
                        c.width = Native.window.Width;
                        c.height = Native.window.Height;
                        c.style.SetSize(c.width, c.height);
                    }
                    while (await Native.window.async.onresize);
                }
            );
            #endregion



            #region CaptureMouse
            var mMouseOriX = 0;
            var mMouseOriY = 0;
            var mMousePosX = 0;
            var mMousePosY = 0;

            c.onmousedown += async ev =>
            {
                mMouseOriX = ev.CursorX;
                //mMouseOriY = ev.CursorY;
                mMouseOriY = c.height - ev.CursorY;

                mMousePosX = mMouseOriX;
                mMousePosY = mMouseOriY;

                // why aint it canvas?
                //ev.Element
                //ev.CaptureMouse();

                // using ?
                ev.Element.requestPointerLock();
                await ev.Element.async.onmouseup;
                Native.document.exitPointerLock();

                mMouseOriX = -Math.Abs(mMouseOriX);
                mMouseOriY = -Math.Abs(mMouseOriY);
            };

            //c.ontouchmove += 

            c.onmousemove += ev =>
            {
                if (ev.MouseButton == IEvent.MouseButtonEnum.Left)
                {
                    mMousePosX += ev.movementX;
                    mMousePosY += ev.movementY;
                }
            };

            c.onmousewheel += ev =>
            {
                ev.preventDefault();
                ev.stopPropagation();

                mMousePosY += 3 * ev.WheelDirection;
            };

            #endregion



            // http://www.wufoo.com/html5/attributes/05-list.html
            // http://www.w3schools.com/tags/att_input_list.asp
            //uiauto.datalist1.EnsureID();
            //uiauto.search.list = uiauto.datalist1.id;
            //uiauto.datalist1.id = "datalist1";
            //uiauto.search.list = "datalist1";
            //new IHTMLPre { new { uiauto.search.list, uiauto.datalist1.id } }.AttachToDocument();

            var sw = Stopwatch.StartNew();


            //new IHTMLOption { value = "", innerText = $"{References.programs.Count} shaders available" }.AttachTo(combo);
            new IHTMLOption { value = "", innerText = b.programs.Count + " shaders available" }.AttachTo(combo);


            // should bind the selection to uri and reload if gpu crashes.

            #region can we have a next button?
            // https://sites.google.com/a/jsc-solutions.net/work/knowledge-base/15-dualvr/20150807/shadertoy
            new IHTMLButton { "next" }.AttachToDocument().With(
                next =>
                {
                    new IStyle(next)
                    {
                        position = IStyle.PositionEnum.absolute,
                        right = "1em",
                        top = "2em",
                        bottom = "1em",
                        padding = "4em"
                    };

                    next.onclick += delegate
                    {
                        var n = combo.selectedIndex + 1;
                        Console.WriteLine(new { n });
                        combo.selectedIndex = n;

                        // if we are on a laptop, by clicking the button perhaps now you want to click right arrow?
                        combo.focus();
                    };
                }
            );
            #endregion

            // do not add byref if bypackage is available!

            //            Severity Code    Description Project File Line
            //Error CS0433  The type 'ShaderToy' exists in both 'ChromeShaderToyColumns, Version=1.0.0.0, Culture=neutral, PublicKeyToken=null' and 'WebGL ShaderToy, Version=0.0.0.0, Culture=neutral, PublicKeyToken=null'    ChromeShaderToyPrograms.b Z:\jsc.svn\examples\javascript\chrome\apps\WebGL\ChromeShaderToyPrograms\ChromeShaderToyPrograms.b\Application.cs   283

            ShaderToy.EffectPass pip = null;

            // http://stackoverflow.com/questions/25289390/html-how-to-make-input-type-list-only-accept-a-list-choice
            //References.programs.Keys.WithEachIndex(
            b.programs.Keys.WithEachIndex(
                async (key, index) =>
                {
                    //var text = (1 + index) + " of " + References.programs.Count + " " + key.SkipUntilIfAny("ChromeShaderToy").Replace("By", " by ");
                    var text = (1 + index) + " of " + b.programs.Count + " " + key.SkipUntilIfAny("ChromeShaderToy").Replace("By", " by ");

                    var blacklisted = Native.window.localStorage[new { hash = "#" + key }] == "blacklisted";
                    if (blacklisted)
                    {
                        var option0 = new IHTMLOption { value = key, innerText = "blacklisted " + text }.AttachTo(combo);
                        return;
                    }


                    var option = new IHTMLOption { value = key, innerText = text }.AttachTo(combo);

                    await Native.window.async.onframe;

                    // um should we preselect it? did we come from a reload? did gpu crash?
                    if (Native.document.location.hash == "#" + key)
                    {
                        // 0 is the header.. should it be a optionheader instead?
                        combo.selectedIndex = 1 + index;
                    }


                    // we are about to create 100 objects. does it have any impact to UI?
                    //var frag = References.programs[key]();
                    var frag = b.programs[key]();

                    // 0ms Error: {{ infoLog = WARNING: 0:13: '=' : global variable initializers should be constant expressions (uniforms and globals are allowed in global initializers for legacy compatibility)
                    // can we detect errors correctly?

                    var len = frag.ToString().Length;

                    option.innerText = text + " " + new
                    {
                        //frame,
                        //load = load.ElapsedMilliseconds + "ms ",

                        frag = len + "bytes ",
                        // a telemetry to track while running on actual hardware
                        //fragGPU = pass0.xCreateShader.fsTranslatedShaderSource.Length + " bytes"
                    };

                    // cant we get it if we manually set it?
                    await option.async.onselect;

                    // first time select. before we try to load the shader, lets make sure we remember what causes the gpu crash
                    // 2278ms select {{ key = InvadersByIapafoto, index = 10, hash = #InputTimeByIq }}
                    await Native.document.location.replace("#" + key);

                    // need two frames to see a change in hash?
                    //await Native.window.async.onframe;
                    //await Native.window.async.onframe;


                    // unless from previous refresh it crashed gpu?
                    Console.WriteLine("select " + new { key, index, Native.document.location.hash });

                    var load = Stopwatch.StartNew();

                    // defined at?
                    // "C:\util\jsc\nuget\WebGL.ShaderToy.1.0.0.0.nupkg"
                    var pass0 = new ShaderToy.EffectPass(
                        gl: gl,
                        precission: ShaderToy.DetermineShaderPrecission(gl),
                        supportDerivatives: gl.getExtension("OES_standard_derivatives") != null
                    );
                    pass0.MakeHeader_Image();
                    pass0.NewShader_Image(frag);

                    load.Stop();

                    new { }.With(
                        async delegate
                        {
                            while (await option.async.ondeselect)
                            {
                                pip = pass0;

                                await option.async.onselect;
                            }
                        }
                    );

                    var framesInSecond = 0;
                    var theSecond = Stopwatch.StartNew();

                    var frame = 0;
                    do
                    {
                        // can we change uri so a refresh would reload the same program?
                        // perhaps its time to review historic api?
                        Native.document.location.replace("#" + key);


                        frame++;
                        framesInSecond++;

                        if (theSecond.ElapsedMilliseconds >= 1000)
                        {
                            //option.innerText = key + new { frame };
                            option.innerText = text + " " + new
                            {
                                //frame,
                                framesInSecond,
                                load = load.ElapsedMilliseconds + "ms ",

                                frag = len + "bytes ",
                                // a telemetry to track while running on actual hardware
                                fragGPU = pass0.xCreateShader.fsTranslatedShaderSource.Length + " bytes"
                            };

                            framesInSecond = 0;
                            //theSecond.Restart();
                            theSecond = Stopwatch.StartNew();
                        }


                        // can we scale?
                        pass0.Paint_Image(
                            sw.ElapsedMilliseconds / 1000.0f,

                            mMouseOriX,
                            mMouseOriY,
                            mMousePosX,
                            mMousePosY,

                            zoom: 1.0f
                        );

                        if (pip != null)
                        {
                            // can we scale?
                            pip.Paint_Image(
                                sw.ElapsedMilliseconds / 1000.0f,

                                mMouseOriX,
                                mMouseOriY,
                                mMousePosX,
                                mMousePosY,

                                zoom: 0.10f
                            );

                        }

                        // what does it do?
                        gl.flush();

                        // wither we are selected or we are pip?
                        await option.async.selected;
                    }
                    while (await Native.window.async.onframe);

                }
            );





        }
예제 #6
0
        // seems like switching to iframe,
        // does not keep parent responsive.

        // framerate is also shared between iframe and parent.

        // and reload may cause continuty issues
        // gpu reload seems to be tab based..
        // even having multiple tabs, will kill webgl on both when crashed
        // having two ips wont help either.
        // so the true multishader

        // https://www.khronos.org/webgl/public-mailing-list/archives/1104/msg00041.php

        // http://www.anandtech.com/show/9124/amd-dives-deep-on-asynchronous-shading
        // https://code.google.com/p/chromium/issues/detail?id=249391
        // http://toji.github.io/shader-perf/
        // https://plus.google.com/+BrandonJonesToji/posts/4ERHkicC5Ny

        // or can we atleast move the program link time?

        // the only performance gain we could get is to batch link all shaders, keep responsive ui and then wait for it to complete.
        // await delayed shaders?
        // so it is rather useless until iframe has its own gpu blocking chain...
        // is there a way to ask if the deffered link or comple is ready?

        static void doprograms()
        {
            Native.body.style.overflow = IStyle.OverflowEnum.hidden;
            Native.body.style.margin = "0px";

            Native.body.Clear();




            // Severity	Code	Description	Project	File	Line	Source
            //Error Metadata file 'Z:\jsc.svn\examples\javascript\chrome\apps\WebGL\ChromeShaderToyPrograms\ChromeShaderToyPrograms\bin\Debug\ChromeShaderToyPrograms.exe' could not be found   WebGLIFrameBuffer Z:\jsc.svn\examples\javascript\WebGL\WebGLIFrameBuffer\CSC Build



            var gl = new WebGLRenderingContext(alpha: true);

            if (gl == null)
            {

                new IHTMLPre {
                    // https://code.google.com/p/chromium/issues/detail?id=294207
                    "Rats! WebGL hit a snag.",

                    //new IHTMLAnchor { href = "about:gpu", innerText = "about:gpu" }
                }.AttachToDocument();
                return;
            }


            Native.body.style.backgroundColor = "blue";

            gl.oncontextlost += delegate
            {
                Native.body.style.backgroundColor = "red";

                // reload?

            };

            //gl.canvas.async.oncont

            var combo = new IHTMLSelect().AttachToDocument();

            combo.style.position = IStyle.PositionEnum.absolute;
            combo.style.left = "0px";
            combo.style.top = "0px";
            //combo.style.right = "0px";
            combo.style.width = "100%";

            combo.style.backgroundColor = "rgba(255,255,255,0.5)";
            //combo.style.backgroundColor = "rgba(255,255,0,0.5)";
            //combo.style.background = "linear-gradient(to bottom, rgba(255,255,255,0.5 0%,rgba(255,255,255,0.0 100%))";
            combo.style.border = "0px solid transparent";
            combo.style.fontSize = "large";
            combo.style.paddingLeft = "1em";
            combo.style.fontFamily = IStyle.FontFamilyEnum.Verdana;
            combo.style.cursor = IStyle.CursorEnum.pointer;



            //var mAudioContext = new AudioContext();


            var c = gl.canvas.AttachToDocument();

            #region onresize
            new { }.With(
                async delegate
                {
                    do
                    {
                        c.width = Native.window.Width;
                        c.height = Native.window.Height;
                        c.style.SetSize(c.width, c.height);
                    }
                    while (await Native.window.async.onresize);
                }
            );
            #endregion



            #region CaptureMouse
            var mMouseOriX = 0;
            var mMouseOriY = 0;
            var mMousePosX = 0;
            var mMousePosY = 0;

            c.onmousedown += async ev =>
            {
                mMouseOriX = ev.CursorX;
                //mMouseOriY = ev.CursorY;
                mMouseOriY = c.height - ev.CursorY;

                mMousePosX = mMouseOriX;
                mMousePosY = mMouseOriY;

                // why aint it canvas?
                //ev.Element
                //ev.CaptureMouse();

                // using ?
                ev.Element.requestPointerLock();
                await ev.Element.async.onmouseup;
                Native.document.exitPointerLock();

                mMouseOriX = -Math.Abs(mMouseOriX);
                mMouseOriY = -Math.Abs(mMouseOriY);
            };

            //c.ontouchmove += 

            c.onmousemove += ev =>
            {
                if (ev.MouseButton == IEvent.MouseButtonEnum.Left)
                {
                    mMousePosX += ev.movementX;
                    mMousePosY += ev.movementY;
                }
            };

            c.onmousewheel += ev =>
            {
                ev.preventDefault();
                ev.stopPropagation();

                mMousePosY += 3 * ev.WheelDirection;
            };

            #endregion



            // http://www.wufoo.com/html5/attributes/05-list.html
            // http://www.w3schools.com/tags/att_input_list.asp
            //uiauto.datalist1.EnsureID();
            //uiauto.search.list = uiauto.datalist1.id;
            //uiauto.datalist1.id = "datalist1";
            //uiauto.search.list = "datalist1";
            //new IHTMLPre { new { uiauto.search.list, uiauto.datalist1.id } }.AttachToDocument();

            var sw = Stopwatch.StartNew();


            new IHTMLOption { value = "", innerText = $"{ChromeShaderToyPrograms.References.programs.Count} shaders available" }.AttachTo(combo);


            // should bind the selection to uri and reload if gpu crashes.

            #region can we have a next button?
            // https://sites.google.com/a/jsc-solutions.net/work/knowledge-base/15-dualvr/20150807/shadertoy
            new IHTMLButton { "next" }.AttachToDocument().With(
                next =>
                {
                    new IStyle(next)
                    {
                        position = IStyle.PositionEnum.absolute,
                        right = "1em",
                        top = "2em",
                        bottom = "1em",
                        padding = "4em"
                    };

                    next.onclick += delegate
                    {
                        var n = combo.selectedIndex + 1;
                        Console.WriteLine(new { n });
                        combo.selectedIndex = n;
                    };
                }
            );
            #endregion



            ChromeShaderToyColumns.Library.ShaderToy.EffectPass pip = null;

            // http://stackoverflow.com/questions/25289390/html-how-to-make-input-type-list-only-accept-a-list-choice
            ChromeShaderToyPrograms.References.programs.Keys.WithEachIndex(
                async (key, index) =>
                {
                    var text = (1 + index) + " of " + ChromeShaderToyPrograms.References.programs.Count + " " + key.SkipUntilIfAny("ChromeShaderToy").Replace("By", " by ");

                    var option = new IHTMLOption { value = key, innerText = text }.AttachTo(combo);

                    await Native.window.async.onframe;

                    // we are about to create 100 objects. does it have any impact to UI?
                    var frag = ChromeShaderToyPrograms.References.programs[key]();
                    var len = frag.ToString().Length;

                    option.innerText = text + " " + new
                    {
                        //frame,
                        //load = load.ElapsedMilliseconds + "ms ",

                        frag = len + "bytes ",
                        // a telemetry to track while running on actual hardware
                        //fragGPU = pass0.xCreateShader.fsTranslatedShaderSource.Length + " bytes"
                    };

                    // cant we get it if we manually set it?
                    await option.async.onselect;
                    await Native.window.async.onframe;

                    var load = Stopwatch.StartNew();

                    var pass0 = new ChromeShaderToyColumns.Library.ShaderToy.EffectPass(
                        gl: gl,
                        precission: ChromeShaderToyColumns.Library.ShaderToy.DetermineShaderPrecission(gl),
                        supportDerivatives: gl.getExtension("OES_standard_derivatives") != null
                    );
                    pass0.MakeHeader_Image();
                    pass0.NewShader_Image(frag);

                    load.Stop();

                    new { }.With(
                        async delegate
                        {
                            while (await option.async.ondeselect)
                            {
                                pip = pass0;

                                await option.async.onselect;
                            }
                        }
                    );

                    var framesInSecond = 0;
                    var theSecond = Stopwatch.StartNew();

                    var frame = 0;
                    do
                    {
                        frame++;
                        framesInSecond++;

                        if (theSecond.ElapsedMilliseconds >= 1000)
                        {
                            //option.innerText = key + new { frame };
                            option.innerText = text + " " + new
                            {
                                //frame,
                                framesInSecond,
                                load = load.ElapsedMilliseconds + "ms ",

                                frag = len + "bytes ",
                                // a telemetry to track while running on actual hardware
                                fragGPU = pass0.xCreateShader.fsTranslatedShaderSource.Length + " bytes"
                            };

                            framesInSecond = 0;
                            //theSecond.Restart();
                            theSecond = Stopwatch.StartNew();
                        }


                        // can we scale?
                        pass0.Paint_Image(
                            sw.ElapsedMilliseconds / 1000.0f,

                            mMouseOriX,
                            mMouseOriY,
                            mMousePosX,
                            mMousePosY,

                            zoom: 1.0f
                        );

                        if (pip != null)
                        {
                            // can we scale?
                            pip.Paint_Image(
                                sw.ElapsedMilliseconds / 1000.0f,

                                mMouseOriX,
                                mMouseOriY,
                                mMousePosX,
                                mMousePosY,

                                zoom: 0.10f
                            );

                        }

                        // what does it do?
                        gl.flush();

                        // wither we are selected or we are pip?
                        await option.async.selected;
                    }
                    while (await Native.window.async.onframe);

                }
            );


        }
예제 #7
0
        public static void InitializeContent()
        {
            #region tutorial step 2
            #region arena
            var map = new Point(2000, 2000);

            var arena = new ArenaControl();

            arena.Layers.Canvas.style.backgroundColor =
                Color.FromGray(0xc0);
            arena.SetLocation(
                Rectangle.Of(0, 0, Native.window.Width, Native.window.Height));

            arena.SetCanvasSize(map);

            arena.Control.AttachToDocument();


            arena.DrawTextToInfo(Title, new Point(8, 8), Color.Blue);

            Native.window.onresize +=
                delegate
            {
                arena.SetLocation(
                    Rectangle.Of(0, 0, Native.window.Width, Native.window.Height));

                arena.SetCanvasPosition(
                    arena.CurrentCanvasPosition
                    );
            };
            #endregion
            #endregion


            var pending = default(Dude2);

            #region arsenal
            var arsenal = new Dictionary <string, DudeAnimationInfo>
            {
                { "Soldier",
                  new DudeAnimationInfo
                  {
                      Frames_Stand = Frames.WolfSoldier,
                      Frames_Walk  = Frames.WolfSoldier_Walk
                  } },
                { "Imp",
                  new DudeAnimationInfo
                  {
                      Frames_Stand = Frames.DoomImp,
                      Frames_Walk  = Frames.DoomImp_Walk
                  } }
            };
            #endregion


            #region tutorial step 3

            Func <DudeAnimationInfo, Point, Dude2> CreateActor =
                (_frames, _coords) =>
            {
                var actor = new Dude2();

                actor.Frames = _frames.Frames_Stand;
                actor.AnimationInfo.Frames_Stand = _frames.Frames_Stand;
                actor.AnimationInfo.Frames_Walk  = _frames.Frames_Walk;
                actor.Zoom.DynamicZoomFunc       = a => 1;
                actor.SetSize(48, 72);
                actor.TeleportTo(_coords.X, _coords.Y);
                actor.Zoom.StaticZoom = DefaultActiorZoom;
                actor.Direction       = Math.PI * 0.5;
                actor.Control.AttachTo(arena.Layers.Canvas);
                //actor.HasShadow = _frames.Frames_Stand.Length > 1;
                if (_frames.Frames_Stand.Length == 1)
                {
                    actor.Shadow.style.Opacity = 0.4;
                }
                actor.AnimationInfo.WalkAnimationInterval = 1000 / 30;
                return(actor);
            };

            var actors = new List <Dude2>
            {
            };

            var selection = from i in actors
                            where i.IsSelected
                            select i;

            arena.ApplySelection +=
                (rect, ev) =>
            {
                if (pending != null)
                {
                    return;
                }

                foreach (var v in actors)
                {
                    v.IsSelected = rect.Contains(v.CurrentLocation.ToInt32());
                }
            };

            var Argh        = new Argh();
            var Affirmative = new Affirmative();
            var ghoullaugh  = new ghoullaugh();
            var sheep       = new sheep();
            var pig         = new pig();
            var click       = new click().AttachToDocument();

            arena.SelectionClick +=
                (p, ev) =>
            {
                if (pending != null)
                {
                    return;
                }

                foreach (var v in selection)
                {
                    if (v.AnimationInfo.Frames_Stand[0].Source == MyFrames.ManWithHorns.Frames_Stand[0].Source)
                    {
                        ghoullaugh.play();
                        ghoullaugh = new ghoullaugh();
                    }
                    else if (v.AnimationInfo.Frames_Stand[0].Source == MyFrames.ThePig.Frames_Stand[0].Source)
                    {
                        pig.play();
                        pig = new pig();
                    }
                    else if (v.AnimationInfo.Frames_Stand[0].Source == MyFrames.TheSheep.Frames_Stand[0].Source)
                    {
                        sheep.play();
                        sheep = new sheep();
                    }
                    else if (v.AnimationInfo.Frames_Stand[0].Source == Frames.WolfSoldier[0].Source)
                    {
                        Affirmative.play();
                        Affirmative = new Affirmative();
                    }
                    else
                    {
                        Argh.play();
                        Argh = new Argh();
                    }



                    v.WalkTo(p.ToDouble());

                    // move in group formation
                    p.X += 16;
                    p.Y += 16;
                }
            };


            #endregion

            #region tutorial step 4



            #region CreateDialogAt
            var CreateDialogAt =
                new
            {
                //Dialog = default(IHTMLDiv),
                Content = default(IHTMLDiv),
                Width   = default(string)
            }
            .ToFunc(
                (Point pos, string width) =>
            {
                var f = new Form();

                f.Show();

                f.SizeTo(200, 200);


                // https://sites.google.com/a/jsc-solutions.net/work/knowledge-base/15-dualvr/20151115/audio
                //f.PopupInsteadOfClosing();

                f.MoveTo(pos.X, pos.Y);
                //f.SizeTo(


                //var dialog = new IHTMLDiv();

                //dialog.style.SetLocation(pos.X, pos.Y);

                //dialog.style.backgroundColor = Color.Gray;
                //dialog.style.padding = "1px";

                //var caption = new IHTMLDiv().AttachTo(dialog);

                //caption.style.backgroundColor = Color.Blue;
                //caption.style.width = width;
                //caption.style.height = "0.5em";
                //caption.style.cursor = IStyle.CursorEnum.move;

                //var drag = new DragHelper(caption);

                //drag.Position = pos;
                //drag.Enabled = true;
                //drag.DragMove +=
                //    delegate
                //    {
                //        dialog.style.SetLocation(drag.Position.X, drag.Position.Y);
                //    };

                var _content = new IHTMLDiv().AttachTo(f.GetHTMLTargetContainer());

                _content.style.textAlign       = IStyle.TextAlignEnum.center;
                _content.style.backgroundColor = Color.White;
                _content.style.padding         = "1px";

                //dialog.AttachToDocument();

                return(new
                {     //Dialog = dialog,
                    Content = _content,
                    Width = width
                });
            }
                );
            #endregion

            #region dialog
            var toolbar = CreateDialogAt(new Point(2, 2), "8em");

            var combo = new IHTMLSelect();
            var build = new IHTMLButton();

            build.style.SetSize(72, 72);
            build.style.padding = "0px";

            var avatar = new IHTMLImage().AttachTo(build);
            var remove = new IHTMLButton("Remove");


            combo.AttachTo(toolbar.Content);
            new IHTMLBreak().AttachTo(toolbar.Content);
            build.AttachTo(toolbar.Content);
            new IHTMLBreak().AttachTo(toolbar.Content);
            remove.AttachTo(toolbar.Content);
            new IHTMLBreak().AttachTo(toolbar.Content);
            #endregion


            #region GetSelectedArsenal
            Func <DudeAnimationInfo> GetSelectedArsenal =
                () =>
            {
                if (arsenal.ContainsKey(combo[combo.selectedIndex].value))
                {
                    return(arsenal[combo[combo.selectedIndex].value]);
                }

                return(null);
            };
            #endregion

            Action Refresh =
                delegate
            {
                var i = GetSelectedArsenal();

                if (i != null)
                {
                    avatar.src = i.Images.Random().src;
                }
            };

            combo.Add(arsenal.Keys.ToArray());
            Refresh();

            combo.onchange +=
                delegate
            {
                Refresh();



                click.play();
                click = new click().AttachToDocument();
            };

            #region pending actor

            arena.MouseMove +=
                p =>
            {
                if (pending == null)
                {
                    return;
                }

                pending.TeleportTo(p.X, p.Y);
            };

            arena.Layers.User.oncontextmenu +=
                e =>
            {
                e.preventDefault();

                if (pending != null)
                {
                    pending.Control.Orphanize();
                    pending = null;
                    arena.ShowSelectionRectangle = true;

                    return;
                }

                actors.ForEach(
                    k => k.IsSelected = false
                    );
            };

            arena.SelectionClick +=
                (p, ev) =>
            {
                if (pending == null)
                {
                    return;
                }

                pending.TeleportTo(p.X, p.Y);

                actors.Add(pending);

                pending.IsHot = false;


                var x = GetSelectedArsenal();
                pending = CreateActor(x,
                                      new Point(
                                          Native.window.Width / 2,
                                          Native.window.Height / 2
                                          )
                                      );

                pending.IsHot = true;


                click.play();
                click = new click().AttachToDocument();
            };

            build.onclick +=
                delegate
            {
                if (pending != null)
                {
                    pending.Control.Orphanize();
                    pending = null;

                    return;
                }

                var x = GetSelectedArsenal();

                pending = CreateActor(x,
                                      new Point(
                                          Native.window.Width / 2,
                                          Native.window.Height / 2
                                          )
                                      );

                pending.IsHot = true;
                arena.ShowSelectionRectangle = false;

                click.play();
                click = new click().AttachToDocument();
            };
            #endregion

            remove.onclick +=
                delegate
            {
                foreach (var v in selection.ToArray())
                {
                    v.Control.Orphanize();
                    actors.Remove(v);
                }


                click.play();
                click = new click().AttachToDocument();
            };

            #endregion

            if (FilterToImpAndSoldier)
            {
            }
            else
            {
                #region step 6

                {
                    var n = "NPC";

                    arsenal.Add(n, MyFrames.NPC3);
                    combo.Add(n);
                }

                #endregion


                {
                    var n = "ManWithHorns";

                    arsenal.Add(n, MyFrames.ManWithHorns);
                    combo.Add(n);
                }
                {
                    var n = "TheSheep";

                    arsenal.Add(n, MyFrames.TheSheep);
                    combo.Add(n);
                }
                {
                    var n = "ThePig";

                    arsenal.Add(n, MyFrames.ThePig);
                    combo.Add(n);
                }

                {
                    var n = "TheCactus";

                    arsenal.Add(n, MyFrames.TheCactus);
                    combo.Add(n);
                }
            }


            if (BeforeAddingDebris != null)
            {
                BeforeAddingDebris(arena.Layers.Canvas);
            }

            3.Times(
                delegate()
            {
                new DebrisImages().Images.ForEach(
                    img => img.AttachTo(arena.Layers.Canvas).style.SetLocation(map.X.Random(), map.Y.Random())
                    );
            }
                );

            16.Times(
                delegate()
            {
                actors.Add(
                    CreateActor(arsenal.Random().Value, new Point(map.X.Random(), map.Y.Random()))
                    );
            }
                );
        }
예제 #8
0
        // seems like switching to iframe,
        // does not keep parent responsive.

        // framerate is also shared between iframe and parent.

        // and reload may cause continuty issues
        // gpu reload seems to be tab based..
        // even having multiple tabs, will kill webgl on both when crashed
        // having two ips wont help either.
        // so the true multishader

        // https://www.khronos.org/webgl/public-mailing-list/archives/1104/msg00041.php

        // http://www.anandtech.com/show/9124/amd-dives-deep-on-asynchronous-shading
        // https://code.google.com/p/chromium/issues/detail?id=249391
        // http://toji.github.io/shader-perf/
        // https://plus.google.com/+BrandonJonesToji/posts/4ERHkicC5Ny

        // or can we atleast move the program link time?

        // the only performance gain we could get is to batch link all shaders, keep responsive ui and then wait for it to complete.
        // await delayed shaders?
        // so it is rather useless until iframe has its own gpu blocking chain...
        // is there a way to ask if the deffered link or comple is ready?

        static void doprograms()
        {
            Native.body.style.overflow = IStyle.OverflowEnum.hidden;
            Native.body.style.margin   = "0px";

            Native.body.Clear();



            // Severity	Code	Description	Project	File	Line	Source
            //Error Metadata file 'Z:\jsc.svn\examples\javascript\chrome\apps\WebGL\ChromeShaderToyPrograms\ChromeShaderToyPrograms\bin\Debug\ChromeShaderToyPrograms.exe' could not be found   WebGLIFrameBuffer Z:\jsc.svn\examples\javascript\WebGL\WebGLIFrameBuffer\CSC Build



            var gl = new WebGLRenderingContext(alpha: true);

            if (gl == null)
            {
                new IHTMLPre {
                    // https://code.google.com/p/chromium/issues/detail?id=294207
                    "Rats! WebGL hit a snag.",

                    //new IHTMLAnchor { href = "about:gpu", innerText = "about:gpu" }
                }.AttachToDocument();
                return;
            }


            Native.body.style.backgroundColor = "blue";

            gl.oncontextlost += delegate
            {
                Native.body.style.backgroundColor = "red";

                // reload?
            };

            //gl.canvas.async.oncont

            var combo = new IHTMLSelect().AttachToDocument();

            combo.style.position = IStyle.PositionEnum.absolute;
            combo.style.left     = "0px";
            combo.style.top      = "0px";
            //combo.style.right = "0px";
            combo.style.width = "100%";

            combo.style.backgroundColor = "rgba(255,255,255,0.5)";
            //combo.style.backgroundColor = "rgba(255,255,0,0.5)";
            //combo.style.background = "linear-gradient(to bottom, rgba(255,255,255,0.5 0%,rgba(255,255,255,0.0 100%))";
            combo.style.border      = "0px solid transparent";
            combo.style.fontSize    = "large";
            combo.style.paddingLeft = "1em";
            combo.style.fontFamily  = IStyle.FontFamilyEnum.Verdana;
            combo.style.cursor      = IStyle.CursorEnum.pointer;



            //var mAudioContext = new AudioContext();


            var c = gl.canvas.AttachToDocument();

            #region onresize
            new { }.With(
                async delegate
            {
                do
                {
                    c.width  = Native.window.Width;
                    c.height = Native.window.Height;
                    c.style.SetSize(c.width, c.height);
                }while (await Native.window.async.onresize);
            }
                );
            #endregion



            #region CaptureMouse
            var mMouseOriX = 0;
            var mMouseOriY = 0;
            var mMousePosX = 0;
            var mMousePosY = 0;

            c.onmousedown += async ev =>
            {
                mMouseOriX = ev.CursorX;
                //mMouseOriY = ev.CursorY;
                mMouseOriY = c.height - ev.CursorY;

                mMousePosX = mMouseOriX;
                mMousePosY = mMouseOriY;

                // why aint it canvas?
                //ev.Element
                //ev.CaptureMouse();

                // using ?
                ev.Element.requestPointerLock();
                await ev.Element.async.onmouseup;
                Native.document.exitPointerLock();

                mMouseOriX = -Math.Abs(mMouseOriX);
                mMouseOriY = -Math.Abs(mMouseOriY);
            };

            //c.ontouchmove +=

            c.onmousemove += ev =>
            {
                if (ev.MouseButton == IEvent.MouseButtonEnum.Left)
                {
                    mMousePosX += ev.movementX;
                    mMousePosY += ev.movementY;
                }
            };

            c.onmousewheel += ev =>
            {
                ev.preventDefault();
                ev.stopPropagation();

                mMousePosY += 3 * ev.WheelDirection;
            };

            #endregion



            // http://www.wufoo.com/html5/attributes/05-list.html
            // http://www.w3schools.com/tags/att_input_list.asp
            //uiauto.datalist1.EnsureID();
            //uiauto.search.list = uiauto.datalist1.id;
            //uiauto.datalist1.id = "datalist1";
            //uiauto.search.list = "datalist1";
            //new IHTMLPre { new { uiauto.search.list, uiauto.datalist1.id } }.AttachToDocument();

            var sw = Stopwatch.StartNew();


            new IHTMLOption {
                value = "", innerText = $"{ChromeShaderToyPrograms.References.programs.Count} shaders available"
            }.AttachTo(combo);


            // should bind the selection to uri and reload if gpu crashes.

            #region can we have a next button?
            // https://sites.google.com/a/jsc-solutions.net/work/knowledge-base/15-dualvr/20150807/shadertoy
            new IHTMLButton {
                "next"
            }.AttachToDocument().With(
                next =>
            {
                new IStyle(next)
                {
                    position = IStyle.PositionEnum.absolute,
                    right    = "1em",
                    top      = "2em",
                    bottom   = "1em",
                    padding  = "4em"
                };

                next.onclick += delegate
                {
                    var n = combo.selectedIndex + 1;
                    Console.WriteLine(new { n });
                    combo.selectedIndex = n;
                };
            }
                );
            #endregion



            ChromeShaderToyColumns.Library.ShaderToy.EffectPass pip = null;

            // http://stackoverflow.com/questions/25289390/html-how-to-make-input-type-list-only-accept-a-list-choice
            ChromeShaderToyPrograms.References.programs.Keys.WithEachIndex(
                async(key, index) =>
            {
                var text = (1 + index) + " of " + ChromeShaderToyPrograms.References.programs.Count + " " + key.SkipUntilIfAny("ChromeShaderToy").Replace("By", " by ");

                var option = new IHTMLOption {
                    value = key, innerText = text
                }.AttachTo(combo);

                await Native.window.async.onframe;

                // we are about to create 100 objects. does it have any impact to UI?
                var frag = ChromeShaderToyPrograms.References.programs[key]();
                var len  = frag.ToString().Length;

                option.innerText = text + " " + new
                {
                    //frame,
                    //load = load.ElapsedMilliseconds + "ms ",

                    frag = len + "bytes ",
                    // a telemetry to track while running on actual hardware
                    //fragGPU = pass0.xCreateShader.fsTranslatedShaderSource.Length + " bytes"
                };

                // cant we get it if we manually set it?
                await option.async.onselect;
                await Native.window.async.onframe;

                var load = Stopwatch.StartNew();

                var pass0 = new ChromeShaderToyColumns.Library.ShaderToy.EffectPass(
                    gl: gl,
                    precission: ChromeShaderToyColumns.Library.ShaderToy.DetermineShaderPrecission(gl),
                    supportDerivatives: gl.getExtension("OES_standard_derivatives") != null
                    );
                pass0.MakeHeader_Image();
                pass0.NewShader_Image(frag);

                load.Stop();

                new { }.With(
                    async delegate
                {
                    while (await option.async.ondeselect)
                    {
                        pip = pass0;

                        await option.async.onselect;
                    }
                }
                    );

                var framesInSecond = 0;
                var theSecond      = Stopwatch.StartNew();

                var frame = 0;
                do
                {
                    frame++;
                    framesInSecond++;

                    if (theSecond.ElapsedMilliseconds >= 1000)
                    {
                        //option.innerText = key + new { frame };
                        option.innerText = text + " " + new
                        {
                            //frame,
                            framesInSecond,
                            load = load.ElapsedMilliseconds + "ms ",

                            frag = len + "bytes ",
                            // a telemetry to track while running on actual hardware
                            fragGPU = pass0.xCreateShader.fsTranslatedShaderSource.Length + " bytes"
                        };

                        framesInSecond = 0;
                        //theSecond.Restart();
                        theSecond = Stopwatch.StartNew();
                    }


                    // can we scale?
                    pass0.Paint_Image(
                        sw.ElapsedMilliseconds / 1000.0f,

                        mMouseOriX,
                        mMouseOriY,
                        mMousePosX,
                        mMousePosY,

                        zoom: 1.0f
                        );

                    if (pip != null)
                    {
                        // can we scale?
                        pip.Paint_Image(
                            sw.ElapsedMilliseconds / 1000.0f,

                            mMouseOriX,
                            mMouseOriY,
                            mMousePosX,
                            mMousePosY,

                            zoom: 0.10f
                            );
                    }

                    // what does it do?
                    gl.flush();

                    // wither we are selected or we are pip?
                    await option.async.selected;
                }while (await Native.window.async.onframe);
            }
                );
        }
        public static void InitializeContent()
        {
            #region tutorial step 2
            #region arena
            var map = new Point(2000, 2000);

            var arena = new ArenaControl();

            arena.Layers.Canvas.style.backgroundColor =
                Color.FromGray(0xc0);
            arena.SetLocation(
                Rectangle.Of(0, 0, Native.window.Width, Native.window.Height));

            arena.SetCanvasSize(map);

            arena.Control.AttachToDocument();


            arena.DrawTextToInfo(Title, new Point(8, 8), Color.Blue);

            Native.window.onresize +=
                delegate
                {
                    arena.SetLocation(
                        Rectangle.Of(0, 0, Native.window.Width, Native.window.Height));

                    arena.SetCanvasPosition(
                        arena.CurrentCanvasPosition
                        );
                };
            #endregion
            #endregion


            var pending = default(Dude2);

            #region arsenal
            var arsenal = new Dictionary<string, DudeAnimationInfo>
            {
                {"Soldier", 
                    new DudeAnimationInfo 
                    { 
                        Frames_Stand = Frames.WolfSoldier,
                        Frames_Walk = Frames.WolfSoldier_Walk
                    }
                },
                {"Imp", 
                    new DudeAnimationInfo 
                    { 
                        Frames_Stand = Frames.DoomImp,
                        Frames_Walk = Frames.DoomImp_Walk
                    }
                }
            };
            #endregion


            #region tutorial step 3

            Func<DudeAnimationInfo, Point, Dude2> CreateActor =
                (_frames, _coords) =>
                {
                    var actor = new Dude2();

                    actor.Frames = _frames.Frames_Stand;
                    actor.AnimationInfo.Frames_Stand = _frames.Frames_Stand;
                    actor.AnimationInfo.Frames_Walk = _frames.Frames_Walk;
                    actor.Zoom.DynamicZoomFunc = a => 1;
                    actor.SetSize(48, 72);
                    actor.TeleportTo(_coords.X, _coords.Y);
                    actor.Zoom.StaticZoom = DefaultActiorZoom;
                    actor.Direction = Math.PI * 0.5;
                    actor.Control.AttachTo(arena.Layers.Canvas);
                    //actor.HasShadow = _frames.Frames_Stand.Length > 1;
                    if (_frames.Frames_Stand.Length == 1)
                        actor.Shadow.style.Opacity = 0.4;
                    actor.AnimationInfo.WalkAnimationInterval = 1000 / 30;
                    return actor;
                };

            var actors = new List<Dude2>
            {

            };

            var selection = from i in actors
                            where i.IsSelected
                            select i;

            arena.ApplySelection +=
                (rect, ev) =>
                {
                    if (pending != null)
                        return;

                    foreach (var v in actors)
                        v.IsSelected = rect.Contains(v.CurrentLocation.ToInt32());
                };

            var Argh = new Argh();
            var Affirmative = new Affirmative();
            var ghoullaugh = new ghoullaugh();
            var sheep = new sheep();
            var pig = new pig();
            var click = new click().AttachToDocument();

            arena.SelectionClick +=
                (p, ev) =>
                {
                    if (pending != null)
                        return;

                    foreach (var v in selection)
                    {
                        if (v.AnimationInfo.Frames_Stand[0].Source == MyFrames.ManWithHorns.Frames_Stand[0].Source)
                        {
                            ghoullaugh.play();
                            ghoullaugh = new ghoullaugh();
                        }
                        else if (v.AnimationInfo.Frames_Stand[0].Source == MyFrames.ThePig.Frames_Stand[0].Source)
                        {
                            pig.play();
                            pig = new pig();
                        }
                        else if (v.AnimationInfo.Frames_Stand[0].Source == MyFrames.TheSheep.Frames_Stand[0].Source)
                        {
                            sheep.play();
                            sheep = new sheep();
                        }
                        else if (v.AnimationInfo.Frames_Stand[0].Source == Frames.WolfSoldier[0].Source)
                        {
                            Affirmative.play();
                            Affirmative = new Affirmative();
                        }
                        else
                        {
                            Argh.play();
                            Argh = new Argh();
                        }



                        v.WalkTo(p.ToDouble());

                        // move in group formation
                        p.X += 16;
                        p.Y += 16;
                    }
                };


            #endregion

            #region tutorial step 4



            #region CreateDialogAt
            var CreateDialogAt =
                new
                {
                    //Dialog = default(IHTMLDiv),
                    Content = default(IHTMLDiv),
                    Width = default(string)
                }
                .ToFunc(
                (Point pos, string width) =>
                {
                    var f = new Form();

                    f.Show();

                    f.SizeTo(200, 200);


                    // https://sites.google.com/a/jsc-solutions.net/work/knowledge-base/15-dualvr/20151115/audio
                    //f.PopupInsteadOfClosing();

                    f.MoveTo(pos.X, pos.Y);
                    //f.SizeTo(


                    //var dialog = new IHTMLDiv();

                    //dialog.style.SetLocation(pos.X, pos.Y);

                    //dialog.style.backgroundColor = Color.Gray;
                    //dialog.style.padding = "1px";

                    //var caption = new IHTMLDiv().AttachTo(dialog);

                    //caption.style.backgroundColor = Color.Blue;
                    //caption.style.width = width;
                    //caption.style.height = "0.5em";
                    //caption.style.cursor = IStyle.CursorEnum.move;

                    //var drag = new DragHelper(caption);

                    //drag.Position = pos;
                    //drag.Enabled = true;
                    //drag.DragMove +=
                    //    delegate
                    //    {
                    //        dialog.style.SetLocation(drag.Position.X, drag.Position.Y);
                    //    };

                    var _content = new IHTMLDiv().AttachTo(f.GetHTMLTargetContainer());

                    _content.style.textAlign = IStyle.TextAlignEnum.center;
                    _content.style.backgroundColor = Color.White;
                    _content.style.padding = "1px";

                    //dialog.AttachToDocument();

                    return new
                    { //Dialog = dialog,
                        Content = _content,
                        Width = width
                    };
                }
            );
            #endregion

            #region dialog
            var toolbar = CreateDialogAt(new Point(2, 2), "8em");

            var combo = new IHTMLSelect();
            var build = new IHTMLButton();

            build.style.SetSize(72, 72);
            build.style.padding = "0px";

            var avatar = new IHTMLImage().AttachTo(build);
            var remove = new IHTMLButton("Remove");


            combo.AttachTo(toolbar.Content);
            new IHTMLBreak().AttachTo(toolbar.Content);
            build.AttachTo(toolbar.Content);
            new IHTMLBreak().AttachTo(toolbar.Content);
            remove.AttachTo(toolbar.Content);
            new IHTMLBreak().AttachTo(toolbar.Content);
            #endregion


            #region GetSelectedArsenal
            Func<DudeAnimationInfo> GetSelectedArsenal =
                () =>
                {
                    if (arsenal.ContainsKey(combo[combo.selectedIndex].value))
                        return arsenal[combo[combo.selectedIndex].value];

                    return null;
                };
            #endregion

            Action Refresh =
                delegate
                {
                    var i = GetSelectedArsenal();

                    if (i != null)
                        avatar.src = i.Images.Random().src;
                };

            combo.Add(arsenal.Keys.ToArray());
            Refresh();

            combo.onchange +=
                delegate
                {
                    Refresh();



                    click.play();
                    click = new click().AttachToDocument();
                };

            #region pending actor

            arena.MouseMove +=
                p =>
                {
                    if (pending == null)
                        return;

                    pending.TeleportTo(p.X, p.Y);
                };

            arena.Layers.User.oncontextmenu +=
                e =>
                {
                    e.preventDefault();

                    if (pending != null)
                    {
                        pending.Control.Orphanize();
                        pending = null;
                        arena.ShowSelectionRectangle = true;

                        return;
                    }

                    actors.ForEach(
                        k => k.IsSelected = false
                            );
                };

            arena.SelectionClick +=
                (p, ev) =>
                {
                    if (pending == null)
                    {

                        return;
                    }

                    pending.TeleportTo(p.X, p.Y);

                    actors.Add(pending);

                    pending.IsHot = false;


                    var x = GetSelectedArsenal();
                    pending = CreateActor(x,
                       new Point(
                           Native.window.Width / 2,
                           Native.window.Height / 2
                           )
                   );

                    pending.IsHot = true;


                    click.play();
                    click = new click().AttachToDocument();
                };

            build.onclick +=
                delegate
                {
                    if (pending != null)
                    {
                        pending.Control.Orphanize();
                        pending = null;

                        return;
                    }

                    var x = GetSelectedArsenal();

                    pending = CreateActor(x,
                        new Point(
                            Native.window.Width / 2,
                            Native.window.Height / 2
                            )
                    );

                    pending.IsHot = true;
                    arena.ShowSelectionRectangle = false;

                    click.play();
                    click = new click().AttachToDocument();
                };
            #endregion

            remove.onclick +=
                delegate
                {
                    foreach (var v in selection.ToArray())
                    {
                        v.Control.Orphanize();
                        actors.Remove(v);
                    }


                    click.play();
                    click = new click().AttachToDocument();
                };

            #endregion

            if (FilterToImpAndSoldier)
            { }
            else
            {
                #region step 6

                {
                    var n = "NPC";

                    arsenal.Add(n, MyFrames.NPC3);
                    combo.Add(n);
                }

                #endregion


                {
                    var n = "ManWithHorns";

                    arsenal.Add(n, MyFrames.ManWithHorns);
                    combo.Add(n);
                }
                {
                    var n = "TheSheep";

                    arsenal.Add(n, MyFrames.TheSheep);
                    combo.Add(n);
                }
                {
                    var n = "ThePig";

                    arsenal.Add(n, MyFrames.ThePig);
                    combo.Add(n);
                }

                {
                    var n = "TheCactus";

                    arsenal.Add(n, MyFrames.TheCactus);
                    combo.Add(n);
                }
            }


            if (BeforeAddingDebris != null)
                BeforeAddingDebris(arena.Layers.Canvas);

            3.Times(
              delegate()
              {
                  new DebrisImages().Images.ForEach(
                      img => img.AttachTo(arena.Layers.Canvas).style.SetLocation(map.X.Random(), map.Y.Random())
                  );
              }
      );

            16.Times(
                delegate()
                {
                    actors.Add(
                        CreateActor(arsenal.Random().Value, new Point(map.X.Random(), map.Y.Random()))
                        );
                }
            );
        }
 public static string GetSelectionText(this IHTMLSelect c)
 {
     return(c.GetSelection().value);
 }
        //public static T SizeTo<T>(this T e, int w, int h) where T : IHTMLElement
        //{
        //    e.style.width = w + "px";
        //    e.style.height = w + "px";
        //    return e;
        //}

        public static IHTMLOption GetSelection(this IHTMLSelect c)
        {
            return(c[c.selectedIndex]);
        }
예제 #12
0
        /// <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());

                    }



                }


            );
        }
예제 #13
0
        // https://sites.google.com/a/jsc-solutions.net/work/knowledge-base/15-dualvr/20150807/shadertoy

        /// <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(HTML.Pages.IApp page)
        {
            // show shader based on tab selection?



            //Native.document.documentElement.style.overflow = IStyle.OverflowEnum.auto;


            // chrome by default has no scrollbar, bowser does

            // "C:\util\jsc\bin\ScriptCoreLib.dll"
            Native.document.documentElement.style.overflow = IStyle.OverflowEnum.hidden;
            Native.body.style.margin = "0px";
            Native.body.Clear();

            // ipad?
            Native.window.onerror +=
                e =>
                {
                    new IHTMLPre {
                        "error " + new { e.error }
                    }.AttachToDocument();
                };

            // https://www.youtube.com/watch?v=tnS8K0yhmZU
            // http://www.reddit.com/r/oculus/comments/2sv5lk/new_release_of_shadertoy_vr/
            // https://www.shadertoy.com/view/lsSGRz

            // https://sites.google.com/a/jsc-solutions.net/backlog/knowledge-base/2015/201503/20150309
            // https://zproxy.wordpress.com/2015/03/09/project-windstorm/
            // https://github.com/jimbo00000/RiftRay


            //1>Z:\jsc.svn\examples\javascript\chrome\apps\WebGL\ChromeShaderToyPrograms\ChromeShaderToyPrograms\Application.cs(81,35,81,39): 
            // error CS0656: Missing compiler required member 'Microsoft.CSharp.RuntimeBinder.CSharpArgumentInfo.Create'
            // 

            #region += Launched chrome.app.window
            dynamic self = Native.self;
            dynamic self_chrome = self.chrome;
            object self_chrome_socket = self_chrome.socket;

            if (self_chrome_socket != null)
            {
                if (!(Native.window.opener == null && Native.window.parent == Native.window.self))
                {
                    Console.WriteLine("chrome.app.window.create, is that you?");

                    // pass thru
                }
                else
                {
                    // should jsc send a copresence udp message?
                    chrome.runtime.UpdateAvailable += delegate
                    {
                        new chrome.Notification(title: "UpdateAvailable");

                    };

                    chrome.app.runtime.Launched += async delegate
                    {
                        // 0:12094ms chrome.app.window.create {{ href = chrome-extension://aemlnmcokphbneegoefdckonejmknohh/_generated_background_page.html }}
                        Console.WriteLine("chrome.app.window.create " + new { Native.document.location.href });

                        new chrome.Notification(title: "ChromeUDPSendAsync");

                        var xappwindow = await chrome.app.window.create(
                               Native.document.location.pathname, options: null
                        );

                        //xappwindow.setAlwaysOnTop

                        xappwindow.show();

                        await xappwindow.contentWindow.async.onload;

                        Console.WriteLine("chrome.app.window loaded!");
                    };


                    return;
                }
            }
            #endregion




            var gl = new WebGLRenderingContext(alpha: true);

            if (gl == null)
            {

                new IHTMLPre {
                    // https://code.google.com/p/chromium/issues/detail?id=294207
                    "Rats! WebGL hit a snag.",

                    //new IHTMLAnchor { href = "about:gpu", innerText = "about:gpu" }
                }.AttachToDocument();
                return;
            }


            Native.body.style.backgroundColor = "blue";

            gl.oncontextlost += delegate
            {
                Native.body.style.backgroundColor = "red";

                // reload?
                
            };

            //gl.canvas.async.oncont

            var combo = new IHTMLSelect().AttachToDocument();

            combo.style.position = IStyle.PositionEnum.absolute;
            combo.style.left = "0px";
            combo.style.top = "0px";
            //combo.style.right = "0px";
            combo.style.width = "100%";

            combo.style.backgroundColor = "rgba(255,255,255,0.5)";
            //combo.style.backgroundColor = "rgba(255,255,0,0.5)";
            //combo.style.background = "linear-gradient(to bottom, rgba(255,255,255,0.5 0%,rgba(255,255,255,0.0 100%))";
            combo.style.border = "0px solid transparent";
            combo.style.fontSize = "large";
            combo.style.paddingLeft = "1em";
            combo.style.fontFamily = IStyle.FontFamilyEnum.Verdana;
            combo.style.cursor = IStyle.CursorEnum.pointer;



            //var mAudioContext = new AudioContext();


            var c = gl.canvas.AttachToDocument();

            #region onresize
            new { }.With(
                async delegate
                {
                    do
                    {
                        c.width = Native.window.Width;
                        c.height = Native.window.Height;
                        c.style.SetSize(c.width, c.height);
                    }
                    while (await Native.window.async.onresize);
                }
            );
            #endregion



            #region CaptureMouse
            var mMouseOriX = 0;
            var mMouseOriY = 0;
            var mMousePosX = 0;
            var mMousePosY = 0;

            c.onmousedown += async ev =>
            {
                mMouseOriX = ev.CursorX;
                //mMouseOriY = ev.CursorY;
                mMouseOriY = c.height - ev.CursorY;

                mMousePosX = mMouseOriX;
                mMousePosY = mMouseOriY;

                // why aint it canvas?
                //ev.Element
                //ev.CaptureMouse();

                // using ?
                ev.Element.requestPointerLock();
                await ev.Element.async.onmouseup;
                Native.document.exitPointerLock();

                mMouseOriX = -Math.Abs(mMouseOriX);
                mMouseOriY = -Math.Abs(mMouseOriY);
            };

           //c.ontouchmove += 

            c.onmousemove += ev =>
            {
                if (ev.MouseButton == IEvent.MouseButtonEnum.Left)
                {
                    mMousePosX += ev.movementX;
                    mMousePosY += ev.movementY;
                }
            };

            c.onmousewheel += ev =>
            {
                ev.preventDefault();
                ev.stopPropagation();

                mMousePosY += 3 * ev.WheelDirection;
            };

            #endregion



            // http://www.wufoo.com/html5/attributes/05-list.html
            // http://www.w3schools.com/tags/att_input_list.asp
            //uiauto.datalist1.EnsureID();
            //uiauto.search.list = uiauto.datalist1.id;
            //uiauto.datalist1.id = "datalist1";
            //uiauto.search.list = "datalist1";
            //new IHTMLPre { new { uiauto.search.list, uiauto.datalist1.id } }.AttachToDocument();

            var sw = Stopwatch.StartNew();


            new IHTMLOption { value = "", innerText = $"{References.programs.Count} shaders available" }.AttachTo(combo);


            // should bind the selection to uri and reload if gpu crashes.

            #region can we have a next button?
            // https://sites.google.com/a/jsc-solutions.net/work/knowledge-base/15-dualvr/20150807/shadertoy
            new IHTMLButton { "next" }.AttachToDocument().With(
                next =>
                {
                    new IStyle(next)
                    {
                        position = IStyle.PositionEnum.absolute,
                        right = "1em",
                        top = "2em",
                        bottom = "1em",
                        padding = "4em"
                    };

                    next.onclick += delegate
                    {
                        var n = combo.selectedIndex + 1;
                        Console.WriteLine(new { n });
                        combo.selectedIndex = n;
                    };
                }
            );
            #endregion



            ShaderToy.EffectPass pip = null;

            // http://stackoverflow.com/questions/25289390/html-how-to-make-input-type-list-only-accept-a-list-choice
            References.programs.Keys.WithEachIndex(
                async (key, index) =>
                {
                    var text = (1 + index) + " of " + References.programs.Count + " " + key.SkipUntilIfAny("ChromeShaderToy").Replace("By", " by ");

                    var option = new IHTMLOption { value = key, innerText = text }.AttachTo(combo);

                    await Native.window.async.onframe;

                    // we are about to create 100 objects. does it have any impact to UI?
                    var frag = References.programs[key]();
                    var len = frag.ToString().Length;

                    option.innerText = text + " " + new
                    {
                        //frame,
                        //load = load.ElapsedMilliseconds + "ms ",

                        frag = len + "bytes ",
                        // a telemetry to track while running on actual hardware
                        //fragGPU = pass0.xCreateShader.fsTranslatedShaderSource.Length + " bytes"
                    };

                    // cant we get it if we manually set it?
                    await option.async.onselect;
                    await Native.window.async.onframe;

                    var load = Stopwatch.StartNew();

                    var pass0 = new ShaderToy.EffectPass(
                        gl: gl,
                        precission: ShaderToy.DetermineShaderPrecission(gl),
                        supportDerivatives: gl.getExtension("OES_standard_derivatives") != null
                    );
                    pass0.MakeHeader_Image();
                    pass0.NewShader_Image(frag);

                    load.Stop();

                    new { }.With(
                        async delegate
                        {
                            while (await option.async.ondeselect)
                            {
                                pip = pass0;

                                await option.async.onselect;
                            }
                        }
                    );

                    var framesInSecond = 0;
                    var theSecond = Stopwatch.StartNew();

                    var frame = 0;
                    do
                    {
                        frame++;
                        framesInSecond++;

                        if (theSecond.ElapsedMilliseconds >= 1000)
                        {
                            //option.innerText = key + new { frame };
                            option.innerText = text + " " + new
                            {
                                //frame,
                                framesInSecond,
                                load = load.ElapsedMilliseconds + "ms ",

                                frag = len + "bytes ",
                                // a telemetry to track while running on actual hardware
                                fragGPU = pass0.xCreateShader.fsTranslatedShaderSource.Length + " bytes"
                            };

                            framesInSecond = 0;
                            //theSecond.Restart();
                            theSecond = Stopwatch.StartNew();
                        }


                        // can we scale?
                        pass0.Paint_Image(
                            sw.ElapsedMilliseconds / 1000.0f,

                            mMouseOriX,
                            mMouseOriY,
                            mMousePosX,
                            mMousePosY,

                            zoom: 1.0f
                        );

                        if (pip != null)
                        {
                            // can we scale?
                            pip.Paint_Image(
                                sw.ElapsedMilliseconds / 1000.0f,

                                mMouseOriX,
                                mMouseOriY,
                                mMousePosX,
                                mMousePosY,

                                zoom: 0.10f
                            );

                        }

                        // what does it do?
                        gl.flush();

                        // wither we are selected or we are pip?
                        await option.async.selected;
                    }
                    while (await Native.window.async.onframe);

                }
            );





        }