Import Electron (NodeJS) Package into HTML file - javascript

Currently, I am working on a desktop application that allows users to click on buttons to run terminal commands. I have nearly finished making this in electron, though I have run into one issue that I cannot work around.
My application is made up of two files: main.js and index.html. The javascript file displays index.html, includes the needed electron packages, and holds all of the functions called by index.html. One of the packages that I am using is Electron-Preferences. This allows me to create a simple window to store user preferences in a JSON file as well as access and change them. I have one function that allows the user to change one preference on the fly, however, I am having issues calling this function from the index.html file.
In the main.js file, an object called preferences is defined. In my html file, however, it says this object is not defined, thus it cannot run the program (I am including the main.js in the html file through a script src tag). Is there any way to include the preferences object, or some way to restructure the code so that I can call the function from a separate file?
Thank you in advanced!
Function from main.js:
function setNetworkMain(){
const network = preferences.value('blockchain.network');
if(network === "testing"){
preferences.value('blockchain.network', 'main');
}
};
Preferences Object:
const preferences = new ElectronPreferences({
/**
* Where should preferences be saved?
*/
'dataStore': prefLoc,
/**
* Default values.
*/
'defaults': {
'markdown': {
'auto_format_links': true,
'show_gutter': false
},
'preview': {
'show': true
},
'drawer': {
'show': true
},
"blockchain": {
"network": "main"
},
"update": {
"auto_update": true
},
"directory": {
"folder": dataDir
},
},
/**
* If the `onLoad` method is specified, this function will be called immediately after
* preferences are loaded for the first time. The return value of this method will be stored as the
* preferences object.
*/
'onLoad': (preferences) => {
// ...
return preferences;
},
/**
* The preferences window is divided into sections. Each section has a label, an icon, and one or
* more fields associated with it. Each section should also be given a unique ID.
*/
'sections': [
{
'id': 'blockchain',
'label': 'Blockchain Settings',
'icon': 'settings-gear-63',
'form': {
'groups': [
{
'label': 'Blockchain Settings',
'fields': [
{
'heading': 'Blockchain Network',
'content': "<p>Text</p>",
'type': 'message',
},
{
'key': 'network',
'type': 'radio',
'options': [
{'label': 'Main', 'value': 'main'},
{'label': 'Testing', 'value': 'testing'},
],
'help': 'Select which Blockchain you would like to use.'
}
]
}
]
}
},
{
'id': 'update',
'label': 'Update Settings',
'icon': 'square-download',
'form': {
'groups': [
{
/**
* Group heading is optional.
*/
'label': 'Update Settings',
'fields': [
{
'label': 'How would you like to check for updates?',
'key': 'auto_update',
'type': 'radio',
'options': [
{'label': 'Automatically check for updates', 'value': true},
{'label': 'Manually check for updates', 'value': false},
],
'help': 'Note: Automatic updates will be installed automatically.'
},
]
}
]
}
},
{
'id': 'directory',
'label': 'File Directory',
'icon': 'folder-15',
'form': {
'groups': [
{
'label': 'File Directory',
'fields': [
{
'label': 'Blockchain storage directory',
'key': 'folder',
'type': 'directory',
'help': 'Text.'
}
]
}
]
}
},
{
'id': 'about',
'label': 'About',
'icon': 'badge-13',
'form': {
'groups': [
{
'label': 'About',
'fields': [
{
'label': 'description',
'heading': 'Description',
'content': "<p>Text</p>",
'type': 'message',
},
{
'label': 'electron',
'heading': 'Electron',
'content': "<p>https://electronjs.org/</p>",
'type': 'message',
},
]
}
]
}
}
]
});

Related

How to add tooltip in a node using jsMind library?

