Latest Updates

Showing posts with label electron. Show all posts
Showing posts with label electron. Show all posts

Electron Draggable Window | Ebots

July 03, 2017
•


Today we make Electron window menu bar and make it draggable..

 Make menu bar

 Find out  index.html and edit it.  add some style code.

 final out put will be


<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Hello World!</title>
<link href='https://fonts.googleapis.com/css?family=Roboto' rel='stylesheet'>
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
border: 1px solid #e7e7e7;
background-color: #f3f3f3;
-ms-overflow-style: scrollbar;
-webkit-app-region:drag;
}

li {
float: left;
font-size: 16px;
}

li a {
display: block;
color: #666;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}

li a:hover:not(.active) {
background-color: #ddd;
}

li a.active {
color: white;
background-color: #4CAF50;
}
</style>

</head>

<style>
body {
font-family: 'Roboto';font-size: 48px; font-weight: 300;
background-color: #2B2E3B; margin: 0; padding: 0;
color: #C1F4FE;
}
#svg{
margin: 200px 0 0 0;
}
</style>

<body align="center">

<ul>
<li><a href="#home">Home</a></li>

</ul>


<div id="svg"> <img src="electron.svg" alt="electron"> </div>
<p>Draggable Window</p>

</body>
</html>
here in the ui style code

-ms-overflow-style: scrollbar;
-webkit-app-region:drag;


  is used to enable dragging. Drag is enable only for menu bar.

 output screen will be like


code used in this can be download here .




READ MORE

Electron frameless window | Ebots

July 03, 2017
•


Today we make Electron window frameless. In this window body parts like toolbars are not present.

Frame:false


Find out the text in index.js 



win = new BrowserWindow({ width: 800, height: 600,frame: true,})



replace with 


win = new BrowserWindow({ width: 800, height: 600,frame: false,})




then run the electron app, you may have a window like this.



titleBarStyle Hidden

This is the macOS only alternative. It removes the titlebar but leaves the stop light buttons.


win = new BrowserWindow({ width: 800, height: 600,titleBarStyle: 'hidden',})




Download the code here.

READ MORE

Electron hello world app | Ebots

June 29, 2017
•


Electron is a framework for building desktop apps with CSS, Javascript and HTML.
Here is a five minute guide line to start with electron.

Video introduction

 


1. Installing Node.js

Install node.js. Download and install it.
2. Install electron
Open command terminal (cmd.exe for windows)
change the directory to your app folder.
enter the command









npm install electron --save-dev

3. File structure

Electron app is structured like this.

 
Hello_world/
├── package.json
├── index.js
└── index.html

Create a folder named "Hello_world" or any as your wish.

4. package.json

Inside the folder create a file named "package.json" 

{
  "name"    : "Hello_world",
  "version" : "0.1.0",
  "main"    : "index.js"
}

5. index.js

Inside the folder create a file named "index.js"  








const {app, BrowserWindow} = require('electron')
const path = require('path')
const url = require('url')

// Keep a global reference of the window object, if you don't, the window will
// be closed automatically when the JavaScript object is garbage collected.
let win

function createWindow () {
// Create the browser window.
win = new BrowserWindow({ width: 800, height: 600, frame: true, })

// and load the index.html of the app.
win.loadURL(url.format({
pathname: path.join(__dirname, 'index.html'),
protocol: 'file:',
slashes: true
}))



// Emitted when the window is closed.
win.on('closed', () => {
win = null
})
}

app.on('ready', createWindow)

// Quit when all windows are closed.
app.on('window-all-closed', () => {
if (process.platform !== 'darwin') {
app.quit()
}
})

app.on('activate', () => {
if (win === null) {
createWindow()
}
})



























































































6. index.html

Inside the folder create a file named "index.js"  

 












<!DOCTYPE html>



<html>



<head>



<meta charset="UTF-8">



<title>Hello World!</title>



<link href='https://fonts.googleapis.com/css?family=Roboto' rel='stylesheet'>



</head>



<style>



body {



font-family: 'Roboto';font-size: 48px; font-weight: 300;



background-color: #2B2E3B;  margin: 0; padding: 0;



color: #C1F4FE;







}



#svg{



margin: 200px 0 0 0;



}



</style>



<body align="center">







<div id="svg"> <img src="electron.svg" alt="electron"> </div>



<p>Hello World!</p>



</body>



</html>


























































































place the electron logo in the  folder.


7. Run Electron hello world app
Now let’s get back to the electron . command. run 









electron .





You have a window like this:


Now make your own app. You can get all the code I used here.




READ MORE
Subscribe to: Posts ( Atom )
 
Copyright © Ebots.