I've been battling the horrendous Gnome API documentation and came up with this extension:
const St = imports.gi.St;
const Main = imports.ui.main;
const Tweener = imports.ui.tweener;
const GLib = imports.gi.GLib;
let label;
function init() {
label = new St.Bin({ style_class: 'panel-label' });
let stuff = GLib.spawn_command_line_sync("cat /home/user/temp/hello")[1].toString();
let text = new St.Label({ text: stuff });
label.set_child(text);
}
function enable() {
Main.panel._rightBox.insert_child_at_index(label, 0);
}
function disable() {
Main.panel._rightBox.remove_child(label);
}
This should read whatever is in the hello file and display it in the top panel. However, if I change the contents of the hello file, I have to restart Gnome for that new content to be shown. Now, surely there is a way to do this dynamically but I just couldn't find anything in the documentation. The message in the panel should basically always mirror whatever is in the file. Any ideas how to do this?
You'll want to obtain a Gio.File handle for your hello file, and then monitor it:
let helloFile = Gio.File.new_for_path('/home/user/temp/hello');
let monitor = helloFile.monitor(Gio.FileMonitorFlags.NONE, null);
monitor.connect('changed', function (file, otherFile, eventType) {
// change your UI here
});
This worked for me. It will refresh the label value each 30 seconds.
Add the following import
const Mainloop = imports.mainloop;
In your init method
Mainloop.timeout_add(30000, function () {
let stuff = GLib.spawn_command_line_sync("your_command")[1].toString();
let label = new St.Label({ text: stuff });
button.set_child(label);return true});
Related
Based on the examples, and using version 3.3.122 of the library, I am trying to fill out a form, and save the results.
I can see on the viewer.html, that when you update the field, pdfdocument.annotationStorage is updated, but when I attempt it, I can fill out the fields, but the values are not reflected in the annotation storage, and when I save, the values are not coming through.
Yes, I want to use pdf.js library!
` var url = '/test/fw4_2.pdf';
"use strict";
if (!pdfjsLib.getDocument || !pdfjsViewer.PDFPageView) {
// eslint-disable-next-line no-alert
alert("Please build the pdfjs-dist library using\n `gulp dist-install`");
}
// The workerSrc property shall be specified.
pdfjsLib.GlobalWorkerOptions.workerSrc = 'https://cdnjs.cloudflare.com/ajax/libs/pdf.js/3.3.122/pdf.worker.min.js';
// Some PDFs need external cmaps.
//
// const CMAP_URL = "../../node_modules/pdfjs-dist/cmaps/";
const CMAP_PACKED = true;
const DEFAULT_URL = url;
const PAGE_TO_VIEW = 1;
const SCALE = 1.0;
const ENABLE_XFA = true;
const container = document.getElementById("pageContainer");
const eventBus = new pdfjsViewer.EventBus();
// Loading document.
const loadingTask = pdfjsLib.getDocument({
url: DEFAULT_URL,
// cMapUrl: CMAP_URL,
cMapPacked: CMAP_PACKED,
enableXfa: ENABLE_XFA,
});
var pdfDocument;
var pdfPage;
var pdfPageView;
var r = (async function () {
pdfDocument = await loadingTask.promise;
// Document loaded, retrieving the page.
pdfPage = await pdfDocument.getPage(PAGE_TO_VIEW);
// Creating the page view with default parameters.
pdfPageView = new pdfjsViewer.PDFPageView({
container,
id: PAGE_TO_VIEW,
scale: SCALE,
defaultViewport: pdfPage.getViewport({ scale: SCALE }),
eventBus,
// We can enable text/annotation/xfa/struct-layers, as needed.
textLayerMode :2,
annotationEditorMode : pdfjsLib.AnnotationEditorType.TextAnnotation,
xfaLayerFactory: pdfDocument.isPureXfa
? new pdfjsViewer.DefaultXfaLayerFactory()
: null,
});
// Associate the actual page with the view, and draw it.
pdfPageView.setPdfPage(pdfPage);
pdfPageView.draw();
})();`
I have tried different so many ways of trying to load the document, saveDocument, getData, and setting annotations directly, with no luck.
I also changed the library versions, and I feel there could be some inconsistencies with the library.
I'm beginner of using AR.js; Could you please suggest me how can I display distanceMsg on each elements like above or below tag (or could you please suggest me if there are other way to display it) in AR.js. Like this example image
I've found this on AR.js website, but I have no clue how can I display on each A-Frame tag like.
const distanceMsg = document.querySelector('[gps-entity-place]').getAttribute('distanceMsg');
Here are my script code
window.onload = () => {
const scene = document.querySelector('a-scene');
return navigator.geolocation.getCurrentPosition(function (position) {
loadPlaces(position.coords)
.then((places) => {
places.forEach((place) => {
const latitude = place.location.lat;
const longitude = place.location.lng;
const marker = place.location.mark;
const pin = document.createElement('a-image');
pin.setAttribute('gps-entity-place', `latitude: ${latitude}; longitude: ${longitude}`);
pin.setAttribute('look-at', '[gps-camera]');
pin.setAttribute('name', place.name);
pin.setAttribute('src', `${marker}`);
pin.setAttribute('scale', '2, 2');
pin.addEventListener('loaded', () => window.dispatchEvent(new CustomEvent('gps-entity-place-loaded')));
const clickListener = function(ev) {
ev.stopPropagation();
ev.preventDefault();
const name = ev.target.getAttribute('name');
const el = ev.detail.intersection && ev.detail.intersection.object.el;
if (el && el === ev.target) {
const label = document.createElement('span');
const container = document.createElement('div');
container.setAttribute('id', 'place-label');
label.innerText = name;
container.appendChild(label);
document.body.appendChild(container);
setTimeout(() => {
container.parentElement.removeChild(container);
}, 1500);
}
};
pin.addEventListener('click', clickListener);
scene.appendChild(pin);
});
})
},
(err) => console.error('Error in retrieving position', err),
{
enableHighAccuracy: true,
maximumAge: 0,
timeout: 27000,
}
);
};
Thank you so much.
See the fundamentals of adding entity's via script
Looks like you need to Use A-frame register component instead of vanilla js. Very important to take this in and undertstand this and not try cherry-pick with this type of framework, otherwise, you risk using this out of context.
This is a finnicky framework where many things need to go right for location-based to work, so it's worth grabbing a coffee, taking some good time reading up.
Remember: Do not try to put A-Frame-related JavaScript in a raw tag after as we would with traditional 2D scripting. If we do, we’d have to take special measures to make sure code runs at the right time. See Running content scripts at the right time
I want to create an audio editor where you can connect nodes together to create custom audio components. Every time the nodes change, they get compiled into javascript and then will be run by a new Function() to get better performance. I just read up that there is the possibility to create an AudioWorklet, which runs on a separate thread. Now I am wondering if there is a possibility of combining both ideas in a way where my algorithm gets passed to the AudioWorklet as a string of javascript code, where it then gets put into a function using new Function(codeString) inside of the constructor. Then the audioworklet's process() function will call the custom function somehow.
Is this possible in some way, or am I asking for too much? I would like to get a "yes, that's possible" or a "no, sorry" before I spend hours trying to get it to work...
Thanks for your help,
dogefromage
With the help of #AKX's comment, I crafted together this solution. The code inside the string will later be replaced by a compiler.
function generateProcessor()
{
return (`
class TestProcessor extends AudioWorkletProcessor
{
process(inputs, outputs)
{
const input = inputs[0];
const output = outputs[0];
for (let channel = 0; channel < output.length; ++channel) {
for (let i = 0; i < output[channel].length; i++) {
output[channel][i] = 0.01 * Math.acos(input[channel][i]);
}
}
return true;
}
}
registerProcessor('test-processor', TestProcessor);
`);
}
const button = document.querySelector('#button');
button.addEventListener('click', async (e) =>
{
const audioContext = new AudioContext();
await audioContext.audioWorklet.addModule(
URL.createObjectURL(new Blob([
generateProcessor()
], {type: "application/javascript"})));
const oscillator = new OscillatorNode(audioContext);
const testProcessor = new AudioWorkletNode(audioContext, 'test-processor');
oscillator.connect(testProcessor).connect(audioContext.destination);
oscillator.start();
});
I wanna use guacamole-common-js in my React application and already set up guaca in docker and guacamole client by guacamole-lite. I have successfully seen the view from plain HTML and javascript. However, I could not render it in React JSX.
Here is my code:
import Guacamole from "guacamole-common-js";
let guaca = new Guacamole.Client(new Guacamole.WebSocketTunnel(webSocketFullUrl));
guaca.onerror = function (error) {
alert(error);
};
guaca.connect();
// Disconnect on close
window.onunload = function () {
guaca.disconnect();
}
let display = document.getElementById("display");
display.appendChild(guaca.getDisplay().getElement());
And to render it:
React.createElement("div", {id, "display"})
I also try with Ref like follow but still not works:
constructor(props) {
super(props);
this.displayRef = React.createRef();
this.guacaRef = React.createRef();
}
this.guacaRef.current = new Guacamole.Client(new Guacamole.WebSocketTunnel(webSocketFullUrl));
this.guacaRef.current.onerror = function (error) {
alert(error);
};
this.guacaRef.current.connect();
// Disconnect on close
window.onunload = function () {
this.guacaRef.current.disconnect();
}
this.displayRef.current.appendChild(this.guacaRef.current.getDisplay().getElement());
To render it:
<div ref={displayRef}/>
I'm new to it and any help will be appreciated.
Seems like the reason is kind of stupid... the default style for guacamole canvas rendering is {z-index: -1}. When adding up to 1, it renders properly.
As #Ivana stated, necessary to change z-index
const element = guaca.getDisplay().getElement();
const canvas = $(element).find(`canvas`);
for(let c of canvas) {
$(c).css(`z-index`, 10)
};
In the below code snippet, how can I use osList and featureList using typescript can you please help me with this. I need to know how to work with a list of elements in the page object model like submitName function.
import { Selector, t } from 'testcafe';
const label = Selector('label');
class Feature {
constructor (text) {
this.label = label.withText(text);
this.checkbox = this.label.find('input[type=checkbox]');
}
}
class OperatingSystem {
constructor (text) {
this.label = label.withText(text);
this.radioButton = this.label.find('input[type=radio]');
}
}
export default class Page {
constructor () {
this.nameInput = Selector('#developer-name');
this.triedTestCafeCheckbox = Selector('#tried-test-cafe');
this.populateButton = Selector('#populate');
this.submitButton = Selector('#submit-button');
this.results = Selector('.result-content');
this.commentsTextArea = Selector('#comments');
this.featureList = [
new Feature('Support for testing on remote devices'),
new Feature('Re-using existing JavaScript code for testing'),
new Feature('Running tests in background and/or in parallel in multiple browsers'),
new Feature('Easy embedding into a Continuous integration system'),
new Feature('Advanced traffic and markup analysis')
];
this.osList = [
new OperatingSystem('Windows'),
new OperatingSystem('MacOS'),
new OperatingSystem('Linux')
];
this.slider = {
handle: Selector('.ui-slider-handle'),
tick: Selector('.slider-value')
};
this.interfaceSelect = Selector('#preferred-interface');
this.interfaceSelectOption = this.interfaceSelect.find('option');
this.submitButton = Selector('#submit-button');
}
async submitName (name) {
await t
.typeText(this.nameInput, name)
.click(this.submitButton);
}
}
I can describe this to you based on the TestCafe's basic example. First, you need to change the page-model file extension to ts and create this file according to the TypeScript rules (for example, see my gist). Then, you can change the test file extension to ts and start test execution like you do it for any js tests, e. g. testcafe chrome test.ts.