Problems with MediaElement showing Video inside a Panorama - windows-phone

This script sets up a Panorama Control with 5 items, then loads up a video inside a MediaElement in the second Panorama item.
If I reduce this down to 2 items then no video shows (the media element is "invisible"), but you can still hear the audio - i.e. something like:
panorama = Panorama.new
panorama.title = "Video panorama"
Host.content_holder.children.add panorama
for i in 1..2 # if this is >2, then the video shows
panorama_item = PanoramaItem.new
panorama_item.header = "Child " << i.to_s
panorama.items.add panorama_item
if i == 2
panorama_item.orientation = Orientation.horizontal
media_element = MediaElement.new
media_element.source = Uri.new("http://files.ch9.ms/ch9/f2c3/b59b6efb-3c70-4bc2-b3ff-9e650007f2c3/wp7ces_ch9.wmv")
panorama_item.content = media_element
else
text_block = TextBlock.new
text_block.text = "Hello world"
panorama_item.content = text_block
end
end
I guess this is something to do with the animation and timing of the initial Panorama show - but I've not been able to get any grip on the problem.
The problem does appear to be the same in C#/XAML so it's not a scripting issue.
Has anyone got any ideas of where to look?

Don't have less than 3 items in your Panorama - I've heard it from MSFT peeps as a UX guideline. When technical issues have come up relating to a panorama with only 1 or 2 items those same people have pointed out that the Panorama is not intended to be used with so few items and so you may get weird behaviours.
Also be careful showing video in a PanoramaItem - as this is not the way the Panorama control is used in the standard applications - so it may fall outside the guidelines.

Related

How to convert a panorama item into page/data grid

I am new to Windows phone dev. I am following this excellent article ( http://developer.nokia.com/Community/Wiki/Weather_in_Windows_Phone_7 ) and have learnt something about how to load xml data and show it as a useful info in a paronama view. But now instead of panorama i want it to be shown as a page. I am not sure if its in a page tag or data grid tag that I should work with. Can someone please help me with how to convert this piece of code to some thing which can be displayed in a page
// create PanoramaItem
PanoramaItem panoramaItem = new PanoramaItem();
panoramaItem.Header = queries[query];
// modify header to show only city (not the country)
int index = queries[query].IndexOf(",");
if (index != -1)
panoramaItem.Header = queries[query].Substring(0,queries[query].IndexOf(","));
else panoramaItem.Header = queries[query];
// use ForecastTemplate in Panorama Item
panoramaItem.ContentTemplate=(DataTemplate)Application.Current.Resources["ForecastTemplate"];
panoramaItem.Content = pio; // add Panorama Item to Panorama
Panorama.Items.Add(panoramaItem); // query next city forecast
At first, be sure that Pivot is useless for you. Its like Panorama, but Pivot :) See differences here, here, here(nice one) or here
Tried to paste some code here, but SO is not showing tags. So, take a look at <.Grid.ColumnDefinitions> and <.Grid.RawDefinitions>. Dots at the beginning are just for rendering.

Accessing the different regions of a border layout

In Sencha's API for border layout it says:
There is no BorderLayout.Region class in ExtJS 4.0+
What I found on various blogs, for accessing the center panel was this:
var viewPort = Ext.ComponentQuery.query('viewport')[0];
var centerR = viewPort.layout.centerRegion;
Again to the docs, I see that centerRegion is a private function (why?), and I don't care to rely on those, for future proofing. Also, there is no westRegion, northRegion, etc...
How does one get to these items?
I could of course get the items inside the regions: The various panels, and such, but I want complete control of the viewport that holds my border layout.
This is what I'm doing now:
var viewPort = Ext.ComponentQuery.query('viewport')[0];
var view = Ext.widget('my-new-tab-panel');
viewPort.layout.centerRegion.removeAll();
viewPort.layout.centerRegion.add(view);
Is there a better way?
Usually, I setup an id for each container I have to work with. So, my center region will have an id and I'll get it with Ext.getCmp() function.
Otherwise, to access to the viewport items you can do as follows:
var viewPort = Ext.ComponentQuery.query('viewport')[0];
var view = Ext.widget('my-new-tab-panel');
viewPort.items.items[0].removeAll();
viewPort.items.items[0].add(view);
If you've defined center region as the first item of viewport, then the above code it's ok but if you've defined it as the third or the fourth, then you have to change the index according to the position of your region (viewPort.items[3] or viewPort.items[4], etc).
Another way is to use query selector:
var cr = viewPort.down('panel[region=center]');
cr.removeAll();
cr.add(view);
However, following this way, you have to query on a precisely xtype (as panel in this case).
Anyway, I think the best way is to use an id for each region.

Windows 8 periodic tile not updating

I have created a dynamic page for Windows 8 periodic tile updates. The url for the tile is:
http://www.dealsapiens.co.uk/ws/xml.aspx?action=tile
So I try to use the following code:
// update the tile poll URI
var notifications = Windows.UI.Notifications;
var polledUri = new Windows.Foundation.Uri("http://www.dealsapiens.co.uk/ws/xml.aspx?action=tile");
var recurrence = notifications.PeriodicUpdateRecurrence.hour;
var tileUpdater = notifications.TileUpdateManager.createTileUpdaterForApplication();
tileUpdater.startPeriodicUpdate(polledUri, recurrence);
However, when I run and stop the add and go to Start Menu, I do not see the tile images, it just renders a black tile. Any ideas? Do I have some problem with my tile XML?
In your template, you're using invalid id attribute values. The ids correspond to positions within the tile. For the square tile, the id should be 1; for your wide tile you want ids 1 through 5 with each corresponding to the area of the tile that should be occupied by that image.
I've adjusted your tile XML and hosted it at http://jimoneil.blob.core.windows.net/tiles/dealsapiens.xml - give it a shot. It's working on my end.

