Earlier on, I tweeted about this but I had to take down the twitpic because I realized that it had my phone number on it (^_^). I received this message a while back and I couldn’t help but think: WTF. O_O

The real WTF was finding out that this is 99% likely a legitimate [...]]]>

Earlier on, I tweeted about this but I had to take down the twitpic because I realized that it had my phone number on it (^_^). I received this message a while back and I couldn’t help but think: WTF. O_O

The real WTF was finding out that this is 99% likely a legitimate message although there is nothing AT ALL in these two messages that these are legitimate Singtel services.

With all the phishing attacks that’s been happening for years, the IT Savvy-er of the netizens are doing their best to tell their friends and family not do download stuff from unknown sources and always check the domains of the sites you are accessing, etc. With the advent of 3G/mobile internet connectivity, people doing mobile banking, and so on, malicious attacks have been spreading to the mobile platform as well, as we’ve seen happening with the iPhone’s PDF vulnerability. We all have a part to play in helping each other keep our guards up against these issues, the Telco’s more so.

By doing something like this, they are basically saying “Yeah, we sometimes send you recommendations of services from a number that anyone can own” or “Yes, sometimes we offer free apps for download from website addresses with gibberish numbers and not even bother with a domain name” or “Yep, as long as there’s singtel in the web address that’s us!”. It’s very ironic how this is for a security & privacy application. No offense to WaveSecure, I know for a fact they’re a great product, McAfee does too. This was all good intention but sadly, poor execution.

How ugly can this get? If I were a malicious person who’s intelligent enough hack together an mobile app I could upload it to a domain like http://singtel.aimeegurl.com and send text messages to all the phone numbers I find, and say it’s an update to the software they’ve downloaded previously. The app can practically ask the user anything it wants since to the user, it’s their Telco’s app so of course they could trust them with their private information if they asked for it (Phishing++?) or if I were even more intelligent, I’d hack up an app that just straight away does nasty stuff without the users knowledge. Needless to say, possibilities are endless.

What’s done is done though. I’m sure investments were made on this project. Let’s hope no one exploits this. Meanwhile, the message still stands, NEVER download stuff from site domains that you don’t know for sure are legitimate, and just like in real life, there HAS to be proof of identity before complying to a request from someone who claims to be someone.

I’ve been using Desktop Connect for a bit and wanted to share my experiences.

First I did a speed test with my iPad. I called Singtel up yesterday and asked to have my 1Mbps data plan switched to the iPad data plan that’s supposedly 7.2Mbps. Maybe it hasn’t taken effect yet.

This is the screen [...]]]>

I’ve been using Desktop Connect for a bit and wanted to share my experiences.

First I did a speed test with my iPad. I called Singtel up yesterday and asked to have my 1Mbps data plan switched to the iPad data plan that’s supposedly 7.2Mbps. Maybe it hasn’t taken effect yet.

This is the screen shot of my usage prior to the remote session. I have turned off WiFi by the way.

So when you launch Desktop Connect (or Easy Connect I’m not really sure what the name is cause it’s listed Desktop Connect in the app store) I can see the machines that I have associated with my account. You’ll need to be running an application on your host machine and sign in with the same Google ID there too.

You’ll see here I’m logged in at 19:49.

For about 7 minutes I clicked on links, scrolled around, queued up a download.

After I disconnected, this is the screen shot of my data usage.

So for the quick browsing and initializing of download, it was about 6MB down for 7 minutes. Of course, your usage will probably depend on what you do during the session. Perhaps if you brows images, or even videos, or flash animations, you’d have higher consumption than when you’re only browsing through text.

One thing I’ve discovered is that it doesn’t work well when your host has an external monitor. I was trying to access my home machine from my iPad earlier and I had left it on with the external monitor attached. I couldn’t I could see what was going on on the screen but everytime I try to click or scroll, nothing happened. I discovered when I got home that although my PC brought all windows to the primary monitor, the mouse pointer was still on the other screen . So, remember to disconnect external monitors before you go out in order to let it function properly.

Another thing, if you’re using Win7 on your host machine, right clicking (there’s a button to toggle click mode to right or left click) to get the jumplist works on the host machine (since you can see the screen simultaneously on the host and ipad) but it doesn’t seem to render on the iPad. Strange.

