Using jQuery Mobile with MVC and Netduino for Home Automation

Dan Thyer

Rate me:

4.88/5 (52 votes)

14 Dec 2012CPOL9 min read

349.1K

4.8K

152

This article is great for anybody learning jQuery Mobile or building mobile applications with MVC3. I built a remote control for my phone to control a squirt gun for my pool, open my garage door, water the garden and control for my gas fireplace using jQuery Mobile with MVC and a Netduino

jQueryMobileCode.zip
- jQueryMobileCode
  - LogicalLiving.sln
  - LogicalLiving.sln.docstates.suo
  - LogicalLiving.suo
  - Netduino.Communication
    - CommunicateWithNetduino.cs
    - Netduino.Communication.csproj
    - Properties
      - AssemblyInfo.cs
  - Netduino.LogicalLiving
    - app_code
      - Content.cshtml
    - Content
      - images
        
        ajax-loader.png
        
        bg-dot.png
        
        btn-facebook.png
        
        btn-flickr.png
        
        btn-twitter.png
        
        ico-book.png
        
        ico-call.png
        
        ico-contact.png
        
        ico-map.png
        
        ico-menu.png
        
        icons-18-white.png
        
        ico-star.png
        
        LA_Logo_Small.jpg
      - jquery.mobile-1.0.min.css
      - Site.css
      - themes
        
        base
        
        images
        
        ui-bg_flat_0_aaaaaa_40x100.png
        
        ui-bg_flat_75_ffffff_40x100.png
        
        ui-bg_glass_55_fbf9ee_1x400.png
        
        ui-bg_glass_65_ffffff_1x400.png
        
        ui-bg_glass_75_dadada_1x400.png
        
        ui-bg_glass_75_e6e6e6_1x400.png
        
        ui-bg_glass_95_fef1ec_1x400.png
        
        ui-bg_highlight-soft_75_cccccc_1x100.png
        
        ui-icons_222222_256x240.png
        
        ui-icons_2e83ff_256x240.png
        
        ui-icons_454545_256x240.png
        
        ui-icons_888888_256x240.png
        
        ui-icons_cd0a0a_256x240.png
        
        jquery.ui.accordion.css
        
        jquery.ui.all.css
        
        jquery.ui.autocomplete.css
        
        jquery.ui.base.css
        
        jquery.ui.button.css
        
        jquery.ui.core.css
        
        jquery.ui.datepicker.css
        
        jquery.ui.dialog.css
        
        jquery.ui.progressbar.css
        
        jquery.ui.resizable.css
        
        jquery.ui.selectable.css
        
        jquery.ui.slider.css
        
        jquery.ui.tabs.css
        
        jquery.ui.theme.css
        
        images
        
        ajax-loader.png
        
        icons-18-black.png
        
        icons-18-white.png
        
        icons-36-black.png
        
        icons-36-white.png
        
        LogicalLiving.css
        
        LogicalLiving.min.css
    - Controllers
      - HomeController.cs
    - Global.asax
    - Global.asax.cs
    - Models
      - HeaderModel.cs
    - Netduino.LogicalLiving.csproj
    - Netduino.LogicalLiving.csproj.user
    - packages.config
    - Properties
      - AssemblyInfo.cs
    - Scripts
    - Views
      - _ViewStart.cshtml
      - Home
        
        _About.cshtml
        
        _Contact.cshtml
        
        _Destruct.cshtml
        
        _Fireplace.cshtml
        
        _Footer.cshtml
        
        _Garage.cshtml
        
        _Garden.cshtml
        
        _Header.cshtml
        
        _Menu.cshtml
        
        _Pool.cshtml
        
        Index.cshtml
      - Shared
        
        _Layout.cshtml
        
        Error.cshtml
      - Web.config
    - Web.config

			/*
* jQuery Mobile Framework 1.0.1
* http://jquerymobile.com
*
* Copyright 2011-2012 (c) jQuery Project
* Dual licensed under the MIT or GPL Version 2 licenses.
* http://jquery.org/license
*
*/.ui-bar-a{border:1px solid #8cc63f ;background:#488e00 ;color:#ffffff ;font-weight:bold;text-shadow: 0    1px    1px   #444444 ;background-image:-webkit-gradient(linear,left top,left bottom,from( #4F9C00 ),to( #407F00 )); background-image:-webkit-linear-gradient( #4F9C00,#407F00 ); background-image:   -moz-linear-gradient( #4F9C00,#407F00 ); background-image:    -ms-linear-gradient( #4F9C00,#407F00 ); background-image:     -o-linear-gradient( #4F9C00,#407F00 ); background-image:        linear-gradient( #4F9C00,#407F00 );}.ui-bar-a .ui-link-inherit{color:#ffffff ;}.ui-bar-a .ui-link{color: #7cc4e7  ;font-weight:bold;}.ui-bar-a .ui-link:hover{color: #2489CE  ;}.ui-bar-a .ui-link:active{color: #2489CE  ;}.ui-bar-a .ui-link:visited{   color: #2489CE  ;}.ui-bar-a,.ui-bar-a input,.ui-bar-a select,.ui-bar-a textarea,.ui-bar-a button{   font-family:Helvetica,Arial,sans-serif  ;}.ui-body-a,.ui-dialog.ui-overlay-a{border:1px solid #820F13 ;color:#8cc63f ;text-shadow:0  0px  0  #546d3c ;background:#ffe2a8 ;background-image:-webkit-gradient(linear,left top,left bottom,from( #FFF8B8 ),to( #E5CB97 )); background-image:-webkit-linear-gradient( #FFF8B8,#E5CB97 ); background-image:   -moz-linear-gradient( #FFF8B8,#E5CB97 ); background-image:    -ms-linear-gradient( #FFF8B8,#E5CB97 ); background-image:     -o-linear-gradient( #FFF8B8,#E5CB97 ); background-image:        linear-gradient( #FFF8B8,#E5CB97 );}.ui-body-a,.ui-body-a input,.ui-body-a select,.ui-body-a textarea,.ui-body-a button{   font-family:Helvetica,Arial,sans-serif  ;}.ui-body-a .ui-link-inherit{color:#8cc63f ;}.ui-body-a .ui-link{color:#488e00 ;font-weight:bold;}.ui-body-a .ui-link:hover{color: #2489CE  ;}.ui-body-a .ui-link:active{color: #2489CE  ;}.ui-body-a .ui-link:visited{   color: #2489CE  ;}.ui-btn-up-a{border:1px solid #488e00 ;background:#ff9900 ;font-weight:bold;color:#000000 ;text-shadow:0  0px  0px  #000000 ;background-image:-webkit-gradient(linear,left top,left bottom,from( #FF9900 ),to( #FF9900 )); background-image:-webkit-linear-gradient( #FF9900,#FF9900 ); background-image:   -moz-linear-gradient( #FF9900,#FF9900 ); background-image:    -ms-linear-gradient( #FF9900,#FF9900 ); background-image:     -o-linear-gradient( #FF9900,#FF9900 ); background-image:        linear-gradient( #FF9900,#FF9900 );}.ui-btn-up-a a.ui-link-inherit{color:#000000 ;}.ui-btn-hover-a{border:1px solid #488e00 ;background:#8cc63f ;font-weight:bold;color:#000000 ;text-shadow: 0    1px    1px   #eeeeee ;background-image:-webkit-gradient(linear,left top,left bottom,from( #9AD945 ),to( #7EB238 )); background-image:-webkit-linear-gradient( #9AD945,#7EB238 ); background-image:   -moz-linear-gradient( #9AD945,#7EB238 ); background-image:    -ms-linear-gradient( #9AD945,#7EB238 ); background-image:     -o-linear-gradient( #9AD945,#7EB238 ); background-image:        linear-gradient( #9AD945,#7EB238 );}.ui-btn-hover-a a.ui-link-inherit{color:#000000 ;}.ui-btn-down-a{border:1px solid #488e00 ;background:#ffe2a8 ;font-weight:bold;color:#000000 ;text-shadow:0  1px   1px   #eeeeee ;background-image:-webkit-gradient(linear,left top,left bottom,from( #FFE4A9 ),to( #FCDFA6 )); background-image:-webkit-linear-gradient( #FFE4A9,#FCDFA6 ); background-image:   -moz-linear-gradient( #FFE4A9,#FCDFA6 ); background-image:    -ms-linear-gradient( #FFE4A9,#FCDFA6 ); background-image:     -o-linear-gradient( #FFE4A9,#FCDFA6 ); background-image:        linear-gradient( #FFE4A9,#FCDFA6 );}.ui-btn-down-a a.ui-link-inherit{color:#000000 ;}.ui-btn-up-a,.ui-btn-hover-a,.ui-btn-down-a{   font-family:Helvetica,Arial,sans-serif  ;text-decoration:none;}a.ui-link-inherit{text-decoration:none !important;}.ui-btn-active{border:1px solid 00000000 ;background:#ffcc66 ;font-weight:bold;color: #fff  ;cursor:pointer;text-shadow: 0    -1px    1px    #145072  ;text-decoration:none;background-image:-webkit-gradient(linear,left top,left bottom,from( #FFCC66 ),to( #FFCC66 )); background-image:-webkit-linear-gradient( #FFCC66,#FFCC66 ); background-image:   -moz-linear-gradient( #FFCC66,#FFCC66 ); background-image:    -ms-linear-gradient( #FFCC66,#FFCC66 ); background-image:     -o-linear-gradient( #FFCC66,#FFCC66 ); background-image:        linear-gradient( #FFCC66,#FFCC66 );    font-family:Helvetica,Arial,sans-serif  ;}.ui-btn-active a.ui-link-inherit{color: #fff  ;}.ui-btn-inner{border-top:1px solid #fff;border-color:rgba(255,255,255,.3);}.ui-corner-tl{-moz-border-radius-topleft: .6em  ;-webkit-border-top-left-radius: .6em  ;border-top-left-radius: .6em  ;}.ui-corner-tr{-moz-border-radius-topright: .6em  ;-webkit-border-top-right-radius: .6em  ;border-top-right-radius: .6em  ;}.ui-corner-bl{-moz-border-radius-bottomleft: .6em  ;-webkit-border-bottom-left-radius: .6em  ;border-bottom-left-radius: .6em  ;}.ui-corner-br{-moz-border-radius-bottomright: .6em  ;-webkit-border-bottom-right-radius: .6em  ;border-bottom-right-radius: .6em  ;}.ui-corner-top{-moz-border-radius-topleft: .6em  ;-webkit-border-top-left-radius: .6em  ;border-top-left-radius: .6em  ;-moz-border-radius-topright: .6em  ;-webkit-border-top-right-radius: .6em  ;border-top-right-radius: .6em  ;}.ui-corner-bottom{-moz-border-radius-bottomleft: .6em  ;-webkit-border-bottom-left-radius: .6em  ;border-bottom-left-radius: .6em  ;-moz-border-radius-bottomright: .6em  ;-webkit-border-bottom-right-radius: .6em  ;border-bottom-right-radius: .6em  ;}.ui-corner-right{-moz-border-radius-topright: .6em  ;-webkit-border-top-right-radius: .6em  ;border-top-right-radius: .6em  ;-moz-border-radius-bottomright: .6em  ;-webkit-border-bottom-right-radius: .6em  ;border-bottom-right-radius: .6em  ;}.ui-corner-left{-moz-border-radius-topleft: .6em  ;-webkit-border-top-left-radius: .6em  ;border-top-left-radius: .6em  ;-moz-border-radius-bottomleft: .6em  ;-webkit-border-bottom-left-radius: .6em  ;border-bottom-left-radius: .6em  ;}.ui-corner-all{-moz-border-radius: .6em  ;-webkit-border-radius: .6em  ;border-radius: .6em  ;}.ui-corner-none{-moz-border-radius:   0;-webkit-border-radius:   0;border-radius:   0;}.ui-disabled{opacity:.3;}.ui-disabled,.ui-disabled a{pointer-events:none;cursor:default;}.ui-icon,.ui-icon-searchfield:after{background: #666  ;background: rgba(0,0,0,.4)  ;background-image: url(images/icons-18-white.png)  ;background-repeat:no-repeat;-moz-border-radius:9px;-webkit-border-radius:9px;border-radius:9px;}.ui-icon-alt{background:#fff;background:rgba(255,255,255,.3);background-image:url(images/icons-18-black.png);background-repeat:no-repeat;}@media only screen and (-webkit-min-device-pixel-ratio:1.5),      only screen and (min--moz-device-pixel-ratio:1.5),      only screen and (min-resolution:240dpi){.ui-icon-plus,.ui-icon-minus,.ui-icon-delete,.ui-icon-arrow-r,.ui-icon-arrow-l,.ui-icon-arrow-u,.ui-icon-arrow-d,.ui-icon-check,.ui-icon-gear,.ui-icon-refresh,.ui-icon-forward,.ui-icon-back,.ui-icon-grid,.ui-icon-star,.ui-icon-alert,.ui-icon-info,.ui-icon-home,.ui-icon-search,.ui-icon-searchfield:after,.ui-icon-checkbox-off,.ui-icon-checkbox-on,.ui-icon-radio-off,.ui-icon-radio-on{background-image:url(images/icons-36-white.png);-moz-background-size:776px 18px;-o-background-size:776px 18px;-webkit-background-size:776px 18px;background-size:776px 18px;}.ui-icon-alt{background-image:url(images/icons-36-black.png);}}.ui-icon-plus{background-position:-0 50%;}.ui-icon-minus{background-position:-36px 50%;}.ui-icon-delete{background-position:-72px 50%;}.ui-icon-arrow-r{background-position:-108px 50%;}.ui-icon-arrow-l{background-position:-144px 50%;}.ui-icon-arrow-u{background-position:-180px 50%;}.ui-icon-arrow-d{background-position:-216px 50%;}.ui-icon-check{background-position:-252px 50%;}.ui-icon-gear{background-position:-288px 50%;}.ui-icon-refresh{background-position:-324px 50%;}.ui-icon-forward{background-position:-360px 50%;}.ui-icon-back{background-position:-396px 50%;}.ui-icon-grid{background-position:-432px 50%;}.ui-icon-star{background-position:-468px 50%;}.ui-icon-alert{background-position:-504px 50%;}.ui-icon-info{background-position:-540px 50%;}.ui-icon-home{background-position:-576px 50%;}.ui-icon-search,.ui-icon-searchfield:after{background-position:-612px 50%;}.ui-icon-checkbox-off{background-position:-684px 50%;}.ui-icon-checkbox-on{background-position:-648px 50%;}.ui-icon-radio-off{background-position:-756px 50%;}.ui-icon-radio-on{background-position:-720px 50%;}.ui-checkbox .ui-icon{-moz-border-radius:3px;-webkit-border-radius:3px;border-radius:3px;}.ui-icon-checkbox-off,.ui-icon-radio-off{background-color:transparent;}.ui-checkbox-on .ui-icon,.ui-radio-on .ui-icon{background-color:#ffcc66 ; }.ui-icon-loading{background-image:url(images/ajax-loader.png);width:40px;height:40px;-moz-border-radius:20px;-webkit-border-radius:20px;border-radius:20px;background-size:35px 35px;}.ui-btn-corner-tl{-moz-border-radius-topleft: 1em  ;-webkit-border-top-left-radius: 1em  ;border-top-left-radius: 1em  ;}.ui-btn-corner-tr{-moz-border-radius-topright: 1em  ;-webkit-border-top-right-radius: 1em  ;border-top-right-radius: 1em  ;}.ui-btn-corner-bl{-moz-border-radius-bottomleft: 1em  ;-webkit-border-bottom-left-radius: 1em  ;border-bottom-left-radius: 1em  ;}.ui-btn-corner-br{-moz-border-radius-bottomright: 1em  ;-webkit-border-bottom-right-radius: 1em  ;border-bottom-right-radius: 1em  ;}.ui-btn-corner-top{-moz-border-radius-topleft: 1em  ;-webkit-border-top-left-radius: 1em  ;border-top-left-radius: 1em  ;-moz-border-radius-topright: 1em  ;-webkit-border-top-right-radius: 1em  ;border-top-right-radius: 1em  ;}.ui-btn-corner-bottom{-moz-border-radius-bottomleft: 1em  ;-webkit-border-bottom-left-radius: 1em  ;border-bottom-left-radius: 1em  ;-moz-border-radius-bottomright: 1em  ;-webkit-border-bottom-right-radius: 1em  ;border-bottom-right-radius: 1em  ;}.ui-btn-corner-right{-moz-border-radius-topright: 1em  ;-webkit-border-top-right-radius: 1em  ;border-top-right-radius: 1em  ;-moz-border-radius-bottomright: 1em  ;-webkit-border-bottom-right-radius: 1em  ;border-bottom-right-radius: 1em  ;}.ui-btn-corner-left{-moz-border-radius-topleft: 1em  ;-webkit-border-top-left-radius: 1em  ;border-top-left-radius: 1em  ;-moz-border-radius-bottomleft: 1em  ;-webkit-border-bottom-left-radius: 1em  ;border-bottom-left-radius: 1em  ;}.ui-btn-corner-all{-moz-border-radius: 1em  ;-webkit-border-radius: 1em  ;border-radius: 1em  ;}.ui-corner-tl,.ui-corner-tr,.ui-corner-bl,.ui-corner-br,.ui-corner-top,.ui-corner-bottom,.ui-corner-right,.ui-corner-left,.ui-corner-all,.ui-btn-corner-tl,.ui-btn-corner-tr,.ui-btn-corner-bl,.ui-btn-corner-br,.ui-btn-corner-top,.ui-btn-corner-bottom,.ui-btn-corner-right,.ui-btn-corner-left,.ui-btn-corner-all{ -webkit-background-clip:padding-box;     -moz-background-clip:padding;          background-clip:padding-box;}.ui-overlay{background:#666;opacity:.5;filter:Alpha(Opacity=50);position:absolute;width:100%;height:100%;}.ui-overlay-shadow{-moz-box-shadow:0px 0px 12px rgba(0,0,0,.6);-webkit-box-shadow:0px 0px 12px rgba(0,0,0,.6);box-shadow:0px 0px 12px rgba(0,0,0,.6);}.ui-shadow{-moz-box-shadow:0px 1px  4px    rgba(0,0,0,.3)  ;-webkit-box-shadow:0px 1px  4px    rgba(0,0,0,.3)  ;box-shadow:0px 1px  4px    rgba(0,0,0,.3)  ;}.ui-bar-a .ui-shadow,.ui-bar-b .ui-shadow,.ui-bar-c .ui-shadow {-moz-box-shadow:0px 1px 0 rgba(255,255,255,.3);-webkit-box-shadow:0px 1px 0 rgba(255,255,255,.3);box-shadow:0px 1px 0 rgba(255,255,255,.3);}.ui-shadow-inset{-moz-box-shadow:inset 0px 1px 4px rgba(0,0,0,.2);-webkit-box-shadow:inset 0px 1px 4px rgba(0,0,0,.2);box-shadow:inset 0px 1px 4px rgba(0,0,0,.2);}.ui-icon-shadow{-moz-box-shadow:0px 1px 0  rgba(255,255,255,.4)  ;-webkit-box-shadow:0px 1px 0  rgba(255,255,255,.4)  ;box-shadow:0px 1px 0  rgba(255,255,255,.4)  ;}.ui-focus{-moz-box-shadow:0px 0px 12px #ffcc66 ;-webkit-box-shadow:0px 0px 12px #ffcc66 ;box-shadow:0px 0px 12px #ffcc66 ;}.ui-mobile-nosupport-boxshadow *{-moz-box-shadow:none !important;-webkit-box-shadow:none !important;box-shadow:none !important;}.ui-mobile-nosupport-boxshadow .ui-focus{outline-width:2px;}

By viewing downloads associated with this article you agree to the Terms of Service and the article's licence.

If a file you wish to view isn't highlighted, and is a text file (not binary), please let us know and we'll add colourisation support for it.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Written By

Dan Thyer

Chief Technology Officer Logical Advantage

United States

Dan graduated summa cum laude from North Carolina State University with dual degrees in Electrical Engineering and Computer Engineering. Dan attended NC State on full scholarship program with General Motors. After working with GM, Dan served as application development director for the largest Microsoft Business Solutions Partner in the Carolinas. During this time, Dan's team won two Microsoft Pinnacle awards. For the past 10 years, as Co-Founder and Chief Technology Officer of, Logical Advantage (www.logicaladvantage.com), a software consulting business, Dan has successfully architected and delivered web-based and mobile applications for many Fortune 500 companies. Dan focuses his energies on emerging technologies, and ensuring that all projects are architected to meet the client's current and future needs. Dan collaborates with his Chief Solutions Officer and other architects to create technical standards, including coding standards, tools, and platforms. He holds a leadership role in the local Microsoft Enterprise Developer's Guild and has been on the steering committee for over a dozen years.

Using jQuery Mobile with MVC and Netduino for Home Automation

License

Comments and Discussions