I am creating my first Grafana panel plugin to display GLG grphics. I am using react simple panel plugin.
For GLG implementation I am having GLG static library(can't install with npm). So I added my GLG library files(GlgCE.js, GlgTooklitCE.js, gunzip.min.js) in external folder. I am importing all these library files in SimplePanel.tsx file. One of my step is to decompress created the data.In my GlgToolkit.js I am having below code which creates object for Zlib.Gunzip and decompress the data which is in Uint8Array format.
tproto.__glg_gunzip_hook__ = (data) => {
var gunzip = new Zlib.Gunzip(data);
return gunzip.decompress();
};
My problem is that above code is not working, while debugging I can say its unable to create object for Zlib.Gunzip. It returing undefine for gunzip variable, and data is not getting decompress.
I will be great if anybody caan help me on this.How can one library file can communicate with other(in this case gunzip.min.js).
I found my own solution, I imported the gunzip.min.js file in my library file.
import * as Zlib from './gunzip.min.js';
Related
Background
I built an app, which converts files from type A to type B (a binary file). I want to import and use a dummy file of type B to fill the data of file type A. The dummy always stays the same. The app has no backend. I want to share the html, so anything which requires turning off browser security etc., isn't an option.
Problem
At the moment, I load the files as I found here, but this works only with a backend server:
Requesting blob images and transforming to base64 with fetch API
import dummy from '../templates/Grid2.shp';
let hex = await fetch(dummy)
.then( response => response.blob() )
.then( blob => new Promise( callback =>{
let reader = new FileReader() ;
reader.onload = function(){
const serumShp = atob(this.result.substring(37)); // 37 strips the base64 info data:...
callback(binaryToHex(serumShp))
} ;
reader.readAsDataURL(blob) ;
}) ) ;
It works in my development but not at the built stage. As the browsers requests from the filesystem.
I found a solution over a file loader, but this solution also throws an error:
Using file-loader to load binary file in react
import/no-webpack-loader-syntax
Also, I don't see any configuration files for Webpack. As far as I have seen I would need to eject them, which is also not recommended.
Question:
How can I import binary files into my app without a backend server/any changes, etc.?
Sorry, I cannot help, but pointing out that there is a general discussion in CRA to support a more elegant way of importing binary/raw data. Sadly there doesn't seem to be much progress, the proposal is from 2018.
I'm fairly new to Dart and Flutter, and I'm having trouble to overwrite an existing assets image from a source image.
My attempt:
try {
File localFile = File('assets/images/myImage.png');
localFile.writeAsBytesSync(originFile.readAsBytesSync());
catch (e) {
log(e.toString());
}
I get:
[log] FileSystemException: Cannot open file, path = 'assets/images/myImage.png' (OS Error: No such file or directory, errno = 2)
I did define the assets folder in pubspec.yaml:
assets:
- assets/images/
Ok, so I've read somewhere that the asset file can be accessed like this:
import 'package:flutter/services.dart' show rootBundle;
final byteData = await rootBundle.load('assets/images/myImage.png');
But I don't know how to convert byteData to a File object that represents the actual file.
I think I'm missing something very basic here. Or maybe is there is a proper way to do this that has nothing to do with this approach?
Please help.
Thanks in advance!
If you want to write a file on a user device you should look here: https://flutter.dev/docs/cookbook/persistence/reading-writing-files
Shared preferences are a space in a phone where you app can write, so it's exactly what you want!
Assets are part of you app and are not meant to be modified within the app.
During a build, Flutter places assets into a special archive called
the asset bundle that apps read from at runtime. According to the flutter website
Hope this helps!
I want to compress/encode gltf file using draco programatically in threejs with reactjs. I dont want to use any commandline tool, I want it to be done programatically. Please suggest me a solution.
I tried using gltf-pipeline but its not working in client side. Cesium library was showing error when I used it in reactjs.
Yes, this is can be implemented with glTF-Transform. There's also an open feature request on three.js, not yet implemented.
First you'll need to download the Draco encoder/decoder libraries (the versions currently published to NPM do not work client side), host them in a folder, and then load them as global script tags. There should be six files, and two script tags (which will load the remaining files).
Files:
draco_decoder.js
draco_decoder.wasm
draco_wasm_wrapper.js
draco_encoder.js
draco_encoder.wasm
draco_encoder_wrapper.js
<script src="assets/draco_encoder.js"></script>
<script src="assets/draco_decoder.js"></script>
Then you'll need to write code to load a GLB file, apply compression, and do something with the compressed result. This will require first installing the two packages shown below, and then bundling the web application with your tool of choice (I used https://www.snowpack.dev/ here).
import { WebIO } from '#gltf-transform/core';
import { DracoMeshCompression } from '#gltf-transform/extensions';
const io = new WebIO()
.registerExtensions([DracoMeshCompression])
.registerDependencies({
'draco3d.encoder': await new DracoEncoderModule(),
'draco3d.decoder': await new DracoDecoderModule(),
});
// Load an uncompressed GLB file.
const document = await io.read('./assets/Duck.glb');
// Configure compression settings.
document.createExtension(DracoMeshCompression)
.setRequired(true)
.setEncoderOptions({
method: DracoMeshCompression.EncoderMethod.EDGEBREAKER,
encodeSpeed: 5,
decodeSpeed: 5,
});
// Create compressed GLB, in an ArrayBuffer.
const arrayBuffer = io.writeBinary(document); // ArrayBuffer
In the latest version of 1.5.0, what are these two files? draco_decoder_gltf.js and draco_encoder_gltf.js. Does this means we no longer need the draco_encoder and draco_decoder files? and how do we invoke the transcoder interface without using MeshBuilder. A simpler API would be musth better.
I want to save all files paths inside of a media library folder in kentico.
I found this code for one file but I don't know which Class to use to get all content any advice, please.
MediaFileInfo updateFile = MediaFileInfoProvider.GetMediaFileInfo(library.LibraryID, "NewFolder/Image.png");
This should get all the files in a specific media library.
var files = MediaFileInfoProvider.GetMediaFiles().Where("FileLibraryID",QueryOperator.Equals, library.LibraryID);
Joomla has a feature where it loads the a minified javascript file and the uncompressed version when the site is in debug mode.
I have named both my files correctly and am include it as follows:
JHtml::_('script', JUri::root() . 'path_to_file/jquery-sortable.js');
When I put the site in debug mode, it does not load the uncompressed file.
However, If I use the following instead, it works fine:
JHtml::_('script', 'path_to_file/jquery-sortable.js');
Now I'm not sure whether this is a bug in Joomla or not, but I cannot find any information online regarding this. I would like to use JURI::root() in the path.
Does anyone have any information on this?
Indeed, if the script URL begins with http, the code that is responsible for including the uncompressed version (i.e, remove the min. segment if such exists or add -uncompressed otherwise) is ignored.
The source for this behavior:
JHtml::includeRelativeFiles() in libraries/cms/html/html.php:298
protected static function includeRelativeFiles($folder, $file, $relative, $detect_browser, $detect_debug)
{
// If http is present in filename
if (strpos($file, 'http') === 0)
{
$includes = array($file);
}
else
//process the script sourch.
}
...
}
Most of the script files, including frameworks, are included as relative paths. I guess that this behavior is meant to prevent remote resources from getting 404ed.