Showing posts with label JQuery. Show all posts
Showing posts with label JQuery. Show all posts

Wednesday, March 5, 2014

Drawing in a canvas.

I created an html 5 canvas object.
Mouse down to draw in it.

Sadly, this only works if it is the only post viewed.
JSFiddle was very useful in debugging this and getting it to work. I did the development on a PC, and tested the results immediately in a browser on a tablet and on my phone.



Tuesday, March 8, 2011

Android TV Remote

TV remotes are simple devices. All that it takes to make one is an IR emitting diode and a small amount of logic to make the diode blink at the right intervals for the TV to interpret.
The total cost of the materials involved in the construction of such a device is small, probably 5$ at the most. I recently bought a TV remote from Radio Shack and took it apart to confirm the components involved. The device was nearly entirely molded plastic and buttons, plus the one IR diode and the one small chip to control it.

Now, I'm a very lazy person, as this blog post clearly demonstrates, so instead of keeping track of many small fist sized electronic devices that are involved with remote communications, I only want to keep track of only one -- my phone.
This would be a wonderful brilliant solution and a major selling point for whatever phone had incorporated the 5 dollars worth of parts required to make this work, but alas, I know of no phone that currently incorporates an IR LED.
>:P

But my laziness will not be denied, so after a bit of searching on the interwebs, I found a company called global cache which makes devices that facilitate laziness. Particularly ethernet connected IR emitters. So my solution begins to look like this:
Brilliant! Except that is not what I'm going to do. For one thing I opted for a GC-100 which is wired, not wireless. It also connects a relay, a serial, and 3 IR ports via TCP/IP. One of the IR ports has to be used to connect an IR Blaster which actually emits the IR signal.
Brilliant! But android-java is not my forte. So I made a solution that looks like this:
Well, I've removed the whole point of this exercise, which is to control the TV from my phone, but I'll add that back in later. In the meantime, the powershell script is exactly what I want to prototype the application and test that this much, at least, does work.

$msgOnOff = "sendir,2:1,1,37000,1,1,333,167,21,20,21,20,21,61,21,20,21,20,21,20,21,20,21,20,21,61,21,20,21,20,21,61,21,61,21,61,21,20,21,61,21,20,21,20,21,20,21,20,21,20,21,20,21,20,21,20,21,61,21,61,21,61,21,61,21,61,21,61,21,61,21,61,21,1576,333,83,21,740" + [char]::ConvertFromUtf32(13)
$msgMute = "sendir,2:1,1,37000,1,1,333,166,21,20,21,20,21,62,21,20,21,20,21,20,21,20,21,20,21,62,21,20,21,20,21,62,21,62,21,62,21,20,21,62,21,20,21,62,21,20,21,62,21,62,21,20,21,20,21,20,21,62,21,20,21,62,21,20,21,20,21,62,21,62,21,62,21,1572,333,84,21,740" + [char]::ConvertFromUtf32(13)
$msg = $msgOnOff
$ipaddress = [System.Net.IPAddress]::Parse("192.168.1.70")
$ipendpoint = New-Object System.Net.IPEndPoint -ArgumentList $ipaddress, 4998
$addressFamily = [System.Net.Sockets.AddressFamily]::InterNetwork
$socketType = [System.Net.Sockets.SocketType]::Stream
$protocolType = [System.Net.Sockets.ProtocolType]::Tcp
$socket = New-Object System.Net.Sockets.Socket -ArgumentList $addressFamily, $socketType, $protocolType
$socket.Connect($ipaddress, 4998)
$bytes = [System.Text.ASCIIEncoding]::ASCII.GetBytes($msg)
#$bytes
$socket.Send($bytes)
$socket.Close()

Running this script enabled me to turn the TV on and off programmatically, proving that I had the hardware set up right and that the whole concept would work. The strings: $msgOnOff and $msgMute were taken from using an IR learner and Global Cache's eLearn software.  It took me a bit of fiddling to get the  [char]::ConvertFromUtf32(13) at the end of the strings figured out, and until I did, the script did not work. 


So the next thing that I did was set up a web service that would launch the powershell script. This would enable me to test the set up with a simple web page. That solution looked something like this: 

The web service code looks like this: 


1 [OperationContract]
2 [WebGet]
3 public void ToggleMute()
4 {
5     ProcessStartInfo info = new ProcessStartInfo("powershell.exe");
6     info.Arguments = "-f \"C:\\LivingRoom\\sendirMute.ps1\"";
7     info.RedirectStandardError = true;
8     info.RedirectStandardOutput = true;
9
10     info.UseShellExecute = false;
11
12     System.Diagnostics.Process process = Process.Start( info);
13     return;
14 }

 That code runs a bit slow, so there's about a one second delay between when you launch that code and the TV actually turns off (or mutes itself in this case). I'll have to revisit this in the future and see if I can get it to run more quickly using runspaces or some other trick. 