Some folks have asked whether the multitouch functionality for Win7 works. Answer is no, the app actually maps out the mt gestures of the ipad for things like showing the toolbars, alt+tabbing. two-finger scroll works though not very well. No matter how small I make the movement, the window always seems to scroll all the way to the end.

All in all, I think it’s good enough to at least send some files from home that I’ve forgotten or set up a folder to sync with Windows Live Sync so I can access more files from anywhere, etc.

What started out as a rant about how Office Web apps doesn’t seem to work well with the ipad has become a rant about how the ipad, just like the mac, doesn’t have a decent blogging application.

Fine, the ipad seems to be marketed more as a content consuming and non-content creating device but [...]]]>

What started out as a rant about how Office Web apps doesn’t seem to work well with the ipad has become a rant about how the ipad, just like the mac, doesn’t have a decent blogging application.

Fine, the ipad seems to be marketed more as a content consuming and non-content creating device but my question is why? it’s a great form factor for writing on the go, its just a shame how the device seems to lack in terms of hardwawre (camera) and software (blogging app (& dvorak keyboard while I’m at it)) to enable such.

Okay so now to the supposedly main rant..

I thought it would be great to be able to access the office web apps through my iPad, getting word, excel and office for free but to my dismay, I’ve experienced some hiccups..

So first try heading down to http://office.live.com and signing in with your windows live id. Once your signed in, click on the “PC Site” at the bottom of the screen.

.

You can now proceed to either opening or creating a new document

So my experience with creating a new document was getting stuck at 95%. When I tried opening an old document, it just tanks my safari. not sure if its my account or my ipad but its what im seeing   hope it gets fixed eventually. I just think it would be very cool.

//painfully blogged on my ipad using a remote desktop connection to win7 with live writer, the best blogging software evah, and I say painfully because the first half of the blog post I was actually trying to touch type on this device.. eventually I succumbed to semi-hunt-and-peck also, I had to send those screenshots one by one over email so I could access them on the remoted win7 machine.

DISCLAIMER: I write this post more for myself because I tend to forget how to do things. There can very well be other proper ways of doing this, but this is the “good enough” solution, at least for me.

I was playing around with WPF again since it’s been a while. I wanted [...]]]>

DISCLAIMER: I write this post more for myself because I tend to forget how to do things. There can very well be other proper ways of doing this, but this is the “good enough” solution, at least for me.

I was playing around with WPF again since it’s been a while. I wanted to customize the scrollbar and I found it was quite a task. I finally figured out a simple way of doing it.

