public static ScriptCoreLib.JavaScript.Runtime.Cookie BindTo(this ScriptCoreLib.JavaScript.Runtime.Cookie c, IHTMLInput a)
{
a.onchange += delegate { c.Value = a.value; };
a.value = c.Value;
return c;
}
public UltraApplication(IHTMLElement e)
{
new IHTMLDiv { innerHTML = "Hello world" }.AttachToDocument();
var GetTime = new IHTMLButton { innerText = "GetTime" }.AttachToDocument();
GetTime.onclick +=
delegate
{
new AlphaWebService().GetTime("[client time]: " + DateTime.Now + " [server time]",
x =>
{
new IHTMLDiv { innerText = x }.AttachToDocument();
}
);
};
var url = new IHTMLInput(ScriptCoreLib.Shared.HTMLInputTypeEnum.text, "http://example.com");
url.AttachToDocument();
var DownloadData = new IHTMLButton { innerText = "DownloadData" }.AttachToDocument();
DownloadData.onclick +=
delegate
{
new AlphaWebService().DownloadData(url.value,
x =>
{
new IHTMLPre { innerText = url.value + Environment.NewLine + Environment.NewLine + x }.AttachToDocument();
}
);
};
}
public __RadioButton()
{
// http://msdn2.microsoft.com/en-us/library/system.windows.forms.radiobutton.aspx
/* Use the Checked property to get or set the state of a RadioButton.
* The option button's appearance can be altered to appear as a toggle-style
* button or as a standard option button by setting the Appearance property.
*/
// http://javascript.about.com/library/blradio2.htm
/* The solution here is to give all of the radio buttons within the group
* the same name but different values. Here is the code used to code just
* radio button themselves on the previous page that shows you how this is done.
*/
// http://www.thescripts.com/forum/thread468483.html
// IE support
// http://www.gtalbot.org/DHTMLSection/DynamicallyCreateRadioButtons.html
HTMLTarget = new IHTMLDiv();
HTMLTarget.style.whiteSpace = ScriptCoreLib.JavaScript.DOM.IStyle.WhiteSpaceEnum.nowrap;
button = new IHTMLInput(ScriptCoreLib.Shared.HTMLInputTypeEnum.radio);
label = new IHTMLLabel("", button);
HTMLTarget.appendChild(button, label);
}
public __RadioButton()
{
// http://msdn2.microsoft.com/en-us/library/system.windows.forms.radiobutton.aspx
/* Use the Checked property to get or set the state of a RadioButton.
* The option button's appearance can be altered to appear as a toggle-style
* button or as a standard option button by setting the Appearance property.
*/
// http://javascript.about.com/library/blradio2.htm
/* The solution here is to give all of the radio buttons within the group
* the same name but different values. Here is the code used to code just
* radio button themselves on the previous page that shows you how this is done.
*/
// http://www.thescripts.com/forum/thread468483.html
// IE support
// http://www.gtalbot.org/DHTMLSection/DynamicallyCreateRadioButtons.html
HTMLTarget = new IHTMLDiv();
HTMLTarget.style.whiteSpace = ScriptCoreLib.JavaScript.DOM.IStyle.WhiteSpaceEnum.nowrap;
button = new IHTMLInput(ScriptCoreLib.Shared.HTMLInputTypeEnum.radio);
label = new IHTMLLabel("", button);
HTMLTarget.appendChild(button, label);
}
/// <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 e = new IHTMLInput();
(e as dynamic).type = "range";
e.AttachTo(page.output);
}
private static void ButtonsForWebService()
{
AddButtonForGetTime();
var url = new IHTMLInput(ScriptCoreLib.Shared.HTMLInputTypeEnum.text, "http://example.com");
url.AttachToDocument();
var DownloadData = new IHTMLButton {
innerText = "DownloadData"
}.AttachToDocument();
DownloadData.onclick +=
delegate
{
new AlphaWebService().DownloadData(url.value,
x =>
{
new IHTMLPre {
innerText = url.value + Environment.NewLine + Environment.NewLine + x
}.AttachToDocument();
}
);
};
}
/// <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 e = new IHTMLInput();
(e as dynamic).type = "range";
e.AttachTo(page.output);
}
/// <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)
{
// we have title
// we have content
// lets have padding done dynamically.
// head, title {
// display: block;
//}
var range = new IHTMLInput { type = ScriptCoreLib.Shared.HTMLInputTypeEnum.range, min = 0, max = 1000 }.AttachToDocument();
new IStyle(range)
{
left = "1em",
bottom = "1em",
position = IStyle.PositionEnum.@fixed
};
range.AttachTo(Native.document.documentElement);
var title = new IStyle(IHTMLElement.HTMLElementEnum.title)
{
paddingLeft = "0px",
//boxShadow = "17px -5px 88px 29px rgba(0,0,0,0.69)"
};
var p = new IStyle(IHTMLElement.HTMLElementEnum.p)
{
paddingLeft = "0px",
//boxShadow = "17px -5px 88px 29px rgba(0,0,0,0.69)"
};
Native.window.onframe += delegate
{
title.paddingLeft = range.valueAsNumber + "px";
p.paddingLeft = range.valueAsNumber + "px";
};
Native.window.onresize += delegate
{
range.valueAsNumber = Native.window.Width / 4;
};
}
public __CheckBox()
{
//InternalSprite.style.width = "600px";
//InternalSprite.style.height = "400px";
InternalSprite.style.position = ScriptCoreLib.JavaScript.DOM.IStyle.PositionEnum.absolute;
InternalSprite.style.left = "0px";
InternalSprite.style.top = "0px";
this.InternalCheckBox = new IHTMLInput(Shared.HTMLInputTypeEnum.checkbox);
InternalSprite.appendChild(this.InternalCheckBox);
}
public __CheckBox()
{
//InternalSprite.style.width = "600px";
//InternalSprite.style.height = "400px";
InternalSprite.style.position = ScriptCoreLib.JavaScript.DOM.IStyle.PositionEnum.absolute;
InternalSprite.style.left = "0px";
InternalSprite.style.top = "0px";
this.InternalCheckBox = new IHTMLInput(Shared.HTMLInputTypeEnum.checkbox);
InternalSprite.appendChild(this.InternalCheckBox);
}
public UltraApplication(IHTMLElement e)
{
new IHTMLDiv {
innerHTML = "Hello world"
}.AttachToDocument();
var GetTime = new IHTMLButton {
innerText = "GetTime"
}.AttachToDocument();
GetTime.onclick +=
delegate
{
new AlphaWebService().GetTime("[client time]: " + DateTime.Now + " [server time]",
x =>
{
new IHTMLDiv {
innerText = x
}.AttachToDocument();
}
);
};
var url = new IHTMLInput(ScriptCoreLib.Shared.HTMLInputTypeEnum.text, "http://example.com");
url.AttachToDocument();
var DownloadData = new IHTMLButton {
innerText = "DownloadData"
}.AttachToDocument();
DownloadData.onclick +=
delegate
{
new AlphaWebService().DownloadData(url.value,
x =>
{
new IHTMLPre {
innerText = url.value + Environment.NewLine + Environment.NewLine + x
}.AttachToDocument();
}
);
};
}
/// <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(IDefault page)
{
IHTMLDiv Control = new IHTMLDiv();
Control.AttachToDocument();
Control.appendChild(new IHTMLElement(IHTMLElement.HTMLElementEnum.h1, "This page will ask you to confirm in order to unload the page"));
var check = new IHTMLInput(HTMLInputTypeEnum.checkbox).AttachToDocument();
var label = new IHTMLLabel("Bypass check", check).AttachToDocument();
Native.window.onbeforeunload +=
delegate (IWindow.Confirmation ev)
{
Timer.DoAsync(
delegate
{
Native.document.body.style.backgroundColor = JSColor.Red;
new Timer((t) => Native.document.body.style.backgroundColor = JSColor.White, 500, 0);
}
);
if (check.@checked)
return;
ev.Text = "This is a secure website, do you want to leave?";
};
var anchor = new IHTMLAnchor("http://example.com", "example.com");
anchor.target = "_self";
Control.appendChild(anchor);
}
/// <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(IDefault page)
{
IHTMLDiv Control = new IHTMLDiv();
Control.AttachToDocument();
Control.appendChild(new IHTMLElement(IHTMLElement.HTMLElementEnum.h1, "This page will ask you to confirm in order to unload the page"));
var check = new IHTMLInput(HTMLInputTypeEnum.checkbox).AttachToDocument();
var label = new IHTMLLabel("Bypass check", check).AttachToDocument();
Native.window.onbeforeunload +=
delegate(IWindow.Confirmation ev)
{
Timer.DoAsync(
delegate
{
Native.document.body.style.backgroundColor = JSColor.Red;
new Timer((t) => Native.document.body.style.backgroundColor = JSColor.White, 500, 0);
}
);
if (check.@checked)
{
return;
}
ev.Text = "This is a secure website, do you want to leave?";
};
var anchor = new IHTMLAnchor("http://example.com", "example.com");
anchor.target = "_self";
Control.appendChild(anchor);
}
public __TrackBar()
{
// http://stackoverflow.com/questions/18389224/how-to-style-html5-range-input-to-have-different-color-before-and-after-slider
this.InternalContentElement = new IHTMLInput
{
type = Shared.HTMLInputTypeEnum.range,
}.AttachTo(this.InternalElement);
this.InternalContentElement.style.setProperty("-webkit-appearance", "none", "");
this.InternalContentElement.style.setProperty("-moz-apperance", "none", "");
this.Minimum = 0;
this.Maximum = 10;
this.InternalContentElement.onmousemove +=
e =>
{
if (e.MouseButton == DOM.IEvent.MouseButtonEnum.Left)
{
InternalRaiseValueChanged();
}
};
this.InternalContentElement.onchange +=
delegate
{
InternalRaiseValueChanged();
};
this.Size = new global::System.Drawing.Size(80, 20);
}
private static void ButtonsForWebService()
{
AddButtonForGetTime();
var url = new IHTMLInput(ScriptCoreLib.Shared.HTMLInputTypeEnum.text, "http://example.com");
url.AttachToDocument();
var DownloadData = new IHTMLButton { innerText = "DownloadData" }.AttachToDocument();
DownloadData.onclick +=
delegate
{
new AlphaWebService().DownloadData(url.value,
x =>
{
new IHTMLPre { innerText = url.value + Environment.NewLine + Environment.NewLine + x }.AttachToDocument();
}
);
};
}
public __TrackBar()
{
// http://stackoverflow.com/questions/18389224/how-to-style-html5-range-input-to-have-different-color-before-and-after-slider
this.InternalContentElement = new IHTMLInput
{
type = Shared.HTMLInputTypeEnum.range,
}.AttachTo(this.InternalElement);
this.InternalContentElement.style.setProperty("-webkit-appearance", "none", "");
this.InternalContentElement.style.setProperty("-moz-apperance", "none", "");
this.Minimum = 0;
this.Maximum = 10;
this.InternalContentElement.onmousemove +=
e =>
{
if (e.MouseButton == DOM.IEvent.MouseButtonEnum.Left)
{
InternalRaiseValueChanged();
}
};
this.InternalContentElement.onchange +=
delegate
{
InternalRaiseValueChanged();
};
this.Size = new global::System.Drawing.Size(80, 20);
}
private void InternalCreateRadio()
{
__Control c = this.Parent;
if (c == null)
{
return;
}
var old = button;
var old_checked = old.@checked;
// remove events from the old element
if (_CheckedChanged.EventInternal != null)
{
this.button.onchange -= _CheckedChanged.EventInternal;
}
button.Orphanize();
this.button = IHTMLInput.CreateRadio(c.ControlGroupName, old.value, old_checked);
// we need to rewire
this.button.id = this.label.htmlFor;
InternalUpdate();
// add events to the new element
if (_CheckedChanged.EventInternal != null)
{
this.button.onchange += _CheckedChanged.EventInternal;
}
//Console.WriteLine("checked: " + old_checked);
}
public __DataGridView()
{
//Console.WriteLine("enter DataGridView .ctor");
Console.WriteLine("event: enter new DataGridView()");
this.AutoGenerateColumns = true;
// https://sites.google.com/a/jsc-solutions.net/backlog/knowledge-base/2014/201404/20140412
// tested by?
// X:\jsc.svn\examples\javascript\forms\test\TestWebBrowserOneWayDataBinding\TestWebBrowserOneWayDataBinding\ApplicationControl.Designer.cs
// this.dataGridView1.RowTemplate.Height = 24;
this.RowTemplate = new DataGridViewRow();
this.InternalElement = new IHTMLDiv
{
// do this ahead of time
// when can we have a special type for a classname string?
className = typeof(DataGridView).Name
};
// can jsc help us here and via [HTMLAttribute] redirect the data to html attribute?
this.AllowUserToResizeColumnsAttribute = new XAttribute("AllowUserToResizeColumns", "").AttachTo(this.InternalElement);
this.RowHeadersVisibleAttribute = new XAttribute("RowHeadersVisible", "true").AttachTo(this.InternalElement);
// add the rule to current document.
// what happens if we do popup?
// wha about scoped style?
this.css = this.InternalElement.css;
// do we need this?
this.InternalElement.style.overflow = DOM.IStyle.OverflowEnum.hidden;
this.InternalColumns = new __DataGridViewColumnCollection();
this.Columns = (DataGridViewColumnCollection)(object)this.InternalColumns;
#region InternalRows
this.InternalRows = new __DataGridViewRowCollection
{
InternalContext = this
};
this.Rows = (DataGridViewRowCollection)(object)this.InternalRows;
this.InternalRows.InternalItems.Added +=
(s, i) =>
{
s.InternalContext = this;
};
#endregion
#region SelectedCells
this.InternalSelectedCells = new __DataGridViewSelectedCellCollection();
this.SelectedCells = (DataGridViewSelectedCellCollection)(object)this.InternalSelectedCells;
this.InternalSelectedCells.InternalItems.ListChanged +=
(_s, _e) =>
{
if (_e.ListChangedType == ListChangedType.ItemAdded)
{
var item = this.InternalSelectedCells.InternalItems[_e.NewIndex];
// when is this null?
//if (this.DefaultCellStyle == null)
//{
// item.InternalContentContainer.style.backgroundColor = JSColor.System.Highlight;
//}
//else
//{
var SelectionBackColor = this.DefaultCellStyle.SelectionBackColor;
var SelectionForeColor = this.DefaultCellStyle.SelectionForeColor;
item.InternalTableColumn_div.style.backgroundColor = SelectionBackColor.ToString();
//}
//item.InternalContentContainer.style.color = JSColor.System.HighlightText;
// tested by
// X:\jsc.svn\core\ScriptCoreLib.Windows.Forms\ScriptCoreLib.Windows.Forms\JavaScript\BCLImplementation\System\Windows\Forms\DataGridView.cs
item.InternalTableColumn_div.style.color = SelectionForeColor.ToString();
}
if (SelectionChanged != null)
SelectionChanged(this, new EventArgs());
};
#endregion
this.MultiSelect = true;
this.InternalSetDefaultFont();
this.InternalScrollContainerElement = new IHTMLDiv
{
// pstyle
className = "InternalScrollContainerElement"
}.AttachTo(this.InternalElement);
//this.InternalScrollContainerElement.style.backgroundColor = JSColor.Gray;
this.BackgroundColor = global::System.Drawing.SystemColors.AppWorkspace;
this.InternalScrollContainerElement.style.overflow = DOM.IStyle.OverflowEnum.auto;
// tested by
// X:\jsc.svn\examples\javascript\css\CSSPrintMediaExperiment\CSSPrintMediaExperiment\Application.cs
// for printer we do not want to see the scollbar
// if we change the document we will loose the style?
// this wont work
//IStyleSheet.Default
// [CSSMediaTypes.print]
// [this.InternalScrollContainerElement].style.overflow =
// IStyle.OverflowEnum.hidden;
new IStyle(this.InternalScrollContainerElement)
{
position = DOM.IStyle.PositionEnum.absolute,
left = "0px",
top = "0px",
right = "0px",
bottom = "0px"
};
var __ContentTableContainer = new IHTMLDiv { className = "__ContentTableContainer" }.AttachTo(InternalScrollContainerElement);
// 116ms css.style { selectorText = table.__ContentTable[style-id="2"] > tbody > tr > td }
this.__ContentTable = new IHTMLTable
{
className = __ContentTable_className,
cellPadding = 0,
cellSpacing = 0
}.AttachTo(__ContentTableContainer);
// X:\jsc.svn\examples\javascript\css\CSSOdd\CSSOdd\Application.cs
//this.__ContentTable_css = css.descendants[className];
this.__ContentTable_css = css[this.__ContentTable];
//css.adjacentSibling[]
//css.siblings
//92ms css.style { selectorText = div.DataGridView[style-id="2"] table.__DataGridViewContentTable > tbody > tr > td } view-source:34816
// view-source:34816
//92ms css.style { selectorText = table.__DataGridViewColumnsTable[style-id="3"] > tbody > tr > td }
// the hacky way:
//this.__ContentTable_css = css[" table." + this.__ContentTable.className];
this.__ContentTable_css_td = this.__ContentTable_css
+ IHTMLElement.HTMLElementEnum.tbody
+ IHTMLElement.HTMLElementEnum.tr
+ IHTMLElement.HTMLElementEnum.td;
this.__ContentTable_css_alt_td = this.__ContentTable_css
[IHTMLElement.HTMLElementEnum.tbody][IHTMLElement.HTMLElementEnum.tr].even[IHTMLElement.HTMLElementEnum.td];
this.__ContentTable_css_odd_td = this.__ContentTable_css
[IHTMLElement.HTMLElementEnum.tbody][IHTMLElement.HTMLElementEnum.tr].odd[IHTMLElement.HTMLElementEnum.td];
__ContentTable.style.paddingTop = "22px";
var __ColumnsTableContainer = new IHTMLDiv
{
className = "__ColumnsTableContainer"
}.AttachTo(InternalScrollContainerElement);
// https://sites.google.com/a/jsc-solutions.net/backlog/knowledge-base/2013/201312/20131213-forms-css
this.__ColumnsTable = new IHTMLTable
{
className = __ColumnsTable_className,
cellPadding = 0,
cellSpacing = 0
}.AttachTo(
__ColumnsTableContainer);
this.__ColumnsTable_css = css[this.__ColumnsTable];
this.__ColumnsTable_css_td =
this.__ColumnsTable_css
+ IHTMLElement.HTMLElementEnum.tbody
+ IHTMLElement.HTMLElementEnum.tr
+ IHTMLElement.HTMLElementEnum.td;
IHTMLTableRow __ColumnsTableRow = null;
//__ColumnsTableContainer.style.SetLocation(0, 0);
__ColumnsTableContainer.style.position = IStyle.PositionEnum.absolute;
__ColumnsTableContainer.style.left = "0px";
__ColumnsTableRow = __ColumnsTable.AddBody().AddRow();
__ColumnsTableRow.style.height = "22px";
var __RowsTableContainer = new IHTMLDiv
{
className = "__RowsTableContainer"
}.AttachTo(InternalScrollContainerElement);
//__RowsTableContainer.style.SetLocation(0, 0);
__RowsTableContainer.style.position = IStyle.PositionEnum.absolute;
__RowsTableContainer.style.top = "0px";
this.__RowsTable = new IHTMLTable
{
className = __RowsTable_className,
cellPadding = 0,
cellSpacing = 0
}.AttachTo(__RowsTableContainer);
// should we make the monkier a bit lazier?
this.__RowsTable_css = css[this.__RowsTable];
// 139ms { __RowsTable_css = { selectorText = div.DataGridView[style-id="2"] > div:nth-of-type(1) > div:nth-of-type(3) > table:nth-of-type(1), selectorElement = } }
//Console.WriteLine(new { this.__RowsTable_css });
this.__RowsTable_css_td = this.__RowsTable_css
+ IHTMLElement.HTMLElementEnum.tbody
+ IHTMLElement.HTMLElementEnum.tr
+ IHTMLElement.HTMLElementEnum.td;
this.__RowsTable_css_td.style.backgroundColor = "cyan";
__RowsTable.style.paddingTop = "22px";
this.__RowsTableBody = __RowsTable.AddBody();
Console.WriteLine("new DataGridView() before Corner");
#region Corner
this.__Corner = new IHTMLDiv().AttachTo(InternalScrollContainerElement);
__Corner.style.position = IStyle.PositionEnum.absolute;
//__Corner.style.SetLocation(0, 0);
__Corner.style.height = "22px";
#endregion
// too slow for onscroll
//var css_fixed_left =
// __RowsTableContainer.css
// | __Corner.css;
//var css_fixed_top =
// __ColumnsTableContainer.css
// | __Corner.css;
#region onscroll
Action onscroll = delegate
{
// perhaps we should only use .css for static styles?
// how much faster are we if we skip .css ?
__Corner.style.top = this.InternalScrollContainerElement.scrollTop + "px";
__ColumnsTableContainer.style.top = this.InternalScrollContainerElement.scrollTop + "px";
__Corner.style.left = this.InternalScrollContainerElement.scrollLeft + "px";
__RowsTableContainer.style.left = this.InternalScrollContainerElement.scrollLeft + "px";
//css_fixed_left.style.left = this.InternalScrollContainerElement.scrollLeft + "px";
//css_fixed_top.style.top = this.InternalScrollContainerElement.scrollTop + "px";
};
#endregion
this.__ContentTableBody = __ContentTable.AddBody();
this.InternalNewRow = new __DataGridViewRow();
this.InternalNewRow.InternalTableRow = __ContentTableBody.AddRow();
this.InternalNewRow.InternalTableRow.style.height = "22px";
this.InternalRows.InternalItems.Source.Add(InternalNewRow);
// http://www.w3schools.com/cssref/sel_last-of-type.asp
// dont we have lastOfType available yet?
var InternalNewRow_content_css =
// can we have LINQ style? .Last()
(__ContentTable_css + IHTMLElement.HTMLElementEnum.tbody).last[IHTMLElement.HTMLElementEnum.tr];
var InternalNewRow_header_css = __RowsTable_css
[IHTMLElement.HTMLElementEnum.tbody].last[IHTMLElement.HTMLElementEnum.tr];
var InternalNewRow_css = InternalNewRow_content_css | InternalNewRow_header_css;
// move to conditional css!
this.AllowUserToAddRowsChanged +=
delegate
{
if (this.AllowUserToAddRows)
InternalNewRow_css.style.display = IStyle.DisplayEnum.empty;
else
InternalNewRow_css.style.display = IStyle.DisplayEnum.none;
};
this.DefaultCellStyle = new DataGridViewCellStyle
{
BackColor = global::System.Drawing.SystemColors.Window
};
this.ColumnHeadersDefaultCellStyle = new DataGridViewCellStyle
{
BackColor = global::System.Drawing.SystemColors.ButtonFace
};
this.RowHeadersDefaultCellStyle = new DataGridViewCellStyle
{
BackColor = global::System.Drawing.SystemColors.ButtonFace
};
Console.WriteLine("new DataGridView() before CreateVerticalResizer");
#region CreateVerticalResizer --
Func<IHTMLDiv> CreateVerticalResizer =
() =>
{
var r = new IHTMLDiv { className = "VerticalResizer" };
r.style.position = DOM.IStyle.PositionEnum.absolute;
r.style.height = "9px";
r.style.left = "0px";
r.style.width = "200px";
//HorizontalResizer.style.backgroundColor = JSColor.Red;
//r.style.cursor = DOM.IStyle.CursorEnum.move;
var l = new IHTMLDiv().AttachTo(r);
l.style.position = DOM.IStyle.PositionEnum.absolute;
l.style.top = "4px";
l.style.height = "1px";
l.style.left = "0px";
l.style.right = "0px";
//l.style.backgroundColor = this.InternalBackgroundColor.ToString();
////l.style.backgroundColor = "yellow";
//InternalBackgroundColorChanged +=
// delegate
// {
// l.style.backgroundColor = this.InternalBackgroundColor.ToString();
// };
l.setAttribute("data-resizer", "resizer");
//this.InternalGridColorTargets.Add(
// l.css
// );
this.ClientSizeChanged +=
delegate
{
r.style.width = "200x";
//r.Hide();
Native.window.requestAnimationFrame +=
//new ScriptCoreLib.JavaScript.Runtime.Timer(
delegate
{
r.style.width = this.InternalScrollContainerElement.clientWidth + "px";
//l.style.backgroundColor = "red";
//r.Show();
}
;
//).StartTimeout(200);
};
return r;
};
#endregion
//css[(dynamic x) => x.AllowUserToResizeColumns == false][" .HorizontalResizer"].style.display = IStyle.DisplayEnum.none;
//css[x => x.getAttribute("AllowUserToResizeColumns") == false][" .HorizontalResizer"].style.display = IStyle.DisplayEnum.none;
var xAllowUserToResizeColumns_false = new XAttribute("AllowUserToResizeColumns", "false");
css[xAllowUserToResizeColumns_false][" .HorizontalResizer"].style.display = IStyle.DisplayEnum.none;
// should jsc go and detect where the attribute is attached to?
//css[" .HorizontalResizer"][xAllowUserToResizeColumns_false].style.display = IStyle.DisplayEnum.none;
// before CreateHorizontalResizer
var css_HorizontalResizer = css[" .HorizontalResizer"];
new IStyle(css_HorizontalResizer)
{
position = DOM.IStyle.PositionEnum.absolute,
width = "9px",
height = "22px"
};
css_HorizontalResizer.hover.style.height = "100%";
css_HorizontalResizer.active.style.height = "100%";
css_HorizontalResizer.style.cursor = DOM.IStyle.CursorEnum.move;
//var css_HorizontalResizerLine = css_HorizontalResizer[IHTMLElement.HTMLElementEnum.div];
new IStyle(css_HorizontalResizer.after)
{
// just to show up, we need to set this?
content = "''",
position = DOM.IStyle.PositionEnum.absolute,
left = "4px",
width = "1px",
top = "0px",
bottom = "0px"
};
//_HorizontalResizer.css.active.first.style.color = "blue";
//_HorizontalResizer.css.style.backgroundColor = "yellow";
//_HorizontalResizer.css.active.style.backgroundColor = "cyan";
// debug
//_HorizontalResizer.css.first.style.backgroundColor = "cyan";
// ?css.after.parent.hover...
css_HorizontalResizer.hover.after.style.backgroundColor = "black";
css_HorizontalResizer.active.after.style.backgroundColor = "blue";
// save it so we can change the color
this.InternalGridColor_css = css_HorizontalResizer.after;
//var css =
//var ZeroVerticalResizer = CreateVerticalResizer().AttachTo(InternalElement);
//ZeroVerticalResizer.style.SetLocation(0, 22 - 5);
Console.WriteLine("new DataGridView() before ZeroHorizontalResizer");
#region ZeroHorizontalResizer
//var ZeroHorizontalResizer = CreateHorizontalResizer().AttachTo(InternalElement);
var ZeroHorizontalResizer = new IHTMLDiv { className = "HorizontalResizer" }.AttachTo(InternalScrollContainerElement);
var ZeroHorizontalResizerDrag = new DragHelper(ZeroHorizontalResizer)
{
// why cant I see it?
Position = new Point(32, 0),
Enabled = true
};
//Action UpdateToVerticalResizerScroll = delegate
//{
// //ZeroVerticalResizer.style.SetLocation(
// // this.InternalScrollContainerElement.scrollLeft,
// // this.InternalScrollContainerElement.scrollTop + (22 - 5)
// //);
//};
#region UpdateToHorizontalResizerScroll
Action UpdateToHorizontalResizerScroll = delegate
{
ZeroHorizontalResizer.style.SetLocation(
this.InternalScrollContainerElement.scrollLeft + ZeroHorizontalResizerDrag.Position.X - 1,
this.InternalScrollContainerElement.scrollTop
);
};
#endregion
// what if the the value is changed in the inspector/
// will our control survive the change? as we dont get any events for that.
// almost. the Fill will not be recalculate just yet tho
// tested by
// X:\jsc.svn\examples\javascript\forms\Test\TestFlowDataGridPadding\TestFlowDataGridPadding\Application.cs
css[new XAttribute("RowHeadersVisible", "false")][__ColumnsTable, __ContentTable].style.paddingLeft = "1px";
var css_RowHeadersVisible_true = css[new XAttribute("RowHeadersVisible", "true")][__ColumnsTable, __ContentTable];
#endregion
Console.WriteLine("new DataGridView() before UpdateToHorizontalResizerDrag");
#region UpdateToHorizontalResizerDrag
Action UpdateToHorizontalResizerDrag = delegate
{
//var value = (ZeroHorizontalResizerDrag.Position.X + 4);
var value = (ZeroHorizontalResizerDrag.Position.X + 4);
// no we want it completly gone, not just at 4px
if (this.RowHeadersVisible)
{
__Corner.style.width = (value - 2) + "px";
__RowsTable.style.width = value + "px";
__RowsTable.style.minWidth = value + "px";
// has 2 borders
}
css_RowHeadersVisible_true.style.paddingLeft = value + "px";
};
#endregion
// when this.RowHeadersVisible == false
css[new XAttribute("RowHeadersVisible", "false")]
[ZeroHorizontalResizer,
__Corner,
__RowsTable]
.style.display = IStyle.DisplayEnum.none;
UpdateToHorizontalResizerScroll();
UpdateToHorizontalResizerDrag();
InternalRowHeadersVisibleChanged +=
delegate
{
// tested by
// X:\jsc.svn\examples\javascript\Test\TestNoZeroColumnHeaderNoScrollbarDateDataGrid\TestNoZeroColumnHeaderNoScrollbarDateDataGrid\ApplicationControl.cs
UpdateToHorizontalResizerDrag();
UpdateToHorizontalResizerScroll();
};
#region ZeroHorizontalResizerDrag Drag
ZeroHorizontalResizerDrag.DragStart +=
delegate
{
Native.Document.body.style.cursor = DOM.IStyle.CursorEnum.move;
//((IHTMLElement)ZeroHorizontalResizer.firstChild).style.backgroundColor = JSColor.Blue;
};
ZeroHorizontalResizerDrag.DragStop +=
delegate
{
Native.Document.body.style.cursor = DOM.IStyle.CursorEnum.auto;
//((IHTMLElement)ZeroHorizontalResizer.firstChild).style.backgroundColor = this.InternalBackgroundColor.ToString();
//((IHTMLElement)ZeroHorizontalResizer.firstChild).style.backgroundColor = "";
//((IHTMLElement)ZeroHorizontalResizer.firstChild).style.backgroundColor = "yellow";
UpdateToHorizontalResizerDrag();
InternalAutoSizeWhenFill();
};
ZeroHorizontalResizerDrag.DragMove +=
delegate
{
UpdateToHorizontalResizerScroll();
};
#endregion
Console.WriteLine("new DataGridView() before onscroll");
onscroll();
#region onscroll
this.InternalScrollContainerElement.onscroll +=
e =>
{
// onscroll is high performance.
// using .css will slow us down 10x?
var s = Stopwatch.StartNew();
//UpdateToVerticalResizerScroll();
UpdateToHorizontalResizerScroll();
// 153209ms DataGridView onscroll { ElapsedMilliseconds = 13 }
// should jsc inline for performance?
onscroll();
// 35418ms DataGridView onscroll { ElapsedMilliseconds = 20 }
// 234208ms DataGridView onscroll { ElapsedMilliseconds = 120 }
// 10468ms DataGridView onscroll { ElapsedMilliseconds = 27 }
if (s.ElapsedMilliseconds > 10)
Console.WriteLine("DataGridView onscroll " + new { s.ElapsedMilliseconds });
};
#endregion
Console.WriteLine("new DataGridView() after onscroll");
__DataGridViewCell MouseCaptureCell = null;
InternalScrollContainerElement.onmouseup +=
delegate
{
MouseCaptureCell = null;
};
// show data fast
// API should do the casting here of the proxyies
// this.Height = 22;
//
// set the default for all
// are the borders getting in our way?
//__ContentTable_css_td.style.height = "22px";
__ContentTable_css_td.style.height = "21px";
__ContentTable_css_td.style.lineHeight = "21px";
// this wont work for ff, ie
//__ContentTable_css_td.style.position = IStyle.PositionEnum.relative;
// IE, ff workaround. need a div to play relative
var __ContentTable_css_td_relative = __ContentTable_css_td
+ IHTMLElement.HTMLElementEnum.div;
new IStyle(__ContentTable_css_td_relative)
{
position = IStyle.PositionEnum.relative,
width = "100%",
height = "100%"
};
// ready to be made interactive
//__ContentTable_css_td_relative["[data]"].empty.first.letter.style.color = "red";
__ContentTable_css_td_relative["[data]"].empty.style.color = "red";
// ah a place holder?
// X:\jsc.svn\examples\javascript\forms\Test\TestLargeDataTable\TestLargeDataTable\ApplicationControl.cs
__ContentTable_css_td_relative[":not([data])"].empty.style.backgroundColor = "yellow";
var __ContentTable_css_td_empty_before = __ContentTable_css_td_relative.empty.before;
__ContentTable_css_td_empty_before.contentXAttribute = new XAttribute("data", "");
new IStyle(__ContentTable_css_td_empty_before)
{
paddingLeft = "4px",
paddingRight = "4px",
whiteSpace = IStyle.WhiteSpaceEnum.pre,
overflow = IStyle.OverflowEnum.hidden,
position = IStyle.PositionEnum.absolute,
left = "0",
top = "0",
bottom = "0",
right = "0",
};
// X:\jsc.svn\examples\javascript\CSS\Test\CSSNewIStyle\CSSNewIStyle\Application.cs
// http://stackoverflow.com/questions/6601697/restore-webkits-css-outline-on-input-field
new IStyle(
__ContentTable_css_td + IHTMLElement.HTMLElementEnum.div + IHTMLElement.HTMLElementEnum.div)
{
outline = "none",
whiteSpace = IStyle.WhiteSpaceEnum.pre,
overflow = IStyle.OverflowEnum.hidden,
position = IStyle.PositionEnum.absolute,
left = "0",
top = "0",
bottom = "0",
right = "0"
};
new IStyle(__ContentTable_css_td + IHTMLElement.HTMLElementEnum.div + IHTMLElement.HTMLElementEnum.div + IHTMLElement.HTMLElementEnum.span)
{
marginLeft = "4px",
marginRight = "4px",
lineHeight = "21px",
whiteSpace = IStyle.WhiteSpaceEnum.pre
};
//Console.WriteLine("new DataGridView() before InitializeMissingCell");
#region InitializeCell
Action<__DataGridViewCell, __DataGridViewRow> InitializeMissingCell =
(SourceCell, SourceRow) =>
{
// https://connect.microsoft.com/IE/feedback/details/687834/getcomputedstyle-doesnt-implement-2nd-argument-pseudoelt#details
//Console.WriteLine("InitializeCell " + new { SourceCell.ColumnIndex });
// is cell index equal to column index?
// what happens if we dont have enough columns?
// https://developer.mozilla.org/en/docs/Web/API/window.getComputedStyle
var SourceColumn = this.InternalColumns.InternalItems[SourceCell.ColumnIndex];
#region InternalTableColumn
SourceCell.InternalTableColumn = SourceRow.InternalTableRow.AddColumn();
SourceRow.InternalCells.InternalItemsX.Removed +=
(XRemovedCell, XRemovedCellIndex) =>
{
if (XRemovedCell == SourceCell)
{
SourceCell.InternalTableColumn.Orphanize();
}
};
#endregion
// 951ms event: dataGridView1 set DataSource { ColumnIndex = 6, SourceRowIndex = 98, ElapsedMilliseconds = 667, a = 6.737373737373737 }
// this wont work if we have multiple datagrids
// can we have a test for it?
// this div is needed for UI activities?
// like :before
var InternalTableColumn_relative = new IHTMLDiv
{
}.AttachTo(SourceCell.InternalTableColumn);
SourceCell.InternalTableColumn_div = new IHTMLDiv
{
tabIndex = (((SourceRow.Index + 1) << 16) + (SourceCell.ColumnIndex + 1))
}.AttachTo(InternalTableColumn_relative);
SourceCell.InternalTableColumn_div_span = new IHTMLSpan
{
// unformatted
//innerText = (string)SourceCell.Value
}.AttachTo(SourceCell.InternalTableColumn_div);
var SourceCellType = SourceCell.GetType();
//Console.WriteLine(new { SourceCellType });
// 25:204ms { SourceCellType = <Namespace>.DataGridViewTextBoxCell }
// what about checkbox? tested by.?
#region __DataGridViewButtonCell
if (SourceColumn is __DataGridViewButtonColumn)
{
var InternalButton = new IHTMLButton().AttachTo(SourceCell.InternalTableColumn_div);
InternalButton.style.font = this.Font.ToCssString();
InternalButton.style.position = IStyle.PositionEnum.absolute;
InternalButton.style.left = "0px";
InternalButton.style.top = "0px";
InternalButton.style.width = "100%";
InternalButton.style.height = "100%";
SourceCell.InternalTableColumn_div_span.AttachTo(InternalButton);
InternalButton.onclick +=
delegate
{
if (this.CellContentClick != null)
this.CellContentClick(this,
new DataGridViewCellEventArgs(SourceCell.ColumnIndex, SourceRow.Index)
);
};
return;
}
#endregion
#region __DataGridViewButtonCell
if (SourceColumn is __DataGridViewCheckBoxColumn)
{
// do we already also support DataSource DataTable typeof(bool)
var InternalButton = new IHTMLInput
{
type = Shared.HTMLInputTypeEnum.checkbox
}.AttachTo(SourceCell.InternalTableColumn_div);
SourceCell.InternalTableColumn_div.style.textAlign = IStyle.TextAlignEnum.center;
SourceCell.InternalTableColumn_div.style.padding = "2px";
//SourceCell.InternalTableColumn_div.style.verticalAlign = "middle";
//InternalButton.style.font = this.Font.ToCssString();
//InternalButton.style.position = IStyle.PositionEnum.absolute;
//InternalButton.style.left = "0px";
//InternalButton.style.top = "0px";
//InternalButton.style.width = "100%";
//InternalButton.style.height = "100%";
//InternalButton.style.margin = "auto";
SourceCell.InternalTableColumn_div_span.Orphanize();
InternalButton.onclick +=
delegate
{
if (this.CellContentClick != null)
this.CellContentClick(this,
new DataGridViewCellEventArgs(SourceCell.ColumnIndex, SourceRow.Index)
);
};
return;
}
#endregion
// with 9 , 12, 15, 12, 6
// without 16, 32, 27,25, 30
#if FCELLEVENTS
#region AtInternalValueChanged
Action AtInternalValueChanged = delegate
{
InternalRaiseCellFormatting(SourceCell);
//var innerText = SourceCell.Value.ToString();
var innerText = SourceCell.FormattedValue.ToString();
//Console.WriteLine("AtInternalValueChanged " + new { innerText });
SourceCell.InternalTableColumn_div_span.innerText = innerText;
// ?
InternalRaiseCellValueChanged(SourceCell);
// https://sites.google.com/a/jsc-solutions.net/work/knowledge-base/04-monese/2014/201401/20140104-deploy
SourceCell.InternalTableColumn_div_span.title = SourceCell.InternalToolTipText;
};
AtInternalValueChanged();
SourceCell.InternalValueChanged += AtInternalValueChanged;
SourceCell.InternalToolTipTextChanged += AtInternalValueChanged;
#endregion
#region CellAtOffset
Func<int, int, __DataGridViewCell> CellAtOffset =
(x, y) =>
{
var value = default(__DataGridViewCell);
var Row = this.InternalRows.InternalItems.Source.ElementAtOrDefault(
SourceRow.Index + y
);
if (Row == null)
if (SourceRow.Index + y == this.InternalRows.Count)
Row = InternalNewRow;
if (Row != null)
{
value = Row.InternalCells.InternalItems.ElementAtOrDefault(
SourceCell.ColumnIndex + x
);
}
return value;
};
#endregion
bool ExitEditModeDone = true;
#region EnterEditMode
Action EnterEditMode =
delegate
{
if (this.ReadOnly)
return;
if (SourceCell.ReadOnly)
return;
if (SourceColumn.ReadOnly)
return;
if (!ExitEditModeDone)
return;
SourceCell.IsInEditMode = true;
ExitEditModeDone = false;
SourceCell.InternalTableColumn_div.Orphanize();
var EditElement = new IHTMLInput(Shared.HTMLInputTypeEnum.text);
EditElement.style.backgroundColor = "transparent";
EditElement.style.font = this.Font.ToCssString();
EditElement.style.borderWidth = "0";
EditElement.style.position = IStyle.PositionEnum.relative;
EditElement.style.left = "4px";
EditElement.style.top = "0";
EditElement.style.outline = "0";
EditElement.style.padding = "0";
EditElement.style.width = (SourceColumn.Width - 4) + "px";
EditElement.style.height = (SourceRow.Height - 1) + "px";
//EditElement.AttachTo(SourceCell.InternalTableColumn);
EditElement.AttachTo(InternalTableColumn_relative);
SourceCell.InternalStyle.InternalForeColorChanged +=
delegate
{
EditElement.style.color = SourceCell.InternalStyle.InternalForeColor.ToString();
};
var OriginalValue = (string)SourceCell.Value;
EditElement.value = OriginalValue;
#region CheckChanges
Action CheckChanges = delegate
{
//if (((string)SourceCell.Value) != EditElement.value)
//{
var args = new __DataGridViewCellValidatingEventArgs(
SourceCell.ColumnIndex,
SourceRow.Index
)
{
FormattedValue = EditElement.value
};
// tested by
// X:\jsc.svn\examples\javascript\forms\FormsDataGridViewDeleteRow\FormsDataGridViewDeleteRow\ApplicationControl.cs
if (this.CellValidating != null)
this.CellValidating(this, (DataGridViewCellValidatingEventArgs)(object)args);
//Console.WriteLine("CellValidating " + new { args.Cancel });
if (args.Cancel)
{
//Console.WriteLine("CellValidating Cancel " + new { OriginalValue });
SourceCell.Value = OriginalValue;
return;
}
SourceCell.Value = EditElement.value;
//}
};
#endregion
#region ExitEditMode
Action ExitEditMode = delegate
{
if (ExitEditModeDone) return;
ExitEditModeDone = true;
SourceCell.IsInEditMode = false;
EditElement.Orphanize();
SourceCell.InternalTableColumn_div.AttachTo(InternalTableColumn_relative);
//SourceCell.InternalStyle.InternalForeColorChanged +=
// delegate
// {
// SourceCell.InternalContentContainer.style.color = SourceCell.InternalStyle.InternalForeColor.ToString();
// };
//SourceCell.InternalContentContainer.style.backgroundColor = SourceCell.InternalStyle.InternalBackColor.ToString();
InternalRaiseCellEndEdit(SourceCell);
if (OriginalValue == (string)SourceCell.Value)
return;
this.AutoResizeColumn(SourceCell.ColumnIndex);
//InternalRaiseCellFormatting(SourceCell);
Console.WriteLine("ExitEditMode AtInternalValueChanged");
AtInternalValueChanged();
};
#endregion
#region CellBeginEdit
EditElement.onfocus +=
delegate
{
EditElement.select();
};
EditElement.focus();
InternalRaiseCellFormatting(SourceCell);
InternalRaiseCellBeginEdit(SourceCell);
#endregion
#region onblur
EditElement.onblur +=
delegate
{
//Console.WriteLine("EditElement.onblur");
if (CheckChanges != null)
CheckChanges();
if (ExitEditMode != null)
ExitEditMode();
};
#endregion
var __selectionStart = -1;
var __selectionEnd = -1;
#region onkeyup
EditElement.onkeyup +=
_ev =>
{
#region Focus
Action<__DataGridViewCell> Focus =
Cell =>
{
_ev.preventDefault();
_ev.stopPropagation();
if (Cell != null)
{
Cell.InternalTableColumn_div.focus();
}
};
#endregion
if (_ev.IsEscape)
{
CheckChanges = null;
ExitEditMode();
Focus(SourceCell);
return;
}
if (_ev.KeyCode == (int)Keys.Up)
{
Focus(CellAtOffset(0, -1));
return;
}
if (_ev.KeyCode == (int)Keys.Down)
{
Focus(CellAtOffset(0, 1));
return;
}
if (_ev.KeyCode == (int)Keys.Right)
if (EditElement.selectionStart == __selectionStart)
if (EditElement.selectionEnd == __selectionEnd)
if (__selectionEnd == __selectionStart)
if (__selectionStart == EditElement.value.Length)
{
Focus(CellAtOffset(1, 0));
return;
}
if (_ev.KeyCode == (int)Keys.Left)
if (EditElement.selectionStart == __selectionStart)
if (EditElement.selectionEnd == __selectionEnd)
if (__selectionEnd == __selectionStart)
if (__selectionStart == 0)
{
Focus(CellAtOffset(-1, 0));
return;
}
__selectionEnd = EditElement.selectionEnd;
__selectionStart = EditElement.selectionStart;
};
#endregion
#region onkeypress
EditElement.onkeypress +=
_ev =>
{
if (_ev.IsReturn)
{
_ev.preventDefault();
_ev.stopPropagation();
if (CheckChanges != null)
CheckChanges();
ExitEditMode();
SourceCell.InternalTableColumn_div.focus();
}
};
#endregion
};
#endregion
#region InternalContentContainer ondblclick
SourceCell.InternalTableColumn_div.ondblclick +=
ev =>
{
ev.stopPropagation();
ev.preventDefault();
if (this.CellDoubleClick != null)
this.CellDoubleClick(
this, new DataGridViewCellEventArgs(SourceColumn.Index, SourceRow.Index)
);
EnterEditMode();
};
#endregion
#region InternalContentContainer android has long taps
var TouchstartWatch = new Stopwatch();
SourceCell.InternalTableColumn_div.ontouchstart +=
delegate
{
Console.WriteLine("SourceCell.InternalContentContainer.ontouchstart");
TouchstartWatch.Restart();
};
SourceCell.InternalTableColumn_div.ontouchend +=
delegate
{
Console.WriteLine("SourceCell.InternalContentContainer.ontouchend");
if (TouchstartWatch.ElapsedMilliseconds > 300)
{
if (this.CellDoubleClick != null)
this.CellDoubleClick(
this, new DataGridViewCellEventArgs(SourceColumn.Index, SourceRow.Index)
);
EnterEditMode();
}
// script: error JSC1000: No implementation found for this native method, please implement [System.Diagnostics.Stopwatch.Reset()]
//TouchstartWatch.Reset();
TouchstartWatch = new Stopwatch();
};
#endregion
#region InternalContentContainer onmousedown
SourceCell.InternalTableColumn_div.onmousedown +=
ev =>
{
MouseCaptureCell = SourceCell;
ev.preventDefault();
if (SourceCell.Selected)
EnterEditMode();
else
SourceCell.InternalTableColumn_div.focus();
};
#endregion
#region InternalContentContainer onmousemove
SourceCell.InternalTableColumn_div.onmousemove +=
ev =>
{
if (MouseCaptureCell == null) return;
if (!this.MultiSelect)
{
MouseCaptureCell = SourceCell;
ev.preventDefault();
SourceCell.InternalTableColumn_div.focus();
return;
}
if (ev.MouseButton == IEvent.MouseButtonEnum.Left)
{
if (!this.InternalSelectedCells.Contains(SourceCell))
this.InternalSelectedCells.Add(SourceCell);
ev.preventDefault();
}
};
#endregion
#region InternalContentContainer onmouseup
SourceCell.InternalTableColumn_div.onmouseup +=
ev =>
{
if (MouseCaptureCell == null)
return;
MouseCaptureCell = null;
if (!ev.ctrlKey)
if (ev.MouseButton == IEvent.MouseButtonEnum.Left)
{
ev.preventDefault();
if (this.CellClick != null)
this.CellClick(this, new DataGridViewCellEventArgs(SourceCell.ColumnIndex, SourceRow.Index));
SourceCell.InternalTableColumn_div.focus();
}
};
#endregion
#region InternalContentContainer onkeydown
SourceCell.InternalTableColumn_div.onkeydown +=
ev =>
{
#region KeyNavigateTo
Func<Keys, int, int, bool> KeyNavigateTo =
(k, x, y) =>
{
if (ev.KeyCode == (int)k)
{
// focus the cell on the right
ev.preventDefault();
ev.stopPropagation();
var Cell = CellAtOffset(x, y);
if (Cell != null)
{
Cell.InternalTableColumn_div.focus();
return true;
}
}
return false;
};
#endregion
#region FullRowSelect Delete
if (this.SelectionMode == DataGridViewSelectionMode.FullRowSelect)
{
if (ev.KeyCode == (int)Keys.Delete)
{
if (SourceRow == InternalNewRow)
return;
if (!this.InternalAllowUserToDeleteRows)
return;
// tested by
// X:\jsc.svn\examples\javascript\forms\FormsDataGridViewDeleteRow\FormsDataGridViewDeleteRow\ApplicationControl.cs
// script: error JSC1000: No implementation found for this native method, please implement [System.Windows.Forms.DataGridViewRowCollection.Remove(System.Windows.Forms.DataGridViewRow)]
var Cell = CellAtOffset(0, 1);
if (this.InternalBeforeUserDeletedRow != null)
this.InternalBeforeUserDeletedRow(
this,
new DataGridViewRowEventArgs(SourceRow)
);
this.Rows.Remove(SourceRow);
if (this.UserDeletedRow != null)
this.UserDeletedRow(
this,
new DataGridViewRowEventArgs(SourceRow)
);
if (Cell != null)
{
Cell.InternalTableColumn_div.focus();
}
return;
}
}
#endregion
if (KeyNavigateTo(Keys.Right, 1, 0)) return;
if (KeyNavigateTo(Keys.Left, -1, 0)) return;
if (KeyNavigateTo(Keys.Up, 0, -1)) return;
if (KeyNavigateTo(Keys.Down, 0, 1)) return;
if (ev.IsReturn)
{
ev.preventDefault();
ev.stopPropagation();
EnterEditMode();
return;
}
if (ev.KeyCode == (int)Keys.Space)
{
EnterEditMode();
return;
}
if (char.IsLetter((char)ev.KeyCode))
{
EnterEditMode();
return;
}
if (char.IsNumber((char)ev.KeyCode))
{
EnterEditMode();
return;
}
};
#endregion
#region InternalContentContainer onblur
SourceCell.InternalTableColumn_div.onblur +=
//SourceCell.InternalTableColumn.onblur +=
ev =>
{
SourceCell.InternalSetSelected(false);
if (!ev.ctrlKey)
{
// clear
while (this.InternalSelectedCells.Count > 0)
{
var item = this.InternalSelectedCells.InternalItems[0];
//item.InternalContentContainer.style.backgroundColor = item.InternalStyle.InternalBackColor.ToString();
item.InternalTableColumn_div.style.backgroundColor = "";
item.InternalTableColumn_div.style.color = item.InternalStyle.InternalForeColor.ToString();
this.InternalSelectedCells.RemoveAt(0);
}
}
if (this.CellLeave != null)
this.CellLeave(this, new DataGridViewCellEventArgs(SourceCell.ColumnIndex, SourceRow.Index));
};
#endregion
#region InternalContentContainer onfocus
SourceCell.InternalTableColumn_div.onfocus +=
//SourceCell.InternalTableColumn.onfocus +=
ev =>
{
SourceCell.InternalSetSelected(true);
ev.preventDefault();
ev.stopPropagation();
if (this.CellEnter != null)
this.CellEnter(
this,
new DataGridViewCellEventArgs(SourceCell.ColumnIndex, SourceRow.Index)
);
{
var NewSelectedCell = SourceCell;
if (!this.InternalSelectedCells.Contains(NewSelectedCell))
this.InternalSelectedCells.Add(NewSelectedCell);
}
if (this.SelectionMode == DataGridViewSelectionMode.FullRowSelect)
{
// tested by
// X:\jsc.svn\examples\javascript\forms\FormsDataGridRowSelect\FormsDataGridRowSelect\ApplicationControl.cs
foreach (var NewSelectedCell in SourceRow.InternalCells.InternalItems)
{
if (!this.InternalSelectedCells.Contains(NewSelectedCell))
this.InternalSelectedCells.Add(NewSelectedCell);
}
}
};
#endregion
InternalBindCellMouseEnter(SourceCell);
#region InternalContentContainer Font
SourceCell.InternalTableColumn_div.style.font = SourceCell.InternalStyle.Font.ToCssString();
SourceCell.InternalStyle.InternalFontChanged +=
delegate
{
if (SourceCell.Selected)
return;
SourceCell.InternalTableColumn_div.style.font = SourceCell.InternalStyle.Font.ToCssString();
if (SourceCell.InternalStyle.InternalFont.Underline)
SourceCell.InternalTableColumn_div.style.textDecoration = "underline";
else
SourceCell.InternalTableColumn_div.style.textDecoration = "";
};
#endregion
// need to move this to css
//#region InternalContentContainer InternalForeColorChanged
//SourceCell.InternalTableColumn_div.style.color = SourceCell.InternalStyle.InternalForeColor.ToString();
//SourceCell.InternalStyle.InternalForeColorChanged +=
// delegate
// {
// if (SourceCell.Selected)
// return;
// SourceCell.InternalTableColumn_div.style.color = SourceCell.InternalStyle.InternalForeColor.ToString();
// };
//#endregion
if (SourceCell.InternalStyle.Alignment == DataGridViewContentAlignment.MiddleRight)
SourceCell.InternalTableColumn_div.style.textAlign = IStyle.TextAlignEnum.right;
#endif
};
#endregion
#region CreateMissingCells
Action<__DataGridViewRow> CreateMissingCells =
SourceRow =>
{
//Console.WriteLine("CreateMissingCells " + new
//{
// SourceRow.Index,
// CellsCount = SourceRow.InternalCells.InternalItems.Count,
// ColumnsCount = this.InternalColumns.InternalItems.Count
//});
#region defaults
while (SourceRow.InternalCells.InternalItems.Count < this.InternalColumns.InternalItems.Count)
{
var ColumnIndex = SourceRow.InternalCells.Count;
//Console.WriteLine("CreateMissingCells " + new { SourceRow.Index, ColumnIndex });
var __c = this.InternalColumns.InternalItems[ColumnIndex];
__DataGridViewCell SourceCell = null;
if (__c is __DataGridViewButtonColumn)
{
//Console.WriteLine("CreateMissingCells __DataGridViewButtonColumn " + new { SourceRow.Index, ColumnIndex });
SourceCell = new __DataGridViewButtonCell();
}
else if (__c is __DataGridViewCheckBoxColumn)
{
//Console.WriteLine("CreateMissingCells ? " + new { SourceRow.Index, ColumnIndex });
// X:\jsc.svn\examples\javascript\forms\Test\TestButtonColumn\TestButtonColumn\ApplicationControl.cs
SourceCell = new __DataGridViewCheckBoxCell();
}
else
{
//Console.WriteLine("CreateMissingCells ? " + new { SourceRow.Index, ColumnIndex });
SourceCell = new __DataGridViewTextBoxCell();
}
SourceRow.InternalCells.InternalItems.Add(SourceCell);
}
#endregion
//29:295ms CreateMissingCells { Index = 0, CellsCount = 5, ColumnsCount = 1 }
//29:296ms what if SourceRow has more columns than the table? { i = 0 }
//29:298ms what if SourceRow has more columns than the table? { i = 1 }
for (int i = 0; i < SourceRow.InternalCells.InternalItems.Count; i++)
{
//Console.WriteLine("what if SourceRow has more columns than the table? " + new { i });
// X:\jsc.svn\examples\javascript\forms\FormsHistoricBindingSourcePosition\FormsHistoricBindingSourcePosition\ApplicationControl.cs
// SourceRow has more columns? bail? are we showing the correct columns?
if (i == this.Columns.Count)
break;
var SourceColumn = this.InternalColumns.InternalItems[i];
var SourceCell = SourceRow.InternalCells.InternalItems[i];
if (SourceCell.InternalTableColumn == null)
{
InitializeMissingCell(
SourceCell,
SourceRow
);
}
SourceColumn.InternalDefaultCellStyleChanged +=
delegate
{
if (SourceColumn.DefaultCellStyle != null)
{
SourceCell.Style.ForeColor = SourceColumn.DefaultCellStyle.ForeColor;
//SourceCell.Style.BackColor = SourceColumn.DefaultCellStyle.BackColor;
}
};
//((__DataGridViewCellStyle)SourceRow.DefaultCellStyle).InternalBackColorChanged +=
// delegate
// {
// // when row style is changed, who overriddes who?
// //SourceCell.Style.BackColor = SourceRow.DefaultCellStyle.BackColor;
// };
if (SourceColumn.DefaultCellStyle != null)
{
SourceCell.Style.ForeColor = SourceColumn.DefaultCellStyle.ForeColor;
//SourceCell.Style.BackColor = SourceColumn.DefaultCellStyle.BackColor;
}
}
};
#endregion
(__ColumnsTableRow.css + IHTMLElement.HTMLElementEnum.div).style.position = IStyle.PositionEnum.relative;
Console.WriteLine("new DataGridView() before InternalColumns");
#region InternalColumns
this.InternalColumns.InternalItemsX.Removed +=
(SourceColumn, NewIndex) =>
{
foreach (var SourceRow in this.InternalRows.InternalItems.Source)
{
SourceRow.Cells.RemoveAt(NewIndex);
}
SourceColumn.InternalTableColumn.Orphanize();
SourceColumn.ColumnHorizontalResizer.Orphanize();
};
this.InternalColumns.InternalItemsX.Added +=
(SourceColumn, NewIndex) =>
{
// jsc why is this function slow?
//var SourceColumn = this.InternalColumns.InternalItems[_e.NewIndex];
var SourceColumnStopwatch = Stopwatch.StartNew();
// 1250ms { Name = dataGridView1 } InternalColumns Added { Index = 29, SourceColumnStopwatch = 41 }
SourceColumn.InternalContext = this;
//Console.WriteLine(
// new { this.Name }
// + " InternalColumns Added " + new { SourceColumn.Index });
//if (c is __DataGridViewButtonColumn)
// Console.WriteLine("InternalColumns __DataGridViewButtonColumn ItemAdded " + new { _e.NewIndex });
//else
// Console.WriteLine("InternalColumns ? ItemAdded " + new { _e.NewIndex });
SourceColumn.InternalTableColumn = __ColumnsTableRow.AddColumn();
// move to .css
//SourceColumn.InternalTableColumn.style.position = IStyle.PositionEnum.relative;
if (this.InternalRows.Count > 0)
foreach (var SourceRow in this.InternalRows.InternalItems.Source)
{
CreateMissingCells(SourceRow);
}
#region c1contentcrel, move to css + :before?
var c1contentcrel = new IHTMLDiv { }.AttachTo(SourceColumn.InternalTableColumn);
c1contentcrel.style.position = IStyle.PositionEnum.relative;
c1contentcrel.style.left = "0";
c1contentcrel.style.top = "0";
c1contentcrel.style.right = "0";
c1contentcrel.style.height = "22px";
var c1contentc = new IHTMLDiv { }.AttachTo(c1contentcrel);
c1contentc.style.overflow = IStyle.OverflowEnum.hidden;
c1contentc.style.position = IStyle.PositionEnum.absolute;
c1contentc.style.left = "0";
c1contentc.style.top = "0";
c1contentc.style.right = "0";
c1contentc.style.height = "22px";
var c1content = new IHTMLSpan { innerText = SourceColumn.HeaderText }.AttachTo(c1contentc);
SourceColumn.InternalContent = c1content;
c1content.style.marginLeft = "4px";
// tested by
// X:\jsc.svn\examples\javascript\forms\TTFCurrencyExperment\TTFCurrencyExperment\ApplicationControl.cs
#if FHR
c1content.style.font = this.Font.ToCssString();
// ? we should use .css here
this.FontChanged +=
delegate
{
c1content.style.font = this.Font.ToCssString();
};
#endif
c1content.style.lineHeight = "22px";
#endregion
SourceColumn.InternalHeaderTextChanged +=
delegate
{
// would we be better off using :after:content attr()
c1content.innerText = SourceColumn.HeaderText;
};
// setting the size for the headers on top
//Console.WriteLine("before SourceColumnWidth_css");
var SourceColumnWidth_css = default(CSSStyleRuleMonkier);
if (SourceColumn.Index == -1)
{
// scoped style?
SourceColumnWidth_css =
this.__RowsTable_css;
}
else
{
SourceColumnWidth_css =
this.__ColumnsTable_css_td[SourceColumn.Index] |
this.__ColumnsTable_css_td[SourceColumn.Index][IHTMLElement.HTMLElementEnum.div] |
this.__ContentTable_css_td[SourceColumn.Index] |
this.__ContentTable_css_td[SourceColumn.Index][IHTMLElement.HTMLElementEnum.div];
}
#region AtInternalWidthChanged
Action AtInternalWidthChanged =
delegate
{
var SourceColumnWidthStopwatch = Stopwatch.StartNew();
var SourceColumnWidth = SourceColumn.Width;
// tested by
// X:\jsc.svn\examples\javascript\forms\Test\TestGrowingGrid\TestGrowingGrid\ApplicationControl.cs
// X:\jsc.svn\examples\javascript\forms\Test\TestFlowDataGridPadding\TestFlowDataGridPadding\Application.cs
// update the designer style
SourceColumnWidth_css.style.width = SourceColumnWidth + "px";
//// table wants to squeeshe the columns, prevent it
if (this.ColumnWidthChanged != null)
this.ColumnWidthChanged(this,
new DataGridViewColumnEventArgs(SourceColumn)
);
// AtInternalWidthChanged { ElapsedMilliseconds = 0 }
if (SourceColumnWidthStopwatch.ElapsedMilliseconds > 10)
Console.WriteLine("AtInternalWidthChanged " + new { SourceColumnWidthStopwatch.ElapsedMilliseconds });
};
SourceColumn.InternalWidthChanged += AtInternalWidthChanged;
AtInternalWidthChanged();
#endregion
// should jsc record the last current method before entering console writeline?
//Console.WriteLine(
// new { this.Name }
// + " InternalColumns Added step 2");
#if FHR
#region InternalVisibleChanged
//Console.WriteLine("before SourceColumnVisible__ColumnsTable_css");
var SourceColumnVisible__ColumnsTable_css = (__ColumnsTable_css
+ IHTMLElement.HTMLElementEnum.tbody
+ IHTMLElement.HTMLElementEnum.tr
+ IHTMLElement.HTMLElementEnum.td)
[NewIndex];
//Console.WriteLine("after SourceColumnVisible__ColumnsTable_css");
//Console.WriteLine("before SourceColumnVisible__ContentTable_css");
var SourceColumnVisible__ContentTable_css = (
__ContentTable_css
+ IHTMLElement.HTMLElementEnum.tbody
+ IHTMLElement.HTMLElementEnum.tr
+ IHTMLElement.HTMLElementEnum.td
)
[NewIndex];
//Console.WriteLine("after SourceColumnVisible__ContentTable_css");
// xattribute instead?
var SourceColumnVisible_css = SourceColumnVisible__ColumnsTable_css | SourceColumnVisible__ContentTable_css;
SourceColumn.InternalVisibleChanged +=
delegate
{
if (SourceColumn.Visible)
SourceColumnVisible_css.style.display = IStyle.DisplayEnum.empty;
else
SourceColumnVisible_css.style.display = IStyle.DisplayEnum.none;
};
#endregion
#region ColumnHorizontalResizer CreateHorizontalResizer
// should we delay this until resize is enabled?
//Console.WriteLine("before CreateHorizontalResizer");
SourceColumn.ColumnHorizontalResizer = new IHTMLDiv { className = "HorizontalResizer" };
// what about older rules?
// shall they stop existing once the new once is used?
//Console.WriteLine("before CreateHorizontalResizer onscroll");
//onscroll();
//Console.WriteLine("after CreateHorizontalResizer");
SourceColumn.ColumnHorizontalResizer.AttachTo(InternalElement);
//__ColumnsTableContainer.insertNextSibling(SourceColumn.ColumnHorizontalResizer);
var ColumnHorizontalResizerDrag = new DragHelper(SourceColumn.ColumnHorizontalResizer)
{
Enabled = true
};
SourceColumn.InternalHorizontalDrag = ColumnHorizontalResizerDrag;
#endregion
#region ColumnUpdateToHorizontalResizerScroll left
Action ColumnUpdateToHorizontalResizerScroll = delegate
{
var x = ColumnHorizontalResizerDrag.Position.X;
SourceColumn.ColumnHorizontalResizer.style.left = x + "px";
};
#endregion
#region ColumnUpdateToHorizontalResizerScroll
// do we need this?
//this.InternalRows.InternalItems.Added +=
// delegate
// {
// this.HTMLTargetRef.requestAnimationFrame +=
// delegate
// {
// ColumnUpdateToHorizontalResizerScroll();
// };
// };
this.InternalAtAfterVisibleChanged +=
delegate
{
this.HTMLTargetRef.requestAnimationFrame +=
delegate
{
ColumnUpdateToHorizontalResizerScroll();
};
};
#endregion
#region CompensateFor ZeroHorizontalResizerDrag DragStop
Action<DragHelper> CompensateFor =
Target =>
{
var __X = 0;
Target.DragStart +=
delegate
{
__X = Target.Position.X;
};
Target.DragStop +=
delegate
{
ColumnHorizontalResizerDrag.Position.X +=
Target.Position.X - __X;
ColumnUpdateToHorizontalResizerScroll();
};
};
CompensateFor(ZeroHorizontalResizerDrag);
#endregion
#region Reposition
Action Reposition =
delegate
{
var RepositionStopwatch = Stopwatch.StartNew();
var x = ZeroHorizontalResizerDrag.Position.X - 1;
if (!this.RowHeadersVisible)
{
x = -4;
}
x -= this.InternalScrollContainerElement.scrollLeft;
for (int i = 0; i <= NewIndex; i++)
{
//x += this.InternalColumns.InternalItems[i].Width;
var CandidateColumn = this.InternalColumns.InternalItems[i];
// X:\jsc.svn\examples\javascript\forms\Test\TestDataGridPadding\TestDataGridPadding\ApplicationControl.cs
if (CandidateColumn.Visible)
x += CandidateColumn.Width + 1;
}
ColumnHorizontalResizerDrag.Position = new Point(x, 0);
ColumnUpdateToHorizontalResizerScroll();
// what takes here half a sec?
// 1737ms event: Reposition { Index = 0, ElapsedMilliseconds = 447 }
// report slow. 60 is the new slow
//if (RepositionStopwatch.ElapsedMilliseconds > 10)
if (RepositionStopwatch.ElapsedMilliseconds > 60)
Console.WriteLine("reposition " + new { SourceColumn.Index, RepositionStopwatch.ElapsedMilliseconds });
};
// are we adding columns in bulk? cant have reflow yet
// https://sites.google.com/a/jsc-solutions.net/backlog/knowledge-base/2014/201402/20140205
if (!InternalDataSourceBusy)
Reposition();
this.InternalScrollContainerElement.onscroll +=
e =>
{
Reposition();
};
// tested by
// X:\jsc.svn\examples\javascript\Test\TestNoZeroColumnHeaderNoScrollbarDateDataGrid\TestNoZeroColumnHeaderNoScrollbarDateDataGrid\ApplicationControl.cs
InternalRowHeadersVisibleChanged +=
delegate
{
Reposition();
};
for (int i = 0; i <= NewIndex; i++)
{
var item = this.InternalColumns.InternalItems[i];
item.InternalWidthChanged +=
delegate
{
if (InternalDataSourceBusy)
return;
Reposition();
};
}
#endregion
#region ColumnHorizontalResizerDrag DragStart
var __DragStartX = 0;
ColumnHorizontalResizerDrag.DragStart +=
delegate
{
Native.Document.body.style.cursor = DOM.IStyle.CursorEnum.move;
//((IHTMLElement)SourceColumn.ColumnHorizontalResizer.firstChild).style.backgroundColor = JSColor.Blue;
__DragStartX = ColumnHorizontalResizerDrag.Position.X;
};
ColumnHorizontalResizerDrag.DragStop +=
delegate
{
// { Width = 115, cwidth = 1045 } view-source:27892
// view-source:27892
//{ Width = 1045, cwidth = 1975 }
Native.Document.body.style.cursor = DOM.IStyle.CursorEnum.auto;
//((IHTMLElement)SourceColumn.ColumnHorizontalResizer.firstChild).style.backgroundColor = this.InternalBackgroundColor.ToString();
//((IHTMLElement)SourceColumn.ColumnHorizontalResizer.firstChild).style.backgroundColor = "";
//((IHTMLElement)SourceColumn.ColumnHorizontalResizer.firstChild).style.backgroundColor = "yellow";
//SourceColumn.ColumnHorizontalResizer.style.backgroundColor = "red";
var ColumnHorizontalResizerDragNewValue = SourceColumn.Width + ColumnHorizontalResizerDrag.Position.X - __DragStartX;
Console.WriteLine(new { SourceColumn.Width, ColumnHorizontalResizerDragNewValue });
SourceColumn.Width = ColumnHorizontalResizerDragNewValue;
InternalAutoSizeWhenFill();
};
ColumnHorizontalResizerDrag.DragMove +=
delegate
{
ColumnUpdateToHorizontalResizerScroll();
};
#endregion
#region ColumnHorizontalResizer ondblclick AutoResizeColumn
SourceColumn.ColumnHorizontalResizer.onmousedown +=
e =>
{
if (e.MouseButton == IEvent.MouseButtonEnum.Middle)
{
e.preventDefault();
e.stopPropagation();
this.AutoResizeColumn(SourceColumn.Index, ObeyAutoSizeMode: false);
InternalAutoSizeWhenFill();
}
};
SourceColumn.ColumnHorizontalResizer.ondblclick +=
delegate
{
this.AutoResizeColumn(SourceColumn.Index, ObeyAutoSizeMode: false);
InternalAutoSizeWhenFill();
};
#endregion
#endif
bool InternalAutoResizeColumnBuzy = false;
#region InternalAutoResizeColumn
//Console.WriteLine("add InternalAutoResizeColumn");
this.InternalAutoResizeColumn +=
(SourceColumnIndex, ObeyAutoSizeMode) =>
{
//Console.WriteLine("at InternalAutoResizeColumn");
if (InternalAutoResizeColumnBuzy)
return;
if (SourceColumnIndex != SourceColumn.Index)
return;
var rows = this.InternalRows.InternalItems.Source;
var InternalAutoResizeColumnStopwatch = Stopwatch.StartNew();
// InternalAutoSize { Count = 33, cindex = -1 }
//Console.WriteLine(
// new { this.Name }
// + " InternalAutoResizeColumn "
// + new
// {
// RowCount = rows.Count,
// SourceColumnIndex,
// // are we even supposed to do autoresize?
// SourceColumn.AutoSizeMode
// }
//);
#region Fill last column
if (this.AutoSizeColumnsMode == DataGridViewAutoSizeColumnsMode.Fill)
{
var FillColumn = InternalGetVisibleColumns().LastOrDefault();
if (FillColumn != null)
if (SourceColumnIndex == FillColumn.Index)
{
//Console.WriteLine("InternalAutoResizeColumn " + new { FillColumn.Index, FillColumn.Name });
//SourceColumn.le
var SourceColumnLeft = InternalGetVisibleColumns()
.Where(c => c.Index < FillColumn.Index)
.Select(c => c.Width)
.Sum();
var ZeroRight = (ZeroHorizontalResizerDrag.Position.X + 4);
// X:\jsc.svn\examples\javascript\forms\FormsHistoricBindingSourcePosition\FormsHistoricBindingSourcePosition\ApplicationControl.cs
// tested by?
if (!this.RowHeadersVisible)
{
// we are missing the left border!
SourceColumnLeft = 0;
ZeroRight = -4;
}
// { cindex = 0, w = 0, all = 1600, WidthByFill = 1600 }
var all = this.InternalScrollContainerElement.clientWidth;
var WidthByFill = all - SourceColumnLeft - ZeroRight - 5;
WidthByFill -= 1;
//Console.WriteLine(
// " InternalAutoResizeColumn Fill "
// + new
// {
// SourceColumnIndex,
// SourceColumnLeft,
// value = ZeroRight,
// all,
// WidthByFill
// }
// );
//{ cindex = 0, w = 0, value = 99, all = 753, WidthByFill = 654 }
#if FHR
__DragStartX = ColumnHorizontalResizerDrag.Position.X + (WidthByFill - SourceColumn.Width);
#endif
InternalAutoResizeColumnBuzy = true;
SourceColumn.Width = Math.Max(20, WidthByFill);
InternalAutoResizeColumnBuzy = false;
return;
}
}
#endregion
if (SourceColumnIndex < 0)
return;
if (SourceColumn.AutoSizeMode == DataGridViewAutoSizeColumnMode.None)
{
if (ObeyAutoSizeMode)
return;
}
//Console.WriteLine("before max");
#region SetColumnWidth
//1268ms before max view-source:35829
//1707ms after max
// we should only look at currently visible rows?
var WidthByRowsInThisColumn = rows.Take(16).Max(
rr =>
{
//1774ms at rr view-source:35829
//2273ms at rr
//Console.WriteLine("enter rr");
// 33736ms before max view-source:35829
//33736ms enter rr view-source:35829
//34202ms exit rr { value = 228 }
__DataGridViewCell cc = rr.Cells[SourceColumnIndex];
//Console.WriteLine("got cc");
//Console.WriteLine("InternalAutoSize " + new { rows.Count, cindex, cc.InternalContent.offsetWidth });
//2717ms got cc view-source:35829
//3165ms exit rr { value = 228 }
var s = Stopwatch.StartNew();
// !!! accessing DOM is expensive!
var value = cc.InternalTableColumn_div_span.offsetWidth;
//2717ms got cc view-source:35829
//3165ms exit rr { value = 228 }
if (s.ElapsedMilliseconds > 10)
Console.WriteLine("got offsetWidth in " + new { s.ElapsedMilliseconds });
return value;
}
);
//Console.WriteLine("after max");
WidthByRowsInThisColumn = Math.Max(WidthByRowsInThisColumn, this.InternalColumns.InternalItems[SourceColumnIndex].InternalContent.offsetWidth);
if (WidthByRowsInThisColumn == 0)
{
// no DOM?
//Console.WriteLine("InternalAutoSize skipped");
return;
}
// extra padding?
WidthByRowsInThisColumn += 8 + 24;
//Console.WriteLine("InternalAutoSize" + new { SourceColumn.Width, cwidth = WidthByRowsInThisColumn });
#if FHR
__DragStartX = ColumnHorizontalResizerDrag.Position.X + (WidthByRowsInThisColumn - SourceColumn.Width);
#endif
var NewWidth = Math.Max(20, WidthByRowsInThisColumn);
// 15248ms { Name = dataGridView2 }InternalAutoResizeColumn { RowCount = 2, SourceColumnIndex = 0, NewWidth = 154, ElapsedMilliseconds = 2 }
// 14818ms { Name = dataGridView2 } InternalAutoResizeColumn { RowCount = 2, SourceColumnIndex = 2, NewWidth = 120, ElapsedMilliseconds = 1 }
// 1745ms event: { Name = dataGridView1 } InternalAutoResizeColumn { RowCount = 9, SourceColumnIndex = 1, NewWidth = 260, ElapsedMilliseconds = 447 }
// report only slow https://sites.google.com/a/jsc-solutions.net/backlog/knowledge-base/2014/201404/20140413
if (InternalAutoResizeColumnStopwatch.ElapsedMilliseconds > 20)
Console.WriteLine(
"event: " +
new { this.Name }
+ " InternalAutoResizeColumn " + new
{
RowCount = rows.Count,
SourceColumnIndex,
NewWidth,
InternalAutoResizeColumnStopwatch.ElapsedMilliseconds
});
// why does this cost us 600ms?
SourceColumn.Width = NewWidth;
#endregion
};
#endregion
#if FHR
if (ColumnAdded != null)
ColumnAdded(this, new DataGridViewColumnEventArgs((DataGridViewColumn)(object)SourceColumn));
#endif
// 1135ms { Name = dataGridView1 } InternalColumns Added { Index = 29, SourceColumnStopwatch = 7 }
// 888 ??
// 244382ms event: dataGridView2 set DataSource columns { SourceDataTableColumnCount = 7, ElapsedMilliseconds = 869 }
// 2135ms { Name = dataGridView2 } InternalColumns Added { Index = 0, Name = , SourceColumnStopwatch = 123 }
//120:5572ms { Name = dataGridView2 } InternalColumns Added { Index = 1, SourceColumnStopwatch = 8 }
// 112:371747ms { Name = dataGridView1 } InternalColumns Added { Index = 1, SourceColumnStopwatch = 31 }
if (SourceColumnStopwatch.ElapsedMilliseconds > 40)
Console.WriteLine(
new { this.Name }
+ " InternalColumns Added " + new
{
SourceColumn.Index,
SourceColumnStopwatch = SourceColumnStopwatch.ElapsedMilliseconds
});
};
#endregion
new IStyle(__RowsTable_css_td)
{
width = "100%",
height = "21px",
position = IStyle.PositionEnum.relative
};
#region DataGridNewRow
{
var DataGridNewRow = new IHTMLImage("assets/ScriptCoreLib.Windows.Forms/DataGridNewRow.png");
var xDataGridViewCellIsInEditMode = new XAttribute("DataGridViewCellIsInEditMode", global::System.Convert.ToString(true));
var __RowsTable_css_td_after = __RowsTable_css
[IHTMLElement.HTMLElementEnum.tbody]
.last[IHTMLElement.HTMLElementEnum.tr]
//[e => e.getAttribute("DataGridViewCellSelected") == true]
[IHTMLElement.HTMLElementEnum.td]
.after;
__RowsTable_css_td_after.style.position = IStyle.PositionEnum.absolute;
__RowsTable_css_td_after.style.left = "12px";
__RowsTable_css_td_after.style.top = "0px";
__RowsTable_css_td_after.style.right = "0";
__RowsTable_css_td_after.style.height = "21px";
__RowsTable_css_td_after.content = "";
__RowsTable_css_td_after.style.backgroundPosition = "left center";
DataGridNewRow.ToBackground(__RowsTable_css_td_after.style, false);
}
#endregion
#region DataGridEditRow
{
var DataGridEditRow = new IHTMLImage("assets/ScriptCoreLib.Windows.Forms/DataGridEditRow.png");
var xDataGridViewCellIsInEditMode = new XAttribute("DataGridViewCellIsInEditMode", global::System.Convert.ToString(true));
var __RowsTable_css_td_after = __RowsTable_css
[IHTMLElement.HTMLElementEnum.tbody]
[IHTMLElement.HTMLElementEnum.tr]
//[e => e.getAttribute("DataGridViewCellSelected") == true]
[xDataGridViewCellIsInEditMode]
[IHTMLElement.HTMLElementEnum.td]
.after;
__RowsTable_css_td_after.style.position = IStyle.PositionEnum.absolute;
__RowsTable_css_td_after.style.left = "12px";
__RowsTable_css_td_after.style.top = "0px";
__RowsTable_css_td_after.style.right = "0";
__RowsTable_css_td_after.style.height = "21px";
__RowsTable_css_td_after.content = "";
__RowsTable_css_td_after.style.backgroundPosition = "left center";
DataGridEditRow.ToBackground(__RowsTable_css_td_after.style, false);
}
#endregion
#region DataGridFocusRow
{
var xDataGridViewCellSelected = new XAttribute("DataGridViewCellSelected", global::System.Convert.ToString(true));
var DataGridFocusRow = new IHTMLImage("assets/ScriptCoreLib.Windows.Forms/DataGridFocusRow.png");
var __RowsTable_css_td_before = __RowsTable_css
[IHTMLElement.HTMLElementEnum.tbody]
[IHTMLElement.HTMLElementEnum.tr]
//[e => e.getAttribute("DataGridViewCellSelected") == true]
[xDataGridViewCellSelected]
[IHTMLElement.HTMLElementEnum.td]
.before;
__RowsTable_css_td_before.style.position = IStyle.PositionEnum.absolute;
__RowsTable_css_td_before.style.left = "4px";
__RowsTable_css_td_before.style.top = "0px";
__RowsTable_css_td_before.style.right = "0";
__RowsTable_css_td_before.style.height = "21px";
__RowsTable_css_td_before.content = "";
__RowsTable_css_td_before.style.backgroundPosition = "left center";
DataGridFocusRow.ToBackground(__RowsTable_css_td_before.style, false);
}
#endregion
#region InitializeZeroColumnCell
// we need to reduce this!
Action<__DataGridViewRow> InitializeZeroColumnCell =
SourceRow =>
{
#region InternalTableColumn
var __tr = default(IHTMLTableRow);
if (InternalPrerenderZeroRows.Count > 0)
{
// datasource already prepped a row for us
__tr = InternalPrerenderZeroRows.Dequeue();
__tr.Clear();
}
else
{
__tr = new IHTMLTableRow { };
// Failed to execute 'insertBefore' on 'Node': The new child element is null.
if (InternalNewRow != null)
{
__RowsTableBody.insertBefore(__tr, InternalNewRow.InternalZeroColumnTableRow);
}
else
{
__RowsTableBody.appendChild(__tr);
}
}
SourceRow.InternalZeroColumnTableRow = __tr;
//var __tr = __RowsTableBody.AddRow();
var InternalTableColumn = __tr.AddColumn();
#endregion
// X:\jsc.svn\examples\javascript\forms\FormsGridCellStyle\FormsGridCellStyle\Application.cs
InternalTableColumn.title = new { SourceRow.Index }.ToString();
//#region AtInternalHeightChanged
//Action AtInternalHeightChanged = delegate
//{
// //c1.style.height = (SourceRow.InternalHeight - 1) + "px";
// c1img.style.height = (SourceRow.InternalHeight - 1) + "px";
// c2img.style.height = (SourceRow.InternalHeight - 1) + "px";
// c1contentcrel.style.height = (SourceRow.InternalHeight - 1) + "px";
// __tr.style.height = SourceRow.InternalHeight + "px";
//};
//AtInternalHeightChanged();
//SourceRow.InternalHeightChanged += AtInternalHeightChanged;
//#endregion
};
#endregion
InitializeZeroColumnCell(InternalNewRow);
Console.WriteLine("new DataGridView() after InitializeZeroColumnCell");
#region InternalAutoResizeColumn
var t = new global::System.Windows.Forms.Timer();
t.Interval = 100;
t.Tick +=
delegate
{
t.Stop();
InternalAutoResizeAll();
};
#endregion
this.InternalRowHeadersVisibleChanged +=
delegate
{
InternalAutoSizeWhenFill();
};
#region ClientSizeChanged
// whatif we are in autosize mode?
this.ClientSizeChanged +=
delegate
{
InternalAutoSizeWhenFill();
};
#endregion
Console.WriteLine("new DataGridView() before InternalRows.Added");
#region InternalRows.Added
this.InternalRows.InternalItems.Added +=
(SourceRow, CurrentRowIndex) =>
{
if (SourceRow == InternalNewRow)
{
// do we have a test for readding rows?
SourceRow.InternalTableRow.AttachTo(__ContentTableBody);
SourceRow.InternalZeroColumnTableRow.AttachTo(__RowsTableBody);
}
if (SourceRow.InternalTableRow != null)
return;
//Console.WriteLine("InternalRows Added");
if (InternalNewRow == null)
{
// when is this happening?
SourceRow.InternalTableRow = __ContentTableBody.AddRow();
}
else
{
// how much time are we spending per row?
// what about bulk entry?
// could we adapt a preexisting table?
// how much time do we spend on moving the new row thingy?
if (InternalPrerenderRows.Count > 0)
{
// datasource already prepped a row for us
SourceRow.InternalTableRow = InternalPrerenderRows.Dequeue();
SourceRow.InternalTableRow.Clear();
}
else
{
SourceRow.InternalTableRow = new IHTMLTableRow();
// Uncaught NotFoundError: Failed to execute 'insertBefore' on 'Node': The node before which the new node is to be inserted is not a child of this node.
if (InternalNewRow.InternalTableRow.parentNode == null)
{
// where is our new row?
__ContentTableBody.appendChild(InternalNewRow.InternalTableRow);
InternalNewRow.InternalZeroColumnTableRow.AttachTo(__RowsTableBody);
}
__ContentTableBody.insertBefore(
// is it part of the rows still?
SourceRow.InternalTableRow,
InternalNewRow.InternalTableRow
);
}
//Console.WriteLine("InternalRows reposition InternalNewRow");
// make sure the RowIndex -1 is the last element
this.InternalRows.InternalItems.Source.Remove(InternalNewRow);
this.InternalRows.InternalItems.Source.Add(InternalNewRow);
//Console.WriteLine("InternalRows reposition InternalNewRow done");
}
// disabled for now, until we get a newer test
//#region AtInternalHeightChanged
//Action AtInternalHeightChanged = delegate
//{
// SourceRow.InternalTableRow.style.height = SourceRow.InternalHeight + "px";
//};
//AtInternalHeightChanged();
//SourceRow.InternalHeightChanged += AtInternalHeightChanged;
//#endregion
CreateMissingCells(SourceRow);
if (!InternalSkipAutoSize)
if (!InternalDataSourceBusy)
if (this.AutoSizeColumnsMode != DataGridViewAutoSizeColumnsMode.None)
{
//Console.WriteLine("a new row was added, auto resize?");
t.Stop();
t.Start();
}
InitializeZeroColumnCell(SourceRow);
};
#endregion
#region InternalRows Removed
this.InternalRows.InternalItems.Removed +=
(SourceRow, i) =>
{
//Console.WriteLine("InternalRows Removed");
SourceRow.InternalTableRow.Orphanize();
SourceRow.InternalZeroColumnTableRow.Orphanize();
// raise any events
};
#endregion
__DataGridViewRow PendingNewRow = null;
#region UserAddedRow
this.InternalRaiseCellBeginEdit =
(SourceCell) =>
{
//Console.WriteLine("InternalRaiseCellBeginEdit " + new { SourceCell.ColumnIndex, SourceCell.OwningRow.Index });
var SourceRow = SourceCell.InternalOwningRow;
if (SourceRow.IsNewRow)
{
var n = new __DataGridViewRow();
InternalNewRow = null;
PendingNewRow = SourceRow;
InternalSkipAutoSize = true;
this.InternalRows.InternalItems.Source.Add(n);
InternalSkipAutoSize = false;
InternalNewRow = n;
if (this.UserAddedRow != null)
this.UserAddedRow(this, new DataGridViewRowEventArgs((DataGridViewRow)(object)SourceRow));
}
if (this.CellBeginEdit != null)
this.CellBeginEdit(this,
new DataGridViewCellCancelEventArgs(SourceCell.ColumnIndex, SourceRow.Index)
);
};
#endregion
#region CellEndEdit
this.InternalRaiseCellValueChanged =
(SourceCell) =>
{
var SourceRow = SourceCell.InternalOwningRow;
if (SourceRow.IsNewRow)
{
// if there is now content on the new row then we need another new row downt we?
return;
}
//Console.WriteLine("InternalRaiseCellValueChanged " + new { SourceCell.ColumnIndex, SourceCell.OwningRow.Index });
if (PendingNewRow == SourceRow)
PendingNewRow = null;
if (this.CellValueChanged != null)
this.CellValueChanged(this,
new DataGridViewCellEventArgs(SourceCell.ColumnIndex, SourceCell.OwningRow.Index)
);
};
this.InternalRaiseCellEndEdit =
(SourceCell) =>
{
//Console.WriteLine("InternalRaiseCellEndEdit " + new { SourceCell.ColumnIndex, SourceCell.OwningRow.Index });
var SourceRow = SourceCell.InternalOwningRow;
#region PendingNewRow
if (PendingNewRow == SourceRow)
{
var ColumnIndex = SourceCell.ColumnIndex;
var RowIndex = SourceRow.Index;
this.InternalRows.InternalItems.Source.Remove(SourceRow);
SourceRow.InternalTableRow.Orphanize();
SourceRow.InternalZeroColumnTableRow.Orphanize();
//if (this.UserDeletedRow != null)
// this.UserDeletedRow(this, new DataGridViewRowEventArgs((DataGridViewRow)(object)SourceRow));
PendingNewRow = null;
this.InternalRows.InternalItems.Source[RowIndex].InternalCells.InternalItems[ColumnIndex].InternalTableColumn_div.focus();
//this[SourceCell.ColumnIndex, SourceRow.Index].Selected = true;
}
#endregion
if (this.CellEndEdit != null)
this.CellEndEdit(this,
new DataGridViewCellEventArgs(SourceCell.ColumnIndex, SourceRow.Index)
);
};
#endregion
this.GridColor = global::System.Drawing.Color.FromArgb(0xa0, 0xa0, 0xa0);
this.Height = 400;
// 2901ms exit DataGridView .ctor { ElapsedMilliseconds = 923 }
// 25:584ms event: exit DataGridView .ctor { ElapsedMilliseconds = 525 }
Console.WriteLine("event: new DataGridView() " + new { DataGridViewConstructorStopwatch.ElapsedMilliseconds });
}
public __TextBox()
{
#region InternalContainer
//this.InternalContainer = new IHTMLDiv();
this.InternalContainer = new IHTMLElement(ElementName);
// are we excluding older browsers? does the app analyzer let the developer know what devices can be used now?
this.InternalContainer_shadow = this.InternalContainer.createShadowRoot();
// if we only create shadow, empty, other children dissapear dont they. as there are no insertion points
this.InternalContainer.style.position = ScriptCoreLib.JavaScript.DOM.IStyle.PositionEnum.absolute;
// in Forms we use typeof() because we see Component. WPF objects are more like XElements..
this.InternalContainer.name = "__TextBox";
this.InternalContainer.style.left = "0px";
this.InternalContainer.style.top = "0px";
// do we create any new havoc?
this.InternalContainer.style.zIndex = 0;
#endregion
#region InternalTextField_ShadowContainer
// when is it attached?
this.InternalTextField_ShadowContainer = new IHTMLDiv();
this.InternalTextField_ShadowContainer.style.position = IStyle.PositionEnum.absolute;
this.InternalTextField_ShadowContainer.style.overflow = IStyle.OverflowEnum.hidden;
this.InternalTextField_ShadowContainer.style.SetSize(0, 0);
this.InternalTextField_Shadow = new IHTMLSpan();
this.InternalTextField_Shadow.AttachTo(this.InternalTextField_ShadowContainer);
this.InternalTextField_Shadow.style.whiteSpace = IStyle.WhiteSpaceEnum.pre;
this.InternalTextField_Shadow.style.display = IStyle.DisplayEnum.inline_block;
this.InternalTextField_Shadow.style.position = IStyle.PositionEnum.absolute;
#endregion
#region InternalTextField
this.InternalTextField = new IHTMLInput(ScriptCoreLib.Shared.HTMLInputTypeEnum.text)
{
//}.AttachTo(this.InternalContainer);
// public static T AttachTo<T>(this T e, IHTMLElement c) where T : INodeConvertible<IHTMLElement>;
}.AttachTo(this.InternalContainer_shadow);
this.InternalSetDefaultFont();
this.InternalTextField.style.position = IStyle.PositionEnum.absolute;
this.InternalTextField.style.margin = "0";
this.InternalTextField.style.paddingTop = "0";
this.InternalTextField.style.paddingBottom = "0";
this.InternalTextField.style.border = "1px solid gray";
#endregion
Action InternalAutoSizeUpdate =
delegate
{
if (this.InternalTextField_Shadow == null)
return;
InternalAutoSizeToText(this.InternalTextField.value);
};
this.InternalTextField.onchange +=
delegate
{
InternalAutoSizeUpdate();
};
this.InternalTextField.onkeyup +=
delegate
{
InternalAutoSizeUpdate();
};
}
//public const string Alias = "Class1";
//public const string DefaultData = "Class1Data";
/// <summary>
/// Creates a new control
/// </summary>
/// <param name="DataElement">The hidden data element</param>
public GoogleGearsSimple()
{
// this ctor creates a new div which has a text and a button element
// on mouseover over the color text is changed
// on pressing the button the next message in text element is displayed
IHTMLDiv Control = new IHTMLDiv();
Control.AttachToDocument();
Func<string, string, IHTMLElement> link = (href, text) => new IHTMLDiv(new IHTMLAnchor(href, text));
Control.appendChild(link("http://gears.google.com/", "Google Gears"));
Control.appendChild(link("http://code.google.com/apis/gears/samples/hello_world_database.html", "Google Example # 1"));
Control.appendChild(new IHTMLElement(IHTMLElement.HTMLElementEnum.h3, "This page uses Google Gears to record your entries on the local disk. If you navigate away and revisit this page, all your data will still be here. Try it!"));
// http://code.google.com/apis/gears/samples/hello_world_database.html
GoogleGearsFactory.Database db = null;
try
{
db = new GoogleGearsFactory.Database();
}
catch (Exception exc)
{
var err = new IHTMLCode(exc.Message);
err.style.color = Color.Red;
Control.appendChild(err);
}
IStyleSheet.Default.AddRule(".odd").style.backgroundColor = Color.FromGray(0xa0);
IStyleSheet.Default.AddRule(".even").style.backgroundColor = Color.FromGray(0xef);
if (db != null)
{
db.open("demo1");
db.execute(@"
create table if not exists Demo
(Phrase varchar(255), Timestamp int)
");
var textfield = new IHTMLInput(HTMLInputTypeEnum.text, "text1", "");
var btnadd = new IHTMLButton("Add new entry");
var btnrefresh = new IHTMLButton("Refresh");
var btnclear = new IHTMLButton("Clear");
Control.appendChild(textfield, btnadd, btnclear, btnrefresh,
new IHTMLCode(GoogleGearsFactory.Default.getBuildInfo())
);
var list = new IHTMLElement(IHTMLElement.HTMLElementEnum.ol);
Control.appendChild(list);
var read = default(Action);
read = delegate
{
//from i in Demo
//select new { Phrase, Timestamp }
//order by Timestamp desc
list.removeChildren();
Func<string, IHTMLElement> AddItem =
text => new IHTMLElement(IHTMLElement.HTMLElementEnum.li, text).Aggregate(v => list.appendChild(v));
// this could be rewritten as an expression once they are supported by jsc
int counter = 0;
var query = from Data in db.AsEnumerable<DemoDataEntity>(
"select * from Demo order by Timestamp desc",
typeof(DemoDataEntity)
)
// let ListItem = AddItem(Data.Timestamp + " - " + Data.Phrase)
select new __Type2 { ListItem = AddItem(Data.Timestamp + " - " + Data.Phrase), Data = Data};
foreach (var v in query)
{
counter++;
var vx = v;
if (counter % 2 == 0)
v.ListItem.className = "odd";
else
v.ListItem.className = "even";
#region -
var btndel = new IHTMLButton("-");
btndel.style.color = Color.Red;
btndel.onclick +=
delegate
{
db.execute("delete from Demo where Timestamp = ?", vx.Data.Timestamp);
read();
};
#endregion
#region +
var btnclone = new IHTMLButton("+");
btnclone.style.color = Color.Blue;
btnclone.onclick +=
delegate
{
db.Insert("Demo", vx.Data);
read();
};
#endregion
v.ListItem.insertBefore(btnclone, v.ListItem.firstChild);
v.ListItem.insertBefore(btndel, v.ListItem.firstChild);
}
#region raw
//var rs = db.execute("select * from Demo order by Timestamp desc");
//while (rs.isValidRow())
//{
// var xt = typeof(DemoDataEntity);
// var xx = (DemoDataEntity)Activator.CreateInstance(xt);
// for (int i = 0; i < rs.fieldCount(); i++)
// {
// xt.GetField(rs.fieldName(i)).SetValue(xx, rs.field(i));
// }
// AddItem(xx.Timestamp + " - " + xx.Phrase);
// rs.next();
//}
//rs.close();
#endregion
};
btnclear.onclick +=
delegate
{
db.execute("delete from Demo");
read();
};
btnadd.onclick +=
delegate
{
db.Insert("Demo",
new DemoDataEntity
{
Phrase = textfield.value,
Timestamp = IDate.Now.getTime()
}
);
//db.execute("insert into Demo (Phrase, Timestamp) values (?, ?)", textfield.value, IDate.Now.getTime());
textfield.value = "";
read();
};
btnrefresh.onclick +=
delegate
{
read();
};
read();
}
// not array
// is object
// no prototype
}
/// <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)
{
//FormStyler.AtFormCreated =
//s =>
//{
// s.Context.FormBorderStyle = System.Windows.Forms.FormBorderStyle.None;
// //var x = new ChromeTCPServerWithFrameNone.HTML.Pages.AppWindowDrag().AttachTo(s.Context.GetHTMLTarget());
// var x = new ChromeTCPServerWithFrameNone.HTML.Pages.AppWindowDragWithShadow().AttachTo(s.Context.GetHTMLTarget());
// s.Context.GetHTMLTarget().style.backgroundColor = "#efefef";
// //s.Context.GetHTMLTarget().style.backgroundColor = "#A26D41";
//};
#if AsWEBSERVER
#region += Launched chrome.app.window
// X:\jsc.svn\examples\javascript\chrome\apps\ChromeTCPServerAppWindow\ChromeTCPServerAppWindow\Application.cs
dynamic self = Native.self;
dynamic self_chrome = self.chrome;
object self_chrome_socket = self_chrome.socket;
if (self_chrome_socket != null)
{
// if we run as a server. we can open up on android.
//chrome.Notification.DefaultTitle = "Nexus7";
//chrome.Notification.DefaultIconUrl = new x128().src;
ChromeTCPServer.TheServerWithStyledForm.Invoke(
AppSource.Text
//, AtFormCreated: FormStyler.AtFormCreated
//AtFormConstructor:
// f =>
// {
// //arg[0] is typeof System.Int32
// //script: error JSC1000: No implementation found for this native method, please implement [static System.Drawing.Color.FromArgb(System.Int32)]
// // X:\jsc.svn\examples\javascript\forms\Test\TestFromArgb\TestFromArgb\ApplicationControl.cs
// f.BackColor = System.Drawing.Color.FromArgb(0xA26D41);
// }
);
return;
}
#endregion
#else
#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: "x360stereomidnightsun");
// https://developer.chrome.com/apps/app_window#type-CreateWindowOptions
var xappwindow = await chrome.app.window.create(
Native.document.location.pathname, options: new
{
alwaysOnTop = true,
visibleOnAllWorkspaces = true
}
);
//xappwindow.setAlwaysOnTop
xappwindow.show();
await xappwindow.contentWindow.async.onload;
Console.WriteLine("chrome.app.window loaded!");
};
return;
}
}
#endregion
#endif
// crash
//int cubefacesizeMAX = 2048 * 2; // 6 faces, ?
int cubefacesizeMAX = 1024; // 6 faces, ?
int cubefacesize = cubefacesizeMAX; // 6 faces, ?
//int cubefacesize = 1024; // 6 faces, ?
// "X:\vr\tape1\0000x2048.png"
// for 60hz render we may want to use float camera percision, not available for ui.
// "x:\util\android-sdk-windows\platform-tools\adb.exe" push "X:\vr\tape1\0000x2048.png" "/sdcard/oculus/360photos/"
// "x:\util\android-sdk-windows\platform-tools\adb.exe" push "X:\vr\tape1\0000x128.png" "/sdcard/oculus/360photos/"
if (Environment.ProcessorCount < 8)
//cubefacesize = 64; // 6 faces, ?
// fast gif?
cubefacesize = 1024; // 6 faces, ?
// can we keep fast fps yet highp?
// can we choose this on runtime? designtime wants fast fps, yet for end product we want highdef on our render farm?
//const int cubefacesize = 128; // 6 faces, ?
//var cubecameraoffsetx = 256;
var cubecameraoffsetx = 400;
//var uizoom = 0.1;
//var uizoom = cubefacesize / 128f;
var uizoom = 128f / cubefacesize;
Native.css.style.backgroundColor = "darkcyan";
Native.css.style.overflow = IStyle.OverflowEnum.hidden;
Native.body.Clear();
(Native.body.style as dynamic).webkitUserSelect = "text";
IHTMLCanvas shader1canvas = null;
//return;
// Earth params
//var radius = 0.5;
//var radius = 1024;
//var radius = 2048;
//var radius = 512;
//var radius = 256;
//var radius = 400;
// can we have not fly beyond moon too much?
//var radius = 500;
var radius = 480;
//var segments = 32;
var segments = 128 * 2;
//var rotation = 6;
//const int size = 128;
//const int size = 256; // 6 faces, 12KB
//const int size = 512; // 6 faces, ?
// WebGL: drawArrays: texture bound to texture unit 0 is not renderable. It maybe non-power-of-2 and have incompatible texture filtering or is not 'texture complete'. Or the texture is Float or Half Float type with linear filtering while OES_float_linear or OES_half_float_linear extension is not enabled.
//const int size = 720; // 6 faces, ?
//const int size = 1024; // 6 faces, ?
//const int cubefacesize = 1024; // 6 faces, ?
// THREE.WebGLRenderer: Texture is not power of two. Texture.minFilter is set to THREE.LinearFilter or THREE.NearestFilter. ( chrome-extension://aemlnmcokphbneegoefdckonejmknohh/assets/x360stereomidnightsun/anvil___spherical_hdri_panorama_skybox_by_macsix_d6vv4hs.jpg )
var far = 0xffffff;
new IHTMLPre { new { Environment.ProcessorCount, cubefacesize } }.AttachToDocument();
//new IHTMLPre { "can we stream it into VR, shadertoy, youtube 360, youtube stereo yet?" }.AttachToDocument();
var sw = Stopwatch.StartNew();
var oo = new List<THREE.Object3D>();
var window = Native.window;
// what about physics and that portal rendering?
// if we are running as a chrome web server, we may also be opened as android ndk webview app
//var cameraPX = new THREE.PerspectiveCamera(fov: 90, aspect: window.aspect, near: 1, far: 2000);
// once we update source
// save the source
// manually recompile
//cameraPX.position.z = 400;
//// the camera should be close enough for the object to float off the FOV of PX
//cameraPX.position.z = 200;
// scene
// can we make the 3D object orbit around us ?
// and
// stream it to vr?
var scene = new THREE.Scene();
// since our cube camera is somewhat a fixed thing
// would it be easier to move mountains to come to us?
// once we change code would chrome app be able to let VR know that a new view is available?
var sceneg = new THREE.Group();
sceneg.AttachTo(scene);
// fly up?
//sceneg.translateZ(-1024);
// rotate the world, as the skybox then matches what we have on filesystem
scene.rotateOnAxis(new THREE.Vector3(0, 1, 0), -Math.PI / 2);
// yet for headtracking we shall rotate camera
//sceneg.position.set(0, 0, -1024);
//sceneg.position.set(0, -1024, 0);
//scene.add(new THREE.AmbientLight(0x333333));
//scene.add(new THREE.AmbientLight(0xffffff));
//scene.add(new THREE.AmbientLight(0xaaaaaa));
//scene.add(new THREE.AmbientLight(0xcccccc));
//scene.add(new THREE.AmbientLight(0xeeeeee));
scene.add(new THREE.AmbientLight(0xffffff));
//var light = new THREE.DirectionalLight(0xffffff, 1);
//// sun should be beyond moon
////light.position.set(-5 * virtualDistance, -3 * virtualDistance, -5 * virtualDistance);
////light.position.set(-15 * virtualDistance, -1 * virtualDistance, -15 * virtualDistance);
//// where shall the light source be to see half planet?
//light.position.set(-1 * virtualDistance, -1 * virtualDistance, -15 * virtualDistance);
//scene.add(light);
//var lightX = new IHTMLInput { type = ScriptCoreLib.Shared.HTMLInputTypeEnum.range, min = -60, max = 60, valueAsNumber = 0, title = "lightX" }.AttachToDocument();
//var lightY = new IHTMLInput { type = ScriptCoreLib.Shared.HTMLInputTypeEnum.range, min = -60, max = 60, valueAsNumber = 0, title = "lightY" }.AttachToDocument();
//var lightZ = new IHTMLInput { type = ScriptCoreLib.Shared.HTMLInputTypeEnum.range, min = -60, max = 60, valueAsNumber = 0, title = "lightZ" }.AttachToDocument();
//new IHTMLHorizontalRule { }.AttachToDocument();
// whats WebGLRenderTargetCube do?
// WebGLRenderer preserveDrawingBuffer
var renderer0 = new THREE.WebGLRenderer(
new
{
//antialias = true,
alpha = true,
preserveDrawingBuffer = true
}
);
// https://github.com/mrdoob/three.js/issues/3836
// the construct. white bg
//renderer0.setClearColor(0xfffff, 1);
//renderer0.setClearColor(0x0, 1);
renderer0.setClearColor(0x0, 0);
//renderer.setSize(window.Width, window.Height);
renderer0.setSize(cubefacesize, cubefacesize);
//renderer0.domElement.AttachToDocument();
//rendererPX.domElement.style.SetLocation(0, 0);
//renderer0.domElement.style.SetLocation(4, 4);
// top
// http://stackoverflow.com/questions/27612524/can-multiple-webglrenderers-render-the-same-scene
// need a place to show the cubemap face to GUI
// how does the stereo OTOY do it?
// https://www.opengl.org/wiki/Sampler_(GLSL)
// http://www.richardssoftware.net/Home/Post/25
// [+X, –X, +Y, –Y, +Z, –Z] fa
// move up
//camera.position.set(-1200, 800, 1200);
//var cameraoffset = new THREE.Vector3(0, 15, 0);
// can we aniamte it?
//var cameraoffset = new THREE.Vector3(0, 800, 1200);
// can we have linear animation fromcenter of the map to the edge and back?
// then do the flat earth sun orbit?
var cameraoffset = new THREE.Vector3(
// left?
-512,
// height?
//0,
//1600,
//1024,
// if the camera is in the center, would we need to move the scene?
// we have to move the camera. as we move the scene the lights are messed up
//2014,
1024,
//1200
0
// can we hover top of the map?
);
// original vieworigin
//var cameraoffset = new THREE.Vector3(-1200, 800, 1200);
// whatif we want more than 30sec video? 2min animation? more frames to render? 2gb disk?
var maxfps = 60;
//var maxlengthseconds = 60;
var maxlengthseconds = 120;
var maxframes = maxlengthseconds * maxfps;
var frameIDanimation = new IHTMLInput { type = ScriptCoreLib.Shared.HTMLInputTypeEnum.checkbox, title = "frameIDanimation", @checked = false }.AttachToDocument();
// whatif we want more than 30sec video? 2min animation? more frames to render? 2gb disk?
var frameIDslider = new IHTMLInput { type = ScriptCoreLib.Shared.HTMLInputTypeEnum.range, min = 0, max = maxframes, valueAsNumber = 0, title = "frameIDslider" }.AttachToDocument();
//var frameIDslider = new IHTMLInput { type = ScriptCoreLib.Shared.HTMLInputTypeEnum.range, min = 0, max = 1800, valueAsNumber = 1800 / 2, title = "frameIDslider" }.AttachToDocument();
new IHTMLHorizontalRule { }.AttachToDocument();
var camerax = new IHTMLInput { type = ScriptCoreLib.Shared.HTMLInputTypeEnum.range, min = -32, max = 32, valueAsNumber = 0, title = "camerax" }.AttachToDocument();
camerax.css.after.contentText = "x: ";
new IHTMLBreak { }.AttachToDocument();
//camerax.style.borderLeft = "1em solid red";
// up. whats the most high a rocket can go 120km?
//new IHTMLHorizontalRule { }.AttachToDocument();
// how high is the bunker?
var cameray = new IHTMLInput { type = ScriptCoreLib.Shared.HTMLInputTypeEnum.range, min = -32, max = 32, valueAsNumber = 0, title = "cameray" }.AttachToDocument();
cameray.css.after.contentText = "y: ";
new IHTMLBreak { }.AttachToDocument();
// we wont be going to orbit
//new IHTMLBreak { }.AttachToDocument();
//var camerayHigh = new IHTMLInput { type = ScriptCoreLib.Shared.HTMLInputTypeEnum.range, min = cameray.max, max = 1024 * 256, valueAsNumber = cameray.max, title = "cameray" }.AttachToDocument();
//new IHTMLHorizontalRule { }.AttachToDocument();
//var cameraz = new IHTMLInput { type = ScriptCoreLib.Shared.HTMLInputTypeEnum.range, min = 0 - 2048 * 4, max = 0 + 2048 * 4, valueAsNumber = 0, title = "cameraz" }.AttachToDocument();
//var cameraz = new IHTMLInput { type = ScriptCoreLib.Shared.HTMLInputTypeEnum.range, min = -2048 / 2, max = 0 + 2048 / 2, valueAsNumber = 0, title = "cameraz" }.AttachToDocument();
var cameraz = new IHTMLInput { type = ScriptCoreLib.Shared.HTMLInputTypeEnum.range, min = -32, max = 32, valueAsNumber = 0, title = "cameraz" }.AttachToDocument();
cameraz.css.after.contentText = "z: ";
// for render server
var fcamerax = 0.0;
var fcameray = 0.0;
var fcameraz = 0.0;
new IHTMLHorizontalRule { }.AttachToDocument();
// https://sites.google.com/a/jsc-solutions.net/work/knowledge-base/15-dualvr/20151114/stereo
// not used for this example tho...
var itemRotation = new IHTMLInput { type = ScriptCoreLib.Shared.HTMLInputTypeEnum.range, min = -180, max = 180, valueAsNumber = 0, title = "itemRotation" }.AttachToDocument();
var spriteOffset = new IHTMLInput { type = ScriptCoreLib.Shared.HTMLInputTypeEnum.range, min = 0, max = 11, valueAsNumber = 0, title = "spriteOffset" }.AttachToDocument();
//var itemRotation = new IHTMLInput { type = ScriptCoreLib.Shared.HTMLInputTypeEnum.range, min = -90, max = 90, valueAsNumber = 33, title = "itemRotation" }.AttachToDocument();
//while (await camerax.async.onchange)
//cameray.onchange += delegate
//{
// if (cameray.valueAsNumber < cameray.max)
// camerayHigh.valueAsNumber = camerayHigh.min;
//};
//camerayHigh.onmousedown += delegate
//{
// //if (camerayHigh.valueAsNumber > camerayHigh.min)
// cameray.valueAsNumber = cameray.max;
//};
Action applycameraoffset = delegate
{
// make sure UI and gpu sync up
var cy = cameray;
// we wont be going to orbit
//if (cameray.valueAsNumber < cameray.max)
// camerayHigh.valueAsNumber = camerayHigh.min;
//if (camerayHigh.valueAsNumber > camerayHigh.min)
// cameray.valueAsNumber = cameray.max;
//if (cameray.valueAsNumber == cameray.max)
// cy = camerayHigh;
cameraoffset = new THREE.Vector3(
// left?
1.0 * (camerax + fcamerax),
// height?
//0,
//1600,
//1024,
// if the camera is in the center, would we need to move the scene?
// we have to move the camera. as we move the scene the lights are messed up
//2014,
1.0 * (cy + fcameray),
//1200c
1.0 * (cameraz + fcameraz)
// can we hover top of the map?
);
};
#region y
// need to rotate90?
var cameraNY = new THREE.PerspectiveCamera(fov: 90, aspect: 1.0, near: 1, far: far);
applycameraoffset += delegate
{
cameraNY.position.copy(new THREE.Vector3(0, 0, 0));
cameraNY.lookAt(new THREE.Vector3(0, -1, 0));
cameraNY.position.add(cameraoffset);
};
//cameraNY.lookAt(new THREE.Vector3(0, 1, 0));
var canvasNY = new CanvasRenderingContext2D(cubefacesize, cubefacesize);
canvasNY.canvas.style.SetLocation(cubecameraoffsetx + (int)(uizoom * cubefacesize + 8) * 1, 8 + (int)(uizoom * cubefacesize + 8) * 2);
canvasNY.canvas.title = "NY";
canvasNY.canvas.AttachToDocument();
canvasNY.canvas.style.transformOrigin = "0 0";
// roslyn!
canvasNY.canvas.style.transform = "scale(" + uizoom + ")";
var cameraPY = new THREE.PerspectiveCamera(fov: 90, aspect: 1.0, near: 1, far: far);
applycameraoffset += delegate
{
cameraPY.position.copy(new THREE.Vector3(0, 0, 0));
cameraPY.lookAt(new THREE.Vector3(0, 1, 0));
cameraPY.position.add(cameraoffset);
};
//cameraPY.lookAt(new THREE.Vector3(0, -1, 0));
var canvasPY = new CanvasRenderingContext2D(cubefacesize, cubefacesize);
canvasPY.canvas.style.SetLocation(cubecameraoffsetx + (int)(uizoom * cubefacesize + 8) * 1, 8 + (int)(uizoom * cubefacesize + 8) * 0);
canvasPY.canvas.title = "PY";
canvasPY.canvas.AttachToDocument();
canvasPY.canvas.style.transformOrigin = "0 0";
canvasPY.canvas.style.transform = "scale(" + uizoom + ")";
#endregion
// transpose xz?
#region x
var cameraNX = new THREE.PerspectiveCamera(fov: 90, aspect: 1.0, near: 1, far: far);
applycameraoffset += delegate
{
cameraNX.position.copy(new THREE.Vector3(0, 0, 0));
cameraNX.lookAt(new THREE.Vector3(0, 0, 1));
cameraNX.position.add(cameraoffset);
};
//cameraNX.lookAt(new THREE.Vector3(0, 0, -1));
//cameraNX.lookAt(new THREE.Vector3(-1, 0, 0));
//cameraNX.lookAt(new THREE.Vector3(1, 0, 0));
var canvasNX = new CanvasRenderingContext2D(cubefacesize, cubefacesize);
canvasNX.canvas.style.SetLocation(cubecameraoffsetx + (int)(uizoom * cubefacesize + 8) * 2, 8 + (int)(uizoom * cubefacesize + 8) * 1);
canvasNX.canvas.title = "NX";
canvasNX.canvas.AttachToDocument();
canvasNX.canvas.style.transformOrigin = "0 0";
canvasNX.canvas.style.transform = "scale(" + uizoom + ")";
var cameraPX = new THREE.PerspectiveCamera(fov: 90, aspect: 1.0, near: 1, far: far);
applycameraoffset += delegate
{
cameraPX.position.copy(new THREE.Vector3(0, 0, 0));
cameraPX.lookAt(new THREE.Vector3(0, 0, -1));
cameraPX.position.add(cameraoffset);
};
//cameraPX.lookAt(new THREE.Vector3(0, 0, 1));
//cameraPX.lookAt(new THREE.Vector3(1, 0, 0));
//cameraPX.lookAt(new THREE.Vector3(-1, 0, 0));
var canvasPX = new CanvasRenderingContext2D(cubefacesize, cubefacesize);
canvasPX.canvas.style.SetLocation(cubecameraoffsetx + (int)(uizoom * cubefacesize + 8) * 0, 8 + (int)(uizoom * cubefacesize + 8) * 1);
canvasPX.canvas.title = "PX";
canvasPX.canvas.AttachToDocument();
canvasPX.canvas.style.transformOrigin = "0 0";
canvasPX.canvas.style.transform = "scale(" + uizoom + ")";
#endregion
// lets have the item twice the cube item size. and offset -0.5 to recenter.
// this wont work as we are cloning the buffer for now!
//var canvasPXitem = new CanvasRenderingContext2D(cubefacesize, cubefacesize * 2);
var canvasPXitem = new CanvasRenderingContext2D(cubefacesize, cubefacesize);
canvasPXitem.canvas.style.SetLocation(cubecameraoffsetx + (int)(uizoom * cubefacesize + 8) * 0, 8 + (int)(uizoom * cubefacesize + 8) * 2);
canvasPXitem.canvas.title = "item";
canvasPXitem.canvas.AttachToDocument();
canvasPXitem.canvas.style.transformOrigin = "0 0";
canvasPXitem.canvas.style.transform = "scale(" + uizoom + ")";
canvasPXitem.canvas.style.border = "1px solid yellow";
//canvasPXitem.fillText("hello", 1, 1, cubefacesize);
//canvasPXitem.drawImage(
// //new IHTMLPre { "hello" }
// new IHTMLDiv { "hello world. can we draw html into 360 VR yet?" }, 0, 0, cubefacesize, cubefacesize
//);
// http://www.w3schools.com/tags/canvas_fillstyle.asp
canvasPXitem.fillStyle = "red";
// too big?
//canvasPXitem.fillRect(
// x: cubefacesize / 3,
// y: cubefacesize / 4,
// w: cubefacesize / 3,
// h: cubefacesize / 2
//);
// canvasPXitem.fillRect(
// x: (cubefacesize - cubefacesize / 6) / 2,
// y: (cubefacesize - cubefacesize / 3) / 2,
// w: cubefacesize / 6,
// h: cubefacesize / 3
//);
#region z
var cameraNZ = new THREE.PerspectiveCamera(fov: 90, aspect: 1.0, near: 1, far: far);
//cameraNZ.lookAt(new THREE.Vector3(0, 0, -1));
applycameraoffset += delegate
{
cameraNZ.position.copy(new THREE.Vector3(0, 0, 0));
cameraNZ.lookAt(new THREE.Vector3(1, 0, 0));
cameraNZ.position.add(cameraoffset);
};
//cameraNX.lookAt(new THREE.Vector3(-1, 0, 0));
//cameraNZ.lookAt(new THREE.Vector3(0, 0, 1));
var canvasNZ = new CanvasRenderingContext2D(cubefacesize, cubefacesize);
canvasNZ.canvas.style.SetLocation(cubecameraoffsetx + (int)(uizoom * cubefacesize + 8) * 3, 8 + (int)(uizoom * cubefacesize + 8) * 1);
canvasNZ.canvas.title = "NZ";
canvasNZ.canvas.AttachToDocument();
canvasNZ.canvas.style.transformOrigin = "0 0";
canvasNZ.canvas.style.transform = "scale(" + uizoom + ")";
var cameraPZ = new THREE.PerspectiveCamera(fov: 90, aspect: 1.0, near: 1, far: far);
//cameraPZ.lookAt(new THREE.Vector3(1, 0, 0));
applycameraoffset += delegate
{
cameraPZ.position.copy(new THREE.Vector3(0, 0, 0));
cameraPZ.lookAt(new THREE.Vector3(-1, 0, 0));
cameraPZ.position.add(cameraoffset);
};
//cameraPZ.lookAt(new THREE.Vector3(0, 0, 1));
//cameraPZ.lookAt(new THREE.Vector3(0, 0, -1));
var canvasPZ = new CanvasRenderingContext2D(cubefacesize, cubefacesize);
canvasPZ.canvas.style.SetLocation(cubecameraoffsetx + (int)(uizoom * cubefacesize + 8) * 1, 8 + (int)(uizoom * cubefacesize + 8) * 1);
canvasPZ.canvas.title = "PZ";
canvasPZ.canvas.AttachToDocument();
canvasPZ.canvas.style.transformOrigin = "0 0";
canvasPZ.canvas.style.transform = "scale(" + uizoom + ")";
#endregion
// c++ alias locals would be nice..
var canvas0 = (IHTMLCanvas)renderer0.domElement;
var old = new
{
CursorX = 0,
CursorY = 0
};
var st = new Stopwatch();
st.Start();
//canvas0.css.active.style.cursor = IStyle.CursorEnum.move;
// X:\jsc.svn\examples\javascript\Test\TestMouseMovement\TestMouseMovement\Application.cs
// THREE.WebGLProgram: gl.getProgramInfoLog() C:\fakepath(78,3-98): warning X3557: loop only executes for 1 iteration(s), forcing loop to unroll
// THREE.WebGLProgram: gl.getProgramInfoLog() (79,3-98): warning X3557: loop only executes for 1 iteration(s), forcing loop to unroll
// http://www.roadtovr.com/youtube-confirms-stereo-3d-360-video-support-coming-soon/
// https://www.youtube.com/watch?v=D-Wl9jAB45Q
#region spherical
var gl = new WebGLRenderingContext(alpha: true, preserveDrawingBuffer: true);
var c = gl.canvas.AttachToDocument();
// 3840x2160
//c.style.SetSize(3840, 2160);
// https://sites.google.com/a/jsc-solutions.net/work/knowledge-base/15-dualvr/20150722/360-youtube
// bots cannot get a bigger mp4 from yt, and vrideo renders 2k on gearvr.
c.width = 3840;
c.height = 2160;
//c.width = 3840 * 2;
//c.height = 2160 * 2;
//c.width = 3840;
//c.height = 2160;
// 1,777777777777778
// https://www.youtube.com/watch?v=fTfJwzRsE-w
//c.width = 7580;
//c.height = 3840;
//1,973958333333333
//7580
// 3840
// wont work
//c.width = 8192;
//c.height = 4096;
// this has the wrong aspect?
//c.width = 6466;
//c.height = 3232;
new IHTMLPre { new { c.width, c.height } }.AttachToDocument();
//6466x3232
//var suizoom = 720f / c.height;
//var suizoom = 360f / c.height;
var suizoom = 480f / c.width;
c.style.transformOrigin = "0 0";
c.style.transform = "scale(" + suizoom + ")";
//c.style.backgroundColor = "yellow";
c.style.position = IStyle.PositionEnum.absolute;
c.style.SetLocation(8 + (int)(uizoom * cubefacesize + 8) * 0, 8 + (int)(uizoom * cubefacesize + 8) * 3);
var pass = new CubeToEquirectangular.Library.ShaderToy.EffectPass(
null,
gl,
precission: CubeToEquirectangular.Library.ShaderToy.DetermineShaderPrecission(gl),
supportDerivatives: gl.getExtension("OES_standard_derivatives") != null,
callback: null,
obj: null,
forceMuted: false,
forcePaused: false,
//quadVBO: Library.ShaderToy.createQuadVBO(gl, right: 0, top: 0),
outputGainNode: null
);
// how shall we upload our textures?
// can we reference GLSL.samplerCube yet?
//pass.mInputs[0] = new samplerCube { };
pass.mInputs[0] = new CubeToEquirectangular.Library.ShaderToy.samplerCube { };
pass.MakeHeader_Image();
var vs = new Shaders.ProgramFragmentShader();
pass.NewShader_Image(vs);
#endregion
//var frame0 = new HTML.Images.FromAssets.tiles_regrid().AttachToDocument();
var frame0 = new HTML.Images.FromAssets.galaxy_starfield().AttachToDocument();
//var frame0 = new HTML.Images.FromAssets.galaxy_starfield150FOV().AttachToDocument();
//var xor = new HTML.Images.FromAssets.Orion360_test_image_8192x4096().AttachToDocument();
//var xor = new HTML.Images.FromAssets._2_no_clouds_4k().AttachToDocument();
//var frame0 = new HTML.Images.FromAssets._2294472375_24a3b8ef46_o().AttachToDocument();
// 270px
//xor.style.height = "";
frame0.style.height = "270px";
frame0.style.width = "480px";
frame0.style.SetLocation(
8 + (int)(uizoom * cubefacesize + 8) * 0 + 480 + 16, 8 + (int)(uizoom * cubefacesize + 8) * 3);
var frame2 = new HTML.Images.FromAssets.galaxy_starfield().AttachToDocument();
frame2.style.height = "270px";
frame2.style.width = "480px";
frame2.style.SetLocation(
8 + (int)(uizoom * cubefacesize + 8) * 0 + 480 * 2 + 16 * 2, 8 + (int)(uizoom * cubefacesize + 8) * 3);
#region DirectoryEntry
var dir = default(DirectoryEntry);
new IHTMLButton { "openDirectory" }.AttachToDocument().onclick += async delegate
{
dir = (DirectoryEntry)await chrome.fileSystem.chooseEntry(new { type = "openDirectory" });
};
frame0.style.cursor = IStyle.CursorEnum.pointer;
frame0.title = "save frame";
frame0.onclick += delegate
{
// http://paulbourke.net/papers/vsmm2006/vsmm2006.pdf
// A method of creating synthetic stereoscopic panoramic images that can be implemented
//in most rendering packages has been presented. If single panoramic pairs can be created
//then stereoscopic panoramic movies are equally possible giving rise to the prospect of
//movies where the viewer can interact with, at least with regard to what they choose to look
//at.These images can be projected so as to engage the two features of the human visual
//system that assist is giving us a sense of immersion, the feeling of “being there”. That is,
//imagery that contains parallax information as captured from two horizontally separated eye
//positions (stereopsis)and imagery that fills our peripheral vision.The details that define
//how the two panoramic images should be created in rendering packages are provided, in
//particular, how to precisely configure the virtual cameras and control the distance to zero
//parallax.
// grab a frame
if (dir == null)
{
// not exporting to file system?
var f0 = new IHTMLImage { src = gl.canvas.toDataURL() };
//var f0 = (IHTMLImage)gl.canvas;
//var f0 = (IHTMLImage)gl.canvas;
//var base64 = gl.canvas.toDataURL();
//frame0.src = base64;
frame0.src = f0.src;
// 7MB!
return;
}
// // ---------------------------
//IrfanView
//---------------------------
//Warning !
//The file: "X:\vr\tape1\0001.jpg" is a PNG file with incorrect extension !
//Rename ?
//---------------------------
//Yes No
//---------------------------
// haha this will render the thumbnail.
//dir.WriteAllBytes("0000.png", frame0);
//dir.WriteAllBytes("0000.png", gl.canvas);
var glsw = Stopwatch.StartNew();
dir.WriteAllBytes("0000.png", gl);
new IHTMLPre { new { glsw.ElapsedMilliseconds } }.AttachToDocument();
// {{ ElapsedMilliseconds = 1548 }}
// 3.7MB
// 3840x2160
};
#endregion
var vsync = default(TaskCompletionSource<object>);
// "Z:\jsc.svn\examples\javascript\WebGL\WebGLColladaExperiment\WebGLColladaExperiment\WebGLColladaExperiment.csproj"
// asus will hang
// https://3dwarehouse.sketchup.com/model.html?id=fb7a0448d940e575edc01389f336fb0a
// can we get one frame into vr?
// cube: mesh to cast shadows
//{
// var planeGeometry0 = new THREE.PlaneGeometry(cubefacesize, cubefacesize, 8, 8);
// var floor2 = new THREE.Mesh(planeGeometry0,
// //new THREE.MeshPhongMaterial(new { ambient = 0x101010, color = 0xA26D41, specular = 0xA26D41, shininess = 1 })
// //new THREE.MeshPhongMaterial(new { ambient = 0x101010, color = 0xff0000, specular = 0xA26D41, shininess = 1 })
// //new THREE.MeshPhongMaterial(new { ambient = 0xff0000, color = 0xff0000, specular = 0xff0000 })
// new THREE.MeshPhongMaterial(new { ambient = 0xff0000, color = 0xff0000 })
// );
// floor2.position.set(0, 0, -cubefacesize / 2);
// floor2.AttachTo(scene);
//}
//{
// var planeGeometry0 = new THREE.PlaneGeometry(cubefacesize, cubefacesize, 8, 8);
// var floor2 = new THREE.Mesh(planeGeometry0,
// //new THREE.MeshPhongMaterial(new { ambient = 0x101010, color = 0xA26D41, specular = 0xA26D41, shininess = 1 })
// //new THREE.MeshPhongMaterial(new { ambient = 0x101010, color = 0xff0000, specular = 0xA26D41, shininess = 1 })
// //new THREE.MeshPhongMaterial(new { ambient = 0xff0000, color = 0xff0000, specular = 0xff0000 })
// new THREE.MeshPhongMaterial(new { ambient = 0x0000ff, color = 0x0000ff })
// );
// floor2.position.set(-cubefacesize / 2, 0, 0);
// floor2.rotateOnAxis(new THREE.Vector3(0, 1, 0), Math.PI / 2);
// floor2.AttachTo(scene);
//}
//var tex0 = new THREE.Texture { image = new moon(), needsUpdate = true };
//var tex0 = new THREE.Texture(new moon());
//var tex0 = new THREE.Texture(new moon()) { needsUpdate = true };
var texPXitem = new THREE.Texture(
//shader1canvas
canvasPXitem.canvas
) { needsUpdate = true };
var planeGeometry0 = new THREE.PlaneGeometry(cubefacesize, cubefacesize, 8, 8);
var floor2 = new THREE.Mesh(planeGeometry0,
//new THREE.MeshPhongMaterial(new { ambient = 0x101010, color = 0xA26D41, specular = 0xA26D41, shininess = 1 })
//new THREE.MeshPhongMaterial(new { ambient = 0x101010, color = 0xff0000, specular = 0xA26D41, shininess = 1 })
//new THREE.MeshPhongMaterial(new { ambient = 0xff0000, color = 0xff0000, specular = 0xff0000 })
new THREE.MeshPhongMaterial(
new
{
map = texPXitem,
transparent = true,
alphaTest = 0.5
//ambient = 0x00ff00,
//color = 0x00ff00
})
);
//floor2.position.set(0, 0, -cubefacesize * 0.55);
floor2.AttachTo(scene);
applycameraoffset += delegate
{
texPXitem.needsUpdate = true;
//floor2.position.set(-cubefacesize * 0.5, 0, 0);
//floor2.position.set(-cubefacesize * 0.33, 0, 0);
// floor2.position.set(-cubefacesize * 0.25, 0, 0);
//floor2.position.set(-cubefacesize * 0.225, 0, 0);
floor2.position.set(-cubefacesize * 0.23, 0, 0);
// too close!
//floor2.position.set(-cubefacesize * 0.20, 0, 0);
floor2.rotation.set(0, 0, 0);
floor2.rotateOnAxis(new THREE.Vector3(0, 1, 0), Math.PI / 2 + radians(itemRotation.valueAsNumber));
};
// X:\jsc.svn\examples\javascript\chrome\apps\ChromeEarth\ChromeEarth\Application.cs
// X:\jsc.svn\examples\javascript\canvas\ConvertBlackToAlpha\ConvertBlackToAlpha\Application.cs
// hidden for alpha AppWindows
//#if FBACKGROUND
new IHTMLBreak { }.AttachToDocument();
var iskybox2 = new HTML.Images.FromAssets._2massAllskyGAMMA();
var iskybox1 = new HTML.Images.FromAssets.anvil___spherical_hdri_panorama_skybox_by_macsix_d6vv4hs();
var hideskybox1 = new IHTMLInput { type = ScriptCoreLib.Shared.HTMLInputTypeEnum.checkbox, title = "hide skybox1", @checked = true }.AttachToDocument();
var hideskybox2 = new IHTMLInput { type = ScriptCoreLib.Shared.HTMLInputTypeEnum.checkbox, title = "hide skybox2", @checked = false }.AttachToDocument();
#region drawStereoFrame
Func<CanvasRenderingContext2D, Task> drawStereoFrame = async canvasTB =>
{
//var xIPD = 4.0;
var xIPD = 6.0;
// https://sites.google.com/a/jsc-solutions.net/work/knowledge-base/15-dualvr/20151203/x360stereomidnightsun
// fake skybox?
canvasTB.fillStyle = "darkcyan";
canvasTB.fillRect(0, 0, c.width, c.height);
//canvasTB.drawImage(stereoT, 0, 0, c.width, c.height, 0, 0, c.width, c.height / 2);
//canvasTB.drawImage(stereoB, 0, 0, c.width, c.height, 0, c.height / 2, c.width, c.height / 2);
// 12 frames in total. lets add em all
// can we add a secondary stereo frame ? at 45deg?
var offsetrotation = 360 / 12;
hideskybox1.@checked = true;
hideskybox2.@checked = false;
// mono bg!
floor2.visible = false;
fcamerax = 0;
await Native.window.async.onframe;
await Native.window.async.onframe;
canvasTB.drawImage(gl.canvas, 0, 0, c.width, c.height, 0, 0, c.width, c.height / 2);
canvasTB.drawImage(gl.canvas, 0, 0, c.width, c.height, 0, c.height / 2, c.width, c.height / 2);
// keep only bg. hide stereo sprite
floor2.visible = true;
//await Native.window.async.onframe;
// we need our stereo item frame thanks. no bg.
hideskybox1.@checked = true;
hideskybox2.@checked = true;
await Native.window.async.onframe;
//fcamerax = -xIPD;
//await Native.window.async.onframe;
//var stereoT = new IHTMLImage { src = gl.canvas.toDataURL() };
//fcamerax = +xIPD;
//await Native.window.async.onframe;
//var stereoB = new IHTMLImage { src = gl.canvas.toDataURL() };
////await Native.window.async.onframe;
//await stereoB.async.oncomplete;
// we now have a stereo sprite.
// can we rotate it on top of the background?
// 8K fulldome is a resolution of 8192×8192
// 8K UHD is a resolution of 7680 × 4320 (33.2 megapixels)
// 8192×4320 t
// Digital video formats with resolutions of 4K (3840×2160) and 8K (7680×4320)
// WebGL: CONTEXT_LOST_WEBGL: loseContext: context lost ?
for (int stereoframei = 0; stereoframei < 12; stereoframei++)
{
spriteOffset.valueAsNumber = stereoframei;
Console.WriteLine(new { stereoframei });
double ioffsetdeg = offsetrotation * stereoframei;
ioffsetdeg += (degrees(frameIDslider.valueAsNumber / (60 * 60 / 5.0) * Math.PI * 2));
// follow the moon?
//stars.rotateOnAxis(new THREE.Vector3(0, -1, 0),
// frameIDslider.valueAsNumber / (60 * 60 / 5.0) * Math.PI * 2
//);
var ipxoffset = (int)Math.Floor(c.width * ioffsetdeg / 360);
ipxoffset = ipxoffset % c.width;
fcamerax = -xIPD;
await Native.window.async.onframe;
var stereoT = gl.canvas;
canvasTB.drawImage(stereoT, 0, 0, c.width, c.height, ipxoffset, 0, c.width, c.height / 2);
canvasTB.drawImage(stereoT, 0, 0, c.width, c.height, -c.width + ipxoffset, 0, c.width, c.height / 2);
fcamerax = +xIPD;
await Native.window.async.onframe;
var stereoB = gl.canvas;
canvasTB.drawImage(stereoB, 0, 0, c.width, c.height, ipxoffset, c.height / 2, c.width, c.height / 2);
canvasTB.drawImage(stereoB, 0, 0, c.width, c.height, -c.width + ipxoffset, c.height / 2, c.width, c.height / 2);
}
//var canvasTB8K = new CanvasRenderingContext2D(c.width * 2, c.height * 2);
//canvasTB8K.drawImage(f0, 0, 0, c.width, c.height, 0, 0, c.width * 2, c.height);
//canvasTB8K.drawImage(f1, 0, 0, c.width, c.height, 0, c.height, c.width * 2, c.height);
// https://www.reddit.com/r/GearVR/comments/2vrfyu/id_suggest_makers_of_360_videos_make_them_the/
// https://sites.google.com/a/jsc-solutions.net/work/knowledge-base/15-dualvr/20151114/stereo
// https://sites.google.com/a/jsc-solutions.net/work/knowledge-base/15-dualvr/20151203
// can we actually watch stereo _TB images on gearVR?
};
#endregion
#region stero
// https://sites.google.com/a/jsc-solutions.net/work/knowledge-base/15-dualvr/20151114/stereo
// https://sites.google.com/a/jsc-solutions.net/work/knowledge-base/15-dualvr/20151112
new IHTMLButton { "make me a stero TB image " }.AttachToDocument().With(
async e =>
{
// http://www.vrideo.com/watch/ALdE7mm
// https://www.youtube.com/watch?v=S3iTPxMIlCI
var onclick = e.async.onclick;
while (await onclick)
{
// keep it 4K, as hw, yt is not ready for 60fps 8K!
var canvasTB = new CanvasRenderingContext2D(c.width, c.height);
drawStereoFrame(canvasTB);
// gearVR will get a black screen
//
//frame2.src = canvasTB8K.canvas.toDataURL();
frame2.src = canvasTB.canvas.toDataURL();
onclick = e.async.onclick;
//while (!onclick.IsCompleted)
//{
// await Task.Delay(1000 / 30);
// frame0.src = f0.src;
// await Task.Delay(1000 / 30);
// frame0.src = f1.src;
//}
}
}
);
#endregion
#region render 60hz 30sec
new IHTMLButton {
//"render 60hz 30sec"
//$"render {maxfps}hz {maxlengthseconds}sec"
"render " + new {maxfps} + "hz " + new {maxlengthseconds} + "sec"
}.AttachToDocument().onclick += async e =>
{
e.Element.disabled = true;
//var canvasTB = new CanvasRenderingContext2D(c.width * 2, c.height * 2);
var canvasTB = new CanvasRenderingContext2D(c.width, c.height);
var total = Stopwatch.StartNew();
var status = "rendering... " + new { dir };
new IHTMLPre { () => status }.AttachToDocument();
if (dir == null)
{
//dir = (DirectoryEntry)await chrome.fileSystem.chooseEntry(new { type = "openDirectory" });
}
total.Restart();
//vsync = new TaskCompletionSource<object>();
//await vsync.Task;
status = "rendering... vsync";
//var frameid = 0;
//frameIDanimation.@checked = true;
frameIDslider.valueAsNumber = -1;
// allow the animation values to sink in
//vsync = new TaskCompletionSource<object>();
//await vsync.Task;
goto beforeframe;
// parallax offset?
await_nextframe:
var filename = frameIDslider.valueAsNumber.ToString().PadLeft(5, '0') + ".jpg";
status = "rendering... " + new { filename };
await drawStereoFrame(canvasTB);
//var xIPD = 4.0;
//// left eye
//fcamerax = -xIPD;
//vsync = new TaskCompletionSource<object>();
//await vsync.Task;
//var f0 = new IHTMLImage { src = gl.canvas.toDataURL() };
//// right eye
//fcamerax = +xIPD;
//vsync = new TaskCompletionSource<object>();
//await vsync.Task;
//var f1 = new IHTMLImage { src = gl.canvas.toDataURL() };
//await f1.async.oncomplete;
//canvasTB.drawImage(f0, 0, 0, c.width, c.height, 0, 0, c.width * 2, c.height);
//canvasTB.drawImage(f1, 0, 0, c.width, c.height, 0, c.height, c.width * 2, c.height);
// frame0 has been rendered
var swcapture = Stopwatch.StartNew();
status = "WriteAllBytes... " + new { filename };
//await Native.window.async.onframe;
// https://code.google.com/p/chromium/issues/detail?id=404301
if (dir == null)
{
frame2.src = canvasTB.canvas.toDataURL();
await Task.Delay(500);
}
else
await dir.WriteAllBytes(filename, canvasTB);
//await dir.WriteAllBytes(filename, gl);
//await dir.WriteAllBytes(filename, gl.canvas);
status = "WriteAllBytes... done " + new { fcamerax, filename, swcapture.ElapsedMilliseconds };
status = "rdy " + new { filename, fcamerax };
//await Native.window.async.onframe;
// design mode v render mode
if (cubefacesize < cubefacesizeMAX)
frameIDslider.valueAsNumber += 60;
else
frameIDslider.valueAsNumber++;
beforeframe:
// speed? S6 slow motion?
// this is really slow. if we do x4x2 =x8
// https://www.youtube.com/watch?v=r76ULW16Ib8
//fcamerax += 16 * (1.0 / 60.0);
// fcamerax = radius * Math.Cos(Math.PI * (frameid - (60 * 30 / 2f)) / (60 * 30 / 2f));
// speed? S6 slow motion?
// this is really slow. if we do x4x2 =x8
// https://www.youtube.com/watch?v=r76ULW16Ib8
//fcamerax += 16 * (1.0 / 60.0);
// some shaders need to know where the camera is looking from. can we tell them?
//fcamerax = 2.2 * Math.Sin(Math.PI * (frameIDslider.valueAsNumber - (60 * 30 / 2f)) / (60 * 30 / 2f));
//fcameraz = 4.4 * Math.Cos(Math.PI * (frameIDslider.valueAsNumber - (60 * 30 / 2f)) / (60 * 30 / 2f));
//// up
//fcameray = 4.4 * Math.Cos(Math.PI * (frameIDslider.valueAsNumber - (60 * 30 / 2f)) / (60 * 30 / 2f));
// cameraz.valueAsNumber = (int)(cameraz.max * Math.Sin(Math.PI * (frameid - (60 * 30 / 2f)) / (60 * 30 / 2f)));
// up
//fcameray = 128 * Math.Cos(Math.PI * (frameid - (60 * 30 / 2f)) / (60 * 30 / 2f));
//fcamerax += (1.0 / 60.0);
//fcamerax += (1.0 / 60.0) * 120;
// 60hz 30sec
if (frameIDslider.valueAsNumber < maxframes)
{
// Blob GC? either this helms or the that we made a Blob static.
await Task.Delay(11);
goto await_nextframe;
}
total.Stop();
status = "all done " + new { frameid = frameIDslider.valueAsNumber, total.ElapsedMilliseconds };
vsync = default(TaskCompletionSource<object>);
// http://stackoverflow.com/questions/22899333/delete-javascript-blobs
e.Element.disabled = false;
};
#endregion
new { }.With(
async delegate
{
var tex1 = new the_midnight_sun_by_isilmetriel { };
await tex1.async.oncomplete;
// first one is 124, while others is 123?
var tex1w = 123;
//var tex1w = 120;
var tex1h = 626;
//canvasPXitem.drawImage(
// tex1, 2, 2, tex1w, tex1h, 0, 0, tex1w, tex1h
// );
// how long until jsc can upstream small updates to code?
//// canvasPXitem.drawImage(
//// (IHTMLCanvas)renderer0.domElement,
//// sx: (cubefacesize - cubefacesize / 6) / 2,
//// sy: (cubefacesize - cubefacesize / 3) / 2,
//// sw: cubefacesize / 6,
//// sh: cubefacesize / 3,
//// dx: (cubefacesize - cubefacesize / 6) / 2,
//// dy: (cubefacesize - cubefacesize / 3) / 2,
//// dw: cubefacesize / 6,
//// dh: cubefacesize / 3
////);
await iskybox2.async.oncomplete;
var bytes1 = await iskybox1.async.bytes;
//for (int ii = 0; ii < bytes.Length; ii += 4)
//{
// bytes[ii + 3] = (byte)(bytes[ii + 0]);
// bytes[ii + 0] = 0xff;
// bytes[ii + 1] = 0xff;
// bytes[ii + 2] = 0xff;
//}
var cc = new CanvasRenderingContext2D(iskybox1.width, iskybox1.height);
cc.bytes = bytes1;
//s.image = cc;
//s.needsUpdate = true;
var skybox1_material = new THREE.MeshBasicMaterial(
new
{
//map = THREE.ImageUtils.loadTexture(new galaxy_starfield().src),
map = new THREE.Texture { image = cc, needsUpdate = true },
side = THREE.BackSide,
transparent = true
});
var skybox1 = new THREE.Mesh(
//new THREE.SphereGeometry(far * 0.92, 64, 64),
//new THREE.SphereGeometry(far * 0.80, 64, 64),
// still zfighting
//new THREE.SphereGeometry(far * 0.50, 64, 64),
// the other option is to have a single bg and blend on tht. this is just a rotation visualization.
new THREE.SphereGeometry(far * 0.30, 64, 64),
skybox1_material
);
// http://stackoverflow.com/questions/8502150/three-js-how-can-i-dynamically-change-objects-opacity
//(stars_material as dynamic).opacity = 0.5;
hideskybox1.onchange += delegate
{
skybox1.visible = !hideskybox1.@checked;
};
skybox1.visible = !hideskybox1.@checked;
scene.add(skybox1);
applycameraoffset += delegate
{
if (frameIDanimation.@checked)
{
itemRotation.valueAsNumber = (frameIDslider.valueAsNumber / 2) % 360 - 180;
hideskybox1.@checked = (frameIDslider.valueAsNumber / 2 + 180) % 720 < 360;
}
};
// target bg
var skybox2 = new THREE.Mesh(
new THREE.SphereGeometry(far * 0.95, 64, 64),
new THREE.MeshBasicMaterial(
new
{
map = new THREE.Texture { image = iskybox2, needsUpdate = true },
side = THREE.BackSide,
transparent = true
})
);
skybox2.AttachTo(scene).With(
stars =>
{
applycameraoffset += delegate
{
skybox2.visible = !hideskybox2.@checked;
skybox1.rotation.set(0, 0, 0);
// spin
skybox1.rotateOnAxis(new THREE.Vector3(0, -1, 0),
frameIDslider.valueAsNumber / (60 * 60 / 5.0) * Math.PI * 2
);
// reset
stars.rotation.set(0, 0, 0);
// slow rotate in place
stars.rotateOnAxis(new THREE.Vector3(1, 0, 0),
frameIDslider.valueAsNumber / 3600.0 * Math.PI * 2
);
// follow the moon?
stars.rotateOnAxis(new THREE.Vector3(0, -1, 0),
frameIDslider.valueAsNumber / (60 * 60 / 5.0) * Math.PI * 2
);
};
}
);
// can we get our stereo sprite this way?
// do we get clean tiles with transparency?
// on x83 on frame0 we were able to hide skybox. how?
//hideskybox2.onchange += delegate
//{
// skybox2.visible = !hideskybox2.@checked;
//};
//skybox2.visible = !hideskybox2.@checked;
Console.WriteLine("skybox added");
//dae.position.y = -80;
//dae.AttachTo(sceneg);
//scene.add(dae);
//oo.Add(dae);
// view-source:http://threejs.org/examples/webgl_multiple_canvases_circle.html
// https://threejsdoc.appspot.com/doc/three.js/src.source/extras/cameras/CubeCamera.js.html
Native.window.onframe +=
e =>
{
// let render man know..
if (vsync != null)
if (vsync.Task.IsCompleted)
return;
//if (pause) return;
//if (pause.@checked)
// return;
// can we float out of frame?
// haha. a bit too flickery.
//dae.position.x = Math.Sin(e.delay.ElapsedMilliseconds * 0.01) * 50.0;
//dae.position.x = Math.Sin(e.delay.ElapsedMilliseconds * 0.001) * 190.0;
//globesphere.position.y = Math.Sin(fcamerax * 0.001) * 90.0;
//clouds.position.y = Math.Cos(fcamerax * 0.001) * 90.0;
//sphere.rotation.y += speed;
//clouds.rotation.y += speed;
// manual rebuild?
// red compiler notifies laptop chrome of pending update
// app reloads
applycameraoffset();
renderer0.clear();
// spriteOffset
canvasPXitem.drawImage(
tex1,
//2px black border!
//((tex1w + 4) * spriteOffset.valueAsNumber) + 2,
((tex1w + 2) * spriteOffset.valueAsNumber) + 3,
2, tex1w, tex1h,
// dest
(cubefacesize - tex1w) / 2,
(cubefacesize - tex1h) / 2,
tex1w, tex1h
);
//rendererPY.clear();
//cameraPX.aspect = canvasPX.aspect;
//cameraPX.updateProjectionMatrix();
// um what does this do?
//cameraPX.position.z += (z - cameraPX.position.z) * e.delay.ElapsedMilliseconds / 200.0;
// mousewheel allos the camera to move closer
// once we see the frame in vr, can we udp sync vr tracking back to laptop?
//this.targetPX.x += 1;
//this.targetNX.x -= 1;
//this.targetPY.y += 1;
//this.targetNY.y -= 1;
//this.targetPZ.z += 1;
//this.targetNZ.z -= 1;
// how does the 360 or shadertoy want our cubemaps?
// and then rotate right?
// how can we render cubemap?
// hide everything else
// inversion effect?
//// if (hideskybox1.@checked)
//// skybox1.visible = true;
//// else
//// skybox1.visible = false;
//// floor2.visible = false;
//// renderer0.render(scene, cameraPX);
//// //canvasPXitem.drawImage((IHTMLCanvas)renderer0.domElement, 0, 0, cubefacesize, cubefacesize);
// https://sites.google.com/a/jsc-solutions.net/work/knowledge-base/15-dualvr/20151203
// can we draw from that special image?
//canvasPXitem.drawImage(
// tex1, 2, 2, 124, 630 - 4, 0, 0, 124, 626
//);
//// canvasPXitem.drawImage(
//// (IHTMLCanvas)renderer0.domElement,
//// sx: (cubefacesize - cubefacesize / 6) / 2,
//// sy: (cubefacesize - cubefacesize / 3) / 2,
//// sw: cubefacesize / 6,
//// sh: cubefacesize / 3,
//// dx: (cubefacesize - cubefacesize / 6) / 2,
//// dy: (cubefacesize - cubefacesize / 3) / 2,
//// dw: cubefacesize / 6,
//// dh: cubefacesize / 3
////);
//// skybox1.visible = !hideskybox1.@checked;
//// floor2.visible = true;
#region x
canvasPX.clearRect(0, 0, cubefacesize, cubefacesize);
// upside down?
renderer0.render(scene, cameraPX);
canvasPX.drawImage((IHTMLCanvas)renderer0.domElement, 0, 0, cubefacesize, cubefacesize);
canvasNX.clearRect(0, 0, cubefacesize, cubefacesize);
renderer0.render(scene, cameraNX);
canvasNX.drawImage((IHTMLCanvas)renderer0.domElement, 0, 0, cubefacesize, cubefacesize);
#endregion
#region z
canvasPZ.clearRect(0, 0, cubefacesize, cubefacesize);
renderer0.render(scene, cameraPZ);
canvasPZ.drawImage((IHTMLCanvas)renderer0.domElement, 0, 0, cubefacesize, cubefacesize);
canvasNZ.clearRect(0, 0, cubefacesize, cubefacesize);
renderer0.render(scene, cameraNZ);
canvasNZ.drawImage((IHTMLCanvas)renderer0.domElement, 0, 0, cubefacesize, cubefacesize);
#endregion
#region y
canvasPY.clearRect(0, 0, cubefacesize, cubefacesize);
renderer0.render(scene, cameraPY);
//canvasPY.save();
//canvasPY.translate(0, size);
//canvasPY.rotate((float)(-Math.PI / 2));
canvasPY.drawImage((IHTMLCanvas)renderer0.domElement, 0, 0, cubefacesize, cubefacesize);
//canvasPY.restore();
canvasNY.clearRect(0, 0, cubefacesize, cubefacesize);
renderer0.render(scene, cameraNY);
//canvasNY.save();
//canvasNY.translate(size, 0);
//canvasNY.rotate((float)(Math.PI / 2));
canvasNY.drawImage((IHTMLCanvas)renderer0.domElement, 0, 0, cubefacesize, cubefacesize);
//canvasNY.restore();
// ?
#endregion
//renderer0.render(scene, cameraPX);
//rendererPY.render(scene, cameraPY);
// at this point we should be able to render the sphere texture
//public const uint TEXTURE_CUBE_MAP_POSITIVE_X = 34069;
//public const uint TEXTURE_CUBE_MAP_NEGATIVE_X = 34070;
//public const uint TEXTURE_CUBE_MAP_POSITIVE_Y = 34071;
//public const uint TEXTURE_CUBE_MAP_NEGATIVE_Y = 34072;
//public const uint TEXTURE_CUBE_MAP_POSITIVE_Z = 34073;
//public const uint TEXTURE_CUBE_MAP_NEGATIVE_Z = 34074;
//var cube0 = new IHTMLImage[] {
// new CSS3DPanoramaByHumus.HTML.Images.FromAssets.humus_px(),
// new CSS3DPanoramaByHumus.HTML.Images.FromAssets.humus_nx(),
// new CSS3DPanoramaByHumus.HTML.Images.FromAssets.humus_py(),
// new CSS3DPanoramaByHumus.HTML.Images.FromAssets.humus_ny(),
// new CSS3DPanoramaByHumus.HTML.Images.FromAssets.humus_pz(),
// new CSS3DPanoramaByHumus.HTML.Images.FromAssets.humus_nz()
//};
new[] {
canvasPX, canvasNX,
canvasPY, canvasNY,
canvasPZ, canvasNZ
}.WithEachIndex(
(img, index) =>
{
gl.bindTexture(gl.TEXTURE_CUBE_MAP, pass.tex);
//gl.pixelStorei(gl.UNPACK_FLIP_X_WEBGL, false);
gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, false);
// http://stackoverflow.com/questions/15364517/pixelstoreigl-unpack-flip-y-webgl-true
// https://msdn.microsoft.com/en-us/library/dn302429(v=vs.85).aspx
//gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, 0);
//gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, 1);
gl.texImage2D(gl.TEXTURE_CUBE_MAP_POSITIVE_X + (uint)index, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, img.canvas);
}
);
//if (cameraz.valueAsNumber == 0)
gl.clearColor(0, 0, 0, 0);
//else
//gl4K.clearColor(0, 0, 0, 1);
gl.clear(gl.COLOR_BUFFER_BIT);
// could do dynamic resolution- fog of war or fog of FOV. where up to 150deg field of vision is encouragedm, not 360
pass.Paint_Image(
0,
0,
0,
0,
0
//,
// gl_FragCoord
// cannot be scaled, and can be referenced directly.
// need another way to scale
//zoom: 0.3f
);
//paintsw.Stop();
// what does it do?
gl.flush();
// let render man know..
if (vsync != null)
if (!vsync.Task.IsCompleted)
vsync.SetResult(null);
};
Console.WriteLine("do you see it?");
}
);
}
private static void Spawn()
{
// this ctor creates a new div which has a text and a button element
// on mouseover over the color text is changed
// on pressing the button the next message in text element is displayed
IStyleSheet.Default.AddRule("img.fx1",
r =>
{
r.style.position = IStyle.PositionEnum.absolute;
r.style.top = "0";
r.style.border = "0";
});
Native.css.style.cursorImage = new HTML.Images.FromAssets.cursor01();
//IStyleSheet.Default.AddRule("*", "cursor: url('" + new HTML.Images.FromAssets.cursor01().src + "'), auto;", 0);
var img = new HTML.Images.FromAssets._99851426_7f408a6cc3_o_gray {
className = "fx1"
};
var img_up = new HTML.Images.FromAssets.up {
className = "fx1"
};
var img_up_neg = new HTML.Images.FromAssets.up_neg {
className = "fx1"
};
var img_down = new HTML.Images.FromAssets.down {
className = "fx1"
};
img.AttachToDocument();
img_up.AttachToDocument();
img_up_neg.AttachToDocument();
var info_size = new XSize
{
width = 350,
height = 200
};
var info_bg = new IHTMLDiv();
info_bg.style.SetLocation(60, 60, info_size.width, info_size.height);
info_bg.style.Opacity = 0.2;
info_bg.style.zIndex = 1;
info_bg.AttachToDocument();
var info_borders = new IHTMLDiv();
info_borders.style.SetLocation(60 - 4, 60 - 4, info_size.width + 8, info_size.height + 8);
info_borders.style.Opacity = 0.2;
info_borders.style.zIndex = 4;
info_borders.AttachToDocument();
var info_drag_tween = new TweenDataDouble();
var info_bg_useimage_cookie = new Cookie("setting1");
var info_bg_useimage = new DynamicProperty <bool>(
p =>
{
info_bg_useimage_cookie.BooleanValue = p.Value;
if (p.Value)
{
new HTML.Images.FromAssets.up_neg().ToBackground(info_borders.style);
new HTML.Images.FromAssets.up_neg().ToBackground(info_bg.style);
}
else
{
info_borders.style.backgroundImage = "";
info_bg.style.backgroundImage = "";
}
info_drag_tween.Value = 0.5;
}
)
{
Value = info_bg_useimage_cookie.BooleanValue
};
var info_drag = new DragHelper(info_borders);
info_drag_tween.Value = 0;
info_drag_tween.ValueChanged +=
delegate
{
var i = ScriptCoreLib.JavaScript.Runtime.Convert.ToInteger(255 * info_drag_tween.Value);
if (!info_bg_useimage.Value)
{
info_bg.style.backgroundColor = Color.FromRGB(i, i, 0);
info_borders.style.backgroundColor = Color.FromRGB(i, i, 0);
}
else
{
if (i < 1)
{
i = 1;
}
info_bg.style.Opacity = i / 255;
info_borders.style.Opacity = i / 255 * 0.5;
}
};
info_borders.style.cursor = IStyle.CursorEnum.move;
info_borders.onmouseover +=
delegate
{
if (info_drag.IsDrag)
{
return;
}
info_drag_tween.Value = 1;
};
info_borders.onmouseout +=
delegate
{
if (info_drag.IsDrag)
{
return;
}
info_drag_tween.Value = 0;
};
var info = new IHTMLDiv();
info.onmouseover +=
delegate
{
if (info_drag.IsDrag)
{
return;
}
info_drag_tween.Value = 0.5;
};
info.onmouseout +=
delegate
{
if (info_drag.IsDrag)
{
return;
}
info_drag_tween.Value = 0;
};
info.style.color = Color.White;
info.style.fontFamily = IStyle.FontFamilyEnum.Tahoma;
Func <string, IHTMLElement> par = texty => new IHTMLElement(IHTMLElement.HTMLElementEnum.p, texty);
Native.Document.title = "HotPolygon";
info.innerHTML = @"<h1>HotPolygon</h1>";
//var preview = new IHTMLImage("assets/HotPolygon/Preview.png");
//preview.style.Float = IStyle.FloatEnum.right;
//preview.style.margin = "1em";
info.appendChild(
//preview,
par("This example demonstrates the use of custom cursors, map, area, timed animation, cookies and a custom dialog."),
par("You can change the background of this page by hovering above the tree or one of the clouds."),
par("And yes you can drag this dialog at the borders :)"),
new IHTMLDiv(
@"
<ul>
<li>visit <a href='http://jsc.sf.net/'>jsc homepage</a></li>
<li>visit <a href='http://zproxy.wordpress.com/'>blog</a></li>
</ul>
")
);
var info_option = new IHTMLInput(HTMLInputTypeEnum.checkbox);
var info_option_label = new IHTMLLabel("Alternative background", info_option);
info.appendChild(new IHTMLElement(IHTMLElement.HTMLElementEnum.p, info_option, info_option_label));
info_option.onclick += i => info_bg_useimage.Value = info_option.@checked;
info_option.@checked = info_bg_useimage.Value;
info.style.overflow = IStyle.OverflowEnum.auto;
info.style.SetLocation(70, 70, info_size.width - 20, info_size.height - 20);
info.style.zIndex = 5;
info.AttachToDocument();
info_drag.DragMove +=
delegate
{
if (info_bg_useimage.Value)
{
info_borders.style.backgroundPosition = (-(info_drag.Position.X - 4)) + "px " + (-(info_drag.Position.Y - 4)) + "px";
info_bg.style.backgroundPosition = (-info_drag.Position.X) + "px " + (-info_drag.Position.Y) + "px";
}
info_borders.style.SetLocation(info_drag.Position.X - 4, info_drag.Position.Y - 4);
info_bg.style.SetLocation(info_drag.Position.X, info_drag.Position.Y);
info.style.SetLocation(info_drag.Position.X + 10, info_drag.Position.Y + 10);
};
info_drag.Position = new Point(60, 60);
info_drag.Enabled = true;
// 416 x 100
var img_here_src_off =
new IHTMLImage[]
{
new HTML.Images.FromAssets.here0(),
new HTML.Images.FromAssets.here1(),
new HTML.Images.FromAssets.here2(),
new HTML.Images.FromAssets.here3(),
new HTML.Images.FromAssets.here4(),
new HTML.Images.FromAssets.here5(),
};
var img_here_src_on =
new IHTMLImage[]
{
new HTML.Images.FromAssets.here0(),
new HTML.Images.FromAssets.here1(),
new HTML.Images.FromAssets.here2(),
new HTML.Images.FromAssets.here3(),
new HTML.Images.FromAssets.here4(),
new HTML.Images.FromAssets.here5(),
}.Reverse().ToArray();
var img_here = new IHTMLDiv();
img_here.style.SetSize(416, 100);
Action <Action, int> Wait =
(done, time) =>
{
new Timer(t => done(), time, 0);
};
ActionParams <Action, Action> DelayFrames =
(done, h) =>
{
int i = 0;
var next = default(Action);
next = () =>
{
if (i < h.Length)
{
var v = h[i];
i++;
Wait(() => { if (v != null)
{
v();
}
next(); }, 1000 / 24);
}
else
{
Wait(done, 1000 / 24);
}
};
next();
};
var AnimationOn = default(Action);
var AnimationOff = default(Action);
var AnimationRandomOn = default(Action);
AnimationOff =
() =>
{
DelayFrames(
() =>
{
img_here.style.display = IStyle.DisplayEnum.none;
Wait(() =>
{
AnimationRandomOn();
}, 5000);
}
,
img_here_src_off.Select <IHTMLImage, Action>(i => () => i.ToBackground(img_here.style)).ToArray()
);
};
AnimationOn =
() =>
{
img_here.style.display = IStyle.DisplayEnum.block;
DelayFrames(
() => Wait(AnimationOff, 3000),
img_here_src_on.Select <IHTMLImage, Action>(i => () => i.ToBackground(img_here.style)).ToArray()
);
};
AnimationRandomOn =
() =>
{
try
{
if (new System.Random().NextDouble() > 0.5)
{
img_here.SetCenteredLocation(589, 509);
}
else
{
img_here.SetCenteredLocation(686, 141);
}
Wait(AnimationOn, new System.Random().Next() % 15000);
}
catch
{
}
};
img_here.style.SetLocation(100, 100);
img_here.style.zIndex = 1;
AnimationRandomOn();
img_here.AttachToDocument();
img_down.AttachToDocument();
img_up.style.Opacity = 0;
img_up_neg.style.Opacity = 0;
var tw_up = new TweenDataDouble();
tw_up.Value = 0;
tw_up.ValueChanged += delegate { img_up.style.Opacity = tw_up.Value; };
var tw_up_neg = new TweenDataDouble();
tw_up_neg.Value = 0;
tw_up_neg.ValueChanged += delegate { img_up_neg.style.Opacity = tw_up_neg.Value; };
var map = new IHTMLElement(IHTMLElement.HTMLElementEnum.map);
map.id = "map1";
map.name = "map1";
var area1 = new IHTMLArea
{
shape = ShapeEnum.polygon,
coords = "477, 178, 515, 144, 557, 160, 576, 194, 614, 181, 629, 206, 648, 209, 659, 163, 719, 154, 730, 103, 845, 118, 891, 168, 949, 213, 917, 246, 931, 266, 859, 300, 787, 302, 756, 274, 721, 294, 658, 282, 615, 257, 537, 239, 492, 230, 470, 195"
};
area1.onmouseover += i =>
{
System.Console.WriteLine("over");
tw_up_neg.Value = 1; /*tw_down.Value = 0.2;*/
};
area1.onmouseout += i =>
{
try
{
System.Console.WriteLine("out");
tw_up_neg.Value = 0; /* tw_down.Value = 1;*/
}
catch
{
}
};
var area2 = new IHTMLArea
{
shape = ShapeEnum.polygon,
coords = "677, 556, 718, 551, 747, 570, 758, 594, 756, 613, 729, 625, 688, 629, 663, 604, 657, 585"
};
area2.onmouseover += i =>
{
System.Console.WriteLine("over");
tw_up.Value = 1; /*tw_down.Value = 0.2;*/
};
area2.onmouseout += i =>
{
try
{
System.Console.WriteLine("out");
tw_up.Value = 0; /* tw_down.Value = 1;*/
}
catch
{
}
};
img_down.onclick += i => System.Console.WriteLine(i.CursorPosition);
//area1.href = "http://google.com";
//area1.target = "_blank";
map.appendChild(area1);
map.appendChild(area2);
map.AttachToDocument();
img_down.style.zIndex = 2;
img_down.setAttribute("useMap", "#map1");
//img_overlay.style.backgroundColor = Color.Red;
}
public Application(IApp page)
{
// https://sites.google.com/a/jsc-solutions.net/work/knowledge-base/15-dualvr/20151101
// first lets do some chrome extension magic.
dynamic self = Native.self;
dynamic self_chrome = self.chrome;
#region self_chrome_tabs extension
object self_chrome_tabs = self_chrome.tabs;
if (self_chrome_tabs != null)
{
Console.WriteLine("running as extension " + new { typeof(Application).Assembly.GetName().Name });
// verified.
// running as extension {{ Name = ChromeHybridCaptureAE.Application }}
new { }.With(
async delegate
{
app = (await chrome.management.getAll()).FirstOrDefault(item => item.name.StartsWith(typeof(Application).Assembly.GetName().Name));
if (app == null)
{
Console.WriteLine("running as extension. app not found.");
return;
}
// running as extension {{ shortName = ChromeHybridCaptureAE.Application.exe, launchType = OPEN_AS_WINDOW }}
Console.WriteLine("running as extension " + new { app.shortName, app.launchType });
chrome.runtime.connect(app.id).With(
async (chrome.Port port) =>
{
//Console.WriteLine("extension chrome.runtime.connect done " + new { port.name, port.sender.id });
//Console.WriteLine("extension chrome.runtime.connect done " + new { port.name, port.sender });
Console.WriteLine("extension chrome.runtime.connect done, click launch");
#region extension: HopToChromeApp.VirtualOnCompleted
// https://sites.google.com/a/jsc-solutions.net/work/knowledge-base/15-dualvr/20150822/hoptochromeapp
HopToChromeApp.VirtualOnCompleted = async (that, continuation) =>
{
// state 0 ? or state -1 ?
Console.WriteLine("extension HopToChromeApp enter ");
TestSwitchToServiceContextAsync.ShadowIAsyncStateMachine.ResumeableContinuation r = TestSwitchToServiceContextAsync.ShadowIAsyncStateMachine.ResumeableFromContinuation(continuation);
// now send the jump instruction... will it make it?
port.postMessage(r.shadowstate);
};
#endregion
// is async better than event += here?
var m = default(chrome.PortMessageEvent);
while (m = await port.async.onmessage)
{
var message = m.data;
// verified.
#region IAsyncStateMachine
// casting from anonymous object.
var xShadowIAsyncStateMachine = (TestSwitchToServiceContextAsync.ShadowIAsyncStateMachine)message;
// 12961ms extension port.onMessage {{ state = null, TypeName = null }}
// or constructor id?
Console.WriteLine("extension port.onMessage " + new { xShadowIAsyncStateMachine.state, xShadowIAsyncStateMachine.TypeName });
// 12468ms extension port.onMessage {{ message = do HopToChromeExtension {{ TypeName = <Namespace>.___ctor_b__4_9_d, state = 0 }}, expando_isstring = true, is_string = false, equals_typeofstring = false }}
//2015-08-22 15:49:45.729 view-source:53670 12471ms extension port.onMessage {{ message = do HopToChromeExtension {{ TypeName = <Namespace>.___ctor_b__4_9_d, state = 0 }} }}
//2015-08-22 15:49:45.733 view-source:53670 12475ms extension port.onMessage {{ message = [object Object], expando_isstring = false, is_string = false, equals_typeofstring = false }}
//2015-08-22 15:49:45.737 view-source:53670 12479ms extension port.onMessage {{ state = 0, TypeName = <Namespace>.___ctor_b__4_9_d }}
#region xAsyncStateMachineType
var xAsyncStateMachineType = typeof(Application).Assembly.GetTypes().FirstOrDefault(
xAsyncStateMachineTypeCandidate =>
{
// safety check 1
//Console.WriteLine(new { sw.ElapsedMilliseconds, item.FullName });
var xisIAsyncStateMachine = typeof(IAsyncStateMachine).IsAssignableFrom(xAsyncStateMachineTypeCandidate);
if (xisIAsyncStateMachine)
{
//Console.WriteLine(new { item.FullName, isIAsyncStateMachine });
return xAsyncStateMachineTypeCandidate.FullName == xShadowIAsyncStateMachine.TypeName;
}
return false;
}
);
#endregion
Console.WriteLine(new { xAsyncStateMachineType });
var NewStateMachine = FormatterServices.GetUninitializedObject(xAsyncStateMachineType);
var isIAsyncStateMachine = NewStateMachine is IAsyncStateMachine;
var NewStateMachineI = (IAsyncStateMachine)NewStateMachine;
#region 1__state
xAsyncStateMachineType.GetFields(
System.Reflection.BindingFlags.Public | System.Reflection.BindingFlags.NonPublic | System.Reflection.BindingFlags.Instance
).WithEach(
AsyncStateMachineSourceField =>
{
//Console.WriteLine(new { AsyncStateMachineSourceField });
if (AsyncStateMachineSourceField.Name.EndsWith("1__state"))
{
AsyncStateMachineSourceField.SetValue(
NewStateMachineI,
xShadowIAsyncStateMachine.state
);
}
var xStringField = TestSwitchToServiceContextAsync.ArrayListExtensions.AsEnumerable(xShadowIAsyncStateMachine.StringFields).FirstOrDefault(
f => DecoratedString(f.FieldName) == DecoratedString(AsyncStateMachineSourceField.Name)
);
if (xStringField != null)
{
// once we are to go back to client. we need to reverse it?
AsyncStateMachineSourceField.SetValue(
NewStateMachineI,
xStringField.value
);
// next xml?
// before lets send our strings back with the new state!
// what about exceptions?
}
}
);
#endregion
NewStateMachineI.MoveNext();
#endregion
}
}
);
}
);
return;
}
#endregion
object self_chrome_socket = self_chrome.socket;
if (self_chrome_socket != null)
{
#region running as appwindow
if (!(Native.window.opener == null && Native.window.parent == Native.window.self))
{
Console.WriteLine("running as appwindow");
MessagePort appwindow_to_app2 = null;
// called by? 619 app:HopToChromeAppWindow
#region appwindow Native.window.onmessage
Native.window.onmessage += e =>
{
// https://sites.google.com/a/jsc-solutions.net/work/knowledge-base/15-dualvr/20150822/hoptochromeappwindow
// appwindow Native.window.onmessage {{ data = app to appwindow! }}
var message = e.data;
//Console.WriteLine("appwindow Native.window.onmessage " + new { e.data });
// extension port.onMessage {{ message = from app hello to extension }}
//var expando_isstring = ScriptCoreLib.JavaScript.Runtime.Expando.Of(message).IsString;
// look app sent a message to extension
//Console.WriteLine("app port.onMessage " + new { message });
{
// DataCloneError: Failed to execute 'postMessage' on 'Window': Port at index 0 is already neutered.
if (e.ports != null)
foreach (var port in e.ports)
{
Console.WriteLine("appwindow Native.window.onmessage " + new { port });
appwindow_to_app2 = port;
}
}
// https://sites.google.com/a/jsc-solutions.net/work/knowledge-base/15-dualvr/20150822/hoptochromeapp
// casting from anonymous object.
var xShadowIAsyncStateMachine = (TestSwitchToServiceContextAsync.ShadowIAsyncStateMachine)message;
// or constructor id?
Console.WriteLine("appwindow Native.window.onmessage " + new { xShadowIAsyncStateMachine.state, xShadowIAsyncStateMachine.TypeName });
// 12468ms extension port.onMessage {{ message = do HopToChromeExtension {{ TypeName = <Namespace>.___ctor_b__4_9_d, state = 0 }}, expando_isstring = true, is_string = false, equals_typeofstring = false }}
//2015-08-22 15:49:45.729 view-source:53670 12471ms extension port.onMessage {{ message = do HopToChromeExtension {{ TypeName = <Namespace>.___ctor_b__4_9_d, state = 0 }} }}
//2015-08-22 15:49:45.733 view-source:53670 12475ms extension port.onMessage {{ message = [object Object], expando_isstring = false, is_string = false, equals_typeofstring = false }}
//2015-08-22 15:49:45.737 view-source:53670 12479ms extension port.onMessage {{ state = 0, TypeName = <Namespace>.___ctor_b__4_9_d }}
#region xAsyncStateMachineType
var xAsyncStateMachineType = typeof(Application).Assembly.GetTypes().FirstOrDefault(
xAsyncStateMachineTypeCandidate =>
{
// safety check 1
//Console.WriteLine(new { sw.ElapsedMilliseconds, item.FullName });
var xisIAsyncStateMachine = typeof(IAsyncStateMachine).IsAssignableFrom(xAsyncStateMachineTypeCandidate);
if (xisIAsyncStateMachine)
{
//Console.WriteLine(new { item.FullName, isIAsyncStateMachine });
return xAsyncStateMachineTypeCandidate.FullName == xShadowIAsyncStateMachine.TypeName;
}
return false;
}
);
#endregion
var NewStateMachine = FormatterServices.GetUninitializedObject(xAsyncStateMachineType);
var isIAsyncStateMachine = NewStateMachine is IAsyncStateMachine;
var NewStateMachineI = (IAsyncStateMachine)NewStateMachine;
#region 1__state
xAsyncStateMachineType.GetFields(
System.Reflection.BindingFlags.Public | System.Reflection.BindingFlags.NonPublic | System.Reflection.BindingFlags.Instance
).WithEach(
AsyncStateMachineSourceField =>
{
//Console.WriteLine(new { AsyncStateMachineSourceField });
if (AsyncStateMachineSourceField.Name.EndsWith("1__state"))
{
AsyncStateMachineSourceField.SetValue(
NewStateMachineI,
xShadowIAsyncStateMachine.state
);
}
// X:\jsc.svn\examples\javascript\async\Test\TestSwitchToServiceContextAsync\TestSwitchToServiceContextAsync\CLRWebServiceInvoke.cs
// field names/ tokens need to be encrypted like typeinfo.
// some do manual restore
// X:\jsc.svn\examples\javascript\chrome\extensions\ChromeExtensionHopToTabThenIFrame\ChromeExtensionHopToTabThenIFrame\Application.cs
// https://sites.google.com/a/jsc-solutions.net/work/knowledge-base/15-dualvr/20150822/hoptochromeappwindow
// or, are we supposed to initialize a string value here?
var xStringField = TestSwitchToServiceContextAsync.ArrayListExtensions.AsEnumerable(xShadowIAsyncStateMachine.StringFields).FirstOrDefault(
f => DecoratedString(f.FieldName) == DecoratedString(AsyncStateMachineSourceField.Name)
);
if (xStringField != null)
{
// once we are to go back to client. we need to reverse it?
AsyncStateMachineSourceField.SetValue(
NewStateMachineI,
xStringField.value
);
// next xml?
// before lets send our strings back with the new state!
// what about exceptions?
}
}
);
#endregion
NewStateMachineI.MoveNext();
};
#endregion
#region appwindow:HopToChromeApp
HopToChromeApp.VirtualOnCompleted = async (that, continuation) =>
{
// do we have the port to send back our portal warp?
// state 0 ? or state -1 ?
Console.WriteLine("appwindow HopToChromeApp enter " + new { appwindow_to_app2 });
// appwindow HopToChromeApp enter {{ appwindow_to_app2 = null }}
//// https://sites.google.com/a/jsc-solutions.net/work/knowledge-base/15-dualvr/20150822/hoptochromeappwindow
//// async dont like ref?
TestSwitchToServiceContextAsync.ShadowIAsyncStateMachine.ResumeableContinuation r = TestSwitchToServiceContextAsync.ShadowIAsyncStateMachine.ResumeableFromContinuation(continuation);
// 29035ms extension port.onMessage {{ message = do HopToChromeExtension }}
//appwindow_to_app.postMessage("do HopToChromeAppWindow " + new { r.shadowstate.TypeName, r.shadowstate.state });
// now send the jump instruction... will it make it?
appwindow_to_app2.postMessage(r.shadowstate);
};
#endregion
return;
}
#endregion
// running as app {{ Name = ChromeHybridCaptureAE.Application }} now reenable extension..
Console.WriteLine("running as app " + new { typeof(Application).Assembly.GetName().Name } + " now reenable extension..");
#region app:appwindow_to_app
Action<object> appwindow_to_app = data =>
{
var xShadowIAsyncStateMachine = (TestSwitchToServiceContextAsync.ShadowIAsyncStateMachine)data;
Console.WriteLine("app appwindow_to_app " + new { xShadowIAsyncStateMachine.TypeName });
#region xAsyncStateMachineType
var xAsyncStateMachineType = typeof(Application).Assembly.GetTypes().FirstOrDefault(
xAsyncStateMachineTypeCandidate =>
{
// safety check 1
//Console.WriteLine(new { sw.ElapsedMilliseconds, item.FullName });
var xisIAsyncStateMachine = typeof(IAsyncStateMachine).IsAssignableFrom(xAsyncStateMachineTypeCandidate);
if (xisIAsyncStateMachine)
{
//Console.WriteLine(new { item.FullName, isIAsyncStateMachine });
return xAsyncStateMachineTypeCandidate.FullName == xShadowIAsyncStateMachine.TypeName;
}
return false;
}
);
#endregion
Console.WriteLine("app appwindow_to_app " + new { xAsyncStateMachineType });
var NewStateMachine = FormatterServices.GetUninitializedObject(xAsyncStateMachineType);
var isIAsyncStateMachine = NewStateMachine is IAsyncStateMachine;
var NewStateMachineI = (IAsyncStateMachine)NewStateMachine;
#region 1__state
xAsyncStateMachineType.GetFields(
System.Reflection.BindingFlags.Public | System.Reflection.BindingFlags.NonPublic | System.Reflection.BindingFlags.Instance
).WithEach(
AsyncStateMachineSourceField =>
{
//Console.WriteLine(new { AsyncStateMachineSourceField });
if (AsyncStateMachineSourceField.Name.EndsWith("1__state"))
{
AsyncStateMachineSourceField.SetValue(
NewStateMachineI,
xShadowIAsyncStateMachine.state
);
}
// X:\jsc.svn\examples\javascript\async\Test\TestSwitchToServiceContextAsync\TestSwitchToServiceContextAsync\CLRWebServiceInvoke.cs
// field names/ tokens need to be encrypted like typeinfo.
// some do manual restore
// X:\jsc.svn\examples\javascript\chrome\extensions\ChromeExtensionHopToTabThenIFrame\ChromeExtensionHopToTabThenIFrame\Application.cs
// https://sites.google.com/a/jsc-solutions.net/work/knowledge-base/15-dualvr/20150822/hoptochromeappwindow
// or, are we supposed to initialize a string value here?
var xStringField = TestSwitchToServiceContextAsync.ArrayListExtensions.AsEnumerable(xShadowIAsyncStateMachine.StringFields).FirstOrDefault(
f => DecoratedString(f.FieldName) == DecoratedString(AsyncStateMachineSourceField.Name)
);
if (xStringField != null)
{
// once we are to go back to client. we need to reverse it?
AsyncStateMachineSourceField.SetValue(
NewStateMachineI,
xStringField.value
);
// next xml?
// before lets send our strings back with the new state!
// what about exceptions?
}
}
);
#endregion
NewStateMachineI.MoveNext();
};
#endregion
var c = new MessageChannel();
var cneutered = c;
c.port1.onmessage += e =>
{
Console.WriteLine("app HopToChromeAppWindow MessageChannel onmessage " + new { e.data });
appwindow_to_app(e.data);
};
c.port1.start();
c.port2.start();
#region app:HopToChromeAppWindow
HopToChromeAppWindow.VirtualOnCompleted = async (that, continuation) =>
{
// https://sites.google.com/a/jsc-solutions.net/work/knowledge-base/15-dualvr/20150824/webgliframebuffer
// state 0 ? or state -1 ?
Console.WriteLine("app HopToChromeAppWindow enter ");
#region outputWindow
if (that.window == null)
{
// https://sites.google.com/a/jsc-solutions.net/work/knowledge-base/15-dualvr/20150822/hoptochromeappwindow
if (outputWindow == null)
{
// https://developer.chrome.com/apps/app_window#type-CreateWindowOptions
outputWindow = await chrome.app.window.create(
Native.document.location.pathname,
// https://developer.chrome.com/apps/app_window#type-CreateWindowOptions
// this ctually works. but we wont see console on app log..
options: new { hidden = true, alwaysOnTop = true }
);
////xappwindow.setAlwaysOnTop
// or can we stay hidden?
//that.window.show();
await outputWindow.contentWindow.async.onload;
}
// reuse the window...
that.window = outputWindow;
}
#endregion
// https://sites.google.com/a/jsc-solutions.net/work/knowledge-base/15-dualvr/20150822/hoptochromeappwindow
// async dont like ref?
TestSwitchToServiceContextAsync.ShadowIAsyncStateMachine.ResumeableContinuation r = TestSwitchToServiceContextAsync.ShadowIAsyncStateMachine.ResumeableFromContinuation(continuation);
// 29035ms extension port.onMessage {{ message = do HopToChromeExtension }}
// Z:\jsc.svn\core\ScriptCoreLib\JavaScript\DOM\IWindow.postMessage.cs
// how do we use this thing?
// 15ms appwindow Native.window.onmessage: {{ ports = [object MessagePort] }}
//2015-08-22 20:50:18.019 view-source:53702 17ms appwindow Native.window.onmessage: {{ port = [object MessagePort] }}
//that.window.contentWindow.postMessage("do HopToChromeAppWindow " + new { r.shadowstate.TypeName, r.shadowstate.state }, transfer: c.port2);
// now send the jump instruction... will it make it?
if (cneutered != null)
{
that.window.contentWindow.postMessage(r.shadowstate, transfer: cneutered.port2);
cneutered = null;
}
else
{
that.window.contentWindow.postMessage(r.shadowstate);
}
};
#endregion
#region ConnectExternal
chrome.runtime.ConnectExternal += async port =>
{
// app chrome.runtime.ConnectExternal {{ id = jadmeogmbokffpkdfeiemjplohfgkidd }} now click launch!
Console.WriteLine("app chrome.runtime.ConnectExternal " + new { port.sender.id } + " now click launch!");
new chrome.Notification(
title: typeof(Application).Assembly.GetName().Name,
message: "ready. click launch"
).Clicked += delegate
{
// https://developer.chrome.com/apps/app_runtime
// management_api
};
// can we have async thing here?
#region HopToChromeExtension
HopToChromeExtension.VirtualOnCompleted = async (that, continuation) =>
{
// state 0 ? or state -1 ?
Console.WriteLine("app HopToChromeExtension enter ");
// where is it defined?
// z:\jsc.svn\examples\javascript\async\Test\TestSwitchToServiceContextAsync\TestSwitchToServiceContextAsync\ShadowIAsyncStateMachine.cs
// async dont like ref?
TestSwitchToServiceContextAsync.ShadowIAsyncStateMachine.ResumeableContinuation r = TestSwitchToServiceContextAsync.ShadowIAsyncStateMachine.ResumeableFromContinuation(continuation);
// now send the jump instruction... will it make it?
port.postMessage(r.shadowstate);
// how would we know to continue from current continuation?
// or are we fine to rebuild the scope if we jump back?
};
#endregion
var m = default(chrome.PortMessageEvent);
while (m = await port.async.onmessage)
{
//var m = await port.async.onmessage;
var message = m.data;
#region IAsyncStateMachine
// https://sites.google.com/a/jsc-solutions.net/work/knowledge-base/15-dualvr/20150822/hoptochromeapp
// casting from anonymous object.
var xShadowIAsyncStateMachine = (TestSwitchToServiceContextAsync.ShadowIAsyncStateMachine)message;
// or constructor id?
Console.WriteLine("app port.onMessage " + new { xShadowIAsyncStateMachine.state, xShadowIAsyncStateMachine.TypeName });
// 12468ms extension port.onMessage {{ message = do HopToChromeExtension {{ TypeName = <Namespace>.___ctor_b__4_9_d, state = 0 }}, expando_isstring = true, is_string = false, equals_typeofstring = false }}
//2015-08-22 15:49:45.729 view-source:53670 12471ms extension port.onMessage {{ message = do HopToChromeExtension {{ TypeName = <Namespace>.___ctor_b__4_9_d, state = 0 }} }}
//2015-08-22 15:49:45.733 view-source:53670 12475ms extension port.onMessage {{ message = [object Object], expando_isstring = false, is_string = false, equals_typeofstring = false }}
//2015-08-22 15:49:45.737 view-source:53670 12479ms extension port.onMessage {{ state = 0, TypeName = <Namespace>.___ctor_b__4_9_d }}
#region xAsyncStateMachineType
var xAsyncStateMachineType = typeof(Application).Assembly.GetTypes().FirstOrDefault(
xAsyncStateMachineTypeCandidate =>
{
// safety check 1
//Console.WriteLine(new { sw.ElapsedMilliseconds, item.FullName });
var xisIAsyncStateMachine = typeof(IAsyncStateMachine).IsAssignableFrom(xAsyncStateMachineTypeCandidate);
if (xisIAsyncStateMachine)
{
//Console.WriteLine(new { item.FullName, isIAsyncStateMachine });
return xAsyncStateMachineTypeCandidate.FullName == xShadowIAsyncStateMachine.TypeName;
}
return false;
}
);
#endregion
var NewStateMachine = FormatterServices.GetUninitializedObject(xAsyncStateMachineType);
var isIAsyncStateMachine = NewStateMachine is IAsyncStateMachine;
var NewStateMachineI = (IAsyncStateMachine)NewStateMachine;
#region 1__state
xAsyncStateMachineType.GetFields(
System.Reflection.BindingFlags.Public | System.Reflection.BindingFlags.NonPublic | System.Reflection.BindingFlags.Instance
).WithEach(
AsyncStateMachineSourceField =>
{
//Console.WriteLine(new { AsyncStateMachineSourceField });
if (AsyncStateMachineSourceField.Name.EndsWith("1__state"))
{
AsyncStateMachineSourceField.SetValue(
NewStateMachineI,
xShadowIAsyncStateMachine.state
);
}
// z:\jsc.svn\examples\javascript\async\Test\TestSwitchToServiceContextAsync\TestSwitchToServiceContextAsync\CLRWebServiceInvoke.cs
// field names/ tokens need to be encrypted like typeinfo.
// some do manual restore
// X:\jsc.svn\examples\javascript\chrome\extensions\ChromeExtensionHopToTabThenIFrame\ChromeExtensionHopToTabThenIFrame\Application.cs
// https://sites.google.com/a/jsc-solutions.net/work/knowledge-base/15-dualvr/20150822/hoptochromeappwindow
// or, are we supposed to initialize a string value here?
var xStringField = TestSwitchToServiceContextAsync.ArrayListExtensions.AsEnumerable(xShadowIAsyncStateMachine.StringFields).FirstOrDefault(
f => DecoratedString(f.FieldName) == DecoratedString(AsyncStateMachineSourceField.Name)
);
if (xStringField != null)
{
// once we are to go back to client. we need to reverse it?
AsyncStateMachineSourceField.SetValue(
NewStateMachineI,
xStringField.value
);
// next xml?
// before lets send our strings back with the new state!
// what about exceptions?
}
}
);
#endregion
NewStateMachineI.MoveNext();
#endregion
}
};
#endregion
// nuget chrome
chrome.app.runtime.Launched += async delegate
{
{ fixup: await Task.CompletedTask; }
Console.WriteLine("app Launched, will hop to extension");
// verified.
await default(HopToChromeExtension);
// https://developer.chrome.com/extensions/management
// as an extension we now can inspect our app ?
Console.WriteLine("hop from app to extension " + new { app.name });
// hop from app to extension {{ name = ChromeHybridCaptureAE.Application.exe }}
// what else can we do as an extension?
// lets hop back?
await default(HopToChromeApp);
Console.WriteLine("hop from extension to app ");
// ok hopping works. lets do some ui now.
//// https://sites.google.com/a/jsc-solutions.net/work/knowledge-base/15-dualvr/20150822/hoptochromeappwindow
await default(HopToChromeAppWindow);
Native.document.documentElement.style.overflow = IStyle.OverflowEnum.auto;
//Native.body.style.overflow = IStyle.OverflowEnum.auto;
Native.body.Clear();
(Native.body.style as dynamic).webkitUserSelect = "text";
chrome.app.window.current().show();
// now what?
new IHTMLPre { "now what?" }.AttachToDocument();
// lets have some ui to do a fullsceen tab capture?
// http://earth.nullschool.net/#2015/10/31/1500Z/wind/surface/level/anim=off/overlay=temp/azimuthal_equidistant=24.64,98.15,169
// http://earth.nullschool.net/#2015/10/31/2100Z/wind/surface/level/anim=off/overlay=temp/azimuthal_equidistant=24.64,98.15,169
// TypeError: Cannot set property 'uri' of null
// jsc statemachine hop doesnt like scopes yet. staic it is.
uri = new IHTMLInput { value = "http://earth.nullschool.net/#2015/10/31/2100Z/wind/surface/level/anim=off/overlay=temp/azimuthal_equidistant=24.64,98.15,169" }.AttachToDocument();
uri.style.width = "100%";
Console.WriteLine("appwindow: " + new { uri });
new IHTMLPre { () => new { index } }.AttachToDocument();
frameID = new IHTMLInput
{
type = ScriptCoreLib.Shared.HTMLInputTypeEnum.range,
min = 0,
//max = 3600,
max = 240,
valueAsNumber = 0
}.AttachToDocument().With(
async i =>
{
do
{
// http://earth.nullschool.net/#2015/10/01/0000Z/wind/surface/level/anim=off/overlay=temp/azimuthal_equidistant=24.64,98.15,169
index = (int)i.valueAsNumber;
var hh = 3 * index;
var dd = 1 + Math.Floor(hh / 24.0);
uri.value =
"http://earth.nullschool.net/#2015/10/"
+ dd.ToString().PadLeft(2, '0')
+ "/"
+ (hh % 24).ToString().PadLeft(2, '0')
+ "00Z/wind/surface/level/anim=off/overlay=temp/azimuthal_equidistant=24.64,98.15,169";
}
while (await i.async.onchange);
}
);
go = new IHTMLButton { "go" }.AttachToDocument();
Console.WriteLine("appwindow: " + new { go });
go.onclick += async delegate
{
//Error CS0158 The label 'fixup' shadows another label by the same name in a contained scope ChromeHybridCaptureAE Z:\jsc.svn\examples\javascript\chrome\hybrid\ChromeHybridCaptureAE\Application.cs 791
{ fixup: await Task.CompletedTask; }
Native.body.style.backgroundColor = "yellow";
var scope_uri = uri.value;
#region await default(HopToChromeExtension)
await default(HopToChromeApp);
Console.WriteLine("hop from appwindow to app! " + new { scope_uri });
// verify
await default(HopToChromeExtension);
#endregion
Console.WriteLine("hop from app to extension! " + new { scope_uri });
// hop from app to extension! {{ scope_uri = http://earth.nullschool.net/#2015/10/31/2100Z/wind/surface/level/anim=off/overlay=temp/azimuthal_equidistant=24.64,98.15,169 }}
var tabwindow = await chrome.windows.create(new { state = "fullscreen", url = scope_uri });
// um. unless we hop into it we wont know when its ready?
//await Task.Delay(7000);
await Task.Delay(5000);
// Error: Invalid value for argument 2. Property 'format': Value must be one of: [jpeg, png]. at validate
var captureVisibleTab = await tabwindow.id.captureVisibleTab(options: new { format = "jpeg" });
Console.WriteLine("extension captureVisibleTab " + new { captureVisibleTab.Length });
await tabwindow.id.remove();
#region await default(HopToChromeAppWindow)
await default(HopToChromeApp);
Console.WriteLine("app " + new { captureVisibleTab.Length });
await default(HopToChromeAppWindow);
Console.WriteLine("appwindow " + new { captureVisibleTab.Length });
#endregion
// appwindow {{ Length = 272711 }}
var icaptureVisibleTabFull = await new IHTMLImage { src = captureVisibleTab }.async.oncomplete;
// {{ width = 1920, height = 1080 }}
new IHTMLPre { new { icaptureVisibleTabFull.width, icaptureVisibleTabFull.height } }
;
// .AttachToDocument();
var focus = new CanvasRenderingContext2D(icaptureVisibleTabFull.height, icaptureVisibleTabFull.height);
focus.drawImage(icaptureVisibleTabFull, (icaptureVisibleTabFull.width - icaptureVisibleTabFull.height) / 2, 0, icaptureVisibleTabFull.height, icaptureVisibleTabFull.height, 0, 0, icaptureVisibleTabFull.height, icaptureVisibleTabFull.height);
var icaptureVisibleTab = new IHTMLImage { src = focus.canvas.toDataURL() }.AttachToDocument();
icaptureVisibleTab.style.width = "100%";
icaptureVisibleTab.AttachToDocument();
await new IHTMLButton { "save " }.AttachToDocument().async.onclick;
if (dir == null)
dir = (DirectoryEntry)await chrome.fileSystem.chooseEntry(new { type = "openDirectory" });
var file = index.ToString().PadLeft(5, '0') + ".jpg";
await dir.WriteAllBytes(file, focus);
//frameID.valueAsNumber++;
await new IHTMLButton { "automate " + new { frameID = frameID.valueAsNumber } }.AttachToDocument().async.onclick;
//new IHTMLPre { uri.value }.AttachToDocument();
next:
frameID.valueAsNumber++;
await Native.window.async.onframe;
await Native.window.async.onframe;
//new IHTMLPre { uri.value }.AttachToDocument();
// go?
// TypeError: Cannot read property 'id' of null
scope_uri = uri.value;
#region await default(HopToChromeExtension)
await default(HopToChromeApp);
Console.WriteLine("hop from appwindow to app! " + new { scope_uri });
// verify
await default(HopToChromeExtension);
#endregion
var tabwindow2 = await chrome.windows.create(new { state = "fullscreen", url = scope_uri });
await Task.Delay(5000);
var captureVisibleTab2 = await tabwindow2.id.captureVisibleTab(options: new { format = "jpeg" });
await tabwindow2.id.remove();
#region await default(HopToChromeAppWindow)
await default(HopToChromeApp);
Console.WriteLine("app " + new { captureVisibleTab.Length });
await default(HopToChromeAppWindow);
Console.WriteLine("appwindow " + new { captureVisibleTab.Length });
#endregion
var icaptureVisibleTabFull2 = await new IHTMLImage { src = captureVisibleTab2 }.async.oncomplete;
var focus2 = new CanvasRenderingContext2D(icaptureVisibleTabFull2.height, icaptureVisibleTabFull2.height);
focus2.drawImage(icaptureVisibleTabFull2, (icaptureVisibleTabFull2.width - icaptureVisibleTabFull2.height) / 2, 0, icaptureVisibleTabFull2.height, icaptureVisibleTabFull2.height, 0, 0, icaptureVisibleTabFull2.height, icaptureVisibleTabFull2.height);
var icaptureVisibleTab2 = new IHTMLImage { src = focus2.canvas.toDataURL() };
var file2 = index.ToString().PadLeft(5, '0') + ".jpg";
await dir.WriteAllBytes(file2, focus2);
// done?
goto next;
};
await default(HopToChromeApp);
Console.WriteLine("hop from appwindow to app!");
};
return;
}
Console.WriteLine("running as content?");
}
//public const string Alias = "Class1";
//public const string DefaultData = "Class1Data";
/// <summary>
/// Creates a new control
/// </summary>
/// <param name="DataElement">The hidden data element</param>
public GoogleGearsSimple()
{
// this ctor creates a new div which has a text and a button element
// on mouseover over the color text is changed
// on pressing the button the next message in text element is displayed
IHTMLDiv Control = new IHTMLDiv();
Control.AttachToDocument();
Func <string, string, IHTMLElement> link = (href, text) => new IHTMLDiv(new IHTMLAnchor(href, text));
Control.appendChild(link("http://gears.google.com/", "Google Gears"));
Control.appendChild(link("http://code.google.com/apis/gears/samples/hello_world_database.html", "Google Example # 1"));
Control.appendChild(new IHTMLElement(IHTMLElement.HTMLElementEnum.h3, "This page uses Google Gears to record your entries on the local disk. If you navigate away and revisit this page, all your data will still be here. Try it!"));
// http://code.google.com/apis/gears/samples/hello_world_database.html
GoogleGearsFactory.Database db = null;
try
{
db = new GoogleGearsFactory.Database();
}
catch (Exception exc)
{
var err = new IHTMLCode(exc.Message);
err.style.color = Color.Red;
Control.appendChild(err);
}
IStyleSheet.Default.AddRule(".odd").style.backgroundColor = Color.FromGray(0xa0);
IStyleSheet.Default.AddRule(".even").style.backgroundColor = Color.FromGray(0xef);
if (db != null)
{
db.open("demo1");
db.execute(@"
create table if not exists Demo
(Phrase varchar(255), Timestamp int)
");
var textfield = new IHTMLInput(HTMLInputTypeEnum.text, "text1", "");
var btnadd = new IHTMLButton("Add new entry");
var btnrefresh = new IHTMLButton("Refresh");
var btnclear = new IHTMLButton("Clear");
Control.appendChild(textfield, btnadd, btnclear, btnrefresh,
new IHTMLCode(GoogleGearsFactory.Default.getBuildInfo())
);
var list = new IHTMLElement(IHTMLElement.HTMLElementEnum.ol);
Control.appendChild(list);
var read = default(Action);
read = delegate
{
//from i in Demo
//select new { Phrase, Timestamp }
//order by Timestamp desc
list.removeChildren();
Func <string, IHTMLElement> AddItem =
text => new IHTMLElement(IHTMLElement.HTMLElementEnum.li, text).Aggregate(v => list.appendChild(v));
// this could be rewritten as an expression once they are supported by jsc
int counter = 0;
var query = from Data in db.AsEnumerable <DemoDataEntity>(
"select * from Demo order by Timestamp desc",
typeof(DemoDataEntity)
)
// let ListItem = AddItem(Data.Timestamp + " - " + Data.Phrase)
select new __Type2 {
ListItem = AddItem(Data.Timestamp + " - " + Data.Phrase), Data = Data
};
foreach (var v in query)
{
counter++;
var vx = v;
if (counter % 2 == 0)
{
v.ListItem.className = "odd";
}
else
{
v.ListItem.className = "even";
}
#region -
var btndel = new IHTMLButton("-");
btndel.style.color = Color.Red;
btndel.onclick +=
delegate
{
db.execute("delete from Demo where Timestamp = ?", vx.Data.Timestamp);
read();
};
#endregion
#region +
var btnclone = new IHTMLButton("+");
btnclone.style.color = Color.Blue;
btnclone.onclick +=
delegate
{
db.Insert("Demo", vx.Data);
read();
};
#endregion
v.ListItem.insertBefore(btnclone, v.ListItem.firstChild);
v.ListItem.insertBefore(btndel, v.ListItem.firstChild);
}
#region raw
//var rs = db.execute("select * from Demo order by Timestamp desc");
//while (rs.isValidRow())
//{
// var xt = typeof(DemoDataEntity);
// var xx = (DemoDataEntity)Activator.CreateInstance(xt);
// for (int i = 0; i < rs.fieldCount(); i++)
// {
// xt.GetField(rs.fieldName(i)).SetValue(xx, rs.field(i));
// }
// AddItem(xx.Timestamp + " - " + xx.Phrase);
// rs.next();
//}
//rs.close();
#endregion
};
btnclear.onclick +=
delegate
{
db.execute("delete from Demo");
read();
};
btnadd.onclick +=
delegate
{
db.Insert("Demo",
new DemoDataEntity
{
Phrase = textfield.value,
Timestamp = IDate.Now.getTime()
}
);
//db.execute("insert into Demo (Phrase, Timestamp) values (?, ?)", textfield.value, IDate.Now.getTime());
textfield.value = "";
read();
};
btnrefresh.onclick +=
delegate
{
read();
};
read();
}
// not array
// is object
// no prototype
}
public __CheckBox()
{
HTMLTarget = new IHTMLDiv();
HTMLTarget.style.whiteSpace = ScriptCoreLib.JavaScript.DOM.IStyle.WhiteSpaceEnum.nowrap;
InternalInputElement = new IHTMLInput(ScriptCoreLib.Shared.HTMLInputTypeEnum.checkbox, "");
InternalInputElement.style.margin = "0";
InternalInputElement.style.verticalAlign = "middle";
InternalInputElement.style.width = "auto";
label = new IHTMLLabel("", InternalInputElement);
label.style.verticalAlign = "middle";
label.style.marginLeft = "0.5em";
label.style.display = DOM.IStyle.DisplayEnum.inline;
label.onmousedown +=
e =>
{
e.preventDefault();
};
this.CheckStateChanged +=
delegate
{
if (this.ThreeState)
{
// http://www.whatwg.org/specs/web-apps/current-work/multipage/the-input-element.html#dom-input-indeterminate
this.InternalInputElement.indeterminate = (this.InternalCheckState == global::System.Windows.Forms.CheckState.Indeterminate);
}
};
this.InternalInputElement.onchange +=
e =>
{
// http://shamsmi.blogspot.com/2008/12/tri-state-checkbox-using-javascript.html
if (this.ThreeState)
{
if (this.InternalCheckState == global::System.Windows.Forms.CheckState.Checked)
{
// http://jsfiddle.net/chriscoyier/mGg85/2/
// http://jsfiddle.net/ysangkok/UhQc8/
//e.preventDefault();
//e.stopPropagation();
// next step is to go from checked to unchecked!
this.InternalInputElement.@checked = true;
this.CheckState = global::System.Windows.Forms.CheckState.Indeterminate;
return;
}
}
if (this.InternalCheckState == global::System.Windows.Forms.CheckState.Unchecked)
{
this.CheckState = global::System.Windows.Forms.CheckState.Checked;
return;
}
this.CheckState = global::System.Windows.Forms.CheckState.Unchecked;
};
HTMLTarget.appendChild(InternalInputElement, label);
this.InternalSetDefaultFont();
}
public __CheckBox()
{
HTMLTarget = new IHTMLDiv();
HTMLTarget.style.whiteSpace = ScriptCoreLib.JavaScript.DOM.IStyle.WhiteSpaceEnum.nowrap;
InternalInputElement = new IHTMLInput(ScriptCoreLib.Shared.HTMLInputTypeEnum.checkbox, "");
InternalInputElement.style.margin = "0";
InternalInputElement.style.verticalAlign = "middle";
label = new IHTMLLabel("", InternalInputElement);
label.style.verticalAlign = "middle";
label.style.marginLeft = "0.5em";
label.onmousedown +=
e =>
{
e.PreventDefault();
};
this.CheckStateChanged +=
delegate
{
if (this.ThreeState)
{
// http://www.whatwg.org/specs/web-apps/current-work/multipage/the-input-element.html#dom-input-indeterminate
this.InternalInputElement.indeterminate = (this.InternalCheckState == global::System.Windows.Forms.CheckState.Indeterminate);
}
};
this.InternalInputElement.onchange +=
e =>
{
// http://shamsmi.blogspot.com/2008/12/tri-state-checkbox-using-javascript.html
if (this.ThreeState)
{
if (this.InternalCheckState == global::System.Windows.Forms.CheckState.Checked)
{
// http://jsfiddle.net/chriscoyier/mGg85/2/
// http://jsfiddle.net/ysangkok/UhQc8/
//e.preventDefault();
//e.stopPropagation();
// next step is to go from checked to unchecked!
this.InternalInputElement.@checked = true;
this.CheckState = global::System.Windows.Forms.CheckState.Indeterminate;
return;
}
}
if (this.InternalCheckState == global::System.Windows.Forms.CheckState.Unchecked)
{
this.CheckState = global::System.Windows.Forms.CheckState.Checked;
return;
}
this.CheckState = global::System.Windows.Forms.CheckState.Unchecked;
};
HTMLTarget.appendChild(InternalInputElement, label);
this.InternalSetDefaultFont();
}
// https://sites.google.com/a/jsc-solutions.net/work/knowledge-base/15-dualvr/20150809
// the eye nor the display will be able to do any stereo
// until tech is near matrix capability. 2019?
// cubemap can be used for all long range scenes
// http://www.imdb.com/title/tt0112111/?ref_=nv_sr_1
// https://sites.google.com/a/jsc-solutions.net/work/knowledge-base/15-dualvr/20150808/cubemapcamera
// subst a: s:\jsc.svn\examples\javascript\chrome\apps\WebGL\ChromeEquirectangularCameraExperiment\ChromeEquirectangularCameraExperiment\bin\Debug\staging\ChromeEquirectangularCameraExperiment.Application\web
// Z:\jsc.svn\examples\javascript\chrome\apps\WebGL\ChromeEquirectangularCameraExperiment\ChromeEquirectangularCameraExperiment\bin\Debug\staging\ChromeEquirectangularCameraExperiment.Application\web
// ColladaLoader: Empty or non-existing file (assets/ChromeEquirectangularCameraExperiment/S6Edge.dae)
/// <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)
{
//FormStyler.AtFormCreated =
//s =>
//{
// s.Context.FormBorderStyle = System.Windows.Forms.FormBorderStyle.None;
// //var x = new ChromeTCPServerWithFrameNone.HTML.Pages.AppWindowDrag().AttachTo(s.Context.GetHTMLTarget());
// var x = new ChromeTCPServerWithFrameNone.HTML.Pages.AppWindowDragWithShadow().AttachTo(s.Context.GetHTMLTarget());
// s.Context.GetHTMLTarget().style.backgroundColor = "#efefef";
// //s.Context.GetHTMLTarget().style.backgroundColor = "#A26D41";
//};
#if AsWEBSERVER
#region += Launched chrome.app.window
// X:\jsc.svn\examples\javascript\chrome\apps\ChromeTCPServerAppWindow\ChromeTCPServerAppWindow\Application.cs
dynamic self = Native.self;
dynamic self_chrome = self.chrome;
object self_chrome_socket = self_chrome.socket;
if (self_chrome_socket != null)
{
// if we run as a server. we can open up on android.
//chrome.Notification.DefaultTitle = "Nexus7";
//chrome.Notification.DefaultIconUrl = new x128().src;
ChromeTCPServer.TheServerWithStyledForm.Invoke(
AppSource.Text
//, AtFormCreated: FormStyler.AtFormCreated
//AtFormConstructor:
// f =>
// {
// //arg[0] is typeof System.Int32
// //script: error JSC1000: No implementation found for this native method, please implement [static System.Drawing.Color.FromArgb(System.Int32)]
// // X:\jsc.svn\examples\javascript\forms\Test\TestFromArgb\TestFromArgb\ApplicationControl.cs
// f.BackColor = System.Drawing.Color.FromArgb(0xA26D41);
// }
);
return;
}
#endregion
#else
#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: "ChromeEquirectangularCameraExperiment");
// https://developer.chrome.com/apps/app_window#type-CreateWindowOptions
var xappwindow = await chrome.app.window.create(
Native.document.location.pathname, options: new
{
alwaysOnTop = true,
visibleOnAllWorkspaces = true
}
);
//xappwindow.setAlwaysOnTop
xappwindow.show();
await xappwindow.contentWindow.async.onload;
Console.WriteLine("chrome.app.window loaded!");
};
return;
}
}
#endregion
#endif
Native.css.style.backgroundColor = "blue";
Native.css.style.overflow = IStyle.OverflowEnum.hidden;
Native.body.Clear();
new IHTMLPre { "can we stream it into VR, shadertoy, youtube 360, youtube stereo yet?" }.AttachToDocument();
var sw = Stopwatch.StartNew();
var pause = new IHTMLInput { type = ScriptCoreLib.Shared.HTMLInputTypeEnum.checkbox, title = "pause" }.AttachToDocument();
pause.onchange += delegate
{
if (pause.@checked)
sw.Stop();
else
sw.Start();
};
var oo = new List<THREE.Object3D>();
#region scene
var window = Native.window;
// what about physics and that portal rendering?
// if we are running as a chrome web server, we may also be opened as android ndk webview app
//var cameraPX = new THREE.PerspectiveCamera(fov: 90, aspect: window.aspect, near: 1, far: 2000);
// once we update source
// save the source
// manually recompile
//cameraPX.position.z = 400;
//// the camera should be close enough for the object to float off the FOV of PX
//cameraPX.position.z = 200;
// scene
// can we make the 3D object orbit around us ?
// and
// stream it to vr?
var scene = new THREE.Scene();
var ambient = new THREE.AmbientLight(0x303030);
scene.add(ambient);
// should we fix jsc to do a more correct IDL?
var directionalLight = new THREE.DirectionalLight(0xffffff, 0.7);
directionalLight.position.set(0, 0, 1);
scene.add(directionalLight);
// whats WebGLRenderTargetCube do?
// WebGLRenderer preserveDrawingBuffer
//const int size = 128;
//const int size = 256; // 6 faces, 12KB
//const int size = 512; // 6 faces, ?
// WebGL: drawArrays: texture bound to texture unit 0 is not renderable. It maybe non-power-of-2 and have incompatible texture filtering or is not 'texture complete'. Or the texture is Float or Half Float type with linear filtering while OES_float_linear or OES_half_float_linear extension is not enabled.
//const int size = 720; // 6 faces, ?
const int size = 1024; // 6 faces, ?
var renderer0 = new THREE.WebGLRenderer(
new
{
antialias = true,
alpha = true,
preserveDrawingBuffer = true
}
);
// https://github.com/mrdoob/three.js/issues/3836
// the construct. white bg
renderer0.setClearColor(0xfffff, 1);
//renderer.setSize(window.Width, window.Height);
renderer0.setSize(size, size);
//renderer0.domElement.AttachToDocument();
//rendererPX.domElement.style.SetLocation(0, 0);
//renderer0.domElement.style.SetLocation(4, 4);
// top
// http://stackoverflow.com/questions/27612524/can-multiple-webglrenderers-render-the-same-scene
// need a place to show the cubemap face to GUI
// how does the stereo OTOY do it?
// https://www.opengl.org/wiki/Sampler_(GLSL)
// http://www.richardssoftware.net/Home/Post/25
// [+X, –X, +Y, –Y, +Z, –Z] fa
var uizoom = 0.1;
var far = 0xffff;
#region y
// need to rotate90?
var cameraNY = new THREE.PerspectiveCamera(fov: 90, aspect: 1.0, near: 1, far: far);
cameraNY.lookAt(new THREE.Vector3(0, -1, 0));
//cameraNY.lookAt(new THREE.Vector3(0, 1, 0));
var canvasNY = new CanvasRenderingContext2D(size, size);
canvasNY.canvas.style.SetLocation(8 + (int)(uizoom * size + 8) * 1, 8 + (int)(uizoom * size + 8) * 2);
canvasNY.canvas.title = "NY";
canvasNY.canvas.AttachToDocument();
canvasNY.canvas.style.transformOrigin = "0 0";
canvasNY.canvas.style.transform = $"scale({uizoom})";
var cameraPY = new THREE.PerspectiveCamera(fov: 90, aspect: 1.0, near: 1, far: far);
cameraPY.lookAt(new THREE.Vector3(0, 1, 0));
//cameraPY.lookAt(new THREE.Vector3(0, -1, 0));
var canvasPY = new CanvasRenderingContext2D(size, size);
canvasPY.canvas.style.SetLocation(8 + (int)(uizoom * size + 8) * 1, 8 + (int)(uizoom * size + 8) * 0);
canvasPY.canvas.title = "PY";
canvasPY.canvas.AttachToDocument();
canvasPY.canvas.style.transformOrigin = "0 0";
canvasPY.canvas.style.transform = $"scale({uizoom})";
#endregion
// transpose xz?
#region x
var cameraNX = new THREE.PerspectiveCamera(fov: 90, aspect: 1.0, near: 1, far: far);
cameraNX.lookAt(new THREE.Vector3(0, 0, 1));
//cameraNX.lookAt(new THREE.Vector3(0, 0, -1));
//cameraNX.lookAt(new THREE.Vector3(-1, 0, 0));
//cameraNX.lookAt(new THREE.Vector3(1, 0, 0));
var canvasNX = new CanvasRenderingContext2D(size, size);
canvasNX.canvas.style.SetLocation(8 + (int)(uizoom * size + 8) * 2, 8 + (int)(uizoom * size + 8) * 1);
canvasNX.canvas.title = "NX";
canvasNX.canvas.AttachToDocument();
canvasNX.canvas.style.transformOrigin = "0 0";
canvasNX.canvas.style.transform = $"scale({uizoom})";
var cameraPX = new THREE.PerspectiveCamera(fov: 90, aspect: 1.0, near: 1, far: far);
cameraPX.lookAt(new THREE.Vector3(0, 0, -1));
//cameraPX.lookAt(new THREE.Vector3(0, 0, 1));
//cameraPX.lookAt(new THREE.Vector3(1, 0, 0));
//cameraPX.lookAt(new THREE.Vector3(-1, 0, 0));
var canvasPX = new CanvasRenderingContext2D(size, size);
canvasPX.canvas.style.SetLocation(8 + (int)(uizoom * size + 8) * 0, 8 + (int)(uizoom * size + 8) * 1);
canvasPX.canvas.title = "PX";
canvasPX.canvas.AttachToDocument();
canvasPX.canvas.style.transformOrigin = "0 0";
canvasPX.canvas.style.transform = $"scale({uizoom})";
#endregion
#region z
var cameraNZ = new THREE.PerspectiveCamera(fov: 90, aspect: 1.0, near: 1, far: far);
//cameraNZ.lookAt(new THREE.Vector3(0, 0, -1));
cameraNZ.lookAt(new THREE.Vector3(1, 0, 0));
//cameraNX.lookAt(new THREE.Vector3(-1, 0, 0));
//cameraNZ.lookAt(new THREE.Vector3(0, 0, 1));
var canvasNZ = new CanvasRenderingContext2D(size, size);
canvasNZ.canvas.style.SetLocation(8 + (int)(uizoom * size + 8) * 3, 8 + (int)(uizoom * size + 8) * 1);
canvasNZ.canvas.title = "NZ";
canvasNZ.canvas.AttachToDocument();
canvasNZ.canvas.style.transformOrigin = "0 0";
canvasNZ.canvas.style.transform = $"scale({uizoom})";
var cameraPZ = new THREE.PerspectiveCamera(fov: 90, aspect: 1.0, near: 1, far: far);
//cameraPZ.lookAt(new THREE.Vector3(1, 0, 0));
cameraPZ.lookAt(new THREE.Vector3(-1, 0, 0));
//cameraPZ.lookAt(new THREE.Vector3(0, 0, 1));
//cameraPZ.lookAt(new THREE.Vector3(0, 0, -1));
var canvasPZ = new CanvasRenderingContext2D(size, size);
canvasPZ.canvas.style.SetLocation(8 + (int)(uizoom * size + 8) * 1, 8 + (int)(uizoom * size + 8) * 1);
canvasPZ.canvas.title = "PZ";
canvasPZ.canvas.AttachToDocument();
canvasPZ.canvas.style.transformOrigin = "0 0";
canvasPZ.canvas.style.transform = $"scale({uizoom})";
#endregion
// c++ alias locals would be nice..
var canvas0 = (IHTMLCanvas)renderer0.domElement;
var old = new
{
CursorX = 0,
CursorY = 0
};
var st = new Stopwatch();
st.Start();
//canvas0.css.active.style.cursor = IStyle.CursorEnum.move;
#region onmousedown
Native.body.onmousedown +=
async e =>
{
if (e.Element.nodeName.ToLower() != "canvas")
return;
// movementX no longer works
old = new
{
e.CursorX,
e.CursorY
};
//e.CaptureMouse();
var release = e.Element.CaptureMouse();
await e.Element.async.onmouseup;
release();
};
#endregion
// X:\jsc.svn\examples\javascript\Test\TestMouseMovement\TestMouseMovement\Application.cs
#region onmousemove
Native.body.onmousemove +=
e =>
{
if (e.Element.nodeName.ToLower() != "canvas")
{
Native.body.style.cursor = IStyle.CursorEnum.@default;
return;
}
e.preventDefault();
e.stopPropagation();
Native.body.style.cursor = IStyle.CursorEnum.move;
var pointerLock = canvas0 == Native.document.pointerLockElement;
//Console.WriteLine(new { e.MouseButton, pointerLock, e.movementX });
if (e.MouseButton == IEvent.MouseButtonEnum.Left)
{
oo.WithEach(
x =>
{
x.rotation.y += 0.006 * (e.CursorX - old.CursorX);
x.rotation.x += 0.006 * (e.CursorY - old.CursorY);
}
);
old = new
{
e.CursorX,
e.CursorY
};
}
};
#endregion
// THREE.WebGLProgram: gl.getProgramInfoLog() C:\fakepath(78,3-98): warning X3557: loop only executes for 1 iteration(s), forcing loop to unroll
// THREE.WebGLProgram: gl.getProgramInfoLog() (79,3-98): warning X3557: loop only executes for 1 iteration(s), forcing loop to unroll
// http://www.roadtovr.com/youtube-confirms-stereo-3d-360-video-support-coming-soon/
// https://www.youtube.com/watch?v=D-Wl9jAB45Q
#region spherical
var gl = new WebGLRenderingContext(alpha: true, preserveDrawingBuffer: true);
var c = gl.canvas.AttachToDocument();
// 3840x2160
//c.style.SetSize(3840, 2160);
// https://sites.google.com/a/jsc-solutions.net/work/knowledge-base/15-dualvr/20150722/360-youtube
c.width = 3840;
c.height = 2160;
// wont work
//c.width = 8192;
//c.height = 4096;
// this has the wrong aspect?
//c.width = 6466;
//c.height = 3232;
new IHTMLPre { new { c.width, c.height } }.AttachToDocument();
//6466x3232
//var suizoom = 720f / c.height;
//var suizoom = 360f / c.height;
var suizoom = 480f / c.width;
c.style.transformOrigin = "0 0";
c.style.transform = $"scale({suizoom})";
c.style.backgroundColor = "yellow";
c.style.position = IStyle.PositionEnum.absolute;
c.style.SetLocation(8 + (int)(uizoom * size + 8) * 0, 8 + (int)(uizoom * size + 8) * 3);
var pass = new CubeToEquirectangular.Library.ShaderToy.EffectPass(
null,
gl,
precission: CubeToEquirectangular.Library.ShaderToy.DetermineShaderPrecission(gl),
supportDerivatives: gl.getExtension("OES_standard_derivatives") != null,
callback: null,
obj: null,
forceMuted: false,
forcePaused: false,
//quadVBO: Library.ShaderToy.createQuadVBO(gl, right: 0, top: 0),
outputGainNode: null
);
// how shall we upload our textures?
// can we reference GLSL.samplerCube yet?
//pass.mInputs[0] = new samplerCube { };
pass.mInputs[0] = new CubeToEquirectangular.Library.ShaderToy.samplerCube { };
pass.MakeHeader_Image();
var vs = new Shaders.ProgramFragmentShader();
pass.NewShader_Image(vs);
#endregion
//var xor = new HTML.Images.FromAssets.tiles_regrid().AttachToDocument();
//var xor = new HTML.Images.FromAssets.Orion360_test_image_8192x4096().AttachToDocument();
//var xor = new HTML.Images.FromAssets._2_no_clouds_4k().AttachToDocument();
var frame0 = new HTML.Images.FromAssets._2294472375_24a3b8ef46_o().AttachToDocument();
// 270px
//xor.style.height = "";
frame0.style.height = "270px";
frame0.style.width = "480px";
frame0.style.SetLocation(
8 + (int)(uizoom * size + 8) * 0 + 480 + 16, 8 + (int)(uizoom * size + 8) * 3);
var mesh = new THREE.Mesh(new THREE.SphereGeometry(0xFFF, 50, 50),
new THREE.MeshBasicMaterial(new
{
map = THREE.ImageUtils.loadTexture(
//new HTML.Images.FromAssets._2294472375_24a3b8ef46_o().src
//new HTML.Images.FromAssets._4008650304_7f837ccbb7_b().src
frame0.src
//new WebGLEquirectangularPanorama.HTML.Images.FromAssets.PANO_20130616_222058().src
//new WebGLEquirectangularPanorama.HTML.Images.FromAssets.PANO_20121225_210448().src
)
}));
mesh.scale.x = -1;
#region fixup rotation
//mesh.rotateOnAxis(new THREE.Vector3(1, 0, 0), Math.PI / 2);
//mesh.rotateOnAxis(new THREE.Vector3(1, 0, 0), -Math.PI / 2);
mesh.rotateOnAxis(new THREE.Vector3(0, 1, 0), -Math.PI / 2);
#endregion
scene.add(mesh);
frame0.onclick += delegate
{
// http://paulbourke.net/papers/vsmm2006/vsmm2006.pdf
// A method of creating synthetic stereoscopic panoramic images that can be implemented
//in most rendering packages has been presented. If single panoramic pairs can be created
//then stereoscopic panoramic movies are equally possible giving rise to the prospect of
//movies where the viewer can interact with, at least with regard to what they choose to look
//at.These images can be projected so as to engage the two features of the human visual
//system that assist is giving us a sense of immersion, the feeling of “being there”. That is,
//imagery that contains parallax information as captured from two horizontally separated eye
//positions (stereopsis)and imagery that fills our peripheral vision.The details that define
//how the two panoramic images should be created in rendering packages are provided, in
//particular, how to precisely configure the virtual cameras and control the distance to zero
//parallax.
// grab a frame
var base64 = gl.canvas.toDataURL();
frame0.src = base64;
// 7MB!
};
new Models.ColladaS6Edge().Source.Task.ContinueWithResult(
dae =>
{
// 90deg
dae.rotation.x = -Math.Cos(Math.PI);
//dae.scale.x = 30;
//dae.scale.y = 30;
//dae.scale.z = 30;
dae.position.z = -(65 - 200);
var scale = 0.9;
// jsc, do we have ILObserver available yet?
dae.scale.x = scale;
dae.scale.y = scale;
dae.scale.z = scale;
#region onmousewheel
Native.body.onmousewheel +=
e =>
{
e.preventDefault();
//camera.position.z = 1.5;
// min max. shall adjust speed also!
// max 4.0
// min 0.6
dae.position.z -= 10.0 * e.WheelDirection;
//camera.position.z = 400;
//dae.position.z = dae.position.z.Max(-200).Min(200);
//Native.document.title = new { z }.ToString();
};
#endregion
//dae.position.y = -80;
scene.add(dae);
oo.Add(dae);
// view-source:http://threejs.org/examples/webgl_multiple_canvases_circle.html
// https://threejsdoc.appspot.com/doc/three.js/src.source/extras/cameras/CubeCamera.js.html
Native.window.onframe +=
e =>
{
//if (pause) return;
//if (pause.@checked)
// return;
// can we float out of frame?
// haha. a bit too flickery.
//dae.position.x = Math.Sin(e.delay.ElapsedMilliseconds * 0.01) * 50.0;
//dae.position.x = Math.Sin(e.delay.ElapsedMilliseconds * 0.001) * 190.0;
dae.position.x = Math.Sin(sw.ElapsedMilliseconds * 0.0001) * 190.0;
dae.position.y = Math.Cos(sw.ElapsedMilliseconds * 0.0001) * 90.0;
// manual rebuild?
// red compiler notifies laptop chrome of pending update
// app reloads
renderer0.clear();
//rendererPY.clear();
//cameraPX.aspect = canvasPX.aspect;
//cameraPX.updateProjectionMatrix();
// um what does this do?
//cameraPX.position.z += (z - cameraPX.position.z) * e.delay.ElapsedMilliseconds / 200.0;
// mousewheel allos the camera to move closer
// once we see the frame in vr, can we udp sync vr tracking back to laptop?
//this.targetPX.x += 1;
//this.targetNX.x -= 1;
//this.targetPY.y += 1;
//this.targetNY.y -= 1;
//this.targetPZ.z += 1;
//this.targetNZ.z -= 1;
// how does the 360 or shadertoy want our cubemaps?
// and then rotate right?
// how can we render cubemap?
#region x
// upside down?
renderer0.render(scene, cameraPX);
canvasPX.drawImage((IHTMLCanvas)renderer0.domElement, 0, 0, size, size);
renderer0.render(scene, cameraNX);
canvasNX.drawImage((IHTMLCanvas)renderer0.domElement, 0, 0, size, size);
#endregion
#region z
renderer0.render(scene, cameraPZ);
canvasPZ.drawImage((IHTMLCanvas)renderer0.domElement, 0, 0, size, size);
renderer0.render(scene, cameraNZ);
canvasNZ.drawImage((IHTMLCanvas)renderer0.domElement, 0, 0, size, size);
#endregion
#region y
renderer0.render(scene, cameraPY);
//canvasPY.save();
//canvasPY.translate(0, size);
//canvasPY.rotate((float)(-Math.PI / 2));
canvasPY.drawImage((IHTMLCanvas)renderer0.domElement, 0, 0, size, size);
//canvasPY.restore();
renderer0.render(scene, cameraNY);
//canvasNY.save();
//canvasNY.translate(size, 0);
//canvasNY.rotate((float)(Math.PI / 2));
canvasNY.drawImage((IHTMLCanvas)renderer0.domElement, 0, 0, size, size);
//canvasNY.restore();
// ?
#endregion
//renderer0.render(scene, cameraPX);
//rendererPY.render(scene, cameraPY);
// at this point we should be able to render the sphere texture
//public const uint TEXTURE_CUBE_MAP_POSITIVE_X = 34069;
//public const uint TEXTURE_CUBE_MAP_NEGATIVE_X = 34070;
//public const uint TEXTURE_CUBE_MAP_POSITIVE_Y = 34071;
//public const uint TEXTURE_CUBE_MAP_NEGATIVE_Y = 34072;
//public const uint TEXTURE_CUBE_MAP_POSITIVE_Z = 34073;
//public const uint TEXTURE_CUBE_MAP_NEGATIVE_Z = 34074;
//var cube0 = new IHTMLImage[] {
// new CSS3DPanoramaByHumus.HTML.Images.FromAssets.humus_px(),
// new CSS3DPanoramaByHumus.HTML.Images.FromAssets.humus_nx(),
// new CSS3DPanoramaByHumus.HTML.Images.FromAssets.humus_py(),
// new CSS3DPanoramaByHumus.HTML.Images.FromAssets.humus_ny(),
// new CSS3DPanoramaByHumus.HTML.Images.FromAssets.humus_pz(),
// new CSS3DPanoramaByHumus.HTML.Images.FromAssets.humus_nz()
//};
new[] {
canvasPX, canvasNX,
canvasPY, canvasNY,
canvasPZ, canvasNZ
}.WithEachIndex(
(img, index) =>
{
gl.bindTexture(gl.TEXTURE_CUBE_MAP, pass.tex);
//gl.pixelStorei(gl.UNPACK_FLIP_X_WEBGL, false);
gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, false);
// http://stackoverflow.com/questions/15364517/pixelstoreigl-unpack-flip-y-webgl-true
// https://msdn.microsoft.com/en-us/library/dn302429(v=vs.85).aspx
//gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, 0);
//gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, 1);
gl.texImage2D(gl.TEXTURE_CUBE_MAP_POSITIVE_X + (uint)index, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, img.canvas);
}
);
pass.Paint_Image(
0,
0,
0,
0,
0
//,
// gl_FragCoord
// cannot be scaled, and can be referenced directly.
// need another way to scale
//zoom: 0.3f
);
//paintsw.Stop();
// what does it do?
gl.flush();
};
}
);
#endregion
Console.WriteLine("do you see it?");
}
public CSSStyleRuleMonkier this[IHTMLInput e]
{
get
{
return this[(IHTMLInput)e];
}
}
private void InternalCreateRadio()
{
__Control c = this.Parent;
if (c == null)
return;
var old = button;
var old_checked = old.@checked;
// remove events from the old element
if (_CheckedChanged.EventInternal != null)
{
this.button.onchange -= _CheckedChanged.EventInternal;
}
button.Orphanize();
this.button = IHTMLInput.CreateRadio(c.ControlGroupName, old.value, old_checked);
// we need to rewire
this.button.id = this.label.htmlFor;
InternalUpdate();
// add events to the new element
if (_CheckedChanged.EventInternal != null)
{
this.button.onchange += _CheckedChanged.EventInternal;
}
//Console.WriteLine("checked: " + old_checked);
}
/// <summary>
/// Creates a new control
/// </summary>
/// <param name="DataElement">The hidden data element</param>
public SimpleFilmstrip()
{
IHTMLDiv Control = new IHTMLDiv();
Control.style.position = IStyle.PositionEnum.absolute;
new filmstrip().ToBackground(Control, false);
//Control.style.background = "url(assets/SimpleFilmstrip/filmstrip.png) no-repeat";
Control.style.height = "600px";
Control.style.width = "326px";
var index = 0;
var t_icount = default(int);
var t_interval = default(int);
var t_iwidth = default(int);
var t_iheight = default(int);
var t_feed = default(string);
var Restart = default(Action);
var feed = new IHTMLInput(HTMLInputTypeEnum.text,
new veh_cy().src
);
var iwidth = new IHTMLInput(HTMLInputTypeEnum.text, "48");
var iheight = new IHTMLInput(HTMLInputTypeEnum.text, "48");
var icount = new IHTMLInput(HTMLInputTypeEnum.text, "32");
var interval = new IHTMLInput(HTMLInputTypeEnum.text, "50");
var fps = new IHTMLInput(HTMLInputTypeEnum.text, "24");
feed.onchange += delegate { Restart(); };
iwidth.onchange += delegate { Restart(); };
iheight.onchange += delegate { Restart(); };
interval.onchange += delegate
{
int v = int.Parse(interval.value);
if (v == 0)
{
return;
}
fps.value = "" + (1000 / v);
Restart();
};
icount.onchange += delegate { Restart(); };
fps.onchange += delegate
{
int v = int.Parse(fps.value);
if (v == 0)
{
return;
}
interval.value = "" + (1000 / v);
Restart();
};
var fieldset = new IHTMLElement(IHTMLElement.HTMLElementEnum.fieldset);
fieldset.style.width = "30em";
fieldset.appendChild(new IHTMLElement(IHTMLElement.HTMLElementEnum.legend, "Properties"));
Func <string, IHTMLElement, IHTMLDiv> AsLabel =
(string text, IHTMLElement control) =>
{
var label = new IHTMLLabel(text, control);
control.style.position = IStyle.PositionEnum.absolute;
control.style.left = "8em";
return(new IHTMLDiv(label, control));
};
fieldset.appendChild(AsLabel("feed:", feed));
fieldset.appendChild(AsLabel("width:", iwidth));
fieldset.appendChild(AsLabel("height:", iheight));
fieldset.appendChild(AsLabel("count:", icount));
fieldset.appendChild(AsLabel("interval:", interval));
fieldset.appendChild(AsLabel("fps:", fps));
fieldset.style.position = IStyle.PositionEnum.absolute;
fieldset.style.top = "320px";
var image = new IHTMLDiv();
image.style.position = IStyle.PositionEnum.absolute;
image.style.top = "52px";
image.style.left = "32px";
var t = new Timer();
t.Tick += delegate
{
image.style.backgroundPosition = "-" + (index * t_iwidth) + "px 0px";
index = (index + 1) % t_icount;
};
Restart =
delegate
{
t_icount = int.Parse(icount.value);
t_interval = int.Parse(interval.value);
t_iwidth = int.Parse(iwidth.value);
t_iheight = int.Parse(iheight.value);
t_feed = feed.value;
image.style.background = "url(" + t_feed + ") no-repeat";
image.style.width = t_iwidth + "px";
image.style.height = t_iheight + "px";
t.StartInterval(t_interval);
};
Restart();
Control.appendChild(image, fieldset);
Control.AttachToDocument();
}
/// <summary>
/// This is a javascript application.
/// </summary>
/// <param name="page">HTML document rendered by the web server which can now be enhanced.</param>
public Application(IApp page)
{
// https://sites.google.com/a/jsc-solutions.net/work/knowledge-base/15-dualvr/20150712
new { }.With(
async delegate
{
Native.body.Clear();
// would it be easy to do head tracking via webcam for VR?
// the app would run on android, yet
// two sattelites could spawn on two laptops to track the head.
// would we be able to thread hop between camera devices and android?
// http://shopap.lenovo.com/hk/en/laptops/lenovo/u-series/u330p/
// The U330p's integrated 720p HD webcam
Console.WriteLine("awaiting onvideo...");
var v = await Native.window.navigator.async.onvideo;
Console.WriteLine("awaiting onvideo... done");
// 93ms getUserMedia error { code = , err = [object NavigatorUserMediaError] }
v.AttachToDocument();
v.play();
// what do we see at this point?
// first, could we detect greenscreen without having one?
// assuming the camera is static, we could remove the pixels that never seem to move
// a shader program, consuming the video would be able to apply the effects a lot faster.
// doing it in ui thread will slow it down.
// videoHeight: 480
//videoWidth: 640
//
new IHTMLPre {
new { v.videoWidth, v.videoHeight }
}.AttachToDocument();
// do we know the size of the cam?
// {{ videoWidth = 0, videoHeight = 0 }}
var sw = Stopwatch.StartNew();
//Error CS4004 Cannot await in an unsafe context TestGetUserMedia X:\jsc.svn\examples\javascript\async\test\TestGetUserMedia\TestGetUserMedia\Application.cs 45
// https://social.msdn.microsoft.com/Forums/en-US/29a3ca5b-c783-4197-af08-7b3c83585e99/minor-compiler-message-unsafe-async?forum=async
while (v.videoWidth == 0)
await Native.window.async.onframe;
new IHTMLPre {
new { v.videoWidth, v.videoHeight, sw.ElapsedMilliseconds, Environment.ProcessorCount }
}.AttachToDocument();
// {{ videoWidth = 640, videoHeight = 480, ElapsedMilliseconds = 793, ProcessorCount = 4 }}
// {{ videoWidth = 1280, videoHeight = 720, ElapsedMilliseconds = 368, ProcessorCount = 4 }}
var frame0 = new CanvasRenderingContext2D(
v.videoWidth, v.videoHeight
);
frame0.canvas.AttachToDocument();
var frame0sw = Stopwatch.StartNew();
var frame0c = 0;
// battery/full speed
// {{ frame0c = 1752, ElapsedMilliseconds = 66 }}
//
new IHTMLPre {
() => new { frame0c, frame0sw.ElapsedMilliseconds, fps = 1000 / frame0sw.ElapsedMilliseconds }
}.AttachToDocument();
// jsc, when can we start using semaphores?
// this could also trgger state sync
//var xx = new System.Threading.SemaphoreSlim(1);
var slider = new IHTMLInput
{
type = ScriptCoreLib.Shared.HTMLInputTypeEnum.range,
max = 4 * v.videoWidth * v.videoHeight,
valueAsNumber = 2 * v.videoWidth * v.videoHeight
}.AttachToDocument();
new { }.With(
async delegate
{
// could we hop into worker thread, and await for bytes to render?
// this is essentially a shader
// switch to worker here
// at runtime we should know, which fields in this state are in use
do
{
frame0c++;
frame0sw = Stopwatch.StartNew();
frame0.drawImage(
v,
0, 0, v.videoWidth, v.videoHeight);
// could we do thread hopping here to multicore process the data without shaders?
// RGB,
// would we have each core work on 8bits. a single color?
// X:\jsc.svn\examples\javascript\canvas\CanvasFromBytes\CanvasFromBytes\Application.cs
var rgba_bytes = frame0.bytes;
//var rgba_pixels = (rgba[])rgba_bytes;
//Error CS0030 Cannot convert type 'byte[]' to 'TestGetUserMedia.rgba[]' TestGetUserMedia X:\jsc.svn\examples\javascript\async\test\TestGetUserMedia\TestGetUserMedia\Application.cs 98
#if FPOINTERS
unsafe
{
//Error CS0030 Cannot convert type 'byte[]' to 'TestGetUserMedia.rgba*' TestGetUserMedia X:\jsc.svn\examples\javascript\async\test\TestGetUserMedia\TestGetUserMedia\Application.cs 109
//var rgba_pixels = (rgba*)rgba_bytes;
//Error CS0030 Cannot convert type 'byte[]' to 'void*' TestGetUserMedia X:\jsc.svn\examples\javascript\async\test\TestGetUserMedia\TestGetUserMedia\Application.cs 110
fixed (byte* rgba_ptr = rgba_bytes)
{
// script: error JSC1000: running a newer compiler? opcode unsupported - [0x0035] sizeof +1 -0
// how would a shader do it?
var rgba_pixels = (rgba*)rgba_ptr;
// looks legit
// how does it compile for js?
for (int x = 0; x < v.videoWidth; x++)
for (int y = 0; y < v.videoHeight; y++)
{
rgba_pixels[x + y * v.videoWidth].b = 0;
rgba_pixels[x + y * v.videoWidth].g = 0;
}
}
}
#endif
// make it all blue
// glsl. u8vec4
// lets deal only with first half of bytes
//for (int x = 0; x < rgba_bytes.Length / 2; x += 4)
//for (int x = 0; x < rgba_bytes.Length; x += 4)
for (int x = 0; x < slider.valueAsNumber; x += 4)
{
//// red
//rgba_bytes[x + 0] = 0;
//rgba_bytes[x + 1] = (byte)(1 - rgba_bytes[x + 1]);
//// blue
//rgba_bytes[x + 2] = 0;
// red
rgba_bytes[x + 0] = 0;
rgba_bytes[x + 1] = (byte)(
(3 * 255 - rgba_bytes[x + 0] - rgba_bytes[x + 1] - rgba_bytes[x + 2])
/ 3
);
// blue
rgba_bytes[x + 2] = 0;
}
frame0.bytes = rgba_bytes;
} while (await Native.window.async.onframe);
}
);
// {{ videoWidth = 640, videoHeight = 480, ElapsedMilliseconds = 109 }}
await Native.window.async.onblur;
// stream is not stopped yet?
//v.Orphanize();
Native.body.style.backgroundColor = "yellow";
}
);
}
/// <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)
{
Func<IHTMLAudio, Action<double>> loop = snd =>
{
Action iloop = null;
var r = new IHTMLInput();
var label = new IHTMLLabel(snd.src, r).AttachToDocument();
dynamic rr = r;
rr.type = "range";
r.AttachToDocument();
Action newvolume = delegate
{
snd.volume = int.Parse(r.value) / 100;
};
r.onchange +=
delegate
{
newvolume();
};
iloop =
delegate
{
Console.WriteLine("at canplaythrough " + new { snd.duration });
newvolume();
snd.play();
snd.onended +=
delegate
{
Console.WriteLine("at onended");
};
//var xsnd = snd;
var xsnd = new IHTMLAudio { src = snd.src };
xsnd.autobuffer = true;
new ScriptCoreLib.JavaScript.Runtime.Timer(
delegate
{
snd.volume = snd.volume * 0.5;
Console.WriteLine("at timer " + new { snd.currentTime, snd.duration });
snd = xsnd;
iloop();
}
).StartTimeout((int)(1000 * snd.duration - 0.8));
xsnd.load();
};
snd.autobuffer = true;
// http://areweplayingyet.org/event-canplaythrough
Console.WriteLine("waiting for canplaythrough");
snd.addEventListener(
"canplaythrough",
new Action(
delegate
{
iloop();
}
)
);
new IHTMLBreak().AttachToDocument();
return
nextvolume =>
{
r.value = "" + (int)(nextvolume * 100);
newvolume();
};
};
//loop(new helicopter1wav());
var r0 = loop(new dieselloop());
var r1 = loop(new dieselloopm5());
var r2 = loop(new dieselloopm5m5());
// we need SIN
var zero = 0;
var lookup = new[] {
new double [] {zero, 0, 0},
new double [] {0, 0, 1},
new double [] {0, 1, 0},
new double [] {1, 0, 0},
};
var tween_r0 = NumericEmitter.OfDouble(
(x, y) =>
{
r0(x);
}
);
var tween_r1 = NumericEmitter.OfDouble(
(x, y) =>
{
r1(x);
}
);
var tween_r2 = NumericEmitter.OfDouble(
(x, y) =>
{
r2(x);
}
);
Action masterswitchchanged = delegate
{
var masterswitch = int.Parse(page.masterswitch.value);
Console.WriteLine(
new { masterswitch }
);
lookup[masterswitch].With(
x =>
{
tween_r0(x[0], 0);
tween_r1(x[1], 0);
tween_r2(x[2], 0);
}
);
};
page.masterswitch.onchange +=
delegate
{
masterswitchchanged();
};
page.masterswitch.value = "" + (lookup.Length - 1);
masterswitchchanged();
}
public void Send()
{
_timestart = IDate.Now.getTime();
TimeElapsed = 0;
LastException = null;
if (BeforeSend != null)
{
BeforeSend(this);
}
if (Descriptor.Description == null)
{
string err = "header not set";
System.Console.WriteLine(err);
if (DemandHeader)
{
throw new System.Exception(err);
}
}
string json = ToJSON();
if (IsVerbose)
{
System.Console.WriteLine(" => [" + Descriptor.Description + "] " + json.Length + " bytes");
}
Worker.StartInterval();
if (IsVerbose)
{
System.Console.WriteLine("var data = " + json + ";");
System.Console.WriteLine(json.Length + " bytes sent");
}
if (Form == null)
{
Request.open(HTTPMethodEnum.POST, Url);
Request.send(json);
Request.InvokeOnComplete(
delegate
{
ResponseText = Request.responseText;
GotResponse();
});
}
else
{
IHTMLInput z = new IHTMLInput(HTMLInputTypeEnum.hidden);
z.name = Helper.FormTemplateJSONField;
z.value = Convert.ToBase64String(json);
Form.appendChild(z);
Form.target = Descriptor.Callback;
Form.submit();
z.Orphanize();
}
}
// http://youtu.be/Lo1IU8UAutE
// 60hz 2160 4K!
// The equirectangular projection was used in map creation since it was invented around 100 A.D. by Marinus of Tyre.
// C:\Users\Arvo> "x:\util\android-sdk-windows\platform-tools\adb.exe" push "X:\vr\hzsky.png" "/sdcard/oculus/360photos/"
//1533 KB/s(3865902 bytes in 2.461s)
//C:\Users\Arvo> "x:\util\android-sdk-windows\platform-tools\adb.exe" push "X:\vr\hznosky.png" "/sdcard/oculus/360photos/"
//1556 KB/s(2714294 bytes in 1.703s)
// "x:\util\android-sdk-windows\platform-tools\adb.exe" push "X:\vr\hz2048c3840x2160.png" "/sdcard/oculus/360photos/"
// https://sites.google.com/a/jsc-solutions.net/work/knowledge-base/15-dualvr/20150809/chrome360hz
// https://sites.google.com/a/jsc-solutions.net/work/knowledge-base/15-dualvr/20150809
// the eye nor the display will be able to do any stereo
// until tech is near matrix capability. 2019?
// cubemap can be used for all long range scenes
// http://www.imdb.com/title/tt0112111/?ref_=nv_sr_1
// https://sites.google.com/a/jsc-solutions.net/work/knowledge-base/15-dualvr/20150808/cubemapcamera
// subst a: s:\jsc.svn\examples\javascript\chrome\apps\WebGL\Chrome360HZ\Chrome360HZ\bin\Debug\staging\Chrome360HZ.Application\web
// Z:\jsc.svn\examples\javascript\chrome\apps\WebGL\Chrome360HZ\Chrome360HZ\bin\Debug\staging\Chrome360HZ.Application\web
// ColladaLoader: Empty or non-existing file (assets/Chrome360HZ/S6Edge.dae)
/// <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)
{
//FormStyler.AtFormCreated =
//s =>
//{
// s.Context.FormBorderStyle = System.Windows.Forms.FormBorderStyle.None;
// //var x = new ChromeTCPServerWithFrameNone.HTML.Pages.AppWindowDrag().AttachTo(s.Context.GetHTMLTarget());
// var x = new ChromeTCPServerWithFrameNone.HTML.Pages.AppWindowDragWithShadow().AttachTo(s.Context.GetHTMLTarget());
// s.Context.GetHTMLTarget().style.backgroundColor = "#efefef";
// //s.Context.GetHTMLTarget().style.backgroundColor = "#A26D41";
//};
#if AsWEBSERVER
#region += Launched chrome.app.window
// X:\jsc.svn\examples\javascript\chrome\apps\ChromeTCPServerAppWindow\ChromeTCPServerAppWindow\Application.cs
dynamic self = Native.self;
dynamic self_chrome = self.chrome;
object self_chrome_socket = self_chrome.socket;
if (self_chrome_socket != null)
{
// if we run as a server. we can open up on android.
//chrome.Notification.DefaultTitle = "Nexus7";
//chrome.Notification.DefaultIconUrl = new x128().src;
ChromeTCPServer.TheServerWithStyledForm.Invoke(
AppSource.Text
//, AtFormCreated: FormStyler.AtFormCreated
//AtFormConstructor:
// f =>
// {
// //arg[0] is typeof System.Int32
// //script: error JSC1000: No implementation found for this native method, please implement [static System.Drawing.Color.FromArgb(System.Int32)]
// // X:\jsc.svn\examples\javascript\forms\Test\TestFromArgb\TestFromArgb\ApplicationControl.cs
// f.BackColor = System.Drawing.Color.FromArgb(0xA26D41);
// }
);
return;
}
#endregion
#else
#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: "Chrome360HZ");
// https://developer.chrome.com/apps/app_window#type-CreateWindowOptions
var xappwindow = await chrome.app.window.create(
Native.document.location.pathname, options: new
{
alwaysOnTop = true,
visibleOnAllWorkspaces = true
}
);
//xappwindow.setAlwaysOnTop
xappwindow.show();
await xappwindow.contentWindow.async.onload;
Console.WriteLine("chrome.app.window loaded!");
};
return;
}
}
#endregion
#endif
//const int size = 128;
//const int size = 256; // 6 faces, 12KB
//const int size = 512; // 6 faces, ?
// WebGL: drawArrays: texture bound to texture unit 0 is not renderable. It maybe non-power-of-2 and have incompatible texture filtering or is not 'texture complete'. Or the texture is Float or Half Float type with linear filtering while OES_float_linear or OES_half_float_linear extension is not enabled.
//const int size = 720; // 6 faces, ?
//const int size = 1024; // 6 faces, ?
//const int size = 1024; // 6 faces, ?
//const int cubefacesize = 2048; // 6 faces, ?
const int cubefacesize = 512; // 6 faces, ?
var uizoom = 0.05;
var far = 0xfffff;
Native.css.style.backgroundColor = "blue";
Native.css.style.overflow = IStyle.OverflowEnum.hidden;
Native.body.Clear();
new IHTMLPre { "can we stream it into VR, shadertoy, youtube 360, youtube stereo yet?" }.AttachToDocument();
var sw = Stopwatch.StartNew();
var pause = new IHTMLInput { type = ScriptCoreLib.Shared.HTMLInputTypeEnum.checkbox, title = "pause" }.AttachToDocument();
pause.onchange += delegate
{
if (pause.@checked)
sw.Stop();
else
sw.Start();
};
var oo = new List<THREE.Object3D>();
#region scene
var window = Native.window;
// what about physics and that portal rendering?
// if we are running as a chrome web server, we may also be opened as android ndk webview app
//var cameraPX = new THREE.PerspectiveCamera(fov: 90, aspect: window.aspect, near: 1, far: 2000);
// once we update source
// save the source
// manually recompile
//cameraPX.position.z = 400;
//// the camera should be close enough for the object to float off the FOV of PX
//cameraPX.position.z = 200;
// scene
// can we make the 3D object orbit around us ?
// and
// stream it to vr?
var scene = new THREE.Scene();
var ambient = new THREE.AmbientLight(0x303030);
scene.add(ambient);
// should we fix jsc to do a more correct IDL?
//var directionalLight = new THREE.DirectionalLight(0xffffff, 0.7);
//directionalLight.position.set(0, 0, 1);
//scene.add(directionalLight);
#region light
//var light = new THREE.DirectionalLight(0xffffff, 1.0);
var light = new THREE.DirectionalLight(0xffffff, 2.5);
//var light = new THREE.DirectionalLight(0xffffff, 2.5);
//var light = new THREE.DirectionalLight(0xffffff, 1.5);
//var lightOffset = new THREE.Vector3(0, 1000, 2500.0);
var lightOffset = new THREE.Vector3(
2000,
700,
// lower makes longer shadows
700.0
);
light.position.copy(lightOffset);
light.castShadow = true;
var xlight = light as dynamic;
xlight.shadowMapWidth = 4096;
xlight.shadowMapHeight = 2048;
xlight.shadowDarkness = 0.1;
//xlight.shadowDarkness = 0.5;
xlight.shadowCameraNear = 10;
xlight.shadowCameraFar = 10000;
xlight.shadowBias = 0.00001;
xlight.shadowCameraRight = 4000;
xlight.shadowCameraLeft = -4000;
xlight.shadowCameraTop = 4000;
xlight.shadowCameraBottom = -4000;
xlight.shadowCameraVisible = true;
scene.add(light);
#endregion
// whats WebGLRenderTargetCube do?
// WebGLRenderer preserveDrawingBuffer
var renderer0 = new THREE.WebGLRenderer(
new
{
antialias = true,
alpha = true,
preserveDrawingBuffer = true
}
);
// https://github.com/mrdoob/three.js/issues/3836
// the construct. white bg
renderer0.setClearColor(0xfffff, 1);
//renderer.setSize(window.Width, window.Height);
renderer0.setSize(cubefacesize, cubefacesize);
//renderer0.domElement.AttachToDocument();
//rendererPX.domElement.style.SetLocation(0, 0);
//renderer0.domElement.style.SetLocation(4, 4);
// top
// http://stackoverflow.com/questions/27612524/can-multiple-webglrenderers-render-the-same-scene
// need a place to show the cubemap face to GUI
// how does the stereo OTOY do it?
// https://www.opengl.org/wiki/Sampler_(GLSL)
// http://www.richardssoftware.net/Home/Post/25
// [+X, –X, +Y, –Y, +Z, –Z] fa
// move up
//camera.position.set(-1200, 800, 1200);
//var cameraoffset = new THREE.Vector3(0, 15, 0);
var cameraoffset = new THREE.Vector3(-1200, 800, 1200);
#region y
// need to rotate90?
var cameraNY = new THREE.PerspectiveCamera(fov: 90, aspect: 1.0, near: 1, far: far);
cameraNY.lookAt(new THREE.Vector3(0, -1, 0));
cameraNY.position.add(cameraoffset);
//cameraNY.lookAt(new THREE.Vector3(0, 1, 0));
var canvasNY = new CanvasRenderingContext2D(cubefacesize, cubefacesize);
canvasNY.canvas.style.SetLocation(8 + (int)(uizoom * cubefacesize + 8) * 1, 8 + (int)(uizoom * cubefacesize + 8) * 2);
canvasNY.canvas.title = "NY";
canvasNY.canvas.AttachToDocument();
canvasNY.canvas.style.transformOrigin = "0 0";
canvasNY.canvas.style.transform = "scale(" + uizoom + ")";
var cameraPY = new THREE.PerspectiveCamera(fov: 90, aspect: 1.0, near: 1, far: far);
cameraPY.lookAt(new THREE.Vector3(0, 1, 0));
cameraPY.position.add(cameraoffset);
//cameraPY.lookAt(new THREE.Vector3(0, -1, 0));
var canvasPY = new CanvasRenderingContext2D(cubefacesize, cubefacesize);
canvasPY.canvas.style.SetLocation(8 + (int)(uizoom * cubefacesize + 8) * 1, 8 + (int)(uizoom * cubefacesize + 8) * 0);
canvasPY.canvas.title = "PY";
canvasPY.canvas.AttachToDocument();
canvasPY.canvas.style.transformOrigin = "0 0";
canvasPY.canvas.style.transform = "scale(" + uizoom + ")";
#endregion
// transpose xz?
#region x
var cameraNX = new THREE.PerspectiveCamera(fov: 90, aspect: 1.0, near: 1, far: far);
cameraNX.lookAt(new THREE.Vector3(0, 0, 1));
cameraNX.position.add(cameraoffset);
//cameraNX.lookAt(new THREE.Vector3(0, 0, -1));
//cameraNX.lookAt(new THREE.Vector3(-1, 0, 0));
//cameraNX.lookAt(new THREE.Vector3(1, 0, 0));
var canvasNX = new CanvasRenderingContext2D(cubefacesize, cubefacesize);
canvasNX.canvas.style.SetLocation(8 + (int)(uizoom * cubefacesize + 8) * 2, 8 + (int)(uizoom * cubefacesize + 8) * 1);
canvasNX.canvas.title = "NX";
canvasNX.canvas.AttachToDocument();
canvasNX.canvas.style.transformOrigin = "0 0";
canvasNX.canvas.style.transform = "scale(" + uizoom + ")";
var cameraPX = new THREE.PerspectiveCamera(fov: 90, aspect: 1.0, near: 1, far: far);
cameraPX.lookAt(new THREE.Vector3(0, 0, -1));
cameraPX.position.add(cameraoffset);
//cameraPX.lookAt(new THREE.Vector3(0, 0, 1));
//cameraPX.lookAt(new THREE.Vector3(1, 0, 0));
//cameraPX.lookAt(new THREE.Vector3(-1, 0, 0));
var canvasPX = new CanvasRenderingContext2D(cubefacesize, cubefacesize);
canvasPX.canvas.style.SetLocation(8 + (int)(uizoom * cubefacesize + 8) * 0, 8 + (int)(uizoom * cubefacesize + 8) * 1);
canvasPX.canvas.title = "PX";
canvasPX.canvas.AttachToDocument();
canvasPX.canvas.style.transformOrigin = "0 0";
canvasPX.canvas.style.transform = "scale(" + uizoom + ")";
#endregion
#region z
var cameraNZ = new THREE.PerspectiveCamera(fov: 90, aspect: 1.0, near: 1, far: far);
//cameraNZ.lookAt(new THREE.Vector3(0, 0, -1));
cameraNZ.lookAt(new THREE.Vector3(1, 0, 0));
cameraNZ.position.add(cameraoffset);
//cameraNX.lookAt(new THREE.Vector3(-1, 0, 0));
//cameraNZ.lookAt(new THREE.Vector3(0, 0, 1));
var canvasNZ = new CanvasRenderingContext2D(cubefacesize, cubefacesize);
canvasNZ.canvas.style.SetLocation(8 + (int)(uizoom * cubefacesize + 8) * 3, 8 + (int)(uizoom * cubefacesize + 8) * 1);
canvasNZ.canvas.title = "NZ";
canvasNZ.canvas.AttachToDocument();
canvasNZ.canvas.style.transformOrigin = "0 0";
canvasNZ.canvas.style.transform = "scale(" + uizoom + ")";
var cameraPZ = new THREE.PerspectiveCamera(fov: 90, aspect: 1.0, near: 1, far: far);
//cameraPZ.lookAt(new THREE.Vector3(1, 0, 0));
cameraPZ.lookAt(new THREE.Vector3(-1, 0, 0));
cameraPZ.position.add(cameraoffset);
//cameraPZ.lookAt(new THREE.Vector3(0, 0, 1));
//cameraPZ.lookAt(new THREE.Vector3(0, 0, -1));
var canvasPZ = new CanvasRenderingContext2D(cubefacesize, cubefacesize);
canvasPZ.canvas.style.SetLocation(8 + (int)(uizoom * cubefacesize + 8) * 1, 8 + (int)(uizoom * cubefacesize + 8) * 1);
canvasPZ.canvas.title = "PZ";
canvasPZ.canvas.AttachToDocument();
canvasPZ.canvas.style.transformOrigin = "0 0";
canvasPZ.canvas.style.transform = "scale(" + uizoom + ")";
#endregion
// c++ alias locals would be nice..
var canvas0 = (IHTMLCanvas)renderer0.domElement;
var old = new
{
CursorX = 0,
CursorY = 0
};
var st = new Stopwatch();
st.Start();
//canvas0.css.active.style.cursor = IStyle.CursorEnum.move;
#region onmousedown
Native.body.onmousedown +=
async e =>
{
if (e.Element.nodeName.ToLower() != "canvas")
return;
// movementX no longer works
old = new
{
e.CursorX,
e.CursorY
};
//e.CaptureMouse();
var release = e.Element.CaptureMouse();
await e.Element.async.onmouseup;
release();
};
#endregion
// X:\jsc.svn\examples\javascript\Test\TestMouseMovement\TestMouseMovement\Application.cs
#region onmousemove
Native.body.onmousemove +=
e =>
{
if (e.Element.nodeName.ToLower() != "canvas")
{
Native.body.style.cursor = IStyle.CursorEnum.@default;
return;
}
e.preventDefault();
e.stopPropagation();
Native.body.style.cursor = IStyle.CursorEnum.move;
var pointerLock = canvas0 == Native.document.pointerLockElement;
//Console.WriteLine(new { e.MouseButton, pointerLock, e.movementX });
if (e.MouseButton == IEvent.MouseButtonEnum.Left)
{
oo.WithEach(
x =>
{
x.rotation.y += 0.006 * (e.CursorX - old.CursorX);
x.rotation.x += 0.006 * (e.CursorY - old.CursorY);
}
);
old = new
{
e.CursorX,
e.CursorY
};
}
};
#endregion
// THREE.WebGLProgram: gl.getProgramInfoLog() C:\fakepath(78,3-98): warning X3557: loop only executes for 1 iteration(s), forcing loop to unroll
// THREE.WebGLProgram: gl.getProgramInfoLog() (79,3-98): warning X3557: loop only executes for 1 iteration(s), forcing loop to unroll
// http://www.roadtovr.com/youtube-confirms-stereo-3d-360-video-support-coming-soon/
// https://www.youtube.com/watch?v=D-Wl9jAB45Q
#region spherical
var gl = new WebGLRenderingContext(alpha: true, preserveDrawingBuffer: true);
var c = gl.canvas.AttachToDocument();
// 3840x2160
//c.style.SetSize(3840, 2160);
// https://sites.google.com/a/jsc-solutions.net/work/knowledge-base/15-dualvr/20150722/360-youtube
c.width = 3840;
c.height = 2160;
//c.width = 3840 * 2;
//c.height = 2160 * 2;
//c.width = 3840;
//c.height = 2160;
// 1,777777777777778
// https://www.youtube.com/watch?v=fTfJwzRsE-w
//c.width = 7580;
//c.height = 3840;
//1,973958333333333
//7580
// 3840
// wont work
//c.width = 8192;
//c.height = 4096;
// this has the wrong aspect?
//c.width = 6466;
//c.height = 3232;
new IHTMLPre { new { c.width, c.height } }.AttachToDocument();
//6466x3232
//var suizoom = 720f / c.height;
//var suizoom = 360f / c.height;
var suizoom = 480f / c.width;
c.style.transformOrigin = "0 0";
c.style.transform = "scale(" + suizoom + ")";
c.style.backgroundColor = "yellow";
c.style.position = IStyle.PositionEnum.absolute;
c.style.SetLocation(8 + (int)(uizoom * cubefacesize + 8) * 0, 8 + (int)(uizoom * cubefacesize + 8) * 3);
var pass = new CubeToEquirectangular.Library.ShaderToy.EffectPass(
null,
gl,
precission: CubeToEquirectangular.Library.ShaderToy.DetermineShaderPrecission(gl),
supportDerivatives: gl.getExtension("OES_standard_derivatives") != null,
callback: null,
obj: null,
forceMuted: false,
forcePaused: false,
//quadVBO: Library.ShaderToy.createQuadVBO(gl, right: 0, top: 0),
outputGainNode: null
);
// how shall we upload our textures?
// can we reference GLSL.samplerCube yet?
//pass.mInputs[0] = new samplerCube { };
pass.mInputs[0] = new CubeToEquirectangular.Library.ShaderToy.samplerCube { };
pass.MakeHeader_Image();
var vs = new Shaders.ProgramFragmentShader();
pass.NewShader_Image(vs);
#endregion
//var frame0 = new HTML.Images.FromAssets.tiles_regrid().AttachToDocument();
var frame0 = new HTML.Images.FromAssets.anvil___spherical_hdri_panorama_skybox_by_macsix_d6vv4hs().AttachToDocument();
//var xor = new HTML.Images.FromAssets.Orion360_test_image_8192x4096().AttachToDocument();
//var xor = new HTML.Images.FromAssets._2_no_clouds_4k().AttachToDocument();
//var frame0 = new HTML.Images.FromAssets._2294472375_24a3b8ef46_o().AttachToDocument();
// 270px
//xor.style.height = "";
frame0.style.height = "270px";
frame0.style.width = "480px";
frame0.style.SetLocation(
8 + (int)(uizoom * cubefacesize + 8) * 0 + 480 + 16, 8 + (int)(uizoom * cubefacesize + 8) * 3);
var mesh = new THREE.Mesh(new THREE.SphereGeometry(far / 2, 50, 50),
new THREE.MeshBasicMaterial(new
{
map = THREE.ImageUtils.loadTexture(
//new HTML.Images.FromAssets._2294472375_24a3b8ef46_o().src
//new HTML.Images.FromAssets._4008650304_7f837ccbb7_b().src
frame0.src
//new WebGLEquirectangularPanorama.HTML.Images.FromAssets.PANO_20130616_222058().src
//new WebGLEquirectangularPanorama.HTML.Images.FromAssets.PANO_20121225_210448().src
)
}));
mesh.scale.x = -1;
#region fixup rotation
//mesh.rotateOnAxis(new THREE.Vector3(1, 0, 0), Math.PI / 2);
//mesh.rotateOnAxis(new THREE.Vector3(1, 0, 0), -Math.PI / 2);
mesh.rotateOnAxis(new THREE.Vector3(0, 1, 0), -Math.PI / 2);
#endregion
scene.add(mesh);
//new IHTMLButton { }
var dir = default(DirectoryEntry);
new IHTMLButton { "openDirectory" }.AttachToDocument().onclick += async delegate
{
dir = (DirectoryEntry)await chrome.fileSystem.chooseEntry(new { type = "openDirectory" });
};
frame0.onclick += delegate
{
// http://paulbourke.net/papers/vsmm2006/vsmm2006.pdf
// A method of creating synthetic stereoscopic panoramic images that can be implemented
//in most rendering packages has been presented. If single panoramic pairs can be created
//then stereoscopic panoramic movies are equally possible giving rise to the prospect of
//movies where the viewer can interact with, at least with regard to what they choose to look
//at.These images can be projected so as to engage the two features of the human visual
//system that assist is giving us a sense of immersion, the feeling of “being there”. That is,
//imagery that contains parallax information as captured from two horizontally separated eye
//positions (stereopsis)and imagery that fills our peripheral vision.The details that define
//how the two panoramic images should be created in rendering packages are provided, in
//particular, how to precisely configure the virtual cameras and control the distance to zero
//parallax.
// grab a frame
var f0 = new IHTMLImage { src = gl.canvas.toDataURL() };
//var f0 = (IHTMLImage)gl.canvas;
//var f0 = (IHTMLImage)gl.canvas;
//var base64 = gl.canvas.toDataURL();
//frame0.src = base64;
frame0.src = f0.src;
// 7MB!
if (dir == null)
return;
// // ---------------------------
//IrfanView
//---------------------------
//Warning !
//The file: "X:\vr\tape1\0001.jpg" is a PNG file with incorrect extension !
//Rename ?
//---------------------------
//Yes No
//---------------------------
// haha this will render the thumbnail.
//dir.WriteAllBytes("0000.png", frame0);
dir.WriteAllBytes("0000.png", f0);
// 3.7MB
// 3840x2160
};
// "Z:\jsc.svn\examples\javascript\WebGL\WebGLColladaExperiment\WebGLColladaExperiment\WebGLColladaExperiment.csproj"
#region WebGLRah66Comanche
// why isnt it being found?
// "Z:\jsc.svn\examples\javascript\WebGL\collada\WebGLRah66Comanche\WebGLRah66Comanche\WebGLRah66Comanche.csproj"
new global::WebGLRah66Comanche.Comanche(
).Source.Task.ContinueWithResult(
dae =>
{
//dae.position.y = -40;
//dae.position.z = 280;
scene.add(dae);
//oo.Add(dae);
// wont do it
//dae.castShadow = true;
dae.children[0].children[0].children.WithEach(x => x.castShadow = true);
// the rotors?
dae.children[0].children[0].children.Last().children.WithEach(x => x.castShadow = true);
dae.scale.set(0.5, 0.5, 0.5);
dae.position.x = -900;
dae.position.z = +900;
// raise it up
dae.position.y = 400;
//var sw = Stopwatch.StartNew();
//Native.window.onframe += delegate
//{
// //dae.children[0].children[0].children.Last().al
// //dae.children[0].children[0].children.Last().rotation.z = sw.ElapsedMilliseconds * 0.01;
// //dae.children[0].children[0].children.Last().rotation.x = sw.ElapsedMilliseconds * 0.01;
// dae.children[0].children[0].children.Last().rotation.y = sw.ElapsedMilliseconds * 0.01;
//};
}
);
#endregion
#region tree
// "Z:\jsc.svn\examples\javascript\WebGL\WebGLGodRay\WebGLGodRay\WebGLGodRay.csproj"
var materialScene = new THREE.MeshBasicMaterial(new { color = 0x000000, shading = THREE.FlatShading });
var tloader = new THREE.JSONLoader();
// http://stackoverflow.com/questions/16539736/do-not-use-system-runtime-compilerservices-dynamicattribute-use-the-dynamic
// https://msdn.microsoft.com/en-us/library/system.runtime.compilerservices.dynamicattribute%28v=vs.110%29.aspx
//System.Runtime.CompilerServices.DynamicAttribute
tloader.load(
new WebGLGodRay.Models.tree().Content.src,
new Action<THREE.Geometry>(
xgeometry =>
{
var treeMesh = new THREE.Mesh(xgeometry, materialScene);
treeMesh.position.set(0, -150, -150);
treeMesh.position.x = -900;
treeMesh.position.z = -900;
treeMesh.position.y = 25;
var tsc = 400;
treeMesh.scale.set(tsc, tsc, tsc);
treeMesh.matrixAutoUpdate = false;
treeMesh.updateMatrix();
treeMesh.AttachTo(scene);
}
)
);
#endregion
#region create field
// THREE.PlaneGeometry: Consider using THREE.PlaneBufferGeometry for lower memory footprint.
// could we get some film grain?
var planeGeometry = new THREE.CubeGeometry(512, 512, 1);
var plane = new THREE.Mesh(planeGeometry,
new THREE.MeshPhongMaterial(new { ambient = 0x101010, color = 0xA26D41, specular = 0xA26D41, shininess = 1 })
);
//plane.castShadow = false;
plane.receiveShadow = true;
{
var parent = new THREE.Object3D();
parent.add(plane);
parent.rotation.x = -Math.PI / 2;
parent.scale.set(10, 10, 10);
scene.add(parent);
}
var random = new Random();
var meshArray = new List<THREE.Mesh>();
var geometry = new THREE.CubeGeometry(1, 1, 1);
//var sw = Stopwatch.StartNew();
for (var i = 3; i < 9; i++)
{
//THREE.MeshPhongMaterial
var ii = new THREE.Mesh(geometry,
new THREE.MeshPhongMaterial(new { ambient = 0x000000, color = 0xA06040, specular = 0xA26D41, shininess = 1 })
//new THREE.MeshLambertMaterial(
//new
//{
// color = (Convert.ToInt32(0xffffff * random.NextDouble())),
// specular = 0xffaaaa,
// ambient= 0x050505,
//})
);
ii.position.x = i % 7 * 200 - 2.5f;
// raise it up
ii.position.y = .5f * 100;
ii.position.z = -1 * i * 100;
ii.castShadow = true;
ii.receiveShadow = true;
//ii.scale.set(100, 100, 100 * i);
ii.scale.set(100, 100 * i, 100);
meshArray.Add(ii);
scene.add(ii);
if (i % 2 == 0)
{
#if FWebGLHZBlendCharacter
#region SpeedBlendCharacter
var _i = i;
{ WebGLHZBlendCharacter.HTML.Pages.TexturesImages ref0; }
var blendMesh = new THREE.SpeedBlendCharacter();
blendMesh.load(
new WebGLHZBlendCharacter.Models.marine_anims().Content.src,
new Action(
delegate
{
// buildScene
//blendMesh.rotation.y = Math.PI * -135 / 180;
blendMesh.castShadow = true;
// we cannot scale down we want our shadows
//blendMesh.scale.set(0.1, 0.1, 0.1);
blendMesh.position.x = (_i + 2) % 7 * 200 - 2.5f;
// raise it up
//blendMesh.position.y = .5f * 100;
blendMesh.position.z = -1 * _i * 100;
var xtrue = true;
// run
blendMesh.setSpeed(1.0);
// will in turn call THREE.AnimationHandler.play( this );
//blendMesh.run.play();
// this wont help. bokah does not see the animation it seems.
//blendMesh.run.update(1);
blendMesh.showSkeleton(!xtrue);
scene.add(blendMesh);
Native.window.onframe +=
delegate
{
blendMesh.rotation.y = Math.PI * 0.0002 * sw.ElapsedMilliseconds;
ii.rotation.y = Math.PI * 0.0002 * sw.ElapsedMilliseconds;
};
}
)
);
#endregion
#endif
}
}
#endregion
#region HZCannon
// "Z:\jsc.svn\examples\javascript\WebGL\HeatZeekerRTSOrto\HeatZeekerRTSOrto\HeatZeekerRTSOrto.csproj"
new HeatZeekerRTSOrto.HZCannon().Source.Task.ContinueWithResult(
async cube =>
{
// https://github.com/mrdoob/three.js/issues/1285
//cube.children.WithEach(c => c.castShadow = true);
//cube.traverse(
// new Action<THREE.Object3D>(
// child =>
// {
// // does it work? do we need it?
// //if (child is THREE.Mesh)
// child.castShadow = true;
// //child.receiveShadow = true;
// }
// )
//);
// um can edit and continue insert code going back in time?
cube.scale.x = 10.0;
cube.scale.y = 10.0;
cube.scale.z = 10.0;
//cube.castShadow = true;
//dae.receiveShadow = true;
//cube.position.x = -100;
////cube.position.y = (cube.scale.y * 50) / 2;
//cube.position.z = Math.Floor((random() * 1000 - 500) / 50) * 50 + 25;
// if i want to rotate, how do I do it?
//cube.rotation.z = random() + Math.PI;
//cube.rotation.x = random() + Math.PI;
var sw2 = Stopwatch.StartNew();
scene.add(cube);
//interactiveObjects.Add(cube);
// offset is wrong
//while (true)
//{
// await Native.window.async.onframe;
// cube.rotation.y = Math.PI * 0.0002 * sw2.ElapsedMilliseconds;
//}
}
);
#endregion
#region HZCannon
new HeatZeekerRTSOrto.HZCannon().Source.Task.ContinueWithResult(
async cube =>
{
// https://github.com/mrdoob/three.js/issues/1285
//cube.children.WithEach(c => c.castShadow = true);
//cube.traverse(
// new Action<THREE.Object3D>(
// child =>
// {
// // does it work? do we need it?
// //if (child is THREE.Mesh)
// child.castShadow = true;
// //child.receiveShadow = true;
// }
// )
//);
// um can edit and continue insert code going back in time?
cube.scale.x = 10.0;
cube.scale.y = 10.0;
cube.scale.z = 10.0;
//cube.castShadow = true;
//dae.receiveShadow = true;
// jsc shat about out of band code patching?
cube.position.z = 600;
cube.position.x = -900;
//cube.position.y = -400;
//cube.position.x = -100;
//cube.position.y = -400;
////cube.position.y = (cube.scale.y * 50) / 2;
//cube.position.z = Math.Floor((random() * 1000 - 500) / 50) * 50 + 25;
// if i want to rotate, how do I do it?
//cube.rotation.z = random() + Math.PI;
//cube.rotation.x = random() + Math.PI;
var sw2 = Stopwatch.StartNew();
scene.add(cube);
//interactiveObjects.Add(cube);
// offset is wrong
//while (true)
//{
// await Native.window.async.onframe;
// cube.rotation.y = Math.PI * 0.0002 * sw2.ElapsedMilliseconds;
//}
}
);
#endregion
#region HZBunker
new HeatZeekerRTSOrto.HZBunker().Source.Task.ContinueWithResult(
cube =>
{
// https://github.com/mrdoob/three.js/issues/1285
//cube.children.WithEach(c => c.castShadow = true);
cube.castShadow = true;
//cube.traverse(
// new Action<THREE.Object3D>(
// child =>
// {
// // does it work? do we need it?
// //if (child is THREE.Mesh)
// child.castShadow = true;
// //child.receiveShadow = true;
// }
// )
//);
// um can edit and continue insert code going back in time?
cube.scale.x = 10.0;
cube.scale.y = 10.0;
cube.scale.z = 10.0;
//cube.castShadow = true;
//dae.receiveShadow = true;
cube.position.x = -1000;
//cube.position.y = (cube.scale.y * 50) / 2;
cube.position.z = 0;
scene.add(cube);
}
);
#endregion
new Models.ColladaS6Edge().Source.Task.ContinueWithResult(
dae =>
{
// 90deg
dae.rotation.x = -Math.Cos(Math.PI);
//dae.scale.x = 30;
//dae.scale.y = 30;
//dae.scale.z = 30;
dae.position.z = -(65 - 200);
var scale = 0.9;
// jsc, do we have ILObserver available yet?
dae.scale.x = scale;
dae.scale.y = scale;
dae.scale.z = scale;
#region onmousewheel
Native.body.onmousewheel +=
e =>
{
e.preventDefault();
//camera.position.z = 1.5;
// min max. shall adjust speed also!
// max 4.0
// min 0.6
dae.position.z -= 10.0 * e.WheelDirection;
//camera.position.z = 400;
//dae.position.z = dae.position.z.Max(-200).Min(200);
//Native.document.title = new { z }.ToString();
};
#endregion
//dae.position.y = -80;
scene.add(dae);
oo.Add(dae);
// view-source:http://threejs.org/examples/webgl_multiple_canvases_circle.html
// https://threejsdoc.appspot.com/doc/three.js/src.source/extras/cameras/CubeCamera.js.html
Native.window.onframe +=
e =>
{
//if (pause) return;
//if (pause.@checked)
// return;
// can we float out of frame?
// haha. a bit too flickery.
//dae.position.x = Math.Sin(e.delay.ElapsedMilliseconds * 0.01) * 50.0;
//dae.position.x = Math.Sin(e.delay.ElapsedMilliseconds * 0.001) * 190.0;
dae.position.x = Math.Sin(sw.ElapsedMilliseconds * 0.0001) * 190.0;
dae.position.y = Math.Cos(sw.ElapsedMilliseconds * 0.0001) * 90.0;
// manual rebuild?
// red compiler notifies laptop chrome of pending update
// app reloads
renderer0.clear();
//rendererPY.clear();
//cameraPX.aspect = canvasPX.aspect;
//cameraPX.updateProjectionMatrix();
// um what does this do?
//cameraPX.position.z += (z - cameraPX.position.z) * e.delay.ElapsedMilliseconds / 200.0;
// mousewheel allos the camera to move closer
// once we see the frame in vr, can we udp sync vr tracking back to laptop?
//this.targetPX.x += 1;
//this.targetNX.x -= 1;
//this.targetPY.y += 1;
//this.targetNY.y -= 1;
//this.targetPZ.z += 1;
//this.targetNZ.z -= 1;
// how does the 360 or shadertoy want our cubemaps?
// and then rotate right?
// how can we render cubemap?
#region x
// upside down?
renderer0.render(scene, cameraPX);
canvasPX.drawImage((IHTMLCanvas)renderer0.domElement, 0, 0, cubefacesize, cubefacesize);
renderer0.render(scene, cameraNX);
canvasNX.drawImage((IHTMLCanvas)renderer0.domElement, 0, 0, cubefacesize, cubefacesize);
#endregion
#region z
renderer0.render(scene, cameraPZ);
canvasPZ.drawImage((IHTMLCanvas)renderer0.domElement, 0, 0, cubefacesize, cubefacesize);
renderer0.render(scene, cameraNZ);
canvasNZ.drawImage((IHTMLCanvas)renderer0.domElement, 0, 0, cubefacesize, cubefacesize);
#endregion
#region y
renderer0.render(scene, cameraPY);
//canvasPY.save();
//canvasPY.translate(0, size);
//canvasPY.rotate((float)(-Math.PI / 2));
canvasPY.drawImage((IHTMLCanvas)renderer0.domElement, 0, 0, cubefacesize, cubefacesize);
//canvasPY.restore();
renderer0.render(scene, cameraNY);
//canvasNY.save();
//canvasNY.translate(size, 0);
//canvasNY.rotate((float)(Math.PI / 2));
canvasNY.drawImage((IHTMLCanvas)renderer0.domElement, 0, 0, cubefacesize, cubefacesize);
//canvasNY.restore();
// ?
#endregion
//renderer0.render(scene, cameraPX);
//rendererPY.render(scene, cameraPY);
// at this point we should be able to render the sphere texture
//public const uint TEXTURE_CUBE_MAP_POSITIVE_X = 34069;
//public const uint TEXTURE_CUBE_MAP_NEGATIVE_X = 34070;
//public const uint TEXTURE_CUBE_MAP_POSITIVE_Y = 34071;
//public const uint TEXTURE_CUBE_MAP_NEGATIVE_Y = 34072;
//public const uint TEXTURE_CUBE_MAP_POSITIVE_Z = 34073;
//public const uint TEXTURE_CUBE_MAP_NEGATIVE_Z = 34074;
//var cube0 = new IHTMLImage[] {
// new CSS3DPanoramaByHumus.HTML.Images.FromAssets.humus_px(),
// new CSS3DPanoramaByHumus.HTML.Images.FromAssets.humus_nx(),
// new CSS3DPanoramaByHumus.HTML.Images.FromAssets.humus_py(),
// new CSS3DPanoramaByHumus.HTML.Images.FromAssets.humus_ny(),
// new CSS3DPanoramaByHumus.HTML.Images.FromAssets.humus_pz(),
// new CSS3DPanoramaByHumus.HTML.Images.FromAssets.humus_nz()
//};
new[] {
canvasPX, canvasNX,
canvasPY, canvasNY,
canvasPZ, canvasNZ
}.WithEachIndex(
(img, index) =>
{
gl.bindTexture(gl.TEXTURE_CUBE_MAP, pass.tex);
//gl.pixelStorei(gl.UNPACK_FLIP_X_WEBGL, false);
gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, false);
// http://stackoverflow.com/questions/15364517/pixelstoreigl-unpack-flip-y-webgl-true
// https://msdn.microsoft.com/en-us/library/dn302429(v=vs.85).aspx
//gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, 0);
//gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, 1);
gl.texImage2D(gl.TEXTURE_CUBE_MAP_POSITIVE_X + (uint)index, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, img.canvas);
}
);
pass.Paint_Image(
0,
0,
0,
0,
0
//,
// gl_FragCoord
// cannot be scaled, and can be referenced directly.
// need another way to scale
//zoom: 0.3f
);
//paintsw.Stop();
// what does it do?
gl.flush();
};
}
);
#endregion
Console.WriteLine("do you see it?");
}
/// <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)
{
// X:\jsc.svn\examples\javascript\async\AsyncWindowUncaughtError\AsyncWindowUncaughtError\ApplicationWebService.cs
// intellitrace
// a self debugging programe?
// can we have buttons for debugging?
// https://www.youtube.com/watch?v=4vtKRE9an_I
// could we have live patching, remote debugging via udp?
var Next = new IHTMLButton {
"Next"
}.AttachToDocument();
Next.disabled = true;
Func <Task> Next_onclick = async delegate
{
Next.disabled = false;
await Next.async.onclick;
Next.disabled = true;
};
trace trace = async(string filepath, int linenumber, string line) =>
{
// could we go backwards in time too?
// like intellitrace?
var debugged = new IHTMLPre {
}.AttachToDocument();
// should we allow chaning constants?
// by patching const load opcodes?
var l = new IHTMLSpan {
"" + linenumber
}.AttachToDocument();
l.title = filepath;
l.style.marginRight = "2em";
l.style.color = "darkcyan";
l.AttachTo(debugged);
// could we use css to do syntax highlight?
var prefixToHide = "await trace();";
// perhaps the next step would be to send us the origina stack usage IL
// we see in the jsc reflector?
var c = new IHTMLSpan {
line.Replace(prefixToHide, "")
};
c.style.marginRight = "2em";
//c.style.color = "blue";
c.style.backgroundColor = "yellow";
c.AttachTo(debugged);
await Next_onclick();
c.style.backgroundColor = "";
};
interactive <string> __string = async(string data, string filepath, int linenumber, string line) =>
{
var i = new IHTMLInput {
value = data
}.AttachToDocument();
await Next_onclick();
return(i.value);
};
//Func<>
Func <string, Task <string> > program =
// a simulaton of a program
async data =>
{
await trace(); new IHTMLPre {
await __string("hello")
}.AttachToDocument();
await trace(); new IHTMLPre {
await __string("world")
}.AttachToDocument();
await trace(); return("done!");
};
new IHTMLButton {
"Step Into"
}.AttachToDocument().onclick +=
async e =>
{
new IHTMLHorizontalRule().AttachToDocument();
e.Element.disabled = true;
var value = await program("data");
e.Element.disabled = false;
new IHTMLPre {
new { value }
}.AttachToDocument();
};
new IHTMLButton {
"Run"
}.AttachToDocument().onclick +=
async e =>
{
// enum to string?
new IHTMLHorizontalRule().AttachToDocument();
var x = Next_onclick;
// slow down the program
Next_onclick = async delegate { await Task.Delay(300); };
e.Element.disabled = true;
var value = await program("data");
e.Element.disabled = false;
Next_onclick = x;
new IHTMLPre {
new { value }
}.AttachToDocument();
};
}
public SpawnControlBase(IHTMLElement spawn)
{
SpawnControl = (IHTMLInput)spawn;
}
public __TextBox()
{
#region InternalContainer
//this.InternalContainer = new IHTMLDiv();
this.InternalContainer = new IHTMLElement(ElementName);
// are we excluding older browsers? does the app analyzer let the developer know what devices can be used now?
this.InternalContainer_shadow = this.InternalContainer.createShadowRoot();
// if we only create shadow, empty, other children dissapear dont they. as there are no insertion points
this.InternalContainer.style.position = ScriptCoreLib.JavaScript.DOM.IStyle.PositionEnum.absolute;
// in Forms we use typeof() because we see Component. WPF objects are more like XElements..
this.InternalContainer.name = "__TextBox";
this.InternalContainer.style.left = "0px";
this.InternalContainer.style.top = "0px";
// do we create any new havoc?
this.InternalContainer.style.zIndex = 0;
#endregion
#region InternalTextField_ShadowContainer
// when is it attached?
this.InternalTextField_ShadowContainer = new IHTMLDiv();
this.InternalTextField_ShadowContainer.style.position = IStyle.PositionEnum.absolute;
this.InternalTextField_ShadowContainer.style.overflow = IStyle.OverflowEnum.hidden;
this.InternalTextField_ShadowContainer.style.SetSize(0, 0);
this.InternalTextField_Shadow = new IHTMLSpan();
this.InternalTextField_Shadow.AttachTo(this.InternalTextField_ShadowContainer);
this.InternalTextField_Shadow.style.whiteSpace = IStyle.WhiteSpaceEnum.pre;
this.InternalTextField_Shadow.style.display = IStyle.DisplayEnum.inline_block;
this.InternalTextField_Shadow.style.position = IStyle.PositionEnum.absolute;
#endregion
#region InternalTextField
this.InternalTextField = new IHTMLInput(ScriptCoreLib.Shared.HTMLInputTypeEnum.text)
{
//}.AttachTo(this.InternalContainer);
// public static T AttachTo<T>(this T e, IHTMLElement c) where T : INodeConvertible<IHTMLElement>;
}.AttachTo(this.InternalContainer_shadow);
this.InternalSetDefaultFont();
this.InternalTextField.style.position = IStyle.PositionEnum.absolute;
this.InternalTextField.style.margin = "0";
this.InternalTextField.style.paddingTop = "0";
this.InternalTextField.style.paddingBottom = "0";
this.InternalTextField.style.border = "1px solid gray";
#endregion
Action InternalAutoSizeUpdate =
delegate
{
if (this.InternalTextField_Shadow == null)
{
return;
}
InternalAutoSizeToText(this.InternalTextField.value);
};
this.InternalTextField.onchange +=
delegate
{
InternalAutoSizeUpdate();
};
this.InternalTextField.onkeyup +=
delegate
{
InternalAutoSizeUpdate();
};
}
public SpawnControlBase(IHTMLElement spawn)
{
SpawnControl = (IHTMLInput)spawn;
}
/// <summary>
/// Creates a new control
/// </summary>
/// <param name="DataElement">The hidden data element</param>
public SimpleFilmstrip()
{
IHTMLDiv Control = new IHTMLDiv();
Control.style.position = IStyle.PositionEnum.absolute;
new filmstrip().ToBackground(Control, false);
//Control.style.background = "url(assets/SimpleFilmstrip/filmstrip.png) no-repeat";
Control.style.height = "600px";
Control.style.width = "326px";
var index = 0;
var t_icount = default(int);
var t_interval = default(int);
var t_iwidth = default(int);
var t_iheight = default(int);
var t_feed = default(string);
var Restart = default(Action);
var feed = new IHTMLInput(HTMLInputTypeEnum.text,
new veh_cy().src
);
var iwidth = new IHTMLInput(HTMLInputTypeEnum.text, "48");
var iheight = new IHTMLInput(HTMLInputTypeEnum.text, "48");
var icount = new IHTMLInput(HTMLInputTypeEnum.text, "32");
var interval = new IHTMLInput(HTMLInputTypeEnum.text, "50");
var fps = new IHTMLInput(HTMLInputTypeEnum.text, "24");
feed.onchange += delegate { Restart(); };
iwidth.onchange += delegate { Restart(); };
iheight.onchange += delegate { Restart(); };
interval.onchange += delegate
{
int v = int.Parse(interval.value);
if (v == 0)
return;
fps.value = "" + (1000 / v);
Restart();
};
icount.onchange += delegate { Restart(); };
fps.onchange += delegate
{
int v = int.Parse(fps.value);
if (v == 0)
return;
interval.value = "" + (1000 / v);
Restart();
};
var fieldset = new IHTMLElement(IHTMLElement.HTMLElementEnum.fieldset);
fieldset.style.width = "30em";
fieldset.appendChild(new IHTMLElement(IHTMLElement.HTMLElementEnum.legend, "Properties"));
Func<string, IHTMLElement, IHTMLDiv> AsLabel =
(string text, IHTMLElement control) =>
{
var label = new IHTMLLabel(text, control);
control.style.position = IStyle.PositionEnum.absolute;
control.style.left = "8em";
return new IHTMLDiv(label, control);
};
fieldset.appendChild(AsLabel("feed:", feed));
fieldset.appendChild(AsLabel("width:", iwidth));
fieldset.appendChild(AsLabel("height:", iheight));
fieldset.appendChild(AsLabel("count:", icount));
fieldset.appendChild(AsLabel("interval:", interval));
fieldset.appendChild(AsLabel("fps:", fps));
fieldset.style.position = IStyle.PositionEnum.absolute;
fieldset.style.top = "320px";
var image = new IHTMLDiv();
image.style.position = IStyle.PositionEnum.absolute;
image.style.top = "52px";
image.style.left = "32px";
var t = new Timer();
t.Tick += delegate
{
image.style.backgroundPosition = "-" + (index * t_iwidth) + "px 0px";
index = (index + 1) % t_icount;
};
Restart =
delegate
{
t_icount = int.Parse(icount.value);
t_interval = int.Parse(interval.value);
t_iwidth = int.Parse(iwidth.value);
t_iheight = int.Parse(iheight.value);
t_feed = feed.value;
image.style.background = "url(" + t_feed + ") no-repeat";
image.style.width = t_iwidth + "px";
image.style.height = t_iheight + "px";
t.StartInterval(t_interval);
};
Restart();
Control.appendChild(image, fieldset);
Control.AttachToDocument();
}
/// <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)
{
// X:\jsc.svn\examples\javascript\async\AsyncWindowUncaughtError\AsyncWindowUncaughtError\ApplicationWebService.cs
// intellitrace
// a self debugging programe?
// can we have buttons for debugging?
// https://www.youtube.com/watch?v=4vtKRE9an_I
// could we have live patching, remote debugging via udp?
var Next = new IHTMLButton { "Next" }.AttachToDocument();
Next.disabled = true;
Func<Task> Next_onclick = async delegate
{
Next.disabled = false;
await Next.async.onclick;
Next.disabled = true;
};
trace trace = async (string filepath, int linenumber, string line) =>
{
// could we go backwards in time too?
// like intellitrace?
var debugged = new IHTMLPre { }.AttachToDocument();
// should we allow chaning constants?
// by patching const load opcodes?
var l = new IHTMLSpan { "" + linenumber }.AttachToDocument();
l.title = filepath;
l.style.marginRight = "2em";
l.style.color = "darkcyan";
l.AttachTo(debugged);
// could we use css to do syntax highlight?
var prefixToHide = "await trace();";
// perhaps the next step would be to send us the origina stack usage IL
// we see in the jsc reflector?
var c = new IHTMLSpan { line.Replace(prefixToHide, "") };
c.style.marginRight = "2em";
//c.style.color = "blue";
c.style.backgroundColor = "yellow";
c.AttachTo(debugged);
await Next_onclick();
c.style.backgroundColor = "";
};
interactive<string> __string = async (string data, string filepath, int linenumber, string line) =>
{
var i = new IHTMLInput { value = data }.AttachToDocument();
await Next_onclick();
return i.value;
};
//Func<>
Func<string, Task<string>> program =
// a simulaton of a program
async data =>
{
await trace(); new IHTMLPre { await __string("hello") }.AttachToDocument();
await trace(); new IHTMLPre { await __string("world") }.AttachToDocument();
await trace(); return "done!";
};
new IHTMLButton { "Step Into" }.AttachToDocument().onclick +=
async e =>
{
new IHTMLHorizontalRule().AttachToDocument();
e.Element.disabled = true;
var value = await program("data");
e.Element.disabled = false;
new IHTMLPre { new { value } }.AttachToDocument();
};
new IHTMLButton { "Run" }.AttachToDocument().onclick +=
async e =>
{
// enum to string?
new IHTMLHorizontalRule().AttachToDocument();
var x = Next_onclick;
// slow down the program
Next_onclick = async delegate { await Task.Delay(300); };
e.Element.disabled = true;
var value = await program("data");
e.Element.disabled = false;
Next_onclick = x;
new IHTMLPre { new { value } }.AttachToDocument();
};
}
private void AddProperties(IHTMLElement htext)
{
// todo: interface properties
var content = new IHTMLDiv().AttachTo(DocumentBody);
content.Hide();
var IsField = new IHTMLInput(ScriptCoreLib.Shared.HTMLInputTypeEnum.checkbox);
new IHTMLDiv(
new IHTMLLabel("as fields instead of properties: ", IsField), IsField
).AttachTo(content);
// var a = new IHTMLTextArea().AttachTo(content);
var b = new IHTMLTextArea().AttachTo(content);
htext.onclick +=
delegate
{
content.ToggleVisible();
};
a.style.display = ScriptCoreLib.JavaScript.DOM.IStyle.DisplayEnum.block;
a.style.width = "100%";
a.style.height = "20em";
b.style.display = ScriptCoreLib.JavaScript.DOM.IStyle.DisplayEnum.block;
b.style.width = "100%";
b.style.height = "20em";
b.readOnly = true;
Action update =
delegate
{
try
{
//c.removeChildren();
var w = new StringBuilder();
var lines = a.Lines.ToArray();
if (IsField.@checked)
w.AppendLine("#region Fields");
else
w.AppendLine("#region Properties");
for (int i = 0; i < lines.Length; i += 2)
{
if ((i + 1) < lines.Length)
{
var Summary = lines[i + 1].Trim();
if (!lines[i].Contains("AIR-only"))
{
var ReadOnly = "[read-only]";
w.AppendLine("/// <summary>");
w.AppendLine("/// " + Summary);
w.AppendLine("/// </summary>");
var x0 = lines[i].Split(':');
var x1 = x0[1].Trim().Split('=');
var DefaultValue = "";
if (x1.Length == 2)
DefaultValue = x1[1].Trim();
var TypeName = FixTypeName(x1[0].Trim());
var FieldName = x0[0].Trim();
/*
var Image = (IHTMLImage)img.cloneNode(false);
Image.style.verticalAlign = "middle";
new IHTMLDiv(
Image,
new IHTMLCode(TypeName + " " + FieldName)
).AttachTo(c);
*/
var StaticModifier = Summary.Contains("[static]") ? "static " : "";
if (IsField.@checked)
{
var ReadonlyModifier = Summary.Contains(ReadOnly) ? "readonly " : "";
var DefaultValueExpression = string.IsNullOrEmpty(DefaultValue) ? "" : " = " + DefaultValue;
w.AppendLine("public " + StaticModifier + ReadonlyModifier + TypeName + " " + FieldName + DefaultValueExpression + ";");
}
else
{
if (Summary.Contains(ReadOnly))
w.AppendLine("public " + StaticModifier + TypeName + " " + FieldName + " { get; private set; }");
else
w.AppendLine("public " + StaticModifier + TypeName + " " + FieldName + " { get; set; }");
}
w.AppendLine();
}
}
}
w.AppendLine("#endregion");
b.value = w.ToString();
htext.style.color = Color.Blue;
}
catch (Exception ex)
{
htext.style.color = Color.Red;
b.value = "error: " + ex.Message;
}
};
a.onchange += delegate { update(); };
IsField.onchange += delegate { update(); };
}
// https://sites.google.com/a/jsc-solutions.net/work/knowledge-base/15-dualvr/20150912/x360mountains
// ls sdcard/oculus/360photos/
// "X:\vr\0000.png"
// R:\util\android-sdk-windows\platform-tools\adb.exe push "X:\vr\0000.png" /sdcard/oculus/360photos/
// 2649 KB/s (1085134 bytes in 0.400s)
// "X:\vr\tr.png"
// R:\util\android-sdk-windows\platform-tools\adb.exe push "X:\vr\tr.png" /sdcard/oculus/360photos/
// R:\util\android-sdk-windows\platform-tools\adb.exe push "X:\vr\code.png" /sdcard/oculus/360photos/
// R:\util\android-sdk-windows\platform-tools\adb.exe push "X:\vr\cone2.png" /sdcard/oculus/360photos/
// "X:\vr\code.png"
// https://sites.google.com/a/jsc-solutions.net/work/knowledge-base/15-dualvr/20150906/roomscanningeffectbyrosme
// https://sites.google.com/a/jsc-solutions.net/work/knowledge-base/15-dualvr/20150816/iss
// https://www.youtube.com/watch?v=UWiq-qgedws
// https://www.youtube.com/watch?v=TwRSOEG-Gx4
// http://youtu.be/Lo1IU8UAutE
// 60hz 2160 4K!
// The equirectangular projection was used in map creation since it was invented around 100 A.D. by Marinus of Tyre.
// C:\Users\Arvo> "x:\util\android-sdk-windows\platform-tools\adb.exe" push "X:\vr\hzsky.png" "/sdcard/oculus/360photos/"
//1533 KB/s(3865902 bytes in 2.461s)
//C:\Users\Arvo> "x:\util\android-sdk-windows\platform-tools\adb.exe" push "X:\vr\tape360globe1\0000.png" "/sdcard/oculus/360photos/tape360globe1.png"
//1556 KB/s(2714294 bytes in 1.703s)
// "x:\util\android-sdk-windows\platform-tools\adb.exe" push "X:\vr\hz2048c3840x2160.png" "/sdcard/oculus/360photos/"
// "x:\util\android-sdk-windows\platform-tools\adb.exe" push "X:\vr\tape360globe1\0000.png" "/sdcard/oculus/360photos/tape360globe2.png"
// "x:\util\android-sdk-windows\platform-tools\adb.exe" push "X:\vr\tape360globe1\0000.png" "/sdcard/oculus/360photos/tape360globenight.png"
// "x:\util\android-sdk-windows\platform-tools\adb.exe" push "R:\vr\tape360iss\0000.png" "/sdcard/oculus/360photos/tape360iss.png"
// "x:\util\android-sdk-windows\platform-tools\adb.exe" push "R:\vr\tape360iss\0230.png" "/sdcard/oculus/360photos/tape360iss0230.png"
// "x:\util\android-sdk-windows\platform-tools\adb.exe" push "X:\vr\sh1\0000.png" "/sdcard/oculus/360photos/sh1.png"
// "x:\util\android-sdk-windows\platform-tools\adb.exe" push "R:\vr\tape360columns\0000.png" "/sdcard/oculus/360photos/tape360columns.png"
// "x:\util\android-sdk-windows\platform-tools\adb.exe" push "X:\vr\edge.png" "/sdcard/oculus/360photos/tape360columns.png"
// 4041 KB/s (3248448 bytes in 0.785s)
// "x:\util\android-sdk-windows\platform-tools\adb.exe" push "X:\vr\terrain.png" "/sdcard/oculus/360photos/"
// could we udp our 360 image from webgl to vr yet?
// "R:\vr\tape360iss\0230.png"
// https://sites.google.com/a/jsc-solutions.net/work/knowledge-base/15-dualvr/20150809/chrome360hz
// https://sites.google.com/a/jsc-solutions.net/work/knowledge-base/15-dualvr/20150809
// the eye nor the display will be able to do any stereo
// until tech is near matrix capability. 2019?
// cubemap can be used for all long range scenes
// http://www.imdb.com/title/tt0112111/?ref_=nv_sr_1
// https://sites.google.com/a/jsc-solutions.net/work/knowledge-base/15-dualvr/20150808/cubemapcamera
// subst /D b:
// subst b: s:\jsc.svn\examples\javascript\chrome\apps\WebGL\x360mountains\x360mountains\bin\Debug\staging\x360mountains.Application\web
// subst a: z:\jsc.svn\examples\javascript\chrome\apps\WebGL\x360mountains\x360mountains\bin\Debug\staging\x360mountains.Application\web
// Z:\jsc.svn\examples\javascript\chrome\apps\WebGL\x360mountains\x360mountains\bin\Debug\staging\x360mountains.Application\web
// what if we want to do subst in another winstat or session?
// ColladaLoader: Empty or non-existing file (assets/x360mountains/S6Edge.dae)
/// <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)
{
//FormStyler.AtFormCreated =
//s =>
//{
// s.Context.FormBorderStyle = System.Windows.Forms.FormBorderStyle.None;
// //var x = new ChromeTCPServerWithFrameNone.HTML.Pages.AppWindowDrag().AttachTo(s.Context.GetHTMLTarget());
// var x = new ChromeTCPServerWithFrameNone.HTML.Pages.AppWindowDragWithShadow().AttachTo(s.Context.GetHTMLTarget());
// s.Context.GetHTMLTarget().style.backgroundColor = "#efefef";
// //s.Context.GetHTMLTarget().style.backgroundColor = "#A26D41";
//};
#if AsWEBSERVER
#region += Launched chrome.app.window
// X:\jsc.svn\examples\javascript\chrome\apps\ChromeTCPServerAppWindow\ChromeTCPServerAppWindow\Application.cs
dynamic self = Native.self;
dynamic self_chrome = self.chrome;
object self_chrome_socket = self_chrome.socket;
if (self_chrome_socket != null)
{
// if we run as a server. we can open up on android.
//chrome.Notification.DefaultTitle = "Nexus7";
//chrome.Notification.DefaultIconUrl = new x128().src;
ChromeTCPServer.TheServerWithStyledForm.Invoke(
AppSource.Text
//, AtFormCreated: FormStyler.AtFormCreated
//AtFormConstructor:
// f =>
// {
// //arg[0] is typeof System.Int32
// //script: error JSC1000: No implementation found for this native method, please implement [static System.Drawing.Color.FromArgb(System.Int32)]
// // X:\jsc.svn\examples\javascript\forms\Test\TestFromArgb\TestFromArgb\ApplicationControl.cs
// f.BackColor = System.Drawing.Color.FromArgb(0xA26D41);
// }
);
return;
}
#endregion
#else
#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: "x360mountains");
// https://developer.chrome.com/apps/app_window#type-CreateWindowOptions
var xappwindow = await chrome.app.window.create(
Native.document.location.pathname, options: new
{
alwaysOnTop = true,
visibleOnAllWorkspaces = true
}
);
//xappwindow.setAlwaysOnTop
xappwindow.show();
await xappwindow.contentWindow.async.onload;
Console.WriteLine("chrome.app.window loaded!");
};
return;
}
}
#endregion
#endif
//var vs0 = new TraceConeWithCRTByKlk.Shaders.Program360FragmentShader();
//var vs0 = new FaceEdgeVertexByPaniq.Shaders.Program360FragmentShader();
var vs0 = new ChromeShaderToyMountainsByHoskins.Shaders.Program360FragmentShader();
// onframe need syncs to enable GC!
var vsync = default(TaskCompletionSource<object>);
Func<bool> vsyncReady = delegate
{
if (vsync != null)
if (vsync.Task.IsCompleted)
return true;
return false;
};
// crash
//int cubefacesizeMAX = 2048 * 2; // 6 faces, ?
// not responding...
//int cubefacesizeMAX = 2048 * 2; // 6 faces, ?
int cubefacesizeMAX = 2048; // 6 faces, ?
//int cubefacesizeMAX = 1024; // 6 faces, ?
int cubefacesize = cubefacesizeMAX; // 6 faces, ?
//int cubefacesize = 1024; // 6 faces, ?
// "X:\vr\tape1\0000x2048.png"
// for 60hz render we may want to use float camera percision, not available for ui.
// "x:\util\android-sdk-windows\platform-tools\adb.exe" push "X:\vr\tape1\0000x2048.png" "/sdcard/oculus/360photos/"
// "x:\util\android-sdk-windows\platform-tools\adb.exe" push "X:\vr\tape1\0000x128.png" "/sdcard/oculus/360photos/"
// force laptop into preview. when can we have a button for it?
//if (Environment.ProcessorCount < 8)
// cubefacesize = 64; // 6 faces, ?
// fast gif?
//cubefacesize = 128; // 6 faces, ?
//cubefacesize = 512; // 6 faces, ?
// [GroupMarkerNotSet(crbug.com / 242999)!:247F0809]
//RENDER WARNING: texture bound to texture unit 0 is not renderable.It maybe non-power-of-2 and have incompatible texture filtering.
// can we keep fast fps yet highp?
// can we choose this on runtime? designtime wants fast fps, yet for end product we want highdef on our render farm?
//const int cubefacesize = 128; // 6 faces, ?
//var cubecameraoffsetx = 256;
var cubecameraoffsetx = 400;
//var uizoom = 0.1;
//var uizoom = cubefacesize / 128f;
var uizoom = 128f / cubefacesize;
Native.css.style.backgroundColor = "blue";
Native.css.style.overflow = IStyle.OverflowEnum.hidden;
Native.body.Clear();
(Native.body.style as dynamic).webkitUserSelect = "text";
//return;
// Earth params
//var radius = 0.5;
//var radius = 1024;
//var radius = 2048;
//var radius = 512;
//var radius = 256;
//var radius = 400;
// can we have not fly beyond moon too much?
//var radius = 500;
var radius = 480;
//var segments = 32;
var segments = 128 * 2;
//var rotation = 6;
//const int size = 128;
//const int size = 256; // 6 faces, 12KB
//const int size = 512; // 6 faces, ?
// WebGL: drawArrays: texture bound to texture unit 0 is not renderable. It maybe non-power-of-2 and have incompatible texture filtering or is not 'texture complete'. Or the texture is Float or Half Float type with linear filtering while OES_float_linear or OES_half_float_linear extension is not enabled.
//const int size = 720; // 6 faces, ?
//const int size = 1024; // 6 faces, ?
//const int cubefacesize = 1024; // 6 faces, ?
// THREE.WebGLRenderer: Texture is not power of two. Texture.minFilter is set to THREE.LinearFilter or THREE.NearestFilter. ( chrome-extension://aemlnmcokphbneegoefdckonejmknohh/assets/x360mountains/anvil___spherical_hdri_panorama_skybox_by_macsix_d6vv4hs.jpg )
var far = 0xffffff;
new IHTMLPre { new { Environment.ProcessorCount, cubefacesize } }.AttachToDocument();
//new IHTMLPre { "can we stream it into VR, shadertoy, youtube 360, youtube stereo yet?" }.AttachToDocument();
var sw = Stopwatch.StartNew();
var oo = new List<THREE.Object3D>();
var window = Native.window;
// what about physics and that portal rendering?
// if we are running as a chrome web server, we may also be opened as android ndk webview app
//var cameraPX = new THREE.PerspectiveCamera(fov: 90, aspect: window.aspect, near: 1, far: 2000);
// once we update source
// save the source
// manually recompile
//cameraPX.position.z = 400;
//// the camera should be close enough for the object to float off the FOV of PX
//cameraPX.position.z = 200;
// scene
// can we make the 3D object orbit around us ?
// and
// stream it to vr?
var scene = new THREE.Scene();
// since our cube camera is somewhat a fixed thing
// would it be easier to move mountains to come to us?
// once we change code would chrome app be able to let VR know that a new view is available?
var sceneg = new THREE.Group();
sceneg.AttachTo(scene);
// fly up?
//sceneg.translateZ(-1024);
// rotate the world, as the skybox then matches what we have on filesystem
scene.rotateOnAxis(new THREE.Vector3(0, 1, 0), -Math.PI / 2);
// yet for headtracking we shall rotate camera
//sceneg.position.set(0, 0, -1024);
//sceneg.position.set(0, -1024, 0);
//scene.add(new THREE.AmbientLight(0x333333));
//scene.add(new THREE.AmbientLight(0xffffff));
//scene.add(new THREE.AmbientLight(0xaaaaaa));
//scene.add(new THREE.AmbientLight(0xcccccc));
//scene.add(new THREE.AmbientLight(0xeeeeee));
scene.add(new THREE.AmbientLight(0xffffff));
//var light = new THREE.DirectionalLight(0xffffff, 1);
//// sun should be beyond moon
////light.position.set(-5 * virtualDistance, -3 * virtualDistance, -5 * virtualDistance);
////light.position.set(-15 * virtualDistance, -1 * virtualDistance, -15 * virtualDistance);
//// where shall the light source be to see half planet?
//light.position.set(-1 * virtualDistance, -1 * virtualDistance, -15 * virtualDistance);
//scene.add(light);
//var lightX = new IHTMLInput { type = ScriptCoreLib.Shared.HTMLInputTypeEnum.range, min = -60, max = 60, valueAsNumber = 0, title = "lightX" }.AttachToDocument();
//var lightY = new IHTMLInput { type = ScriptCoreLib.Shared.HTMLInputTypeEnum.range, min = -60, max = 60, valueAsNumber = 0, title = "lightY" }.AttachToDocument();
//var lightZ = new IHTMLInput { type = ScriptCoreLib.Shared.HTMLInputTypeEnum.range, min = -60, max = 60, valueAsNumber = 0, title = "lightZ" }.AttachToDocument();
//new IHTMLHorizontalRule { }.AttachToDocument();
// whats WebGLRenderTargetCube do?
// WebGLRenderer preserveDrawingBuffer
var renderer0 = new THREE.WebGLRenderer(
new
{
//antialias = true,
//alpha = true,
preserveDrawingBuffer = true
}
);
// https://github.com/mrdoob/three.js/issues/3836
// the construct. white bg
//renderer0.setClearColor(0xfffff, 1);
renderer0.setClearColor(0x0, 1);
//renderer.setSize(window.Width, window.Height);
renderer0.setSize(cubefacesize, cubefacesize);
//renderer0.domElement.AttachToDocument();
//rendererPX.domElement.style.SetLocation(0, 0);
//renderer0.domElement.style.SetLocation(4, 4);
// top
// http://stackoverflow.com/questions/27612524/can-multiple-webglrenderers-render-the-same-scene
// need a place to show the cubemap face to GUI
// how does the stereo OTOY do it?
// https://www.opengl.org/wiki/Sampler_(GLSL)
// http://www.richardssoftware.net/Home/Post/25
// [+X, –X, +Y, –Y, +Z, –Z] fa
// move up
//camera.position.set(-1200, 800, 1200);
//var cameraoffset = new THREE.Vector3(0, 15, 0);
// can we aniamte it?
//var cameraoffset = new THREE.Vector3(0, 800, 1200);
// can we have linear animation fromcenter of the map to the edge and back?
// then do the flat earth sun orbit?
var cameraoffset = new THREE.Vector3(
// left?
-512,
// height?
//0,
//1600,
//1024,
// if the camera is in the center, would we need to move the scene?
// we have to move the camera. as we move the scene the lights are messed up
//2014,
1024,
//1200
0
// can we hover top of the map?
);
// original vieworigin
//var cameraoffset = new THREE.Vector3(-1200, 800, 1200);
var bottomRotate100 = new IHTMLInput { type = ScriptCoreLib.Shared.HTMLInputTypeEnum.range, min = -314, max = 314, valueAsNumber = 0, title = "bottomRotate" }.AttachToDocument();
var maxfps = 60;
//var maxlengthseconds = 60;
var maxlengthseconds = 120;
var maxframes = maxlengthseconds * maxfps;
// whatif we want more than 30sec video? 2min animation? more frames to render? 2gb disk?
var frameIDslider = new IHTMLInput { type = ScriptCoreLib.Shared.HTMLInputTypeEnum.range, min = 0, max = maxframes, valueAsNumber = 137, title = "frameIDslider" }.AttachToDocument();
frameIDslider.onchange += delegate { frameIDslider.title = "frameIDslider " + frameIDslider.valueAsNumber; };
//var vs0 = new ChromeShaderToyRelentlessBySrtuss.Shaders.ProgramFragmentShader();
//var vs0 = new TraceConeWithCRTByKlk.Shaders.ProgramFragmentShader();
// left
IHTMLCanvas shader0canvasPZ = null;
// locCameraTargetOffset to look left?
#region shader0canvasPZ
new { }.With(
async delegate
{
//return;
Native.body.style.margin = "0px";
(Native.body.style as dynamic).webkitUserSelect = "auto";
// https://sites.google.com/a/jsc-solutions.net/work/x3
//var vs0 = new ChromeShaderToyColumns.Shaders.ProgramFragmentShader();
//var vs0 = new x2001SpaceStationByOtavio.Shaders.ProgramFragmentShader();
//var vs0 = new Xor3DAlienLandByXor.Shaders.ProgramFragmentShader();
//var vs0 = new RoomScanningEffectByRosme.Shaders.ProgramFragmentShader();
// now we have an empty shell
// which tostrings to the glsl code for gpu
// and if we were to initialize
// enable intellisense
//var vs0i = (RoomScanningEffectByRosme.Shaders.__ProgramFragmentUniforms)(object)vs0;
// script: error JSC1000: No implementation found for this native method, please implement [static ScriptCoreLib.GLSL.Shader.vec3(System.Single, System.Single, System.Single)]
// b.__this._vs0i_5__2.uCameraTargetOffset = new ctor$aQ8ABjj5gzW_aEh4Cmq2oMg(1, 0, 0);
// 270ms ReferenceError: ctor$aQ8ABjj5gzW_aEh4Cmq2oMg is not defined
// wishful thinking eh
//vec3 uCameraTargetOffset = vec3(0.0f, 0.0f, -1.0f);
//vs0i.uCameraTargetOffset = new ScriptCoreLib.GLSL.vec3(1.0f, 0.0f, 0.0f);
// this would mean the program was selected and uniform was uploaded to gpu
var gl0 = new WebGLRenderingContext(alpha: true);
shader0canvasPZ = gl0.canvas;
var c0 = gl0.canvas.AttachToDocument();
//c0.style.SetSize(460, 237);
//c0.width = 460;
//c0.height = 237;
//c0.style.SetSize((int)uizoom * 3, (int)uizoom * 3);
c0.style.SetSize(128, 128);
c0.width = cubefacesize;
c0.height = cubefacesize;
//c0.style.SetLocation(720, 8);
c0.style.SetLocation(800, 360);
var mMouseOriX = 0;
var mMouseOriY = 0;
var mMousePosX = 0;
var mMousePosY = 0;
var pass0 = new ChromeShaderToyColumns.Library.ShaderToy.EffectPass(
null,
gl0,
precission: ChromeShaderToyColumns.Library.ShaderToy.DetermineShaderPrecission(gl0),
supportDerivatives: gl0.getExtension("OES_standard_derivatives") != null,
callback: null,
obj: null,
forceMuted: false,
forcePaused: false,
//quadVBO: Library.ShaderToy.createQuadVBO(gl, right: 0, top: 0),
outputGainNode: null
);
pass0.MakeHeader_Image();
pass0.NewShader_Image(vs0);
var sw0 = Stopwatch.StartNew();
pass0.ProgramSelected += mProgram =>
{
// ldflda?
//var l3 = gl0.getUniformLocation(mProgram, "uCameraTargetOffset"); if (l3 != null) gl0.uniform3f(l3, -1.0f, 0, 0.0f);
//var l3 = gl0.getUniformLocation(mProgram, "uCameraTargetOffset"); if (l3 != null) gl0.uniform3f(l3, 0.0f, 0, 1.0f);
var l3 = gl0.getUniformLocation(mProgram, "uCameraTargetOffset"); if (l3 != null) gl0.uniform3f(l3, 0.0f, 0, -1.0f);
// left?
//forward=normalize(float3(0.0 , 0.0 ,1.0));
};
Native.window.onframe += delegate
{
// let render man know..
if (vsyncReady())
return;
// 1800 is 30sec is 30 000
// frameIDslider?
//var fps60 = frameIDslider * 1000 / 60.0f;
var fps60 = frameIDslider * (1 / 60.0f);
pass0.Paint_Image(
fps60,
mMouseOriX,
mMouseOriY,
mMousePosX,
mMousePosY
//,
// gl_FragCoord
// cannot be scaled, and can be referenced directly.
// need another way to scale
//zoom: 0.3f
);
// what does it do?
// need redux build..
gl0.flush();
//await u.animate.async.@checked;
};
}
);
#endregion
// front
IHTMLCanvas shader1canvasPX = null;
#region shader1canvasPX
new { }.With(
async delegate
{
Native.body.style.margin = "0px";
(Native.body.style as dynamic).webkitUserSelect = "auto";
// https://sites.google.com/a/jsc-solutions.net/work/x3
//var vs0 = new ChromeShaderToyColumns.Shaders.ProgramFragmentShader();
//var vs0 = new x2001SpaceStationByOtavio.Shaders.ProgramFragmentShader();
//var vs0 = new RoomScanningEffectByRosme.Shaders.ProgramFragmentShader();
var gl0 = new WebGLRenderingContext(alpha: true);
shader1canvasPX = gl0.canvas;
var c0 = gl0.canvas.AttachToDocument();
//c0.style.SetSize(460, 237);
//c0.width = 460;
//c0.height = 237;
//c0.style.SetSize((int)uizoom * 3, (int)uizoom * 3);
c0.style.SetSize(128, 128);
c0.width = cubefacesize;
c0.height = cubefacesize;
c0.style.SetLocation(720, 8);
var mMouseOriX = 0;
var mMouseOriY = 0;
var mMousePosX = 0;
var mMousePosY = 0;
var pass0 = new ChromeShaderToyColumns.Library.ShaderToy.EffectPass(
null,
gl0,
precission: ChromeShaderToyColumns.Library.ShaderToy.DetermineShaderPrecission(gl0),
supportDerivatives: gl0.getExtension("OES_standard_derivatives") != null,
callback: null,
obj: null,
forceMuted: false,
forcePaused: false,
//quadVBO: Library.ShaderToy.createQuadVBO(gl, right: 0, top: 0),
outputGainNode: null
);
pass0.MakeHeader_Image();
pass0.NewShader_Image(vs0);
pass0.ProgramSelected += mProgram =>
{
// off by 45deg__
// ldflda?
//var l3 = gl0.getUniformLocation(mProgram, "uCameraTargetOffset"); if (l3 != null) gl0.uniform3f(l3, 0.0f, 0, -1.0f);
// fixup
//var l3 = gl0.getUniformLocation(mProgram, "uCameraTargetOffset"); if (l3 != null) gl0.uniform3f(l3, 1.0f, 0, -1.0f);
var l3 = gl0.getUniformLocation(mProgram, "uCameraTargetOffset"); if (l3 != null) gl0.uniform3f(l3, 1.0f, 0, 0.0f);
// front
//forward=normalize(float3(1.0 , 0.0 ,0.0));
};
var sw0 = Stopwatch.StartNew();
Native.window.onframe += delegate
{
// let render man know..
// let render man know..
if (vsyncReady())
return;
// 1800 is 30sec is 30 000
// frameIDslider?
//var fps60 = frameIDslider * 1000 / 60.0f;
var fps60 = frameIDslider * (1 / 60.0f);
pass0.Paint_Image(
fps60,
mMouseOriX,
mMouseOriY,
mMousePosX,
mMousePosY
//,
// gl_FragCoord
// cannot be scaled, and can be referenced directly.
// need another way to scale
//zoom: 0.3f
);
// what does it do?
// need redux build..
gl0.flush();
//await u.animate.async.@checked;
};
}
);
#endregion
// back
IHTMLCanvas shader1canvasNX = null;
#region shader1canvasNX
new { }.With(
async delegate
{
Native.body.style.margin = "0px";
(Native.body.style as dynamic).webkitUserSelect = "auto";
// https://sites.google.com/a/jsc-solutions.net/work/x3
//var vs0 = new ChromeShaderToyColumns.Shaders.ProgramFragmentShader();
//var vs0 = new x2001SpaceStationByOtavio.Shaders.ProgramFragmentShader();
//var vs0 = new RoomScanningEffectByRosme.Shaders.ProgramFragmentShader();
var gl0 = new WebGLRenderingContext(alpha: true);
shader1canvasNX = gl0.canvas;
var c0 = gl0.canvas.AttachToDocument();
//c0.style.SetSize(460, 237);
//c0.width = 460;
//c0.height = 237;
//c0.style.SetSize((int)uizoom * 3, (int)uizoom * 3);
c0.style.SetSize(128, 128);
c0.width = cubefacesize;
c0.height = cubefacesize;
c0.style.SetLocation(720, 8);
var mMouseOriX = 0;
var mMouseOriY = 0;
var mMousePosX = 0;
var mMousePosY = 0;
var pass0 = new ChromeShaderToyColumns.Library.ShaderToy.EffectPass(
null,
gl0,
precission: ChromeShaderToyColumns.Library.ShaderToy.DetermineShaderPrecission(gl0),
supportDerivatives: gl0.getExtension("OES_standard_derivatives") != null,
callback: null,
obj: null,
forceMuted: false,
forcePaused: false,
//quadVBO: Library.ShaderToy.createQuadVBO(gl, right: 0, top: 0),
outputGainNode: null
);
pass0.MakeHeader_Image();
pass0.NewShader_Image(vs0);
pass0.ProgramSelected += mProgram =>
{
// ldflda?
//var l3 = gl0.getUniformLocation(mProgram, "uCameraTargetOffset"); if (l3 != null) gl0.uniform3f(l3, 0, 0, 1.0f);
//var l3 = gl0.getUniformLocation(mProgram, "uCameraTargetOffset"); if (l3 != null) gl0.uniform3f(l3, -1.0f, 0, 1.0f);
var l3 = gl0.getUniformLocation(mProgram, "uCameraTargetOffset"); if (l3 != null) gl0.uniform3f(l3, -1.0f, 0, 0.0f);
// back
//forward=normalize(float3(-1.0 , 0.0 ,0.0));
};
var sw0 = Stopwatch.StartNew();
Native.window.onframe += delegate
{
// let render man know..
// let render man know..
if (vsyncReady())
return;
// 1800 is 30sec is 30 000
// frameIDslider?
//var fps60 = frameIDslider * 1000 / 60.0f;
var fps60 = frameIDslider * (1 / 60.0f);
pass0.Paint_Image(
fps60,
mMouseOriX,
mMouseOriY,
mMousePosX,
mMousePosY
//,
// gl_FragCoord
// cannot be scaled, and can be referenced directly.
// need another way to scale
//zoom: 0.3f
);
// what does it do?
// need redux build..
gl0.flush();
//await u.animate.async.@checked;
};
}
);
#endregion
// right
IHTMLCanvas shader2canvasNZ = null;
// locCameraTargetOffset to look right?
#region shader2canvasNZ
new { }.With(
async delegate
{
//return;
Native.body.style.margin = "0px";
(Native.body.style as dynamic).webkitUserSelect = "auto";
// https://sites.google.com/a/jsc-solutions.net/work/x3
//var vs0 = new ChromeShaderToyColumns.Shaders.ProgramFragmentShader();
//var vs0 = new x2001SpaceStationByOtavio.Shaders.ProgramFragmentShader();
//var vs0 = new Xor3DAlienLandByXor.Shaders.ProgramFragmentShader();
//var vs0 = new RoomScanningEffectByRosme.Shaders.ProgramFragmentShader();
// now we have an empty shell
// which tostrings to the glsl code for gpu
// and if we were to initialize
// enable intellisense
//var vs0i = (RoomScanningEffectByRosme.Shaders.__ProgramFragmentUniforms)(object)vs0;
// script: error JSC1000: No implementation found for this native method, please implement [static ScriptCoreLib.GLSL.Shader.vec3(System.Single, System.Single, System.Single)]
// b.__this._vs0i_5__2.uCameraTargetOffset = new ctor$aQ8ABjj5gzW_aEh4Cmq2oMg(1, 0, 0);
// 270ms ReferenceError: ctor$aQ8ABjj5gzW_aEh4Cmq2oMg is not defined
// wishful thinking eh
//vec3 uCameraTargetOffset = vec3(0.0f, 0.0f, -1.0f);
//vs0i.uCameraTargetOffset = new ScriptCoreLib.GLSL.vec3(1.0f, 0.0f, 0.0f);
// this would mean the program was selected and uniform was uploaded to gpu
var gl0 = new WebGLRenderingContext(alpha: true);
shader2canvasNZ = gl0.canvas;
var c0 = gl0.canvas.AttachToDocument();
//c0.style.SetSize(460, 237);
//c0.width = 460;
//c0.height = 237;
//c0.style.SetSize((int)uizoom * 3, (int)uizoom * 3);
c0.style.SetSize(128, 128);
c0.width = cubefacesize;
c0.height = cubefacesize;
//c0.style.SetLocation(720, 8);
c0.style.SetLocation(800, 360);
var mMouseOriX = 0;
var mMouseOriY = 0;
var mMousePosX = 0;
var mMousePosY = 0;
var pass0 = new ChromeShaderToyColumns.Library.ShaderToy.EffectPass(
null,
gl0,
precission: ChromeShaderToyColumns.Library.ShaderToy.DetermineShaderPrecission(gl0),
supportDerivatives: gl0.getExtension("OES_standard_derivatives") != null,
callback: null,
obj: null,
forceMuted: false,
forcePaused: false,
//quadVBO: Library.ShaderToy.createQuadVBO(gl, right: 0, top: 0),
outputGainNode: null
);
pass0.MakeHeader_Image();
pass0.NewShader_Image(vs0);
var sw0 = Stopwatch.StartNew();
pass0.ProgramSelected += mProgram =>
{
// ldflda?
//var l3 = gl0.getUniformLocation(mProgram, "uCameraTargetOffset"); if (l3 != null) gl0.uniform3f(l3, 1.0f, 0, 1.0f);
//var l3 = gl0.getUniformLocation(mProgram, "uCameraTargetOffset"); if (l3 != null) gl0.uniform3f(l3, 0.0f, 0, -1.0f);
var l3 = gl0.getUniformLocation(mProgram, "uCameraTargetOffset"); if (l3 != null) gl0.uniform3f(l3, 0.0f, 0, 1.0f);
// right
//forward=normalize(float3(0.0 , 0.0 ,-1.0));
};
Native.window.onframe += delegate
{
// let render man know..
// let render man know..
if (vsyncReady())
return;
// 1800 is 30sec is 30 000
// frameIDslider?
//var fps60 = frameIDslider * 1000 / 60.0f;
var fps60 = frameIDslider * (1 / 60.0f);
pass0.Paint_Image(
fps60,
mMouseOriX,
mMouseOriY,
mMousePosX,
mMousePosY
//,
// gl_FragCoord
// cannot be scaled, and can be referenced directly.
// need another way to scale
//zoom: 0.3f
);
// what does it do?
// need redux build..
gl0.flush();
//await u.animate.async.@checked;
};
}
);
#endregion
// bottom
IHTMLCanvas shader2canvasNY = null;
// locCameraTargetOffset to look bottom?
#region shader2canvasNY
new { }.With(
async delegate
{
//return;
Native.body.style.margin = "0px";
(Native.body.style as dynamic).webkitUserSelect = "auto";
// https://sites.google.com/a/jsc-solutions.net/work/x3
//var vs0 = new ChromeShaderToyColumns.Shaders.ProgramFragmentShader();
//var vs0 = new x2001SpaceStationByOtavio.Shaders.ProgramFragmentShader();
//var vs0 = new Xor3DAlienLandByXor.Shaders.ProgramFragmentShader();
//var vs0 = new RoomScanningEffectByRosme.Shaders.ProgramFragmentShader();
// now we have an empty shell
// which tostrings to the glsl code for gpu
// and if we were to initialize
// enable intellisense
//var vs0i = (RoomScanningEffectByRosme.Shaders.__ProgramFragmentUniforms)(object)vs0;
// script: error JSC1000: No implementation found for this native method, please implement [static ScriptCoreLib.GLSL.Shader.vec3(System.Single, System.Single, System.Single)]
// b.__this._vs0i_5__2.uCameraTargetOffset = new ctor$aQ8ABjj5gzW_aEh4Cmq2oMg(1, 0, 0);
// 270ms ReferenceError: ctor$aQ8ABjj5gzW_aEh4Cmq2oMg is not defined
// wishful thinking eh
//vec3 uCameraTargetOffset = vec3(0.0f, 0.0f, -1.0f);
//vs0i.uCameraTargetOffset = new ScriptCoreLib.GLSL.vec3(1.0f, 0.0f, 0.0f);
// this would mean the program was selected and uniform was uploaded to gpu
var gl0 = new WebGLRenderingContext(alpha: true);
shader2canvasNY = gl0.canvas;
var c0 = gl0.canvas.AttachToDocument();
//c0.style.SetSize(460, 237);
//c0.width = 460;
//c0.height = 237;
//c0.style.SetSize((int)uizoom * 3, (int)uizoom * 3);
c0.style.SetSize(128, 128);
c0.width = cubefacesize;
c0.height = cubefacesize;
//c0.style.SetLocation(720, 8);
c0.style.SetLocation(800, 360);
var mMouseOriX = 0;
var mMouseOriY = 0;
var mMousePosX = 0;
var mMousePosY = 0;
var pass0 = new ChromeShaderToyColumns.Library.ShaderToy.EffectPass(
null,
gl0,
precission: ChromeShaderToyColumns.Library.ShaderToy.DetermineShaderPrecission(gl0),
supportDerivatives: gl0.getExtension("OES_standard_derivatives") != null,
callback: null,
obj: null,
forceMuted: false,
forcePaused: false,
//quadVBO: Library.ShaderToy.createQuadVBO(gl, right: 0, top: 0),
outputGainNode: null
);
pass0.MakeHeader_Image();
pass0.NewShader_Image(vs0);
var sw0 = Stopwatch.StartNew();
pass0.ProgramSelected += mProgram =>
{
// ldflda?
// 45deg off??
// front
//var l3 = gl0.getUniformLocation(mProgram, "uCameraTargetOffset"); if (l3 != null) gl0.uniform3f(l3, 0, 0, -1.0f);
//var l3 = gl0.getUniformLocation(mProgram, "uCameraTargetOffset"); if (l3 != null) gl0.uniform3f(l3, 0, -1, -.0001f);
//var l3 = gl0.getUniformLocation(mProgram, "uCameraTargetOffset"); if (l3 != null) gl0.uniform3f(l3, 0, -1, .1f);
//var l3 = gl0.getUniformLocation(mProgram, "uCameraTargetOffset"); if (l3 != null) gl0.uniform3f(l3, 0, -1, 0f);
// left
//var l3 = gl0.getUniformLocation(mProgram, "uCameraTargetOffset"); if (l3 != null) gl0.uniform3f(l3, -1.0f, 0, 0);
//var l3 = gl0.getUniformLocation(mProgram, "uCameraTargetOffset"); if (l3 != null) gl0.uniform3f(l3, -.0001f, -1, 0);
//var l3 = gl0.getUniformLocation(mProgram, "uCameraTargetOffset"); if (l3 != null) gl0.uniform3f(l3, -1f, -1, 0);
//var l3 = gl0.getUniformLocation(mProgram, "uCameraTargetOffset"); if (l3 != null) gl0.uniform3f(l3, 0, -1, 0);
//var l3 = gl0.getUniformLocation(mProgram, "uCameraTargetOffset"); if (l3 != null) gl0.uniform3f(l3, 0.01f, -1, 0.01f);
//var l3 = gl0.getUniformLocation(mProgram, "uCameraTargetOffset"); if (l3 != null) gl0.uniform3f(l3, 0.001f, -1, 0f);
//var l3 = gl0.getUniformLocation(mProgram, "uCameraTargetOffset"); if (l3 != null) gl0.uniform3f(l3, 0, -1, -0.0001f);
var l3 = gl0.getUniformLocation(mProgram, "uCameraTargetOffset"); if (l3 != null) gl0.uniform3f(l3, 0, 1, -0.0001f);
//var l3 = gl0.getUniformLocation(mProgram, "uCameraTargetOffset"); if (l3 != null) gl0.uniform3f(l3, .0001f, -1, 0);
};
Native.window.onframe += delegate
{
// let render man know..
// let render man know..
if (vsyncReady())
return;
// 1800 is 30sec is 30 000
// frameIDslider?
//var fps60 = frameIDslider * 1000 / 60.0f;
var fps60 = frameIDslider * (1 / 60.0f);
pass0.Paint_Image(
fps60,
mMouseOriX,
mMouseOriY,
mMousePosX,
mMousePosY
//,
// gl_FragCoord
// cannot be scaled, and can be referenced directly.
// need another way to scale
//zoom: 0.3f
);
// what does it do?
// need redux build..
gl0.flush();
//await u.animate.async.@checked;
};
}
);
#endregion
// top
IHTMLCanvas shader2canvasPY = null;
// locCameraTargetOffset to look right?
#region shader2canvasPY
new { }.With(
async delegate
{
//return;
Native.body.style.margin = "0px";
(Native.body.style as dynamic).webkitUserSelect = "auto";
// https://sites.google.com/a/jsc-solutions.net/work/x3
//var vs0 = new ChromeShaderToyColumns.Shaders.ProgramFragmentShader();
//var vs0 = new x2001SpaceStationByOtavio.Shaders.ProgramFragmentShader();
//var vs0 = new Xor3DAlienLandByXor.Shaders.ProgramFragmentShader();
//var vs0 = new RoomScanningEffectByRosme.Shaders.ProgramFragmentShader();
// now we have an empty shell
// which tostrings to the glsl code for gpu
// and if we were to initialize
// enable intellisense
//var vs0i = (RoomScanningEffectByRosme.Shaders.__ProgramFragmentUniforms)(object)vs0;
// script: error JSC1000: No implementation found for this native method, please implement [static ScriptCoreLib.GLSL.Shader.vec3(System.Single, System.Single, System.Single)]
// b.__this._vs0i_5__2.uCameraTargetOffset = new ctor$aQ8ABjj5gzW_aEh4Cmq2oMg(1, 0, 0);
// 270ms ReferenceError: ctor$aQ8ABjj5gzW_aEh4Cmq2oMg is not defined
// wishful thinking eh
//vec3 uCameraTargetOffset = vec3(0.0f, 0.0f, -1.0f);
//vs0i.uCameraTargetOffset = new ScriptCoreLib.GLSL.vec3(1.0f, 0.0f, 0.0f);
// this would mean the program was selected and uniform was uploaded to gpu
var gl0 = new WebGLRenderingContext(alpha: true);
shader2canvasPY = gl0.canvas;
var c0 = gl0.canvas.AttachToDocument();
//c0.style.SetSize(460, 237);
//c0.width = 460;
//c0.height = 237;
//c0.style.SetSize((int)uizoom * 3, (int)uizoom * 3);
c0.style.SetSize(128, 128);
c0.width = cubefacesize;
c0.height = cubefacesize;
//c0.style.SetLocation(720, 8);
c0.style.SetLocation(800, 360);
var mMouseOriX = 0;
var mMouseOriY = 0;
var mMousePosX = 0;
var mMousePosY = 0;
var pass0 = new ChromeShaderToyColumns.Library.ShaderToy.EffectPass(
null,
gl0,
precission: ChromeShaderToyColumns.Library.ShaderToy.DetermineShaderPrecission(gl0),
supportDerivatives: gl0.getExtension("OES_standard_derivatives") != null,
callback: null,
obj: null,
forceMuted: false,
forcePaused: false,
//quadVBO: Library.ShaderToy.createQuadVBO(gl, right: 0, top: 0),
outputGainNode: null
);
pass0.MakeHeader_Image();
pass0.NewShader_Image(vs0);
var sw0 = Stopwatch.StartNew();
pass0.ProgramSelected += mProgram =>
{
// ldflda?
// 45deg off??
// front
//var l3 = gl0.getUniformLocation(mProgram, "uCameraTargetOffset"); if (l3 != null) gl0.uniform3f(l3, 0, 0, -1.0f);
//var l3 = gl0.getUniformLocation(mProgram, "uCameraTargetOffset"); if (l3 != null) gl0.uniform3f(l3, 0, -1, -.0001f);
//var l3 = gl0.getUniformLocation(mProgram, "uCameraTargetOffset"); if (l3 != null) gl0.uniform3f(l3, 0, -1, .1f);
//var l3 = gl0.getUniformLocation(mProgram, "uCameraTargetOffset"); if (l3 != null) gl0.uniform3f(l3, 0, -1, 0f);
// left
//var l3 = gl0.getUniformLocation(mProgram, "uCameraTargetOffset"); if (l3 != null) gl0.uniform3f(l3, -1.0f, 0, 0);
//var l3 = gl0.getUniformLocation(mProgram, "uCameraTargetOffset"); if (l3 != null) gl0.uniform3f(l3, -.0001f, -1, 0);
//var l3 = gl0.getUniformLocation(mProgram, "uCameraTargetOffset"); if (l3 != null) gl0.uniform3f(l3, -1f, -1, 0);
//var l3 = gl0.getUniformLocation(mProgram, "uCameraTargetOffset"); if (l3 != null) gl0.uniform3f(l3, 0, -1, 0);
//var l3 = gl0.getUniformLocation(mProgram, "uCameraTargetOffset"); if (l3 != null) gl0.uniform3f(l3, 0.01f, -1, 0.01f);
//var l3 = gl0.getUniformLocation(mProgram, "uCameraTargetOffset"); if (l3 != null) gl0.uniform3f(l3, 0.001f, 1, 0f);
//var l3 = gl0.getUniformLocation(mProgram, "uCameraTargetOffset"); if (l3 != null) gl0.uniform3f(l3, 0, 1, -0.0001f);
//var l3 = gl0.getUniformLocation(mProgram, "uCameraTargetOffset"); if (l3 != null) gl0.uniform3f(l3, 0, -1, -0.0001f);
var l3 = gl0.getUniformLocation(mProgram, "uCameraTargetOffset"); if (l3 != null) gl0.uniform3f(l3, 0, -1, 0.0001f);
//var l3 = gl0.getUniformLocation(mProgram, "uCameraTargetOffset"); if (l3 != null) gl0.uniform3f(l3, .0001f, -1, 0);
};
Native.window.onframe += delegate
{
//d = a[0].CS___8__locals1.vsync != null;
//e = a[0].CS___8__locals1.vsync.kAcABp_b1ITCbIktNs3el5Q().dgQABqwxMjO1zVAJb5WXKA();
// let render man know..
// let render man know..
if (vsyncReady())
return;
// 1800 is 30sec is 30 000
// frameIDslider?
//var fps60 = frameIDslider * 1000 / 60.0f;
var fps60 = frameIDslider * (1 / 60.0f);
pass0.Paint_Image(
fps60,
mMouseOriX,
mMouseOriY,
mMousePosX,
mMousePosY
//,
// gl_FragCoord
// cannot be scaled, and can be referenced directly.
// need another way to scale
//zoom: 0.3f
);
// what does it do?
// need redux build..
gl0.flush();
//await u.animate.async.@checked;
};
}
);
#endregion
new IHTMLHorizontalRule { }.AttachToDocument();
var camerax = new IHTMLInput { type = ScriptCoreLib.Shared.HTMLInputTypeEnum.range, min = 0 - 2048 * 4, max = 0 + 2048 * 4, valueAsNumber = 0, title = "camerax" }.AttachToDocument();
// up. whats the most high a rocket can go 120km?
new IHTMLHorizontalRule { }.AttachToDocument();
// how high is the bunker?
var cameray = new IHTMLInput { type = ScriptCoreLib.Shared.HTMLInputTypeEnum.range, min = 0 - 2048 * 4, max = 2048 * 4, valueAsNumber = 0, title = "cameray" }.AttachToDocument();
new IHTMLBreak { }.AttachToDocument();
var camerayHigh = new IHTMLInput { type = ScriptCoreLib.Shared.HTMLInputTypeEnum.range, min = cameray.max, max = 1024 * 256, valueAsNumber = cameray.max, title = "cameray" }.AttachToDocument();
new IHTMLHorizontalRule { }.AttachToDocument();
var cameraz = new IHTMLInput { type = ScriptCoreLib.Shared.HTMLInputTypeEnum.range, min = 0 - 2048 * 4, max = 0 + 2048 * 4, valueAsNumber = 0, title = "cameraz" }.AttachToDocument();
// for render server
var fcamerax = 0.0;
var fcameray = 0.0;
var fcameraz = 0.0;
//while (await camerax.async.onchange)
//cameray.onchange += delegate
//{
// if (cameray.valueAsNumber < cameray.max)
// camerayHigh.valueAsNumber = camerayHigh.min;
//};
camerayHigh.onmousedown += delegate
{
//if (camerayHigh.valueAsNumber > camerayHigh.min)
cameray.valueAsNumber = cameray.max;
};
Action applycameraoffset = delegate
{
// make sure UI and gpu sync up
var cy = cameray;
if (cameray.valueAsNumber < cameray.max)
camerayHigh.valueAsNumber = camerayHigh.min;
if (camerayHigh.valueAsNumber > camerayHigh.min)
cameray.valueAsNumber = cameray.max;
if (cameray.valueAsNumber == cameray.max)
cy = camerayHigh;
cameraoffset = new THREE.Vector3(
// left?
1.0 * (camerax + fcamerax),
// height?
//0,
//1600,
//1024,
// if the camera is in the center, would we need to move the scene?
// we have to move the camera. as we move the scene the lights are messed up
//2014,
1.0 * (cy + fcameray),
//1200
1.0 * (cameraz + fcameraz)
// can we hover top of the map?
);
};
#region y
// need to rotate90?
var cameraNY = new THREE.PerspectiveCamera(fov: 90, aspect: 1.0, near: 1, far: far);
applycameraoffset += delegate
{
cameraNY.position.copy(new THREE.Vector3(0, 0, 0));
cameraNY.lookAt(new THREE.Vector3(0, -1, 0));
cameraNY.position.add(cameraoffset);
};
//cameraNY.lookAt(new THREE.Vector3(0, 1, 0));
var canvasNY = new CanvasRenderingContext2D(cubefacesize, cubefacesize);
canvasNY.canvas.style.SetLocation(cubecameraoffsetx + (int)(uizoom * cubefacesize + 8) * 1, 8 + (int)(uizoom * cubefacesize + 8) * 2);
canvasNY.canvas.title = "NY";
canvasNY.canvas.AttachToDocument();
canvasNY.canvas.style.transformOrigin = "0 0";
// roslyn!
canvasNY.canvas.style.transform = $"scale({uizoom})";
var cameraPY = new THREE.PerspectiveCamera(fov: 90, aspect: 1.0, near: 1, far: far);
applycameraoffset += delegate
{
cameraPY.position.copy(new THREE.Vector3(0, 0, 0));
cameraPY.lookAt(new THREE.Vector3(0, 1, 0));
cameraPY.position.add(cameraoffset);
};
//cameraPY.lookAt(new THREE.Vector3(0, -1, 0));
var canvasPY = new CanvasRenderingContext2D(cubefacesize, cubefacesize);
canvasPY.canvas.style.SetLocation(cubecameraoffsetx + (int)(uizoom * cubefacesize + 8) * 1, 8 + (int)(uizoom * cubefacesize + 8) * 0);
canvasPY.canvas.title = "PY";
canvasPY.canvas.AttachToDocument();
canvasPY.canvas.style.transformOrigin = "0 0";
canvasPY.canvas.style.transform = $"scale({uizoom})";
#endregion
// transpose xz?
#region x
var cameraNX = new THREE.PerspectiveCamera(fov: 90, aspect: 1.0, near: 1, far: far);
applycameraoffset += delegate
{
cameraNX.position.copy(new THREE.Vector3(0, 0, 0));
cameraNX.lookAt(new THREE.Vector3(0, 0, 1));
cameraNX.position.add(cameraoffset);
};
//cameraNX.lookAt(new THREE.Vector3(0, 0, -1));
//cameraNX.lookAt(new THREE.Vector3(-1, 0, 0));
//cameraNX.lookAt(new THREE.Vector3(1, 0, 0));
var canvasNX = new CanvasRenderingContext2D(cubefacesize, cubefacesize);
canvasNX.canvas.style.SetLocation(cubecameraoffsetx + (int)(uizoom * cubefacesize + 8) * 2, 8 + (int)(uizoom * cubefacesize + 8) * 1);
canvasNX.canvas.title = "NX";
canvasNX.canvas.AttachToDocument();
canvasNX.canvas.style.transformOrigin = "0 0";
canvasNX.canvas.style.transform = $"scale({uizoom})";
var cameraPX = new THREE.PerspectiveCamera(fov: 90, aspect: 1.0, near: 1, far: far);
applycameraoffset += delegate
{
cameraPX.position.copy(new THREE.Vector3(0, 0, 0));
cameraPX.lookAt(new THREE.Vector3(0, 0, -1));
cameraPX.position.add(cameraoffset);
};
//cameraPX.lookAt(new THREE.Vector3(0, 0, 1));
//cameraPX.lookAt(new THREE.Vector3(1, 0, 0));
//cameraPX.lookAt(new THREE.Vector3(-1, 0, 0));
var canvasPX = new CanvasRenderingContext2D(cubefacesize, cubefacesize);
canvasPX.canvas.style.SetLocation(cubecameraoffsetx + (int)(uizoom * cubefacesize + 8) * 0, 8 + (int)(uizoom * cubefacesize + 8) * 1);
canvasPX.canvas.title = "PX";
canvasPX.canvas.AttachToDocument();
canvasPX.canvas.style.transformOrigin = "0 0";
canvasPX.canvas.style.transform = $"scale({uizoom})";
#endregion
#region z
var cameraNZ = new THREE.PerspectiveCamera(fov: 90, aspect: 1.0, near: 1, far: far);
//cameraNZ.lookAt(new THREE.Vector3(0, 0, -1));
applycameraoffset += delegate
{
cameraNZ.position.copy(new THREE.Vector3(0, 0, 0));
cameraNZ.lookAt(new THREE.Vector3(1, 0, 0));
cameraNZ.position.add(cameraoffset);
};
//cameraNX.lookAt(new THREE.Vector3(-1, 0, 0));
//cameraNZ.lookAt(new THREE.Vector3(0, 0, 1));
var canvasNZ = new CanvasRenderingContext2D(cubefacesize, cubefacesize);
canvasNZ.canvas.style.SetLocation(cubecameraoffsetx + (int)(uizoom * cubefacesize + 8) * 3, 8 + (int)(uizoom * cubefacesize + 8) * 1);
canvasNZ.canvas.title = "NZ";
canvasNZ.canvas.AttachToDocument();
canvasNZ.canvas.style.transformOrigin = "0 0";
canvasNZ.canvas.style.transform = $"scale({uizoom})";
var cameraPZ = new THREE.PerspectiveCamera(fov: 90, aspect: 1.0, near: 1, far: far);
//cameraPZ.lookAt(new THREE.Vector3(1, 0, 0));
applycameraoffset += delegate
{
cameraPZ.position.copy(new THREE.Vector3(0, 0, 0));
cameraPZ.lookAt(new THREE.Vector3(-1, 0, 0));
cameraPZ.position.add(cameraoffset);
};
//cameraPZ.lookAt(new THREE.Vector3(0, 0, 1));
//cameraPZ.lookAt(new THREE.Vector3(0, 0, -1));
var canvasPZ = new CanvasRenderingContext2D(cubefacesize, cubefacesize);
canvasPZ.canvas.style.SetLocation(cubecameraoffsetx + (int)(uizoom * cubefacesize + 8) * 1, 8 + (int)(uizoom * cubefacesize + 8) * 1);
canvasPZ.canvas.title = "PZ";
canvasPZ.canvas.AttachToDocument();
canvasPZ.canvas.style.transformOrigin = "0 0";
canvasPZ.canvas.style.transform = $"scale({uizoom})";
#endregion
// c++ alias locals would be nice..
var canvas0 = (IHTMLCanvas)renderer0.domElement;
var old = new
{
CursorX = 0,
CursorY = 0
};
var st = new Stopwatch();
st.Start();
//canvas0.css.active.style.cursor = IStyle.CursorEnum.move;
// X:\jsc.svn\examples\javascript\Test\TestMouseMovement\TestMouseMovement\Application.cs
// THREE.WebGLProgram: gl.getProgramInfoLog() C:\fakepath(78,3-98): warning X3557: loop only executes for 1 iteration(s), forcing loop to unroll
// THREE.WebGLProgram: gl.getProgramInfoLog() (79,3-98): warning X3557: loop only executes for 1 iteration(s), forcing loop to unroll
// http://www.roadtovr.com/youtube-confirms-stereo-3d-360-video-support-coming-soon/
// https://www.youtube.com/watch?v=D-Wl9jAB45Q
#region spherical
var gl = new WebGLRenderingContext(alpha: true, preserveDrawingBuffer: true);
var c = gl.canvas.AttachToDocument();
// 3840x2160
//c.style.SetSize(3840, 2160);
// https://sites.google.com/a/jsc-solutions.net/work/knowledge-base/15-dualvr/20150722/360-youtube
c.width = 3840;
c.height = 2160;
//c.width = 3840 * 2;
//c.height = 2160 * 2;
//c.width = 3840;
//c.height = 2160;
// 1,777777777777778
// https://www.youtube.com/watch?v=fTfJwzRsE-w
//c.width = 7580;
//c.height = 3840;
//1,973958333333333
//7580
// 3840
// wont work
//c.width = 8192;
//c.height = 4096;
// this has the wrong aspect?
//c.width = 6466;
//c.height = 3232;
new IHTMLPre { new { c.width, c.height } }.AttachToDocument();
//6466x3232
//var suizoom = 720f / c.height;
//var suizoom = 360f / c.height;
var suizoom = 480f / c.width;
c.style.transformOrigin = "0 0";
c.style.transform = $"scale({suizoom})";
//c.style.backgroundColor = "yellow";
c.style.position = IStyle.PositionEnum.absolute;
c.style.SetLocation(8 + (int)(uizoom * cubefacesize + 8) * 0, 8 + (int)(uizoom * cubefacesize + 8) * 3);
var pass = new CubeToEquirectangular.Library.ShaderToy.EffectPass(
null,
gl,
precission: CubeToEquirectangular.Library.ShaderToy.DetermineShaderPrecission(gl),
supportDerivatives: gl.getExtension("OES_standard_derivatives") != null,
callback: null,
obj: null,
forceMuted: false,
forcePaused: false,
//quadVBO: Library.ShaderToy.createQuadVBO(gl, right: 0, top: 0),
outputGainNode: null
);
// how shall we upload our textures?
// can we reference GLSL.samplerCube yet?
//pass.mInputs[0] = new samplerCube { };
pass.mInputs[0] = new CubeToEquirectangular.Library.ShaderToy.samplerCube { };
pass.MakeHeader_Image();
var vs = new Shaders.ProgramFragmentShader();
pass.NewShader_Image(vs);
#endregion
//var frame0 = new HTML.Images.FromAssets.tiles_regrid().AttachToDocument();
var frame0 = new HTML.Images.FromAssets.galaxy_starfield().AttachToDocument();
//var frame0 = new HTML.Images.FromAssets.galaxy_starfield150FOV().AttachToDocument();
//var xor = new HTML.Images.FromAssets.Orion360_test_image_8192x4096().AttachToDocument();
//var xor = new HTML.Images.FromAssets._2_no_clouds_4k().AttachToDocument();
//var frame0 = new HTML.Images.FromAssets._2294472375_24a3b8ef46_o().AttachToDocument();
// 270px
//xor.style.height = "";
frame0.style.height = "270px";
frame0.style.width = "480px";
frame0.style.SetLocation(
8 + (int)(uizoom * cubefacesize + 8) * 0 + 480 + 16, 8 + (int)(uizoom * cubefacesize + 8) * 3);
#region DirectoryEntry
var dir = default(DirectoryEntry);
int files2count = 0;
new IHTMLButton { "openDirectory" }.AttachToDocument().onclick += async delegate
{
dir = (DirectoryEntry)await chrome.fileSystem.chooseEntry(new { type = "openDirectory" });
var dir2r = dir.createReader();
var files2 = await dir2r.readFileEntries();
files2count = files2.Count();
if (files2count > 0)
{
new IHTMLPre { new { files2count } }.AttachToDocument();
}
};
frame0.style.cursor = IStyle.CursorEnum.pointer;
frame0.title = "save frame";
frame0.onclick += delegate
{
// http://paulbourke.net/papers/vsmm2006/vsmm2006.pdf
// A method of creating synthetic stereoscopic panoramic images that can be implemented
//in most rendering packages has been presented. If single panoramic pairs can be created
//then stereoscopic panoramic movies are equally possible giving rise to the prospect of
//movies where the viewer can interact with, at least with regard to what they choose to look
//at.These images can be projected so as to engage the two features of the human visual
//system that assist is giving us a sense of immersion, the feeling of “being there”. That is,
//imagery that contains parallax information as captured from two horizontally separated eye
//positions (stereopsis)and imagery that fills our peripheral vision.The details that define
//how the two panoramic images should be created in rendering packages are provided, in
//particular, how to precisely configure the virtual cameras and control the distance to zero
//parallax.
// grab a frame
if (dir == null)
{
// not exporting to file system?
var f0 = new IHTMLImage { src = gl.canvas.toDataURL() };
//var f0 = (IHTMLImage)gl.canvas;
//var f0 = (IHTMLImage)gl.canvas;
//var base64 = gl.canvas.toDataURL();
//frame0.src = base64;
frame0.src = f0.src;
// 7MB!
return;
}
// // ---------------------------
//IrfanView
//---------------------------
//Warning !
//The file: "X:\vr\tape1\0001.jpg" is a PNG file with incorrect extension !
//Rename ?
//---------------------------
//Yes No
//---------------------------
// haha this will render the thumbnail.
//dir.WriteAllBytes("0000.png", frame0);
//dir.WriteAllBytes("0000.png", gl.canvas);
var glsw = Stopwatch.StartNew();
dir.WriteAllBytes("0000.png", gl);
new IHTMLPre { new { glsw.ElapsedMilliseconds } }.AttachToDocument();
// {{ ElapsedMilliseconds = 1548 }}
// 3.7MB
// 3840x2160
};
#endregion
#region render 60hz 30sec
new IHTMLButton {
$"render {maxfps}hz {maxlengthseconds}sec"
}.AttachToDocument().onclick += async e =>
{
e.Element.disabled = true;
var total = Stopwatch.StartNew();
var status = "rendering... " + new { dir };
new IHTMLPre { () => status }.AttachToDocument();
if (dir == null)
{
//dir = (DirectoryEntry)await chrome.fileSystem.chooseEntry(new { type = "openDirectory" });
}
total.Restart();
vsync = new TaskCompletionSource<object>();
await vsync.Task;
status = "rendering... vsync";
//var frameid = 0;
//frameIDslider.valueAsNumber = -1;
frameIDslider.valueAsNumber = files2count - 1;
goto beforeframe;
// parallax offset?
await_nextframe:
var filename = frameIDslider.valueAsNumber.ToString().PadLeft(5, '0') + ".png";
status = "rendering... " + new { filename };
vsync = new TaskCompletionSource<object>();
await vsync.Task;
// frame0 has been rendered
var swcapture = Stopwatch.StartNew();
status = "WriteAllBytes... " + new { filename };
//await Native.window.async.onframe;
// https://code.google.com/p/chromium/issues/detail?id=404301
if (dir != null)
await dir.WriteAllBytes(filename, gl);
//await dir.WriteAllBytes(filename, gl.canvas);
status = "WriteAllBytes... done " + new { fcamerax, filename, swcapture.ElapsedMilliseconds };
status = "rdy " + new { filename, fcamerax };
//await Native.window.async.onframe;
// design mode v render mode
if (cubefacesize < cubefacesizeMAX)
frameIDslider.valueAsNumber += 15;
else
frameIDslider.valueAsNumber++;
beforeframe:
// speed? S6 slow motion?
// this is really slow. if we do x4x2 =x8
// https://www.youtube.com/watch?v=r76ULW16Ib8
//fcamerax += 16 * (1.0 / 60.0);
// fcamerax = radius * Math.Cos(Math.PI * (frameid - (60 * 30 / 2f)) / (60 * 30 / 2f));
// speed? S6 slow motion?
// this is really slow. if we do x4x2 =x8
// https://www.youtube.com/watch?v=r76ULW16Ib8
//fcamerax += 16 * (1.0 / 60.0);
// some shaders need to know where the camera is looking from. can we tell them?
//fcamerax = 2.2 * Math.Sin(Math.PI * (frameIDslider.valueAsNumber - (60 * 30 / 2f)) / (60 * 30 / 2f));
//fcameraz = 4.4 * Math.Cos(Math.PI * (frameIDslider.valueAsNumber - (60 * 30 / 2f)) / (60 * 30 / 2f));
//// up
//fcameray = 4.4 * Math.Cos(Math.PI * (frameIDslider.valueAsNumber - (60 * 30 / 2f)) / (60 * 30 / 2f));
// cameraz.valueAsNumber = (int)(cameraz.max * Math.Sin(Math.PI * (frameid - (60 * 30 / 2f)) / (60 * 30 / 2f)));
// up
//fcameray = 128 * Math.Cos(Math.PI * (frameid - (60 * 30 / 2f)) / (60 * 30 / 2f));
//fcamerax += (1.0 / 60.0);
//fcamerax += (1.0 / 60.0) * 120;
// 60hz 30sec
if (frameIDslider.valueAsNumber < maxframes)
{
// Blob GC? either this helms or the that we made a Blob static.
//await Task.Delay(11);
await Task.Delay(33);
// gc at 260 happened twice?
goto await_nextframe;
}
total.Stop();
status = "all done " + new { frameid = frameIDslider.valueAsNumber, total.ElapsedMilliseconds };
vsync = default(TaskCompletionSource<object>);
// http://stackoverflow.com/questions/22899333/delete-javascript-blobs
e.Element.disabled = false;
};
#endregion
// "Z:\jsc.svn\examples\javascript\WebGL\WebGLColladaExperiment\WebGLColladaExperiment\WebGLColladaExperiment.csproj"
// asus will hang
// https://3dwarehouse.sketchup.com/model.html?id=fb7a0448d940e575edc01389f336fb0a
// can we get one frame into vr?
// cube: mesh to cast shadows
//{
// var planeGeometry0 = new THREE.PlaneGeometry(cubefacesize, cubefacesize, 8, 8);
// var floor2 = new THREE.Mesh(planeGeometry0,
// //new THREE.MeshPhongMaterial(new { ambient = 0x101010, color = 0xA26D41, specular = 0xA26D41, shininess = 1 })
// //new THREE.MeshPhongMaterial(new { ambient = 0x101010, color = 0xff0000, specular = 0xA26D41, shininess = 1 })
// //new THREE.MeshPhongMaterial(new { ambient = 0xff0000, color = 0xff0000, specular = 0xff0000 })
// new THREE.MeshPhongMaterial(new { ambient = 0xff0000, color = 0xff0000 })
// );
// floor2.position.set(0, 0, -cubefacesize / 2);
// floor2.AttachTo(scene);
//}
//{
// var planeGeometry0 = new THREE.PlaneGeometry(cubefacesize, cubefacesize, 8, 8);
// var floor2 = new THREE.Mesh(planeGeometry0,
// //new THREE.MeshPhongMaterial(new { ambient = 0x101010, color = 0xA26D41, specular = 0xA26D41, shininess = 1 })
// //new THREE.MeshPhongMaterial(new { ambient = 0x101010, color = 0xff0000, specular = 0xA26D41, shininess = 1 })
// //new THREE.MeshPhongMaterial(new { ambient = 0xff0000, color = 0xff0000, specular = 0xff0000 })
// new THREE.MeshPhongMaterial(new { ambient = 0x0000ff, color = 0x0000ff })
// );
// floor2.position.set(-cubefacesize / 2, 0, 0);
// floor2.rotateOnAxis(new THREE.Vector3(0, 1, 0), Math.PI / 2);
// floor2.AttachTo(scene);
//}
// front?
{
//var tex0 = new THREE.Texture { image = new moon(), needsUpdate = true };
//var tex0 = new THREE.Texture(new moon());
//var tex0 = new THREE.Texture(new moon()) { needsUpdate = true };
var tex0 = new THREE.Texture(shader1canvasPX) { needsUpdate = true };
applycameraoffset += delegate { tex0.needsUpdate = true; };
var planeGeometry0 = new THREE.PlaneGeometry(cubefacesize, cubefacesize, 8, 8);
var floor2 = new THREE.Mesh(planeGeometry0,
//new THREE.MeshPhongMaterial(new { ambient = 0x101010, color = 0xA26D41, specular = 0xA26D41, shininess = 1 })
//new THREE.MeshPhongMaterial(new { ambient = 0x101010, color = 0xff0000, specular = 0xA26D41, shininess = 1 })
//new THREE.MeshPhongMaterial(new { ambient = 0xff0000, color = 0xff0000, specular = 0xff0000 })
new THREE.MeshPhongMaterial(
new
{
map = tex0,
//ambient = 0x00ff00,
//color = 0x00ff00
})
);
//floor2.position.set(0, 0, -cubefacesize * 0.55);
floor2.position.set(-cubefacesize * 0.5, 0, 0);
floor2.rotateOnAxis(new THREE.Vector3(0, 1, 0), Math.PI / 2);
floor2.AttachTo(scene);
}
// left?
{
//var tex0 = new THREE.Texture { image = new moon(), needsUpdate = true };
//var tex0 = new THREE.Texture(new moon());
//var tex0 = new THREE.Texture(new moon()) { needsUpdate = true };
var tex0 = new THREE.Texture(shader0canvasPZ) { needsUpdate = true };
applycameraoffset += delegate { tex0.needsUpdate = true; };
var planeGeometry0 = new THREE.PlaneGeometry(cubefacesize, cubefacesize, 8, 8);
var floor2 = new THREE.Mesh(planeGeometry0,
//new THREE.MeshPhongMaterial(new { ambient = 0x101010, color = 0xA26D41, specular = 0xA26D41, shininess = 1 })
//new THREE.MeshPhongMaterial(new { ambient = 0x101010, color = 0xff0000, specular = 0xA26D41, shininess = 1 })
//new THREE.MeshPhongMaterial(new { ambient = 0xff0000, color = 0xff0000, specular = 0xff0000 })
new THREE.MeshPhongMaterial(
new
{
map = tex0,
//ambient = 0xff0000,
// can we color mark it?
//color = 0x00ff00
})
);
//floor2.position.set(0, -cubefacesize * 0.5, 0);
floor2.position.set(0, 0, cubefacesize * 0.5);
//floor2.rotateOnAxis(new THREE.Vector3(0, 1, 0), -Math.PI / 2);
floor2.rotateOnAxis(new THREE.Vector3(0, 1, 0), Math.PI);
floor2.AttachTo(scene);
}
// right?
{
//var tex0 = new THREE.Texture { image = new moon(), needsUpdate = true };
//var tex0 = new THREE.Texture(new moon());
//var tex0 = new THREE.Texture(new moon()) { needsUpdate = true };
var tex0 = new THREE.Texture(shader2canvasNZ) { needsUpdate = true };
applycameraoffset += delegate { tex0.needsUpdate = true; };
var planeGeometry0 = new THREE.PlaneGeometry(cubefacesize, cubefacesize, 8, 8);
var floor2 = new THREE.Mesh(planeGeometry0,
//new THREE.MeshPhongMaterial(new { ambient = 0x101010, color = 0xA26D41, specular = 0xA26D41, shininess = 1 })
//new THREE.MeshPhongMaterial(new { ambient = 0x101010, color = 0xff0000, specular = 0xA26D41, shininess = 1 })
//new THREE.MeshPhongMaterial(new { ambient = 0xff0000, color = 0xff0000, specular = 0xff0000 })
new THREE.MeshPhongMaterial(
new
{
map = tex0,
//ambient = 0x00ff00,
// can we color mark it?
//color = 0x00ff00
})
);
//floor2.position.set(0, -cubefacesize * 0.5, 0);
floor2.position.set(0, 0, -cubefacesize * 0.5);
//floor2.rotateOnAxis(new THREE.Vector3(0, 1, 0), -Math.PI / 2);
//floor2.rotateOnAxis(new THREE.Vector3(0, 1, 0), Math.PI);
floor2.AttachTo(scene);
}
// back?
{
//var tex0 = new THREE.Texture { image = new moon(), needsUpdate = true };
//var tex0 = new THREE.Texture(new moon());
//var tex0 = new THREE.Texture(new moon()) { needsUpdate = true };
var tex0 = new THREE.Texture(shader1canvasNX) { needsUpdate = true };
applycameraoffset += delegate { tex0.needsUpdate = true; };
var planeGeometry0 = new THREE.PlaneGeometry(cubefacesize, cubefacesize, 8, 8);
var floor2 = new THREE.Mesh(planeGeometry0,
//new THREE.MeshPhongMaterial(new { ambient = 0x101010, color = 0xA26D41, specular = 0xA26D41, shininess = 1 })
//new THREE.MeshPhongMaterial(new { ambient = 0x101010, color = 0xff0000, specular = 0xA26D41, shininess = 1 })
//new THREE.MeshPhongMaterial(new { ambient = 0xff0000, color = 0xff0000, specular = 0xff0000 })
new THREE.MeshPhongMaterial(
new
{
map = tex0,
//ambient = 0x00ff00,
//color = 0x00ff00
})
);
floor2.position.set(cubefacesize * 0.5, 0, 0);
floor2.rotateOnAxis(new THREE.Vector3(0, 1, 0), -Math.PI / 2);
floor2.AttachTo(scene);
}
// bottom?
{
//var tex0 = new THREE.Texture { image = new moon(), needsUpdate = true };
//var tex0 = new THREE.Texture(new moon());
//var tex0 = new THREE.Texture(new moon()) { needsUpdate = true };
var tex0 = new THREE.Texture(shader2canvasNY) { needsUpdate = true };
applycameraoffset += delegate { tex0.needsUpdate = true; };
var planeGeometry0 = new THREE.PlaneGeometry(cubefacesize, cubefacesize, 8, 8);
var floor2 = new THREE.Mesh(planeGeometry0,
//new THREE.MeshPhongMaterial(new { ambient = 0x101010, color = 0xA26D41, specular = 0xA26D41, shininess = 1 })
//new THREE.MeshPhongMaterial(new { ambient = 0x101010, color = 0xff0000, specular = 0xA26D41, shininess = 1 })
//new THREE.MeshPhongMaterial(new { ambient = 0xff0000, color = 0xff0000, specular = 0xff0000 })
new THREE.MeshPhongMaterial(
new
{
map = tex0,
//ambient = 0x00ff00,
// can we color mark it?
//color = 0x00ff00
})
);
//floor2.position.set(0, -cubefacesize * 0.5, 0);
//floor2.position.set(cubefacesize * 0.5, 0, 0);
//floor2.position.set(-cubefacesize * 0.5, 0, 0);
floor2.position.set(0, -cubefacesize * 0.5, 0);
//floor2.rotateOnAxis(new THREE.Vector3(0, 0, 1), Math.PI / 2);
applycameraoffset += delegate
{
floor2.rotation.set(0, 0, 0);
//floor2.rotateOnAxis(new THREE.Vector3(0, 0, 1), -Math.PI / 2);
//floor2.rotateOnAxis(new THREE.Vector3(0, 1, 0), Math.PI / 2);
floor2.rotateOnAxis(new THREE.Vector3(1, 0, 0), -Math.PI / 2);
//floor2.rotateOnAxis(new THREE.Vector3(0, 1, 0), -Math.PI / 2);
//floor2.rotateOnAxis(new THREE.Vector3(0, 1, 0), Math.PI);
//floor2.rotateOnAxis(new THREE.Vector3(0, 0, 1), Math.PI / 2);
//floor2.rotateOnAxis(new THREE.Vector3(0, 0, 1), Math.PI );
//floor2.rotateOnAxis(new THREE.Vector3(0, 0, 1), Math.PI);
floor2.rotateOnAxis(new THREE.Vector3(0, 0, 1), -Math.PI + bottomRotate100 * 0.01f);
};
floor2.AttachTo(scene);
}
// top?
{
//var tex0 = new THREE.Texture { image = new moon(), needsUpdate = true };
//var tex0 = new THREE.Texture(new moon());
//var tex0 = new THREE.Texture(new moon()) { needsUpdate = true };
var tex0 = new THREE.Texture(shader2canvasPY) { needsUpdate = true };
applycameraoffset += delegate { tex0.needsUpdate = true; };
var planeGeometry0 = new THREE.PlaneGeometry(cubefacesize, cubefacesize, 8, 8);
var floor2 = new THREE.Mesh(planeGeometry0,
//new THREE.MeshPhongMaterial(new { ambient = 0x101010, color = 0xA26D41, specular = 0xA26D41, shininess = 1 })
//new THREE.MeshPhongMaterial(new { ambient = 0x101010, color = 0xff0000, specular = 0xA26D41, shininess = 1 })
//new THREE.MeshPhongMaterial(new { ambient = 0xff0000, color = 0xff0000, specular = 0xff0000 })
new THREE.MeshPhongMaterial(
new
{
map = tex0,
//ambient = 0x00ff00,
// can we color mark it?
//color = 0x00ff00
})
);
//floor2.position.set(0, -cubefacesize * 0.5, 0);
//floor2.position.set(cubefacesize * 0.5, 0, 0);
//floor2.position.set(-cubefacesize * 0.5, 0, 0);
floor2.position.set(0, cubefacesize * 0.5, 0);
//floor2.rotateOnAxis(new THREE.Vector3(0, 0, 1), Math.PI / 2);
applycameraoffset += delegate
{
floor2.rotation.set(0, 0, 0);
//floor2.rotateOnAxis(new THREE.Vector3(0, 0, 1), -Math.PI / 2);
//floor2.rotateOnAxis(new THREE.Vector3(0, 1, 0), Math.PI / 2);
floor2.rotateOnAxis(new THREE.Vector3(1, 0, 0), Math.PI / 2);
//floor2.rotateOnAxis(new THREE.Vector3(0, 1, 0), -Math.PI / 2);
//floor2.rotateOnAxis(new THREE.Vector3(0, 1, 0), Math.PI);
//floor2.rotateOnAxis(new THREE.Vector3(0, 0, 1), Math.PI / 2);
//floor2.rotateOnAxis(new THREE.Vector3(0, 0, 1), Math.PI );
//floor2.rotateOnAxis(new THREE.Vector3(0, 0, 1), Math.PI);
floor2.rotateOnAxis(new THREE.Vector3(0, 0, 1), bottomRotate100 * 0.01f);
};
floor2.AttachTo(scene);
}
// X:\jsc.svn\examples\javascript\chrome\apps\ChromeEarth\ChromeEarth\Application.cs
// X:\jsc.svn\examples\javascript\canvas\ConvertBlackToAlpha\ConvertBlackToAlpha\Application.cs
// hidden for alpha AppWindows
//#if FBACKGROUND
#region galaxy_starfield
new THREE.Texture().With(
async s =>
{
var i = new HTML.Images.FromAssets.galaxy_starfield();
//var i = new HTML.Images.FromAssets.galaxy_starfield150FOV();
var bytes = await i.async.bytes;
//for (int ii = 0; ii < bytes.Length; ii += 4)
//{
// bytes[ii + 3] = (byte)(bytes[ii + 0]);
// bytes[ii + 0] = 0xff;
// bytes[ii + 1] = 0xff;
// bytes[ii + 2] = 0xff;
//}
var cc = new CanvasRenderingContext2D(i.width, i.height);
cc.bytes = bytes;
s.image = cc;
s.needsUpdate = true;
var stars_material = new THREE.MeshBasicMaterial(
new
{
//map = THREE.ImageUtils.loadTexture(new galaxy_starfield().src),
map = s,
side = THREE.BackSide,
transparent = true
});
var stars = new THREE.Mesh(
new THREE.SphereGeometry(far * 0.9, 64, 64),
stars_material
);
// http://stackoverflow.com/questions/8502150/three-js-how-can-i-dynamically-change-objects-opacity
//(stars_material as dynamic).opacity = 0.5;
scene.add(stars);
}
);
#endregion
new { }.With(
delegate
{
//dae.position.y = -80;
//dae.AttachTo(sceneg);
//scene.add(dae);
//oo.Add(dae);
//var rdysw = Stopwatch.StartNew();
//Console.WriteLine()
// view-source:http://threejs.org/examples/webgl_multiple_canvases_circle.html
// https://threejsdoc.appspot.com/doc/three.js/src.source/extras/cameras/CubeCamera.js.html
Native.window.onframe +=
e =>
{
// let render man know..
// let render man know..
if (vsyncReady())
return;
//if (pause) return;
//if (pause.@checked)
// return;
// can we float out of frame?
// haha. a bit too flickery.
//dae.position.x = Math.Sin(e.delay.ElapsedMilliseconds * 0.01) * 50.0;
//dae.position.x = Math.Sin(e.delay.ElapsedMilliseconds * 0.001) * 190.0;
//globesphere.position.y = Math.Sin(fcamerax * 0.001) * 90.0;
//clouds.position.y = Math.Cos(fcamerax * 0.001) * 90.0;
//sphere.rotation.y += speed;
//clouds.rotation.y += speed;
// manual rebuild?
// red compiler notifies laptop chrome of pending update
// app reloads
applycameraoffset();
renderer0.clear();
//rendererPY.clear();
//cameraPX.aspect = canvasPX.aspect;
//cameraPX.updateProjectionMatrix();
// um what does this do?
//cameraPX.position.z += (z - cameraPX.position.z) * e.delay.ElapsedMilliseconds / 200.0;
// mousewheel allos the camera to move closer
// once we see the frame in vr, can we udp sync vr tracking back to laptop?
//this.targetPX.x += 1;
//this.targetNX.x -= 1;
//this.targetPY.y += 1;
//this.targetNY.y -= 1;
//this.targetPZ.z += 1;
//this.targetNZ.z -= 1;
// how does the 360 or shadertoy want our cubemaps?
// and then rotate right?
// how can we render cubemap?
#region x
// upside down?
// are we ready?
renderer0.render(scene, cameraPX);
canvasPX.drawImage((IHTMLCanvas)renderer0.domElement, 0, 0, cubefacesize, cubefacesize);
renderer0.render(scene, cameraNX);
canvasNX.drawImage((IHTMLCanvas)renderer0.domElement, 0, 0, cubefacesize, cubefacesize);
#endregion
#region z
renderer0.render(scene, cameraPZ);
canvasPZ.drawImage((IHTMLCanvas)renderer0.domElement, 0, 0, cubefacesize, cubefacesize);
renderer0.render(scene, cameraNZ);
canvasNZ.drawImage((IHTMLCanvas)renderer0.domElement, 0, 0, cubefacesize, cubefacesize);
#endregion
#region y
renderer0.render(scene, cameraPY);
//canvasPY.save();
//canvasPY.translate(0, size);
//canvasPY.rotate((float)(-Math.PI / 2));
canvasPY.drawImage((IHTMLCanvas)renderer0.domElement, 0, 0, cubefacesize, cubefacesize);
//canvasPY.restore();
renderer0.render(scene, cameraNY);
//canvasNY.save();
//canvasNY.translate(size, 0);
//canvasNY.rotate((float)(Math.PI / 2));
canvasNY.drawImage((IHTMLCanvas)renderer0.domElement, 0, 0, cubefacesize, cubefacesize);
//canvasNY.restore();
// ?
#endregion
//renderer0.render(scene, cameraPX);
//rendererPY.render(scene, cameraPY);
// at this point we should be able to render the sphere texture
//public const uint TEXTURE_CUBE_MAP_POSITIVE_X = 34069;
//public const uint TEXTURE_CUBE_MAP_NEGATIVE_X = 34070;
//public const uint TEXTURE_CUBE_MAP_POSITIVE_Y = 34071;
//public const uint TEXTURE_CUBE_MAP_NEGATIVE_Y = 34072;
//public const uint TEXTURE_CUBE_MAP_POSITIVE_Z = 34073;
//public const uint TEXTURE_CUBE_MAP_NEGATIVE_Z = 34074;
//var cube0 = new IHTMLImage[] {
// new CSS3DPanoramaByHumus.HTML.Images.FromAssets.humus_px(),
// new CSS3DPanoramaByHumus.HTML.Images.FromAssets.humus_nx(),
// new CSS3DPanoramaByHumus.HTML.Images.FromAssets.humus_py(),
// new CSS3DPanoramaByHumus.HTML.Images.FromAssets.humus_ny(),
// new CSS3DPanoramaByHumus.HTML.Images.FromAssets.humus_pz(),
// new CSS3DPanoramaByHumus.HTML.Images.FromAssets.humus_nz()
//};
new[] {
canvasPX, canvasNX,
canvasPY, canvasNY,
canvasPZ, canvasNZ
}.WithEachIndex(
(img, index) =>
{
gl.bindTexture(gl.TEXTURE_CUBE_MAP, pass.tex);
//gl.pixelStorei(gl.UNPACK_FLIP_X_WEBGL, false);
gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, false);
// http://stackoverflow.com/questions/15364517/pixelstoreigl-unpack-flip-y-webgl-true
// https://msdn.microsoft.com/en-us/library/dn302429(v=vs.85).aspx
//gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, 0);
//gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, 1);
gl.texImage2D(gl.TEXTURE_CUBE_MAP_POSITIVE_X + (uint)index, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, img.canvas);
}
);
// could do dynamic resolution- fog of war or fog of FOV. where up to 150deg field of vision is encouragedm, not 360
pass.Paint_Image(
0,
0,
0,
0,
0
//,
// gl_FragCoord
// cannot be scaled, and can be referenced directly.
// need another way to scale
//zoom: 0.3f
);
//paintsw.Stop();
// what does it do?
gl.flush();
// let render man know..
if (vsync != null)
if (!vsync.Task.IsCompleted)
vsync.SetResult(null);
};
}
);
Console.WriteLine("do you see it?");
}
private void AddMethods(IHTMLElement htext)
{
var content = new IHTMLDiv().AttachTo(DocumentBody);
content.Hide();
var IsInterface = new IHTMLInput(ScriptCoreLib.Shared.HTMLInputTypeEnum.checkbox);
new IHTMLDiv(
new IHTMLLabel("is an interface: ", IsInterface), IsInterface
).AttachTo(content);
var DelegatesParams = new IHTMLInput(ScriptCoreLib.Shared.HTMLInputTypeEnum.checkbox);
new IHTMLDiv(
new IHTMLLabel("delegates parameters to base constructor: ", DelegatesParams), DelegatesParams
).AttachTo(content);
var update = default(Action);
// var a = new IHTMLTextArea().AttachTo(content);
IHTMLButton.Create(
"Example code",
delegate
{
a.value =
@"addEventListener(type:String, listener:Function, useCapture:Boolean = false, priority:int = 0, useWeakReference:Boolean = false):void
Registers an event listener object with an EventDispatcher object so that the listener receives notification of an event.
";
update();
}
).AttachTo(content);
var b = new IHTMLTextArea().AttachTo(content);
htext.onclick +=
delegate
{
content.ToggleVisible();
};
a.style.display = ScriptCoreLib.JavaScript.DOM.IStyle.DisplayEnum.block;
a.style.width = "100%";
a.style.height = "20em";
b.style.display = ScriptCoreLib.JavaScript.DOM.IStyle.DisplayEnum.block;
b.style.width = "100%";
b.style.height = "20em";
b.readOnly = true;
Action update_output =
delegate
{
var w = new StringBuilder();
var w2 = new StringBuilder();
var lines = a.Lines.ToArray();
w.AppendLine("#region Methods");
w2.AppendLine("#region Constructors");
for (int i = 0; i < lines.Length; i += 3)
{
if ((i + 1) < lines.Length)
{
var StaticKeyword = "[static]";
var Summary = lines[i + 1].Trim();
var MethodSig = lines[i].Trim();
if (!MethodSig.Contains("AIR-only"))
{
var q0 = MethodSig.Split(')');
var q1 = q0[0].Split('(');
var MethodName = FixVariableName(q1[0].Trim());
var MethodParameters = new MethodParametersInfo(q1[1].Trim());
var MethodReturnType = "";
if (q0[1].StartsWith(":"))
MethodReturnType = FixTypeName(q0[1].Substring(1).Trim());
var IsConstructor = string.IsNullOrEmpty(MethodReturnType);
foreach (var v in MethodParameters.Variations)
{
if (IsConstructor)
{
w2.AppendLine("/// <summary>");
w2.AppendLine("/// " + Summary);
w2.AppendLine("/// </summary>");
if (DelegatesParams.@checked)
w2.AppendLine("public " + MethodName + "(" + v + ") : base(" + v.NamesToString() + ")");
else
w2.AppendLine("public " + MethodName + "(" + v + ")");
w2.AppendLine("{");
w2.AppendLine("}");
w2.AppendLine();
}
else
{
if (v.Parameters.Length == 0 && MethodName == "toString")
{
}
else
{
w.AppendLine("/// <summary>");
w.AppendLine("/// " + Summary);
w.AppendLine("/// </summary>");
var StaticModifier = Summary.Contains(StaticKeyword) ? "static " : "";
if (IsInterface.@checked)
{
w.AppendLine(MethodReturnType + " " + MethodName + "(" + v + ");");
}
else
{
w.AppendLine("public " + StaticModifier + MethodReturnType + " " + MethodName + "(" + v + ")");
w.AppendLine("{");
if (MethodReturnType != "void")
w.AppendLine(" return default(" + MethodReturnType + ");");
w.AppendLine("}");
}
w.AppendLine();
}
}
}
}
}
}
w.AppendLine("#endregion");
w2.AppendLine("#endregion");
if (!IsInterface.@checked)
{
w.AppendLine();
w.Append(w2.ToString());
}
b.value = w.ToString();
};
update =
delegate
{
try
{
update_output();
htext.style.color = Color.Blue;
}
catch (Exception ex)
{
htext.style.color = Color.Red;
b.value = "error: " + ex.Message;
}
};
IsInterface.onchange += delegate { update(); };
DelegatesParams.onchange += delegate { update(); };
a.onchange +=
delegate
{
update();
};
}
public __TextBoxBase()
{
#region InternalContainer
this.InternalContainer = new IHTMLDiv();
this.InternalContainer.style.position = ScriptCoreLib.JavaScript.DOM.IStyle.PositionEnum.absolute;
this.InternalContainer.name = "__TextBox";
this.InternalContainer.style.left = "0px";
this.InternalContainer.style.top = "0px";
// do we create any new havoc?
this.InternalContainer.style.zIndex = 0;
#endregion
#region InternalTextField_ShadowContainer
this.InternalTextField_ShadowContainer = new IHTMLDiv();
this.InternalTextField_ShadowContainer.style.position = IStyle.PositionEnum.absolute;
this.InternalTextField_ShadowContainer.style.overflow = IStyle.OverflowEnum.hidden;
this.InternalTextField_ShadowContainer.style.SetSize(0, 0);
this.InternalTextField_Shadow = new IHTMLSpan();
this.InternalTextField_Shadow.AttachTo(this.InternalTextField_ShadowContainer);
this.InternalTextField_Shadow.style.whiteSpace = IStyle.WhiteSpaceEnum.pre;
this.InternalTextField_Shadow.style.display = IStyle.DisplayEnum.inline_block;
this.InternalTextField_Shadow.style.position = IStyle.PositionEnum.absolute;
#endregion
#region InternalTextField
this.InternalTextField = new IHTMLInput(ScriptCoreLib.Shared.HTMLInputTypeEnum.text)
{
}.AttachTo(this.InternalContainer);
// boxstyle. will it break layout?
this.InternalTextField.style.padding = "0.4em";
//Need to test/document
this.InternalNameChanged += delegate
{
this.InternalTextField.name = InternalName;
if (InternalName.ToUpper().Contains(("email").ToUpper()))
{
this.InternalTextField.type = Shared.HTMLInputTypeEnum.email;
}
if (InternalName.ToUpper().Contains(("phone").ToUpper()))
{
this.InternalTextField.type = Shared.HTMLInputTypeEnum.tel;
}
};
this.InternalSetDefaultFont();
this.InternalTextField.style.position = IStyle.PositionEnum.absolute;
this.InternalTextField.style.margin = "0";
this.InternalTextField.style.paddingTop = "0";
this.InternalTextField.style.paddingBottom = "0";
// what about inheritance chain?
// X:\jsc.svn\examples\javascript\forms\Test\CSSLastTextBox\CSSLastTextBox\Application.cs
IStyleSheet.all[typeof(TextBox)][IHTMLElement.HTMLElementEnum.input].style.border = "1px solid gray";
#endregion
// what about padding?
// X:\jsc.svn\examples\javascript\forms\Test\TestTextBoxPadding\TestTextBoxPadding\Application.cs
// http://stackoverflow.com/questions/628500/can-i-stop-100-width-text-boxes-from-extending-beyond-their-containers/628912#628912
//box-sizing: border-box;
(this.InternalTextField.style as dynamic).boxSizing = "border-box";
//this.InternalTextField.style.boxSizing = "border-box";
this.InternalTextField.style.width = "100%";
this.InternalTextField.style.height = "100%";
//this.ClientSizeChanged +=
// delegate
// {
// this.InternalTextField.style.width = this.ClientSize.Width + "px";
// this.InternalTextField.style.height = this.ClientSize.Height + "px";
// };
#region InternalRaiseTextChanged
Action InternalAutoSizeUpdate =
delegate
{
if (this.InternalTextField_Shadow == null)
{
return;
}
//InternalAutoSizeToText(this.InternalTextField.value);
};
this.InternalTextField.onchange +=
delegate
{
InternalAutoSizeUpdate();
this.InternalRaiseTextChanged();
};
this.InternalTextField.onkeyup +=
delegate
{
InternalAutoSizeUpdate();
this.InternalRaiseTextChanged();
};
#endregion
this.Size = new global::System.Drawing.Size(100, 20);
}
private void AddEvents(IHTMLElement htext)
{
var content = new IHTMLDiv().AttachTo(DocumentBody);
content.Hide();
var IsCamelCaseNames = "Use CamelCase on event names ".ToCheckBox().AttachToWithLabel(content);
IHTMLInput NamePrefix = new IHTMLInput(ScriptCoreLib.Shared.HTMLInputTypeEnum.text);
new IHTMLDiv(
new IHTMLLabel("Event name prefix: ", NamePrefix), NamePrefix
).AttachTo(content);
var update = default(Action);
// var a = new IHTMLTextArea().AttachTo(content);
IHTMLButton.Create(
"Example code",
delegate
{
a.value =
@"added
Dispatched when a display object is added to the display list.
addedToStage
Dispatched when a display object is added to the on stage display list, either directly or through the addition of a sub tree in which the display object is contained.
enterFrame
Dispatched when the playhead is entering a new frame.
removed
Dispatched when a display object is about to be removed from the display list.
removedFromStage
Dispatched when a display object is about to be removed from the display list, either directly or through the removal of a sub tree in which the display object is contained.
render
Dispatched when the display list is about to be updated and rendered.";
update();
}
).AttachTo(content);
// too big
// var cookie = new Cookie("ExampleEvents").BindTo(a);
var z = new IHTMLTable().AttachTo(content);
var zb = z.AddBody();
var b = new IHTMLTextArea().AttachTo(content);
htext.onclick +=
delegate
{
content.ToggleVisible();
};
a.style.display = ScriptCoreLib.JavaScript.DOM.IStyle.DisplayEnum.block;
a.style.width = "100%";
a.style.height = "20em";
b.style.display = ScriptCoreLib.JavaScript.DOM.IStyle.DisplayEnum.block;
b.style.width = "100%";
b.style.height = "20em";
b.readOnly = true;
var dict = new
{
EventType = new Dictionary<string, string>(),
EventCodeName = new Dictionary<string, string>(),
};
Action<Action<string>> update_output =
handler =>
{
var w = new StringBuilder();
var w2 = new StringBuilder();
var lines = a.Lines.ToArray();
w.AppendLine("#region Events");
w2.AppendLine("#region Implementation for methods marked with [Script(NotImplementedHere = true)]");
var DeclaringTypeName = DeclaringType.value;
for (int i = 0; i < lines.Length; i += 2)
{
if ((i + 1) < lines.Length)
{
var Summary = lines[i + 1].Trim();
var EventName = lines[i].Trim();
if (EventName.IndexOf(":") > -1)
EventName = EventName.Substring(0, EventName.IndexOf(":")).Trim();
if (EventName.ContainsAny("(", "#"))
throw new Exception("Invalid Event Name");
if (!EventName.Contains("AIR-only"))
{
//var ReadOnly = "[read-only]";
w.AppendLine("/// <summary>");
w.AppendLine("/// " + Summary);
w.AppendLine("/// </summary>");
if (handler != null)
handler(EventName);
var EventType = dict.EventType[EventName];
var EventCodeName = dict.EventCodeName[EventName];
var FriendlyEventName = EventName;
if (IsCamelCaseNames.@checked)
FriendlyEventName = FriendlyEventName.ToCamelCase();
if (!string.IsNullOrEmpty(NamePrefix.value))
FriendlyEventName = NamePrefix.value + FriendlyEventName;
if (FriendlyEventName == "")
throw new Exception("Friendly name is empty.");
w.AppendLine("[method: Script(NotImplementedHere = true)]");
w.AppendLine("public event Action<" + EventType + "> " + FriendlyEventName + ";");
w.AppendLine();
w2.AppendLine("#region " + FriendlyEventName);
w2.AppendLine("public static void add_" + FriendlyEventName + "(" + DeclaringTypeName + " that, Action<" + EventType + "> value)");
w2.AppendLine("{");
w2.AppendLine(" CommonExtensions.CombineDelegate(that, value, " + EventType + "." + EventCodeName + ");");
w2.AppendLine("}");
w2.AppendLine();
w2.AppendLine("public static void remove_" + FriendlyEventName + "(" + DeclaringTypeName + " that, Action<" + EventType + "> value)");
w2.AppendLine("{");
w2.AppendLine(" CommonExtensions.RemoveDelegate(that, value, " + EventType + "." + EventCodeName + ");");
w2.AppendLine("}");
w2.AppendLine("#endregion");
w2.AppendLine();
}
}
}
w.AppendLine("#endregion");
w2.AppendLine("#endregion");
w.AppendLine();
w.Append(w2.ToString());
b.value = w.ToString();
};
update =
delegate
{
try
{
zb.removeChildren();
// propagate new values to next buttons
var PChange = new List<Func<string, string, string, bool>>();
update_output(
EventName =>
{
var row = zb.AddRow();
row.AddColumn(EventName);
var EventType = new IHTMLInput(ScriptCoreLib.Shared.HTMLInputTypeEnum.text);
if (!dict.EventType.ContainsKey(EventName))
dict.EventType[EventName] = "Event";
var EventTypeOld = dict.EventType[EventName];
EventType.value = dict.EventType[EventName];
var CPChangeOffset = PChange.Count;
Action<string, string, string> CPChange =
(_EventName, _Old, _New) =>
{
for (int i = CPChangeOffset + 1; i < PChange.Count; i++)
{
if (!PChange[i](_EventName, _Old, _New))
break;
}
};
PChange.Add(
(_Event, _Old, _New) =>
{
// Console.WriteLine(EventName + " detected a change from " + _Event);
if (EventType.value == _Old)
{
EventType.value = _New;
dict.EventType[EventName] = EventType.value;
return true;
}
return false;
}
);
EventType.onchange +=
delegate
{
if (CPChange != null)
CPChange(EventName, dict.EventType[EventName], EventType.value);
dict.EventType[EventName] = EventType.value;
update_output(null);
};
row.AddColumn(EventType);
var EventCodeName = new IHTMLInput(ScriptCoreLib.Shared.HTMLInputTypeEnum.text);
if (!dict.EventCodeName.ContainsKey(EventName))
dict.EventCodeName[EventName] = EventName.ToCamelCaseUpper();
EventCodeName.value = dict.EventCodeName[EventName];
EventCodeName.onchange +=
delegate
{
dict.EventCodeName[EventName] = EventCodeName.value;
update_output(null);
};
row.AddColumn(EventCodeName);
}
);
htext.style.color = Color.Blue;
}
catch (Exception ex)
{
htext.style.color = Color.Red;
b.value = "error: " + ex.Message;
}
};
DeclaringType.onchange +=
delegate
{
update_output(null);
};
NamePrefix.onchange += delegate { update(); };
IsCamelCaseNames.onchange += delegate { update(); };
a.onchange += delegate { update(); };
}
/// <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)
{
#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: "Launched2");
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
#region rooster
new IHTMLButton { "new rooster" }.AttachToDocument().onclick +=
async delegate
{
// https://developer.mozilla.org/en-US/Apps/Build/Audio_and_video_delivery/WebAudio_playbackRate_explained
// in flash we had to work with samples
// in chrome we get an api. nice can we loop it ?
var a = new RoosterAudioExample.HTML.Audio.FromAssets.rooster
{
};
a.load();
var rate = new IHTMLInput { type = ScriptCoreLib.Shared.HTMLInputTypeEnum.range, min = 0, max = 200 }.AttachToDocument();
var play = new IHTMLButton { "play" }.AttachToDocument();
Native.window.onframe += delegate
{
// cannot go lower than 0.5 it seems?
a.playbackRate = Math.Max(0.5, rate.GetDouble() * 0.01);
play.innerText = "play " + new { a.playbackRate };
};
while (await play.async.onclick)
{
a.currentTime = 0;
a.play();
}
};
#endregion
#region rooster
new IHTMLButton { "new AARPMartialLawLoop" }.AttachToDocument().onclick +=
async delegate
{
// https://developer.mozilla.org/en-US/Apps/Build/Audio_and_video_delivery/WebAudio_playbackRate_explained
// in flash we had to work with samples
// in chrome we get an api. nice can we loop it ?
var a = new global::AARPMartialLawLoop.HTML.Audio.FromAssets.loop
{
};
a.load();
var rate = new IHTMLInput { type = ScriptCoreLib.Shared.HTMLInputTypeEnum.range, min = 0, max = 200 }.AttachToDocument();
var play = new IHTMLButton { "play" }.AttachToDocument();
Native.window.onframe += delegate
{
// cannot go lower than 0.5 it seems?
a.playbackRate = Math.Max(0.5, rate.GetDouble() * 0.01);
play.innerText = "play " + new { a.playbackRate };
};
while (await play.async.onclick)
{
a.currentTime = 0;
a.play();
}
};
#endregion
}
public __TextBoxBase()
{
#region InternalContainer
this.InternalContainer = new IHTMLDiv();
this.InternalContainer.style.position = ScriptCoreLib.JavaScript.DOM.IStyle.PositionEnum.absolute;
this.InternalContainer.name = "__TextBox";
this.InternalContainer.style.left = "0px";
this.InternalContainer.style.top = "0px";
// do we create any new havoc?
this.InternalContainer.style.zIndex = 0;
#endregion
#region InternalTextField_ShadowContainer
this.InternalTextField_ShadowContainer = new IHTMLDiv();
this.InternalTextField_ShadowContainer.style.position = IStyle.PositionEnum.absolute;
this.InternalTextField_ShadowContainer.style.overflow = IStyle.OverflowEnum.hidden;
this.InternalTextField_ShadowContainer.style.SetSize(0, 0);
this.InternalTextField_Shadow = new IHTMLSpan();
this.InternalTextField_Shadow.AttachTo(this.InternalTextField_ShadowContainer);
this.InternalTextField_Shadow.style.whiteSpace = IStyle.WhiteSpaceEnum.pre;
this.InternalTextField_Shadow.style.display = IStyle.DisplayEnum.inline_block;
this.InternalTextField_Shadow.style.position = IStyle.PositionEnum.absolute;
#endregion
#region InternalTextField
this.InternalTextField = new IHTMLInput(ScriptCoreLib.Shared.HTMLInputTypeEnum.text)
{
}.AttachTo(this.InternalContainer);
// boxstyle. will it break layout?
this.InternalTextField.style.padding = "0.4em";
//Need to test/document
this.InternalNameChanged += delegate
{
this.InternalTextField.name = InternalName;
if (InternalName.ToUpper().Contains(("email").ToUpper()))
this.InternalTextField.type = Shared.HTMLInputTypeEnum.email;
if (InternalName.ToUpper().Contains(("phone").ToUpper()))
this.InternalTextField.type = Shared.HTMLInputTypeEnum.tel;
};
this.InternalSetDefaultFont();
this.InternalTextField.style.position = IStyle.PositionEnum.absolute;
this.InternalTextField.style.margin = "0";
this.InternalTextField.style.paddingTop = "0";
this.InternalTextField.style.paddingBottom = "0";
// what about inheritance chain?
// X:\jsc.svn\examples\javascript\forms\Test\CSSLastTextBox\CSSLastTextBox\Application.cs
IStyleSheet.all[typeof(TextBox)][IHTMLElement.HTMLElementEnum.input].style.border = "1px solid gray";
#endregion
// what about padding?
// X:\jsc.svn\examples\javascript\forms\Test\TestTextBoxPadding\TestTextBoxPadding\Application.cs
// http://stackoverflow.com/questions/628500/can-i-stop-100-width-text-boxes-from-extending-beyond-their-containers/628912#628912
//box-sizing: border-box;
(this.InternalTextField.style as dynamic).boxSizing = "border-box";
//this.InternalTextField.style.boxSizing = "border-box";
this.InternalTextField.style.width = "100%";
this.InternalTextField.style.height = "100%";
//this.ClientSizeChanged +=
// delegate
// {
// this.InternalTextField.style.width = this.ClientSize.Width + "px";
// this.InternalTextField.style.height = this.ClientSize.Height + "px";
// };
#region InternalRaiseTextChanged
Action InternalAutoSizeUpdate =
delegate
{
if (this.InternalTextField_Shadow == null)
return;
//InternalAutoSizeToText(this.InternalTextField.value);
};
this.InternalTextField.onchange +=
delegate
{
InternalAutoSizeUpdate();
this.InternalRaiseTextChanged();
};
this.InternalTextField.onkeyup +=
delegate
{
InternalAutoSizeUpdate();
this.InternalRaiseTextChanged();
};
#endregion
this.Size = new global::System.Drawing.Size(100, 20);
}
