I have the following simple code for showing a sequence of svgs:
<!DOCTYPE html>
<html>
<body>
<div id="openseadragon1" style="width: 1500px; height: 1000px;"></div>
<script src="openseadragon.min.js"></script>
<script type="text/javascript">
var viewer = OpenSeadragon({
id: "openseadragon1",
prefixUrl: "./images/",
tileSources: [
{type: 'image', url: "./img/pc_000.svg", buildPyramid: false},
{type: 'image', url: "./img/pc_001.svg", buildPyramid: false},
{type: 'image', url: "./img/pc_002.svg", buildPyramid: false},
],
sequenceMode: true,
preserveViewport: true,
});
</script>
</body>
</html>
The svg dimensions are 332ptx20000pt (short, but extremely wide). When the images are displayed they are cropped horizontally (at about 12000pt approx.), but when I load the images directly in a browser, the browser (Chrome, Edge) shows it in their entirety.
Is there a way to display these wide images uncropped in openseadragon?
Sample image and code
Related
I was wondering if anyone has faced this issue. The embedded code is given by Microsoft and as following
<div id='embedded-my-feed' class='col-lg-12 col-md-12 col-sm-12 col-xs-12 yammer-home-feed pz-cell-container'>
<script type='text/javascript' src='https://c64.assets-yammer.com/assets/platform_embed.js'></script>
<script type='text/javascript'> yam.connect.embedFeed({ container: '#embedded-my-feed', network: 'network.co.uk', feedType: 'Home Feed', config: { use_sso: true, header: false, footer: false }});</script></div>
It was working before but now has stopped working. I want to display home feed and it doesn't have feed id. Any help will be appreciated.
I tested to emb yammer feed like this in classic page and it works as expected:
<div id="embedded-my-feed" style="height:400px;width:500px;"></div>
<script type="text/javascript" src="https://c64.assets-yammer.com/assets/platform_embed.js"></script>
<script 'type="text/javascript">
yam.connect.embedFeed({
container: '#embedded-my-feed',
network: 'microsoft.com',
config: { header: false, footer: false},
feedType: 'Home Feed'
});
</script>
Please check error with Browser Developer Tool and you can try to clear browser cache and then resign in to see if it works.
I'm new to open layers and currently trying to implement a map where i will display set of information when a layer has been check. currently i have this code to display the layer tiles
new LayerGroup({
title: 'Sample Layer Group',
fold: 'open',
layers: [
new Tile({
title: 'Layer 1',
visible: false,
source: new TileWMS({
url: '',
....
]
})
}),});
What i want to do is whenever i check or uncheck this layer I'll be able to get the state if it's visible or not.
I tried using map.getLayerGroup().getActive() but only receiving true every time.
thank you for the help!
If I understand you correctly, you are actually looking for getVisible method. Take a look at this example I made for you, based on some OL examples.
<!doctype html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io#master/en/v6.3.1/css/ol.css" type="text/css">
<style>
.map {
height: 400px;
width: 100%;
}
</style>
<script src="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io#master/en/v6.3.1/build/ol.js"></script>
<title>Group Layer</title>
</head>
<body>
<div style="margin: 1rem;">
<input type="checkbox" id="groupVisible" checked>Group |
<input type="checkbox" id="layer1Visible" checked>Layer 1 |
<input type="checkbox" id="layer2Visible" checked>Layer 2
</div>
<div id="map" class="map"></div>
<script type="text/javascript">
const layer1 = new ol.layer.Tile({
source: new ol.source.TileWMS({
url: 'https://ahocevar.com/geoserver/wms',
params: {'LAYERS': 'ne:ne', 'TILED': true},
serverType: 'geoserver',
crossOrigin: 'anonymous'
})
});
const layer2 = new ol.layer.Tile({
extent: [-13884991, 2870341, -7455066, 6338219],
source: new ol.source.TileWMS({
url: 'https://ahocevar.com/geoserver/wms',
params: {'LAYERS': 'topp:states', 'TILED': true},
serverType: 'geoserver',
// Countries have transparency, so do not fade tiles:
transition: 0
})
});
const groupLayer = new ol.layer.Group({
layers: [layer1, layer2]
});
var map = new ol.Map({
target: 'map',
layers: [
new ol.layer.Tile({
source: new ol.source.OSM()
}),
groupLayer
],
view: new ol.View({
center: [-10997148, 4569099],
zoom: 4
})
});
const groupChk = document.getElementById('groupVisible');
const layer1Chk = document.getElementById('layer1Visible');
const layer2Chk = document.getElementById('layer2Visible');
function log() {
console.log(
`group: ${groupLayer.getVisible()} layer1: ${layer1.getVisible()} layer2: ${layer2.getVisible()}`
);
}
groupChk.addEventListener('click', function () { groupLayer.setVisible(groupChk.checked); log(); });
layer1Chk.addEventListener('click', function () { layer1.setVisible(layer1Chk.checked); log(); });
layer2Chk.addEventListener('click', function () { layer2.setVisible(layer2Chk.checked); log(); });
</script>
</body>
</html>
Let me know if this is what you were looking for.
I'm developing a web application using angularjs, I need to add a window that shows a live RTSP streaming.I can be done that with JSMpeg js library. In the server side I found this nodejs example
Stream = require('node-rtsp-stream')
stream = new Stream({
name: 'name',
streamUrl: 'rtsp_url',
wsPort: 8081,
ffmpegOptions: { // options ffmpeg flags
'-stats': '', // an option with no neccessary value uses a blank string
'-r': 30 // options with required values specify the value after the key
}
})
in the browser side first i tried a simple HTML5 :
<html>
<body>
<div>
<canvas id="canvas" width="1920" height="1080" style="display: block; width: 40%;"></canvas>
</div>
</body>
<script type="text/javascript" src="jsmpeg.min.js"></script>
<script type="text/javascript">
//var ws = new WebSocket('ws://localhost:9999');
player = new JSMpeg.Player('ws://localhost:9999', {
canvas: document.getElementById('canvas'), autoplay: true, audio: false, loop: true
})
</script>
This HTML5 page works fine and I got in my web page a live streaming. After that I tried to adapt this HTML code to angularJS:
I added the canvas tag to the corresponding html file:
<canvas id="canvas" width="502" height="237" style="display: block; width: 40%;"></canvas>
Then I tried controller as follow:
var streamingcanvas = document.getElementById("canvas");
let player = new JSMpeg.Player('ws://localhost:8081', {
canvas: streamingcanvas, autoplay: true, audio: false, loop: true
})
the result I get is that no streaming in my web page an no errors in the console.
what's missing in my code?
I've cloned the repository from https://github.com/microsoft/BotFramework-WebChat and was able to build the project after some changes with the below npm command
npm run build
However, this build has not generated the botchat.css and botchat.js files that the earlier versions of web chat used to generate. The reason for my custom build is that I need to be able to display HTML formatting on the web chat. Any steps on how to get the .css and .js files would be really helpful.
Suggestions from #tdurnford on WebChat repo worked out well. Giving the final html code below:
<!DOCTYPE html>
<html>
<head>
<style>
html,
body {
height: 100%
}
body {
margin: 0;
}
#webchat {
height: 100%;
width: 100%;
}
</style>
<script src="https://unpkg.com/markdown-it#8.4.2/dist/markdown-it.min.js"></script>
<script src="https://cdn.botframework.com/botframework-webchat/latest/webchat-es5.js"></script>
<script>
</script>
</head>
<body>
<div id="webchat" role="main"></div>
<script>
// const markdownIt = new MarkdownIt({ html: true, linkify: true, typographer: true });
const markdownIt = window.markdownit({ html: true, linkify: true, typographer: true });
window.WebChat.renderWebChat(
{
username: username,
userID: userid,
locale: 'en-US',
directLine: window.WebChat.createDirectLine({
secret: [YOUR_SECRET],
}),
renderMarkdown: markdownIt.render.bind(markdownIt),
styleOptions: {
bubbleMaxWidth: 1200,
botAvatarInitials: 'M',
userAvatarInitials: 'V',
}
// Passing 'styleOptions' when rendering Web Chat
},
document.getElementById('webchat')
);
</script>
</body>
</html>
Setting the markdown renderer with html:true is the the key here.
const markdownIt = window.markdownit({ html: true, linkify: true, typographer: true });
Web Chat no longer generates custom CSS files from the build. I would recommend looking at the Web Chat v3 to v4 Migration Sample and Web Chat's other customization samples - specifically the Custom Branding Styling sample.
I have run into a dead end trying to get the following HTML to work. I am trying to use the real time gauge chart to display a value coming from a photon. This is the snippet code from the pubnub site.
(I have proven that the published value is arriving in the Javascript using the commented out pubnub code in the Javascript. The value is displayed in the P tag.)
The P tag is displayed on the screen, but no gauge is displayed.
Could you please have a look at my code and guide me on where I have made a mistake. I have not worked with EON before, so I may be making very basic mistake.
<!DOCTYPE html>
<html>
<!-- <script type="text/javascript" src="http://cdn.pubnub.com/pubnub-3.16.1.min.js"></script> -->
<script type="text/javascript" src="//pubnub.github.io/eon/v/eon/0.0.10/eon.js"></script>
<link type="text/css" rel="stylesheet" href="//pubnub.github.io/eon/v/eon/0.0.10/eon.css"/>
<div id="chart"></div>
<script type="text/javascript">
*var pubnub = PUBNUB.init({subscribe_key: 'xxxxxxx'});
/*
pubnub.subscribe ({channel : "datatest", message : function(tempmsg)
{document.getElementById("x").innerHTML = tempmsg.eon.data;}});
*/
var channel 'datatest';
eon.chart({
channel: channel,
generate: {
bindto: '#chart',
data: {
type: 'gauge',
},
gauge: {
min: 0,
max: 100
},
color: {
pattern: ['#FF0000', '#F6C600', '#60B044'],
threshold: {
values: [30, 60, 90]
}
}
}
});
</script>
<body>
<p id ="x"> This is my text that will be replaced by the value from the photon </p>
</body>
</html>
The output from the photon looks like this:
publishing message: {"eon": {"data":56}}
publishing message: {"eon": {"data":56}}
publishing message: {"eon": {"data":56}}
publishing message: {"eon": {"data":56}}
There is a missing line of code in the PubNub EON JavaScript embed code for the Gauge Chart.
You must add pubnub: pubnub, to bind the graph instance to the PubNub stream.