I have to check all available fonts istalled on user's system. Therefore, I try to use this tutorial. I compiled Fontlist.as with mxmlc compiler and included a JS file, which contains the populateFontList(fontArr) function.
I embed the SWF file with:
$("#flash").flash(
{
"src": "FontList.swf",
"width": "1",
"height": "1",
"swliveconnect": "true",
"id": "getfonts",
"name": "getfonts"
},
{ update: false }
);
If I open the page, it the SWF file will be embeded to the <div id="flash"></div> but the populateFontList(fontArr) function isn't fired.
Is there any trap which I fell in?
I would welcome every advise.
Many thanks!
Daniel
Ok I got it. My problem was, that I testet it locally. I installed the Flash Debugger and realised, that there was a security error #2060. The solution was to add the local path to flash player's global settings:
Global Settings
Related
I'm currently coding a simple HTML page with embedded Javascript to visualise a local mbtiles, including local glyphs and sprites.
The html index.html is :
...
<script src="https://unpkg.com/maplibre-gl#2.1.9/dist/maplibre-gl.js"></script>
<link href="https://unpkg.com/maplibre-gl#2.1.9/dist/maplibre-gl.css" rel="stylesheet" />
...
<body>
<div id="map"></div>
</body>
<script type="module" src="./index.js" async defer></script>
The javascript index.js is :
var map = new maplibregl.Map({
container: 'map',
style:
'styles/style.json',
center: [174.746344, -36.8899343],
zoom: 11.15
});
and the goal is to load a style.json file that would define the mbtiles, sprites and glyphs local location.
I'm currently using the OSM Bright style, copied over locally on my machine, within the style.json file and the goal is to swap any connection to remote files by local files:
glyphs
"glyphs": "./glyphs/{fontstack}/{range}.pbf",
It works well for the glyphs
sprites
"sprite": "./sprites/sprite",
I have the following error :
Unable to parse URL "./sprites/sprite"
mbtiles
"sources": {
"openmaptiles": {
"type": "vector",
"url": "./mbtiles/country.mbtiles"
}
},
I got the following error : Error: Unexpected token 'S', "SQLite for"... is not valid JSON
I'm definitely missing some protocols here, and I can't find any answer to my question so far, knowing :
I'm not looking to build an IOS/Android app : so this useful website for instance https://medium.com/#ty2/how-to-display-offline-maps-using-maplibre-mapbox-39ad0f3c7543 doesn't apply to my case -> I've tried to add
asset://sprites/sprite
or
mbtiles://country.mbtiles
but that doesn't work (neither for the glyphs, but it doesn't look like it's necessary any way)
this Load local .mbtiles with maplibre-gl-js looks like the closest to my need, but again the answer focus on application and not html, plus the question has not yet been fully resolved neither
So any help would be appreciated, especially I would be interested to know if this is even possible with the maplibre-gl.js library that I'm using as this might just not be possible. If that's the case, I would appreciate a similar answer with mapbox-gl.js if necessary, but still using local (offline) files.
In other words the main objective is to run a website (not an app) with maplibre (not mapbox - at least if possible) and only including local files.
Thanks for any feedback.
I know it's may be late, but nevertheless:
mbtiles:// protocol only works with maplibre-gl not with maplibre-gl-js as I know.
So I used pbf files. You can get them from mbtiles file with mbutil or from osm.pbf file with tilemaker.
Before converting from osm.pbf with tilemaker you should modify field "compress" to "none" in config-openmaptiles.json, or map won't be rendered.
For me only "glyphs" worked with relative path, but "sprite" and "tiles" with full path, like http://... (But I only tried python3 embedded http.server and uvicorn)
This is my excerpt from style.json:
"sources": {
"openmaptiles": {
"type": "vector",
"tiles": ["http://localhost:8000/data/tiles/{z}/{x}/{y}.pbf"],
"minzoom": 0,
"maxzoom": 14
}
},
"sprite": "http://localhost:8000/data/sprites/bright-v8",
"glyphs": "data/glyphs/{fontstack}/{range}.pbf",
"tiles" path should be in square brackets and you should provide "maxzoom" of your map (14 is a default for many maps, as I know) if you want overzoom to work.
This is the API I'm referring to: https://developer.mozilla.org/en-US/docs/Web/API/Fullscreen_API
As for what I've tried so far:
Modernizr has the Modernizr.fullscreen thing, but I don't feel like using yet another library for what seems like a simple task.
So I'm digging the source code of Modernizr to try and see how they do it, after all Modernizr does use JS to figure it out, right? But so far all I found about the fullscreen API in their source code is this file (Modernizr/feature-detects/fullscreen-api.js)
/*!
{
"name": "Fullscreen API",
"property": "fullscreen",
"caniuse": "fullscreen",
"notes": [{
"name": "MDN Docs",
"href": "https://developer.mozilla.org/en/API/Fullscreen"
}],
"polyfills": ["screenfulljs"],
"builderAliases": ["fullscreen_api"]
}
!*/
/* DOC
Detects support for the ability to make the current website take over the user's entire screen
*/
define(['Modernizr', 'prefixed'], function(Modernizr, prefixed) {
// github.com/Modernizr/Modernizr/issues/739
Modernizr.addTest('fullscreen', !!(prefixed('exitFullscreen', document, false) || prefixed('cancelFullScreen', document, false)));
});
...and I don't quite understand that code. yet.
The following snippet seems to be the best solution:
const fullScreenAvailable = document.fullscreenEnabled ||
document.mozFullscreenEnabled ||
document.webkitFullscreenEnabled ||
document.msFullscreenEnabled
I'm trying to embed some 360 images on my site using Google VR View, but I'm having no luck getting anything to work. I'm following the Google provided documentation as a guide...
https://developers.google.com/vr/concepts/vrview-web
`window.addEventListener('load', onVrViewLoad)
function onVrViewLoad() {
var vrView = new VRView.Player('#vrview', {
image: 'img/jtree.jpg',
is_stereo: false
});
}`
I copied the example code, and am getting errors in the console (see attached screen shots)
Console Errors
Does anyone know of a tutorial that would better outline how to use this? Or possibly can someone shed some light on what I may be doing incorrectly?
You have to open your HTML file in a server.
Enable CORS https://enable-cors.org/server.html.
I find an easy way to enable CORS with the Chrome web server just for your experiment purpose.
I had absolutely no luck getting this to work with the instructions provided by Google - guess I'm not versed enough in coding. For me it only worked when I used the iframe, see https://www.museum-joanneum.at/spielwiese/360.
However, the view is still not exactly the same, the info-Tag is not layered over the image in the left lower corner like the demo on Google, but on top of the image and reduces the image height by about 30 pixels. Maybe that's related to the iframe since the instructions state, that the functionality isn't exactly the same as with the JavaScript API.
Also, for my images I had to select "false" for stereo in order to display correctly.
I hope this helps!
Looks like you are not setting up the directories properly. Is your web server set up so the root is the root of the repo? Are you also getting a 404 error? (looks like vrview.js is not being loaded)
As for places to get help with this, I recommend the vrview-web google group.
you need add this html id on web page.
<div id="vrview"></div>
Below JavaScript will call out the image on HTML.
var vrView;
var scenes = {
petra: {
image: 'images/petra.jpg',
preview: 'images/petra-preview.jpg'
}
}
function onLoad() {
vrView = new VRView.Player('#vrview', {
width: '100%',
height: 480,
image: 'images/blank.png',
is_stereo: false,
is_autopan_off: true
});
vrView.on('ready', onVRViewReady);
vrView.on('modechange', onModeChange);
vrView.on('getposition', onGetPosition);
vrView.on('error', onVRViewError);
}
function loadScene(id) {
console.log('loadScene', id);
// Set the image
vrView.setContent({
image: scenes[id].image,
preview: scenes[id].preview,
is_autopan_off: true
});
}
function onVRViewReady(e) {
console.log('onVRViewReady');
loadScene('petra');
}
function onModeChange(e) {
console.log('onModeChange', e.mode);
}
function onVRViewError(e) {
console.log('Error! %s', e.message);
}
function onGetPosition(e) {
console.log(e)
}
window.addEventListener('load', onLoad);
You can run those scripts only on the server and then only it will render the texture so you can add your all files in the wamp server path and access through or you can create a web project in asp.net, add your files and build the project. everything will be taken care of by the Visual Studio.
For example
download this sample Code
Add this in your wamp server path or create a project in visual
studio and add these files
Open your index.html file the in browser
I've been using jRecorder for a while now, it's pretty good considering how lightweight it is.
Now, I've got a case where I need to prevent jRecorder playing back the recorded audio after record. I've tried pretty much every function within jRecorder and the documentation is not great.
Anyone every encountered and got round this?
Here's the code, just standard jRecorder stuff really.
$.jRecorder({
'swf_path': '/scripts/jrecorder1.1/jRecorder.swf',
'host': host,
'callback_started_recording': function() {
$('.audio-recorder').addClass('recording');
},
'callback_finished_recording': function() {
$('.audio-recorder').removeClass('recording');
},
'callback_stopped_recording': function() {
$.jRecorder.sendData();
$('.audio-recorder').removeClass('recording');
},
'callback_error_recording': function() {
$('.audio-recorder').removeClass('recording');
},
'callback_activityTime': function(time) {
},
'callback_activityLevel': function(level) {
},
'callback_finished_sending': function(response) {
}
}, $('.audio-recorder .audio-recorder-singleton'));
After a day of trying almost everything on this, I finally found a solution. I thought I'd post it here in full as there are lots of comments on the jRecorder website on how to do this, but they are unanswered.
To do this, you need to do the following:
Go to https://github.com/sythoos/jRecorder and download everything in the flash-fla folder. Make sure you match the folder of the flash-fla folder structure EXACTLY on your local machine.
Once you have done that, and if you haven't got it already, you're going to need to download Flash. I used the free 30 day trial to do this, you can also do the same.
Open up the Main.as file that you should now have in your local directory and delete line 160, which should be as shown below:
private function recordComplete(e:Event):void
{
//fileReference.save(recorder.output, "recording.wav");
//finalize_recording();
preview_recording(); <----- **DELETE THIS**
}
Now, you need to open up the AudioRecorderCS4-1.0.fla file in Flash and export the movie (File -> Export -> Export Movie).
Once exported (and named so you can find it), reference/include in project your new SWF and change the swfPath of your jRecorder parameter to match the new SWF and voila! :)
You may download old version of jRecorder.swf file
from here jRecorder.swf without preview
so that you do not need to recompile fla file.
Hit Raw button to download it. This version does not have function jSendFileToServer
so you should comment it out in your jRecorder.js file.
WAV file will be submitted to server right after the recording stops.
I'm having an extremely difficulty time getting the flowplayer to show up and the worst part is I have no idea what is wrong because I'm not getting any error messages!
I have an external javascript file:
C:/desktop/mysite/js/jq/plugins.js
calling $f() from:
C:/desktop/mysite/thirdparty/flowplayer/flowplayer.js
the swf files also live there...
I'm working on file/desktop (no localhost or webserver)
$(video.id).flowplayer("thirdparty/flowplayer/flowplayer-3.1.15.swf", {
clip:{
....
},
// min Flash version
version:[9,115],
// older versions will see a custom message
onFail:function(){
alert("Failed!");
},
onError:function(errCode,errMsg){
alert(errCode+errMsg);
}
});
I don't know what path to use for the SWFs to get them to load, is the path relative to the javascript (plugins.js) that calls $f() or is it relative to the path of the flowplayer.js ??
bangs head on wall
Why not use the absolute path?
$(video.id).flowplayer("file://c:/desktop/mysite/thirdparty/flowplayer/flowplayer-3.1.15.swf"...
replace thirdparty/flowplayer/flowplayer-3.1.15.swf with thirdparty\flowplayer\flowplayer-3.1.15.swf
if you are planning to put that on a web page then change the slashes back to forward slashes.