I have an application framework (in JavaScript) which dynamically sets the URLs for the live tile feed. In my code I have something like below, and this works for a wide tile, but when I resize the tile to "medium" (or "small") the live feed/update is gone. If I resize back to wide it works just fine. There is no other tile setup (it uses the default).
My question is: is there anyway to update all tile sizes at the same time, or will I have to build a full XML object using getTemplateContent() and the TileUpdater's update() method?
I currently update the periodic URLs like so (again, this works for wide tiles):
var updater = Windows.UI.Notifications.TileUpdateManager.createTileUpdaterForApplication();
updater.clear();
updater.stopPeriodicUpdate();
updater.enableNotificationQueue(true);
updater.startPeriodicUpdateBatch(
[ new Windows.Foundation.Uri(feedUrlString) ],
Windows.UI.Notifications.PeriodicUpdateRecurrence.halfHour
);
To update multiple tile sizes in a single update, the XML payload for that update must contain individual elements for each tile size.
You can see this in the App tiles and badges sample in the SDK. Scenario 1, for instance, demonstrates how to do this using (a) the C# NotificationExtensions library, (b) building the XML as a string, and (c) using getTemplateContent. One of these methods should work for you.
To give an example for case (a), here's the code from scenario 1 that also has a comment explaining more:
// This sample application supports all four tile sizes – small (Square70x70), medium (Square150x150), wide (Wide310x150) and large (Square310x310).
// This means that the user may have resized their tile to any of these four sizes for their custom Start screen layout.
// Because an app has no way of knowing what size the user resized their app tile to, an app should include template bindings
// for each supported tile sizes in their notifications. The only exception is the small (Square70x70) tile size because this size
// does not support live tile notifications, which is why there are no Square70x70 tile templates.
// We assemble one notification with three template bindings by including the content for each smaller
// tile in the next size up. Square310x310 includes Wide310x150, which includes Square150x150.
// If we leave off the content for a tile size which the application supports, the user will not see the
// notification if the tile is set to that size.
// Create a notification for the Square310x310 tile using one of the available templates for the size.
var tileContent = NotificationsExtensions.TileContent.TileContentFactory.createTileSquare310x310Text09();
tileContent.textHeadingWrap.text = "Hello World! My very own tile notification";
// Create a notification for the Wide310x150 tile using one of the available templates for the size.
var wide310x150Content = NotificationsExtensions.TileContent.TileContentFactory.createTileWide310x150Text03();
wide310x150Content.textHeadingWrap.text = "Hello World! My very own tile notification";
// Create a notification for the Square150x150 tile using one of the available templates for the size.
var square150x150Content = NotificationsExtensions.TileContent.TileContentFactory.createTileSquare150x150Text04();
square150x150Content.textBodyWrap.text = "Hello World! My very own tile notification";
// Attach the Square150x150 template to the Wide310x150 template.
wide310x150Content.square150x150Content = square150x150Content;
// Attach the Wide310x150 template to the Square310x310 template.
tileContent.wide310x150Content = wide310x150Content;
// Send the notification to the application’s tile.
Windows.UI.Notifications.TileUpdateManager.createTileUpdaterForApplication().update(tileContent.createNotification());
Related
I'm trying to create a simple application that allows the user to move an image with a TranslateTransform inside an Imagecontrol, using the ManipulationDeltaevent Handler.
However, performs the translate manipulation, the image is clipped in a weird way. In fact, it seems that it is the entire viewport which is translated instead of the image inside the viewport.
I have reproduced this behavior in this very simple application:
The code is straightforward and looks like so:
<Image
x:Name="Image"
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch"
Stretch="None"
ManipulationMode="TranslateX, TranslateY"
ManipulationStarted="Image_ManipulationStarted"
ManipulationCompleted="Image_ManipulationCompleted"
ManipulationDelta="Image_ManipulationDelta"
Source="/Assets/image.png"
>
<Image.RenderTransform>
<TranslateTransform x:Name="Translation" />
</Image.RenderTransform>
</Image>
This is the code behind:
private void Image_ManipulationDelta(object sender, ManipulationDeltaRoutedEventArgs e)
{
Translation.X += e.Delta.Translation.X;
Translation.Y += e.Delta.Translation.Y;
}
This application displays a rectangular 600x600 plain red image. I have resized the application so that the image is way bigger than the available client area. When the user slightly moves the image in the upper left direction, this is what the application looks like:
It seems, as I explained, that the entire viewport has been translated.
If I virtually add where the image should be to the screen shot above, this is what I would have expected:
In the screenshot above, one can see that the image is taller than the application so the entire height of the client area should be covered with a red portion of the image. Likewize, since the image has been moved to the left, only a narrow portion of the right screen should be white.
I hope these screenshots help give sense to my explanations.
Please, is it possible to obtain the desired behaviour when using the ManipulationModes?
Please, is it possible to obtain the desired behaviour when using the ManipulationModes?
I think the answer is no, it's not possible to do this in an UWP app, you will need to create a desktop app to obtain the desired behaviour.
In an UWP app, the Page is in a Frame, then the controls or shapes are in the Page, so basically the controls or shapes are all in a Frame container. What you want to do is actually getting the Rectangle out from its container, in this case we need another container for this Rectangle in an UWP app.
So what I could think about for this is creating a new window to hold this Rectangle. But problems will come with this new window, the app's title is along with a new window unless this window is in the full screen mode. Obviously a full screen mode window will not solve the problem.
This function can be done with Win32 APIs, you may refer to C# Drag-and-Drop: Show the dragged item while dragging, but this APIs are not supported in an UWP app. They are for desktop app only. For example, you may refer to CreateIconIndirect function. Besides, I can't find any supported APIs for UWP app which the same functions have.
I am trying to setup a layout such that it has an image with regions. Those regions,can have either other ImageView or TextView. I am able to achieve this at a high level using FrameLayout and RelativeLayout. However, it does not scale properly on different devices.
As an example here is an image
Yellow/Red Region - ImageView setup dynamically
Blue/Green Region - TextView
So On the Device, I want it to look like this:
And like this:
Note that Image scales correctly and so does child views in correct regions.
Can someone please share some ideas on how this could be achieved?
I was able to do this by writing a Custom View. I set the layout bonds based on the % offset.
For example the image would start at 15% off top and 10% off left and width is 30% card size etc.
I tested this with multiple devices and so far it is working as designed.
Have a look at Supporting Different Screen Sizes
Also have a look at Supporting Multiple Screens
This links has exactly what you are looking for. Follow the example and you will achieve the desired result.
These tutorials explains how to scale images based on the screen sizes and how to design your layout.
Extract from Google's dev site:-
Explicitly declare in the manifest which screen sizes your application supports
Provide different layouts for different screen sizes
Provide different bitmap drawables for different screen densities
Use OnConfigurationChanged() to determine the orientation and changes the views according to your requirements
public override void OnConfigurationChanged(Android.Content.Res.Configuration newConfig)
{
if(newConfig.orientation==Configuration.ORIENTATION_LANDSCAPE){
//Change the Layout width and height attributes according to your requirements
Log.e("On Config Change","LANDSCAPE");
}else{
//Change the Layout width and height attributes according to your requirements
Log.e("On Config Change","PORTRAIT");
}
base.OnConfigurationChanged(newConfig);
}
In the past I've used the Image Field Module to require a user to provide an image of specific dimensions and it's worked great. I like the new Media Library Picker Field and it's integration with the Image Editor module to allow for cropping and re-sizing.
What I'd like to do is use the Media Library Picker Field but require the user to crop and/or re-size the image to specific dimensions. Is there any way to configure it that way? So far, the best I've come up with is to provide some help text to the user suggesting that they re-size the image to desired dimensions.
Should I just stick with the Image Field if I must have the image meet specific dimensions or is there a better way with the Media Library Picker Field?
You can't enforce that the image is supplied with specific dimensions using the Orchard 1.7+ media processing features, however you can ensure that it is displayed with correct dimensions.
Orchard 1.7 introduces the concept of media profiles, which effectively allow you to create a bunch of image transformations, name them, and then use them arbitrarily throughout your site.
On a recent project I was given a load of customer profile pictures for a testimonial page on an Orchard site. They were supplied in a variety of different sizes, and I knew I needed at least 2 different sizes (one for the main testimonial page, and a smaller one for testimonial widgets shown on other pages).
In the Admin Dashboard, I went to Media -> Profiles and created a new Media Profile called Customer_Profile_Regular, then added a Resize filter to scale it down to 100x100px (the resize filter is quite flexible, and you can create your own filters easily by implementing the IImageFilterProvider interface).
I did the same for a second profile, Customer_Profile_Small, scaling down to 50x50.
Then, using Shape Tracing, I overrode the existing Media Library Picker field display shape, and replaced it with this:
#{
var imagesField = Model.ContentItem.Testimonial.CustomerProfile;
}
#if(imagesField.MediaParts.Any()) {
<div class="customer-profile-image">
#Display.MediaUrl(Profile: "Customer_Profile_Regular", Path: imagesField.MediaParts.First().MediaUrl)
</div>
}
For the testimonial widget, it was simply a case of creating a similar shape override, supplying the other profile name.
Now I can upload any image to my media library, and use it as a customer profile image on a testimonial. Orchard will automatically resize (or perform other operations on) the image based on the profile I tell it to use, the result of which is stored in the site's Media folder so that it is only regenerated when necessary.
I have many large KML data-sets, which are served using a hierarchy of region-based network-links; as described in the KML reference:
Using Regions in conjunction with NetworkLinks, you can create a hierarchy of pointers, each of which points to a specific sub-Region. The <viewRefreshMode>, as shown in the following KML file, has an onRegion option, which specifies to load the Region data only when the Region is active. If you provide nested Regions with multiple levels of detail, larger amounts of data are loaded only when the user's viewpoint triggers the next load.
This works nicely when loaded in Google Earth.
I now wish to load these in an application using the Google Earth plug-in. And I need to access the loaded content via the Google Earth API; (i.e. attach click events, alter styles) to integrate the content into the application.
The issue is, I haven't found any reference to an 'on-load' event for network links. In my mind, the way this would work is:
Load top-level network link via the API, attaching a call-back function which will be invoked when the network-link is loaded.
In the call-back function, parse the KML returned by network link. For intermediate levels in the regionation hierarchy, this KML will contain only network links to the next regionation level. Load these into the plug-in via the API, again specifying the same call-back function, which will be invoked when these are loaded (i.e. when their region becomes visible).
Eventually, the KML returned will contain the actual 'content'. At this stage we load the actual content (i.e. placemarks) into the plug-in, after performing any desired modifications (e.g. attaching event-listeners, setting styles, etc).
I'm thinking the javascript would look something like the following.
Please note: this is just a rough sketch to perhaps aid in understanding my question. I am NOT asking why this code doesn't work.
//create network link
var networkLink = ge.createNetworkLink("");
networkLink.setName("Regionated hierarchy root");
// create a Link object
//the network-links contained in the kml that will be returned in this file
//are region-based; they will only be loaded when the user zooms into the relevant
//region.
var link = ge.createLink("");
link.setHref("http://foo.com/regionatedRoot.kml");
// attach the Link to the NetworkLink
networkLink.setLink(link);
//specify the callback function to be invoked when the network link is loaded
//this is is the part that doesn't actually exist; pure fiction...
networkLink.onLoad = networkLinkLoaded;
// add the NetworkLink feature to Earth
ge.getFeatures().appendChild(networkLink);
// function which will be invoked when a network-link is loaded
// i.e. when its region becomes active
function networkLinkLoaded(kml) {
//parse the kml returned for child network links,
//this will create the network link KmlObject, with a
//region specified on it.
for (childNetworkLink in parseNetworkLinks(kml)) {
//and append them, again hooking up the call-back
childNetworkLink.onLoad = networkLinkLoaded;
ge.getFeatures().appendChild(childNetworkLink);
}
//if the user has zoomed in far enough, then the kml returned will
//contain the actual content (i.e. placemarks).
//parse the kml returned for content (in this case placemarks)
for (placemark in parsePlacemarks(kml)) {
//here we would attach event-listeners to the placemark
ge.getFeatures().appendChild(placemark);
}
}
Is this possible?
Have I taken a wrong turn in my thinking? I believe I have followed recommended practices for managing large KML datasets, but I am unsure how to use these via the API.
Addendum:
As an example of the type of problem I am trying to solve:
Imagine you are building a web application using the Google Earth Plugin, and you want to display a placemark for every set of traffic-lights in the world. The placemarks should only display at an appropriate level-of-detail (e.g. when the camera is at 5km altitude). When a user clicks on a placemark, we want the web app to load statistics for that set of traffic-lights, and display them in a sidebar.
How would you engineer this?
You wouldn't need access to the object data directly to provide the functionality you require. You would handle the data load exactly like you have done, using a hierarchy of region-based network-links.
Then if your usage scenario is like the one you set out in your addendum then you would simply use the target data from the click event to load your statistical data based on the placemarks as required.
For example, you could simply set up a generic mousedown event handler on the window object and then test to see if the target is a placemark. You can add this generic listener before you load any data and it will still be fired when you click on your dynamically loaded placemarks. There is no need to attach individual event-listeners to the placemarks at all.
e.g.
window.google.earth.addEventListener(ge.getWindow(), 'mousedown', onWindowMouseDown);
var onWindowMouseDown = function(event) {
if (event.getTarget().getType() == 'KmlPlacemark') {
// get the placemark that was clicked
var placemark = event.getTarget();
// do something with it, or one of its relative objects...
var document = placemark.getOwnerDocument();
var parent = placemark.getParentNode();
// etc...
}
}
Not sure if this is quite what you want but there is a kmltree api that will:
build out the kml tree for you based on the kml given
allow you to have a 'kmlloaded' event handler
http://code.google.com/p/kmltree/
function initCB(instance){
ge = instance;
ge.getWindow().setVisibility(true);
var gex = gex = new GEarthExtensions(ge);
var tree = kmltree({
url: 'http://foo.com/regionatedRoot.kml',
gex: gex,
mapElement: $('#map3d'),
element: $('#tree'),
});
$(tree).bind('kmlLoaded', function(event, kmlObject){ //do something here });
tree.load();
}
it does require you to bring in another js api but it works pretty good and gives you some good built in functionality.
So far I haven't found anything just from the plug-in that will fire an event when the kml is loaded...
you might be able to try using fetchKml() especially if you are hardcoding that url for the link in there?
google.earth.fetchKml(ge, 'http://foo.com/regionatedRoot.kml', function(kmlObject){
//do logic here
});
I am using the Picture Library SlideShow Web Part and I want to show the actual image not the preview image.
I found a solution to use JQUERY to expand the width of the preview image to the width I want on the page, but this of course ruins the quality of the image.
The actual image the was uploaded will be in a path: /Home%20Page%20Banners/Banner2.jpg
SharePoint creates a preview images and placed is in another path and renames the file, for example: /Home%20Page%20Banners/_w/Banner2_jpg.jpg
My question is how can I get the preview image to show the acutal full image that was uploaded and not the scaled down image?
Picture Library SlideShow web part class is marked a sealed, so there is no way to extend it.
But it could be customized on the client side, to be more precise functions from Slideshow library (imglib.js) could be overridden.
How to display full-sized(original) images in Picture Library Slideshow web part
The solution described below allows to display original images in Slideshow web part. In order accomplish it the function for initializing picture in slideshow should be overridden (see the code below).
Step 1. Save below JavaScript code to the file, for example in SlideshowObjectInitializer.txt and upload it to SiteAssets Library
<script type="text/javascript">
function SlideshowObjectInitializer() {
ShowPic = (function(ShowPicOrig) {
return function() {
var ssObj = arguments[0]; //SlideShow object
var curPicIdx=ssObj.index; //current picture index
ShowPicOrig.apply(this, arguments); //call original ShowPic
//apply some changes to display original picture in SlideShow control
ssObj.image.src = ssObj.linkArray[curPicIdx]; //display original image instead of web image
//change picture & container size to auto instead of fixed (by default web image size is used)
ssObj.image.setAttribute('height','100%');
ssObj.image.setAttribute('width','100%');
var cell = ssObj.cell;
cell.style.width = 'auto';
cell.style.height = 'auto';
cell.style.display = '';
var pcell = ssObj.cell.parentNode;
pcell.style.width = 'auto';
pcell.style.height = 'auto';
};
})(ShowPic);
}
ExecuteOrDelayUntilScriptLoaded(SlideshowObjectInitializer, 'imglib.js');
</script>
Step 2. Add Content Editor web part (CEWP) on page where Slideshow web part is located and in the Content Editor tool pane, under Content Link, type /SiteAssets/SlideshowObjectInitializer.txt.
For more details about customizing Slideshow web part please follow this blogpost