I want to customize my mind map using jsMind
Currently this is my code:
var mind = { meta: {
name: 'jsMind remote',
author: 'hizzgdev#163.com',
version: '0.2',
},
format: 'node_tree',
data: {
id: 'root',
topic: 'jsMind',
children: [
{
id: 'easy',
topic: 'Easy',
direction: 'left',
children: [
{ id: 'easy1', topic: 'Easy to show' },
{
'id': 'other3',
'background-image': 'ant.png',
'width': '100',
'height': '100',
},
],
},
{
id: 'open',
topic: 'Open Source',
direction: 'right',
children: [
{
'id': 'open2',
'topic': 'BSD License',
'leading-line-color': '#ff33ff',
},
],
}
};
_jm.show(mind);
Any ideas to complete this challenge are welcome.
I tried to execute in the browser but i don't know how to implement that i wanted to do.
EDITED
I have changed the code a made a new line perfectly but a tooltip doesn't appear.
jsMind does not provide a built-in mechanism to display tooltip, but the topic of node can be HTML, so would you like to have a try to add a tooltip to it with HTML? Like that:
var mind = {
// ...
data: {
id: 'root'
topic: '<span title="good">jsMind Example<span>'
}
// ...
}
screenshot of it

I get WARN: IntentDialog - no intent handler found for null when I fill out a form Node.js Bot framework

I am very new to node.js and the bot framework. I created a form in json which is run in my bot. However after filling out the form I get the error
/ - WARN: IntentDialog - no intent handler found for null
I am not sure as to why that is. I am using the .addAttachment to use the card and the session.send(msg) to present the form to the user. However after the form is complete and submitted I get the above error message. Below is the form being used and the code in node.js
var card = {
'contentType': 'application/vnd.microsoft.card.adaptive',
'content': {
'$schema': 'http://adaptivecards.io/schemas/adaptive-card.json',
'type': 'AdaptiveCard',
'version': '1.0',
'body': [
{
'type': 'Container',
'items': [
{
}
]
}
],
'actions': [
// Contact Information Form
{
'type': 'Action.ShowCard',
'title': 'Contact Form',
'card': {
'type': 'AdaptiveCard',
'body': [
{
'type': 'TextBlock',
'text': 'Please enter your name:'
},
{
'type': 'Input.Text',
'id': 'name',
'speak': '<s>Please enter your name</s>',
'placeholder': 'Enter Name',
'style': 'text'
},
{
'type': 'TextBlock',
'text': 'What is your phone number?'
},
{
'type': 'Input.Number',
'id': 'phone',
//'style': 'text'
},
{
'type': 'TextBlock',
'text': 'What is your email address?'
},
{
'type': 'Input.Text',
'id': 'email',
'placeholder': 'Enter Email',
'style': 'text'
}
],
'actions': [
{
'type': 'Action.Submit',
'title': 'Submit',
'data': {
'type': 'submit'
}
}
]
}
},
]
}
};
code in node.js
bot.dialog('Ask for contact info', [
function (session, args) {
if (session.conversationData.amending) {
session.dialogData.nextStep = 'Show summary';
} else {
session.dialogData.nextStep = 'Ask for severity';
}
builder.Prompts.text(session, "Could you please add details of who you’d like us to contact to discuss your bug further?");
var msg = new builder.Message(session)
.addAttachment(card);
session.send(msg);
},
function (session, results) {
session.conversationData.contactInfo = results.response;
session.beginDialog(session.dialogData.nextStep);
}
]);
To receive submit from adaptive card form, you can try to use following waterfall steps:
bot.dialog('form', [
(session, args, next) => {
var card = {
...
};
if (session.message && session.message.value) {
// A Card's Submit Action obj was received
next(session.message.value)
} else {
var msg = new builder.Message(session)
.addAttachment(card);
session.send(msg);
}
},
(session, results) => {
session.send(JSON.stringify(results));
}
])
However, I cannot reproduce the issue WARN: IntentDialog - no intent handler found for null, could you provide your repo for me to have a glance of your whole structure, which is benifit for further analysis.

How to set default value for an array jschema object?

I'm trying to set default value for an array in jschema with swagger. Below is the example schema.
'Myobj': {
'type': 'object',
'title': 'Myobj',
'description': 'Some text',
'properties': {
'outputForms': {
'type': 'array',
'description': 'Some text',
'default': 'two',
'items': {
'type': 'string',
'enum': ['one','two'],
},
'maxItems': 4,
'uniqueItems': true,
'additionalItems': false
}
}
}
This does not work,what am I doing wrong ?
I will be grateful for any help.
Change
'default': 'two',
to
'default': ['two'],
The square brackets [] are used to denote an array.
Also, remove additionalProperties. In Swagger, the meaning of this key is different - it's an object (not a boolean) and is used to define a map / dictionary.

JSON tv4 object valid if true and if other object is present

is possible to validate JSON, if value of object is true, then this object is valid, and if Obj2.included == true is valid, if Obj1.included == true ?
This is small piece of schema:
'attachments': {
'type': 'object',
'properties': {
'ZalA': {
'type': 'object',
'properties': {
'included': {
'type': 'boolean'
},
'version': {
'type': 'integer'
}
},
'required': [
'included',
'version'
]
},
'ZalB': {
'type': 'object',
'properties': {
'version': {
'type': 'integer'
},
'included': {
'type': 'boolean'
},
'required': [
'included',
'version'
]
}
}
}
}
I would like to check:
if ZalA.included == true, then valid.
if ZalA.included == true and ZalB.included == true, then valid.
if ZalA.included == false and ZalB.included == true, then invalid.
Is it possible to check these constraints with tv4 JSON validator ?
I've got a solution for you. But first of all you had a little mistake in your schema, because of required-property that was within properties:
'ZalB': {
'type': 'object',
'properties': {
'version': {
'type': 'integer'
},
'included': {
'type': 'boolean'
},
'required': [
'included',
'version'
]
}
}
When you use it you have to define it outside before or after properties. As you have done this with ZalA :) otherwise it does not work.
Now to your answer, I did a little experiment with this very interesting validator and came up with this:
// schema to be used for validating
var schema = {
'type': 'object',
'properties': {
'ZalA': {
'type': 'object',
'properties': {
'included': {
'type': 'boolean',
'enum': [
true
]
},
'version': {
'type': 'integer'
}
},
'required': [
'included',
'version'
]
},
'ZalB': {
'type': 'object',
'properties': {
'version': {
'type': 'integer'
},
'included': {
'type': 'boolean',
'enum': [
true
]
}
},
'required': [
'included',
'version'
]
},
'required': [
'ZalA'
],
}
};
// data to be checked against
var data = {
'ZalA': {
'version': 1,
'included': true
},
'ZalB': {
'version': 2,
'included': true
}
}
tv4.validateResult(data, schema); // Object { missing=[0], valid=true, error=null}
Schema has to be configured so that it matches your check-list:
if ZalA.included == true, then valid.
'required': [
'ZalA'
],
Requires ZalA at the end of schema after properties so that ZalA has to be present, so you can repeat this option as often as you want in each level. But this is not enougth to fulfill your check-list. Next configurations are:
'required': [
'included',
'version'
]
plus
'included': {
'type': 'boolean',
'enum': [true]
},
included-property (and actually version-property as well, it was already in your question) of ZalA must be present and true so that ZalA can be considered valid. You can define an array of different types to check whether the property has a certain value or you can use pattern-option.
These configurations are applied for ZalB too but with one difference:
'required': [
'ZalA'
],
Only ZalA is required and not ZalB at the end.
And we are done! With these configurations all your next conditions are fulfilled:
if ZalA.included == true and ZalB.included == true, then valid.
if ZalA.included == false and ZalB.included == true, then invalid.
And if ZalB.included is granted to be false as well as true then just do this:
'enum': [
true, false
]
Or omit enum-option completely so that it must be a boolean on the first place.
This is really a good validator. Thanks for your question, I'll use it for furture projects.
P.S. You may can spare yourself to define a second schema for ZalB and just referencing(using $ref) to the schema for ZalA, but I did not test this. On the other hand you could use this little schema:
var schema = {
'type': 'object',
'properties': {
'included': {
'type': 'boolean',
'enum': [
true
]
},
'version': {
'type': 'integer'
}
},
'required': [
'included',
'version'
]
};
And use it in this way:
// a bundle of objects to be checked
var data = [{
'version': 1,
'included': true
},{
'version': 2,
'included': true
}];
// iterate through each object
for(var i=0; i < data.length;i++){
var obj = data[i];
// validate each object
var result = tv4.validateResult(obj, schema);
if(!result.valid){
console.log("not valid: ",result.error);
}
}
I just speak for myself but for me this is the most important side of the validator-documentation. Because it contains all options you can define for certain properties to be valided:
http://json-schema.org/latest/json-schema-validation.html

CKeditor adding class to img tag

I am trying to add a class to any inserted img tag in CKeditor. I have tried various ways but can't seem to figure out how the setting of this plugin works. Whilst there are tonnes of documents, it only mentions that a code needs to be added, but not where it should be added, there are loads of files.
I tried adding it to the bottom on config.js
/**
* #license Copyright (c) 2003-2014, CKSource - Frederico Knabben. All rights reserved.
* For licensing, see LICENSE.md or http://ckeditor.com/license
*/
CKEDITOR.editorConfig = function( config ) {
// Define changes to default configuration here.
// For complete reference see:
// http://docs.ckeditor.com/#!/api/CKEDITOR.config
// The toolbar groups arrangement, optimized for two toolbar rows.
config.toolbarGroups = [
{ name: 'clipboard', groups: [ 'clipboard', 'undo' ] },
{ name: 'editing', groups: [ 'find', 'selection', 'spellchecker' ] },
{ name: 'links' },
{ name: 'insert' },
{ name: 'forms' },
{ name: 'tools' },
{ name: 'document', groups: [ 'mode', 'document', 'doctools' ] },
{ name: 'others' },
'/',
{ name: 'basicstyles', groups: [ 'basicstyles', 'cleanup' ] },
{ name: 'paragraph', groups: [ 'list', 'indent', 'blocks', 'align', 'bidi' ] },
{ name: 'styles' },
{ name: 'colors' },
{ name: 'about' }
];
// Remove some buttons provided by the standard plugins, which are
// not needed in the Standard(s) toolbar.
config.removeButtons = 'Underline,Subscript,Superscript';
// Set the most common block elements.
config.format_tags = 'p;h1;h2;h3;pre';
// Simplify the dialog windows.
config.removeDialogTabs = 'image:advanced;link:advanced';
config.extraPlugins = 'confighelper';
config.stylesSet = 'my_styles';
};
CKEDITOR.stylesSet.add( 'my_styles', [
{ name: 'Custom Image', element: 'img', attributes: { 'class': 'myClass' }}
]);
That didn't work
So I tried adding it to the actual html page
<script>
CKEDITOR.stylesSet.add( 'my_styles', [
{ name: 'Custom Image', element: 'img', attributes: { 'class': 'myClass' }}
]);
</script>
That didn't work either
Reading their docs I can't make any sense of it http://docs.ckeditor.com/#!/guide/dev_howtos_styles
How does one add a class to any img tags added through the editor?
I'm not using CKEDITOR, but the problem could be, that the stylesSet is not declared on CKEDITOR call, since its defined later.
Try moving CKEDITOR.stylesSet.add prior to editorConfig.
Alternatively put your styles into the first code block:
CKEDITOR.editorConfig = function( config ) {
...
...
config.stylesSet = [
{ name: 'Custom Image', element: 'img', attributes: { 'class': 'myClass' }}
];
};
</script>
There are also some more Docs about the usage http://docs.ckeditor.com/#!/api/CKEDITOR.config-cfg-stylesSet

Categories