I am using this new feature of draggable hotspot in Pannellum :
var dragHandler = function (e) {
console.log(e)
}
"hotSpots": [
{
"pitch": 5,
"yaw": 11,
"type": "info",
draggable:true,
"dragHandleFunc": dragHandler
},
Dragging works fine but I cannot get dragHandler to be called. I am using the latest plugin files available on github.
Related
I'm using tip-tap editor for the purpose of making a messaging feature required in a project I'm working. Everything seems to work in my favor except for the fact that there is no native option that I can find to upload files in it other than images.
Is it even possible to upload files in Tip-Tap editor for react?
tiptap editor doesn't support files only images, and on fast search there's no third party extensions to do it ether.
Since tiptap does not have support for files and what you will use it for is messaging, I share with you a solution that I implemented for a chat.
It consists of adding a button to upload the files in this way:
Ejemplo del botón
then the button can be called using the shortcuts offered by the editor
const EventHandler = Extension.create({
name: "eventHandler",
addProseMirrorPlugins() {
return [
new Plugin({
key: new PluginKey("eventHandler"),
props: {
handleKeyDown: (view, event) => {
if (event.metaKey || event.ctrlKey) {
// Open files
if (event.key === "o") {
event.preventDefault();
let plusMenuFile = document.getElementById("plus-menu-tools-item-file");
if (plusMenuFile) {
plusMenuFile.click();
} else {
document.getElementById("MediaFilesText-input-file").click();
}
}
// ...
}
}
}
})
];
}
});
const editor = useEditor({
extensions: [
StarterKit,
EventHandler,
//...
]
});
Here then I leave the example of how I use it in the tiptap editor: https://codesandbox.io/s/adoring-grothendieck-fu82ju
I am using Capacitor to generate both the IOS and Android apps (not using Iconic) - this works well, but we are trying to implement IAP (for IOS only at this stage) and cannot figure it out.
I have followed various guides (https://ionicframework.com/docs/native/in-app-purchase-2 and https://purchase.cordova.fovea.cc/ and https://capacitorjs.com/docs/guides/in-app-purchases) but simply cannot get it working with React (not React Native)
Can someone point me in the right direction, or provide sample code?
You didn't describe what is going wrong, but here's a basic configuration that works for me on iOS.
I'm only including the part about the store:
index.tsx
import { IAPProduct, InAppPurchase2 } from '#ionic-native/in-app-purchase-2';
const startStoreEventListeners = () => {
if (isPlatformMobile()) {
document.addEventListener(
'deviceready',
() => {
const store = InAppPurchase2;
// Needed to use IAP + cordova plugins.
// Set debug messages.
// Default.
store.verbosity = store.QUIET;
// store.verbosity = store.DEBUG;
store.register([
{
id: subMonthly,
type: store.PAID_SUBSCRIPTION,
},
{
id: subAnnual,
type: store.PAID_SUBSCRIPTION,
},
]);
// Upon approval, verify the receipt.
store.when(subMonthly).approved((product: IAPProduct) => {
product.verify();
});
store.when(subAnnual).approved((product: IAPProduct) => {
product.verify();
});
// Upon receipt validation, mark the subscription as owned.
store.when(subMonthly).verified((product: IAPProduct) => {
product.finish();
});
store.when(subAnnual).verified((product: IAPProduct) => {
product.finish();
});
// Track all store errors
store.error((err: Error) => {
debugLog('Store Error', JSON.stringify(err));
});
// https://billing-dashboard.fovea.cc/setup/cordova
store.validator =
'https://validator.fovea.cc/v1/validate?appName=secret';
store.refresh();
startIonic();
},
false,
);
} else {
startIonic();
}
};
startStoreEventListeners();
serviceWorker.unregister();
Note that #ionic-native packages are deprecated and need to be converted.
I am exporting an array of objects to react-csv from a table in my UI but the last row is missing in the downloaded CSV file.
I select some rows in the table which contain the records as shown below (there are 3 selected in this example):
I confirmed that the data is attached in the CSVLink tag data property
I confirmed that the data is there via a console.log before I click the export button in the UI.
But the resulting CSV download is missing the last selected item. This happens no matter how many items are selected. The last one is always missing even though the array is correctly built and attached to the CSVLink data property.
Am I missing something here? How can I fix this issue? I cannot find any similar issues on the interweb.
The react-csv package has several open issues with download filenames and
updating state correctly. This resulted in the last item that was updated in my state to not be registered when the download was initiated. You can see one of the issues here (there are more that are specific to state with downloads): https://github.com/react-csv/react-csv/pull/137
I couldn't find any solution using the package so I abandoned it and wrote my own version that fully works. You can find it as a Gist here if anyone needs it: https://gist.github.com/cburkhardtBB/14ba0e3a37c2cef83eaea79e8c93092d
Here is the example code just in case someone runs into a similar issue with either a missing row using CSVLink or not being able to get the CSVDownload filename to work.
import { zipObject } from 'lodash';
export const CSVExport = csvData => {
const { items, headers, filename } = csvData;
// use headers if available, if not, use the key names for headers
// create same type with zipped object
const headerKeys = Object.keys(items[0]);
const rowHeader = headers || zipObject(headerKeys, headerKeys);
const rows = [rowHeader, ...items];
const csv = convertRowsToCSV(rows);
const csvFileName = filename + '.csv' || 'export.csv';
initiateDownload(csv, csvFileName);
};
const convertRowsToCSV = rowData => {
return rowData.map(data => Object.values(data).join(',')).join('\r\n');
};
// same solution others use for downloading
const initiateDownload = (csvData, csvFileName) => {
const blob = new Blob([csvData], { type: 'text/csv;charset=utf-8;' });
if (navigator.msSaveBlob) {
navigator.msSaveBlob(blob, csvFileName); // IE 10+
} else {
const link = document.createElement('a');
if (link.download !== undefined) {
const url = URL.createObjectURL(blob);
link.setAttribute('href', url);
link.setAttribute('download', csvFileName);
link.style.visibility = 'hidden';
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
}
}
};
// example headers object
const headers = {
serviceStartDate: 'Service Start Date',
serviceStartTime: 'Service Start Time',
serviceEndTime: 'Service End Time',
client: 'Client',
service: 'Service',
quantity: 'Quantity',
}
// example items array
const items= [
{
"serviceStartDate": "08 Feb 2020",
"serviceStartTime": "6:30 PM",
"serviceEndTime": "7:30 PM",
"client": "TestClient1",
"service": "Programming",
"quantity": 1,
},
{
"serviceStartDate": "08 Feb 2020",
"serviceStartTime": "9:30 PM",
"serviceEndTime": "11 PM",
"client": "TestClient2",
"service": "Consultation",
"quantity": 1.5,
},
{
"serviceStartDate": "09 Feb 2020",
"serviceStartTime": "1:30 AM",
"serviceEndTime": "2 AM",
"client": "TestClient3",
"service": "Refactoring",
"quantity": 0.5,
}
]
// example filename (need to import moment.js to do below)
// like this => import moment from 'moment';
const csvDownloadDate = moment(new Date()).format('DD-MMM-YYYY'); // today
const filename = `${csvDownloadDate}-Services`;
// package up all data into object
const csvData = {
items,
headers,
filename,
}
// also works with no headers now
// const csvData = {
// items,
// filename,
// }
// call function from another file after importing CSVExport
CSVExport(csvData);
I am having a few issues with my new created alexa skills.
Typing the request in the text box in Alexa Simulator always returns "There was a problem with the requested skill's response". With the output JSON bellow.
{
"body":{
"version":"1.0",
"response":{
"outputSpeech":{
"type":"PlainText",
"text":"Hello i am here"
},
"card":{
"type":"Simple",
"title":"Welcome",
"content":"Hello i am here"
},
"directives":[
{
"type":"Display.RenderTemplate",
"template":{
"type":"BodyTemplate2",
"token":"",
"backgroundImage":{
"contentDescription":"Description for the background image",
"sources":[
{
"url":"URL for the background image - must be secure (https)",
"size":"x-small",
"widthPixels":0,
"heightPixels":0
}
]
},
"image":{
"contentDescription":"Description for the main image",
"sources":[
{
"url":"URL for the main image - must be secure (https)",
"size":"x-small",
"widthPixels":0,
"heightPixels":0
}
]
},
"title":"Welcome",
"textContent":{
"primaryText":{
"type":"RichText",
"text":"Welcome"
},
"secondaryText":{
"type":"RichText",
"text":"Hello i am here"
}
},
"backButton":"HIDDEN"
}
}
],
"shouldEndSession":false
},
"sessionAttributes":{
}
}
}
However, when i copy the JSON input from the request about and user Manual JSON to test, it works perfectly well but returns a slightly different JSON Format
{
"status":"SUCCESSFUL",
"result":{
"skillExecutionInfo":{
"invocationRequest":{
"endpoint":"url here",
"body":{
"version":"1.0",
"session":{
"new":true,
"sessionId":"amzn1.echo-api.session.b62b79ba-1dde-4b22-9bf5-492943a008bc",
"application":{
"applicationId":"amzn1.ask.skill.7c4d08db-82be-4e18-9a62-7a95c58dd69f"
},
"user":{
"userId":"amzn1.ask.account."
}
},
"context":{
"AudioPlayer":{
"playerActivity":"IDLE"
},
"Display":{
},
"System":{
"application":{
"applicationId":"amzn1.ask.skill.7c4d08db-82be-4e18-9a62-7a95c58dd69f"
},
"user":{
"userId":"amzn1.ask.account."
},
"device":{
"deviceId":"amzn1.ask.device.",
"supportedInterfaces":{
"AudioPlayer":{
},
"Display":{
"templateVersion":"1.0",
"markupVersion":"1.0"
}
}
},
"apiEndpoint":"https://api.amazonalexa.com",
"apiAccessToken":"eyJ0eXAiOiJKV1"
}
},
"request":{
"type":"LaunchRequest",
"requestId":"amzn1.echo-api.request.",
"timestamp":"2018-02-05T11:35:53Z",
"locale":"en-GB"
}
}
},
"invocationResponse":{
"body":{
"response":{
"card":{
"type":"Simple",
"title":"Welcome",
"content":"Hello i am here"
},
"directives":[
{
"template":{
"type":"BodyTemplate2",
"token":"",
"title":"Welcome",
"textContent":{
"primaryText":{
"type":"RichText",
"text":"Welcome"
},
"secondaryText":{
"type":"RichText",
"text":"Hello i am here"
}
},
"backButton":"HIDDEN",
"backgroundImage":{
"contentDescription":"Description for the background image",
"sources":[
{
"url":"URL for the background image - must be secure (https)",
"size":"X_SMALL",
"widthPixels":0,
"heightPixels":0
}
]
},
"image":{
"contentDescription":"Description for the main image",
"sources":[
{
"url":"URL for the main image - must be secure (https)",
"size":"X_SMALL",
"widthPixels":0,
"heightPixels":0
}
]
}
},
"type":"Display.RenderTemplate"
}
],
"outputSpeech":{
"type":"PlainText",
"text":"Hello i am here"
},
"shouldEndSession":false
},
"sessionAttributes":{
},
"version":"1.0"
}
},
"metrics":{
"skillExecutionTimeInMilliseconds":254
}
},
"error":null
}
}
Any idea what the problem could be thanks.
For any one that comes across this question with the same problem. If the response includes the Display.RenderTemplate directive, make sure that display interface is enabled on the Alexa developer console.
From the Alexa developer console on your skill, navigate to Interfaces and make sure Display Interface is enabled.
I have written some test case using CasperJS.
var baseUrl = "http://cng20018241:9090";
var require = patchRequire(require);
casper.options.viewportSize = {
width: 1024,
height: 800
}
casper.test.begin('Connecting to site', function suite(test) {
casper.start(baseUrl, function() {
this.wait(5000, function() {
this.echo("I've waited for 5 seconds.");
});
})
.then(function(){
this.captureSelector('c:\\temp\\screenshot.png', 'html')}
)
.run(function() {
casper.echo("TESTS COMPLETED", "GREEN_BAR");
casper.exit();
});
});
var partial = function(func /*, 0..n args */) {
var args = Array.prototype.slice.call(arguments, 1);
return function() {
var allArguments = args.concat(Array.prototype.slice.call(arguments));
return func.apply(this, allArguments);
};
};
The above code is capturing the screen shot for a site developed using meteor. But if I change the url to a site developed using ExtJs, casperjs only produce screenshot which is black. it does not capture the actual screen.
Both the sites are internal sites. The site developed using ExtJs (not working) uses windows authentication.
What options do I have now?
After registering various events, I am getting following error:
ResourceError: {
"errorCode": 5,
"errorString": "Operation canceled",
"id": 0,
"url": "http://cng20018241:9090/"
}