The look I wanted was a simple, thin, vertical bar (I guess you could do the same with the horizontal bar.

1. So we start with a ScrollViewer that contains a RichTextBox(or whatever you want)

2. Now we proceed to EditTemplate –> Edit a Copy.

3. You’re probably already familiar with this dialog box. Give your template a Name when you click okay, by default, it’ll add this to your window’s xaml. But if you want to later on reuse this template, choose the option to define it in a Resource dictionary. Later on, all you’ll have to do is add that resource dictionary to your project and you’ll be able to apply the style to your ScrollViewer.

4. We’ll fix the VerticalScrollBar in this sample but you can very well do the same for HorizontalScrollBar. To start, right-click on PART_VerticalScrollBar and click on EditTemplate –> Edit a Copy. Again, you’ll be asked to select a name and where you want to save this style. This time, we’re editing the ScrollBar component (previously was the entire ScrollViewer).

5. If you expand the template that you’re presented with, you’ll see the elements below. In my case, I want to delete the two RepeatButtons since clicking anywhere above and below the Thumb more or less does the same thing.

5a. But lets say you wanted to edit the buttons, what we do, is draw out what we want the button to look like anywhere on the canvas. We’ll delete this later on. Here, we have a Grid that contains our desired button template.

5b. What we’ll do now is right-click on the grid and select Make Into Control. A dialog box will appear that will ask you to select which control you want this grid to magically turn into. You’ll notice above that the buttons for scrolling up and down are RepeatButtons, so we can type into the search box to find the component, click to select and we’ll name it into something we will recognize later on, in my case, ScrollUpButton.

5c. Now we’re editing the RepeatButton template. We can go ahead and delete the automatically generated ContentPresenter since we don’t need any content in our template.

5d. You’ll notice that you can also go into the states tab to edit the look of your button on different states.

5e. Once you’re done editing, you can go back to the Objects and Timeline tab and click on this button that will take you back to the ScrollbarTemplate

5f. Now to apply the style, select the first RepeatButton –> Edit Template –> Apply Resource –> ScrollUpButton (or whatever you named your template)

5g. You’ll now see the button with the style you’ve defined. Now remember to delete that Grid turned Repeat button that we used to create the style or else, it’ll become part of your template/application

6. Like I said, I’m deleting my up and down buttons because I don’t want them. You’ll notice that the grid this ScrollBar was defined in has Rows that hold the buttons and the thumb / track. I’ll need to delete the extra rows since I don’t need them now and I want the thumb and vertical bar to occupy the entire height. I tried deleting this through the designer but it only wreaked havoc (might be a user error) but I found the safest way to do this is to delete from the XAML code.  Click on this button in the upper right corner of your design canvas to show the xaml editor. (Now you know why I said XAML typing instead of XAML editing)

7. What I’ll do now is delete the 1st and 3rd row definitions.

8. Now I’ll see my scrollbar occupy the full height.

9. Next, I want to change the look of the ScrollBar’s thumb. You’ll see that the type of component this is is a Thumb. So we can do as we did with the Repeat button to style this. Make into Control only works on single objects so if you have several objects you want to include in your template, just right-click –> Group Into –> Grid to make them one.

10. Now you can follow the steps in 5b but this time, instead of RepeatButton, we select Thumb in the Make Into Control dialog.

11. Now continue with 5f to go back to ScrollBar template editing and apply the template to the Thumb object. You’ll now see our ScrollBar has changed. Again, remember to delete that extra thumb that we used to create the style.

12. One last thing. Maybe you don’t want your ScrollBar to be as thick as this. So using the button in 5e, go back up to the ScrollViewer template. With the PART_VerticalScrollBar selected, go to the Properties tab and scroll down to the Style property. You’ll see that it’s highlighted in green which means it’s being bound to a local resource.  

13. Click on Edit Resource

14. You’ll then see our style, and if with it selected, you scroll down the Properties tab to the Width property, again you’ll see that the Width property is bound.

15. Click on the Advanced Options button (that little square) and select Reset. You should then be able to put in whatever width you want.

16. Now when you click on the button in 5e. (Return scope button) it actually takes you to the topmost level which is the window. So you’ll have to do an Edit Template… on the ScrollViewer again to edit the ScrollViewerTemplate. (By the way, I’ve edited my Thumb template to make it look alright with a Width of 5, i.e., change the width of the topmost grid in the template to 5 and fixed the components inside to make it look good).

You’ll notice that the second column in the grid is set to auto-sized so you’ll want to click on that icon till it says pixel sized (locked lock)

17. With the handle selected (that inverted triangle there) you can now set the width property to what fits your template.

Now if you return scope to window, (5e), and run your app, you’ll now see your fully functional and newly styled ScrollViewer.

hmm.. looks like there’s one more property you need to set. With the PART_VerticalScrollbar selected, set the Background property to No brush.

This is the effect you will get. Note, I’ve also set the RichTextBox borders to zero to remove all borders.

And that’s it!

I’ve been on an app purchasing spree for a while so I had to update my iTunes account with an SG one. Recently though, MS has released a few apps that are US only: Windows Live Messenger & Bing. So what I did, I created another account with a US country (you can [...]]]>

I’ve been on an app purchasing spree for a while so I had to update my iTunes account with an SG one. Recently though, MS has released a few apps that are US only: Windows Live Messenger & Bing. So what I did, I created another account with a US country (you can search how to create one without having to input credit card info). Once you have a new account, you can go to settings –> store and logout/login with your new account.

