I'm struggling to use MyScript inside an Angular 6 project.
I already cloned the following repo from GitHub:
https://github.com/MyScript/web-integration-samples/tree/master/angular-integration-examples
Installed all the dependencies with npm install.
Changed this line of code:
import * as MyScriptJS from 'myscript/src/myscript';
for:
import * as MyScriptJS from 'myscript/dist/myscript.min.js';
Because there wasn't any file called myscript inside src folder.
Finally I edited this piece of code that registers a new editor:
this.editor = MyScriptJS.register(this.domEditor.nativeElement, {
recognitionParams: {
type: 'MATH',
protocol: 'WEBSOCKET',
apiVersion: 'V4',
server: {
scheme: 'https',
host: 'cloud.myscript.com',
applicationKey: 'xxx',
hmacKey: 'xxx',
},
},
});
And yes, I added both keys, took them from the Dashboard.
After this all I can see is a white canvas where I can draw but nothing happens, there is no other box to show any results.
This is a screen capture:
Thanks for any help!
Related
I am using html2pdf library to generate PDF of my HTML. On my local machine below code is working fine but when I deployed the same on the server the PDf is generating without CSS styles. Below is my Code. Kindly help me to resolve this issue.
window.onload = function () {
document.getElementById("generatePdf").addEventListener("click", () => {
const cvitae = this.document.getElementById("configuration-area-c");
var opt = {
filename: "morsewatchment-configurator.pdf",
image: { type: "jpeg", quality: 0.98 },
html2canvas: { scale: 2 },
jsPDF: { unit: "in", format: [12, 6], orientation: "portrait" },
};
//html2pdf().from(cvitae).set(opt).save();
});
};
This is a known issue when working with html2pdf.js, you can read more here, also issue on github.
The obvious approach to fix this is to include all your needed css rules in a style tag directly in the html page.
Also you can go to this branch on Github look into the /dist/ directory and pull out whichever files your project relies on and use it.
Or if you are using npm run :
npm install eKoopmans/html2pdf.js#bugfix/clone-nodes-BUILD
I want to follow the instruction :https://strapi.io/blog/building-a-static-website-using-gatsby-and-strapi#allowaccess
But encounter Error: Request failed with status code 404
Node.js version:
v10.13.0
npm version:
6.14.6
Strapi version:
3.1.0-alpha.5
Operating system:
mac
Which example is causing problem?
strapi.io/blog/building-a-static-website-using-gatsby-and-strapi#allowaccess
What is the current behavior?
Graphql Query doesn't work.
the steps to reproduce the problem:
$ gatsby develop
success open and validate gatsby-configs
success load plugins - 2.011s
success onPreInit - 0.004s
success initialize cache - 0.018s
success copy gatsby files - 0.102s
success onPreBootstrap - 0.017s
success createSchemaCustomization -
info Starting to fetch data from Strapi
info Starting to fetch data from Strapi
info Starting to fetch data from Strapi
ERROR #11321 PLUGIN
"gatsby-source-strapi" threw an error while running the sourceNodes lifecycle:
Request failed with status code 404
Error: Request failed with status code 404
createError.js:16 createError
[portfolio_v4]/[gatsby-source-strapi ]/[axios]/lib/core/createError.js:16 :15
settle.js:18 settle
[portfolio_v4]/[gatsby-source-strapi ]/[axios]/lib/core/settle.js:18:12
http.js:202 IncomingMessage.handleSt reamEnd
[portfolio_v4]/[gatsby-source-strapi ]/[axios]/lib/adapters/http.js:202:1 1
task_queues.js:84 processTicksAndRej ections
internal/process/task_queues.js:84:2 1
What is the expected behavior?
What is the expected behavior?
Doesn't work when I try to get from gatsby
http://localhost:8000/___graphql
There is no method allStrapiblogs on http://localhost:8000/___graphql
Please share your gatsby-config.js screen, the gatsby-source-strapi section.
this could be caused by the collectionTypes/singleTypes in the gatsby-source-strapi, or your USERS & PERMISSIONS PLUGIN (roles) in strapi is not set
I've changed contentTypes to collectionTypes
Also there is a new version (v4) of strapi and to make gatsby work with this new version, you need to use the following gatsby-source plugin.
npm install --save gatsby-source-strapi#relate-app/gatsby-source-strapi
This plugin wants a token which you can create at http://localhost:1337/admin/settings/api-tokens
before testing the new plugin make sure to clean out your gatsby cache by using the following command:
gatsby clean
{
resolve: "gatsby-source-strapi",
options: {
apiURL: "http://localhost:1337",
collectionTypes: ["Article", "User", 'Test'],
// Extract images from markdown fields.
markdownImages: {
typesToParse: {
Article: ["body"],
ComponentBlockBody: ["text"],
},
},
// Only include specific locale.
locale: "en", // default to all
// Include drafts in build.
preview: true, // defaults to false
// Use application token.
token:
'Your-strapi-api-token',
// Add additional headers.
headers: {},
},
},
There has also been a article about a new plugin, but this refers to another one which didn't work for me.
https://strapi.io/blog/introducing-the-new-gatsby-source-strapi-plugin
When added "${DOMAIN}/api" on apiURL it worked for me with strapi v4
apiURL: "http://localhost:1337/api",
{
resolve: "gatsby-source-strapi",
options: {
apiURL: "http://localhost:1337/api",
collectionTypes: [`messages`],
// Extract images from markdown fields.
markdownImages: {
typesToParse: {
Article: ["body"],
ComponentBlockBody: ["text"],
},
},
// Only include specific locale.
locale: "en", // default to all
// Include drafts in build.
preview: true, // defaults to false
// Use application token.
token: "token",
// Add additional headers.
headers: {},
},
},
This code solved my problem.
{
resolve:'gatsby-source-strapi',
options:{
apiURL:'*http://localhost:1337/admin/content-manager/collectionType/api::*',
collectionTypes: ['propiedads','paginas','categorias'],
queryLimit:1000
}
}
While going through the ember 3.6 super-rentals tutorial I ran into a few snags adding the ember-simple-leaflet-maps.
I couldn't get the environment variable LEAFLET_MAPS_API_KEY to set.
https://guides.emberjs.com/release/tutorial/service/
To my understanding, the tutorial has you set an environment variable on your operating system? Maybe I'm wrong in thinking that, but I wanted a way to just add the variable to my project /config/environment.js
Answer from OP:
After the addon was installed:
ember install ember-simple-leaflet-maps
I opened the geocode.js file to see how the service was injecting the api key. Path is:
node_modules\ember-simple-leaflet-maps\addon\services\geocode.js
The line of code was:
let accessToken = getOwner(this).resolveRegistration('config:environment')['ember-simple-leaflet-maps'].apiKey;
From there I just added the lookup it was looking for to my file /config/environment.js
let ENV = {
modulePrefix: 'super-rentals',
environment,
rootURL: '/',
locationType: 'auto',
'ember-simple-leaflet-maps': {
apiKey: 'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx'
},
EmberENV: {
FEATURES: {
// Here you can enable experimental features on an ember canary build
// e.g. 'with-controller': true
},
EXTEND_PROTOTYPES: {
// Prevent Ember Data from overriding Date.parse.
Date: false
}
},
APP: {
// Here you can pass flags/options to your application instance
// when it is created
}
};
Rebuild the project and serve, my maps are now showing up
ember build
ember serve
I am running the strapi project and need to change strapi login screen logo. I have replaced logo in plugins > user-permissions > admin > src > assets > images > logo_strapi.png and running the command npm run setup --plugins but after that it's not loading content-type data it's just giving me loader only
Logo you can overvrite in path -> ./admin/admin/src/assets/images/logo-strapi.png
rember to rebuild project by npm run build command
The AdminUI package source can be easily found in ./node_modules/strapi-admin/src/.
For example, to change the top-left displayed admin panel's color, ./node_modules/strapi-admin/admin/src/components/LeftMenuHeader/styles.scss should be overriden by ./admin/src/components/LeftMenuHeader/styles.scss with your own styles.
Thus, you are replacing the files that would normally be in node_modules/strapi-admin/admin/src and directing them to admin/src/some/file/path.
To apply your changes you need to rebuild your admin panel
npm run build
Source
https://github.com/strapi/strapi/issues/3604
https://github.com/strapi/strapi/pull/3609/files
Since this question is a bit older... In the current version of Strapi (V4) changing the icon of the left menu works a bit differently (the presented solution is tested with 4.0.6). This solution also works for changing the Logo at the Login Screen and the favicon...
In your project create an extension folder under ./yourProjectName/src/admin/
Within it you can place a new image that should be your new Menu Logo i.e. 'new-menu-logo.png'
Furthermore create an app.js file under ./yourProjectName/src/admin/ where you then import the image of the extension folder. Example:
// path: ./yourProjectName/src/admin/app.js
import AuthLogo from './extensions/my-new-logo.png';
import MenuLogo from './extensions/new-menu-logo.png';
// import favicon from './extensions/favicon.ico';
export default {
config: {
// Replace the Strapi logo in auth (login) views
auth: {
logo: AuthLogo,
},
// Replace the favicon
// head: {
// favicon: favicon,
// },
// Add a new locale, other than 'en'
locales: ['fr', 'de'],
// Replace the Strapi logo in the main navigation
menu: {
logo: MenuLogo,
},
// Override or extend the theme
theme: {
colors: {
alternative100: '#f6ecfc',
alternative200: '#e0c1f4',
alternative500: '#ac73e6',
alternative600: '#9736e8',
alternative700: '#8312d1',
danger700: '#b72b1a'
},
},
// Extend the translations
translations: {
fr: {
'Auth.form.email.label': 'test',
Users: 'Utilisateurs',
City: 'CITY (FRENCH)',
// Customize the label of the Content Manager table.
Id: 'ID french',
},
},
// Disable video tutorials
tutorials: false,
// Disable notifications about new Strapi releases
notifications: { release: false },
},
bootstrap() {},
};
Finally rebuild the AdminUI with i.e. yarn build
Also described at the official docs: https://docs.strapi.io/developer-docs/latest/development/admin-customization.html#configuration-options
Per Strapi's documentation, to change the top-left displayed admin panel's logo, add your custom image at ../admin/src/assets/images/logo-strapi.png.
You have to create these folders if they don't exist ../admin/src/assets/images/ to override the admin's existing styling.
According to the doc https://strapi.io/documentation/developer-docs/latest/development/admin-customization.html#customization-options,
you can modify the (logo and css). This is done by writing folders and files in your project folder. These files will overwrite the node module ones.
So, for the logo, in yourProjectName you can create a file at this path -> ./yourProjectName/admin/src/assets/images/logo-strapi.png
This file should overwrite the initial strapi logo.
rember to rebuild project by npm run build command
I FIGURED IT OUT!
1.) Go Here https://github.com/strapi/strapi/blob/master/packages/core/admin/admin/src/translations/en.json
This shows all the spot where text is and what is currently is.
Here is a picture of the en.json file on the original github.
https://i.stack.imgur.com/Lbef9.jpg
2.) To change text
Go to your own Strapi backend. Then go to config > src > admin > app.js
If you don't have an app.js use my code as template to start.
export default {
config: {
// Override or extend the theme
theme: {
colors: {
alternative100: "#f6ecfc",
alternative200: "#e0c1f4",
alternative500: "#ac73e6",
alternative600: "#9736e8",
alternative700: "#8312d1",
danger700: "#b72b1a",
},
},
// // Extend the translations
translations: {
en: {
"app.components.LeftMenu.navbrand.title": "Publishpen",
"app.components.LeftMenu.navbrand.workplace": "Dashboard",
"Auth.form.welcome.title": "Frick ya! White label branding!!!:)",
},
fr: {
"Auth.form.email.label": "test",
Users: "Utilisateurs",
City: "CITY (FRENCH)",
// Customize the label of the Content Manager table.
Id: "ID french",
},
},
// Disable video tutorials
tutorials: false,
// Disable notifications about new Strapi releases
// notifications: { release: false },
},
bootstrap() {},
};
Here is my folder structure
https://i.stack.imgur.com/JQA2v.png
If you change the text in the translations you will change the text in the Strapi admin portal! Just look in the en.json (in the original github) for the text you see on the admin page and then update the app.js
translations: {
en: {
"app.components.LeftMenu.navbrand.title": "Publishpen",
"app.components.LeftMenu.navbrand.workplace": "Dashboard",
"Auth.form.welcome.title": "Frick ya! White label branding!!!:)",
}
}
3.) You MUST re-build npm run build or yarn build
If your project doesn't rebuild then it will not show on the admin portal.
To customize the logo Strapi. Please follow the document bellow:
Step 1: Create file app.js in path : ./src/admin.
If it's exited please ignore this step.
Step 2: Create a folder to store new logo and then copy new logo to here: ./src/admin/extensions
You can follow structure above
Step 3: Replace by new logo by edit the file app.js look like bellow:
// path: src/admin/app.js
import Favicon from './extensions/new-favicon.ico';
import MenuLogo from './extensions/new-logo.png'
export default {
config: {
// replace favicon with a custom icon
head: {
favicon: Favicon,
},
// replace logo
menu: {
logo: MenuLogo,
},
}
}
That's all. hope it can help you!
You need to change the image at ./plugins/users-permissions/admin/src/assets/images/logo_strapi.png.
HTH
I'm very new to Strapi and I was searching exactly how to achieve this. As per the documentation you need to change the image on ./node_modules/strapi-admin/admin/src/assets/images/logo-strapi.png and run build the administration panel with npm run setup
Since this question is over a year old now, and might be confusing for some beginners, i think i will answer how i went upon to change it.
This answer uses yarn (Do note that the core of the above answers remains same)
Say your project name is my-project, Navigate to my-project/node_modules/strapi-admin/admin/src/assets/images
You will find a file called logo-strapi.png (there will be another file with almost similar file name, make sure its a - and not _ ) and replace it with your desired logo. The approx dimens of the old logo as 1100px x 300px , so make sure your new logo also is of similar dimens.
Once you are done, navigate back to my-project directory and terminate any running instance of strapi. If you are on windows, make sure you close all the file explorer windows which might have any of the subfolders of your project open and preferable close any open browser tabs of your admin panel (if there are any open instances, it might give an error while re building) .
Now run yarn build and after it finishes building, start your strapi instance in production or development mode as required with yarn start or yarn develop
I am trying to use mup to deploy a meteor app to my DigitalOcean droplet.
What I have done so far
Followed instructions on "Meteor-Up" website http://meteor-up.com/getting-started.html.
Installed mup via "npm install --global mup"
Created ".deploy" folder in my app directory. Ran "mup init".
Configured file "mup.js" file for my app, ran "mup setup".
Here is where I ran into an error. Upon running "mup setup", I am hit with the following error. [
What I tried:
I suspected that there could have been an issue with my syntax when configuring the mup.js file. After double-checking and not finding any error, I decided to re-install mup, and try running "mup setup" without modifying the "mup.js" file. However, I still receive the same error message.
Furthermore, after running "mup init", I can no longer run "mup" either, as I receive the same error as seen above. I suspect therefore that the issue is with the mup.js file. I have attached the generic version provided by meteor-up below (which still causes the error seen above).
module.exports = {
servers: {
one: {
// TODO: set host address, username, and authentication method
host: '1.2.3.4',
username: 'root',
// pem: './path/to/pem'
// password: 'server-password'
// or neither for authenticate from ssh-agent
}
},
app: {
// TODO: change app name and path
name: 'app',
path: '../app',
servers: {
one: {},
},
buildOptions: {
serverOnly: true,
},
env: {
// TODO: Change to your app's url
// If you are using ssl, it needs to start with https://
ROOT_URL: 'http://app.com',
MONGO_URL: 'mongodb://localhost/meteor',
},
// ssl: { // (optional)
// // Enables let's encrypt (optional)
// autogenerate: {
// email: 'email.address#domain.com',
// // comma separated list of domains
// domains: 'website.com,www.website.com'
// }
// },
docker: {
// change to 'abernix/meteord:base' if your app is using Meteor 1.4 - 1.5
image: 'abernix/meteord:node-8.4.0-base',
},
// Show progress bar while uploading bundle to server
// You might need to disable it on CI servers
enableUploadProgressBar: true
},
mongo: {
version: '3.4.1',
servers: {
one: {}
}
}
};
Any help would be greatly appreciated!
Thank you
The error dialog you posted shows a syntax error at line 10, character 5.
If you take a look:
module.exports = {
servers: {
one: {
// TODO: set host address, username, and authentication method
host: '1.2.3.4',
username: 'root',
// pem: './path/to/pem'
// password: 'server-password'
// or neither for authenticate from ssh-agent
}
^^^ This character
},
It's a closing brace which JS was not expecting. So why was it unexpected, lets move back to the last valid syntax:
module.exports = {
servers: {
one: {
// TODO: set host address, username, and authentication method
host: '1.2.3.4',
username: 'root',
^^^ This character
// pem: './path/to/pem'
// password: 'server-password'
// or neither for authenticate from ssh-agent
}
},
Well, looks like a comma which isn't followed by another key-value pair. Also known as a syntax error.
Take the comma out and things should be fine again!
I faced this same issue today. The problem is that Windows is trying to execute the mup.js file as a JScript script.
Here is the solution from the Meteor Up Common Problems page:
Mup silently fails, mup.js file opens instead, or you get a Windows script error
If you are using Windows, make sure you run commands with mup.cmd instead of mup , or use PowerShell.
That is, instead of mup setup, run mup.cmd setup.