Google Maps InfoWindow With Knockout

Today I made myself a bit more familiar using the google maps InfoWindow (API V3) in combination with knockout. I wanted to update the info window contents (latlng) by using a knockout data-binding. It seemed to be more natural to find the caveats in jsfiddle before implementing them in a larger project.

The good news is that the knockout usage with google maps is quite straight forward and there was only one thing which irritated me a bit. The InfoWindow is not opened directly when calling InfoWindow.open(…) you have to listen to its domready event if you want to bind knockout.

Jump directly to the jsfiddle example: http://jsfiddle.net/G6MXd/4/

Code in pieces:

HTML

<div id="map_canvas" style="width:50%; height:50%"></div>

<div id="outside">
Latitude: <input type="text" data-bind="value:lat" />
Longitude: <input type="text" data-bind="value:lng" />
<div>​

JavaScript
At first we have a simple knockout view model which stores our marker latitude and longitude value.

$(function() {

//knockout view model
var MarkerPosition = function() {

var self = this;
self.lat = ko.observable(0);
self.lng = ko.observable(0);

};

var model = new MarkerPosition();
ko.applyBindings(model, document.getElementById("outside"));

Then we are initializing our google maps element and a marker which can be dragged around:

// init gmap
var mapOptions = {
center: new google.maps.LatLng(-34.397, 150.644),
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP
};

var map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);

var mapCenter = map.getCenter();
var marker = new google.maps.Marker({
position: mapCenter,
map: map,
draggable: true
});

And finally the more interesting part. At first we attach a function to the markers dragend event to build the contents for the info window object. We do this only once as we do not want to rebind knockout again and again. It’s no problem to close the info window while dragging and show it again in the dragend event. Make sure to use the infow windows’s domready event for binding knockout as its opened asynchronously.

// our info window (reused on every drag)
var infoWindow;

// show info window when marker dragging ends
google.maps.event.addListener(marker, 'dragend', function(e) {

//update knockout view model
var text = "<div id='inside'>Latitude: <input type='text' data-bind='value:lat'/>";
text += "<br />";
text += "Longitude: <input type='text' data-bind='value:lng' / ></div>";

//just create the infoWindow once
if (!infoWindow) {
infoWindow = new google.maps.InfoWindow({
content: text
});

// bind knockout when dom is ready
google.maps.event.addListener(infoWindow, 'domready', function() {
ko.applyBindings(model, document.getElementById("inside"));
});

}
// open info window
infoWindow.open(map, marker);

//update our view model
model.lat(e.latLng.lat());
model.lng(e.latLng.lng());
});

// close info window when marker dragging starts
google.maps.event.addListener(marker, 'dragstart', function(e) {
if (infoWindow) {
infoWindow.close();
}

});
});​ 

That’s all, quite simple and now you can perhaps start to integrate some reverse geocoding to get the correct address in the info window. Have fun!

, , ,

Keine Kommentare


ADCH++ on OpenSuse 11.4 / 12.1

This is my documentation of my first try building the ADCH++ hub software. The result is a private, register-only ADC Hub with encrypted connections. Before you proceed I recommend reading the basic and expert user guide which are very well written.

I’ve used version 2.8 from sourceforge which you can grab from here:

http://sourceforge.net/projects/adchpp/files/Releases/ADCH%2B%2B%202.8/2.8.0/

Download the adch++ source from sourceforge and extract:

cd /tmp
wget adch++ &lt;source-url&gt;
tar xfv adchpp_2.8.0_source.tar.gz
cd adchpp_2.8.0_source/

Now we need to install the build tools. I’ve accepted all the vendor changes for python and readline-devel packages on OpenSuse 11.4. On 12.1 I was able to install them directly.

zypper in swig scons gcc-c++ libstdc++-devel python readline-devel openssl-devel

Compile adch++ now through:

scons mode=release

Create a new user account for runnning the hub service because root should not do that.

mkdir /home/adchpp
mkdir /home/adchpp/bin/
useradd -r -s /sbin/nologin -d /home/adchpp adchpp
chown -R adchpp:users adchpp/

# make the config directory accessible
chown -R adchpp:users /etc/adchpp/

Copy binaries, scripts and config files

