Hi! My name is Sérgio Costa. I've pretty much developed all sorts of websites and web applications since 1999. From the small company website to huge B2C/B2B portals. Currently, I am a Realtime Developer Evangelist. I like to think I am helping changing the web as we know it. This is my personal space where I post my personal thoughts and opinions.
This is my last post here on Tumblr (at least on this blog). I have moved my blog to another platform. You can still find me at www.sergiocosta.me. Don't forget to follow me on twitter!
RaspberryPi motion detector with remote alert using Realtime and Python
A few months ago I decided to finally buy me a Raspberry Pi. I loved the concept of having a small piece of hardware that, although obviously limited by its size, it's still a computer, with its own operating system and easily accessible to developers to hack away cool projects.
A couple of weeks ago we at Realtime released the Python API (you can find the documentation here) and I decided to give it a try with one of the small fun projects I had in mind: making the RPi a motion detector that could broadcast real-time warnings.
For this project I am using a Microsoft LifeCam VX-800 which worked flawlessly from the start. I have seen reports that the Playstation Eye also works great, although I haven't tried it myself - call me lazy. Any USB camers should do the trick, actually. I can only tell you my experience with the Microsoft cheap camera, and it works amazingly well.
As for the motion detection, I used Motion. It took me a bit to get everything to work, as there were some dependencies that needed to be installed, but all-in-all it was pretty straightforward.
Please note: this is NOT a full-blown application. I just want to demonstrate here how easy it is to set all this up. The code I present here is not without flaws and it is NOT the perfect and correct way to develop a production-ready piece of software. There are some issues that I describe at the end of this post which should be trivial to solve to any Python expert out there. Again, please see this post and the code included in it as a mere demo.
Note 2: (added May 3rd): As stated by one of the folks commenting bellow, I could have used the ORTC RESTful API, which would actually be even easier. I wanted to use the native Python API for this example and will soon release another post with the much easier solution of using the REST API instead of using Python.
Installing Motion
To start with, it is always recommended you start by updating your Linux build by entering:
sudo apt-get update
After which you should then install Motion:
sudo apt-get install motion
Once it's installed we will need to configure it. We'll do that later on, though, so it's time to get our hands dirty on some coding.
Our Python script
To keep everything simple, I used Realtime's Python Pub/Sub example presented in GitHub as a base for my script, which you can grab at https://github.com/RTWWorld/pubsub-examples/tree/master/Python.
The example provided at GitHub is simple, yet powerful. Using it you can connect to an ORTC server, disconnect, subscribe and unsubscribe channels, send and receive messages. It's all very easy, as it is normal with the other Realtime APIs.
I added some variables and changed the method on_subscribed in order for my script to send a message indicating that we just detected movement as soon as we subscribe a channel.
def on_subscribed(sender, channel): print ('ORTC Subscribed to: '+channel) ortc_client.send(channel, 'Seems like we have an intruder!')
The workflow for the script is pretty simple. After our variables, we set up some methods to handle the ORTC events.
Once our script starts running, we connect to the ORTC server. This connection will cause our on_connected method to kick in which, in turn subscribes the motion:cam1 channel. Subscribing a channel also raises an event and our on_subscribed method is called, which finally sends our message to the same channel we have subscribed. The logic doesn't stop here but it's very easy and you'll understand it easily after a quick look at the code.
The bottom line is: our message will be sent when our script runs. This take a few seconds as we need to connect to the server — a bit of a overhead — but it does get sent.
Configuring motion
The next step will be to configure it but first you need to change permissions on the motion.conf file through the following commands:
You can then open and edit the file. I used Nano to do it and you can do it too by entering:
sudo nano /etc/motion/motion.conf
Will will notice that the file is rather lengthy but we only need to edit a line, which will call our script. We will assume our file is placed at /home/realtime-motion-alert/realtime-motion-alert.py
The line we need to edit is the one that indicates Motion that it's supposed to call a external script. Once you open our file in Nano, search for on_motion_detected and edit it so it looks like this:
Now simply run Motion by entering motion and hitting enter. You should see something like the image bellow.
Move the camera or make something else that makes the image change a bit (wave at it, for example) and you should have some more output. Our messages should be on their way too and you should see them on the output too.
Testing our motion detector
Seems like we're cooking. So what else do we need? Well, we do need to see if it's actually working!
Our output says that we are broadcasting data so anything that subscribes to our motion:cam1 channel (as long as it's using the same Application Key) should get it, right? Let's see if that's true, then.
One of the easiest ways of doing it is by building a small HTML page that connects to ORTC, subscribes our channel and outputs the data:
Once our page gets a message, it displays it, with the current timestamp, by adding a message to a div. If we run our motion example again on our RPi and move the camera, we not only should see the output on our RPi console, but we should also be seeing it on the webpage.
Don't forget that you need a Realtime developer key, which you can get, for free at https://app.realtime.co/developers/getlicense.
Problems and limitations
Like I said in the beginning of this post, this is just a demo and there are some problems and some limitations. You will probably notice that it does take a while to connect to the server. Once it does, though, sending a message is a breeze. If you are interested in using Realtime to broadcast security or sensitive data, you should change your application in order for it to be connected to the ORTC servers at all times.
Also, you will notice that when you move the camera, you will have several message broadcasts. This is because Motion is capturing and raising events very fast. Although Realtime can handle it — easily — this is far from perfect and you should really optimize it.
That said, have fun and I really hope to see some other cool examples out there!
Code and resources
As usual, you can download my code freely at GitHub: https://github.com/SergioMSCosta/realtime-raspberrypi-python-motion-detector
Feel free to change it, hack it, make it better, whatever you wish.
For more information about Realtime you can head out to www.realtime.co.
Don't forget to check out the xRTML (Realtime's APIs) documentation at http://docs.xrtml.org/
I really hope you enjoyed this article and that it inspires you to do some other cool examples.
Wow! It's been a while since I last wrote something for this blog. I should really write more often but I've been having my hands full.
Maybe you remember me mentioning before that I am a gamer. I also love aircraft so it only makes sense that I have a great time playing flight simulators, especially helicopter sims.
Back in 1996, Jane's released their AH-64D Longbow. It was the most advanced helicopter simulator of that time and you actually needed to learn understand a lot of new (for a gamer) and different concepts such as nap-of-the-earth and really employ tactics. Brainless attacks would do nothing except make you crash and burn. And it did happen quite a few times, believe me.
About 2 or 3 years ago I heard about a fellow simmer who was almost single-handed developing an Apache simulator. Richard Hawley is his name and this guy is coding a full sim. By himself. No kidding.
This is a project that caught my attention from day one, for a lot of different reasons. Indie projects always had a special place in my heart and seeing this folk doing this amazing sim is nothing short of amazing. You can keep track of this project at the development blog and see some great screenshots and videos.
For some time now I have been talking about Realtime and how it could be employed in gaming. Not only you can rely on it to do your multiplayer magic, but you can also do a lot of different stuff such as using second screens, streaming data to browsers, tablets, etc.. One of the cool examples I told him was the ability to have a moving map running on a browser and being updated in real-time right from inside the game. That's right, a game pushing content to a browser! You HAVE to get excited about something like this!
Finally, after seeing the xRTML competition winner, Richard decided to give it a real try. And he liked what he saw.
Combat Helo is being developed in C++, which is an API that is on the roadmap and will be released within the next few months but, for now, Richard tried the RESTful API. This is far from perfect but it worked well for the proof of concept he wanted to build. He then talked to me about the possibility of having a proxy program that would connect to Combat Helo through TCP and to ORTC, using a native API and do the transport between ORTC and Combat Helo. I jumped into it right away, using the .Net API and building the program using C#.
Not being a TCP expert, I found out a nice and simple example by Brandon Cannaday which I cannibalized and put it to work right away. On the other end of the proxy, I used a piece of code I already used before several times and just made everything work back and forth.
This little piece of software has the ability to connect bidirectionally to both Combat Helo and the ORTC servers. Whenever it gets a message from Combat Helo, it relays it to ORTC and vice-versa. There's only a small catch.
When we get a message coming from ORTC, we relay it directly to Combat Helo. There's no need to do any kind of processing over the incoming data. Combat Helo will know what to do (or not do) with the data being sent. The same could be true with data being sent from combat helo but I wanted to give Richard a bit more freedom and so I provided him with a way to indicate to which ORTC channel my proxy program should send the data to. You can learn everything about channels and security in my webinar at YouTube.
Having this in mind, messages coming from Combat Helo should have a particular format. All messages coming either from ORTC or Combat Helo are supposed to be JSON strings, but the ones coming from Combat Helo should be something like this:
The example above is very simple one that sends data about the location and behavior of an aircraft (in this case an AH-64 Apache helicopter) but also the channel to which this data should be sent (ch:session1). This allows for different data to be sent through different channels, expanding the possibilities and making it easy to build different systems and solutions, while trying to maintain message traffic to the minimum.
The code
You can get all the code for this project at GitHub here: https://github.com/SergioMSCosta/realtime-combat-helo
In this repository you will find the proxy app (RTCH), a test app that connects to the proxy through port 3000 (RTCH-client) and also a small web page that gets data through ORTC, using xRTML.
Resources
You can read Brandon Cannaday's article on how to communicate between applications using TCP at http://tech.pro/tutorial/704/csharp-tutorial-simple-threaded-tcp-server (great article, Brandon, thanks).
You can learn about Realtime at www.realtime.co. If you are interested in multi-platform, high-performance, high scalability and secure messaging, you should really give it a nice look and register to get a free key, which entitles you to use it, free of charge within some very reasonable limits (1.000.000 messages/month and 30.000 sessions/month).
Information on Realtime's APIs, can be found at www.xrtml.org. Pay special attention to the documentation, downloads and tutorial sections.
Again, ALL my code can be found at GitHub: https://github.com/SergioMSCosta/realtime-combat-helo. I hope you enjoy it!
While still playing around with the migration API, I did a small video demonstrating how easy it is to start using Realtime.co and how FAST applications become by going through our servers.
Following our (Realtime.co) release of the migration APIs for other vendors, namely PubNub and Pusher, I was having fun doing some tests so I downloaded a demo from PubNub and migrated it so that it uses our own servers.
PubNub’s example is comprised of a cool widget that measures the time necessary to send a message to the servers and indicates the best and worst values.
In the image bellow you can see a side-by-side comparison of the 331sresults, with PubNub (on the right) varying from 67ms to 1075ms (over one second). ORTC (Realtime's server, on the left) varies between 1ms and 160ms.
Of course, these values fluctuate from test to test and your values can be different than mine. We did some tests with developers pretty much all over the world and the tendency was the same, though: Realtime managed to be consistently faster.
The changes needed to get the code to work were pretty straightforward. Except for the obvious sentence change from “(using PUBNUB)” to “(using ORTC)”, it was all a matter of removing (commenting) the two lines below.
Video of my presentation at HTML5 Developer Conference on October 17th 2012 in San Francisco where I talked about Realtime and HTML5. My talk focused on Realtime conceptually and I announced the U.S. release of xRTML 3.0.
This is the video recording for yesterday's webinar about Realtime Framework's channels and security features. At the end of this session, you'll learn what channels are and how they work together with the security layer to provide you full control over your real-time communication.
The slides used for the webinar can be found at http://www.slideshare.net/RTWWorld/realtime-framework-webinar-channels-and-security and the example code used was uploaded to Github:https://github.com/RTWWorld/webinars.
If you want to learn more about the framework you can watch the first webinar with all the basic info about the framework at http://youtu.be/58Ijqk3o9Ck.
For more information, please visit www.realtime.co and www.xrtml.org.
This is the recording of a Webinar I hosted on December 13th about the Realtime Framework, how it works and how to get started. Near the end you'll be able to see some live-ish code and learn how easy it is to start developing using xRTML in just a few minutes. Enjoy!
Bootstrap is, very probably, one of the most recognizable and easy to use templating system for building websites. It's a great asset, especially for those who want to develop websites or prototypes easily and fast. I simply love it.
The example is very simple - in both concept and code. Every time the user has a new message (a private message from another user, for example), we update a small badge on the top right corner, indicating the total amount of unread messages. In a real environment, we will probably send this data from our server (whenever a new message is sent, for example) but for the sake of simplicity, and just to act as an example, we will send the information from the same page.
For a greater result, you should try the example with two different browsers — even different computers if you can. There's no need to use a web server if you try it in Chrome or Firefox, so it's easy to test it on two different machines.
For this demo I used one of the examples present at the Boostrap page, so a big thanks to whoever did it.
On to the code.
If you haven't already, you should register at www.realtime.co as a developer. You can do this for free, since Realtime offers you a free (limited) license and you will receive your own application key. You will need it to get the example to work by replacing YOUR_APPLICATION_KEY with your own real key.
As with any other Realtime web application, we start by adding the xRTML library. For the example, I've downloaded a custom build using xRTML.org's file builder with only the Placeholder tag, which we will use to actually update our badge. We're also adding jQuery.
I then added an inline script, which I did just to keep the example simple since I prefer to have all the JavaScript I can on separate files. I then started by creating 3 variables:
an integer variable to keep track of the number of unread messages I need to send to the page, initialized with the value of 0 (zero).
a string variable holding our application key (which you need to change for your own key)
another string variable to hold the URL for the ORTC server.
var counter = 0; var appkey = 'YOUR_APPLICATION_KEY'; var url = 'http://ortc-developers.realtime.co/server/2.1';
Now we need to create our connection to the ORTC server. This is done using the xRTML ConnectionManager. Since we want to make sure that our xRTML library is all set and that we can actually start working on our connections, we need to wait until the xRTML.ready event is raised.
xRTML.ready(function(){ xRTML.Config.debug = true; // Creates a connection to the ORTC server xRTML.ConnectionManager.create( { id: 'myConn', appkey: appkey, authToken: 'anything', url: url, channels: [ {name: 'users:id_1'} ] }); });
While creating the connection, I'm indicating that I want my browser to subscribe to the channel users:id_1. Realtime follows the publish-subscribe pattern and this means that anything that is being published to this channel will be received by our browser.
Note that I also enabled xRTML debugging so that I can see what's happening by simply opening the browser's console. As you can see on the image below, the connection is established and the channel is subscribed.
To replicate the update being sent by our system, we will use an hyperlink to act as a button which will call a function and send a message.
<a class="btn btn-primary btn-large" id="btn_sendMessage">Send a message »</a>
And we will be using jQuery to attribute the binding to the click event of our button.
And, of course, we need our sendMessage() function. Since we will want to use an xRTML tag to get our data, process it and change the DOM, we will be sending an xRTML-formatted message. So, sending a message will be a 2-step process: creating the message, using xRTML.MessageManager.create and then actually sending the message, through xRTML.ConnectionManager.sendMessage.
// Sends a xRTML message function sendMessage(){ counter++; // Creates a xRTML message var xrtmlMessage = xRTML.MessageManager.create({ trigger: 'newMessage', action: 'insert', data: { count: counter } }); // Sends the message xRTML.ConnectionManager.sendMessage({ connections: ['myConn'], channel: 'users:id_1', content: xrtmlMessage }); }
xRTML messages are object literals, and they are comprised by 3 main elements: a trigger, an action and the data. The first two are strings and the later should also be an object literal, carrying all the data you want to send through. You can read more about triggers at the xRTML.org blog here. An action is nothing more than a function that is part of a tag and is called back when the page gets a message to the said tag. You can see it as the behavior the tag should have when it gets a message. Some tag (such as the Placeholder which is the one we will be using) have pre-defined functions — such as the insert one we are indicating in our message. The data we are sending is very simple. We will only be indicating the amount of unread messages, in the format {counter: x} (where x is the amount of messages).
If we reload our page and click the "Send a message" button, we should now have a lot more data in our console (don't forget to open it when refreshing the page so you get all the details).
If you expand the message Object, you will see that it's comprised of the elements I described above — although with different names to decrease the message payload. As you can see on the image above (and hopefully on your own browser console) we sent and received the message.
The last line on the log indicates the newMessage trigger is not registerd with any tag, which is normal as we don't have any in our page yey but we will add one right away.
First, I'd like to talk about the menu item on the top that will hold the badge and how it should be structured. I'm using a regular Nav component with an Inverse badge to indicate the initial status (I'm assuming there are no new messages when we enter the page; this, of course, would be different in a normal website and the initial value could be anything).
There's a small hack that we need to do in order to get our Placeholder to work properly. Since our badge will actually change its color, we need to replace the default one (indicating there are no new messages) with our new ones. We won't just be updating the number of messages — we will be replacing the whole thing. So we need to wrap it around an identifiable DOM element that we later will be using as our target (more on that later). A span will work just fine and so I added one with the id "unread_messages".
The next step will be adding our Placeholder tag. Adding tags is pretty simple and very similar to adding a connection, except we are using the xRTML.TagManager instead of the xRTML.ConnectionManager.
Just like a connection, a tag is represented by an object literal comprised of several elements:
name: the type of tag we want to create. In this case, a Placeholder. Mandatory
id: the tag's identifier. Non-mandatory
target: the DOM element to be affected. In our case, the span I mentioned above, with the id "unread_messages". Mandatory.
triggers: our array of triggers for this tag. You can read more about these at the xRTML blog here. Mandatory.
template: the id for the template. Whenever a message for this tag arrives, it will grab the template indicated here, replace the data fields with the data received on the message and place it inside the DOM element indicated on the target element replacing its current content. You can also read more about templates on the xRTML blog.
Finally we just need to add the template. I won't go into much detail on this as there's an excellent blog post about this at xRTML.org. In a nutshell, a template is (usually) a piece of HTML with some special attributes. xRTML supports Knockout.js for this, which acts as an MVVM for JavaScript. If you haven't heard about it yet, go check it out. If you happen to know it and use it, you will be right at home with xRTML's templating.
When refreshing the page we can see a LOT more on the console. Not only we can see the Placeholder tag being created but, once we click the "Send message" button we can see that the tag is processing the message.
Taking a look at the top right corner (our badge), we can see that it has changed from the Inverse badge with the number zero to the Important badge with the number one. If you continue to click the button, you will see the number increasing.
Just like with any other project, it's extremely easy to integrate Realtime and xRTML with Boostrap and this is, in my opinion, a good example.
Hopefully, it will inspire you to do more and add Realtime to your project.
Demo and code
You can see a working demo here: http://sergiocosta.azurewebsites.net/demos/bootstrap-xrtml-message-notifier and get the code for this post here: https://github.com/SergioMSCosta/bootstrap-xrtml-message-notifier.
Please note: as I am using a free account, which has some limits, there may be a chance my example stops working because I may just hit those limits. So, if it's not working for you, don't blame Realtime but rather the fact that I am using this limited account.
A couple of days ago, Realtime sponsored the dotJS event in Paris, France on November 11th along with some workshops being held on December 1st. It was one of the first big JavaScript events taking place in this city and I was very curious to see what would come out of it.
The talks
The first day was held at the Théâtre des Variétés (a beautiful early-19th century building) and was comprised of several great talks by well-known developers. I won't list them here since I don't want to publish some names and leave others out, since they were all great, but I have to mention Jacob Thornto (@fat). His talk was unbelievable funny and informative. Nothing too techy but it was a fun ride through the history of open source and a great way to finish the event. That guy is amazing.
The Théâtre des Variétés, filled with developers
Photo: courtesy @mauriz
In general, the talks were very good, by people that know what they're talking about. The 400+ audience filled the room and was always hooked into what was happening and, because of the fact that the talks were all in the same place, allowed the speakers to always have a great audience. Some of the events out there have a lot of stuff going on simultaneously and you will get people either struggling to decide what to watch next or less-known companies to have little to no audience at all. The fact that this was a one-place show, allowed the audience to focus their attention in full during all sessions and did not hurt any of the speakers. Yes, you may have less speakers coming in, but I do believe that works much better.
There were a few breaks during the day where people would gather outside the room and talk, exchange ideas and thoughts and pass some business cards along. There were people from several countries including non-European ones such as the US and Sri Lanka although it seemed that the majority were, obviously, French.
Lunch and some snacks were included in the price of the ticket, which is also nice although the lunch break was a bit chaotic. No one seemed to be left without any food and people were happy. And that's what's important, right?
Great speakers, great talks, great audience, great sound and video quality. Great event.
The workshops
Workshops took place at the EEMI inside the amazing Paris stock exchange building, the Palais Brongniart. The workshops were held in class rooms with power strips for everyone, and a projector. The only downside was actually the internet connection which was less-than-perfect and a nasty proxy or firewall. Being a huge building, a lot of the people attending got lost and were looking for the correct rooms.
The audience for my workshop was great, with great questions and a will to learn a lot about what I was showing them. Could not want for a better group!
The organization
All in all, the organization was great. Good event, good workshop and I any glitch that may have happened was certainly quickly solved since no one noticed anything going wrong. In fact, things went so well that the organization announced that more conferences are on their way. Check out the dotConferences website for more info.
The potential
With people like the one behind dotJS organizing events, great venues, the beautiful Paris (I'm in love with the city) with a lot of places to eat and great things to see, an amazing audience, great speakers and being closer to the center of continental Europe, I believe that Paris has the potential to seriously become the center of the European development community and a place where some great events may be held in the future.
Well done, Paris!
A few notes:
You can see the slides I used for the Realtime Workshop here: http://www.slideshare.net/RTWWorld/realtime-workshop-at-dotjs-paris-december-2012
For more pics of the event, taken by @mauriz check out http://svay.com/photos/2012-11-30_dotjs/
Real Time Percent Loader with Windows Phone and Realtime xRTML - Updated
These changes were only required for the JavaScript file core.js and all it was required was to update the way the connection and tags/controllers are instanced as well as the way messages are sent, which tooke me about 10 minutes.
You can get the updated code at GitHub: https://github.com/SergioMSCosta/realtime-windows-phone-perc-loader
Related articles
xRTML 3.0 Makes Websites Come "Alive" (sys-con.com)
Cloud Developers Challenged to Build Next Generation xRTML 3.0 Apps (cloudcomputing.sys-con.com)
I played around with a few of the demos (primarily the audio player and the polling system) and they felt responsive, despite my best attempts to throw a wrench into the system by rapidly pressing buttons in weird, unlikely-to-happen-in-the-real-world ways.
The line above, which is part of this article cracked me up for some reason. It's nice to see journalists with a sense of humor. Better yet: journalists with a sense of humor that can not fool ORTC servers!
Facebook is huge, Facebook is everywhere, blah, blah, blah. We all know that already and, even the end of Facebook is being predicted by some websites, it doesn't seem like we'll see the end of this giant anytime soon. The same with Twitter. Both have a lot to say in the social media and I don't think that Google+ will create havoc among these two. At least not enough to destroy them.
Companies are using Facebook, Twitter and other social media tools to meet their audiences, gather potential customers and capture the loyalty of the current ones.
Facebook has 800 million registered users. Twitter claims to have 500 million. Chances are that a lot of the parents from your school's students — and even more likely the students themselves — have a Facebook or a Twitter account; or both.
These social networks are a cheap and very effective way to pass information on to your students and their parents. It's like having your own broadcasting system exactly where people are spending a lot of their time, where they are following what they like and sharing their lives. Remind parents of school meetings, schedules, or events (you can even create events that will be integrated into the users calendars). Do not engage on personal messaging though as it may become very intrusive. It's better to stick with general, broad communication.
If your school doesn't have a presence on the social media, you should think seriously about it. It doesn't take a lot of time to publish your messages and you'll get closer to your students and parents.
Related articles
Best Use of Facebook Timeline: School Uses Facebook Timeline for History Lessons (hitechanalogy.com)
One of the things we developers always complained about was the fact that you always had to spend (a lot of) money on Microsoft tools for to be able to develop websites and applications. Visual Studio was never a cheap option, Windows hosting has always been more expensive than a LAMP solution and MSSQL doesn't come cheap at all — even if you only needed a small database for you to develop over.
IDE
The IDE of choice for Microsoft developers has to be Visual Studio. The full-fledged version can set you back a few hundred bucks. The alternative is to get Microsoft's own Visual Studio Express for Web, which is free and fully functional. Of course, it doesn't come with a lot of features that ships with the regular Visual Studio but, let's face it, most of us don't use them anyway. It also solves the next problem which is...
Database
If you install Visual Studio Express for Web, you'll also get a copy of Microsoft's SQL Server Express. Again, this version comes with some drawbacks but it's fully functional and will allow you to develop (and even act as a production database) your application just like the regular product.
As an alternative you can also use MySQL, which is free, and use the MySQL Connector for .Net.
Code management and versioning
Still on the "Express" line of products, Microsoft recently released their Team Foundation Server Express. It's more than enough for a free-lancer or a small team of up to 5 members. Works very well and integrates with VS Express for Web.
Another solution that really put a smile on my face is Microsoft's TFS cloud product. TFSPreview, in beta at the moment, allows you to have your TFS projects hosted in the cloud. Not only you do not need to have your own server, you can have your code available from anywhere. Sure it still misses quite a few features (such as the ability to delete a project directly from their website or Visual Studio interfaces) but it looks very promising and it's sure a product I'll keep my eyes on to see its progress. I just hope Microsoft doesn't ruin it with a bad pricing policy.
Hosting
Not exactly entirely free, Microsoft Azure is Microsoft's own cloud hosting solution. It's quite pleasant to use and the offer is quite good but, just like the other cloud products, the pricing can be a bit high for a small company or even a free-lancer.
It's still a good alternative since you can host up to 10 websites for free in their shared environment and you can get a MSSQL database starting from 100Mb for $5.00. It has a 90-day trial so you can give it a try and see how it works.
Personally, I love it and the only downside I can think of is the inability to have your own domain on a shared environment. I wouldn't mind paying $5.00 or so every month instead of having to cough nearly $60.00 for a reserved instance just to be able to use my own domain name.
Great job, Microsoft
Microsoft have quite a few amazing tools available for developers. While aimed mainly for free-lancers and small teams, they are powerful enough to offer a professional development environment and get your startup or small-sized company on the right track of Microsoft related web development.
I believe Microsoft is on the right track. My only wishes are that MS could find some better alternatives to their current Azure pricing and I hope they don't screw us up with some high prices for the cloud-based TFS.
Great job, Microsoft. If I weared a hat, it would be off to you.
Related articles
Microsoft Officially Launches Visual Studio 2012 (devx.com)
Microsoft delivers VS Express 2012 toolkit for building Windows 8 desktop apps (zdnet.com)
Software Development Gets A Fillip With The Official Launch Of Visual Studio 2012 [Updates] (makeuseof.com)
Whats New In Visual Studio 2012 And .Net 4.5 [Review] (thetechnologycafe.com)
Real Time Percent Loader with Windows Phone and Realtime xRTML - Part II
On Part I we covered the architecture and the webpage for the nice demo/prototype using xRTML on both the web and the Windows Phone (you can also see it working on a video).
After installing the Windows Phone SDK (don't forget to update it), create a new Windows Phone Application project in Visual Studio (File > New Project and then select Visual C# and Windows Phone Application). Name your project whatever you feel like. I named mine RealtimePercLoader. Visual Studio will then ask you what OS version you wish to target — 7.0 or 7.1; either will work.
We'll then be presented with the default phone layout, in which we'll add a few controls: a slider, which we'll name as sldSlider and 3 text blocks — one to display the percentage (txtPercentage), one to display the connection status (txtConnStatus) and the last one will act as a log so we can see what's happening (txbLog). I also changed the application and page titles. Below you can see the default as well as the final layout.
The fun part is, as usual, the code! But before we dive in, we need to add ORTC's Ibt.Ortc.Mobile.dll as a reference to our project. On the Solution Explorer, right click the project name and select Add Reference. Find the dll file, select it and hit OK.
Let's get our hands dirty.
First of all we need to add the references to the ORTC API at the top of our file.
using Ibt.Ortc.Mobile.Extensibility; // ORTC reference using Ibt.Ortc.Mobile.Api; // ORTC reference
Next we'll add some variables to help us keep things in one place.
private IOrtcClient client; // ORTC client private string serverURL = "http://developers2.realtime.livehtml.net/server/2.1/"; // ORTC Server URL private string channel = "PercentageChannel"; // ORTC Channel private string appKey = "ENTER_YOUR_KEY_HERE"; // Your Realtime Application Key (get your free key at www.realtime.co) private string privateKey = "YOUR_PRIVATE_KEY"; // Your Realtime Private Key private string authToken = "AUTHENTICATION_TOKEN"; // Authorization token. Not necessary if you're using a free developer account. Can be whatever you want (a GUID, for example) private double curVal = 0; // Current slider value (control variable to prevent sending the same value repeatedly)
Nothing very unusual here. We have our server URL, the application and private Keys (both are provided to you when you enlist for a free account at Realtime.co, the authentication token and a control variable that will help us reduce the number of messages being sent to the ORTC server by allowing us to control the last value being sent. There's no use of sending the same value repeatedly.
To prevent any issues with the connection to the ORTC server, our code should only be runned once we are sure the application is fully loaded. To do so, we need to add a line of code to our constructor, after InitializeComponent().
public MainPage() { InitializeComponent(); this.Loaded += new RoutedEventHandler(MainPage_Loaded); // To make sure we start processing only after we have successfuly loaded our app }
As for the method being called:
void MainPage_Loaded(object sender, RoutedEventArgs e) { txtConnStatus.Text = "Authenticating on ORTC"; // Log // Add permissions to our dictionary var permissions = new Dictionary(); permissions.Add(channel, ChannelPermissions.Write); // Not actually needed for a free account // Tries to authenticate Ibt.Ortc.Mobile.Api.Ortc.SaveAuthenticationAsync(serverURL, true, authToken, false, appKey, 3600, privateKey, permissions, (error, authenticated) => { if (error != null) { // Something went wrong. Throw an error. throw error; } else { // Authentication OK -> proceed txtConnStatus.Text = String.Format("Authenticated"); // Log InitializeClient(); // Initializes our client Connect(); // Connects us to the ORTC server } }); }
This method authenticates the user (although it not really necessary for a free account) and then calls 2 other methods: InitializeClient() and Connect().
Most of what InitializeClient() does is it sets all the actions for the various events supported by ORTC: OnConnected, OnDisconnected, OnException, OnReconnecting, OnReconnected, OnSubscribed and OnUnsubscribed:
private void InitializeClient() { var ortc = new Ibt.Ortc.Mobile.Api.Ortc(); var factory = ortc.LoadOrtcFactory("IbtRealTimeSJ"); client = factory.CreateClient(); // Sets the actions for the various handlers // OnConnected client.OnConnected += (s) => { txtConnStatus.Text = String.Format("Connected to {0}", ((IOrtcClient)s).Url); // Sets the connection status SubscribeChannel(); // Subscribes us to the ORTC channel }; // OnDisconnected client.OnDisconnected += (s) => { txtConnStatus.Text = String.Format("Disconnected"); // Sets the connection status }; // OnException client.OnException += (s, error) => { txbLog.Text += String.Format("Error: {0}{1}", error.Message, Environment.NewLine); // Log }; // OnReconnecting client.OnReconnecting += (s) => { txtConnStatus.Text = String.Format("Disconnected"); // Sets the connection status txbLog.Text = String.Format("Reconnecting"); // Log }; client.OnReconnected += (s) => { txtConnStatus.Text = String.Format("Reconnected to {0}", ((IOrtcClient)s).Url); // Sets the connection status }; client.OnSubscribed += (s, channel) => { txbLog.Text += String.Format("Channel {0} subscribed.{1}", channel, Environment.NewLine); // Log }; client.OnUnsubscribed += (s, channel) => { txbLog.Text += String.Format("Channel {0} unsubscribed.{1}", channel, Environment.NewLine); // Log }; }
When we are connected, we will be calling yet another method: SubscribeChannel, which basically subscribes an ORTC channel. This is set up at the OnConnected event callback.
private void SubscribeChannel() { client.Subscribe(channel, true, (s, chan, message) => { if (!message.Contains("xrtml")) // very basic (and rather stupid) way to verify if the message we received should be processed { sldSlider.Value = Convert.ToDouble(message); // Updates the slider value } txbLog.Text += String.Format("Message on channel {0}: {1}{2}", channel, message, Environment.NewLine); // Log }); }
For this example we are only subscribing to one channel, which is all we need. You'll note that we can have a callback. This is the code that is runned whenever we get a message. I'm making a very quick (and rather stupid) verification to see if the message should be processed. If it should, we need to update our slider, which, in turn will then update the percentage caption (more on that later on). We're also displaying the message in our log.
The Connect method is also rather simple. It connects our application to the ORTC server with a couple of lines of code — pretty straightforward.
Finally, we need to get our interface moving. Part of it is already done above; whenever we get a new message, if it's the right one, we update our slider and we also need to update our caption. This actually works in two ways: it updates the caption when we get a new message with a new value and also updates it whenever we move the slider ourselves. Here's the code:
private void sldSlider_ValueChanged(object sender, RoutedPropertyChangedEventArgs e) { txtPercentage.Text = string.Format("{0}%", Math.Round(sldSlider.Value, 0)); // Sets the percentage text }
Finally, we need to send a message to our webpage whenever we move our slider. To avoid sending unnecessary messages, we are using a control variable. Whenever the slider is moved we check if the last value sent is different from the one we have now. If it is, the message is then sent.
private void sldSlider_MouseMove(object sender, MouseEventArgs e) { // Checks our control variable to see if we need to process and send the new value if (Math.Round(sldSlider.Value, 0) != Math.Round(curVal, 0)) { // We do -> proceed sldSlider.Value = Math.Round(sldSlider.Value, 0); // Updates the slider string message = string.Format(@"{{""xrtml"":{{""t"":""perc"",""a"":""delegate"",""d"":{{""v"":{0}}}}}}}", sldSlider.Value); // Creates the xRTML message txbLog.Text += string.Format("Sending message {0}{1}", message, Environment.NewLine); // Log client.Send(channel, message); // Sends the xRTML message to our channel curVal = sldSlider.Value; // Updates our control variable } }
And that's pretty much it! I don't think it's necessary to publish the whole code for the code behind file, since, but you can download all the code for this article at https://github.com/SergioMSCosta/realtime-windows-phone-perc-loader.
I truly hope you enjoyed this 2-part article as much as I did while writing it. Please feel free to add your comments or questions below and have fun with Realtime®! Oh! And don't forget to use your own Application and Private keys!
2087
yousharknotpass
prguitarman
discoholicmusic
s-u-f-j-a-n-s-t-e-v-e-n-s
dailybridgerton
gummygunk