Slides to a great talk about energy use: http://wattzon.org/GamePlan_v1.0_slides.pdf
[updated link]
GamePlan_v1.0
Friday, March 21, 2008
Thursday, March 6, 2008
eTech - 2008 Presentation Slides
O’Reilly Emerging Technologies 2008 Presentation Slides can be found at: http://en.oreilly.com/et2008/public/schedule/proceedings/
eTech - Four Hour Work Week
-80/20 principal:
First, try to identify the 20% of the things you do during the week that take 80% of your time. For the web, you can use tools like rescueTime.com
From this list, make a NOT to do list, and attempt to not do those things.
During the day, once an hour or two, ask yourself, "Am I busy? Am I being bothered? Am I creating work to prevent me from doing what I should be doing?"
Second, try to identify the 20% of measurements that track 80% of your success.
-Attention dependency on time:
Constant partial attention can actually cause ADHD. Don't pay attention to more than one thing at a time. Set up a firewall so you can focus on a single task. Don't think about things that you cannot affect today. Don't read work email while on vacation. When trying to work, think about work, when trying to relax, think about things that you like.
-Error based performance:
We don’t like to fail at anything, but it’s ok.
What is the one thing that you could do that would change everything for the better?
What are the small tasks that seem like they have to be done right now?
Would it be ok to fail any of the small tasks to get closer to the one big thing?
It’s ok to fail the little stuff, as long as you move toward the big stuff.
More can be found at: fourhourworkweek.com
First, try to identify the 20% of the things you do during the week that take 80% of your time. For the web, you can use tools like rescueTime.com
From this list, make a NOT to do list, and attempt to not do those things.
During the day, once an hour or two, ask yourself, "Am I busy? Am I being bothered? Am I creating work to prevent me from doing what I should be doing?"
Second, try to identify the 20% of measurements that track 80% of your success.
-Attention dependency on time:
Constant partial attention can actually cause ADHD. Don't pay attention to more than one thing at a time. Set up a firewall so you can focus on a single task. Don't think about things that you cannot affect today. Don't read work email while on vacation. When trying to work, think about work, when trying to relax, think about things that you like.
-Error based performance:
We don’t like to fail at anything, but it’s ok.
What is the one thing that you could do that would change everything for the better?
What are the small tasks that seem like they have to be done right now?
Would it be ok to fail any of the small tasks to get closer to the one big thing?
It’s ok to fail the little stuff, as long as you move toward the big stuff.
More can be found at: fourhourworkweek.com
eTech - Ensemble Learning, Better predictions through diversity
Presentation by Todd Holloway
Ensemble is the process of using multiple supervised learning models to make a prediction. This talk is arguing that using multiple types of predictor models turns out more statistically correct results.
Relating movies based on user recommendations does not work will for relatedness because we don't have enough data on all movies.
Netflix prize: 17000 sample movies, millions of sample ratings. One million dollar prize for a ten percent improvement on current Netflix model.
Using multiple models decreases error as long as they are independent decision makers.
To get independence and diversity, we use different relatedness measures for each model.
This adds complexity but gives better results, which is a violation of Ockham's Razor.
AdaBoost is the process of trying a classifier, testing it, take the incorrect results, and using them to train a new classifier. Unfortunately, this emphasizes noise.
www.abeautifulwww.com for slides and more info.
eTech - CouchDB from 1000ft
Presentation by Damien Katz
Website
CouchDB is an EASY database. A simple way to store data.
When designing a relational database, you are designing a large data structure. With CouchDB, you are just storing data.
Documents are complete units of data that is not broken up. Example, business card. This means that documents may be out of date. In a relation db, this is the worst thing that can happen, but in the real world, we deal with it all the time.
CouchDB is in JSON, similar to XML, but easy to read and write.
CouchDB is supported by all major languages and does not require a data access layer.
Communication is across HTTP API.
Indexes are built incrementally with map reduce over the tags.
Data is replicated across machines via peer based replication.
Conflicts are taken care of by the db, a winner and loser change is chooses consistently on all machines.
If you are interested in distributed programming, look into 'Erlang'. CouchDB is written in Erlang because it makes distributed programming a snap.
Read writes can happen at the same time; the reader will get the older value.
20,000 concurrent users running on a laptop. This works because Erlang does not use OS processes, they use their own lightweight process.
Comes with Lucene integration for full-text search. But any search tech could be used.
To access the db, you write javascript/ajax.
Largest replication so far= 5gb, 400,000 documents.
Not yet ready for use in production. But people ARE using it.
If a relational db model is what you need, then use that...
Website
CouchDB is an EASY database. A simple way to store data.
When designing a relational database, you are designing a large data structure. With CouchDB, you are just storing data.
Documents are complete units of data that is not broken up. Example, business card. This means that documents may be out of date. In a relation db, this is the worst thing that can happen, but in the real world, we deal with it all the time.
CouchDB is in JSON, similar to XML, but easy to read and write.
CouchDB is supported by all major languages and does not require a data access layer.
Communication is across HTTP API.
Indexes are built incrementally with map reduce over the tags.
Data is replicated across machines via peer based replication.
Conflicts are taken care of by the db, a winner and loser change is chooses consistently on all machines.
If you are interested in distributed programming, look into 'Erlang'. CouchDB is written in Erlang because it makes distributed programming a snap.
Read writes can happen at the same time; the reader will get the older value.
20,000 concurrent users running on a laptop. This works because Erlang does not use OS processes, they use their own lightweight process.
Comes with Lucene integration for full-text search. But any search tech could be used.
To access the db, you write javascript/ajax.
Largest replication so far= 5gb, 400,000 documents.
Not yet ready for use in production. But people ARE using it.
If a relational db model is what you need, then use that...
Wednesday, March 5, 2008
eTech - Visualizations beyond RSS and LavaLamps (Tripledex)
You NEED to have a question to have a good visualization.
Even a Taro reader will demand a question.
You can make visualizations that show everything, but these usually end up being used esthetically. This is contradiction with a speaker earlier in the conference, so we will need to think about the context in which each was speaking.
Get answers to these questions before making visualizations:
Do you want broad or deep, trends or targeting?
How much data do you want/need?
Static or dynamic? Alerts? About what?
Speed of data. Pipette or firehouse?
Lumpiness of data
Dimensionality of data
Do you need to combine relationships?
The tools you use to show data or filter data are not interchangeable.
Just like tools around the house, you would not use a lawnmower to cut bread, you would use a knife.
They are showing a technology called Tripledex that can manage around 100,000 relationships.
Email jnhq@yahoo.com to get access to the demo
Even a Taro reader will demand a question.
You can make visualizations that show everything, but these usually end up being used esthetically. This is contradiction with a speaker earlier in the conference, so we will need to think about the context in which each was speaking.
Get answers to these questions before making visualizations:
Do you want broad or deep, trends or targeting?
How much data do you want/need?
Static or dynamic? Alerts? About what?
Speed of data. Pipette or firehouse?
Lumpiness of data
Dimensionality of data
Do you need to combine relationships?
The tools you use to show data or filter data are not interchangeable.
Just like tools around the house, you would not use a lawnmower to cut bread, you would use a knife.
They are showing a technology called Tripledex that can manage around 100,000 relationships.
Email jnhq@yahoo.com to get access to the demo
eTech - How to Kick Ass
Passionate users are passionate about what they are good at.
If companies provide the ability for users to be good at out program, they will be passionate about it.
Neurogenesis...your brain can keep changing.
Dull cubicle kills the brain.
World class ability is not about talent, it is about putting in the time.
You need a 'rage to master'
6 Expertise Hacks
-1 Exploit your telepathy ... mirror neurons
Our brain can learn just from watching actions
We jump out of the way when people see someone else get hurt
We can feel emotion from seeing a face
We can simulate another persons brain when we watch them
This is more effective if we have DONE what we are watching
This is the science behind visualizing to get better
It works better if you visualize what they would actually see, rather than 3rd person
-2 Reduce interference
Don't think about what we have to do
Tell dumber part of the brain to shut up
Doing with Images makes symbols
-3 Manage your fight/flight
Get a 'the stress eraser' StreesEraser.com, Amazon
-4 Learn about your brain
Legacy brain is trying to stop you
It says ruby is not important to life/death
-5 Exercise your
Brain age is ok, but REAL exercise is more important
-6 Find the time
The twitter curve is messing us up.
We need to find time to practice what we want to be good at, don’t waste time with stuff you don’t think is important.
eTech - Elephant programs
Elephant is a glimpse at how programming languages will behave in the future. The more we know about where we are going, the better prepared for it we will be.
Elephant programs are faithful 100 percent.
They never forget
"Passenger has a reservation - compiler makes the db or array"
"Does the passenger have a reservation?"
They interact with other persons
"You have a reservation on flight UA 522 today at 7:35 pm"
This speech act, if authorized, creates an obligation
Features-
Communication inputs and outputs are meaningful speech acts.
A promise will be expressed by a string of symbols, but the meaning is semantics is a promise, not a string.
Correctness of a program is partially defined in terms of performance of speech acts.
We can look at programs to have beliefs. A thermostat can believe it is too cold, too hot, or OK. It does not have a consciousness, but it does have beliefs.
Programs can be represented as sentences of logic.
They interact non-trivially with the outside world. They have input/output AND accomplishment specifications.
A program can have internal promises.
ABRUPT END
The speaker was cut off, we will need to look into Elephant on our own.
Tuesday, March 4, 2008
eTech - Predicting Markets and the Flow of Information (Google)
Prediction market presentation by Bo Cowgill from Google
One way for management to get data about the company is to ask its employees their opinion. Problem is, when they ask, we tend to tell them what they want to hear.
If you let people predict anonymously, they will tell the truth, because there is no down side, and they might win something. (A tee-shirt or their name on a leader board)
Google has prediction markets rolling with over 80,000 trades currently.
They have found that the bias of optimism from new employees causes a safer bet to be against Google.
Most people bet in the middle of five options, and the middle often lost. It would have been safer to bet high or low.
Information flows around a company.
Knowing data about employees, and their trading habits can tell us who was talking to whom.
They found that the biggest factor was the location employees are sitting.
This is ironic, because Google is trying to make non-local communicate easier.
Software like news futures can be used for creating the prediction market.
One way for management to get data about the company is to ask its employees their opinion. Problem is, when they ask, we tend to tell them what they want to hear.
If you let people predict anonymously, they will tell the truth, because there is no down side, and they might win something. (A tee-shirt or their name on a leader board)
Google has prediction markets rolling with over 80,000 trades currently.
They have found that the bias of optimism from new employees causes a safer bet to be against Google.
Most people bet in the middle of five options, and the middle often lost. It would have been safer to bet high or low.
Information flows around a company.
Knowing data about employees, and their trading habits can tell us who was talking to whom.
They found that the biggest factor was the location employees are sitting.
This is ironic, because Google is trying to make non-local communicate easier.
Software like news futures can be used for creating the prediction market.
eTech - Next generation of online gaming (Sun Microsystems DARKSTAR)
One of the issues companies that deal with many users and lots of data, is that the DB and DB access machines need to be built out for max users.
Blizzard went from a game company to a service company.
Webkinz is a toy company becoming a social game company.
Another example: Club penguin, Habbo hotel
Scaling is the major issue. It’s hard.
Currently games break up the world to simplify the problem. This is bad because it makes for a constrained game design. Further, this causes a waste of server time and energy. Not all groups are playing at peak. Further, it is complexity the user does not understand. They just want to play with their friends.
If you shard incorrectly, you have empty servers or over-capacitated servers.
$30-$90 million to make an online game, over 3-4 years.
Sun wants to make architecture to help small companies make great games without the need to shard with 'Project Darkstar'. More info http://www.projectdarkstar.com/
This is an application server for games. OS agnostic, game agnostic. But it would work for non game applications that require lots of data transactions, and might give us a glimpse into how data access will be in the future.
The technology is under gpl, but sun will make commercial licenses if asked.
Games are multiplayer, but characters are actually agnostic. Let’s distribute their actions without the developers needing to know about it.
Games are event driven, and have small tasks per action. What is hard is if two characters have contention for the same resource. All tasks are transactional. Use this to find conflicts and allow one character to get the resource and one does not. They are moving competing characters to the same server to optimize scheduling transactions.
All data and communications will go through darkstar. Abstracting the developer and client away from the data access.
The program can think of this as a single thread and a single machine.
If a box goes down, play continues. The players are not connected to a box; they are connected to a channel.
This also allows you to use the same machines for MULTIPLE concurrent games.
Go here for more info.
Blizzard went from a game company to a service company.
Webkinz is a toy company becoming a social game company.
Another example: Club penguin, Habbo hotel
Scaling is the major issue. It’s hard.
Currently games break up the world to simplify the problem. This is bad because it makes for a constrained game design. Further, this causes a waste of server time and energy. Not all groups are playing at peak. Further, it is complexity the user does not understand. They just want to play with their friends.
If you shard incorrectly, you have empty servers or over-capacitated servers.
$30-$90 million to make an online game, over 3-4 years.
Sun wants to make architecture to help small companies make great games without the need to shard with 'Project Darkstar'. More info http://www.projectdarkstar.com/
This is an application server for games. OS agnostic, game agnostic. But it would work for non game applications that require lots of data transactions, and might give us a glimpse into how data access will be in the future.
The technology is under gpl, but sun will make commercial licenses if asked.
Games are multiplayer, but characters are actually agnostic. Let’s distribute their actions without the developers needing to know about it.
Games are event driven, and have small tasks per action. What is hard is if two characters have contention for the same resource. All tasks are transactional. Use this to find conflicts and allow one character to get the resource and one does not. They are moving competing characters to the same server to optimize scheduling transactions.
All data and communications will go through darkstar. Abstracting the developer and client away from the data access.
The program can think of this as a single thread and a single machine.
If a box goes down, play continues. The players are not connected to a box; they are connected to a channel.
This also allows you to use the same machines for MULTIPLE concurrent games.
Go here for more info.
eTech - Practice Makes Perfect
Presentation from Peter Norvig from Google
How billions of examples lead to better models of images and text
How things are traditionally figured out.
Look at world, think about data, and figure out a model to express the world.
Problem is that this is hard and the model will be wrong.
Instead, let the data do the work.
Computing power is making it possible to make more complex algorithms because we can easily test bad algorithms to find the good ones. Example- image resizing
More data is also allowing this. Example- scene completion
For finding similar images, do a search based on keyword, see the images, user an algorithm to find similarities in photos. Use the Eigenface and SIFT features to find commonalities in images. Then rank the found images by what links to what, not on how often they are linked.
For text, grep the data to find words that are in proximity, or look in structured data, and use probabilistic models to guess the most probably answer. Example- Google Sets
Engineers later dropped the probabilistic model in favor for a liner model. They have moved away from something they can prove, and into something that can observe working.
They have optimized for translating news.
Bayesian: want argmaxc P(c|w), but model argmaxc P(w|c) P(c)
see: How to build a spell checker
How billions of examples lead to better models of images and text
How things are traditionally figured out.
Look at world, think about data, and figure out a model to express the world.
Problem is that this is hard and the model will be wrong.
Instead, let the data do the work.
Computing power is making it possible to make more complex algorithms because we can easily test bad algorithms to find the good ones. Example- image resizing
More data is also allowing this. Example- scene completion
For finding similar images, do a search based on keyword, see the images, user an algorithm to find similarities in photos. Use the Eigenface and SIFT features to find commonalities in images. Then rank the found images by what links to what, not on how often they are linked.
For text, grep the data to find words that are in proximity, or look in structured data, and use probabilistic models to guess the most probably answer. Example- Google Sets
Engineers later dropped the probabilistic model in favor for a liner model. They have moved away from something they can prove, and into something that can observe working.
They have optimized for translating news.
Bayesian: want argmaxc P(c|w), but model argmaxc P(w|c) P(c)
see: How to build a spell checker
Sun SPOT Java Development Kit
This is neat...
Sun SPOT
It is a small computer with a:
- a radio transmitter
- 2 accelerometers
- 6 inputs
- 5 outputs
- a battery power pack
- a java micro-controller
- a light sensor
- a temp sensor
- an 8 led display
You can use it to do almost anything. Here are a few obvious examples:
- Control a lego car wirelessly
- Control an on screen avatar wirelessly
- Track your day to day movements
- Turn on your house lights/heat/music by voice or time
- Alter a web-cam via the web
If you have a good open source project, they will give you some for free!
If you are a student you get 2 for $300, else they are 2 for $700.
Sun SPOT
It is a small computer with a:
- a radio transmitter
- 2 accelerometers
- 6 inputs
- 5 outputs
- a battery power pack
- a java micro-controller
- a light sensor
- a temp sensor
- an 8 led display
You can use it to do almost anything. Here are a few obvious examples:
- Control a lego car wirelessly
- Control an on screen avatar wirelessly
- Track your day to day movements
- Turn on your house lights/heat/music by voice or time
- Alter a web-cam via the web
If you have a good open source project, they will give you some for free!
If you are a student you get 2 for $300, else they are 2 for $700.
Monday, March 3, 2008
Prediction theory
If a boss asks a manager when a product will be ready to release, the manager will say 2 days... because s/he does not want to look bad.
If, instead, the boss says, hey, whoever predicts the day closest to the day the product is ready to release will win $500.00 (or whatever), the manager will guess 2 weeks.
In the later example, the boss gets the more realistic answer because the manager wants to win and does not feel that there is an expected answer.
If, instead, the boss says, hey, whoever predicts the day closest to the day the product is ready to release will win $500.00 (or whatever), the manager will guess 2 weeks.
In the later example, the boss gets the more realistic answer because the manager wants to win and does not feel that there is an expected answer.
eTech - Debugging Hacks 2
Good habits for debugging:
- Keep a log of everything you observe/change
- When you get an error message, Google it
- Look on forums that Google does not index
- Graph data over time, make a truth table / chart to visualize the problem
- Log the server AND client time in web logs
- Look in bug db for similar bugs
- After having a repro case, if you are still having issues fixing the bug, try to find ANOTHER repro case
- Reread and update the bug every day you work on it
- Take baby steps, "If you cannot see land, can you see birds?"
- The worse the bug, the more logging you need
- Get on a mailing list / news group
- Recheck assumptions
- Go back to code that works, and start taking diffs
- Iff needed use binary search debugging (Spolsky)
- Explain the problem to someone else
- Get more eyes for the problem, present to a group
- Has there been a hardware change, or simple change to the environment
- Go home if you are done for the day (death march != fixed bugs)
- Keep a log of everything you observe/change
- When you get an error message, Google it
- Look on forums that Google does not index
- Graph data over time, make a truth table / chart to visualize the problem
- Log the server AND client time in web logs
- Look in bug db for similar bugs
- After having a repro case, if you are still having issues fixing the bug, try to find ANOTHER repro case
- Reread and update the bug every day you work on it
- Take baby steps, "If you cannot see land, can you see birds?"
- The worse the bug, the more logging you need
- Get on a mailing list / news group
- Recheck assumptions
- Go back to code that works, and start taking diffs
- Iff needed use binary search debugging (Spolsky)
- Explain the problem to someone else
- Get more eyes for the problem, present to a group
- Has there been a hardware change, or simple change to the environment
- Go home if you are done for the day (death march != fixed bugs)
eTech - Debugging Hacks
This seems obvious, but I'll write it down...
For really bad bugs:
0- Try to fix the bug quickly
1- Revert any changes you made trying to fix the bug quickly
2- Collect data from each component, logs, etc...
3- Reproduce the bug and automate it
4- Simplify the bug conditions when possible
5- Look for connections and coincidences in the data
6- Brainstorm theories and test them
7- When you fix the bug, verify against the report
8- Make sure fix does not break other code
Bug tracking notes:
Break data for a bug into three categories, and log them correctly.
1- Facts
2- Questions
3- Theories that turned out to be wrong
For really bad bugs:
0- Try to fix the bug quickly
1- Revert any changes you made trying to fix the bug quickly
2- Collect data from each component, logs, etc...
3- Reproduce the bug and automate it
4- Simplify the bug conditions when possible
5- Look for connections and coincidences in the data
6- Brainstorm theories and test them
7- When you fix the bug, verify against the report
8- Make sure fix does not break other code
Bug tracking notes:
Break data for a bug into three categories, and log them correctly.
1- Facts
2- Questions
3- Theories that turned out to be wrong
eTech - Live Vast and Deep WebNative Visualizations
Processing is a subset of Java found at processing.org.
It can be used to quickly make data visualizations. It is not as powerful as java, but it has been whittled down to be the most useful parts of java for visualization to make quick prototyping faster and more dynamic. To find lots of source code, search for ‘built with processing’.
Design starts on paper; this obvious for my designer friends. Well, visualization starts in the eye, or the minds eye. We need to begin data visualization by imagining what we dare to see.
The first step in web visualization is to show everything. Don’t waste time trying to figure out the best thing to show, or how to show it. If you can map it to the screen, do it. Get the data to the user (maybe YOU) quickly, then iterate on the visualization until you find what you are looking for.
Displaying data on the screen is cheap and easy. Analyzing the data is expensive and hard. Begin by showing everything, and then use humans to analyze. Humans are better at this when it comes to quick pattern recognition.
Showing everything also limits bias that is naturally going to creep in as you filter down.
Good examples of showing everything are: zip decoder, cab spotting, and many of the digg visualizations.
After you have everything showing, filter down the data, and look for meaningful relationships. Too often developers leave the visualization in the initial form, which makes it hard to use or understand for the user. Simple is often better.
Other interesting visualizations: Oakland crime spotting, digg arc, mappr, trulia.
When displaying large amounts of data, think about representing the data as multiple slices in pixel format. Literally make an image that depicts the data ‘under’ that pixel. These masks can then be used in conjunction with each other to form rich data visualizations. Example: construct a black and white heat map of population over the area you are interested in, also construct a black and white heat map of income over the same region. With these two images, and a map, you can programmatically decide how to display the data at a pixel by looking at each image and querying for the gray value at the point. This has vast possibilities.
If you can count something, you can color it. Duh, however, this is helpful in deciding how to color objects in you map. Tools like Color Brewer help users make good pallets for complex data scenes.
If you want to count text so you can color it, one easy way is to md5 hash the text. This gives you one color for that snippet of text wherever it is used. Two greens WILL NOT be similar text, but the same red as another red IS the same.
Spark lines are neat. Old concept from Tufte, but not used enough.
Neat visualization: IBM History flow.
The second step in web visualization is to identify the objects of interest. People, places, events, locations, costs, weights, etc… Display the objects, draw crude relationships between them, and look for other relationships. Look at the scene in terms of one object, then look at the objects that are related to that object, then keep going.
Examples: graphVis, touch graphs.
The third step is interaction.
Sliders are easy. Easy is good. Pick a data or relationship, and allow the user to see what happens when they can alter it via slider.
What is better than a slider? A Scented Map. A scented map is a slider that displays data itself. A slider with a chart IN it.
Example: Measure Map.
What is better than a Scented map? A play button that allows the slider to animate over its length. You now have animation…
The fourth step is to provide links to the visualization, and allow scripting. If you embed data on how to generate the exact visualization a user is seeing inside the URL, you can use tools like Paparazzi to get screen shots, and animations.
Provide an API to your visualization. Then use it. Make sure your API is robust. Provide multiple return values so users can choose how to use it with performance in mind. Never make the user make extra calls if you don’t have to.
Google quote: Trying things is cheaper than deciding to do them or not.
A note on complexity and technology: If you have a few hundred items, just use HTML. If you have a few thousand, try flash. If you have tens of thousands of items, us a java applet. If you have more, use a thick client. Each of these technologies increases your download time, so decide wisely.
One thing you can do to decrease download time is to not give all the data right away, either feed it to them slowly, or have it start gathering real time data only after starting.
Getting data, web scraping.
A company called Every Block is looking for data on the web that can be used to tell you about your block. They are gathering similar data as Onvia, but may not know how valuable it really is.
There is allot of free data out there, you can go get it and visualize it for free.
Tufte tells of the idea of getting rid of chart junk. His ideas are great for static images, but with dynamic visualizations they are harder to use. Getting rid of junk still works. Don’t show crap on your visualization that is not needed. Make each chart unique to show the data it is designed for. You should rarely use general purpose visualizations.
One last thing, build visualization to answer a question. But also build them to ask a new question. If it does not make the user play, they will not learn, and insight will not be found. If the visualization presents an answer, and does not ask another question, the user will not play.
Stuff for me to do more research on:
Technology, Flare is like flex...
Microforms, mofo…
Atom feed standard…
Visualcomplexity.com…
It can be used to quickly make data visualizations. It is not as powerful as java, but it has been whittled down to be the most useful parts of java for visualization to make quick prototyping faster and more dynamic. To find lots of source code, search for ‘built with processing’.
Design starts on paper; this obvious for my designer friends. Well, visualization starts in the eye, or the minds eye. We need to begin data visualization by imagining what we dare to see.
The first step in web visualization is to show everything. Don’t waste time trying to figure out the best thing to show, or how to show it. If you can map it to the screen, do it. Get the data to the user (maybe YOU) quickly, then iterate on the visualization until you find what you are looking for.
Displaying data on the screen is cheap and easy. Analyzing the data is expensive and hard. Begin by showing everything, and then use humans to analyze. Humans are better at this when it comes to quick pattern recognition.
Showing everything also limits bias that is naturally going to creep in as you filter down.
Good examples of showing everything are: zip decoder, cab spotting, and many of the digg visualizations.
After you have everything showing, filter down the data, and look for meaningful relationships. Too often developers leave the visualization in the initial form, which makes it hard to use or understand for the user. Simple is often better.
Other interesting visualizations: Oakland crime spotting, digg arc, mappr, trulia.
When displaying large amounts of data, think about representing the data as multiple slices in pixel format. Literally make an image that depicts the data ‘under’ that pixel. These masks can then be used in conjunction with each other to form rich data visualizations. Example: construct a black and white heat map of population over the area you are interested in, also construct a black and white heat map of income over the same region. With these two images, and a map, you can programmatically decide how to display the data at a pixel by looking at each image and querying for the gray value at the point. This has vast possibilities.
If you can count something, you can color it. Duh, however, this is helpful in deciding how to color objects in you map. Tools like Color Brewer help users make good pallets for complex data scenes.
If you want to count text so you can color it, one easy way is to md5 hash the text. This gives you one color for that snippet of text wherever it is used. Two greens WILL NOT be similar text, but the same red as another red IS the same.
Spark lines are neat. Old concept from Tufte, but not used enough.
Neat visualization: IBM History flow.
The second step in web visualization is to identify the objects of interest. People, places, events, locations, costs, weights, etc… Display the objects, draw crude relationships between them, and look for other relationships. Look at the scene in terms of one object, then look at the objects that are related to that object, then keep going.
Examples: graphVis, touch graphs.
The third step is interaction.
Sliders are easy. Easy is good. Pick a data or relationship, and allow the user to see what happens when they can alter it via slider.
What is better than a slider? A Scented Map. A scented map is a slider that displays data itself. A slider with a chart IN it.
Example: Measure Map.
What is better than a Scented map? A play button that allows the slider to animate over its length. You now have animation…
The fourth step is to provide links to the visualization, and allow scripting. If you embed data on how to generate the exact visualization a user is seeing inside the URL, you can use tools like Paparazzi to get screen shots, and animations.
Provide an API to your visualization. Then use it. Make sure your API is robust. Provide multiple return values so users can choose how to use it with performance in mind. Never make the user make extra calls if you don’t have to.
Google quote: Trying things is cheaper than deciding to do them or not.
A note on complexity and technology: If you have a few hundred items, just use HTML. If you have a few thousand, try flash. If you have tens of thousands of items, us a java applet. If you have more, use a thick client. Each of these technologies increases your download time, so decide wisely.
One thing you can do to decrease download time is to not give all the data right away, either feed it to them slowly, or have it start gathering real time data only after starting.
Getting data, web scraping.
A company called Every Block is looking for data on the web that can be used to tell you about your block. They are gathering similar data as Onvia, but may not know how valuable it really is.
There is allot of free data out there, you can go get it and visualize it for free.
Tufte tells of the idea of getting rid of chart junk. His ideas are great for static images, but with dynamic visualizations they are harder to use. Getting rid of junk still works. Don’t show crap on your visualization that is not needed. Make each chart unique to show the data it is designed for. You should rarely use general purpose visualizations.
One last thing, build visualization to answer a question. But also build them to ask a new question. If it does not make the user play, they will not learn, and insight will not be found. If the visualization presents an answer, and does not ask another question, the user will not play.
Stuff for me to do more research on:
Technology, Flare is like flex...
Microforms, mofo…
Atom feed standard…
Visualcomplexity.com…
Wednesday, February 27, 2008
Document Mapper and Attenex in the News
I worked on Document Mapper at Attenex for six years. Document Mapper is an application designed to help lawyers find relevant information scattered in hundreds of thousands of electronic documents. I am very proud of my involvement with Document Mapper, and it is very nice to see it in the news. I wonder what happened to those emails... ;-)
Monday, February 25, 2008
Calling a webservice from Silverlight 1.1
I was going to write a post about how to call a webservice from Silverlight 1.1. But then I found a great link explaining it way better than I can. I have followed each step, and it works like a charm.
Here is the link: Integrating Web Services and Silverlight including Debugging
Because one of the reason I am making this blog is to catalog how to do things (so I don't forget), I am going to copy the contents of this post to this blog. But this is just for my purposes. If the above link works, please follow it, if not, here is the data in a less pretty form. Thanks Peter.
----------------------------------------------------------------------------------
Integrating Web Services and Silverlight including Debugging (Silverlight .net 1.1 Alpha)
The Short Story:
So, I'm working on a Silverlight .net project where the main source of data is a webservice. It's not a huge amount of data, but it is not small either. In general it's about 20K to 50K per download. My original plan was to use the quickstart method (POX) and basically parse the xml using the XMLReader classes that are available on Silverlight. That didn't work so well for me, so I switched to the proxy classes and did not have much more luck. The primary problem is I could not figure out how to debug the code on the Silverlight side. Ultimately, I ended up figuring out how to do debugging and in the next few paragraphs I'll go through the steps including screen shots showing how to do it.
The Solution
So, let's start from the beginning. First thing to do is create an empty solution. In my case, I'm going to call that solution SearchLightMain. I'm going to use Orcas rather than vs2005 because that is required for Silverlight. Ultimately, the web services project will deploy on .net 2.0 but the development envirnoment is still Orcas. (File/New Project/Other Project Types/Empty Solution)
The Silverlight Side
Next, right mouse on the solution explorer and choose Add/New Project/C#/Silverlight. Leave your solutions directory in the Location textbox and put the name of your silverlight project in the name field. In my case, the name will be SearchLight.
After the project is created, my preference is to add a textblock to the page.xaml file and some color to the background so when I run it I can tell it is actually working. Here is what it looks like now after I've done that if right mouse and run TestPage.html.
Now you have the silverlight project done. Let's create the Web Service Project now inside of the same solution we made first.
The Web Service
On the solution explorer, right click on the top of the tree (solution) and say "Add/New Website". Choose ASP.NET web site. (remember, this is Orcas we are still in). Make it a "File System", "C#" project. and for the location put the directory where you have your empty solution followed by the name \WebService. In my case, the name is: C:\Users\pkellner\Documents\Visual Studio Codename Orcas\Projects\SearchLightMain\WebService Also, change the framework to .NET Framework 2.0 in the upper right hand corner of the screen "Add New Website".
Now, we need to make the web service. The easiest thing to do is grab the code from the quickstart and paste it into a webservice if you don't have your own. The URL where you can grab the code is: http://www.silverlight.net/QuickStarts/Remote/UsingJSON.aspx
One thing I found was that if you downgrade to .net 2.0 from .net 3.5 as we did earlier, the webservices that use the tag [System.Web.Script.Services.ScriptService] do not work. My solution was to create an Ajax enabled web site with vs2005 and copy that web.config into this project.
Continuing on, the next thing I did was to copy the files TestPage.html, TestPage.html.js and Silverlight.js from the SearchLight project into the WebService project. This is because we will actually be running the project from the webservices project.
Finally, to complete the linking, right click on the webservice project and select "Add Silverlight Link…" (not sure what the … means).
Now, do a Build/Rebuild all and the xaml files from your silverlight project as well as the ClientBin directory will be imported (copied) into your web services project.
Now, verify that your web service actually works by right mousing on the asmx file and pressing browse.
The next step is not what you are expecting. The quickstart says go ahead and create a web reference and run that. That's great as long as you don't want to run this project on a real server (port 80). Best I can tell, it hardwires the port to whatever the debugger is set to. I tried without much luck to change the property in the localhost control created but without much luck. I believe a better solution is to run the tool called slwsdl.exe which is part of the orcas distribution. essentially, you run it with the /SilverlightClient option and point it at your web service.
This created a file called WebService.cs which I put in my silverlight project. It becomes my proxy. The nice thing is I can modify the line that reaches out to the webservice to be whatever I want. By default it is the local server with the debug port set, but when I deploy to a real server I can change that address to the real name.
Finally, now you can debug.
Go to your SearchLight project and add some code to the Page.xaml.cs file. then, run the project from the webservice/testpage.html and vwala! You can debug.
Final thoughts
So, why go through all this trouble? It think I forgot to mention that it's to avoid the dreaded Cross-Domain issue. That is, your Silverlight client can not call a webservice that is not in the same root domain and running on the same port as your silverlight app. Also, while I was writing this article to help others avoid some of the pain I've been through, I put a project together from scratch. A couple things I noticed along the way.
* When you copy xaml files from one project to another, you can no longer run them. You need to change their property from Silverlight Page to Embedded Property or the page can not be read in it's codebehind.
* It's very important to go to debug/exceptions and turn on all exceptions, otherwise you will not know what is killing your app (see previous item).
* It's a cold cruel world out there on the bleeding edge.
Good luck with your Silverlight development. There are lots of opportunities out there. Indeed, a target rich environment.
Here is the link: Integrating Web Services and Silverlight including Debugging
Because one of the reason I am making this blog is to catalog how to do things (so I don't forget), I am going to copy the contents of this post to this blog. But this is just for my purposes. If the above link works, please follow it, if not, here is the data in a less pretty form. Thanks Peter.
----------------------------------------------------------------------------------
Integrating Web Services and Silverlight including Debugging (Silverlight .net 1.1 Alpha)
The Short Story:
So, I'm working on a Silverlight .net project where the main source of data is a webservice. It's not a huge amount of data, but it is not small either. In general it's about 20K to 50K per download. My original plan was to use the quickstart method (POX) and basically parse the xml using the XMLReader classes that are available on Silverlight. That didn't work so well for me, so I switched to the proxy classes and did not have much more luck. The primary problem is I could not figure out how to debug the code on the Silverlight side. Ultimately, I ended up figuring out how to do debugging and in the next few paragraphs I'll go through the steps including screen shots showing how to do it.
The Solution
So, let's start from the beginning. First thing to do is create an empty solution. In my case, I'm going to call that solution SearchLightMain. I'm going to use Orcas rather than vs2005 because that is required for Silverlight. Ultimately, the web services project will deploy on .net 2.0 but the development envirnoment is still Orcas. (File/New Project/Other Project Types/Empty Solution)
The Silverlight Side
Next, right mouse on the solution explorer and choose Add/New Project/C#/Silverlight. Leave your solutions directory in the Location textbox and put the name of your silverlight project in the name field. In my case, the name will be SearchLight.
After the project is created, my preference is to add a textblock to the page.xaml file and some color to the background so when I run it I can tell it is actually working. Here is what it looks like now after I've done that if right mouse and run TestPage.html.
Now you have the silverlight project done. Let's create the Web Service Project now inside of the same solution we made first.
The Web Service
On the solution explorer, right click on the top of the tree (solution) and say "Add/New Website". Choose ASP.NET web site. (remember, this is Orcas we are still in). Make it a "File System", "C#" project. and for the location put the directory where you have your empty solution followed by the name \WebService. In my case, the name is: C:\Users\pkellner\Documents\Visual Studio Codename Orcas\Projects\SearchLightMain\WebService Also, change the framework to .NET Framework 2.0 in the upper right hand corner of the screen "Add New Website".
Now, we need to make the web service. The easiest thing to do is grab the code from the quickstart and paste it into a webservice if you don't have your own. The URL where you can grab the code is: http://www.silverlight.net/QuickStarts/Remote/UsingJSON.aspx
One thing I found was that if you downgrade to .net 2.0 from .net 3.5 as we did earlier, the webservices that use the tag [System.Web.Script.Services.ScriptService] do not work. My solution was to create an Ajax enabled web site with vs2005 and copy that web.config into this project.
Continuing on, the next thing I did was to copy the files TestPage.html, TestPage.html.js and Silverlight.js from the SearchLight project into the WebService project. This is because we will actually be running the project from the webservices project.
Finally, to complete the linking, right click on the webservice project and select "Add Silverlight Link…" (not sure what the … means).
Now, do a Build/Rebuild all and the xaml files from your silverlight project as well as the ClientBin directory will be imported (copied) into your web services project.
Now, verify that your web service actually works by right mousing on the asmx file and pressing browse.
The next step is not what you are expecting. The quickstart says go ahead and create a web reference and run that. That's great as long as you don't want to run this project on a real server (port 80). Best I can tell, it hardwires the port to whatever the debugger is set to. I tried without much luck to change the property in the localhost control created but without much luck. I believe a better solution is to run the tool called slwsdl.exe which is part of the orcas distribution. essentially, you run it with the /SilverlightClient option and point it at your web service.
This created a file called WebService.cs which I put in my silverlight project. It becomes my proxy. The nice thing is I can modify the line that reaches out to the webservice to be whatever I want. By default it is the local server with the debug port set, but when I deploy to a real server I can change that address to the real name.
Finally, now you can debug.
Go to your SearchLight project and add some code to the Page.xaml.cs file. then, run the project from the webservice/testpage.html and vwala! You can debug.
Final thoughts
So, why go through all this trouble? It think I forgot to mention that it's to avoid the dreaded Cross-Domain issue. That is, your Silverlight client can not call a webservice that is not in the same root domain and running on the same port as your silverlight app. Also, while I was writing this article to help others avoid some of the pain I've been through, I put a project together from scratch. A couple things I noticed along the way.
* When you copy xaml files from one project to another, you can no longer run them. You need to change their property from Silverlight Page to Embedded Property or the page can not be read in it's codebehind.
* It's very important to go to debug/exceptions and turn on all exceptions, otherwise you will not know what is killing your app (see previous item).
* It's a cold cruel world out there on the bleeding edge.
Good luck with your Silverlight development. There are lots of opportunities out there. Indeed, a target rich environment.
Sunday, February 24, 2008
Writing a simple c# WebService
If you want to save state from Silverlight between sessions, you will need access to the server’s file system or database. To access either, you will need to create a web service.
In later posts I will discus how to USE the web service from within Silverlight, but for now, this is just how to make a web service in .NET.
Create a new class that extends System.Web.Services.WebService:
using System.Web.Script.Services;
public class ExampleWs : System.Web.Services.WebService
…
Add four attributes to the class:
[WebService(Namespace = "http://yourSiteName.com/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
[ToolboxItem(false)]
[ScriptService] //To allow this Web Service to be called from script, using ASP.NET AJAX
public class ExampleWs : System.Web.Services.WebService
…
Create a simple method. You want your web methods to be as simple as possible. Don’t make a habit of doing business logic from within a web method, instead, simply call a function from your business logic’s dll.
Here, we will just return the string “Hello World”:
[WebMethod] //attribute needed for method to be visible as a web method
[ScriptMethod] //To allow this Web Method to be called from script, using ASP.NET AJAX
public string HelloWorldExample(bool allCaps)
{
if(allCaps)
return “HELLO WORLD”;
return “Hello World”;
}
From the web service, you are out of the Silverlight sandbox and can access the file system of the server.
To read the files in a directory:
[WebMethod] //attribute needed for method to be visible as a web method
[ScriptMethod] //To allow this Web Method to be called from script, using ASP.NET AJAX
public string[] GetFileNames(string dir)
{
string[] files = {""};
try
{
string path = Server.MapPath(dir).ToString(); //get the path on the server
files = System.IO.Directory.GetFiles(path);
return files;
}
catch (Exception)
{
return files;
}
}
If you publish this web service to a web site, you can call it by simply going to www.yourwebsite.com\ExampleWs.asmx
In later posts I will discus how to USE the web service from within Silverlight, but for now, this is just how to make a web service in .NET.
Create a new class that extends System.Web.Services.WebService:
using System.Web.Script.Services;
public class ExampleWs : System.Web.Services.WebService
…
Add four attributes to the class:
[WebService(Namespace = "http://yourSiteName.com/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
[ToolboxItem(false)]
[ScriptService] //To allow this Web Service to be called from script, using ASP.NET AJAX
public class ExampleWs : System.Web.Services.WebService
…
Create a simple method. You want your web methods to be as simple as possible. Don’t make a habit of doing business logic from within a web method, instead, simply call a function from your business logic’s dll.
Here, we will just return the string “Hello World”:
[WebMethod] //attribute needed for method to be visible as a web method
[ScriptMethod] //To allow this Web Method to be called from script, using ASP.NET AJAX
public string HelloWorldExample(bool allCaps)
{
if(allCaps)
return “HELLO WORLD”;
return “Hello World”;
}
From the web service, you are out of the Silverlight sandbox and can access the file system of the server.
To read the files in a directory:
[WebMethod] //attribute needed for method to be visible as a web method
[ScriptMethod] //To allow this Web Method to be called from script, using ASP.NET AJAX
public string[] GetFileNames(string dir)
{
string[] files = {""};
try
{
string path = Server.MapPath(dir).ToString(); //get the path on the server
files = System.IO.Directory.GetFiles(path);
return files;
}
catch (Exception)
{
return files;
}
}
If you publish this web service to a web site, you can call it by simply going to www.yourwebsite.com\ExampleWs.asmx
Saturday, February 23, 2008
Access ASP page from Silverlight 1.1 control
Say you want to alter the contents of an ASP page from within a Silverlight control on the page. To do so, get the HtmlDocument from HtmlPage and use GetElementById:
//This hides the div with id=contentId and displays the div with id=content2Id
HtmlDocument document = HtmlPage.Document;
document.GetElementByID("contentId").SetStyleAttribute("display", "none");
document.GetElementByID("content2Id").SetStyleAttribute("display", "block");
//This hides the div with id=contentId and displays the div with id=content2Id
HtmlDocument document = HtmlPage.Document;
document.GetElementByID("contentId").SetStyleAttribute("display", "none");
document.GetElementByID("content2Id").SetStyleAttribute("display", "block");
Wednesday, February 20, 2008
A game loop for Silverlight 1.1 using a Storyboard
So you want to have a timer for your Silverlight game. The current option is to use the Storyboard as a timer. I got most of this code form a very good post from here.
Here is the gameloop class:
/// <summary>
/// Animation on a storyboard used as a timer tick for a game loop
/// from: http://silverlightrocks.com/community/blogs/silverlight_games_101/archive/2007/05/21/a-better-game-loop.aspx
/// </summary>
public class Gameloop
{
/// <summary>
/// canvas for update
/// </summary>
Canvas targetCanvas = null;
/// <summary>
/// story board for animation
/// </summary>
Storyboard storyboard;
/// <summary>
/// datetime of last update
/// </summary>
DateTime lastUpdateTime = DateTime.MinValue;
/// <summary>
/// Delegate used to pass tick event
/// </summary>
/// <param name="ElapsedTime">time since last tick</param>
public delegate void UpdateDelegate(TimeSpan ElapsedTime);
/// <summary>
/// Tick event
/// </summary>
public event UpdateDelegate Update;
/// <summary>
/// Create a storyboard gameloop for the canvas
/// </summary>
/// <param name="canvas">The canvas to update on tick</param>
public void Attach(Canvas canvas)
{
targetCanvas = canvas;
storyboard = new Storyboard();
storyboard.SetValue<string>(Storyboard.NameProperty, "gameloop");
canvas.Resources.Add(storyboard);
lastUpdateTime = DateTime.Now;
storyboard.Completed += new EventHandler(storyboard_Completed);
storyboard.Begin();
}
/// <summary>
/// stop the rimer and remove the canvas
/// </summary>
/// <param name="canvas">the canvas to remove</param>
public void Detach(Canvas canvas)
{
storyboard.Stop();
canvas.Resources.Remove(storyboard);
}
/// <summary>
/// Tick event for animation on timer
/// </summary>
/// <param name="sender">not used</param>
/// <param name="e">not used</param>
void storyboard_Completed(object sender, EventArgs e)
{
TimeSpan elapsedTime = DateTime.Now - lastUpdateTime;
lastUpdateTime = DateTime.Now;
if (Update != null) Update(elapsedTime);
storyboard.Begin();
}
}
In your main canvas, create the gameloop and give it a function to call on update:
//create timer
Gameloop mGameloop = new Gameloop();
mGameloop.Attach(this);//attach the canvas that you want a timer for
//assign a callback function to be called on tick
mGameloop.Update += new Gameloop.UpdateDelegate(gameloop_Update);
Here is my update function:
/// <summary>
/// each tick this methos is called
/// </summary>
/// <param name="ElapsedTime">time since last tick</param>
void gameloop_Update(TimeSpan elapsedTime)
{
//do something like move a sprite on the screen
mSprite.Animate(elapsedTime);
//force garbage, not necessary, but may help with the beta(1.1)
GC.Collect();
}
I have found that this approach does not work well if you have other Storyboards in your application. In this case, you would need to manage which Storyboard is running and only let one run at a time. If you do not manage your Storyboards, you will get odd effects.
Here is the gameloop class:
/// <summary>
/// Animation on a storyboard used as a timer tick for a game loop
/// from: http://silverlightrocks.com/community/blogs/silverlight_games_101/archive/2007/05/21/a-better-game-loop.aspx
/// </summary>
public class Gameloop
{
/// <summary>
/// canvas for update
/// </summary>
Canvas targetCanvas = null;
/// <summary>
/// story board for animation
/// </summary>
Storyboard storyboard;
/// <summary>
/// datetime of last update
/// </summary>
DateTime lastUpdateTime = DateTime.MinValue;
/// <summary>
/// Delegate used to pass tick event
/// </summary>
/// <param name="ElapsedTime">time since last tick</param>
public delegate void UpdateDelegate(TimeSpan ElapsedTime);
/// <summary>
/// Tick event
/// </summary>
public event UpdateDelegate Update;
/// <summary>
/// Create a storyboard gameloop for the canvas
/// </summary>
/// <param name="canvas">The canvas to update on tick</param>
public void Attach(Canvas canvas)
{
targetCanvas = canvas;
storyboard = new Storyboard();
storyboard.SetValue<string>(Storyboard.NameProperty, "gameloop");
canvas.Resources.Add(storyboard);
lastUpdateTime = DateTime.Now;
storyboard.Completed += new EventHandler(storyboard_Completed);
storyboard.Begin();
}
/// <summary>
/// stop the rimer and remove the canvas
/// </summary>
/// <param name="canvas">the canvas to remove</param>
public void Detach(Canvas canvas)
{
storyboard.Stop();
canvas.Resources.Remove(storyboard);
}
/// <summary>
/// Tick event for animation on timer
/// </summary>
/// <param name="sender">not used</param>
/// <param name="e">not used</param>
void storyboard_Completed(object sender, EventArgs e)
{
TimeSpan elapsedTime = DateTime.Now - lastUpdateTime;
lastUpdateTime = DateTime.Now;
if (Update != null) Update(elapsedTime);
storyboard.Begin();
}
}
In your main canvas, create the gameloop and give it a function to call on update:
//create timer
Gameloop mGameloop = new Gameloop();
mGameloop.Attach(this);//attach the canvas that you want a timer for
//assign a callback function to be called on tick
mGameloop.Update += new Gameloop.UpdateDelegate(gameloop_Update);
Here is my update function:
/// <summary>
/// each tick this methos is called
/// </summary>
/// <param name="ElapsedTime">time since last tick</param>
void gameloop_Update(TimeSpan elapsedTime)
{
//do something like move a sprite on the screen
mSprite.Animate(elapsedTime);
//force garbage, not necessary, but may help with the beta(1.1)
GC.Collect();
}
I have found that this approach does not work well if you have other Storyboards in your application. In this case, you would need to manage which Storyboard is running and only let one run at a time. If you do not manage your Storyboards, you will get odd effects.
Tuesday, February 19, 2008
Load a file Asynchronously with Silverlight 1.1
Say you want to load some or all of the images for your new Silverlight game up front. Instead of Silverlight loading a image file when it is about to use it, we load the files before we begin the game.
To do this, we use the System.Windows.Downloader.
Set up our member variables:
/// <summary>
/// TestBlock to show progress
/// </summary>
TextBlock mProgressText = new TextBlock();
/// <summary>
/// Downloaded to do the download
/// </summary>
Downloader mImageDownloader = new Downloader();
Ready our scene and set up the Downloader:
/// <summary>
/// Using the mImageDownloader, start to load a file from the filesystem (on the server)
/// </summary>
/// <param name="fileName">file to load</param>
void LoadImagesAsynchronously(string fileName)
{
//set up progress label
mProgressText.Text = "Loading Images [--------------------------------------------------]";
mProgressText.SetValue(Canvas.ZIndexProperty, 100);//move above whatever else is on the canvas
this.Children.Add(mProgressText);
//set up completed event
mImageDownloader.Completed += new EventHandler(ImageDownloader_Completed);
//set up progress changed event
mImageDownloader.DownloadProgressChanged += new EventHandler(ImageDownloader_DownloadProgressChanged);
//set which file to load
mImageDownloader.Open("GET", new Uri(fileName, UriKind.Relative));
//start the download
mImageDownloader.Send();
}
Set up our progress changed event:
As the downloaded downloads the file, it reports back on its progress, and we report that back to the user via mProgressText.
/// <summary>
/// show progress of loading images
/// </summary>
/// <param name="sender">mImageDownloader</param>
/// <param name="e">eventArgs from downloader</param>
void ImageDownloader_DownloadProgressChanged(object sender, EventArgs e)
{
//every time the downloader updates its progress, update the textplock to show progress
//like: "Loading Images [IIIIIIIIIIII--------------------------------------]";
int tickCount = 50;
string newText = "Loading Images [";
for (int i = 0; i < tickCount; i += 3)
{
if (i < mImageDownloader.DownloadProgress * tickCount)
{
newText += "IIIIII";
}
else
{
newText += "---";
}
}
newText += "]";
mProgressText.Text = newText;
}
Set up our complete event:
/// <summary>
/// fires after images load
/// </summary>
/// <param name="sender">mImageDownloader</param>
/// <param name="e">eventArgs from downloader</param>
void ImageDownloader_Completed(object sender, EventArgs e)
{
//update the progress indicator one last time
//you would probably remove the indicator at this point
//and continue on with your application code
mProgressText.Text = "Load Complete!";
}
The Downloader can download a single file. You can download one file or zip which can contain many files.
To access the files:
/// <summary>
/// assigns an image from the downloader to a geometry path
/// </summary>
/// <param name="imageName">image name in downloader</param>
/// <param name="geometryPath">the path to assign the image to</param>
public void SetGeometryImage(string imageName, Path geometryPath)
{
ImageBrush ibrush = new ImageBrush();
//access the image in the downloader by file name i.e. "Image.jpg"
ibrush.SetSource(mImageDownloader, imageName);
this.GeometryPath.Fill = ibrush;
}
To do this, we use the System.Windows.Downloader.
Set up our member variables:
/// <summary>
/// TestBlock to show progress
/// </summary>
TextBlock mProgressText = new TextBlock();
/// <summary>
/// Downloaded to do the download
/// </summary>
Downloader mImageDownloader = new Downloader();
Ready our scene and set up the Downloader:
/// <summary>
/// Using the mImageDownloader, start to load a file from the filesystem (on the server)
/// </summary>
/// <param name="fileName">file to load</param>
void LoadImagesAsynchronously(string fileName)
{
//set up progress label
mProgressText.Text = "Loading Images [--------------------------------------------------]";
mProgressText.SetValue(Canvas.ZIndexProperty, 100);//move above whatever else is on the canvas
this.Children.Add(mProgressText);
//set up completed event
mImageDownloader.Completed += new EventHandler(ImageDownloader_Completed);
//set up progress changed event
mImageDownloader.DownloadProgressChanged += new EventHandler(ImageDownloader_DownloadProgressChanged);
//set which file to load
mImageDownloader.Open("GET", new Uri(fileName, UriKind.Relative));
//start the download
mImageDownloader.Send();
}
Set up our progress changed event:
As the downloaded downloads the file, it reports back on its progress, and we report that back to the user via mProgressText.
/// <summary>
/// show progress of loading images
/// </summary>
/// <param name="sender">mImageDownloader</param>
/// <param name="e">eventArgs from downloader</param>
void ImageDownloader_DownloadProgressChanged(object sender, EventArgs e)
{
//every time the downloader updates its progress, update the textplock to show progress
//like: "Loading Images [IIIIIIIIIIII--------------------------------------]";
int tickCount = 50;
string newText = "Loading Images [";
for (int i = 0; i < tickCount; i += 3)
{
if (i < mImageDownloader.DownloadProgress * tickCount)
{
newText += "IIIIII";
}
else
{
newText += "---";
}
}
newText += "]";
mProgressText.Text = newText;
}
Set up our complete event:
/// <summary>
/// fires after images load
/// </summary>
/// <param name="sender">mImageDownloader</param>
/// <param name="e">eventArgs from downloader</param>
void ImageDownloader_Completed(object sender, EventArgs e)
{
//update the progress indicator one last time
//you would probably remove the indicator at this point
//and continue on with your application code
mProgressText.Text = "Load Complete!";
}
The Downloader can download a single file. You can download one file or zip which can contain many files.
To access the files:
/// <summary>
/// assigns an image from the downloader to a geometry path
/// </summary>
/// <param name="imageName">image name in downloader</param>
/// <param name="geometryPath">the path to assign the image to</param>
public void SetGeometryImage(string imageName, Path geometryPath)
{
ImageBrush ibrush = new ImageBrush();
//access the image in the downloader by file name i.e. "Image.jpg"
ibrush.SetSource(mImageDownloader, imageName);
this.GeometryPath.Fill = ibrush;
}
Monday, February 18, 2008
How to read and write simple XML with Silverlight 1.1
Silverlight does not have access to XmlDocument so we must make use of the XmlReader and XmlWriter.
To write:
/// <summary>
/// Write data to XML in Silverlight 1.1
/// </summary>
/// <returns>string in XML format</returns>public string WriteXML()
{
StringBuilder sbuilder = new StringBuilder();
XmlWriter writer = XmlWriter.Create(sbuilder);//create an XMLWriter from a StringBuilder
writer.WriteStartDocument();//start xml document tag
//<outerElement>
writer.WriteStartElement("outerElement");
//<innerElement>
writer.WriteStartElement("innerElement");
//<attribute1> of inner element
writer.WriteStartAttribute("attribute1");
writer.WriteString("value of attribute1");
writer.WriteEndAttribute();
//<attribute2> of inner element
writer.WriteStartAttribute("attribute2");
writer.WriteString("value of attribute2");
writer.WriteEndAttribute();
//</innerElement>
writer.WriteEndElement();
//</outerElement>
writer.WriteEndElement();
writer.WriteEndDocument();//end xml document tag
writer.Flush();
return sbuilder.ToString();
}
This will output:
<?xml version="1.0" encoding="utf-16"?>
<outerElement>
<innerElement attribute1="value of attribute1" attribute2="value of attribute2" />
</outerElement>
To read:
/// <summary>
/// Read data from XML in Silverlight 1.1
/// </summary>
/// <param name="xmlString">string in XML form to read</param>
public void ReadXML(string xmlString)
{
TextReader stream = new StringReader(xmlString);
XmlReader reader = XmlReader.Create(stream);//create an XML reader
bool hasMore = reader.Read();
while (hasMore)//read till we get to the end
{
//lets just find the inner element and read its attributes
if (reader.IsStartElement() && reader.Name == "innerElement")
{
string at1 = reader.GetAttribute("attribute1");
string at2 = reader.GetAttribute("attribute2");
//todo: do something with the attributes...
}
//if we had other data, we would have logic for each value we wanted to read
hasMore = reader.Read();
}
}
ReadXML(WriteXML()); will read “value of attribute1” and “value of attribute2” (but do nothing with the data).
For readability I have used hard coded string values. For production code, you should define a schema of consts or an enumeration for all element names.
To write:
/// <summary>
/// Write data to XML in Silverlight 1.1
/// </summary>
/// <returns>string in XML format</returns>public string WriteXML()
{
StringBuilder sbuilder = new StringBuilder();
XmlWriter writer = XmlWriter.Create(sbuilder);//create an XMLWriter from a StringBuilder
writer.WriteStartDocument();//start xml document tag
//<outerElement>
writer.WriteStartElement("outerElement");
//<innerElement>
writer.WriteStartElement("innerElement");
//<attribute1> of inner element
writer.WriteStartAttribute("attribute1");
writer.WriteString("value of attribute1");
writer.WriteEndAttribute();
//<attribute2> of inner element
writer.WriteStartAttribute("attribute2");
writer.WriteString("value of attribute2");
writer.WriteEndAttribute();
//</innerElement>
writer.WriteEndElement();
//</outerElement>
writer.WriteEndElement();
writer.WriteEndDocument();//end xml document tag
writer.Flush();
return sbuilder.ToString();
}
This will output:
<?xml version="1.0" encoding="utf-16"?>
<outerElement>
<innerElement attribute1="value of attribute1" attribute2="value of attribute2" />
</outerElement>
To read:
/// <summary>
/// Read data from XML in Silverlight 1.1
/// </summary>
/// <param name="xmlString">string in XML form to read</param>
public void ReadXML(string xmlString)
{
TextReader stream = new StringReader(xmlString);
XmlReader reader = XmlReader.Create(stream);//create an XML reader
bool hasMore = reader.Read();
while (hasMore)//read till we get to the end
{
//lets just find the inner element and read its attributes
if (reader.IsStartElement() && reader.Name == "innerElement")
{
string at1 = reader.GetAttribute("attribute1");
string at2 = reader.GetAttribute("attribute2");
//todo: do something with the attributes...
}
//if we had other data, we would have logic for each value we wanted to read
hasMore = reader.Read();
}
}
ReadXML(WriteXML()); will read “value of attribute1” and “value of attribute2” (but do nothing with the data).
For readability I have used hard coded string values. For production code, you should define a schema of consts or an enumeration for all element names.
Hello World
This is my first blog post. In the future, they will be slightly more interesting.
I am using the css code from Ishan
I am using the css code from Ishan
Subscribe to:
Posts (Atom)
