I want to ask name of plot by using dialog box in dash like promp function in javascript but when I use {html.Script("prompt('text');", type='text/javascript') I have nothing in return.
I don't want to use text input or text area.
Thank you for your help.
The Dash documentation says the following on html.Script:
CAUTION: is included for completeness, but you cannot execute JavaScript code by providing it to a element. Use a clientside callback for this purpose instead.
https://dash.plotly.com/dash-html-components/script
As the documentation says here one option would be to use a clientside callback instead.
Minimal example to show the idea:
app = dash.Dash(__name__)
app.layout = html.Div(
[
html.Div(id="content"),
html.Button(id="button", children="Show name of plot prompt"),
]
)
app.clientside_callback(
"""
function(n_clicks) {
if (n_clicks) {
nameOfPlot = prompt('name of plot')
return nameOfPlot
}
return "Name of plot placeholder"
}
""",
Output("content", "children"),
Input("button", "n_clicks"),
)
The Button click is the input for this callback. If nothing is clicked I return a placeholder text which sets the children property of a div with id content.
If the button has been clicked we can call prompt and do something with it.
With this approach you need an input and an output for the callback to work. You could also put the Javascript code in a .js file in an assets in your root application directory. For more info on client side callbacks see the documentation here.
Another approach would be to have a .js file in your assets folder and to put your prompt code there. You'd probably also want to set up some event listeners to wait for the page to load and/or to listen for button click events or other events that you could use to trigger the prompt at the right moment.
Related
I implemented chrome extension which using chrome.desktopCapture.chooseDesktopMedia to retrieve screen id.
This is my background script:
chrome.runtime.onConnect.addListener(function (port) {
port.onMessage.addListener(messageHandler);
// listen to "content-script.js"
function messageHandler(message) {
if(message == 'get-screen-id') {
chrome.desktopCapture.chooseDesktopMedia(['screen', 'window'], port.sender.tab, onUserAction);
}
}
function onUserAction(sourceId) {
//Access denied
if(!sourceId || !sourceId.length) {
return port.postMessage('permission-denie');
}
port.postMessage({
sourceId: sourceId
});
}
});
I need to get shared monitor info(resolution, landscape or portrait).
My question is: If customer using more than one monitor, how can i determine which monitor he picked?
Can i add for example "system.display" permissions to my extension and get picked monitor info from "chrome.system.display.getInfo"?
You are right. You could add system.display permission and call chrome.system.display.getDisplayLayout(callbackFuncion(DisplayLayout)) and handle the DisplayLayout.position in the callback to get the layout and the chrome.system.display.getInfo to handle the array of displayInfo in the callback. You should look for 'isPrimary' value
This is a year old question, but I came across it since I was after the same information and I finally managed to figure how you can identify which monitor the user selected for screen-sharing in Chrome.
First of all: this information will not come from the extension that you probably built for screen-sharing in Chrome, because:
The chrome.desktopCapture.chooseDesktopMedia API callback only returns a sourceId, which is a string that represents a stream id, that you can then use to call the getMediaSource API to build the media stream.
The chrome.system.display.getInfo will give you a list of the displays, yes, but from that info you can't tell which one is being shared, and there is no way to match the sourceId with any of the fields returned for each display.
So... the solution I've found comes from the MediaStream object itself. Once you have the stream, after calling getMediaSource, you need to get the video track, and in there you will find a property called "label". This label gives you an idea of which screen the user picked.
You can get the video track with something like:
const videoTrack = mediaStream.getVideoTracks()[0];
(Check the getVideoTracks API here: https://developer.mozilla.org/en-US/docs/Web/API/MediaStream/getVideoTracks).
If you print that object, you will see the "label" field. In Chrome screen 1 shows as "0:0", whereas screen 2 shows as "1:0", and I assume screen i would be "i-1:0" (I've only tested with 2 screens).
Here is a capture of that object printed in the console:
And not only works for Chrome, but for other browsers that implement it! In Firefox they show up as "Screen i":
Also, if you check Chrome chrome://webrtc-internals you'll see this is what they show in the addStream event:
And that's it! It's not ideal, since this is a label, more than a real screen identifier, but well, it's something to work with. Once you have the screen identified, in Chrome you can work with the chrome.system.display.getInfo to get information for that display.
Is there a way in nightwatch to check whether a popup window appears after each click event?
I have a problem that randomly an error message appear and I don't want to write for each click event the same callback function.
I have already tried out the after and afterEach commands in the Global.js but then the commands will only run after the whole test suite.
I also have tried it local within a test file, although it also does not cover all single click events, even though the official website writes "... while beforeEach and afterEach are ran before and after each testcase (test step)"?
Solution I'm looking for:
.waitForElementVisible('selector')
.click('selector')
.click('selector')
Solution I have come up with so far:
.waitForElementVisible('selector')
.click('selector', isPresent)
.click('selector', isPresent)
isPresent as a callback function, which does the checking and close the popup window if it appears.
Is there another way to write a function (with or without after and/or forEach), so that it will be called after each click event or after each command. Thus, I don't have to write the isPresent repetitive code?
You can insert something like this in your page object file:
var popupCommand = {
popupCheck:function(){
return this.waitForElementVisible('selector', 5000)
.click('selector', isPresent)
.click('selector', isPresent)
},
module.exports = {
commands:[popupCommand],
elements:{
firstElement: {selector: 'xpath',locateStrategy: 'xpath'},
secondElement: {selector: 'css'},
}
}
Where 'popupCommand' will be the name of your page object file, for example 'Popup'. And also you will have to insert your isPresent callback function here so you can use it.
I did my best to explain you as much as possible what and how to do that :)
you should yse .switchWindow() method.
Why don't you write your own custom command specific for that case, so that way you will avoid repetitive code?
I'm having a few issues with Jade and scope of variables exported from the route. This might be an obvious answer, but my googling abilities have failed me.
In my route, I have this code :
res.render('index', {title: "App",
csvData: json // This is a json object
};
In my view, I want to display the length of the json object on the click of a button. My jade looks like this :
extends layout
block content
script
-var test123 = csvData;
-console.log(test123.length);
div
button.btnCSV(onclick='console.log(test123)') Save As CSV
The first console.log prints the correct length, but when I do press the button, it tells me that test123 is undefined. I think this has something to do with the difference between client side/server side variables. If that is the case, is there anyway to make a server side variable accessible to a client side scope?
I'm not sure how your example would work with the script content prefixed with a -, this indicates unbuffered code. JavaScript that runs server side and that produces no direct output, so your in-line script is most likely empty.
Similarly your onclick handler is just compiling a string on the server, which is the main problem you appear to report.
In order to achieve what you trying to do, you should define a function in the script block which can be called from your buttons onclick handler. Take care to ensure that your script keyword ends with a . so that the following lines are treated as block content of the script.
Here's what your template should look like.
extends layout
block content
script.
var test123 = !{JSON.stringify(csvData)};
function printLength() {
console.log(test123.length);
}
div
button.btnCSV(onclick='printLength()') Save As CSV
Then on the server side make sure you're returning an actual JavaScript object, or an Array, and not a string representation... it should look like this
res.render('index', {title: "App",
csvData: [{ val1: 'value1', val2: 'value2' }]
};
This allows variables to be used for server side scripting (if required) as well as client side.
Is there a simple way to modify a dashlet to automatically re-load itself periodically?
I am particularly thinking of the "My Tasks" dashlet - we are using pooled review workflows, so tasks may come and go all the time as they are created and then are claimed.
It may be frustrating for users to keep clicking on tasks that turn out to have already been claimed - or having to remember to keep re-loading their Dashboard page. I'd prefer the dashlet to refresh on a timed interval so it's always reasonably up to date.
In order to do this you will need to add a new capability to the client-side class Alfresco.dashlet.MyTasks (docs, source) found in the file components/dashlets/my-tasks.get.js. First you will need to add a new method to the prototype extension specified as the second parameter in the YAHOO.lang.augmentObject() call, e.g.
...
}, // end of last OOTB function - add a comment here
// begin changes
reloadData: function MyTasks_onReady()
{
this.widgets.alfrescoDataTable.loadDataTable(
this.options.filters[this.widgets.filterMenuButton.value]
);
}
// end changes
});
})();
It's not the ideal development environment, you can modify the JS file directly in the Share webapp, although you will also need to update the corresponding -min.js file.
Once you've done this, check that it works by running the following line in your browser's JavaScript console
Alfresco.util.ComponentManager.findFirst("Alfresco.dashlet.MyTasks").reloadData();
If that works, then you can wire up your new method to a title bar action (see my DevCon presentation for more background info), in the dashlet web script. The method depends on whether you are using v4.2 or a previous version, but if it is the latter then you need to add some code to the dashlet's Freemarker file my-tasks.get.html.ftl (under WEB-INF/classes/alfresco/site-webscripts/org/alfresco/components/dashlets).
In that file you should see some JavaScript code inside a <script> tag, this sets up an instance of the client-side class and some utility classes, the contents of which you can replace with the following, to add your custom title bar action.
(function()
{
var dashlet = new Alfresco.dashlet.MyTasks("${jsid}").setOptions(
{
hiddenTaskTypes: [<#list hiddenTaskTypes as type>"${type}"<#if type_has_next>, </#if></#list>],
maxItems: ${maxItems!"50"},
filters:
{<#list filters as filter>
"${filter.type?js_string}": "${filter.parameters?js_string}"<#if filter_has_next>,</#if>
</#list>}
}).setMessages(${messages});
new Alfresco.widget.DashletResizer("${id}", "${instance.object.id}");
var refreshDashletEvent = new YAHOO.util.CustomEvent("onDashletRefresh");
refreshDashletEvent.subscribe(dashlet.reloadData, dashlet, true);
new Alfresco.widget.DashletTitleBarActions("${args.htmlid}").setOptions(
{
actions:
[
{
cssClass: "refresh",
eventOnClick: refreshDashletEvent,
tooltip: "${msg("dashlet.refresh.tooltip")?js_string}"
},
{
cssClass: "help",
bubbleOnClick:
{
message: "${msg("dashlet.help")?js_string}"
},
tooltip: "${msg("dashlet.help.tooltip")?js_string}"
}
]
});
})();
You will need to add some styles for the class name specified, in the dashlet's CSS file my-tasks.css, such as the following
.my-tasks .titleBarActions .refresh
{
display: none;
background-image: url('refresh-icon.png');
}
The icon file (here is one you could re-use) must be in the same directory as the CSS file.
Lastly you'll need to define the label dashlet.refresh.tooltop used for the title bar action's tooltip. You can do this in the dashlet web script's .properties file.
For a similar example, check out the source of my Train Times dashlet, which features a refresh title bar action.
In some ways it's actually easier to define your own dashlets than it is to extend the Alfresco-supplied ones, but if you have the option of using 4.2.x, the new method allows you to extend the existing components without duplicating any code, which obviously makes upgrades much easier.
I'm developing a Chrome extension and have a strange problem with icon change on-the-fly.
In my popup.html I have a button by clicking on which I want to change the icon of the extension in the browser. E.g. from colored one to black and white (when application is inactive).
So the function which is responsible for this:
function toggleActivated(){
localStorage.isActive = toBool(localStorage.isActive) ? false : true;
$('#activate-disactivate span').text(toBool(localStorage.isActive) == false ? 'Включить' : 'Выключить');
chrome.browserAction.setIcon({path: toBool(localStorage.isActive) ? '48.png' : '48_bw.png'});
//window.close();
}
But the problem is that I want to close popup after the icon changed. If I use the window.close() at the end - then the icon is not changed, but if it is commented out - then the icon is changed fine.
Why is there a conflict between chrome.browserAction.setIcon() and window.close()?
It sounds like chrome.browserAction.setIcon is getting fired asynchronously but the popup is getting closed before it finishes. You could try adding a 500ms setTimeout before closing.
You should also file a bug report at new.crbug.com.
I know this is old, but I was having the same problem and abraham was right when he said that chrome.browserAction.setIcon was being called asynchronously. But I don't think that setting a timeout is the best answer.
If you check the setIcon documentation you can see that this method takes a function callback as parameter. That's where you should call window.close(). Like this:
chrome.browserAction.setIcon({ path: icon_path }, function() {
window.close();
});
UPDATE:
As niraj.nijju pointed in the comment below, you can pass a tabId param to the setIcon function to limit the scope of the change.