I have the following control in a Windows Metro App:
string html = "<html><body>test content</body></head>";
myWebView.Opacity = 0.5;
myWebView.NavigateToString(html);
This works okay, but what I end up with is a blank white background with black text. What I actually want is for this to work with the current Metro style (so match the dark or light background depending on the setting). I've played with the Opacity setting, as above, but it seems to make no difference.
Is there a way to get the WebView control to mirror the current Metro style?
This is by design. WebView-Controls don't support any Opacity, cause they are kind of a special control which is rendered on top of everything.
From the MSDN docs:
WebView has the characteristic that other UI regions such as controls cannot be rendered on top of the WebView. This is because of how window regions are handled internally, particularly how input events are processed and how the screen draws. If you want to render HTML content and also place other UI elements on top of that HTML content, you should use WebViewBrush as the render area. The WebView still provides the HTML source information, and you reference that WebView through element name binding and the SourceName property. WebViewBrush does not have this overlay limitation.
Related
<img src="img.pdf"> doesn't work due to it being a pdf. I don't like the embed and iframe environments either, since they add the pdf viewer options, the scroll etc. I tried converting the pdf to an image with the convert and pdftoppm commands on Linux, but these result in the image having extra white space on top and bottom to fit A4 format, and/or makes the background black (instead of white or transparent).
Any ideas?
"Img" is in effect an iFrame of an embedded binary object, but it is borderless since it is statically scaled to one non zoomable size. Note the img above this text is framed as https://i.stack.imgur.com/xpw2l.png
Yes there are ways to make it more dynamic but vanilla binary PNG/JPG/ETC are imbedded, and part of the binary HTML viewer renders those fixed areas. You can switch them off if you wish, or they don't display if badly served.
So why is PDF not simply treated like an image as per your question?
The answer is simple they are a different type of binary that requires a different html viewing binary extension. One frequent complaint is why use "menus and scrollbars if not needed for a simple file?"
The answer to that is those controls need to be in the extension, for zoom pan etc. So how comes the FireFox viewer above has none?, that's because as a user I switched them OFF.
I need some help tweaking the Autodesk Viewer UI. I am working on the files as provided by a localised version output from http://extract.autodesk.io/.
I have not done any custom editing. I need help locating the relevant code and suggestions for the changes in the following areas:
The Model Browser docking panel. This opens by default with the first group in the tree Expanded (see picture). I want this first element and all other elements to open by default as Collapsed, so just the parent names are shown.
Staying in Model Browser. The Scroll Bars, (seen when model elements names are listed beyond the Model Browser window size) display correctly in the Opera and Chrome browsers,
however, they display unstyled as wide windows style scroll bars in the Firefox browser. What is needed for Firefox to display scrollbars as intended?
What code might override camera zoom property AFTER correctly loading default zoom value ?
The viewer version from http://extract.autodesk.io/ imports the scene camera properties for the start view ok, but overrides the Zoom property with another value shortly after intial page load.
1.I want this first element and all other elements to open by default as Collapsed, so just the parent names are shown.
Unfortunately far as I know there's no straightforward, native config option in Viewer to achieve this. However you can:
Hook an one-off click listener onto Model Browser button to programmatically fire a click on the corresponding notes you'd like to collapse, or directly add ‘.collapsed’ class to them. You can get a hold of the nodes either by their lmv-nodeid or their label text:
<div lmv-nodeid="9" class="collapsed group visible">
<lmvheader style="padding-left: 13px;">
<div class="visibility"></div>
<label>Switch:1</label>
</lmvheader>
</div>
Extend and build your own browser using the instanceTree and Autodesk.Viewing.UI.DockingPanel, see an example here
2.What is needed for Firefox to display scrollbars as intended?
Here is a great answer to your question. But looks like the status quo is still far from perfect, with no definite hack discovered so far. So again for a thorough solution you'd need to create your own styling (can do so with the help of something like) and apply them to .docking-panel and append .model-structure-panel or any other panels you'd like to narrow the scope to.
3.What code might override camera zoom property AFTER correctly loading default zoom value ?
This should be the code you are after.
You can manipulate camera with viewer.autocam.goToView( newView ), and see below for a sample view config:
const newView = {
position: newPosition,
up: currentView.up,
center: newCenter,
pivot: newPivotPoint,
fov: currentView.fov,
worldUp: currentView.worldUp,
isOrtho: (currentView.isOrtho === false)
}
Our team (not only my computer) has a wierd rendering issue for Angular 2, that only happens in Chrome.
Namely, when navigating the app or refreshing in mid app, many of the items in DOM are invisible. EG. paragraphs and headers that have text in them, but the text is not rendered for the end user, but the text is seen in the inspector DOM.
The DOM will regain visibility if you edit a random CSS attribute in the inspector. This CSS doesnt even have to be applicable to the invisible DOM item at hand, ala. the invisible item could be a paragraph in the header, and switching a random footer span-s top position on/off will make the header paragraph regain visibility.
Before toggling a random CSS element
After toggling a random CSS element
This happens on pages that have a fixed loader applied to them, eg. a component that has position fixed, a superhigh z-index and encompasses the whole screen. This page loader is displayed until ngOnInit finishes, meaning it is pretty fast most of the time. Disabling this loader seems to fix the issue.
This also sometimes happens to text in {{ var }} tags, when the var value is loaded after the page has loaded.
We have tried toggling the loader with either
*ngIf="true/false"
OR
[style.display]="block/none"
Neither of these solutions work, some of the dom is still invisible.
Does anyone have a clue as to why this happens?
I think this question has been answered here: custom #font-face does not load in chrome (chrome custom fonts not rendering)
I have done a quick test and it seems to have fixed things.
Basically I was including the custom font many times (each time a SCSS file was added to a component), so I have moved it, so it's only being loaded a single time, and it now loads fine.
The issue is multiple inclusion in google chrome, I face similar issue when using angular4 and material lite.The problem is i imported fonts in every component and fixed it by importing font in single main parent component.
On Chromecast, is there any way to customize, style (with CSS), or replace the backdrop application?
(That's the application that runs as a sort of screen saver, when nothing's being cast to the device).
My ideal backdrop app would be an iframe showing something I could control.
No, it cannot be styled or replaced. You have some level of control on what images or information show up there (can be set in your Chromecast app); that is all.
I am using mediaElement and IsFullWindow property is set to true.
I need to use some control buttons, but when is fullscreen mode active, my buttons (like play, pause, stop...) are hidden behind mediaElement.
Ok. I can use
AreTransportControlsEnabled="True"
but I want my own controls.
Here is tutorial http://msdn.microsoft.com/en-us/library/windows/apps/xaml/hh986967.aspx
but it does not use IsFullWindow property.
I want reach something like this: (custom transport controls in fullscreen mode)
(screenshot from nokia video trimmer)
You'll have to lay out the page manually, which isn't that hard.
Starting with a landscape page, you can resize the MediaElement so that it takes up all of the page.
You are then free to show your own controls above the MediaElement.
However it looks like this will potentially have a battery/performance cost, as it means you won't be able to benefit from the "system level optimizations" that IsFullWindow would give you.
You might be able to toggle between this manual full window and the optimized IsFullWindow version, but I haven't tried to see what this looks like.
In order to use "system level optimization" in IsFullWindow, unlike how the quoted page in MSDN page shows (in the question), using StackPanel for transport controls and making MediaElement stretch to mimic fullscreen, use Popup for transport controls. Because Popups always stay on top of other windows, even MediaElement, they will appear even in fullscreen. Use 'HorizontalOffset' and 'VerticalOffset' property of the popup to move them relative to immediate parent. This is shown in sample at https://code.msdn.microsoft.com/windowsapps/basic-media-playback-003619be.