Cisco Remote Phone Access Tool
Article • 11/31/2019
Trying to control your cisco phone remotely? Well, look no further. This article will guide you to make your own online Cisco Remote Phone Access Tool for free.
Features
Prerequisites
Getting Started
Before we start to code we need to install and create a work envirement for ourselves.
Install NodeJS
Windows
https://nodejs.org/dist/v17.3.0/node-v17.3.0-x86.msiMac Os
https://nodejs.org/dist/v17.3.0/node-v17.3.0.pkgUbuntu
$ sudo apt update\n$ sudo apt install nodejs\n$ sudo apt install npm\n#test if properly installed\n$ node -v\n$ npm -v
Workspace
$ npm init -y\n$ npm install electron --save-dev
Downloading Images
Desktops
Download (Note: Make sure the content inside of the unziped folder is moved to the current working directory)Command Lines
curl https://bluhorse.ca/tools/cdn/remote-access.zip --output remote-access.zip\nunzip -l remote-access.zip
Edit package.json and change the content to the code below
{\n "name": "Remote Access Tool",\n "version": "1.0.0",\n "description": "",\n "main": "index.js",\n "scripts": {\n "test": "echo "Error: no test specified" && exit 1",\n "start": "electron .",\n "build": "electron-packager ."\n },\n "keywords": [],\n "author": "",\n "license": "ISC",\n "devDependencies": {\n "electron": "^16.0.5"\n },\n "dependencies": {\n "electron-packager": "^15.4.0",\n "request": "^2.88.2"\n }\n}
Now create a few files: index.js, main.js, style.css, index.html
After your done doing everything your file structure should look like:
\n-node_modules (folder)\n-package.json\n-package-lock.json\n-index.js\n-main.js\n-index.html\n-style.css
Starting to code
Files
index.js
const { app, BrowserWindow, dialog} = require('electron');\nconst createWindow = () => {\n const mainWindow = new BrowserWindow({icon: "logo.png", width: 1400, height: 900, webPreferences: { enableRemoteModule: true, nodeIntegration: true, contextIsolation: false }, autoHideMenuBar: true, frame: false});\n mainWindow.loadFile('index.html');\n}\n\napp.whenReady().then(() => {\n createWindow();\n app.on('activate', () => {\n if (BrowserWindow.getAllWindows().length === 0) createWindow();\n })\n});\n\napp.on('window-all-closed', () => {\n if (process.platform !== 'darwin') app.quit();\n});\n
The index.js file is the one who starts the application.
When index.js is run its requires app and BrowserWindow from the module electron. Then the function createWindow is defined which sets the height, width, frame, node integration, and the main file. When the app is ready it launches the window itself.
index.html
<html lang="en">\n\n<head>\n <meta charset="UTF-8">\n <meta http-equiv="X-UA-Compatible" content="IE=edge">\n <meta name="viewport" content="width=device-width, initial-scale=1.0">\n <meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">\n <link rel="stylesheet" href="style.css">\n <title>Cisco Phone Remote Access</title>\n</head>\n\n<body>\n <div style="display: block;" id="box" class="box">\n <img class="img" src="8851_Phone.jpg">\n <div id="frame"></div>\n <div id="top-phone">\n <button onclick="window.close()">Exit</button>\n </div>\n <div id="vols">\n <button onclick="clickbutton('Headset')" style=" position: absolute; top: 3px; left: 10px; height: 25px; width: 45px; background: transparent; border: none; "></button>\n <button onclick="clickbutton('Speaker')" style=" position: absolute; top: 3px; right: 10px; height: 25px; width: 45px; background: transparent; border: none; "></button>\n <button onclick="clickbutton('Mute')" style=" position: absolute; bottom: 3px; right: 37.5px; height: 25px; width: 45px; border: none; background: transparent; "></button>\n </div>\n <div id="apps">\n <button onclick="clickbutton('Applications')" style=" background: none; border: none; width: 42.5px; height: 23px; position: absolute; top: 40px; left: 13px; "></button>\n <button onclick="clickbutton('Directories')" style=" background: none; border: none; width: 42.5px; height: 23px; position: absolute; top: 40px; right: 13px; "></button>\n <button onclick="clickbutton('Messages')" style=" background: none; border: none; width: 42.5px; height: 23px; position: absolute; top: 5px; right: 40px; "></button>\n </div>\n <div id="navs">\n <button onclick="clickbutton('NavUp')" style="position: absolute;background: transparent;border: none;top: 5;width: 100%;height: 15%;"></button>\n <button onclick="clickbutton('NavSelect')" style="position: absolute;background: transparent;border: none;top: 25%;left: 25%;width: 50%;height: 50%;"></button><button onclick="clickbutton('NavDwn')" style="position: absolute;bottom: 5;width: 100%;height: 15%;border: none;background: transparent;"></button>\n <button onclick="clickbutton('NavLeft')" style="position: absolute;top: calc(5px + 25%);background: transparent;border: none;width: 22%;height: 36%;"></button>\n <button onclick="clickbutton('NavRight')" style="position: absolute;top: calc(5px + 25%);border: none;background: transparent;right: 0px;width: 22%;height: 36%;"></button>\n </div>\n\n <div id="softs">\n <button onclick="clickbutton('Soft1')" style="cursor: pointer; background: transparent; width: 31px; top: 7px; left: 99px; border: none; position: absolute; height: 20px; "></button>\n <button onclick="clickbutton('Soft2')" style="cursor: pointer;background: transparent;width: 31px;top: 7px;left: 175px;border: none;position: absolute;height: 20px;"></button>\n <button onclick="clickbutton('Soft3')" style="cursor: pointer;background: transparent;width: 31px;top: 7px;left: 251px;border: none;position: absolute;height: 20px;"></button>\n <button onclick="clickbutton('Soft4')" style="cursor: pointer;background: transparent;width: 31px;top: 7px;left: 327px;border: none;position: absolute;height: 20px;"></button>\n </div>\n <div id="keypad">\n <button onclick="clickbutton('KeyPad1')" style="cursor: pointer; top: 7px; left: 24px; position: absolute; width: 50px; background: transparent; border: none; height: 40px; "></button>\n <button onclick="clickbutton('KeyPad2')" style="cursor: pointer; top: 7px; left: 79px; position: absolute; width: 50px; background: transparent; border: none; height: 40px; "></button>\n <button onclick="clickbutton('KeyPad3')" style="cursor: pointer; top: 7px; left: 135px; position: absolute; width: 50px; background: transparent; border: none; height: 40px; "></button>\n <button onclick="clickbutton('KeyPad4')" style="cursor: pointer; top: 55px; left: 22px; position: absolute; width: 50px; background: transparent; border: none; height: 40px; "></button>\n <button onclick="clickbutton('KeyPad5')" style="cursor: pointer; top: 55px; left: 79px; position: absolute; width: 50px; background: transparent; border: none; height: 40px; "></button>\n <button onclick="clickbutton('KeyPad6')" style="cursor: pointer; top: 55px; left: 135px; position: absolute; width: 50px; background: transparent; border: none; height: 40px; "></button>\n <button onclick="clickbutton('KeyPad7')" style="cursor: pointer; top: 103px; left: 22px; position: absolute; width: 50px; background: transparent; border: none; height: 40px; "></button>\n <button onclick="clickbutton('KeyPad8')" style="cursor: pointer; top: 103px; left: 79px; position: absolute; width: 50px; background: transparent; border: none; height: 40px; "></button>\n <button onclick="clickbutton('KeyPad9')" style="cursor: pointer; top: 103px; left: 135px; position: absolute; width: 50px; background: transparent; border: none; height: 40px; "></button>\n <button onclick="clickbutton('KeyPad0')" style="cursor: pointer; top: 151px; left: 79px; position: absolute; width: 50px; background: transparent; border: none; height: 40px; "></button>\n </div>\n </div>\n <script src="main.js"></script>\n</body>\n\n</html>
The html is just the phone, phone frame and the buttons. You might notice the buttons have a onclick which is defined as clickbutton. Each phone button runs clickbutton and passes the parameter of the button name the user has clicked. We'll go in more detail of clickbutton in the main.js file
