I'm trying to render an empty Map in QML 5.7, in order to draw geolocated polylines. However, no plugins are available to supply the map data:
Map {
anchors.fill:parent
plugin: Plugin {
name: "osm"
Component.onCompleted: console.log('a',availableServiceProviders.length)
}
MapPolyline {
line.color: "#299FE7"; line.width: 3
path: parent.points
}
Timer {
running:true; interval:1000
onTriggered: console.log('b',parent.supportedMapTypes.length)
}
}
The above outputs:
qml: a 0
qml: b 0
Why don't I have any plugins available, and how can I get one to work?
You don't have a default provider because Qt does not enforce the usage of a specific one. Even more now that all of the available ones require a registration (and the acceptance of an agreement/ToS) to use their services.
The list of available plugins can be found here.
Following the links you can read about the specific setup for the usage of each one.
Adding a provider in QML is just a matter of declaring a Plugin type, something along the line of that:
Plugin {
name: <provider_name> // { "here" | "mapbox" | "osm" }
PluginParameter { name: <param_name>; value: <param_value> }
// other parameters
}
The very same task can be carried out in a C++/non-QML project via QGeoServiceProvider class.
Mind that the access to MapQuest changed few months ago, breaking the Open Street Map plugin. You now need credentials to access their service, e.g. read this comment. The relevant patch has been pushed and merged, as stated in the bug report page of last linked comment, and will be available in Qt 5.6.2 (and Qt 5.7.1) patch release.
Related
How do I get an image preview for a Types.File field in the admin UI.
It says "The FS adapter supports all the default Keystone file schema fields. It also additionally supports and enables the filename path (required)." However when I try (doc):
format: function(item, file){
return '<img src="/files/'+file.filename+'" style="max-width: 300px">'
}
Nothing appears in the UI
The format function hasn't been working for a while as far as I can tell from the Keystone GitHub. I don't know if the function exists in Keystone 4.0. Reference here.
You could fork the current beta and patch the function yourself if you need this immediately.
You can find it at https://github.com/keystonejs/keystone/blob/v4.0.0-beta.5/fields/types/file/FileType.js#L81
Doesn't seem right to me, though. I hope they will fix it before releasing 4.0, along with the missing File Array type.
Image previews are now possible in the latest master branch of keystone (see https://github.com/keystonejs/keystone/pull/4509). At the moment you need to depend on the git version of keystone, so put this in your package.json and run npm install:
"keystone": "https://github.com/keystonejs/keystone.git"
In your model, specify thumb: true on the image field in question. You also need the url property in the schema. For example:
const storage = new keystone.Storage({
adapter: keystone.Storage.Adapters.FS,
fs: {
path: keystone.expandPath('./uploads/images'),
publicPath: '/images/'
},
schema: {
url: true,
}
})
ImageUpload.add({
name: { type: Types.Key, index: true },
image: {
type: Types.File,
storage: myStorage,
thumb: true
},
createdTimeStamp: { type: String }
});
The admin UI should now show a small preview of the image and a link to it.
I'm using SeedStack to create a web application. In order to do that, I use W20 to develop my frontend. I need specific JavaScript libraries into that project. How can I inject an external javascript library into it ? I want to use Chart.js http://www.chartjs.org/ to visualize data into charts. To do that, I suppose that I have to inject ChartJS as a dependency module in Angular.
Thank you for your help.
Before getting to the specific answer, please note that SeedStack already has an add-on for charts. As for integrating a library with W20, you have two main things to do:
Configure RequireJS to load the JS file and be able to inject it as a dependency.
Integrate the library with the AngularJS framework, which is often done by writing some directive.
Fortunately for you, Angular directives are already available for Chart.js, thanks to the angular-chart.js library. You just need to configure RequireJS to load it. Add a requireConfig section to the manifest of one of your fragments:
{
"id": "my-fragment",
...
"requireConfig": {
"paths": {
"{angular-chart.js}": "${components-path:bower_components}/angular-chart.js/dist",
"{chart.js}": "${components-path:bower_components}/chart.js/dist"
},
"map": {
"{angular-chart.js}/angular-chart": {
"angular": "{angular}/angular",
"chart": "{chart.js}/Chart"
}
}
}
}
The paths section declares locations of the two Chart.js libraries. Note that we use a variable named components-path with a default value of bower_components here. This is useful when using the W20 bridge add-on.
The map section declares a mapping between the expected and the real paths for dependencies of angular-chart.js.
You can then use the angular-chart.js library according to its documentation:
define([
'{angular}/angular',
'{angular-chart.js}/angular-chart',
], function(angular) {
var module = angular.module('myModule', ['ngResource', 'chart.js']);
module.controller('ContentController', [ '$scope', function($scope) {
// your JS code here
// (with your markup in a corresponding angular template)
}]);
});
I have done a custom action. I can see the action in documentary library but i canot see it on faceted search result page.
<action id="custom-action" type="javascript" label="actions.custom.action">
<param name="function">onCustomActionlick</param>
</action>
So I went in the aikau-1.0.8.1.jar\META-INF\js\aikau\1.0.8.1\alfresco\renderers\_ActionsMixin.js file.
I see that we do a test to determine if action is allowed in this file :
if (this.filterActions === false || AlfArray.arrayContains(this.allowedActions, action.id))
On firebug i see that my costum action is not in the allowedActions object. My question is why ?
I think that actions wich have not permission are always allowed to all users. Am I right ?
What can i do to allow this action et make it visible on faceted search result page?
Thank you in advance.
You need to write an extension module which is described here: https://forums.alfresco.com/comment/159331#comment-159331.
In the JavaScript code you need to get the widget id of MERGED_ACTIONS and add your customAction to the array of allowdActions and define it in CustomActions.
This is the Aikau code from the link, probably it has been updated in the newer Alfresco version. So you need to extend this within your extension module.
You can probably just use org\alfresco\share\pages\faceted-search as your <sourcePackageRoot> in the module.
widgets: [{
id: "MERGED_ACTIONS",
name: "alfresco/renderers/Actions",
config: {
filterActions: true,
mergeActions: true,
allowedActions: ["folder-manage-rules", "folder-download", "folder-view-details", "CUSTOM3"],
customActions: [{
id: "CUSTOM3",
label: "Custom Action 3",
icon: "document-delete",
index: "10",
publishTopic: "DELETE_ACTION_TOPIC",
type: "javascript"
}],
widgetsForActions: [{
name: "alfresco/renderers/actions/ManageAspects"
}]
}
}]
The Document Library (at least up until Alfresco Share 5.1) is built with YUI, whereas the search page is built using Aikau. At the time of writing there is not yet parity of action handling between the search page and the Document Library, and the process of adding actions is very different.
In order to get your custom action to display in the faceted search page you'll need to do a couple of things:
Extend the search page to update the configuration for the "alfresco/search/AlfSearchResult" (it has the id "FCTSRCH_SEARCH_RESULT") to add your custom actions to the "additionalDocumentAndFolderActions" array (see http://dev.alfresco.com/resource/docs/aikau-jsdoc/AlfSearchResult.html)
Your custom action will publish a topic, so you need to create a new service to subscribe to that topic to perform the action. You will need to further extend the faceted search page so that your service is included on the page.
I'm paraphrasing from our latest blog the method we've used for this.
Our use case was we had existing actions in the document library view we didn't want to have to recreate, with standard configuration xml.
The first step is to create a Share Extension Module to add a Javascript controller in web-extensions/site-data/extensions/example.xml:
<extension>
<modules>
<module>
<id>Example Service</id>
<version>1.0</version>
<auto-deploy>true</auto-deploy>
<customizations>
<customization>
<targetPackageRoot>org.alfresco.share.pages.faceted-search</targetPackageRoot>
<sourcePackageRoot>com.parashift.example</sourcePackageRoot>
</customization>
</customizations>
</module>
</modules>
</extension>
This will load some extra javascript, allowing you to adjust the widget config.
Create a file in web-extension/site-webscripts/com/parashift/example/faceted-search.get.js (or whatever package name you've used in sourcePackageRoot), add in a file called faceted-search.get.js with the following contents:
var searchResultPage = widgetUtils.findObject(model.jsonModel.widgets, "id", "FCTSRCH_SEARCH_RESULT");
if(searchResultPage != null) {
searchResultPage.config = {
enableContextMenu : false,
mergeActions : true,
additionalDocumentAndFolderActions : ["example-action"]
}
}
model.jsonModel.widgets.push({
id: "EXAMPLE_LISTENER",
name: "parashift/action/example"
});
This will:
Add example-action to the list of actions in the search results. This should already be a configured action in some share-config.xml file.
Add a new listener widget for you to listen to when the action button is clicked.
Add a file for your listener widget: META-INF/parashift/action/example.js
define(["dojo/_base/declare",
"dijit/_WidgetBase",
"alfresco/core/Core"
],
function(declare, _Widget, Core) {
return declare([_Widget, Core], {
postCreate: function () {
this.alfSubscribe("ALF_SINGLE_DOCUMENT_ACTION_REQUEST", lang.hitch(this, this._onPayloadReceive));
},
_onPayloadReceive: function (payload) {
if(payload.action.id == "example-action") {
this.alfLog("log", "Received action, handling accordingly");
.......
}
}
});
});
This code will listen for ALF_SINGLE_DOCUMENT_ACTION_REQUEST and execute the _onPayloadReceive function. In this function we filter to the example-action and execute any custom code.
The payload variable will include document and action objects. Using Debug Logging you can see what their shape is.
This is roughly equivalent to the old YUI method:
YAHOO.Bubbling.fire("registerAction", {
actionName: "onExampleAction",
fn: function(file) {
console.log("Received action, handling accordingly");
....
}
});
How can I change locale after the plugin has been applied?
Let say I have "en_US" locale assigned. Now I want to change it on runtime.
I tried to re-apply plugin to element:
$(element).formValidation({locale: 'es_ES',....});
But no effect. Any idea?
How can I refresh the view?
EDIT: 2015-06-18
Before you follow the solution bellow (step 1 & step 2 (option 3)), make sure that you downloaded the i18n add-on from here, this add-on will help you define messages in different languages.
Include it and then use it as following:
$(form).formValidation({
framework: '...',
icon: {
// ...
},
addOns: {
i18n: {}
},
fields: {
// ...
}
});
For more information, see http://formvalidation.io/addons/i18n/
This is how to solve your problem:
Include the language file es_ES.(min.)js after including formvalidation.(min.)js.
Set the locale:
Option 1: Use the locale option as you provided in your question.
Option 2: You can add the attribute data-fv-locale="es_ES" to your form.
Option 3: Use the setLocale method:
$('#yourFormId').formValidation('setLocale', 'es_ES');
NOTES:
the setLocale method is not documented, to see its usage see
the example here http://formvalidation.io/addons/i18n/.
Option 1 & 2 should be used before you initialize the plugin and without using the i18n add-on.
Option 3 after initialization.
I've seen similar posts around the web and nothing anyone has suggested works for me. I'm really faced with the choice of dumping one or the other it seems at this point.
This "Getting Started with SignalR and MVC 4 tutorial":
http://www.asp.net/signalr/overview/getting-started/tutorial-getting-started-with-signalr-and-mvc-4
says you need two script includes to make signalR work:
<!--Reference the SignalR library. -->
<script src="~/Scripts/jquery.signalR-1.0.1.js"></script>
<!--Reference the autogenerated SignalR hub script. -->
<script src="~/signalr/hubs"></script>
I'm at a loss as to how to make the second one, the autogenerated SignalR hub script, happen in require.js. Unless I'm missing something there just doesn't seem to be a viable require.js syntax for inclusion of autogenerated scripts. Without it you get this error at line 159 of jquery.signalR-1.1.2.js:
"JavaScript runtime error: SignalR: Error loading hubs. Ensure your hubs reference is correct, e.g. "
The code at that point in jquery.signalR is doing this:
signalR.hub = {
start: function () {
// This will get replaced with the real hub connection start method when hubs is referenced correctly
throw new Error("SignalR: Error loading hubs. Ensure your hubs reference is correct, e.g. <script src='/signalr/hubs'></script>.");
}
};
Has anyone actually made this autogenerated script thing happen via require.js?
Been studying this a bit more. Let me add some detail:
I'm using this approach - Structuring scalable client side applications: (http://johndavidmathis.wordpress.com/2013/04/23/structuring-scalable-client-side-applications/) to make a more scalable structure. Second part in that series "Permit modules to utilize multiple files and a logical folder structure" http://johndavidmathis.wordpress.com/2013/04/23/structuring-scalable-client-side-applications/ has me splitting my actual signalr code out into a separate Marionette chat module (separate from my main app.js file) to achieve a better file structure. I really like this approach. The rest of my project is set up like this now and it really is showing benefits when it comes to finding code. I think that extra split is where I'm stuck. Can't seem to get that second dependency, the autogenerated script, into that separate chat module file. I'm still studying this but it looks like this to me at this point. require.js gets the dependency into my Marionette app:
require(["marionette","handlebars", "signalr", "signalr.hubs"], function (Marionette) {
window.App = new Marionette.Application();
App.addRegions({
headerRegion: "#header",
contentRegion: "#content",
footerRegion: "#footer",
});
require(["modules/main/loader", "modules/chat/loader"], function () {
App.start();
});
})
If I want chat that dependency to make its way further into the app, into the chat module in another file?
Something like?
define(dependencies,
function () {
App.module("ChatModule", function (ChatModule, App, Backbone, Marionette, $, _, "signalr.hubs", "signalr.hubs") {
// SignalR Proxy created on the fly
var chat = $.connection.chatHub;
// Start the connection
$.connection.hub.start();
//more chat code...
An update:
The answer below does work in my dev environment. But it does not work when I publish the code to a real production server.
When the code is published to a real production server (IIS 6.1 on Windows Server Enterprise 2008 R2) the browser console once again shows a "404" for the autogenerated reference.
Specifically, the console shows the "?" is being added into the reference path before ".js", like this...
http://mydomain.com/myapp/Scripts/application/signalr/hubs?.js...
Tried taking the "?" out but then it removes my app name from the path, like this...
http://mydomain.com/signalr/hubs.js.
I think what would get me there is the first one, without the "?", like...
http://mydomain.com/myapp/Scripts/application/signalr/hubs.js
I'm just not seeing how to make that happen.
FINAL UPDATE:
Final piece of the puzzle for production server is the site's virtual directory. Here's final code that worked for me. Thanks Raciel R for your help:
requirejs.config({
paths: {
//core
"jquery": "jquery-1.9.1",
"signalr": "jquery.signalR-1.1.2",
"signalr.hubs": "/productionservervirtualdirectory/signalr/hubs?"
},
shim: {
"jquery": {exports: "$"},
"signalr": { deps: ["jquery"] },
"signalr.hubs": { deps: ["signalr"] }
});
//Then all you have to do is to make signalr.hubs required in your modules. Ie:
require(["signalr.hubs"], function(){
//your code here
});
requirejs.config({
paths: {
//core
"jquery": "jquery-1.9.1",
"signalr": "jquery.signalR-1.1.2",
"signalr.hubs": "/signalr/hubs?"
},
shim: {
"jquery": {exports: "$"},
"signalr": { deps: ["jquery"] },
"signalr.hubs": { deps: ["signalr"] }
});
Then all you have to do is to make signalr.hubs required in your modules. Ie:
require(["signalr.hubs"], function(){
//your code here
});
I set up RequireJS successfully using #raciel-r's solution but I was still having problems with other JavaScript modules like karma that were also confused by the dynamic proxy. I converted the signalr proxy to a static file and used that with RequireJS instead:
Import Microsoft.AspNet.SignalR.Utils
Run packages/Microsoft.AspNet.SignalR.Utils.2.X.X/tools/signalr.exe
ghp /path:my/bin /o:path/to/scripts/server.js where /my/bin is the directory containing the assemblies with your SignalR Hubs.
Replace your reference in to /signalr/hubs with server:
requirejs.config({
paths: {
// ...
"signalr.hubs": "path/to/scripts/server"
},
// ....
If you are using the convenience methods of the generated proxy, you will also have to rewrite them (see How to create a physical file for the SignalR generated proxy)