Rebol/View: How to assign images to layout already created?

Using Rebol/View 2.7.7, I'm trying to create a card game based on Nick's Rebol tutorial at: http://re-bol.com/rebol.html#section-10.18. What I want to do though is read the cards from the binary file Nick created, discard some of the data, and use it to layout a tableau of cards, 4 rows of 3 columns, with the 2 center card locations not used.
Here's my code:
protect-system
random/seed now
do %cards.r ;--include the binary card data
the-tableau: [
size 320x480 backdrop 0.170.0
style tabstyle image 80x100 teal
style holdplace box 80x100 coal
across
at 30x20 tc1: tabstyle
tc2: tabstyle
tc3: tabstyle return
at 30x130 tc4: tabstyle
tc100: holdplace
tc5: tabstyle return
at 30x240 tc6: tabstyle
tc200: holdplace
tc7: tabstyle return
at 30x350 tc8: tabstyle
tc9: tabstyle
tc10: tabstyle
]
lc: copy []
lc: [tc1 tc2 tc3 tc4 tc5 tc6 tc7 tc8 tc9 tc10]
deck-cards: copy [] ; The deck holds all of the cards from the binary file
deck-cards-num: copy []
deck-cards-color: copy []
lay: layout the-tableau
foreach [card label num color pos] cards [
dimg: load to-binary decompress (card)
append deck-cards dimg ;feel movestyle
throw-away-label: label
append deck-cards-num num
append deck-cards-color color
throw-away-pos: pos
]
random-card: does [pick deck-cards random length? deck-cards]
foreach c lc [set-face get c deck-cards]
view lay
do-events
But this doesn't show the cards at all. I'm not even sure it's reading the correctly? Where is the problem?
Actually you didn't use the random-card function in your for loop at the end... :-)
foreach c lc [get c set-face get c random-card ]
You note that you are not sure if data was loaded correctly...
here is a simple way to find out... just print/probe the TYPE? of that data
dimg: load to-binary decompress (card)
probe type? dimg
In this case it will print out image! in the console... so yep... that's working. :-)
As an added little detail, I noticed you didn't compensate your random for the "back face" image in the card data (which is at its end), so the random-card function should be fixed like so:
random-card: does [pick deck-cards random (length? deck-cards) - 1] ; - 1 since we don't want the back face to be picked.
You only need 'do-events if the event loop is not started.
View/new does not start the event loop .. but View does
I'm not addressing your actual problem though :(
to make the do-events note clear, I added a little answer here so I can add some inline code....
here is an example where you'd want your do-events to be used.
view/new lay ; display the interface right now. (with no cards)
random-card: does [pick deck-cards random (length? deck-cards) - 1] ; - 1 since we don't want the back face to be picked.
; deal cards with a half second delay.
foreach c lc [f: get c set-face get c random-card wait 0.5]
do-events
here, any code you put after 'DO-EVENTS will be executed once all view windows have closed.
which can be things like tmp file cleanup, save on exit, "save changes" dialogs, etc.
additional note:
While building graphics code, its a good habit to place this at the very start of you application:
print " "
It will open up the console, and then any view windows will show up in front of it.
When ready to share, just comment the line and remove any print statements in your code.
this is useful for 3 things:
1) Its usually highly annoying when the console always pops-up over your application while its tracing (print/probe/etc) some stuff after your window opens.
2) This also has the more useful side-effect of showing you if your application quit correctly since the console will ALSO quit when all waits have terminated correctly.
In your original example, if you add the above print, then you'll see that the console never closes, so this means the application is still running with no more application windows listening to events.
3) It also has the advantage that you can terminate the graphic app directly by closing the console window. This effectively closes all windows and waits immediately and shortcuts any "on application quit" code you might have (code after do-events).

How to use Silverlight 4 Beta Print Preview?

One of the Silverlight 4 features listed in a lot of the PDC documents is Print Preview.
I've searched for examples on how to use this and found nothing so far. Has anyone got this working yet? Can you give me some pointers on how to implement a simple web app with print preview in.
I have not seen print preview as any of them but actual Printing support in which you can control which controls are printed and events based on the printing process.
After looking for a while I found a way to do this by combining some features I found in other projects, but they used it for image manipulation. I tried with printing and it seems to work fine.
Here how it works:
Get the base container for the print contents converted to a bitmap by using WriteableBitmap, here I´ll use a Canvas:
WriteableBitmap wb = new WriteableBitmap(this.canvas1, null);
Use this bitmap as a source for a Image control (can be inside a ScrollViewer, what is even better).
this.imagePreview.Height = wb.PixelHeight;
this.imagePreview.Width = wb.PixelWidth;
this.imagePreview.Source = wb;
Set scaling base units (used 1 percent in this case):
Point scale = new Point();
scale.X = imagePreview.Width/100d;
scale.Y = imagePreview.Height/100d;
Then adjust the scaling using a Slider (optional)
private void vSlider_ValueChanged(object sender, RoutedPropertyChangedEventArgs<double> e)
{
imagePreview.Height = scale.Y * vSlider.Value;
imagePreview.Width = scale.X * vSlider.Value;
}
I think from the lack of responses and the fact that as Hurricanepkt pointed out in his reply Tim Heuer and others talk about a virtual print which if displying the same thing on the screen could be built quite easily into your own bespoke Print Preview functionality that the Print Preview listed in some lists is actually people misinterpretting what the Virtual Print documents actually are.