Jumat, 17 Agustus 2018

Direct Print to POS Printer from Javascript on Client Side

As you have already known, web browser is like a sandbox. It is not allowed to access anything else on PC. That means, we need a program or background service as an interface to send the data from the web to printer. mike42 provides perfect PHP library that allows direct print from PHP. Unfortunately, PHP is on server side. We still need this library, since mike42 provides us functions that return ESC/POS data in binary. This data is what we need.

Next, since we want to print from web on client side, we need a way to direct print from javascript and, as I mentioned above, a third party service that allows us sending data to the printer. For that purpose, Kwickpos has that program written in python.

I use POS Printer Taffware ZJ-5890K. It is a low-priced thermal POS Printer and it is a good printer.

These are what we need for the PC on client side:

  1. KwickPython, you can download it from its web or download the script here
  2. install Python. Go googling, download and install the latest version
  3. Install Pywin32. Find the version that is compatible with your Python's version
  4. Install the driver of the POS Printer and share it as "POSPRINTER". You can refer to this tutorial if you have never shared printer before.
  5. After installing all of them, you need to add python's file path to Environment Variables. You can read it here. I'm using windows 8 and tested it in windows 10 too, the file path to python is C:\Users\[username]\AppData\Local\Programs\Python\Python37-32. Replace "[username]" with the real path on your PC. 
Do these steps:
  1. Open cmd console by Winkey-R, type "cmd" and Enter
  2. Make KwickPython cgi-bin directory:C:\KwickPython\htbin
  3. Save KwickPython script as:C:\KwickPython\htbin\kp.py
  4. Start the KwickPython:C:\KwickPython> python -m http.server --cgi 9100
Actually, you can read the more detailed explanation in KwickPython website. The script can do some other things, like return the list of active Printer, so you can choose which printer you want to use. My focus in this post is just how to use it for printing.

I assume, you have already started the KwickPython right now. The script listen to port 9100, you may change the port number if you like.

On Server Side you need mike42 PHP Library, download it here.

I forget to mention earlier, that I'm using CodeIgniter. I put the mike42 PHP Library inside the directory "view". And here are the controller and the view for printing.

Controller:

public function printPOS()
{
 $this->load->view('escpos-php-development/autoload.php');
 $this->load->view('print');
}

escpos-php-development is the name of the directory where library located.
Now here is how the "print.php" looks


print.php:
<?php
use Mike42\Escpos\Printer;
use Mike42\Escpos\PrintConnectors\DummyPrintConnector;
use Mike42\Escpos\CapabilityProfile;

/* Open the printer; this will change depending on how it is connected */

try
{
 $connector = new DummyPrintConnector();
 $profile = CapabilityProfile::load("TSP600");
 $printer = new Printer($connector);

 
 $printer -> text("hallo, direct Print From Javascript\n");
 $printer-> feed(3);

 $data = $connector -> getData();
 $base64data=base64_encode($data);
 $printer -> close();
}
catch(Exception $e)
{
 echo "Couldn't print to this printer: " . $e -&gt getMessage() . "\n";
}
?>
<input type="hidden" id="rawdata" value="<?php echo $base64data;?&gt">


<script>
var dat="";
window.onload = callFunction();

function callFunction()
{
 setInterval(ajax(),500);
}

function ajax()
{
 var rawdat=document.getElementById('rawdata').value;
 var xhttp = new XMLHttpRequest();
   
 url = 'http://localhost:9100/htbin/kp.py';
 xhttp.open("POST", url, false); //browser has to wait until the data finished loaded
 xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
 xhttp.onreadystatechange = function(){
  if(this.readyState==4 && this.status == 200)
  {
   alert(this.responseText);   
  }
  
 }
 
 xhttp.send("p=POSPRINTER&data="+rawdat);
}
</script>

Take a look at the ajax function when it call xhttp.send("p=POSPRINTER&data="+rawdat). the "p" is for the name of the shared Printer, you may change the value of  "p". The "data" is the  bas64 encoded binary data of raw ESC/POS commands.

If you are using chrome, you need to install CORS extension. You need it, because the ajax tries to open a url outside the web application domain. Your web domain may be myweb.com and the ajax will try to access localhost, which is outside myweb.com domain. It may lead to security issues, chrome will warn you by the time you are activating this extension.

Actually that is already everything. You may have some question how to start the KwickPython on window startup or how to start it as windows service, just refer to the KwickPython website and just google to find how to start the script as windows service.

I hope this posting can help you somehow.

[Updated]
RUN KwickPython as a Service

To be able to print on client side, you should activate the KwickPython. On the official Website of KwickPython they already told us that there are two ways to start it automatically. Call it as a job and it will activate the cmd console or call it as service with no cmd console. The main problem if you call it as a job, the service will stop if the console is closed. So, its better if the service keep running although the console is closed. Then we should run it as a service. Unfortunately, it is not that easy to execute a command as a service.

So this is how I do it. I run the KwickPython at the startup as batch job with no console.

  1. There are 3 Files that I need: kp.py that I put inside 'htbin' directory, a bat file to execute the command activating the python service and a vbs file to call the bat file without console.
  2. Download the kp.py and put it inside 'htbin' directory
  3. put the htbin inside c:\KwickPython (like I mentioned above)
  4. Create a bat file and give a name, in my case I name it 'printService.bat'. Write this code:
