mandag den 21. oktober 2013
5 tips on how to prepare for an IT job interview. Some general, some practical.
And now for something completely different.
Having just dealt with a number of job interviews, from the job-seeker's point of view, I can testify with some certainty as to how to prepare for one such interview. I furthermore claim some success in this, in as much as I was offered 4 jobs from the 4 interviews, so I hope some of the below tips, which I made use of myself, will prove helpful to you, too.
Tip #1. Stake the place out. Apply the same dress code for your interview.
Why #1? Because a future boss is the more likely to approve of a potential candidate if she/he seems similiar in style to the future boss in question. Goes not for everyone, but for the majority of us we like the kind of people we ourselves are. And you can take advantage of that. I'm not suggesting you sit in your car outside the place for hours on end, a simple search on the Internet, presumerably their webpage or social page, will do.
Tip #2. Print out the job add and highlight relevant sentences on it.
Why #2? Because that will keep you focused on what your strategy will be, going into the interview. And it's essential you have one - it will set you apart from the others. Maybe you applied because the job add sounded really interesting, maybe you applied because you're in damn need of a job to pay your bills; whichever is the case, you can be sure you'll be asked the question "what makes this job interesting to you". And you're not to reply 'I need a job to pay my bills', so highlight relevant sentences that bring about the essense of the job add and form a strategy for answering that question, "why did you apply for this particular job" (they never seem to think that you're likely to have applied to several others, they want to hear about what makes them special to you). For example, let's say the job add mentions "must have an interest in front-end web development". You'll highlight that and make it your strategy-call: so your answer will be "because I'm going to dedicate my career to web development, it's the future I'm certain, and this company seems to be on target to be part of that future and want to be a part of that". Or something to that effect. Again, set up a strategy for what how you will present yourself and your talents. What's your 'thing', what do you have that makes you not just one in the crowd? How can you hook that up with the job add's requirements, with the company's requirements?
P.S. You don't really need to highlight one or more sentences, that's just what I myself do as I carry that printed-out job add with me to the interview, to glance at it and the lines I highlighted just a minute or so away from attending the interview.
Tip #3. Don't drink anything prior to the interview, especially coffee.
Why #3? Okay, this is a bit personal and certainly practical, it's because - if and only if you're like me - you're likely to be a bit nervous. That's a healthy thing, it will keep you on your toes, but - and, again, only if you're like me - you'll be wanting to take a pee every damn fifteen minutes, from being nervous. So if your interview is before 12 noon, and you think you can do without, it's best not to drink anything and not risk having two minutes to go before entering the room for that interview and be really needing to go to the bathroom.
Tip #4. Prepare a show and tell of something you've done (preferably in the technology that you're about to be hired for).
Why #4. Because, even if you haven't been asked to do a show and tell, this will keep you sharp and focused, right up to the second you enter the room. It will prepare you mentally if there's suddenly a coding-test in the required job-skills, that you weren't aware of. And it will make you feel like, and exude the persona of, one who comes prepared, and your body language will reflect that. It doesn't matter that you'll never actually do a show and tell. That's not the point. The point is going in there in a confident, well-prepared manner, and that's where the show and tell, disregarding its potential use, will help you.
Tip #5. Prepare for this question, "what are your good points and what are you bad points".
Why #5. Because these are classic questions that you're likely to be asked. And for a good reason, too, much can be interpreted from the answers. As is the case with tip #4, even if you'll never be asked it's good thing to have an answer ready, as it'll keep you focused on what you want to sell yourself by. With the "what are you not good at"-question, you'll try to direct the answer towards a moot point of sorts, so as to not put yourself in a less than favorable position. Don't give them some entry point they can start to dig into and create fuss about. Instead say something like "well, I'm not good at dealing with internal power-struggles and bickering" or maybe "I'm not good at dealing with an employer who's not supportive of my desire to keep myself updated in my field". That's a show-stopper right there, they're likely to talk about how that's not the case with their company and you in turn haven't actually declared any significant bad point about yourself.
The above is what works for me, and may not necessarily work for you, but I sure hope at least one or two of the points will help you, and best of luck to you. The main point of this post is this: It's vital you prepare for that interview. Don't just go in there thinking "I aced the resumé so now they want to talk, I can just wing that, it's just a chat". You spend (hopefully) time on the application, and you should spend time on the interview as well. Spend two-three hours on it, that'll suffice. Your posture will be the better for it.
Bonus tip #1. Take a shot of sugar before the interview. The sugar-rush will add 10% to your mental capabilities for a short duration, this has been a certified exam-tip for years.
Bonus tip #2. If they ask you, 'where do you see yourself in two years?' answer 'with this company', immediately and without hesitation. They want to hear their investment will still be there in two years' time so that's the answer you need to give.
onsdag den 9. oktober 2013
Mocking session state in a asp.net mvc4 unit test using Moq
I recently spent more time than I'd liked to figure out how to mock session state within an ASP.NET MVC test project. So here's the solution to that one, so hopefully you won't spend as much time as I.
Important disclaimer: I was all over the dial to search for info, but most of what I dug up was related to asp.net mvc 3. This below solution works for me with ASP.NET MVC 4 and Moq as mocking framework.
Consider the following controller and single action-method:
public class HomeController : Controller
{
public HomeController()
{
// default constructor, usually you'd inject some repository or what not here, but for this example we'll keep it simple
}
public ViewResult TestMe()
{
System.Diagnostics.Debug.WriteLine(Session["selectedMonth"]);
System.Diagnostics.Debug.WriteLine(Session["selectedYear"]);
return View();
}
}
The action-method references the current httpcontext's Sesson collection. So if we instantiate a 'HomeController' and try to obtain a ViewResult when calling the action-method, our unit test will fail with a NullReferenceException.
So, since the action-method wants to know about the Session collection, which resides in the HttpContext for the request to the method, we need to provide a HttpContext object. The below unit test code creates a mock HttpContext object, hooks it up to a mock Session object and passes it the instantation of the controller - and the test will then pass, as now the action-method has a HttpContext to reach into and yank out the Session info.
[TestMethod]
public void TestActionMethod()
{
// create the mock http context
var fakeHttpContext = new Mock();
// create a mock session object and hook it up to the mock http context
var sessionMock = new HttpSessionMock {{"selectedYear", 2013}, {"selectedMonth", 10}};
var mockSessionState = new Mock();
fakeHttpContext.Setup(ctx => ctx.Session).Returns(sessionMock);
// ... and here's how to attach a http context identity, just in case you'll come to need that, too
var fakeIdentity = new GenericIdentity("mno@ucsj.dk");
var principal = new GenericPrincipal(fakeIdentity, null);
fakeHttpContext.Setup(t => t.User).Returns(principal);
// we'll need to hook our http context up to a controller context mock - because we can't provide our controller with the http context mock directly
var homeControllerMock = new Mock();
homeControllerMock.Setup(foo => foo.HttpContext).Returns(fakeHttpContext.Object);
// all set up, now we'll instantiate the controller and pass our controller context object into its 'controllerContext' property
var target = new HomeController()
{
ControllerContext = homeControllerMock.Object
};
// ... and the below call to the action method won't throw a nullReferenceException, because now it has a Session state to dig into
ViewResult result = target.TestMe();
// ... and so the test will pass
Assert.AreEqual(string.empty, result.ViewName);
}
Etiketter:
asp.net mvc,
c#,
HttpContextBase,
HttpSessionStateBase,
mocking,
moq,
session
mandag den 23. september 2013
Contact web api from InfoPath Designer 2013
I was having some trouble getting values from my home-brewed web api into a InfoPath Designer 2013 form, so I wanted to document the solution for those of you out there perhaps struggling with this as well.
I was calling a simple 'Hello World'-web api that would return a string. My simple aip looks like this:
However, upon calling this api in InfoPath Designer 2013, I got the following error message:
... to indicate the xml structure is invalid.
I didn't get it - when I called the service directly from my browser, valid xml was returned!:
The problem, as it turned out, was of course the one that as opposed to the xml displayed by my browsers, the InfoPath Designer application - correctly - retrieved the data by way of json, the web api's default MO.
So, in order to serve up only XML, for InfoPath to agree with, we'll strip away the web api's possibility of serving up json altogether. Modify your WebApiConfig to resemble the below, though of course take into consideration the routes you have for your own app:
Now, as we re-publish the web api service, we can try once more the url in InfoPath, which will now allow us to proceed to the next step:
Intriguingly, on a completely different note, the 'get data from http rest service' workflow component in Sharepoint Designer 2013 works off JSON, as opposed to XML! But that's a blog-entry for another rainy day.
Hope this helps someone, anyone,
thanks for reading.
I was calling a simple 'Hello World'-web api that would return a string. My simple aip looks like this:
namespace ADlookup.Controllers
{
/* model */
public class employee
{
public string employeeId { get; set; }
public string bossId { get; set; }
}
public class ADLookupController : ApiController
{
[HttpGet]
public employee getNearestBossId([FromUri] string id)
{
return new employee()
{
employeeId = id,
bossId = id
};
}
}
}
However, upon calling this api in InfoPath Designer 2013, I got the following error message:
... to indicate the xml structure is invalid.
I didn't get it - when I called the service directly from my browser, valid xml was returned!:
The problem, as it turned out, was of course the one that as opposed to the xml displayed by my browsers, the InfoPath Designer application - correctly - retrieved the data by way of json, the web api's default MO.
So, in order to serve up only XML, for InfoPath to agree with, we'll strip away the web api's possibility of serving up json altogether. Modify your WebApiConfig to resemble the below, though of course take into consideration the routes you have for your own app:
public static class WebApiConfig
{
public static void Register(HttpConfiguration config)
{
config.Routes.MapHttpRoute(
name: "DefaultApi",
routeTemplate: "api/{controller}/{id}",
defaults: new { id = RouteParameter.Optional }
);
// tbe below must be enabled if this rest service is used with infopath designer 2013 - it only accepts xml data.
// thus we'll remove the json return type
var formatters = GlobalConfiguration.Configuration.Formatters;
formatters.Remove(formatters.JsonFormatter);
}
}
Now, as we re-publish the web api service, we can try once more the url in InfoPath, which will now allow us to proceed to the next step:
Intriguingly, on a completely different note, the 'get data from http rest service' workflow component in Sharepoint Designer 2013 works off JSON, as opposed to XML! But that's a blog-entry for another rainy day.
Hope this helps someone, anyone,
thanks for reading.
Etiketter:
asp.net mvc,
c#,
InfoPath,
InfoPath Designer 2013,
json,
mvc,
web api,
xml
torsdag den 5. september 2013
Prevent browser caching of css and javascript files
A modern browser will attempt to cache content as best it can, to make for a better end-user experience. This works well, but we may run into issues when we deploy a set of different files to the server, yet the client browser insists on serving up the old ones out of its cache.
So here's a tip on how to force the client browser to reload newly deployed files. You can use this with any kind of content file served over an http connection, be it css-files, javascript files, you name it.
The trick is to add an updated querystring value to the content url. For example, instead of
... we go ...
... instead. With each deployment, the 'v' value changes, which will force the client into retrieving a new version of the file on the server.
I'm myself adding the assembly version into the url. I'm speficially doing this, which works with the ASP.NET MVC framework:
The above will render as follows into the browser:
As the assembly version changes with every build or publish, the url will change accordingly - and the content will be retrieved 'fresh' from the server, as now the client can no longer find the old version with a different version number.
In order to make your assembly version number auto-increment, you'll want to change the following lines in your 'assemblyInfo.cs' file (as found in the 'Properties' folder in your project):
Should be changed to:
The asterix '*' sign will be replaced with the assembly number automatically, to increment on each build/publish.
HTH.
So here's a tip on how to force the client browser to reload newly deployed files. You can use this with any kind of content file served over an http connection, be it css-files, javascript files, you name it.
The trick is to add an updated querystring value to the content url. For example, instead of
< link media='screen and (max-width: 2560px)' href="~/Content/Site.css" rel="stylesheet" />
... we go ...
< link media='screen and (max-width: 2560px)' href="~/Content/Site.css?v=1.0.4034.343343" rel="stylesheet" />
... instead. With each deployment, the 'v' value changes, which will force the client into retrieving a new version of the file on the server.
I'm myself adding the assembly version into the url. I'm speficially doing this, which works with the ASP.NET MVC framework:
@{
string versionId = System.Reflection.Assembly.GetAssembly(typeof(timeRegistrering.Web.Controllers.HomeController)).GetName().Version.ToString();
}
< link media='screen and (max-width: 2500px)' href="~/Content/Site.css?v=@{@versionId}" rel="stylesheet" />
The above will render as follows into the browser:
< link media='screen and (max-width: 2500px)' href="/Content/Site.css?v=1.0.4996.19123" rel="stylesheet" />
As the assembly version changes with every build or publish, the url will change accordingly - and the content will be retrieved 'fresh' from the server, as now the client can no longer find the old version with a different version number.
In order to make your assembly version number auto-increment, you'll want to change the following lines in your 'assemblyInfo.cs' file (as found in the 'Properties' folder in your project):
// You can specify all the values or you can default the Build and Revision Numbers
// by using the '*' as shown below:
// [assembly: AssemblyVersion("1.0.*")]
[assembly: AssemblyVersion("1.0.0.1")]
[assembly: AssemblyFileVersion("1.0.0.1")]
Should be changed to:
// You can specify all the values or you can default the Revision and Build Numbers
// by using the '*' as shown below:
[assembly: AssemblyVersion("1.0.*")]
[assembly: AssemblyFileVersion("1.0.*")]
The asterix '*' sign will be replaced with the assembly number automatically, to increment on each build/publish.
HTH.
Etiketter:
asp.net,
cache,
css,
invalidate,
javascript,
mvc,
no cache
tirsdag den 3. september 2013
Force Internet Explorer compatibility mode off
The Internet Explorer compatibility-mode is a rendering mode to suit older web-pages, typically below and including IE8. They're usually associated with Intranet-sites, in which legacy components often abounds.
To a web-developer it can be hugely frustrating - I know for me it certainly is - to develop that which beyond your control renders horribly in an otherwise 'healthy' IE browser.
The fix - apart from using a different browser, not always a suitable solution - is to include the following meta-tag in the page header section.
The above MUST be the very first meta-tag included within the header section, or you risk the chance of it not working to your satisfaction. As you include it, and browse to the web page with compatibility mode turned on, the tag will force your IE to load the page with the rendering engine pertaining to the browser itself, and not some legacy rendering instead.
HTH
To a web-developer it can be hugely frustrating - I know for me it certainly is - to develop that which beyond your control renders horribly in an otherwise 'healthy' IE browser.
The fix - apart from using a different browser, not always a suitable solution - is to include the following meta-tag in the page header section.
< meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" >
The above MUST be the very first meta-tag included within the header section, or you risk the chance of it not working to your satisfaction. As you include it, and browse to the web page with compatibility mode turned on, the tag will force your IE to load the page with the rendering engine pertaining to the browser itself, and not some legacy rendering instead.
HTH
mandag den 26. august 2013
Generating n number of GUID's with a TSQL query
Self-explanatory title, here's the snippet:
DECLARE @i int = 0
DECLARE @tmp_Accounts TABLE (
Id UniqueIdentifier
)
WHILE @i < 24 BEGIN
SET @i = @i + 1
INSERT INTO @tmp_Accounts (Id)
SELECT newid();
END
select * from @tmp_Accounts
HTH
tirsdag den 6. august 2013
Image orientation of images uploaded via asp.net fileupload control
Even though the pictures you take with your smartphone or such are in portrait orientation, when you transfer them to other systems you can't be sure their orientation will come out right. This happened to me with my iPhone: images I took when uploaded via the fileUpload control were presented in a landscape fashion, despite being shot in the portrait orientation.
The trick in getting the images back to normal is to read the EXIF orientation information off the images's property list. In the below I'll demonstrate how to do this:
As always, I hope this helps someone.
The trick in getting the images back to normal is to read the EXIF orientation information off the images's property list. In the below I'll demonstrate how to do this:
byte[] imageData = new byte[fileUpload.ContentLength];
fileUpload.InputStream.Read(imageData, 0, fileUpload.ContentLength);
MemoryStream ms = new MemoryStream(imageData);
Image originalImage = Image.FromStream(ms);
if (originalImage.PropertyIdList.Contains(0x0112))
{
int rotationValue = originalImage.GetPropertyItem(0x0112).Value[0];
switch (rotationValue)
{
case 1: // landscape, do nothing
break;
case 8: // rotated 90 right
// de-rotate:
originalImage.RotateFlip(rotateFlipType: RotateFlipType.Rotate270FlipNone);
break;
case 3: // bottoms up
originalImage.RotateFlip(rotateFlipType: RotateFlipType.Rotate180FlipNone);
break;
case 6: // rotated 90 left
originalImage.RotateFlip(rotateFlipType: RotateFlipType.Rotate90FlipNone);
break;
}
}
As always, I hope this helps someone.
onsdag den 3. juli 2013
Linq-to-sql enums support
I don't much like it when I must specify hard-coded values into my code. It can be a debugging nightmare, furthermore it looks ghastly. Microsoft's Sql Server OR-mapper linq-to-sql, which I like very much, unfortuantely do not have built-in designer support for generating enums from lookup-tables, which has previously found me doing that hard-coding I do not like to do. Well, no more - look on.
Consider the examples database-tables:
The 'periodStatusId' field is the one that I would ideally want to fill in as ...
myObject.periodStatusId = periodStatusIdEnum.OpenedStatus
... as opposed to ...
myObject.periodStatusId = databaseContext.PeriodStatus.Single( foo => foo.Description.Equals("Opened"));
Well there's a will and a way. What we can do is pre-define an enum and alter our database-context to reflect it. So, in your database-layer, define an enum and copy its values from the database. Like this:
public enum PeriodStatusEnum
{
ClosedByUser = 1,
ClosedBySystem = 2,
ReOpenedByUser = 3
}
Above, the integer corresponds to the auto-incrementing interger id of the lookup-table, the text corresponds to the description field.
It, well, it sucks, to have to pre-define the enumeration. Much preferred would be to do this in the designer, but that's not possible with linq-to-sql. So pre-define it we do, in the know that at least this will be a few hundred percent better than going hard-code style.
Now the enum has been created, we'll refer to this instead of the database's native type in the datacontext. Change both the lookup-table's and the referencing table's field types to your enum, pre-fixed with a 'global::' value, i.e. global::yourNamespace(s).periodStatusEnum. Like so:
That's it - now you can use your enumeration as opposed to actively looking up the value. Like this:
TidsRegPeriode period = new TidsRegPeriode();
// populate field by referencing your enumeration
period.periodeStatusId = timeRegistrering.Domain.PeriodStatusEnum.ReOpenedByUser;
... other fields populated...
dbContext.TidsRegPeriodes.InsertOnSubmit(period);
dbContext.SubmitChanges();
Again, it would be tremendously better if we could specify enums in the designer. But we can't - so this is a heck of a lot better.
fredag den 14. juni 2013
Razor calendar table
If you need to build a calendar-table in Razor, look no further, here's a snippet that'll accomplish just that:
Hope it'll save you a half an hour.
@{
System.Globalization.GregorianCalendar cal = new System.Globalization.GregorianCalendar();
var firstDayInMonth = new DateTime(DateTime.Now.Year, DateTime.Now.Month, 1);
int daysInMonth = cal.GetDaysInMonth(DateTime.Now.Year, DateTime.Now.Month);
DayOfWeek firstWeekday = cal.GetDayOfWeek(firstDayInMonth);
var dayNo = (int)firstWeekday;
int daysInMonthCounter = 1;
}
<table id="timeRegCalendarTable">
<thead>
<tr>
@for (int i = 0; i <= 6; i++)
{
<td>@CultureInfo.CurrentCulture.DateTimeFormat.DayNames[i]</td>
}
</tr>
</thead>
<tbody>
@while (daysInMonthCounter <= daysInMonth)
{
<tr>
@for (int j = 0; j <= 6; j++)
{
if (j == dayNo && daysInMonthCounter == 1)
{
<td>@daysInMonthCounter</td>
daysInMonthCounter++;
}
else
{
if (daysInMonthCounter > 1 && daysInMonthCounter <= daysInMonth)
{
<td>@daysInMonthCounter</td>
daysInMonthCounter++;
}
else
{
<td> </td>
}
}
}
</tr>
}
</tbody>
</table>
Hope it'll save you a half an hour.
mandag den 27. maj 2013
Formatting problems in copying code from Kindle
I use Kindle a lot, most recently I've taken to downloading book on development. But I faced problems in trying to copy the code in the books across to my development environment; the formatting, although beautiful in the book, was lost and rendered the copied text useless. I corrected the issues in notepad, but I eventually got so fed up with it that I made the below kindle-code-converter. Maybe it'll be of use to you, too.
Note that I've only just begun to collect conversion-rules - there will be times when the code doesn't format properly because you've come across a rule I haven't implemented yet. Just comment below with the problem and I'll fix it ASAP.
Here's the link to the converter:
Link to Kindle code-converter
onsdag den 8. maj 2013
Kinect Painting demo - simple setup
I went looking for a simple Kinect demo in which the user's right hand would be tracked and used as a paint-brush. I found some example projects here and there, but they were either rather elaborate with a bunch of functionality not required for a simple demo, or using third-party dll's.
So I put together my own simple thing, which I'm making available for download here.
I must confess to being not particularly impressed with the Kinect itself. The premise of the device is extraordinary, and it does function as the product description promises, but I found it slow in updating. It cannot in its present version be used as a "live" paint-application, as there will be a too noticable delay in its registrering skeleton movement. The LeapMotion device promises more and is probably the way to go for this, until a better, faster Kinect version arrives.
mandag den 29. april 2013
Javascript "static" class - make javascript code more readable
I usually use static classes for my C# helper-functions, when there're no properties to expose, nor any need to inherit from them. So this increases code readability. Javascript, however, doesn't have that feature, so how to immitate it? I usually do the below:
// declare object - recall that 'function' is an object in javascript
var WebServiceFunctions = function() {
}
// declare method on the object
WebServiceFunctions.webServiceMethod = function (parameter1, parameter2) {
// method code here
// return value if any
return xyz;
}
With the above code, I call my helper-method in my code like this:
var resultFromCall = WebServiceFunctions.webServiceMethod("foo","bar");
This has the odour of a static class. Of course behind the scene the "var WebServiceFunctions = function() {}" declaration signifies the creation of an object ("function" is an object in javascript), but I find that given the generic name - 'WebServiceFunctions' - my mind abstracts from this.
The javascript increases in readability, which may be an issue with a multitude of referenced javascript files.
There's a slightly better way, though. If the helper-functions are so generic in nature that they're applicable to many different purposes, they may be used in many different files. As such, the above will declare the "WebServiceFunctions"-object with every import of the javascript file. Better would be to check beforehand if the object has already been created, in which case there's no need to create it again:
(function () {
this.WebServiceFunctions = this.WebServiceFunctions || {};
var ns = this.WebServiceFunctions;
ns.getMobilityPeriodId = function (serviceUrl) {
// function code here
}
})();
The above this.WebServiceFunctions = this.WebServiceFunctions || {}; is a conditional that checks if this.WebServiceFunctions has any value, in which case the already created object is returned, or - represented by the two pipes '||' - a new object is created. var ns is merely a reference, to avoid having to write 'this.WebServiceFunctions' repeatedly.
So that's a way to reference javascript in a 'namespace' sort of way. I find the above helps me keep my references handy and maintain the readability of my code, especially as a project starts to become clotted with javascript. If you wish to go depper into the subject matter, the above is what is known as the Javascript Module Pattern.
tirsdag den 23. april 2013
Simple jquery stacked bar chart
One way of doing an easy and simple stacked bar chart is to style a DIV to a desired length, then have its left-border represent the second data range. If you need more ranges you can always stack several DIVs on top of each other.
Here's example HTML for the graph itself...:
And here's the annotated javascript to add the data as stacked bar charts:
Below is my CSS for the 'Graphs' contaner and the 'mainGraphBarDiv' elements:
The above HTML, javascript and CSS renders like the below:
Here's example HTML for the graph itself...:
<div id="Graphs">
<h2>How are we doing?</h2>
<h4> Exchanges at a Glance</h4>
<p style="clear: both; padding-top: 1em;">
The below bar charts indicate, percentage-wise, the total exchange grant as compared to the allotted application grants.
</p>
</div>
And here's the annotated javascript to add the data as stacked bar charts:
// dummy example data
var exchangeGraphData = new Object([
{ allottedGrant: 70, totalGrant: 90, exchangeName: "exchangeNo1" },
{ allottedGrant: 30, totalGrant: 40, exchangeName: "exchangeNo2" }]
);
// render it
if (exchangeGraphData != false) {
// get width of the graph container. This will ensure our stacked bar charts do not exceed the container width limitation
var widthOfMainBar = Number($('#Graphs').css("width").replace("px", "")) - 16 /* 1em */;
// iterate over the example data
$.each(exchangeGraphData, function () {
// add a stacked bar chart for each 'record'
var div = document.createElement("div");
// add a class-attribute to the bar chart, so as to enable styling it
div.setAttribute('class', 'mainGraphBarDiv');
// add the bar chart to the container
$('#Graphs').append(div);
// establish fill-percentage for 'sub-bar', i.e. the second data range
var fillPercentage = (Number(this.allottedGrant) * 100) / (Number(this.totalGrant));
// translate the fill-percentage into actual pixels
var fillPixels = widthOfMainBar * (fillPercentage / 100);
// ... and apply those pixels as a left-border to the bar chart
div.style.borderLeft = fillPixels + "px solid #00f500";
// lastly, subtract the same number of pixels from the bar chart's width, or the added border will extend the bar chart unnecessarily
div.style.width = (widthOfMainBar - fillPixels) + "px";
});
}
// apply a little animation, if so desired
$('.mainGraphBarDiv').slideToggle(1500);
Below is my CSS for the 'Graphs' contaner and the 'mainGraphBarDiv' elements:
#Graphs {
position: relative;
float: left;
width: 350px;
text-align: center;
margin-top: 5em;
border: 1px dotted white;
padding: 16px;
background-color: gray;
}
.mainGraphBarDiv {
color: #0d0d0d;
text-align: center;
display: none;
height: 3em;
margin: 1em;
background-color: #92ff92;
}
The above HTML, javascript and CSS renders like the below:
How are we doing?
ERAMOB-2012-041 Exchanges at a Glance
The below bar charts indicate, percentage-wise, the total exchange grant as compared to the allotted application grants.
tirsdag den 16. april 2013
iTextSharp - multi-line form filling
For those of us using iTextSharp to generate dynamic PDF documents, one caveat I found was in controlling line breaks. In as much as the PDF standard has supported RTF since version 6.1, I was trying to add line breaks via RTF-code - "\par", i.e. Yet it turns out the iTextSharp parser appreciates the ever reliable System.Environment.Newline.
So format your PDF form field thus...:
... and you'll be able to reference your field and add line breaks thus:
That's all there is to it.
Hope this helps you in your further career. And good luck with it, too!
Buy me a coffee
So format your PDF form field thus...:
... and you'll be able to reference your field and add line breaks thus:
PdfReader reader = null;
AcroFields af = null;
PdfStamper ps = null;
reader = new PdfReader(new RandomAccessFileOrArray(Request.MapPath(@"~/App_Data/your_pdf_document.pdf")), null);
ps = new PdfStamper(reader, stream);
AcroFields af = ps.AcroFields;
af.SetField("Your PDF form field name", @"This line is " + System.Environment.Newline + "broken");
// make resultant PDF read-only for end-user
ps.FormFlattening = true;
// forget to close() PdfStamper, you end up with
// a corrupted file!
ps.Close();
That's all there is to it.
Hope this helps you in your further career. And good luck with it, too!
Buy me a coffee
onsdag den 3. april 2013
Having an astable trigger a monostable
I wanted to have an astable pulse trigger a monostable, using the 555 timer. The main issue here is in that the trigger-pulse that's sent to the monostable 555 can't be longer than the output pulse, unless you add a 'trigger guard' of sorts.
The below schematic does the trick:
The 555 on the left is the astable, it pulses every approx 4-5 seconds. Its output is sent to the input of the 555 to the right, the monostable, which pulses for a significantly lower duration as opposed to its input pulse.
This could be used for an egg-timer, for example, where a variable resistor sounds a buzzer at a selected interval.
mandag den 25. marts 2013
GridView + DetailsView + no update
Updating a GridView based on values changed in a DetailsView, but not finding the changes reflected in the GridView?
In the DetailView's ItemUpdated-method, make sure you have the the GridView.DataBind(), and make sure that in your Page_Load the initial databind, if any, is wrapped in an 'if (! Page.isPostBack)' clause. Which I didn't have, for specific reasons yet preventing the GridView update.
Hope this helps some-/anyone.
In the DetailView's ItemUpdated-method, make sure you have the the GridView.DataBind(), and make sure that in your Page_Load the initial databind, if any, is wrapped in an 'if (! Page.isPostBack)' clause. Which I didn't have, for specific reasons yet preventing the GridView update.
Hope this helps some-/anyone.
onsdag den 6. marts 2013
Arduino: How to wire a relay
Here's my quick tutorial on how to hook up a relay to an Arduino; specifically a electromagnet switch relay from Omron, the G5SB-14.
Here's a breadboard-look of how it's hooked up:
You'll see the Arduino on the left hand side, providing power to the relay and the accompanying components, and on the right hand side is the red LED I'm powering via it's own battery (you could, if you like, power the LED by the Arduino).
First off, we'll use the Arduino's digital pin 8 to send a signal to the relay, through the other components. So hook up the pin 8 to a 1 kohm resistor. Why the resistor, because the transistor I'm using that will catch the signal from the pin no. 8 can't handle the full 5v voltage from the digital pin.
Next, the transistor. Why use one? Because we can't operate the relay by the signal from the digital pin alone - it hasn't enough juice to switch the relay's internal magnetic switch. So hook up the transistor as per the image, with 1) the center pin - the base - hooked up to the digital pin via the resistor, 2) with the emitter - the left side of the transistor, when you're looking at the flat side of the component - hooked up to ground and 3) the collector - the right side of the transistor - going to the rectifier.
What's a rectifier? Well, it's a diode that guards the curcuitry from electrical flow from the relay when it's switched off, and a sudden change in current flow surges from the relay. To the relay it's like a night-club bouncer preventing the rush of current from entering the delicate transistor and Arduino - like "You behave, you relay, or I'll rectify your ass", so to speak. It's like a one-way street for current. If you're just messing around and reproducing this or a different example, you can go without it, but at your own peril.
Hook up the rectifier (in series) to one end of the relay coil, and hook the other end of the coil to power. It really is a coil inside the relay: Powering the coil creates a magnetic field inside the relay, 'creates' a magnet if you will, that attracts a metal pin inside the relay enclosure, which in turn touches one of two tiny contacts (on and off) and creates a connection between them.
That's the Arduino part of the tutorial. Now we need something for the relay to actually turn on and off. In this case, a red LED, powered by the battery. Hook up the battery, the LED as shown in the picture (don't forget the resistor unless you're willing to sacrifice an LED or two on the alter of trial-and-error), and connect the relay.
In connecting the relay, hook up the relay's 'common' pin to ground. This pin is the one that holds on to one end of the metal pin which is to touch either contact - labelled normally on (NO) and normally closed (NC). Refer to the data sheet of your specific relay to make sure it's hooked up correctly - it's not always such that these labels - NO, NC and COM (for Common) are written on the relay itself.
The way the relay is used, is thus: if you want the relay to turn something off when signalling it from the Arduino, you must connect your application's power source - in this case the battery for our LED - to the normally opened (NO) pin. If on the other hand you want to use the relay to turn something on, you must connect the power source to the normally closed (NC) pin.
The below pictures show the orientation of the pins on the Omron relay that's used here, the
G5SB-14:
If you hook up the example-breadboard, you should be able to do what did I: Play an Arduino sketch which turns the relay on and off every 5 seconds. Here's the example code:
That's it - that's how you hook up a relay to the Arduino. Happy switching on and off!
I'm including a bunch of pictures below, of how I've set it up on my breadboard. Hopefully the pictures might be helpful.
You can use the relay that's referred to with AC voltage, i.e. to turn on and off mains-powered applications such as lamps and such, BUT DO THIS ONLY ONLY ONLY if you're very confident in your abilities and take your safety seriously. AC POWER KILLS if you are not careful.
Here's a breadboard-look of how it's hooked up:
You'll see the Arduino on the left hand side, providing power to the relay and the accompanying components, and on the right hand side is the red LED I'm powering via it's own battery (you could, if you like, power the LED by the Arduino).
First off, we'll use the Arduino's digital pin 8 to send a signal to the relay, through the other components. So hook up the pin 8 to a 1 kohm resistor. Why the resistor, because the transistor I'm using that will catch the signal from the pin no. 8 can't handle the full 5v voltage from the digital pin.
Next, the transistor. Why use one? Because we can't operate the relay by the signal from the digital pin alone - it hasn't enough juice to switch the relay's internal magnetic switch. So hook up the transistor as per the image, with 1) the center pin - the base - hooked up to the digital pin via the resistor, 2) with the emitter - the left side of the transistor, when you're looking at the flat side of the component - hooked up to ground and 3) the collector - the right side of the transistor - going to the rectifier.
What's a rectifier? Well, it's a diode that guards the curcuitry from electrical flow from the relay when it's switched off, and a sudden change in current flow surges from the relay. To the relay it's like a night-club bouncer preventing the rush of current from entering the delicate transistor and Arduino - like "You behave, you relay, or I'll rectify your ass", so to speak. It's like a one-way street for current. If you're just messing around and reproducing this or a different example, you can go without it, but at your own peril.
Hook up the rectifier (in series) to one end of the relay coil, and hook the other end of the coil to power. It really is a coil inside the relay: Powering the coil creates a magnetic field inside the relay, 'creates' a magnet if you will, that attracts a metal pin inside the relay enclosure, which in turn touches one of two tiny contacts (on and off) and creates a connection between them.
That's the Arduino part of the tutorial. Now we need something for the relay to actually turn on and off. In this case, a red LED, powered by the battery. Hook up the battery, the LED as shown in the picture (don't forget the resistor unless you're willing to sacrifice an LED or two on the alter of trial-and-error), and connect the relay.
In connecting the relay, hook up the relay's 'common' pin to ground. This pin is the one that holds on to one end of the metal pin which is to touch either contact - labelled normally on (NO) and normally closed (NC). Refer to the data sheet of your specific relay to make sure it's hooked up correctly - it's not always such that these labels - NO, NC and COM (for Common) are written on the relay itself.
The way the relay is used, is thus: if you want the relay to turn something off when signalling it from the Arduino, you must connect your application's power source - in this case the battery for our LED - to the normally opened (NO) pin. If on the other hand you want to use the relay to turn something on, you must connect the power source to the normally closed (NC) pin.
The below pictures show the orientation of the pins on the Omron relay that's used here, the
G5SB-14:
If you hook up the example-breadboard, you should be able to do what did I: Play an Arduino sketch which turns the relay on and off every 5 seconds. Here's the example code:
// connect digital pin 8 to the transistor, via a resistor
int led = 8;
// the setup routine runs once when you press reset:
void setup() {
// initialize the digital pin as an output.
pinMode(led, OUTPUT);
}
// the loop routine runs over and over again forever:
void loop() {
delay(5000); // wait for 5 seconds
digitalWrite(led, HIGH); // turn the relay off
delay(5000); // wait for a second
digitalWrite(led, LOW); // turn the relay on
}
That's it - that's how you hook up a relay to the Arduino. Happy switching on and off!
I'm including a bunch of pictures below, of how I've set it up on my breadboard. Hopefully the pictures might be helpful.
torsdag den 21. februar 2013
Plug-in warning with embedded SVG files
Quick SVG-tip:
If you get a plug-in warning in Firefox or your Google Chrome browser immediately takes to downloading an embedded SVG file in your HTML-page, this is because you're referencing the SVG-file locally, i.e.
... as opposed to absolutely:
If you reference the SVG file absolutely, the plug-in warning will go away.
If you get a plug-in warning in Firefox or your Google Chrome browser immediately takes to downloading an embedded SVG file in your HTML-page, this is because you're referencing the SVG-file locally, i.e.
<embed src="../images/info_icon.svg" type="image/svg+xml" />
... as opposed to absolutely:
<embed src="http://your_web_server/studentExchange/images/info_icon.svg" type="image/svg+xml" />
If you reference the SVG file absolutely, the plug-in warning will go away.
Hooking up the UsbTinyISP to an Arduino Uno
The UsbTinyISP is a micro-controller flashing interface, which will allow you to flash the code on various Atmel micro-processors. The below image references how to hook it up to an Arduino Uno development board - I couldn't find a suitable reference-image so I thought I'd provide it.
So when in doubt, turn the boards the same way as in the image and look for the red strand of the wire.
Then, for flashing an Arduino bootloader to the chip, it's a simple matter of selecting the UsbTinyISP in the Arduino (it's in the 'tools' menu) and clicking 'burn bootloader' (also in the 'tools' menu).
Remember - the UsbTinyISP must be installed with the appropriate drivers and it's only the UsbTinyISP that should be connected to the PC - not the Arduino Uno.
The Arduino IDE runs a version of the AVRDude-tool and will also take care of any setting of fuses on the micro-controller. Burning the bootloader takes about a minute or so, beyond which you can program the micro-controller in the IDE and then yank it from the Uno development board and put it in your own project.
Happy flashing!
So when in doubt, turn the boards the same way as in the image and look for the red strand of the wire.
Then, for flashing an Arduino bootloader to the chip, it's a simple matter of selecting the UsbTinyISP in the Arduino (it's in the 'tools' menu) and clicking 'burn bootloader' (also in the 'tools' menu).
Remember - the UsbTinyISP must be installed with the appropriate drivers and it's only the UsbTinyISP that should be connected to the PC - not the Arduino Uno.
The Arduino IDE runs a version of the AVRDude-tool and will also take care of any setting of fuses on the micro-controller. Burning the bootloader takes about a minute or so, beyond which you can program the micro-controller in the IDE and then yank it from the Uno development board and put it in your own project.
Happy flashing!
Hooking up a microcontroller to the AVR Dragon
The AVR Dragon is a development board for Atmel micro-controllers, used in conjunction with Atmel's AVR Studio.
In using this board it's not only necessary to add a micro-controller to the board, but this micro-controller must also be hooked up to the board's connectors (one is expected to solder pins to the board's through-holes) or the AVR Studio will not be able to see the micro-controller.
These are the connections that must be made with jumper wires:
I recommend Derek Molloy's terrific video on the subject.
In using this board it's not only necessary to add a micro-controller to the board, but this micro-controller must also be hooked up to the board's connectors (one is expected to solder pins to the board's through-holes) or the AVR Studio will not be able to see the micro-controller.
These are the connections that must be made with jumper wires:
I recommend Derek Molloy's terrific video on the subject.
Etiketter:
Atmel,
AVR Dragon,
AVR Studio,
micro-controller
mandag den 7. januar 2013
Modal detailsview
Simple tip, this,
if you're displaying an asp.net DetailsView on your aspx-page, you'll perhaps consider showing it with a modal-background so as to bring focus on it.
This is easily implemented by showing a hitherto hidden panel on the page. Here's the mark-up for that - put it at the very top of the page:
test
Then, in the code-behind code which shows the DetailsView, you'll include a bit of javascript (using Jquery here, but you don't have to) to show the hidden div:
newLanguageDetailsView.ChangeMode(DetailsViewMode.Insert);
detailsPanel.Visible = true;
System.Text.StringBuilder sbScript = new System.Text.StringBuilder("");
sbScript.Append("");
ScriptManager.RegisterStartupScript(this, this.GetType(), "@@@@MyPopUpScrip1t", sbScript.ToString(), false);
The only thing you'll need to remember to do is to add css to your DetailsView, to position it and add a z-index higher than the modalBackground, so it'll be presented above the gray full-screen background. So add this as the css-class attribute value for your DetailsView:
.zindexedDetailsview {
z-index: 100;
position: relative;
}
That's all there is to it. All other solutions I've seen include the Ajax framework and specifically the use of the ModalPopupExtender, so here's a lighter weighted alterantive.
Works for me with VS2012, .net 4.5, Jquery 1.8.3. Cheers!
Abonner på:
Opslag (Atom)