mkdir /home/adchpp/bin/
cp build/release-default/bin/* /home/adchpp/bin/
mkdir /etc/adchpp
mkdir /etc/adchpp/scripts
cp -rf plugins/Script/examples/* /etc/adchpp/scripts/
cp -rf etc/* /etc/adchpp/

The hub could be started now, but we wanted encrypted connections which need some more configuration.

cd /etc/adchpp

# Make the line endings unix style
dos2unix Script.xml
dos2unix adchpp.xml

# Create certificates for encrypted connections
mkdir certs
cd certs/
openssl genrsa -out privkey.pem 2048
openssl req -new -x509 -key privkey.pem -out cacert.pem -days 1095
openssl dhparam -outform PEM -out dhparam.pem 1024

Enable TLS connections

vi /etc/adchpp/adchpp.xml

Insert the following snippet into the right config section.

<Server Port="2780" TLS="1" Certificate="/etc/adchpp/certs/cacert.pem" PrivateKey="/etc/adchpp/certs/privkey.pem" TrustedPath="/etc/adchpp/certs/trusted/" DHParams="/etc/adchpp/certs/dhparam.pem" />

Get the scripts working. I have added the json, autil and aio.lua to the list. The Script.xml should look like this then:


<?xml version="1.0" encoding="utf-8" standalone="yes"?>
<!--Ensure that you load the scripts in this order so that they work correctly.-->
<ScriptPlugin>
        <Engine language="lua">
                <Script>/etc/adchpp/scripts/json.lua</Script>
                <Script>/etc/adchpp/scripts/aio.lua</Script>
                <Script>/etc/adchpp/scripts/autil.lua</Script>
                <Script>/etc/adchpp/scripts/access.lua</Script>
                <Script>/etc/adchpp/scripts/access.bans.lua</Script>
                <Script>/etc/adchpp/scripts/access.guard.lua</Script>
                <Script>/etc/adchpp/scripts/access.op.lua</Script>
                <Script>/etc/adchpp/scripts/access.bot.lua</Script>
                <Script>/etc/adchpp/scripts/motd.lua</Script>
                <Script>/etc/adchpp/scripts/history.lua</Script>
        </Engine>
</ScriptPlugin>

Start the hub under our new adchpp user

sudo -u adchpp /home/adchpp/bin/adchppd

Result:

Starting..Processing HubName
Processing Description
Processing Log
Processing LogFile
Processing MaxCommandSize
Processing BufferSize
Processing MaxBufferSize
Processing OverflowTimeout
Processing LogTimeout
.
2.8.0 (r0) Release running, press ctrl-c to exit...

Looking good. Now we should be able to connect with dc++ to our server using adcs://ip:port. If something is not working or you are not able to execute any commands you should have a look into the log file in /etc/adchpp/logs/

The following steps are allready well documented in the basic user guide. I’ve listed them here only for the sake of completeness.

How to get the operator status

To make yourself the OP type the following into the dc++ chat.

+regme <password>
[20:58] You're now successfuly registered with the Password: <password>

Then stop the hub and edit the users.txt in your /etc/adchpp/ directory and set your user level to 10.

Start the hub again and you will see that your the boss now.

How to limit access to registered users only

+cfg maxusers 0

How to register new users

+regnick <nick> <password> <level>

Now your hub is up and running and you can send out some invites. Have fun 🙂

Keine Kommentare


A Quick User & Role Management Solution

In the last few days I have played a lot with the version control system git. I’ve worked on a user and role management solution on GitHub for smaller and maybe medium sized ASP.NET MVC projects.

I wanted to have something which is pluggable into any other future project without duplicating this (boring) code over and over again.

My solution for that consists of two parts. One the one hand there is a static helper class which generates all the html, css and JavaScript code needed for the user interface. On the other hand there is an external controller, which provides all the role and user account data requested by the client.

The user interface is divided into 3 parts: The user accounts as a sortable table, a form for creating new user accounts and a form for managing roles.

If you are tired of reading yet just watch the demo application at AppHarbor:
http://usermanagementdemo.apphb.com/

Features:

  • Paged user list by using mottie’s tablsorter fork and pager plugin (included in MyHtmlHelper)
  • Create / delete user accounts
  • Create / delete roles
  • Manage roles for users
  • Client-side success and error messages
  • Custom user authorization possible
  • Any membership or roleprovider can be used

+ Unlocking user accounts

There are some points though you need to know before trying out:

  • The user table is loaded at once which is a bad idea for > 1000 users ?!
  • All data is rendered on the client through JavaScript, which is no showstopper if you know the admin’s browser settings.

If you are currently starting a new project, it might be a simple and quick solution for you. You can still mess around with an advanced system when your project grows.

The full source code including the demo application is available at GitHub:
https://github.com/Epstone/Simple-MVC-User-Management

,

Keine Kommentare