c:\
cd c:\KwickPython
python -m http.server --cgi 9100

  1. Put the printService.bat fie inside c:\KwickPython
  2. Open Run dialog with win+R and type 'shell:startup'. It will open startup directory, every program that you put inside this directory will be activated at the startup windows.
  3. Create a vbs file inside this directory. I name this file 'printService.vbs'. Write this code inside the file
Dim WinScriptHost
Set WinScriptHost = CreateObject("WScript.Shell")
WinScriptHost.Run Chr(34) & "C:\KwickPython\printService.bat" & Chr(34), 0
Set WinScriptHost = Nothing

That's it. Try to reboot your windows. After your windows finish booting, open cmd and check it using 'netstat -tan' whether port 9100 is already in Listening state. Try to print something. It works fine in my project.

I hope this can help you....

Kamis, 22 Maret 2018

Mendapatkan Password Admin ZTE F609

Pada Umumnya Router ZTE F609 diberikan oleh Indihome ke pelanggannya. Terkadang ada pelanggan yang membutuhkan koneksi VPN untuk mengkoneksikan 2 jaringan lokalnya yang terpisah secara geografis atau memasang Server di Rumah yang ingin diakses via VPN. Sehingga Modem Router tersebut perlu di set ke bridge mode dan dikoneksikan ke router Mikrotik (Pada umumnya router Mikrotik yang digunakan).

Problem:
  1. Pada umumnya akses ke Router yang diberikan Telkom menggunakan username "user" dan password "user"
  2. Username dan password tidak memiliki hak akses sebagai "Administrator", sehingga konfigurasi jaringan WAN tidak bisa dilakukan
Solusinya dapetin username dan password dengan hak akses admin, lakukan steps berikut:
  1. Download aplikasi RouterPassView pada link berikut: www.nirsoft.net
  2. File yang didownload dalam bentuk Rar, silahkan di extract.
  3. siapkan flashdisk dan tancepin di port USB pada modem Router ZTE F609
  4. Buka halaman seperti yang ditunjukan pada gambar dibawah, dan silahkan klik "Start Backup".
     
  5. File hasil backup ada dalam directory "CfgBak" dan nama filenya "usbbak.cfg". File tersebut tidak dapat dibaca dengan menggunakan notepad. Disinilah kita perlu bantuan aplikasi RouterPassView.
  6. Silahkan buka file usbbak.cfg dengan RouterPassView dan find (CTRL+F) "userinfo". Scroll down dikit, nah ketemu deh. Bisa lihat gambar dibawah juga nih contohnya: 

How to Show Password of known Wifi connections on Windows 8 or 10

Quick post, how to show password of known wifi connections on windows 8 or 10. Someone might need this info too.

On previous windows's version, it was easier than on windows 8. Up on windows 8 we can do that through command prompt.

So these are the steps:
  1. open command prompt. Type "cmd" on search menu
  2. type "netsh wlan show profile" to show the name of known wifi connections. Pick the wifi name, that you want to show its password. I'll pick "maira" this time. 


  3. Then continue with this command "netsh wlan show profile "maira" key=clear" , the password will be shown as shown on the picture bellow. 


Minggu, 25 Februari 2018

Play youtube in Background on Android


  1. Don't use You tube app!!!!
  2. Open youtube with Chrome
  3. Request open as Destop Site
  4. Let the music on youtube playing, then open next Tab
  5. Your music might stop by now, don't worry. Look at the top left of your screen. The Volume icon should be shown. Click on it and play the music again. 
  6. Now you're good to open another App.

Selasa, 30 Januari 2018

TWAIN, Accessing Scanner via Web (Windows as client)

I need to develop a web app that should access client's scanner via web.
Since the scanner is installed in client's PC, that means we should use Javascript to do this. The next question is, can javascript access the scanner ??? Unfortunately, javascript can not do that. That means there should be a third party software that is able to provide the scanner as a service. 

There are many good software for that, but most of them are not free. After browsed a while, I finally found someone who developed this software and share it for free.


Yup, its Scan AppForWeb. I have not tried this in my web app actually, but I have tried to install it and it seems good.

So after I read the README, it uses web socket to access the scanner. The Scanner can be accessed via ws://localhost:8181.

To install the software, download Scan_App_SetUp.msi and setup.exe or just download the ScanApps.zip and extract the file. After it installed, open cmd and check netstat -an.

And here is the result:

look at the third last line, the state of port 8181 is LISTENING. It looks really good.

Next, I'll post whether the Web Scanner works or not....hope it works...

Selasa, 23 Januari 2018

codeIgniter, removing index.php in url

source : https://situsali.com/belajar-codeigniter-3-dasar-routing/

The default URL used by CI contains "index.php". This bothers some of us.
So here is how I remove the "index.php" inside the URL.


  • Make sure mod_rewrite module in Apache is already activated. This can be checked in httpd.conf. This file can be found in xampp/apache/conf/httpd.conf. Find a line with this LoadModule rewrite_module modules/mod_rewrite.so. If there is a hashtag at the beginning of the line, remove it. 
  • Restart Apache, if it is necessary 
  • Create a .htaccess file inside the CI folder, at the same level with application directory, system directory, user_guide directory and so on. 
  • Insert this code inside .htaccess: 
RewriteEngine On
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^(.*)$ index.php/$1 [L]

  • Finally, go to application/config/config.php. Set the value of $config['index_page'] to '' (blank) --> $config['index_page'] = '';

That's it

Sabtu, 20 Januari 2018

Check whether javascript function exists

if(typeof clearToday !== 'undefined'){
      clearToday();
}

above will check if function clearToday exists before the function executed.