And then there's the ajax that I use to call the web service: 

    function OnOff() {
        $.ajax({
            url: 'LivingRoom.svc/ToggleOn',
            type: "GET",
            cache: false
        });
    }


Once I verified that this worked from a browser, I was able to publish the website to my local server, and browse to it with my phone's browser, and click on the button that I put on the web page and I finally had my phone operating as a TV remote. 

At this point, the solution works with any device that has a browser (blackberry, iphone, android, random laptop). I could use windows scheduler to toggle the mute or on/off at any time (though I don't know how that would be useful). But what I really want it a native android application that is the User Interface, and not a web page, so after creation of an Android App the solution looks like this: 


public class NotesList extends Activity {
    /** Called when the activity is first created. */
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);

        final Button button = (Button) findViewById(R.id.Button01);
        button.setOnClickListener(new OnClickListener() {
            public void onClick(View v) {
                HttpClient httpClient = new DefaultHttpClient();
                HttpContext localContext = new BasicHttpContext();
                HttpGet httpGet = new HttpGet("http://192.168.1.76/LivingRoom/LivingRoom.svc/ToggleMute");
                try {
                    httpClient.execute(httpGet, localContext);
                } catch (ClientProtocolException e) {
                    // TODO Auto-generated catch block
                    e.printStackTrace();
                } catch (IOException e) {
                    // TODO Auto-generated catch block
                    e.printStackTrace();
                }
            }
        });
    }
}


So I've created an Android based TV remote, woot. 

Here's a list of some of the technologies and programs that I used in this little exercise:
Powershell
IIS
aspnet_regiis.exe
Visual Studio 2010
Javascript/JQuery/Ajax
C# Web Service
Eclipse
Windows 7 
Ubuntu Linux
Android Java
Enterprise Architect (for the diagrams)
Paint (for prepping the diagrams)

Sunday, February 21, 2010

Quiz program updates

I've added some new functionality to the japanese quiz program.

1. New history items are added to the top of the history list, not the bottom.
2. Chapter 3 vocabulary.
3. Minor improvements to the graphical layout (centering, sizing).
4. Corrected spelling error ("inorrect").
5. Added JQuery dialog on last quiz option that shows missed items and resets using only the missed items (last option only right now).

Todo:

  • Add the ability to dynamically add and remove words/questions.
  • Get the checkbox/tag filtering system working
  • Add freehand drawing as an answer style. Allow it to be manually graded.
  • Double check that the JQuery dialog works on a phone. 
  • Add the JQuery dialog to all options.

The freehand drawing is going to require another javascript library. I've been poking at processingjs a bit, and it looks like the way to go, unless I wish to tie myself to Flash or Silverlight, and I don't.

Tuesday, February 9, 2010

Week 7: Japanese Quiz Program

Currently it is here: http://www.ogresoft.com:83/MVC/HTML/Japanese111-1.htm.

There is no webservice - ajax stuff in here, the program, other than script includes, is self-contained. Of course, I used JQuery extensively. It was interesting to observer that most of the file is javascript, followed by css, and very little html.

From here, I need to add voice options: first converting the stock *.wav files into several *.mp3 files. The two *.mp3 files that I use for success and failure were converted from *.wav files using Sound Converter 1.4.4 in Ubuntu Linux. I made a few feeble attempts to download a useful freeware windows tool to do the conversion, but that didn't work. +1 linux; -1 Windows.

I made the viewable quiz area such that it would fit well on a cell-phone browser screen (landscape mode).

If I can get these programs to run well in a cell-phone browser, is there much use in creating cell-phone OS specific applications that do exactly the same thing, but in only a slightly more fluid manner? Probably not.

Sunday, January 31, 2010

Week 5: Internet Stratego

There was a bit more of a leap between tic-tac-toe and stratego than I anticipated. I'm tired. I coded furiously, knowing that I had probably overpromised myself in choosing the project for this week. I could feel myself slowing down as the effort began to wear me down.

I typically don't go for mental marathons. I can feel my mind get tired and become less effective. I believe that everyone's mind does, but that most others who brag about their long hours are either in denial or can't judge the difference in their own work between when they are tired and when they are at their peak.

