public Me : ITyson: Design

Showing posts with label Design. Show all posts

Using WPF and Vector Graphics

Recently I’ve been taking a look at WPF, Microsoft’s not so new now replacement for WinForms. With the little free time that I have, I’ve relied heavily on Pluralsight for getting up to speed on various technologies. In working with WPF, I was trying to leverage their concept of “lookless” controls which is very powerful and much nicer to design with than WinForms.

To summarize my tribulations, I was having a hard time loading a local resource that was a SVG. Blend Expression, a WPF designer, doesn’t support SVG directly but it does support .pdf (a form of SVG) and .ai (Adobe Illustration). There are a couple of ways to product .pdf or .ai files. My approach was to use a tool I’ve used in the past, Inkscape, see Inkscape A Cool Tool. Inkscape also support generating a XAML file directly from the SVG file which you can leverage directory or copy the contents of XAML output into a resource dictionary.

1. Open or create your SVG file in Inkscape.

2. PDF format: Select Save As and choose .pdf format. It will display a dialog as below once you click Save, ensure you select “Convert texts to paths”, then click OK. Once the file is saved you can rename the file extension from .pdf to .ai. It will now be recognized in Expression Blend.

3. XAML format: Select Save As and choose .xaml format. This will export it directly to a XAML file. You can take the content line, element is a ViewBox, and put that directory in a resource file.

Installing Node.js and Other Packages

Keeping up with technology can be a job in itself. Learning is fun, but is quickly forgotten so writing things down can always save you time later. This thread goes over various was of installing Node.js and other packages.

Installing Node.js

There are 2 ways in which you can install Node.js. Node.js comes with node package manager now so it will not need to be installed independently.

Installer (recommended): Go to node.js.org and use the installer for your OS. Run the installer.

Homebrew (Mac only): Run the command “brew install node”. You will have to have homebrew installed.

Other Node packages t

Installation will use node package manager. You can list the node modules for your node application by listing the directory of “node_modules”.

Express – web application framework for node

npm install -g express --save

NOTE: once you create a application with express (i.e. express AppName) you will have to navigate to AppName folder and run the command “npm install” to install the components defined in node’s package.json.

Yeoman – front end tool focused on scaffolding (yo), building/testing (grunt), and dependency management (bower)

npm install -g yo --save

npm install -g generator-webapp --save

coffee-script – scripting language that builds down to javascript.

npm install coffe-script --save

node-dev – a tool for node that will monitory files and auto restart the node app when a file has changed.

npm install node-dev –save

NOTE: When using this you will want to separate development dependencies from production ones. In the package.json, you can create a “devDependencies” like so:
{
    "name": "application-name",
    ...,
    "dependencies": {
        "express": "2.5.8",...
    },
    "devDependencies": {
        "node-dev": "~0.2.2"
    }
}

mocha – javascript test framework for node

npm install mocha –save

NOTE: put this in your dev dependencies

REQUIRES: request

request – modeule that simplifies the process of making http calls

npm install requets --save

Redis – open source advanced key-value store

npm install redis hiredis connect-redis --save

REQUIRES: Installation of Redis backend. On a Mac use homebew “brew install redis”, Windows see redis.io.

connect-assets – transparent file compilation and dependency management for Node’s connect framework

npm install connect-assets --save

socket-io – simplifies the use of IO on all browsers. See WebSockets for information on this topic.

npm install socket-io --save

AngularJS – front end web application framework dealing with models, views, collections, and events

npm install angular --save

Backbone – front end structured for web applications dealing with models, views, collections, and events

npm install backbone --save

RELATED: Marionettejs (npm install backbone.marionette --save)

Things I Keep In My Toolbox

This thread is my ongoing attempt to remind myself of the tools I keep somewhere in my toolbox.

IDE Tools

Visual Studio
Eclipse

Spring Tool Suite

Web

Chrome

Cryptography

Design Tools

Development Other

Windows General Tools

Mac General Tools

TextWrangler

Inkscape, A Cool Vector Graphics Tool!

I won’t be the first to admit that I stink when it comes to my graphic design skills, but I do know how to solve problems when presented with one. I had a major problem that was racking my nerves, icons for a web site and phone app I was developing. Knowing the result I wanted, I soon employed the help of Google. Low and behold I can across Inkscape, an awesome scalable vector graphics program and it was free! Armed with this new tool I still had one issue, how the heck am I going to use this thing (that would be my lack of design knowledge bubbling up). No worries, I wasn’t out yet. After searching a little bit for some of the results I was looking for, I came across this blog, screencasters.heathenx.org (my hats off to you). In no time, i was able to accomplish buttons, special affects, paper folds, etc.

Install on Windows

1. Install GIMP.

2. Download Inkscape and install for windows.