It’s a bit of a hassle though because once you’ve downloaded an app with one account, even if it’s available on both stores, you’ll have to be in the correct store to do an update. If that happens, just delete and re-download (of course, you’ll only want to do this with free apps.

So what to check out? For Windows Live Messenger, apart from the obvious social feed integration and IM, you should also check out the photos application that allows you to apply some basic effects to your photos before posting them onto skydrive, privacy setting settable to everyone or just you. <- new emoticon!

For the Bing app, there’s a new social tab that allows you to integrate with facebook and twitter so when you do a search, it searches your social feed as well.

Another new one is the Camera search. I thought this was really cool, you can search a barcode or cover art using your iPhone camera. I haven’t seen a successful search using the barcode yet since my camera is a bit crap. Perhaps 3GS users will have better luck.

So yes, now I have to figure out how to back up my apps to update to iOS4.
//Update: so it’s in iTunes: Right click on iTunes –> transfer purchases. Haven’t tried it yet though, I accidentally hit sync thinking it would prompt me for options on what to sync, now it’s just taking forever to backup. AND no cancel button.

I stumbled on this when I logged into YouTube using the wrong password and found myself logged into an account where I had no activity/uploads whatsoever, when I distinctly remember adding favorites and uploads on my account. Apparently, this is what happened:

1. A while back I created a YouTube account with the username [...]]]>

I stumbled on this when I logged into YouTube using the wrong password and found myself logged into an account where I had no activity/uploads whatsoever, when I distinctly remember adding favorites and uploads on my account. Apparently, this is what happened:

1. A while back I created a YouTube account with the username Foo, and uploaded, and favorited some videos on the site. When I created the account, I had linked it to an email address bar@live.com.sg.

2. At a later time, I created a gmail account Foo@gmail.com with a different password (password2).

3. At a much later time, I decided to create a YouTube account (by this time I had forgotten I already had one ) using my gmail credentials. When signing up, I had to put in Fuu as Foo was not available as a username, which I probably found strange but forgot about at that time.

4. I went back to using my former password by the time I wanted to login to YouTube again, so I put in login name Foo with the former password (password1) and then started favoriting videos.

5. After a while of YouTube inactivity, I one day decided to log back in, and absentmindedly put in my new password (password2). At first I panicked, I thought my account had been wiped out as there were no favorites nor uploads in my account. Then I noticed my account name Fuu. That’s when I tried logging in with my other password (password1), and sure enough, it took me to the account I was accustomed of using.

6. Just for fun, I changed my Foo (bar@live.com.sg ) password to be the same as my Foo@gmail.com (Fuu) password. Obviously, it goes to the former unless I specify Foo@gmail.com as my login name.

I just tried it out signing up test accounts (though I think I forgot my password after I changed again (or did I?) because I couldn’t login to my test account anymore) and the same thing happens.

The chances of this happening to 2 different people are I guess next to none. I wonder if the same happens with Flickr + Yahoo. Yahoo accounts take longer to sign up so I’m too lazy to test but my guess is yes. If I am right, I wonder what a good solution would be to prevent this from happening. If I’m wrong, I’m interested to find out what the fix is. I’m sure someone’s already figured it out with all these companies buying other companies.

Just a quick note:  I’m sure MS will be providing controls to this interface in the future so we don’t have to spend too much time building these controls ourselves This post, as with the previous one, was meant more as an Expression Blend Exercise for myself to be explore the features [...]]]>

Just a quick note:  I’m sure MS will be providing controls to this interface in the future so we don’t have to spend too much time building these controls ourselves This post, as with the previous one, was meant more as an Expression Blend Exercise for myself to be explore the features of Silverlight / Windows Phone 7 and Expression Blend to see how much can be done with what we have today.

There’s one annoying thing that I can’t figure out though: on the first scroll, you’ll notice from the video that the screen flickers. There’s probably something I’m doing wrong here but I just can’t figure it out yet

So I had set out to accomplish two things: Simulate the looping background and sections in the panoramic interface on windows phone and instead of flicking, let the user touch and drag the controls from left to right before switching. I was able to accomplish the two, but like I mentioned, there’s an annoying thing that happens on the first transition from state one to state two. Another thing that’s wrong with this sample is that, I shouldn’t be switching states right away on a drag to left or drag to right. You should be able to pan a bit and the screen holds to that position till you pan to a certain threshold before the interface snaps to the next section. But yeah, maybe next time.

