i wan't to add context Menu when i right click on object 3D in scene
as this java script code
$(function(){
$.contextMenu({
selector: '.context-menu-one',
callback: function(key, options) {
var m = "clicked: " + key;
window.console && console.log(m) || alert(m);
},
items: {
"edit": {name: "Edit", icon: "edit"},
"cut": {name: "Cut", icon: "cut"},
"copy": {name: "Copy", icon: "copy"},
"paste": {name: "Paste", icon: "paste"},
"delete": {name: "Delete", icon: "delete"},
"sep1": "---------",
"quit": {name: "Quit", icon: "quit"}
}
});
$('.context-menu-one').on('click', function(e){
console.log('clicked', this);
})
});
<div class="context-menu-one box menu-1">
<strong>right click me</strong>
this code i use it to create menu but can't find idea to make it relative to 3D object in scene
You need to convert 3d coordinates to 2d screen (projected) coordinates.
Please have a look at this post for details and also the answer here.
Related
New to coding here and I have a WordPress page that displays a Google Chart with the source data coming from a Google Sheet where I'm trying to have the Google Chart redraw/refresh the data automatically without manually refreshing the entire web page.
Below is my current code which works to only refresh the data in the chart when a user manually refreshes the entire website.
I have read about AJAX and it seems this is the key but I haven't been able to tweek the Google Developer example code to solve my issue.
I hit a road block at ...
function drawChart() {
var jsonData = $.ajax({
url: "getData.php",
dataType: "json",
async: false
}).responseText;
where I do not know how to get my public google sheet URL to work in place of the "getData.php" part of the code snippet above. I do not know anything about php but saw examples where people reformatted their google sheet URL is lieu of using the php part to something like:
https://spreadsheets.google.com/feeds/list/1gwLrZtvDBSQPdXl_L1cOl_y2318yiVXKwgN2-czdgW0/1/public/basic?alt=json
but that still doesn't work for me. Feels like I'm going down a rabbit hole just trying to get the data using this approach when I already have a way to get the same data (tho without it automatically refreshing without manually reloading the entire website). Any help will be greatly appreciated!
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_1" style="width: 700px; height: 400px;"></div>
<script type="text/javascript">
google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawVisualization1);
function drawVisualization1() {
var query = new google.visualization.Query( 'https://docs.google.com/spreadsheets/d/1gwLrZtvDBSQPdXl_L1cOl_y2318yiVXKwgN2-czdgW0/gviz/tq?gid=0&headers=1&tq?&range=A1:E13');
query.send(handleQueryResponse1);
}
function handleQueryResponse1(response) {
if (response.isError()) {
alert('Error in query: ' + response.getMessage() + ' ' + response.getDetailedMessage());
return;
}
var options = {
title : 'Sales ($) and Margin (%)',
titleTextStyle: {
fontSize: 16,
},
legend: {position: 'top', maxLines: 2},
pointSize: 7,
series: {
0: {type: 'bars', targetAxisIndex: 0},
1: {type: 'bars', targetAxisIndex: 0},
2: {type: 'bars', targetAxisIndex: 0},
3: {type: 'line', targetAxisIndex: 1},
},
vAxes: {
0: {title: 'Sales ($ in millions)'},
1: {title: 'Margin (%)', gridlines: {color: 'transparent'}, format:"#%"}},
hAxis: {title: 'Fiscal Quarter', slantedText: 'True'},
isStacked: 'True',
};
var data = response.getDataTable();
var chart = new google.visualization.ComboChart(document.getElementById('chart_1'));
chart.draw(data, options);
}
</script>
You can use setRefreshInterval(seconds) to call query.send() every few seconds.
query.setRefreshInterval(120);
query.send(handleQueryResponse1);
you don't need ajax, because you're using google.visualization.Query to get the data.
just need to structure you're code in such a way,
that you can refresh the data and chart,
without rebuilding everything.
see following working snippet,
the chart and options are created once.
the data is retrieved initially, and when the button is clicked.
after receiving the data, the chart is drawn.
I added the 'ready' event to the chart, just to prove the data was refreshed and the chart re-drawn.
but since the data doesn't actually change, nothing appears to happen.
google.charts.load('current', {
packages: ['corechart']
}).then(drawVisualization1);
function drawVisualization1() {
var chart = new google.visualization.ComboChart(document.getElementById('chart_1'));
google.visualization.events.addListener(chart, 'ready', function () {
console.log('drawn');
});
var options = {
title : 'Sales ($) and Margin (%)',
titleTextStyle: {
fontSize: 16,
},
legend: {position: 'top', maxLines: 2},
pointSize: 7,
series: {
0: {type: 'bars', targetAxisIndex: 0},
1: {type: 'bars', targetAxisIndex: 0},
2: {type: 'bars', targetAxisIndex: 0},
3: {type: 'line', targetAxisIndex: 1},
},
vAxes: {
0: {title: 'Sales ($ in millions)'},
1: {title: 'Margin (%)', gridlines: {color: 'transparent'}, format:"#%"}
},
hAxis: {title: 'Fiscal Quarter', slantedText: 'True'},
isStacked: 'True',
};
getData();
document.getElementById('refresh').addEventListener('click', getData);
function getData() {
var query = new google.visualization.Query( 'https://docs.google.com/spreadsheets/d/1gwLrZtvDBSQPdXl_L1cOl_y2318yiVXKwgN2-czdgW0/gviz/tq?gid=0&headers=1&tq?&range=A1:E13');
query.send(handleQueryResponse1);
}
function handleQueryResponse1(response) {
if (response.isError()) {
alert('Error in query: ' + response.getMessage() + ' ' + response.getDetailedMessage());
return;
}
var data = response.getDataTable();
chart.draw(data, options);
}
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<input id="refresh" type="button" value="Refresh" />
<div id="chart_1"></div>
I have an app (based on a magazine tute) with a menu that works fine on Windows and Ubuntu, but I have trouble getting the app level custom menu items to appear on MacOS. These menu items are File and View entries.
I have pored over the electron API docs and I see the special considerations for OSX, especially about the "role" attribute, but I am still stymied here. I am able to create menu items on OSX for the types of things listed in the API documents (such as "Edit" menu items using role, from a Renderer script) but not for my app.
Could my menu items be colliding with reserved "File/View" menu item names in the mac menu?
Here's the snip with my menu template string:
var SendEvent = function(name) {
return function() {win.webContents.send(name);};
};
var template = [
{label: 'File', submenu: [
{label: 'New', click: SendEvent('file-new')},
{label: 'Open', click: OpenFile},
{label: 'Save', click: SendEvent('file-save')},
{label: 'Save As', click: SendEvent('file-save-as')},
{label: 'Close', click: SendEvent('file-close')},
{type: 'separator'},
{label: 'Quit', click: function() {app.quit();}}
]}, {label: 'View', submenu: [
{label: 'HTML/Markdown', click: SendEvent('view-toggle')}
]}
];
Menu.setApplicationMenu(Menu.buildFromTemplate(template));
Are there any other examples out there of apps with custom File and View menu actions that work on macOS?
Menu.setApplicationMenu(Menu.buildFromTemplate(template));
should be called within createWindow() function:
function createWindow() {
mainWindow = new BrowserWindow({
width: 800,
height: 600
})
mainWindow.loadURL(url.format({
pathname: path.join(__dirname, "index_menus.html"),
protocol: "file:",
slashes: true
}))
mainWindow.on("closed", () => {
mainWindow = null;
});
var template = [
{label: 'File', submenu: [
{label: 'New', click: SendEvent('file-new')},
{label: 'Open', click: SendEvent('file-open')},
{label: 'Save', click: SendEvent('file-save')},
{label: 'Save As', click: SendEvent('file-save-as')},
{label: 'Close', click: SendEvent('file-close')},
{type: 'separator'},
{label: 'Quit', click: function() {app.quit();}}
]},
{label: 'View', submenu: [
{label: 'HTML/Markdown', click: SendEvent('view-toggle')}
]}
];
Menu.setApplicationMenu(Menu.buildFromTemplate(template));
}
If you use "File" menu, it will be placed under YourAppName menu (the first one) on macOS.
I have created a kendo grid for 10 number of products in my project. I want the kendo window containing the details of the product to popup when I click on the productname displayed in the kendo grid.
I have looked into the demos of the kendo grid but I don't want the details of the product selected to be edited and also I don't want to use a separate column for details button as shown in the examples and demo.
I also looked into the music store demo of kendo ui but I couldn't understand its code as its in jQuery and I am using asp.net mvc with razor syntax for my project
Note:
I want window to appear only when I click on the name of the product and display its details.
You can use:
$('#grid').on("click", "tr.k-state-selected", function (e) {
// open window here
// you have i.e. Id here $('#grid').dataItem($('#grid').select()).Id
});
For this you must set option selectable: "row" in grid configuration.
Otherwise you can use just:
$('#grid').on("click", "tr", function (e) { ... }
You can make use of the detailTemplate for achieving it.
<script>
var wnd,
detailsTemplate;
$(document).ready(function () {
var grid = $("#grid").kendoGrid({
dataSource: {
pageSize: 20,
data: createRandomData(50)
},
pageable: true,
height: 550,
columns: [
{ field: "FirstName", title: "First Name", width: "140px" },
{ field: "LastName", title: "Last Name", width: "140px" },
{ field: "Title" },
{ command: { text: "View Details", click: showDetails }, title: " ", width: "180px" }]
}).data("kendoGrid");
wnd = $("#details")
.kendoWindow({
title: "Customer Details",
modal: true,
visible: false,
resizable: false,
width: 300
}).data("kendoWindow");
detailsTemplate = kendo.template($("#template").html());
});
function showDetails(e) {
e.preventDefault();
var dataItem = this.dataItem($(e.currentTarget).closest("tr"));
wnd.content(detailsTemplate(dataItem));
wnd.center().open();
}
</script>
<script type="text/x-kendo-template" id="template">
<div id="details-container">
<h2>#= FirstName # #= LastName #</h2>
<em>#= Title #</em>
<dl>
<dt>City: #= City #</dt>
<dt>Birth Date: #= kendo.toString(BirthDate, "MM/dd/yyyy") #</dt>
</dl>
</div>
</script>
Go to this fiddle for a working demo
[UPDATE]
Here's the code snippet for showing the window while clicking on the Product Name
<script>
var wnd,
detailsTemplate;
$(document).ready(function () {
var grid = $("#grid").kendoGrid({
dataSource: {
pageSize: 20,
data: createRandomData(50)
},
pageable: true,
height: 550,
columns: [
{ field: "FirstName", title: "First Name", width: "140px",attributes: { "class": "FirstName"} },
{ field: "LastName", title: "Last Name", width: "140px" },
{ field: "Title" }]
}).data("kendoGrid");
wnd = $("#details")
.kendoWindow({
title: "Customer Details",
modal: true,
visible: false,
resizable: false,
width: 300
}).data("kendoWindow");
detailsTemplate = kendo.template($("#template").html());
$('#grid').on("click", ".FirstName", function (e) {
e.preventDefault();
var dataItem = $("#grid").getKendoGrid().dataItem($(e.currentTarget).closest("tr"));
wnd.content(detailsTemplate(dataItem));
wnd.center().open();
});
});
</script>
<script type="text/x-kendo-template" id="template">
<div id="details-container">
<h2>#= FirstName # #= LastName #</h2>
<em>#= Title #</em>
<dl>
<dt>City: #= City #</dt>
<dt>Birth Date: #= kendo.toString(BirthDate, "MM/dd/yyyy") #</dt>
</dl>
</div>
</script>
Working demo is here
I have the following button within a Panel within a view:
items: [
{
xtype: 'button',
text: 'SEND',
ui: 'confirm',
docked: 'bottom',
handler: function(){
view.push('TouchNuts.view.Transactions',{
title: 'New views title',
html: 'Some content'
});
}
}
]
I would like to navigate to a page that consists of a list 'TouchNuts.view.Transactions' when I click it. Any ideas?
view needs to be a reference to your NavigationView. One way of getting that reference is by giving it an id and then using Ext.getCmp to fetch the component:
{
xtype: 'navigationview',
id: 'my-id',
items: [...]
}
Ext.getCmp('my-id');
I accidentally deleted this post before, so I am resubmitting :\
I'm new to Ext JS and MVC in general and am toying with creating an app with a chart nested within a panel nested within a border panel within an app. [From top to bottom it goes Viewport > bordered panel > panel in 'center region' > chart]
The reason why I'm nesting a panel within the border panel is that the nested panel will hold both the chart as well as a toolbar for the chart, both of which are dynamic depending on the user's selection.
While simply having the border panel reference the externally defined chart view works well, once I try having it reference an externally defined panel view it throws 'Uncaught TypeError: Cannot call method 'substring' of undefined', and Aptana gives me a 'name is undefined' namespace error whether or not I have the nested panel reference the chart or simply be left empty. I have double checked my name spacing so I'm a little lost in where to start looking for the problem.
My base application file is as follows:
Ext.application({
name: 'Chart',
appFolder: 'chart',
controllers:['sidebar.Navigation', 'commoditycontrol.Commoditycontrol',
'chart.oil.Spreads'],
launch: function() {
Ext.create('Ext.container.Viewport', {
layout: 'border',
items: [{
region: 'north',
xtype: 'commoditycontrol',
}, {
region: 'east',
xtype: 'sidebarnavigation',
}, {
region: 'center',
xtype: 'oilbase',
}]
});
},
});
The 'oilbase' view is simply a panel that imports the chart and chart toolbar view (in this case I've left the toolbar view out)
Ext.define('Chart.view.base.Oil', {
extend: 'Ext.panel.Panel',
alias: 'widget.oilbase',
name: 'oilbase',
layout: 'fit',
items: [{
xtype: 'oilspreads'
}]
});
And here's the chart view 'oilspreads'
Ext.define('Chart.view.chart.oil.Spreads', {
extend: 'Ext.chart.Chart',
alias: 'widget.oilspreads',
name: 'oilspreads',
layout: 'fit',
store: 'Chart.store.oil.Spreads',
config: {
style: {
background: '#333333'
},
},
axes: [
{
title: 'Close',
type: 'Numeric',
position: 'left',
fields: ['close'],
minimum: 0,
maximum: 100,
cls: 'axis'
},
{
title: 'Month',
type: 'Category',
position: 'bottom',
fields: ['month'],
cls: 'axis'
}
],
series: [
{
type: 'line',
xField: 'month',
yField: 'close'
}
]
});
Again, everything works fine if I reference the chart view in the application rather than the 'oilbase' empty panel. If I reference the default panel xtype, everything works as well.
Is nesting panels simply discouraged? My gut feeling is that I'm simply missing an obvious namespacing issue but I would appreciate a 2nd set of eyes, as well as comments as to my approach to the MVC pattern for ExtJs in general.
Thanks
For the view to be loaded correctly it has to be defined either in the views config of your app, or in the views config of one of the controllers.