I'm lazy, you see. I don't want to waste more time than I have to on any particular task. My silly endeavor, 52 weeks of coding, has two purposes. One, to do in coding what is analogous to a long line in fishing. To bait the waters of business with 52 distinct pieces of possibility, and see which, if any, of them get bites. And two, to perfect the art of efficient coding. I want to get these projects done fast. I want to reduce, as much as possible, the time between when I have an idea, and the time when it is tangible enough to show to other people.

So marathon coding represents room for improvement. Next time, I will do it faster.

But lets go over some of the other things that I learned this week:

JQueryUI

This is where I got the drag and drop functionality. Very nifty, very concise.

Firebug

OK, I already knew about firebug, but the Console and the Debugger made this week possible. Yeah, they're that cool.

JQuery attribute selectors.

delete arrayName[elementIndex];

$('someselector').droppable('destroy')

Saturday, January 23, 2010

Week 4: Head to Head Tic Tac Toe

I've completed Tic Tac Toe head to head. "Complete" is of course relative. Right now, there are still serious usability issues, but they are all UI work. The back end and ajax calls won't need to change.

Same URL as last week. :)

How to scroll a textarea to its end using JQuery

var myHeight = $('textarea#TextArea1').height();
$('textarea#TextArea1').scrollTop( myHeight );

Tuesday, January 19, 2010

Week 3: Simple Chat integrated with MVC

The leap from simply having an MVC 2.0 project integrated with Sql Server to having the project do something moderately useful was a bit more work that I expected. Not that any bit is hard, mind you, but the sheer number of bits was interesting.

Bit 1: ASP.Net Web Services is different from WCF Web Services is different from MVC. Maybe if I hadn't come late into the web programming game, that would have been a bit more obvious. I had previously set up a simple program to act like a chat program using a JQuery/javascript web client and an ASP.Net Web Service back end. Once I tried to move the ASP.Net web service into my MVC project, I realized that well, you can't do that. An ASP.Net web service is its own project. Forcing them together seemed like a bad idea. It turns out it is a bad idea. MVC enables returning pure JSON to an ajax enabled web page, so in retrospect, that is the way to go, but I hadn't stumbled upon that piece of information yet, so I put a WCF Web Service in the MVC project and got it working. There were a number of gotchas in setting up the Web Service correctly and also aligning it with the correct JQuery syntax.

Bit 2: Connecting Entity Framework 4.0 to an external Sql Server. This was straight forward, and in retrospect, everything I did with the EF was straight forward. In retrospect that is. Being a total noob in EF cost me some time, but I'm becoming a huge fan. Note that I'm talking about EF 4.0. Not the single earlier version.

Bit 3: Hitting F5 is different from browsing to your site through the internet. The first time I hit it from the internet, it didn't pick up any of the stylesheets or the jquery files. So it wasn't very functional. I had to share the folders in windows explorer before it would allow them to load. I spent much time futzing with IIS settings hoping the answer was in them.

Bit 4: I don't know how the Publish menu item in the solution explorer works. Oh sure it looks cool, push one button and your web site is automagically made externally browsable. But setting up a Publisher or whatever it is has eluded me for the 5 minutes that I've allotted to investigating it.

Bit 5: I don't know how to get MVC 2.0 deployed on my web server. My web server is of course, a virtual machine running Windows 2008 R2, but theoretically, that shouldn't matter. I've also failed to deploy SqlServer on my virtual machines.

I have resigned myself to using both SqlServer and MVC 2.0 on a real machine. So I pointed IIS at the directory where my VS 2010 MVC project is, and it all seems to work for now.

Week 3

Saturday, January 2, 2010

Chat program

This week, and I think I'll try to write an application per week, I wrote a very simple chat program using JQuery, Entity Framework, and Sql Express. I'd put up a link to it, but I've spent the last two nights trying to get it deployed. I finally decided that it isn't worth it. The goal was to write the application not spend an infinite amount of time fiddling with IIS to get it deployed.

The actual application is still quite rudimentary. Just a few text boxes on an HTML page. The server side, while simple, should elegantly suffice. The single function takes username, message, and a conversation guid as arguments and returns the entire conversation. I figure that should continue to work at nearly any scale.

JQuery and Ajax are still very cool.

Entity Framework was also mostly painless. I'm rather impressed with it and will be using it again soon.

Some problems that I encountered during this week's exercise:
1) How do you get a text box to scroll to the bottom in HTML and Javascript these days?
2) Deployment was a total failure.

What's Next?
1) Use MVC 2.0 to log in and capture the username automatically.
2) Tic Tac Toe in JQuery
3) Figure out how to get any of this .Net 4.0 stuff deployed.