//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();
}
//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();
}
/// <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);
}
);
}
/// <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);
}
);
}
// 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);
}
);
}
// 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()))
);
}
);
}
// 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]);
}
/// <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());
}
}
);
}
// 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);
}
);
}