The first challenge was implementing the drag to next state instead of the flick. I couldn’t really isolate this into either a trigger or an action as it’s actually a combination of both, therefore a behavior. Basically, depending on the sum of the left and right value of the users drag motion, I trigger either GoToNextState() or GoToPreviousState(). Code for these two were modified from http://gallery.expression.microsoft.com/en-us/MIXBehaviorPack.

So I built a PanoramicPanningBehavior that has a few properties I can set.

First there are  the BackgroundElement, SectionsElement, TitleElement. I want them to be grouped so when it’s time for me to handle the drags, they don’t necessarily have to move at the same pace. That’s when the BackgroundMovementFactor and TitleMovementFactor come to play. Intstead of translating the background and title according to the value of the drag, I multiply it by the specified factor first. I’ve also let myself specify the StateGroup that has the states of our sections as described in my previous post, just in case you have other stategroups in the scene (though I haven’t tested this yet ^_^)

Now that I have the essential parts of my UI identified, I can now define what I want to do with them in my behavior when I start handling the events ManipulationDelta and ManipulationCompleted.

First for ManipulationDelta, I first check to see whether the parts are not null, and then based on the input factors, I apply them to the Translation.X property of the DeltaManipulation, or basically the change in the touch points and assign the value to the TranslateX properties of the CompositeTransform of the elements that have been identified through the properties. I think it’s better to read the code  

void RootVisual_ManipulationDelta(object sender, ManipulationDeltaEventArgs e)
     {
         if (!e.IsInertial)
         {
             if (BackgroundElement != null) {
                 var BG = getElement(BackgroundElement).RenderTransform as CompositeTransform;
                 BG.TranslateX += e.DeltaManipulation.Translation.X * BackgroundMovementFactor;

             }
             if (SectionsElement != null) {
                 var SE = getElement(SectionsElement).RenderTransform as CompositeTransform;
                 SE.TranslateX += e.DeltaManipulation.Translation.X;

             }
             if (TitleElement != null) {
                 var TE = getElement(TitleElement).RenderTransform as CompositeTransform;
                 TE.TranslateX += e.DeltaManipulation.Translation.X* TitleMovementFactor;
             }

         };
     }

If I wanted to run the project at this point, I’ll have to create a stateGroup and the section states in order for this not to go haywire. When I recreated the project, I actually added the panning behavior last. Next we’ll see the reason why I say this is meant more as an exercise for myself (and maybe for building demo apps) than production code. I think from this screenshot you can more or less figure out what I did.

Okay, so seeing as how you’re able to, from the leftmost part of your UI, be able to pan even more to the left to peek and even transit into the rightmost section, there had to be something there. And since I didn’t want to duplicate all the controls, I wanted to use WPF’s VisualBrush. Sadly, this isn’t available for Silverlight, however, I did find this: http://dotneteers.net/blogs/vbandi/archive/2009/03/26/discovering-silverlight-3-poor-man-s-visualbrush-behavior.aspx When I tested it out, it wasn’t as performant as WPF’s visual brush, but since I only needed to draw the UI once, I thought this would do.If we had the PathListBox in WP7, that would have been a better option too.

