Tag Archives: javascript

Simple reset connection of ZTE MF60 router for aero2 users in Poland

Aero2 service is very popular free internet access in Poland. It has one problem. Every hour you must put caputcha code and after this restart your modem to reset your session for next hour of internet browsing.

This is very annoying to restart device and then connect to network or each time to go to network settings in the device and then go to WAN settings and switch of and on connection again. So today i did small check how resetting connection from browser works in background and I created small jQuery script for everyone who want to have something easier.

This is quite easy solution, but unfortunately only one way – i can send a command but have no return from modem so you have to check your modem screen to see i connection is restarted. I hope it is not a big problem for you 😀

Ok, so now little piece of javaScript:

$.post(“http://192.168.0.1/goform/goform_process”,{goformId:”LOGIN”, lucknum:”48636″, systemDate:””, save_login:”1″, languageSelect:”pl”, user:”admin”, psw:”admin”, save_login_enablebox:”on”});

$.post(“http://192.168.0.1/goform/goform_process”,{goformId:”NET_CONNECT”, lucknum_NET_CONNECT:”48636″, dial_mode:”manual_dial”, action:”disconnect”, Submit_linkset:”Zastosuj”});

setTimeout(function(){ $.post(“http://192.168.0.1/goform/goform_process”,{goformId:”NET_CONNECT”, lucknum_NET_CONNECT:”48636″, dial_mode:”auto_dial”, action:”connect”, Submit_linkset:”Zastosuj”}); },3000);

And this is all, just add this to small page when you link to jQuery and it is done.

In my example user and password is standard. admin/admin.

Redesign of Lesson Plan application

Last few days i was working on redesign my Lesson plan application. I focused on two points. First was to change design to something new fresh and “flat”. Second goal was to make it more responsive. In old version i used jquery mobile framework which becomes very slow and user had all the time feeling like application is not fast enough. This itme i focuesd on angularjs and its mobile capabilities.

How it works now you can discover by playing with this clickable demo (if you are using windows check it in Google Chrome):

Before you start – add a child, edit child name and edit default timetable for lessons in your child school.

All data are saved locally in your browser. Application right now didn’t save anything on a web but i’m planing to release such functionality.

Please let me know your experiences with this design.

Basic concept of using dynamic CSS class exchange by angular scope data

Here is simple example how to support changing CSS definition of HTML objects by using very simple classes which covers only limited parts of object and then making dynamic assignment this classes to object based on angular scope data.

To do this i prepared very simple css file:

.borderSolid{
  border-style:solid;
  }
  .borderDashed{
    border-style:dashed;
  }
.border1{
  border-width:1px;
}
.border2{
  border-width:2px;
}
.border3{
  border-width:3px;
}
.shadowYes{
  box-shadow:0 0 10px gray;
}
.shadowNo{
  box-shadow:none;
}
.borderSilver{
  border-color:silver;
}
.borderBlack{
  border-color:black;
}
.borderWhite{
  border-color:white;
}
.div{
  margin:20px;
  padding:20px;
  background-color:lightblue;
}

in this css definition you can find classes which defines border of div component. There are separated classes of border type (solid/dashed) border width (1,2 or 3px) border color(silver,black or white) and box shadow (yes,no)

Now i have an angular controller class where i have properties which defines also this values

function test($scope){
  $scope.borderColor="borderBlack";
  $scope.shadow="shadowYes";
  $scope.borderWidth="border1";
  $scope.borderType="borderSolid";
  };

Finally i have code where you can dynamically change which classes are active for each part of style and using binding capabilities of angularjs. All the magic is in this line:

<div class="div  {{shadow}} {{borderColor}} {{borderWidth}} {{borderType}}">

where i’m simply binding selected classes for each type.

Complete solution you can find here (example on plnkr.co):

Live a comment if you like this idea.

[Plunker] Presentation of very simple table sorting and filtering made by angularjs

Today i played a little bit with plunker and prepared very simple presentation how to add filtering and sorting features to simple html table using angularjs code. It is very basic example which does following things:
1. you can search for any string.
2. every column has search window to search data for this column
3. clicking on column name makes table sorted by selected column

if someone of you feel this example as useful then leave a comment 🙂

[new ideas] using signalR to support long time consuming operations on server

In many situations i faced with problem when i have to make an operation which will be done on server side but this operation is very time consuming. For example reading structure for 100 parts from our ERP system. If i want to do it in one call from my web application then user starts process and for long time (e.g. 10 minutes) is not notified about what is really happening on server. In such situation user can start to think that something wrong happen and tries to make a call again for example.

Expected situation for me in that case would be to give user feedback that something is still going on server. Then user would know. Ok, it is time consuming process but still going well so i need to be patient.

Until today it was only a dream for me and i had no idea how to develop something like this.

But as you can find from this post i start to play a little with signalR. And today i made an experiment to see if signalR can help to solve this problem?

So i did an experiment and i know now that answer for this question is yes.

Here is how i did an experiment. You can implement your own solution as you want.

Setup on server side:

Web application with included signalR

Setup on client side:

Javascript application with jquery and knockout model in it.

Implementation:

On server i have hub named tester with following code:

Imports Microsoft.AspNet.SignalR 

Public Class tester
Inherits Hub

Public Sub hallo(id As String)
Clients.All.start("New client has loggin with guid: " + id)
End Sub

Public Sub test()
Clients.Caller.start("Starting at: " + Now.ToString)

For i = 0 To 30
Clients.Caller.step("Step: " + (i + 1).ToString + " " + Now.ToString)
System.Threading.Thread.Sleep(20000)
Next

Clients.Caller.koniec("Finish at: " + Now.ToString)
End Sub

End Class

My hub has two methods:

1. hallo – which get’s one attribute id – it is connection id and this methods send’s information for all connected clients that new user has been connected. it is only infomration method in our example.

2. test – this is right test method. At starts – sends information for client that process has been started, next makes fake long operation which is loop for 31 iteration. In loop it send’s information to client with step number of loop and freezes thread for 20 seconds. At the end sends information that process is finished. That means all process takes over 10 minutes. Which is enough long to make usual timeout.

Method test calls 3 different method on client side – start, step and finish

In client we have following application deffinition in Javascript.

function model() {
var m = this;
m.info = ko.observableArray();

m.startProcess = function () {
m.info.push(new info("Sending start call"));
myHub.server.test();
m.info.push(new info("Start call done"));
};
};

function info(i) {
var m = this;
m.Text = ko.observable(i);
}

var myHub;

$(function () {

myHub = $.connection.tester;
myHub.client.start = function (o) {
myModel.info.push(new info(o));
};
myHub.client.step = function (o) {
myModel.info.push(new info(o));
};
myHub.client.koniec = function (o) {
myModel.info.push(new info(o));
};

var myModel = new model();
ko.applyBindings(myModel);
$.connection.hub.start().done(function () { myHub.server.hallo($.connection.hub.id);});

});

First we have knockout model with observable array named info and one method which send call of tester on server.

Next we have knockout object of info which just presents data from server.

Finnaly we have start definition:

First step is definition of hub object tester from server. Next is definition of handling events send from server for start, finish and step methods. Next is definition of knockoout model and applying bindings to web page. Finally start of connection and after connection is succeeded  then calling method hallo on server.

on page we have button which calls method startProcess and unsorted list which presents contains of info array. When user clicks button starting process then process on server is starting and server notifies each 20 seconds loop that something i still going on server and finally sends finish information.

Here is how it looks in browser when process will finish:

signalr1

[livecoding] Simple menu on livecoding.io

Since few days i’m very impressed by livecoding.io page. I love this this page and i think it is very nice tool to make some prototyping for web.

To make a test i did small test today in i tried to build very small menu for web. This is my result

Zrzut_ekranu_19.05.2013_20_24If you want to see this example in reality please go to this page: http://livecoding.io/5608320 do you like it?

[apps] Public test of speedway app on Android / publiczne testy aplikacji żużla na androida

If you want to test my speedway application on Android here is good time for it. Just download this apk and install it on your phone. Have fun and leave a comment here if you have any ideas or comments.

Polish:

Jeżeli chcecie testować moją aplikację do żużla na Androidzie to teraz już możecie. Wystarczy ściągnąć ten plik apk i zainstalować go na swoim telefonie. Miłej zabawy i proszę o komentarze, jeżeli macie jakieś problemy lub sugestie.

Zrzut_ekranu_19.05.2013_11_13

Previous posts in this subject:

[apps] New speedway application for iOS and Android devices

Some time ago i created project for application to watch polish speedway games on mobile devices (link to this post). In meantime owners of website ZuzelEnd.com has contacted me and ask if i’m using their data unofficial way so maybe is to cooperate together and get official application. And hare it is. You can now see first screen shoots from new version of application:

Now we are doing internal tests of this application on Android and iPhone devices and if everything will be finished i will release it to everyone to download and use for free.

All information will be available on this page.

Polish: Jakiś czas temu przygotowywałem aplikację na androida i iphona do przeglądania transmisji z meczy żużlowych. Niedawno zgłosił się do mnie właściciel storny zuzelend.com, z której pobierałem dane z propozycją przygotowania oficjalnej wersji i oto ona, screeny możecie oglądać powyżej. Aplikacja jest w trakcie testów, gdy będzie gotowa udostępnię ją dla wszystkich.

Wszystkie informacje będziecie mogli przeczytać na tej stronie.

 

[SAP JSON proxy] First public information – BAPI calls and SE37 HTML equivalent

Today i finally prepared test environment for SAP JSON proxy and i’d like to present all of you some of ideas.

First – why this project?

Right now i’m working on few applications which works with SAP but all of them are .net apps and fat client.  Because i’m last time fascinated web and mobile programming again i was wondering how to easy build simple applications interacting with SAP. Usually it was quite easy – i was building web service which was exchanging data with my application. This was good idea and everything was working really nice and smooth, but problem was that first i have to do something on server and then in my app (web or mobile). Then i asked myself what if i will simply put universal application on web which will somehow understand some queries from my app and then will execute my calls on SAP and return data back.

I was wondering about exchanging data in xml but json seams to be better so i decided to use json.

How it works?

application is sending json object with definition of process which want to call on SAP, then proxy analyze this object and prepare RFC call for SAP. After call is executed and return is converted to json and send back to application.

What are benefit so this approach?

First of all – you don’t need to care about any special sap connectors for web and mobile devices. Second you don’t need to care about server side any more, you have to focus only on side of your application. Third it is secure because applications doesn’t have any direct access to SAP server so you can extend proxy by adding some security filters or limitations on calls

So now an example

Example works on bank accounts settings. On SAP we have BAPI_BANK_GETLIST bapi which looks this way:

sap1

it expect import parameter BANK_CTRY – which in our example will be PL and returns BANK_LIST table which in our example looks this way:

sap2

As you can see there is one row with one example bank.

my JSON query looks this way:

{ "bapiName" : "BAPI_BANK_GETLIST",
 "errorMessage" : "",
 "exportFields" : [ { "name" : "BANK_CTRY",
 "value" : "PL"
 },
 { "name" : "MAX_ROWS",
 "value" : "0"
 }
 ],
 "exportStructures" : [ ],
 "importFields" : [ ],
 "importStructures" : [ { "fields" : [ { "name" : "TYPE",
 "value" : " "
 },
 { "name" : "ID",
 "value" : " "
 },
 { "name" : "NUMBER",
 "value" : "000"
 },
 { "name" : "MESSAGE",
 "value" : " "
 },
 { "name" : "LOG_NO",
 "value" : " "
 },
 { "name" : "LOG_MSG_NO",
 "value" : "000000"
 },
 { "name" : "MESSAGE_V1",
 "value" : " "
 },
 { "name" : "MESSAGE_V2",
 "value" : " "
 },
 { "name" : "MESSAGE_V3",
 "value" : " "
 },
 { "name" : "MESSAGE_V4",
 "value" : " "
 },
 { "name" : "PARAMETER",
 "value" : " "
 },
 { "name" : "ROW",
 "value" : "0"
 },
 { "name" : "FIELD",
 "value" : " "
 },
 { "name" : "SYSTEM",
 "value" : " "
 }
 ],
 "name" : "RETURN"
 } ],
 "result" : "OK",
 "tables" : [ { "columns" : [ "BANK_CTRY",
 "BANK_KEY",
 "BANK_NAME",
 "CITY"
 ],
 "name" : "BANK_LIST",
 "rows" : [ ]
 } ]
}

and proxy response is this:

{ "bapiName" : "BAPI_BANK_GETLIST",
 "errorMessage" : "",
 "exportFields" : [ { "name" : "BANK_CTRY",
 "value" : "PL"
 },
 { "name" : "MAX_ROWS",
 "value" : "0"
 }
 ],
 "exportStructures" : [ ],
 "importFields" : [ ],
 "importStructures" : [ { "fields" : [ { "name" : "TYPE",
 "value" : ""
 },
 { "name" : "ID",
 "value" : ""
 },
 { "name" : "NUMBER",
 "value" : "000"
 },
 { "name" : "MESSAGE",
 "value" : ""
 },
 { "name" : "LOG_NO",
 "value" : ""
 },
 { "name" : "LOG_MSG_NO",
 "value" : "000000"
 },
 { "name" : "MESSAGE_V1",
 "value" : ""
 },
 { "name" : "MESSAGE_V2",
 "value" : ""
 },
 { "name" : "MESSAGE_V3",
 "value" : ""
 },
 { "name" : "MESSAGE_V4",
 "value" : ""
 },
 { "name" : "PARAMETER",
 "value" : ""
 },
 { "name" : "ROW",
 "value" : "0"
 },
 { "name" : "FIELD",
 "value" : ""
 },
 { "name" : "SYSTEM",
 "value" : ""
 }
 ],
 "name" : "RETURN"
 } ],
 "result" : "OK",
 "tables" : [ { "columns" : [ "BANK_CTRY",
 "BANK_KEY",
 "BANK_NAME",
 "CITY"
 ],
 "name" : "BANK_LIST",
 "rows" : [ { "values" : [ { "name" : "BANK_CTRY",
 "value" : "PL"
 },
 { "name" : "BANK_KEY",
 "value" : "TESTPL1"
 },
 { "name" : "BANK_NAME",
 "value" : "Test bank pl"
 },
 { "name" : "CITY",
 "value" : "test"
 }
 ] } ]
 } ]
}

And this is how it looks in my HTML tester page which works similar to SE37 transaction

sap4

 

And here is another example:

Details of this bank account:

sap3And my data

sap5

This is current stage, if you have any questions for this project, then please let me know in comments or send an email.