I'm having a little problem with an JS script in InDesign. I want to place an empty rectangle when clicking on a button. The creation outsite the onClick()-function works fine, but when I copy the exact code inside the onClick, it doesn't work.
main();
function main()
{
app.scriptPreferences.userInteractionLevel = UserInteractionLevels.interactWithAll;
//Window
var dlg = new Window('dialog', "Window");
dlg.size = [250,150];
//Add button to window
var myButtonGroup = dlg.add ("group");
myButtonGroup.orientation = "column";
var search = myButtonGroup.add ("button", undefined, "Do!");
// Totally works fine
var doc = app.activeDocument;
var rect = doc.rectangles.add({geometricBounds : [0,0,32,100], fillColor : doc.swatches.item("None"), strokeColor : doc.swatches.item("None")});
//onClick event
search.onClick = function() {
alert("working");
//Alert is working, code below not
var doc = app.activeDocument;
var rect = doc.rectangles.add({geometricBounds : [0,0,32,100], fillColor : doc.swatches.item("None"), strokeColor : doc.swatches.item("None")});
}
dlg.show();
}
I'm new to Indesign JS programming, so please be indulgent :) I am using InDesign CC 2020 and Javascript.
Best regards
Alexander
Ok, it worked when I add #targetengine "session" and create a 'palette' instead of 'window'.
Why? Don't ask me haha!
Best regards
Alex
Related
I have a problem with a script for Indesign 2020.
I am not a programmer and don't know javascript (I just created some simple script).
I want to create a simple panel with a button that add a textframe, but doesn't seems to work.
Here's the code
var document = app.activeDocument;
document.viewPreferences.horizontalMeasurementUnits = MeasurementUnits.MILLIMETERS;
document.viewPreferences.verticalMeasurementUnits = MeasurementUnits.MILLIMETERS;
app.viewPreferences.rulerOrigin = RulerOrigin.SPREAD_ORIGIN;
app.activeDocument.viewPreferences.rulerOrigin = RulerOrigin.SPREAD_ORIGIN;
app.activeDocument.zeroPoint = [0,0];
var Labelpanel = new Window("dialog");
Labelpanel.text = "Printer";
Labelpanel.orientation = "column";
Labelpanel.alignChildren = ["center","top"];
Labelpanel.spacing = 10;
Labelpanel.margins = 16;
var Button1 = Labelpanel.add("button", undefined, undefined, {name: "Button 1"});
Button1.text = "Magenta 1";
Button1.onClick = function() {
var Label = document.pages[0].textFrames.add();
Label.properties = {
geometricBounds : [ 25,284.5,15,226.5 ],
contents : "1234_Mag1"
}
Label.paragraphs[0].appliedFont = app.fonts.item("Arial");
Label.paragraphs[0].pointSize = "30";
Label.paragraphs[0].justification = Justification.RIGHT_ALIGN;
Labelpanel.close();
}
Labelpanel.show();
The code in the button normally works, but in ScriptUI it does nothing.
Can someone tell me what am I doing wrong?
In your case the script will work (I'm not sure about your goal, though) if you add this line:
#targetengine session
at the start of the code.
And change "dialog" with "palette" here:
var Labelpanel = new Window("palette");
The problem is a dialog window can't change a document until the dialog will be closed.
Not like a palette that has access to documents always.
Your script can be rewritten in order to use a dialog window instead of palette. But it will need to change more than just two lines.
Update
Here is the example how it can be done with a dialog window:
// set the dialog window
var labelDialog = new Window("dialog");
labelDialog.text = "Printer";
labelDialog.orientation = "column";
labelDialog.alignChildren = ["center","top"];
labelDialog.spacing = 10;
labelDialog.margins = 16;
// set a variable that we will convey to the main function
var contents = '';
// a couple buttons
var button1 = labelDialog.add("button", undefined, undefined, {name: "Button 1"});
button1.text = "Magenta 1";
var button2 = labelDialog.add("button", undefined, undefined, {name: "Button 2"});
button2.text = "Magenta 2";
// if click --> change the variable an close the dialog
button1.onClick = function() {contents = '1234_Mag1'; labelDialog.close()};
button2.onClick = function() {contents = '5678_Mag2'; labelDialog.close()};
labelDialog.show(); // show the dialog
// if the variable is not empty --> run the main function
if (contents != '') main(contents);
// the main function, get the variable and does the work
function main(contents) {
app.viewPreferences.rulerOrigin = RulerOrigin.SPREAD_ORIGIN;
app.activeDocument.viewPreferences.rulerOrigin = RulerOrigin.SPREAD_ORIGIN;
app.activeDocument.zeroPoint = [0,0];
var document = app.activeDocument;
document.viewPreferences.horizontalMeasurementUnits = MeasurementUnits.MILLIMETERS;
document.viewPreferences.verticalMeasurementUnits = MeasurementUnits.MILLIMETERS;
var label = document.pages[0].textFrames.add();
label.properties = {
geometricBounds: [ 25,284.5,15,226.5 ],
contents: contents // <-- our variable goes here
}
label.paragraphs[0].appliedFont = app.fonts.item("Arial");
label.paragraphs[0].pointSize = "30";
label.paragraphs[0].justification = Justification.RIGHT_ALIGN;
}
I've made two buttons. I suspect it would be your next question: "How to add more buttons?"
The main point: A dialog window should be closed before you try to change a document. A palette should not. This 'subtle difference' changes the algorithm significantly.
When I double click the node text editing is going some where, instead of the node. The below is the code and I don't know what is happening. I'm using AJAX to get the mxGraph XML from server side.
Edited source code as per comments
// Creates the div for the graph
mxEvent.disableContextMenu(container);
document.body.appendChild(container);
var xmlDocument = mxUtils.parseXml(xml);
var decoder = new mxCodec(xmlDocument);
var node = xmlDocument.documentElement;
container.innerHTML = '';
graph = new mxGraph(container);
graph.cellEditor.init();
graph.cellEditor.textarea.style.position='absolute';
graph.setHtmlLabels(true);
graph.setPanning(true);
graph.setTooltips(true);
graph.setConnectable(true);
// Changes the default style for edges "in-place"
var style = graph.getStylesheet().getDefaultEdgeStyle();
style[mxConstants.STYLE_ROUNDED] = true;
style[mxConstants.STYLE_EDGE] = mxEdgeStyle.ElbowConnector;
decoder.decode(node, graph.getModel());
var layout = new mxHierarchicalLayout(graph, mxConstants.DIRECTION_WEST);
var parent = graph.getDefaultParent();
layout.execute(parent);
Adding following piece of code during initialization helped me
graph.cellEditor.init();
graph.cellEditor.textarea.style.position='absolute';
I want to move an image on another one. I saw on forum, the best way to do this is to use destination.appendChild(elementToMove). But when I use it, my elementToMove just disappears.
Here is a fiddle for what I want to do (but that's not working):
JS Fiddle
Here is my JS Code:
var body = document.getElementsByTagName("body")[0];
var td_sign = document.getElementById("sign");
var td_moon = document.getElementById("moon");
var sign = document.createElement("img");
sign.src="http://img11.hostingpics.net/thumbs/mini_723286sign.png";
var moon = document.createElement("img");
moon.src="http://img11.hostingpics.net/thumbs/mini_418048moon.png";
td_sign.appendChild(sign);
td_moon.appendChild(moon);
var testbutton = document.createElement('input');
testbutton.type='button';
testbutton.value='test';
testbutton.onclick = function(){
sign.appendChild(moon);
}
body.appendChild(testbutton);
I just want to use JavaScript.
I'm using Cesium and trying to have a button that changes the image whenever pressed. Cesium runs on javascript but whenever the variable changes that contains the name of the image file, the image does not change.
var iName = "HeatMap"; var count=1;
name=iName.concat(count.toString());
var viewer = new Cesium.CesiumWidget('cesiumContainer');
var layers = viewer.scene.imageryLayers;
//Cesium Active Window
layers.addImageryProvider(new Cesium.SingleTileImageryProvider({
url : 'images/'.concat(name.concat('.png')),
rectangle : Cesium.Rectangle.fromDegrees(-180.0, -90.0, 180.0, 90.0),
opacity:.3
}));
function buttonPressCount()
{
name='HeatMap';
count=count+1;
name = name.concat(count.toString());
document.getElementById('counter').innerHTML = name;
}
the document.getElementById is just for debugging purposes so I know that the name actually changed.
It seems to me you should call something like
layers.addImageryProvider(new Cesium.SingleTileImageryProvider({
url : 'images/'.concat(name.concat('.png')),
rectangle : Cesium.Rectangle.fromDegrees(-180.0, -90.0, 180.0, 90.0),
opacity:.3}));
in function buttonPressCount.
Thanks for watching this question.
I'm doing an ionic app for the city i live. It uses google maps for displaying some information related to the city. Moreover, I want to put custom controls to the map in order to show different types of markers, which are services such as bus stops or hospitals. The problem is that i can't solve this error: "Uncaught TypeError: Cannot read property 'zIndex' of undefined" and i have tried most of the other answers to this question.
I'm trying to add the element (i think that Legend is its name) inside a controller of my app, just like this:
var controlesDiv = document.createElement('DIV');
var controles = new CrearLeyenda(controlesDiv, map);
controlesDiv.index = 4;
map.controls[google.maps.ControlPosition.TOP_RIGHT].push(controles);
Then, outside the controller, i have the CrearLeyenda function:
function CrearLeyenda(controlesDiv, map) {
controlesDiv.style.padding = '5px 0px';
var controlesUI = document.createElement('DIV');
controlesUI.style.backgroundColor = 'white';
controlesUI.style.borderStyle = 'solid';
controlesUI.style.borderWidth = '1px';
controlesUI.style.borderColor = 'gray';
controlesUI.style.boxShadow = 'rgba(0, 0, 0, 0.398438) 0px 2px 4px';
controlesUI.style.cursor = 'pointer';
controlesUI.style.textAlign = 'center';
controlesUI.title = 'Click to see Churches';
controlesDiv.appendChild(controlesUI);
var controlesText = document.createElement('DIV');
controlesText.style.fontFamily = 'Arial,sans-serif';
controlesText.style.fontSize = '13px';
controlesText.style.padding = '1px 6px';
controlesText.style.fontWeight = 'bold';
controlesText.innerHTML = 'Controles';
controlesUI.appendChild(controlesText);
google.maps.event.addDomListener(controlesUI, 'click', function () {
alert("clicked");
if (controlesText.style.fontWeight == 'bold') {
controlesText.style.fontWeight = 'normal';
} else {
controlesText.style.fontWeight = 'bold';
}
});
google.maps.event.addDomListener(controlesUI, 'mouseover', function () {
controlesUI.style.backgroundColor = '#e8e8e8';
});
google.maps.event.addDomListener(controlesUI, 'mouseout', function () {
controlesUI.style.backgroundColor = 'white';
});}
I hope you can help me and i'm sorry for my english, i'll try to explain as best as i can if you need more indications.
Thanks in advance
You're calling this as if it were a class constructor returning an object:
var controles = new CrearLeyenda(controlesDiv, map);
However the CrearLeyenda function doesn't seem to do anything like that. So the controles variable is NULL at this point. Try adding console.log(controles); right after this and see.
I think you need to add this to the end of the CrearLeyenda function:
return controlesUI;
And change how you call it to:
var controles = CrearLeyenda(controlesDiv, map);
You can resolve the problem just changing map.controls[google.maps.ControlPosition.TOP_RIGHT].push(controles); to map.controls[google.maps.ControlPosition.TOP_RIGHT].push(controlesDiv);. It seems that the other code is OK or, at least, is what is recommended at google maps docs: https://developers.google.com/maps/documentation/javascript/examples/control-custom
This was discovered thanks to duncan