I have created a script with a gui Window with groups and panels. My issue is when I fire the script either from After Effects or from the Extendscript Debugger, I can't see the whole title on my panel title. Below is a link to the image highlighting the error I am seeing.
https://drive.google.com/a/whirlpool.com/file/d/0B51dXC1EPNW7NGJHTUZtY1JKMVE/view?usp=sharing
Here is the original problem code below:
var myWin = (this instanceof Panel) ? this : new Window("palette", "Mozaik", undefined, {resizeable: true , maximizeButton: true});
var panelZero = myWin.add('panel', undefined, 'Define your Mozaik Size');
panelZero.alignment = ['100','300'];
panelZero.alignChildren = ['fill','fill'];
sizePickGUI = panelZero.add('edittext', undefined, '100'); //sizePickGUI variable which is used as sizePick parameter in shape buillding functions
sizePickGUI.value = 100;
sizePickGUI.onChange = function(){
this.value = this.text
}
sizePickGUIVal= sizePickGUI.value;
var panelOne = myWin.add('panel', undefined, 'Define Area');
widthPickGUI = panelOne.add('edittext', undefined, '1000'); //widthPickGUI variable which is used as widthPick variable in shape building functions
panelOne.alignment = ['100','fill'];
panelOne.alignChildren = ['fill','fill'];
widthPickGUI.value = 1000;
widthPickGUI.onChange = function(){
this.value = this.text
}
widthPickGUIVal = widthPickGUI.value;
heightPickGUI = panelOne.add('edittext', undefined, '1000'); //heightPickGUI variable which is used as heightPick variable in shape building functions
heightPickGUI.value = 1000;
heightPickGUI.onChange = function(){
this.value = this.text
}
heightPickGUIVal = heightPickGUI.value
var groupTwo = myWin.add ('group', undefined, 'Shape Picker'); // Shape Picker GUI group
groupTwo.add('statictext', undefined, 'Shape Picker');
var square = groupTwo.add('radiobutton', undefined, 'Square'); //square radio button
var triangle = groupTwo.add('radiobutton', undefined, 'Triangle');// triangle radio button
var circle = groupTwo.add('radiobutton', undefined, 'Circle'); // circle radio button
var groupThree = myWin.add('group', undefined, 'Execute Mozaik'); // Execute Button GUI group
var execute = groupThree.add('button', undefined, 'Build');
if (!(this instanceof Panel)) {
myWin.center();
myWin.show();
//Setup Window sizing
myWin.minimumSize = myWin.size;
//myWin.preferredSize = [300,-1];
//make the panel resizeable
myWin.onResizing = myWin.onResize = function(){ this.layout.resize()};
}
else{
myWin.layout.layout(true);
myWin.preferredSize = [500,-1];
}
Okay I figured out why my panel text wasn't showing when ran as a ScriptUI. Adjusting the panel.margins value enabled me to add a bigger gap between the panel frame and it's children properties.
In this case panel.margins = 60; worked for me.
Here is the full source code. If you save it & run as a scriptUi, the panel title will show in it's entirety.
var myWin = (this instanceof Panel) ? this : new Window("palette", "Mozaik", undefined, {resizeable: true , maximizeButton: true});
//myWin.orientation = 'row';
var panelZero = myWin.add('panel', undefined, 'Define your Mozaik Size');
panelZero.preferredSize= [200, 50];
panelZero.margins = 50;
panelZero.alignment = ['100','300'];
panelZero.alignChildren = ['fill','fill'];
sizePickGUI = panelZero.add('edittext', undefined, '100'); //sizePickGUI variable which is used as sizePick parameter in shape buillding functions
sizePickGUI.size = [80,18];
sizePickGUI.value = 100;
sizePickGUI.onChange = function(){
this.value = this.text
}
sizePickGUIVal= sizePickGUI.value;
var panelOne = myWin.add('panel', undefined, 'Define Area');
panelOne.margins = 45;
widthPickGUI = panelOne.add('edittext', undefined, '1000'); //widthPickGUI variable which is used as widthPick variable in shape building functions
widthPickGUI.size = [80,18];
panelOne.alignment = ['100','fill'];
panelOne.alignChildren = ['fill','fill'];
widthPickGUI.value = 1000;
widthPickGUI.onChange = function(){
this.value = this.text
}
widthPickGUIVal = widthPickGUI.value;
heightPickGUI = panelOne.add('edittext', undefined, '1000'); //heightPickGUI variable which is used as heightPick variable in shape building functions
heightPickGUI.value = 1000;
heightPickGUI.onChange = function(){
this.value = this.text
}
heightPickGUIVal = heightPickGUI.value
var groupTwo = myWin.add ('group', undefined, 'Shape Picker'); // Shape Picker GUI group
groupTwo.add('statictext', undefined, 'Shape Picker');
var square = groupTwo.add('radiobutton', undefined, 'Square'); //square radio button
var triangle = groupTwo.add('radiobutton', undefined, 'Triangle');// triangle radio button
var circle = groupTwo.add('radiobutton', undefined, 'Circle'); // circle radio button
var groupThree = myWin.add('group', undefined, 'Execute Mozaik'); // Execute Button GUI group
var execute = groupThree.add('button', undefined, 'Build');
if (!(this instanceof Panel)) {
myWin.center();
myWin.show();
//Setup Window sizing
myWin.minimumSize = myWin.size;
//myWin.preferredSize = [300,-1];
//make the panel resizeable
myWin.onResizing = myWin.onResize = function(){ this.layout.resize()};
}
else{
myWin.layout.layout(true);
myWin.preferredSize = [500,-1];
}
Related
Hi i'm looking for drag step for each drag item, let say 200px
below image is demonstrating it:
i have searched a lot but did not find any solution related to that.
Question: The imaginary drag box step should be set to 200px, in other words it should jump to 200px
Full view codepen: https://codepen.io/eabangalore/pen/GaPzJw?editors=1000
Below snippet is not working please see codepen above
<!--
Copyright (c) 2006-2013, JGraph Ltd
Dynamic toolbar example for mxGraph. This example demonstrates changing the
state of the toolbar at runtime.
-->
<html>
<head>
<title>Toolbar example for mxGraph</title>
<!-- Sets the basepath for the library if not in same directory -->
<script type="text/javascript">
mxBasePath = 'https://jgraph.github.io/mxgraph/javascript/src';
function setGraphData(){
var graphState = {"tagName":"mxGraphModel","children":[{"tagName":"root","children":[{"tagName":"mxCell","attributes":{"id":"0"}},{"tagName":"mxCell","attributes":{"id":"1","parent":"0"}},{"tagName":"mxCell","attributes":{"id":"2","style":"","vertex":"1","parent":"1"},"children":[{"tagName":"mxGeometry","attributes":{"x":"400","y":"130","width":"100","height":"40","as":"geometry"}}]},{"tagName":"mxCell","attributes":{"id":"3","style":"","vertex":"1","parent":"1"},"children":[{"tagName":"mxGeometry","attributes":{"x":"661","y":"101","width":"100","height":"40","as":"geometry"}}]}]}]};
localStorage.setItem('graphState',JSON.stringify(graphState));
}
function html2json(html){
if(html.nodeType==3){
return {
"tagName":"#text",
"content":html.textContent
}
}
var element = {
"tagName":html.tagName
};
if(html.getAttributeNames().length>0){
element.attributes = html.getAttributeNames().reduce(
function(acc,at){acc[at]=html.getAttribute(at); return acc;},
{}
);
}
if(html.childNodes.length>0){
element.children = Array.from(html.childNodes)
.filter(
function(el){
return el.nodeType!=3
||el.textContent.trim().length>0
})
.map(function(el){return html2json(el);});
}
return element;
}
function json2html(json){
var xmlDoc = document.implementation.createDocument(null, json.tagName);
var addAttributes = function(jsonNode, node){
if(jsonNode.attributes){
Object.keys(jsonNode.attributes).map(
function(name){
node.setAttribute(name,jsonNode.attributes[name]);
}
);
}
}
var addChildren = function(jsonNode,node){
if(jsonNode.children){
jsonNode.children.map(
function(jsonChildNode){
json2htmlNode(jsonChildNode,node);
}
);
}
}
var json2htmlNode = function(jsonNode,parent){
if(jsonNode.tagName=="#text"){
return xmlDoc.createTextNode(jsonNode.content);
}
var node = xmlDoc.createElement(jsonNode.tagName);
addAttributes(jsonNode,node);
addChildren(jsonNode,node);
parent.appendChild(node);
}
addAttributes(json,xmlDoc.firstElementChild);
addChildren(json,xmlDoc.firstElementChild);
return xmlDoc;
}
</script>
<!-- Loads and initializes the library -->
<script type="text/javascript" src="https://jgraph.github.io/mxgraph/javascript/src/js/mxClient.js"></script>
<!-- Example code -->
<script type="text/javascript">
// Program starts here. Creates a sample graph in the
// DOM node with the specified ID. This function is invoked
// from the onLoad event handler of the document (see below).
function main()
{
setGraphData();
// Checks if browser is supported
if (!mxClient.isBrowserSupported())
{
// Displays an error message if the browser is
// not supported.
mxUtils.error('Browser is not supported!', 200, false);
}
else
{
// Defines an icon for creating new connections in the connection handler.
// This will automatically disable the highlighting of the source vertex.
mxConnectionHandler.prototype.connectImage = new mxImage('images/connector.gif', 16, 16);
// Creates the div for the toolbar
var tbContainer = document.createElement('div');
tbContainer.style.position = 'absolute';
tbContainer.style.overflow = 'hidden';
tbContainer.style.padding = '2px';
tbContainer.style.left = '0px';
tbContainer.style.top = '0px';
tbContainer.style.width = '24px';
tbContainer.style.bottom = '0px';
document.body.appendChild(tbContainer);
// Creates new toolbar without event processing
var toolbar = new mxToolbar(tbContainer);
toolbar.enabled = false
// Creates the div for the graph
var container = document.createElement('div');
container.style.position = 'absolute';
container.style.overflow = 'hidden';
container.style.left = '24px';
container.style.top = '0px';
container.style.right = '0px';
container.style.bottom = '0px';
container.style.background = 'url("editors/images/grid.gif")';
document.body.appendChild(container);
// Workaround for Internet Explorer ignoring certain styles
if (mxClient.IS_QUIRKS)
{
document.body.style.overflow = 'hidden';
new mxDivResizer(tbContainer);
new mxDivResizer(container);
}
// Creates the model and the graph inside the container
// using the fastest rendering available on the browser
var model = new mxGraphModel();
var graph = new mxGraph(container, model);
// Enables new connections in the graph
graph.setConnectable(true);
graph.setMultigraph(false);
// Stops editing on enter or escape keypress
var keyHandler = new mxKeyHandler(graph);
var rubberband = new mxRubberband(graph);
var addVertex = function(icon, w, h, style)
{
var vertex = new mxCell(null, new mxGeometry(0, 0, w, h), style);
vertex.setVertex(true);
var img = addToolbarItem(graph, toolbar, vertex, icon);
img.enabled = true;
graph.getSelectionModel().addListener(mxEvent.CHANGE, function()
{
var tmp = graph.isSelectionEmpty();
mxUtils.setOpacity(img, (tmp) ? 100 : 20);
img.enabled = tmp;
});
};
addVertex('https://jgraph.github.io/mxgraph/javascript/examples/editors/images/rectangle.gif', 100, 40, '');
addVertex('https://jgraph.github.io/mxgraph/javascript/examples/editors/images/rounded.gif', 100, 40, 'shape=rounded');
addVertex('https://jgraph.github.io/mxgraph/javascript/examples/editors/images/ellipse.gif', 40, 40, 'shape=ellipse');
addVertex('https://jgraph.github.io/mxgraph/javascript/examples/editors/images/rhombus.gif', 40, 40, 'shape=rhombus');
addVertex('https://jgraph.github.io/mxgraph/javascript/examples/editors/images/triangle.gif', 40, 40, 'shape=triangle');
addVertex('https://jgraph.github.io/mxgraph/javascript/examples/editors/images/cylinder.gif', 40, 40, 'shape=cylinder');
addVertex('https://jgraph.github.io/mxgraph/javascript/examples/editors/images/actor.gif', 30, 40, 'shape=actor');
// read state on load
if(window.localStorage.graphState){
var doc = json2html(JSON.parse(localStorage.graphState));
var dec = new mxCodec(doc);
dec.decode(doc.documentElement, graph.getModel());
}
// save state on change
graph.getModel().addListener('change',function(){
var codec = new mxCodec();
window.localStorage.graphState = JSON.stringify(html2json(codec.encode(
graph.getModel()
)));
});
}
}
function addToolbarItem(graph, toolbar, prototype, image)
{
// Function that is executed when the image is dropped on
// the graph. The cell argument points to the cell under
// the mousepointer if there is one.
var funct = function(graph, evt, cell, x, y)
{
graph.stopEditing(false);
var vertex = graph.getModel().cloneCell(prototype);
vertex.geometry.x = x;
vertex.geometry.y = y;
graph.addCell(vertex);
graph.setSelectionCell(vertex);
}
// Creates the image which is used as the drag icon (preview)
var img = toolbar.addMode(null, image, function(evt, cell)
{
var pt = this.graph.getPointForEvent(evt);
funct(graph, evt, cell, pt.x, pt.y);
});
// Disables dragging if element is disabled. This is a workaround
// for wrong event order in IE. Following is a dummy listener that
// is invoked as the last listener in IE.
mxEvent.addListener(img, 'mousedown', function(evt)
{
// do nothing
});
// This listener is always called first before any other listener
// in all browsers.
mxEvent.addListener(img, 'mousedown', function(evt)
{
if (img.enabled == false)
{
mxEvent.consume(evt);
}
});
mxUtils.makeDraggable(img, graph, funct);
return img;
}
</script>
</head>
<!-- Calls the main function after the page has loaded. Container is dynamically created. -->
<body onload="main();" >
</body>
</html>
Changed how value is set to the graph state:
function generateData(x1, y1, x2, y2){
var graphState = {"tagName":"mxGraphModel","children":[{"tagName":"root","children":[{"tagName":"mxCell","attributes":{"id":"0"}},{"tagName":"mxCell","attributes":{"id":"1","parent":"0"}},{"tagName":"mxCell","attributes":{"id":"2","style":"","vertex":"1","parent":"1"},"children":[{"tagName":"mxGeometry","attributes":{"x": x1,"y": y1 ,"width":"100","height":"40","as":"geometry"}}]},{"tagName":"mxCell","attributes":{"id":"3","style":"","vertex":"1","parent":"1"},"children":[{"tagName":"mxGeometry","attributes":{"x": x2,"y": y2,"width":"100","height":"40","as":"geometry"}}]}]}]};
return graphState;
}
function setGraphData(){
var graphState = generateData("400", "130", "661", "101");
localStorage.setItem('graphState',JSON.stringify(graphState));
}
Refresh the data after page load:
if(window.localStorage.graphState){
var doc = json2html(JSON.parse(localStorage.graphState));
var dec = new mxCodec(doc);
dec.decode(doc.documentElement, graph.getModel());
setTimeout(function() {
var doc = json2html(generateData("400", "30", "661", "101"));
var dec = new mxCodec(doc);
dec.decode(doc.documentElement, graph.getModel());
}, 5000);
}
This will move the box up after a gap of 5 seconds.
CodePen
1) I'm working on a dat.GUI application on which I have 2 sliders. I want to reset one when the other is changed. For example :
var FizzyText = function() {
this.slider1 = 0;
this.slider2 = 0;
};
var gui = new dat.GUI();
var text = new FizzyText();
var slider1 = gui.add(text, 'slider1', 0, 5);
var slider2 = gui.add(text, 'slider2', 0, 5);
slider1.onChange(function(value){
console.log(value);
text.slider2 = 0; // this doesn't work
});
slider2.onChange(function(value){
console.log(value);
text.slider1 = 0; // this doesn't work
});
This is just an example but it is very important that the slider is reseted or set to its default value (in FizzyText).
The example above comes from https://workshop.chromeexperiments.com/examples/gui/#9--Updating-the-Display-Automatically where I can't automatically update the slider
2) I want to add a reset button in which all sliders will be reseted. But with the previous answer I'd be able to reset all values
I found the answer :
gui.__controllers is and array of controllers. So I just added something like that :
var FizzyText = function () {
this.slider1 = 0;
this.slider2 = 0;
};
var gui = new dat.GUI();
var text = new FizzyText();
var slider1 = gui.add(text, 'slider1', 0, 5);
var slider2 = gui.add(text, 'slider2', 0, 5);
/* Here is the update */
var resetSliders = function (name) {
for (var i = 0; i < gui.__controllers.length; i++) {
if (!gui.__controllers.property == name)
gui.__controllers[i].setValue(0);
}
};
slider1.onChange(function (value) {
console.log(value);
resetSliders('slider1');
});
slider2.onChange(function (value) {
console.log(value);
resetSliders('slider2');
});
It's best to reset dat.GUI's values by using the controller's .initialValue instead of hard coding it, so the following would be preferable: gui.__controllers[i].setValue(gui.__controllers[i]);
You can reset all of a GUI's controllers by using gui.__controllers.forEach(controller => controller.setValue(controller.initialValue));
This is my code.
function Material() {
this.id = null;
}
function Box() {
// Inherit Material props
Material.call(this)
// Define own props
this.width = null;
this.height = null;
this.weight = null;
}
var box = new Box();
// Setting values to Box props
box.id = 12;
box.width = 250;
box.height = 350;
box.weight = '10kg';
// Not its property
box.color = 'red';
// TODO: Passing box variable via function which will return new object of Box without color property
console.log(box);
// {
// 'id': 12,
// 'width': 250,
// 'height': 350,
// 'weight': '10kg',
// }
So basically at some point I want to get rid of color property that got set on box object (which is not the property of Box Class).
I don't want to individually delete such properties since there can be many. I have no way to find out which properties to delete. But I just know which properties to keep (Its own & inherited).
I am using lodash here. I tried _.forIn alongside _.defaults but of no help.
Thanks
try these:
var diff = _.difference(_.keys(box), _.keys(new Box()));
var clear = _.omit(box, diff);
console.log(clear);
clear - is a copy of box object with initial collection of properties
You can create a dummy Box object, loop through your object's properties and check, whether or not dummy object contains it:
function Material() {
this.id = null;
}
function Box() {
// Inherit Material props
Material.call(this)
// Define own props
this.width = null;
this.height = null;
this.weight = null;
}
function removeAdditionalProperties(obj) {
var dummy = new Box();
for (var key in obj) {
if (!dummy.hasOwnProperty(key)) {
delete obj[key]; // Or whatever you want to do with that prop
}
}
}
var box = new Box();
// Setting values to Box props
box.id = 12;
box.width = 250;
box.height = 350;
box.weight = '10kg';
// Not its property
box.color = 'red';
removeAdditionalProperties(box);
console.log(box);
Edit: I am also open to other suggestions on what I could do.
How can I update my window with the onChange event? My solution works, but I need the groups to collapse when not visible.
w.DD.onChange = function() {
switch (this.selection.text){
case 'Headline':
if(w.visiblegroup)
w.visiblegroup.visible = false;
w.visiblegroup = w.texted;
w.texted.visible = true;
break;
}
}
I have tried to use w.show, w.update(with documentation, still not sure what .update actually does) after adding the elements in the case itself. But I can't figure this out.
w.DD.onChange = function() {
switch (this.selection.text){
case 'Headline':
w.add('checkbox', undefined, 'User-Color');
//w.show();
w.update();
break;
}
}
Does anyone have a clue how this might work?
I generally avoid using LayoutManager and do all teh maths by myself which I trust better but that's my humble opinion…
var w = new Window("dialog");
w.preferredSize = [200,200];
w.DD = w.add( 'dropdownlist', undefined, ["A","B"] );
w.DD.selection = 0;
w.DD.alignment = ["fill","top"];
//Setting a stacked group to items overlay
w.gp = w.add('group');
w.gp.orientation = 'stack';
w.gp.alignment = ["fill","top"];
w.gp.alignChildren = ["fill","top"];
w.gp.p1 = w.gp.add('panel',undefined, "A");
w.gp.p2 = w.gp.add('panel',undefined, "B");
//dummy text to show "collapsing"
w.st = w.add('statictext',undefined, "Collapse ?");
w.DD.onChange = function()Â {
w.gp.p1.visible = w.DD.selection==0;
w.gp.p2.visible = !w.gp.p1.visible;
w.gp.p2.size.height =100;
w.gp.size.height = w.gp.p1.visible? 50 : 100;
w.st.location.y = w.gp.location.y+w.gp.size.height+10;
}
w.onShow = function() {
w.gp.p2.visible=false;
w.gp.size.height = w.gp.p1.size.height = 50;
w.st.location.y = w.gp.location.y+w.gp.size.height+10;
}
w.show();
Loic
To collapse the groups and window you will need to use the layout() method of your window. This will load the LayoutManager that controls the automatic layout behavior for a window or container. The LayoutManager has a method called layout() too, this method invokes the automatic layout behaviour and invoked automatically the first time the window is displayed. Thereafter, the script must invoke it explicitly like so:
window.layout().layout();
An example of how to use the layout manager by Gerald Singelmann:
function main() {
var win = new Window("dialog");
var maingroup = win.add("panel");
maingroup.orientation = "column";
add_group( maingroup );
var show_btn = win.add("button", undefined, "show");
show_btn.onClick = function() {
var txt = "";
for (var n = 0; n < maingroup.children.length; n++) {
txt += maingroup.children[n].edit.text + "\n";
}
alert("Da steht: \n" + txt );
}
win.show();
function add_group( maingroup ) {
var group = maingroup.add( "group" );
group.edit = group.add("edittext", [undefined, undefined, 200, 20], maingroup.children.length );
group.plus = group.add("button", undefined, "+");
group.plus.onClick = add_btn;
group.minus = group.add("button", undefined, "-");
group.minus.onClick = minus_btn;
group.index = maingroup.children.length - 1;
win.layout.layout( true );
return group;
}
function add_btn ( e ) {
add_group( maingroup );
}
function minus_btn ( e ) {
var ix = this.parent.index;
maingroup.remove( maingroup.children[ix] );
win.layout.layout( true );
}
}
source
I am trying to adapt the really cool looking WebGL Story Sphere, source code and css here. There's one big problem: once you click on a news article, the text of the article in the popup is always the same. I want to modify the code so that when you click on an article, the right text appears in the popup.
I'm working from a set of article texts that I specify in the code, e.g. var captions = ["good","better","best"]. Though the article titles and images populate correctly in the popup, I can't get the text to do so. Can you help me?? Here's what I've got:
// function code
var passvar = null; // failed attempt to store texts for later
function initialize() {
math = tdl.math;
fast = tdl.fast;
canvas = document.getElementById("canvas");
g_fpsTimer = new tdl.fps.FPSTimer();
hack();
canvas.addEventListener("mousedown", handleMouseDown, false);
canvas.addEventListener("mousemove", handleMouseMove, false);
canvas.addEventListener("mouseup", handleMouseUp, false);
// Create a canvas 2d for making textures with text.
g_canvas2d = document.createElement('canvas');
window.two2w = window.two2h = g_tilesize;
g_canvas2d.width = two2w;
g_canvas2d.height = two2h;
g_ctx2d = g_canvas2d.getContext("2d");
window.gl = wu.create3DContext(canvas);
if (g_debug) {
gl = wd.makeDebugContext(gl, undefined, LogGLCall);
}
//gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, gl.TRUE);
// Here is where I specify article titles, images, captions
// Titles and images populate the popup correctly, captions don't...
var titles = ["a","b","c"];
var captions = ["good","better","best"];
var images = ['imagesphere/assets/1.jpg',
'imagesphere/assets/bp/2.png',
'imagesphere/assets/bp/3.png'
];
var headlines = titles.concat( titles);
var blurbs = captions.concat( captions);
var tmpImages = [];
var tmpHeadlines = [];
var tmpCaptions = [];
// make a bunch of textures.
for (var ii = 0; ii < g_imagesDownGrid; ++ii) {
var textures = [];
for (var jj = 0; jj < g_imagesAcrossGrid; ++jj) {
var imgTexture = new ImgTexture();
textures.push(imgTexture);
if (tmpImages.length == 0) {
tmpImages = images.slice();
}
if (tmpHeadlines.length == 0) {
tmpHeadlines = headlines.slice();
}
if (tmpCaptions.length == 0) {
tmpCaptions = blurbs.slice();
}
var rando = math.randomInt(tmpImages.length);
var img = tmpImages.splice(rando, 1)[0];
var headline = tmpHeadlines.splice(rando, 1)[0];
var caption = tmpCaptions.splice(rando, 1)[0];
passvar = caption;
if (img.indexOf('videoplay.jpg') > -1){
window.vidtexture = imgTexture;
images = images.slice(1); // dont use that thumb again.
headlines = 'WebGL Brings Video To the Party as Well'
}
imgTexture.load(img, /* "[" + jj + "/" + ii + "]" + */ headline);
}
g_textures.push(textures);
}
// And here's where I try to put this in a popup, finally
// But passvar, the stored article text, never refreshes!!!
<div id="story" class="prettybox" style="display:none">
<img class="close" src="imagesphere/assets/close.png">
<div id="storyinner">
<input id = "mytext">
<script>document.getElementById("mytext").value = passvar;</script>
</div>
</div>
And here is my click handler code:
function sphereClick(e){
window.console && console.log('click!', e, e.timeStamp);
var selected = g_textures[sel.y][sel.x];
window.selected = selected;
animateGL('eyeRadius', glProp('eyeRadius'), 4, 500);
var wwidth = $(window).width(),
wheight = $(window).height(),
story = $('#story').width( ~~(wwidth / 7 * 4) ).height( ~~(wheight / 6 * 5) ),
width = story.width(),
height = story.height(),
miniwidth = 30;
story.detach()
.find('#storyinner').find('h3,img,caption').remove().end().end()
.show();
story.css({
left : e.pageX,
top : e.pageY,
marginLeft : - width / 2,
marginTop : - height / 2
}).appendTo($body); // we remove and put back on the DOM to reset it to the correct position.
$('style.anim.story').remove();
$('<style class="anim story">')
.text( '.storyopen #story { left : ' + (wwidth / 3 * 2) + 'px !important; top : ' + wheight / 2 + 'px !important; }' )
.appendTo($body);
$(selected.img).prependTo('#storyinner').parent();
$('<h3>').text(selected.msg.replace(/\(.*/,'')).prependTo('#storyinner');
$body.addClass('storyopen');
} // eo sphereClick()
There's a lot wrong here, but here's a start. It won't solve your problem, but it will help you avoid issues like this.
var passvar = null; is a global variable.
Your loop for (var ii = 0; ... sets that global variable to a new value on every iteration.
Later, you click something and the global variable passvar is never changed.
If you want to use this pattern, you need to set passvar from your click handler so it has the value that was clicked. Since you didn't actually post your click handlers, it's hard to advise more.
But this is also a bad pattern, functions take arguments for a good reason. Since you have to find your clicked item in the click handler anyway, why not pass it directly which does involve a shared global variable at all?
var handleMouseUp = function(event) {
var story = findClickedThing(event);
if (obj) {
showPopup(story.texture, story.caption);
}
}
Which brings me to this:
var titles = ["a","b","c"];
var captions = ["good","better","best"];
var images = ['imagesphere/assets/1.jpg',
'imagesphere/assets/bp/2.png',
'imagesphere/assets/bp/3.png'
];
When you have 3 arrays, all of the same length, each array describing a different property of an object, you are doing it wrong. What you want, is one array of objects instead.
var stories = [
{
title: "a",
caption: "good",
image: "imagesphere/assets/1.jpg"
}, {
title: "b",
caption: "better",
image: "imagesphere/assets/bp/2.jpg"
}, {
title: "c",
caption: "best",
image: "imagesphere/assets/bp/3.jpg"
},
];
console.log(stories[1].caption); // "better"
Now once you find the clicked object, you can just ask it what it's caption is. And you can pass the whole object to the popup maker. And no field is handled differently or passed around in a different manner, because you are not passing around the fields. You are passsing the entire object.