If you look at my visual tree, I basically created a brush for the background image(image), the TitleGrid and the ContentGrid (which you won’t see since I collapsed it because there were more stuff inside. Next, you’ll notice that these elements are inside a stack and before and after each of them is a Rectangle. Basically, I created identically sized rectangles that use as brushes the PoorMansVisualBrush.

To do this, after adding a reference to the PoorMansVisualBrush (which I’ve made a WP version of ), I select the Rectangle and temporarily choose, TileBrush, click on Advanced Options in the Fill property and select Convert to New Resource… This will prompt me with a dialog to create a new brush resource and I’ll name it accordingly. In this Case, I have BackgroundBrush.

Next, with the behavior selected, I set the properties accordingly. Most important to note is to set the UpdateIntervalDuration to 00:00:00 so that the behavior doesn’t waste resources by repainting the brush. Next, you’ll want to go to each of the rectangles and assign their fill properties to the BrushResources you created. Also remember to set the Stroke to No brush especially if you have background images that are supposed to seamlessly merge the leftmost and rightmost portions. Now the tedious part is doing this for all the rectangles.  

The last, and yet another tricky part is setting up the states. What you’re seeing here is pretty much the same as the last post where I have 3 states, to show my 3 sections. Note that when you position the states, you’ll want to position the actual to the middle/actual objects. It’ll probably be too difficult to set up using the rectangles with the brushes anyway since they don’t render at design time ^_^. Here, you’ll notice I’ve added custom transitions for when Section1State goes to Section3State and vice versa.

To do this, I’ll click on add transition button and select Section1State –> Section3State

In order to see what I’m doing better, I’ll switch to the Animation Workspace by pressing the function key [F6]. I’ve also minimized the stacks back so it’s easier to manage. With the transition to Section3State selected I’ll record a keyframe at the start, and end of the .5s transition.

When I record a key frame at the end, it’ll actually default to moving to the right most part of the actual controls which I changed to the one below. I’ve highlighted the outlines of the rectangles that mimic the actual controls.

Do the same for transitioning Section3State->Section1State. What will happen here is the application will play this custom transition animation to showing the visual brushes and when the transition is done, it’ll switch to the destination state where the real controls are visible.

Run the app to test and that’s it!

Again, not an ideal solution for production but at least I got to learn a few more useful things in Blend that might be useful in the future.

I’ve uploaded the code here so if you want to test it out, download the zip file, rightclick –> properties –> Unblock to avoid getting those dll not found / inaccessible errors.

To make things easier, I’ve made a behavior library for [...]]]> I was reading through the UI Design and Interaction Guide for Windows Phone 7 Series and found out that there is currently no panoramic application template or control provided as part of the standard application platform. Nothing stops us from creating our own though.

To make things easier, I’ve made a behavior library for everyone to use that will handle flick gestures. I’ve also included a “GoToNextState” behavior which I based on http://gallery.expression.microsoft.com/en-us/MIXBehaviorPack. If you want to follow along, you’ll need to download my behavior library. Also, if you don’t know where to get the Blend bits, check out this post: http://electricbeach.org/?p=460

So, let’s start by creating a new Windows Phone Application project in Blend 4.

You’ll be presented with a default layout. Obviously, your panoramic screen design will go outside the bounds of the “phone”. Layout your screen accordingly. This is what I did with mine.

Now that I have all my elements on screen, I’ll create 3 visual states, one for each active session. Let’s go into our States tab and add a state group called Sections. To do that, click on the icon with a green plus sign.

In the Sections state group, let’s add the 3 states and name them accordingly. For each state, let’s also move the Grid along the  x-axis.

We can also set the default transition to some built in easing functions to smooth out the user experience.

In my case, I used the back easing function but you can play around with the different functions to see what suits you. You can preview what the transitions look like by clicking on the Turn on transition preview button.

Okay, now we’re all set. The only thing left to do is enable state changing when a user flicks the screen either to the left or to the right. This is where we will be making use of the my WPBehaviorsLibrary. We’ll go into our asset library –> behaviors tab and you’ll find a behavior called GoToNextState and GoToPreviousState:

Drag and drop these two behaviors one by one to the LayoutRoot so that it looks like this:

With one of the behaviors selected, go into the property inspector. You have a few options you can set (Loop & UseTransitions) which are pretty self explanatory.

. You’ll notice there is also a trigger property. The default trigger type is an event trigger. Let’s go ahead and click New to select the FlickGestureTrigger.

When you click ok, you’ll find that the Gesture has a Direction property that you can set. Basically, we’re saying that the GoToPreviousState action gets fired when the user triggers a flick to the Right. Do the same for the GoToNextState behavior but with a flick to the Left.

And that’s it! Press f5 and select Windows Phone 7 Emulator, unless you’re lucky enough to have a Windows Phone 7 Device.

You’ll get something like this:

After reading some more on the UI Guidelines, they’ve mentioned a few things about the title like moving at a different speed from the sections, etc. so I’ve tweaked the animations a bit,and now I have the title outside the overall grid, animating it separately. I also have different easing functions on the first and last page from the middle one. The result is this:

You can get the code for this project as well as the library here. Also, although I’ve only managed to port  (i.e. copy paste) the States behavior from the Mix Behavior Pack to a Windows Phone behavior,  I’ve recompiled the pack to work with Silverlight 4. It’s in this folder as well.