Moves examples to a separate repo and removes dependency on bindings node module
This commit is contained in:
Atul R
parent
4bcda3a4f0
commit
49873c01e1
12
README.md
12
README.md
@ -13,9 +13,9 @@ Visit: https://nodegui.github.io/nodegui for docs.
|
||||
## How does it look?
|
||||
|
||||
<div style="display:inline; margin: 0 auto;">
|
||||
<img alt="demo_linux" src="https://github.com/nodegui/nodegui/raw/master/examples/calculator/calculator_linux.png" height="280" />
|
||||
<img alt="demo_win" src="https://github.com/nodegui/nodegui/raw/master/examples/calculator/calculator_win.jpg" height="280" />
|
||||
<img alt="demo_mac" src="https://github.com/nodegui/nodegui/raw/master/examples/calculator/calculator_mac.png" height="280" />
|
||||
<img alt="demo_linux" src="https://github.com/nodegui/examples/raw/master/nodegui/calculator/calculator_linux.png" height="280" />
|
||||
<img alt="demo_win" src="https://github.com/nodegui/examples/raw/master/nodegui/calculator/calculator_win.jpg" height="280" />
|
||||
<img alt="demo_mac" src="https://github.com/nodegui/examples/raw/master/nodegui/calculator/calculator_mac.png" height="280" />
|
||||
</div>
|
||||
|
||||
<div style="display:inline; margin: 0 auto;"><img alt="kitchen" src="https://github.com/nodegui/nodegui/raw/master/extras/assets/kitchen.png" height="280" /><img alt="demo_mac" src="https://github.com/nodegui/react-nodegui/raw/master/examples/weather-app-widget/weather_widget_mac.png" height="280" /><img alt="demo_win" src="https://github.com/nodegui/react-nodegui/raw/master/examples/image-view/image_view_win.jpg" height="280" />
|
||||
@ -23,9 +23,11 @@ Visit: https://nodegui.github.io/nodegui for docs.
|
||||
|
||||
**More screenshots?**
|
||||
|
||||
[See examples](https://github.com/nodegui/nodegui/tree/master/examples/)
|
||||
### More Examples:
|
||||
|
||||
[See React based examples](https://github.com/nodegui/react-nodegui/tree/master/examples/)
|
||||
https://github.com/nodegui/examples
|
||||
|
||||
---
|
||||
|
||||
## Features
|
||||
|
||||
|
||||
7
examples/README.md
Normal file
7
examples/README.md
Normal file
@ -0,0 +1,7 @@
|
||||
# Examples
|
||||
|
||||
Examples have now moved to a repo of their own
|
||||
|
||||
They are all available at:
|
||||
|
||||
https://github.com/nodegui/examples
|
||||
@ -1,23 +0,0 @@
|
||||
# Calculator app
|
||||
|
||||
This example showcases how to build a basic calculator clone.
|
||||
|
||||
### Screenshots
|
||||
|
||||
**Linux**
|
||||
|
||||
<img alt="demo_linux" src="https://github.com/nodegui/nodegui/raw/master/examples/calculator/calculator_linux.png" height="400" />
|
||||
|
||||
**Windows**
|
||||
|
||||
<img alt="demo_win" src="https://github.com/nodegui/nodegui/raw/master/examples/calculator/calculator_win.jpg" height="400" />
|
||||
|
||||
**Mac:**
|
||||
|
||||
<img alt="demo_mac" src="https://github.com/nodegui/nodegui/raw/master/examples/calculator/calculator_mac.png" height="400" />
|
||||
|
||||
To run the demo:
|
||||
|
||||
1. `yarn build`
|
||||
|
||||
2. `yarn qode dist/examples/calculator/index.js`
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 16 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 68 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 29 KiB |
@ -1,311 +0,0 @@
|
||||
import { QMainWindow } from "../../src/lib/QtWidgets/QMainWindow";
|
||||
import { QWidget } from "../../src/lib/QtGui/QWidget";
|
||||
import { FlexLayout } from "../../src/lib/core/FlexLayout";
|
||||
import {
|
||||
QPushButton,
|
||||
QPushButtonEvents
|
||||
} from "../../src/lib/QtWidgets/QPushButton";
|
||||
import { QLabel } from "../../src/lib/QtWidgets/QLabel";
|
||||
import { BaseWidgetEvents } from "../../src/lib/core/EventWidget";
|
||||
import { QKeyEvent } from "../../src/lib/QtGui/QEvent/QKeyEvent";
|
||||
|
||||
const globals = global as any;
|
||||
|
||||
// ===============
|
||||
// UI AND DESIGN
|
||||
// ===============
|
||||
const getButton = (
|
||||
label: string,
|
||||
value: number | string,
|
||||
type: "value" | "command"
|
||||
) => {
|
||||
const button = new QPushButton();
|
||||
button.setText(label);
|
||||
button.setObjectName(`btn${value}`);
|
||||
button.addEventListener(QPushButtonEvents.clicked, () => {
|
||||
onBtnClick(value, type);
|
||||
});
|
||||
return {
|
||||
ui: button,
|
||||
value,
|
||||
type
|
||||
};
|
||||
};
|
||||
|
||||
// Main Window
|
||||
const win = new QMainWindow();
|
||||
win.resize(230, 300);
|
||||
|
||||
// Root view
|
||||
const rootView = new QWidget();
|
||||
win.addEventListener(BaseWidgetEvents.KeyRelease, nativeEvent => {
|
||||
const keyEvt = new QKeyEvent(nativeEvent);
|
||||
const text = keyEvt.text();
|
||||
const isNotNumber = isNaN(parseInt(text));
|
||||
onBtnClick(text, isNotNumber ? "command" : "value");
|
||||
});
|
||||
rootView.setObjectName("rootView"); //This is like ids in web world
|
||||
win.setCentralWidget(rootView);
|
||||
const rootStyleSheet = `
|
||||
* {
|
||||
font-size: 20px;
|
||||
color: white;
|
||||
}
|
||||
|
||||
QPushButton {
|
||||
min-width: '25%';
|
||||
border: 1px solid black;
|
||||
}
|
||||
|
||||
QPushButton:pressed {
|
||||
background: grey;
|
||||
}
|
||||
|
||||
#rootView {
|
||||
flex: 1;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
#btnAC {
|
||||
min-width: '25%';
|
||||
border-right: 2px solid black;
|
||||
}
|
||||
|
||||
#resultText {
|
||||
flex: 1;
|
||||
qproperty-alignment: 'AlignRight|AlignVCenter';
|
||||
padding-right: 5px;
|
||||
font-size: 40px;
|
||||
}
|
||||
|
||||
#row0,#row1,#row2,#row3,#row4 {
|
||||
flex: 1;
|
||||
align-items: stretch;
|
||||
justify-content: space-between;
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
#row0 * {
|
||||
background: #1E1E1E;
|
||||
}
|
||||
|
||||
#row0 QPushButton:pressed {
|
||||
background: grey;
|
||||
}
|
||||
|
||||
#row1 QPushButton {
|
||||
background: #2E2E2E;
|
||||
}
|
||||
|
||||
#row1 QPushButton:pressed {
|
||||
background: grey;
|
||||
}
|
||||
|
||||
|
||||
#row2 QPushButton, #row2 QPushButton, #row3 QPushButton, #row4 QPushButton {
|
||||
background: #4B4B4B;
|
||||
}
|
||||
|
||||
#row2 QPushButton:pressed, #row2 QPushButton:pressed, #row3 QPushButton:pressed, #row4 QPushButton:pressed {
|
||||
background: grey;
|
||||
}
|
||||
`;
|
||||
|
||||
const operatorStyleSheet = `
|
||||
QPushButton {
|
||||
background: #FD8D0E;
|
||||
}
|
||||
|
||||
QPushButton:pressed {
|
||||
background: grey;
|
||||
}
|
||||
`;
|
||||
|
||||
rootView.setStyleSheet(rootStyleSheet);
|
||||
const rootViewFlexLayout = new FlexLayout();
|
||||
rootViewFlexLayout.setFlexNode(rootView.getFlexNode());
|
||||
rootView.setLayout(rootViewFlexLayout);
|
||||
|
||||
// Top Row
|
||||
const btnClear = getButton("AC", "AC", "command");
|
||||
const resultText = new QLabel();
|
||||
resultText.setObjectName("resultText");
|
||||
resultText.setText(0);
|
||||
const row0 = new QWidget();
|
||||
row0.setObjectName("row0");
|
||||
|
||||
const row0Layout = new FlexLayout();
|
||||
row0Layout.setFlexNode(row0.getFlexNode());
|
||||
row0.setLayout(row0Layout);
|
||||
row0Layout.addWidget(btnClear.ui, btnClear.ui.getFlexNode());
|
||||
row0Layout.addWidget(resultText, resultText.getFlexNode());
|
||||
|
||||
// First Row
|
||||
const btn7 = getButton("7", 7, "value");
|
||||
const btn8 = getButton("8", 8, "value");
|
||||
const btn9 = getButton("9", 9, "value");
|
||||
const btnDivide = getButton("/", "/", "command");
|
||||
btnDivide.ui.setStyleSheet(operatorStyleSheet);
|
||||
const row1 = new QWidget();
|
||||
row1.setObjectName("row1");
|
||||
const row1Layout = new FlexLayout();
|
||||
row1Layout.setFlexNode(row1.getFlexNode());
|
||||
row1Layout.addWidget(btn7.ui, btn7.ui.getFlexNode());
|
||||
row1Layout.addWidget(btn8.ui, btn8.ui.getFlexNode());
|
||||
row1Layout.addWidget(btn9.ui, btn9.ui.getFlexNode());
|
||||
row1Layout.addWidget(btnDivide.ui, btnDivide.ui.getFlexNode());
|
||||
row1.setLayout(row1Layout);
|
||||
|
||||
// Second Row
|
||||
const btn4 = getButton("4", 4, "value");
|
||||
const btn5 = getButton("5", 5, "value");
|
||||
const btn6 = getButton("6", 6, "value");
|
||||
const btnMultiply = getButton("x", "*", "command");
|
||||
btnMultiply.ui.setStyleSheet(operatorStyleSheet);
|
||||
const row2 = new QWidget();
|
||||
row2.setObjectName("row2");
|
||||
const row2Layout = new FlexLayout();
|
||||
row2Layout.setFlexNode(row2.getFlexNode());
|
||||
row2Layout.addWidget(btn4.ui, btn4.ui.getFlexNode());
|
||||
row2Layout.addWidget(btn5.ui, btn5.ui.getFlexNode());
|
||||
row2Layout.addWidget(btn6.ui, btn6.ui.getFlexNode());
|
||||
row2Layout.addWidget(btnMultiply.ui, btnMultiply.ui.getFlexNode());
|
||||
row2.setLayout(row2Layout);
|
||||
|
||||
// Third Row
|
||||
const btn1 = getButton("1", 1, "value");
|
||||
const btn2 = getButton("2", 2, "value");
|
||||
const btn3 = getButton("3", 3, "value");
|
||||
const btnMinus = getButton("-", "-", "command");
|
||||
btnMinus.ui.setStyleSheet(operatorStyleSheet);
|
||||
|
||||
const row3 = new QWidget();
|
||||
row3.setObjectName("row3");
|
||||
|
||||
const row3Layout = new FlexLayout();
|
||||
row3Layout.setFlexNode(row3.getFlexNode());
|
||||
row3Layout.addWidget(btn1.ui, btn1.ui.getFlexNode());
|
||||
row3Layout.addWidget(btn2.ui, btn2.ui.getFlexNode());
|
||||
row3Layout.addWidget(btn3.ui, btn3.ui.getFlexNode());
|
||||
row3Layout.addWidget(btnMinus.ui, btnMinus.ui.getFlexNode());
|
||||
row3.setLayout(row3Layout);
|
||||
|
||||
// Fourth Row
|
||||
const btn0 = getButton("0", 0, "value");
|
||||
const btnDot = getButton(".", ".", "command");
|
||||
const btnEquals = getButton("=", "=", "command");
|
||||
const btnPlus = getButton("+", "+", "command");
|
||||
btnPlus.ui.setStyleSheet(operatorStyleSheet);
|
||||
|
||||
const row4 = new QWidget();
|
||||
row4.setObjectName("row4");
|
||||
const row4Layout = new FlexLayout();
|
||||
row4Layout.setFlexNode(row4.getFlexNode());
|
||||
row4Layout.addWidget(btn0.ui, btn0.ui.getFlexNode());
|
||||
row4Layout.addWidget(btnDot.ui, btnDot.ui.getFlexNode());
|
||||
row4Layout.addWidget(btnEquals.ui, btnEquals.ui.getFlexNode());
|
||||
row4Layout.addWidget(btnPlus.ui, btnPlus.ui.getFlexNode());
|
||||
row4.setLayout(row4Layout);
|
||||
|
||||
// Add to root view
|
||||
rootViewFlexLayout.addWidget(row0, row0.getFlexNode());
|
||||
rootViewFlexLayout.addWidget(row1, row1.getFlexNode());
|
||||
rootViewFlexLayout.addWidget(row2, row2.getFlexNode());
|
||||
rootViewFlexLayout.addWidget(row3, row3.getFlexNode());
|
||||
rootViewFlexLayout.addWidget(row4, row4.getFlexNode());
|
||||
|
||||
win.show();
|
||||
|
||||
globals.win = win; //to keep gc from collecting ui widgets
|
||||
|
||||
// ========================
|
||||
// CALC APP LOGIC - LOGIC
|
||||
// ========================
|
||||
// This is probably the worst calculator logic ever but the purpose of demo is to showcase the UI and not the js logic.
|
||||
// Read ahead of this line at your own risk.
|
||||
|
||||
let displayText = "0";
|
||||
let currentInputString = "";
|
||||
let total = 0;
|
||||
let previousOperator = "+";
|
||||
|
||||
var onBtnClick = (value: number | string, type: "value" | "command") => {
|
||||
if (
|
||||
![
|
||||
"0",
|
||||
"1",
|
||||
"2",
|
||||
"3",
|
||||
"4",
|
||||
"5",
|
||||
"6",
|
||||
"7",
|
||||
"8",
|
||||
"9",
|
||||
"+",
|
||||
"-",
|
||||
"/",
|
||||
"*",
|
||||
"=",
|
||||
"AC"
|
||||
].includes(`${value}`)
|
||||
) {
|
||||
return;
|
||||
}
|
||||
if (type === "value" || value === ".") {
|
||||
currentInputString += value;
|
||||
displayText = currentInputString;
|
||||
} else {
|
||||
const currentInput = parseFloat(currentInputString || "0");
|
||||
if (!previousOperator) {
|
||||
if (currentInputString) {
|
||||
total = currentInput;
|
||||
}
|
||||
}
|
||||
if (!currentInputString && value === "=") {
|
||||
previousOperator = "+";
|
||||
}
|
||||
switch (previousOperator) {
|
||||
case "+": {
|
||||
total += currentInput;
|
||||
break;
|
||||
}
|
||||
case "-": {
|
||||
total -= currentInput;
|
||||
break;
|
||||
}
|
||||
case "*": {
|
||||
total *= currentInput;
|
||||
break;
|
||||
}
|
||||
case "/": {
|
||||
total /= currentInput;
|
||||
break;
|
||||
}
|
||||
}
|
||||
currentInputString = "";
|
||||
|
||||
if (value === "=") {
|
||||
displayText = String(total);
|
||||
previousOperator = "";
|
||||
} else {
|
||||
previousOperator = String(value);
|
||||
displayText = previousOperator;
|
||||
}
|
||||
}
|
||||
|
||||
if (value === "AC") {
|
||||
displayText = "0";
|
||||
currentInputString = "";
|
||||
total = 0;
|
||||
previousOperator = "+";
|
||||
}
|
||||
|
||||
if (Number.isNaN(total)) {
|
||||
total = 0;
|
||||
displayText = "Error";
|
||||
}
|
||||
|
||||
// SET THE FINAL TEXT
|
||||
resultText.setText(displayText);
|
||||
};
|
||||
13
package-lock.json
generated
13
package-lock.json
generated
@ -195,14 +195,6 @@
|
||||
"tweetnacl": "^0.14.3"
|
||||
}
|
||||
},
|
||||
"bindings": {
|
||||
"version": "1.5.0",
|
||||
"resolved": "https://registry.npmjs.org/bindings/-/bindings-1.5.0.tgz",
|
||||
"integrity": "sha512-p2q/t/mhvuOj/UeLlV6566GD/guowlr0hHxClI0W9m7MWYkL1F0hLo+0Aexs9HSPCtR1SXQ0TD3MMKrXZajbiQ==",
|
||||
"requires": {
|
||||
"file-uri-to-path": "1.0.0"
|
||||
}
|
||||
},
|
||||
"boxen": {
|
||||
"version": "1.3.0",
|
||||
"resolved": "https://registry.npmjs.org/boxen/-/boxen-1.3.0.tgz",
|
||||
@ -637,11 +629,6 @@
|
||||
"pend": "~1.2.0"
|
||||
}
|
||||
},
|
||||
"file-uri-to-path": {
|
||||
"version": "1.0.0",
|
||||
"resolved": "https://registry.npmjs.org/file-uri-to-path/-/file-uri-to-path-1.0.0.tgz",
|
||||
"integrity": "sha512-0Zt+s3L7Vf1biwWZ29aARiVYLx7iMGnEUl9x33fbB/j3jR81u/O2LbqK+Bm1CDSNDKVtJ/YjwY7TUd5SkeLQLw=="
|
||||
},
|
||||
"forever-agent": {
|
||||
"version": "0.6.1",
|
||||
"resolved": "https://registry.npmjs.org/forever-agent/-/forever-agent-0.6.1.tgz",
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
"name": "@nodegui/nodegui",
|
||||
"version": "0.1.3",
|
||||
"description": "A cross platform library to build native desktop apps.",
|
||||
"main": "dist/src/lib/index.js",
|
||||
"main": "dist/index.js",
|
||||
"files": [
|
||||
"dist",
|
||||
"config",
|
||||
@ -18,8 +18,7 @@
|
||||
"dev": "npm run build && qode dist/demo.js",
|
||||
"install": "npm -v",
|
||||
"postinstall": "npm run build:addon",
|
||||
"build": "npm run build:lib && npm run build:addon",
|
||||
"build:lib": "tsc",
|
||||
"build": "tsc && npm run build:addon",
|
||||
"build:addon": "node-gyp -j 8 configure build",
|
||||
"rebuild:addon": "node-gyp -j 8 rebuild",
|
||||
"automoc": "node ./scripts/automoc.js",
|
||||
@ -27,7 +26,6 @@
|
||||
},
|
||||
"dependencies": {
|
||||
"@nodegui/qode": "^1.0.2",
|
||||
"bindings": "^1.5.0",
|
||||
"cuid": "^2.1.6",
|
||||
"node-addon-api": "^1.6.3",
|
||||
"node-gyp": "^4.0.0",
|
||||
|
||||
@ -8,7 +8,7 @@ import {
|
||||
QRadioButton,
|
||||
FlexLayout,
|
||||
QWidget
|
||||
} from "./src/lib/index";
|
||||
} from "./index";
|
||||
|
||||
const win = new QMainWindow();
|
||||
|
||||
23
src/index.ts
Normal file
23
src/index.ts
Normal file
@ -0,0 +1,23 @@
|
||||
// enums
|
||||
export { AspectRatioMode, WidgetAttribute, WindowType } from "./lib/QtEnums";
|
||||
export { QApplication } from "./lib/QtGui/QApplication";
|
||||
export { QWidget, QWidgetEvents } from "./lib/QtGui/QWidget";
|
||||
export { QPixmap } from "./lib/QtGui/QPixmap";
|
||||
// Abstract:
|
||||
export { NodeWidget } from "./lib/QtGui/QWidget";
|
||||
export { NodeLayout } from "./lib/QtWidgets/QLayout";
|
||||
// Widgets:
|
||||
export { QCheckBox, QCheckBoxEvents } from "./lib/QtWidgets/QCheckBox";
|
||||
export { QLabel, QLabelEvents } from "./lib/QtWidgets/QLabel";
|
||||
export { QLineEdit, QLineEditEvents } from "./lib/QtWidgets/QLineEdit";
|
||||
export { QMainWindow, QMainWindowEvents } from "./lib/QtWidgets/QMainWindow";
|
||||
export { QProgressBar, QProgressBarEvents } from "./lib/QtWidgets/QProgressBar";
|
||||
export { QPushButton, QPushButtonEvents } from "./lib/QtWidgets/QPushButton";
|
||||
export { QRadioButton, QRadioButtonEvents } from "./lib/QtWidgets/QRadioButton";
|
||||
// Layouts:
|
||||
export { QGridLayout } from "./lib/QtWidgets/QGridLayout";
|
||||
export { FlexLayout } from "./lib/core/FlexLayout";
|
||||
// Events : Maybe a separate module ?
|
||||
export { QKeyEvent } from "./lib/QtGui/QEvent/QKeyEvent";
|
||||
export { NativeEvent } from "./lib/core/EventWidget";
|
||||
export { StyleSheet } from "./lib/core/Style/StyleSheet";
|
||||
@ -1,4 +1,3 @@
|
||||
import bindings from "bindings";
|
||||
const addon = bindings("qtnode");
|
||||
const addon = require("../../../build/Release/qtnode.node");
|
||||
|
||||
export default addon;
|
||||
|
||||
@ -1,23 +0,0 @@
|
||||
// enums
|
||||
export { AspectRatioMode, WidgetAttribute, WindowType } from "./QtEnums";
|
||||
export { QApplication } from "./QtGui/QApplication";
|
||||
export { QWidget, QWidgetEvents } from "./QtGui/QWidget";
|
||||
export { QPixmap } from "./QtGui/QPixmap";
|
||||
// Abstract:
|
||||
export { NodeWidget } from "./QtGui/QWidget";
|
||||
export { NodeLayout } from "./QtWidgets/QLayout";
|
||||
// Widgets:
|
||||
export { QCheckBox, QCheckBoxEvents } from "./QtWidgets/QCheckBox";
|
||||
export { QLabel, QLabelEvents } from "./QtWidgets/QLabel";
|
||||
export { QLineEdit, QLineEditEvents } from "./QtWidgets/QLineEdit";
|
||||
export { QMainWindow, QMainWindowEvents } from "./QtWidgets/QMainWindow";
|
||||
export { QProgressBar, QProgressBarEvents } from "./QtWidgets/QProgressBar";
|
||||
export { QPushButton, QPushButtonEvents } from "./QtWidgets/QPushButton";
|
||||
export { QRadioButton, QRadioButtonEvents } from "./QtWidgets/QRadioButton";
|
||||
// Layouts:
|
||||
export { QGridLayout } from "./QtWidgets/QGridLayout";
|
||||
export { FlexLayout } from "./core/FlexLayout";
|
||||
// Events : Maybe a separate module ?
|
||||
export { QKeyEvent } from "./QtGui/QEvent/QKeyEvent";
|
||||
export { NativeEvent } from "./core/EventWidget";
|
||||
export { StyleSheet } from "./core/Style/StyleSheet";
|
||||
@ -14,8 +14,8 @@
|
||||
"outDir": "./dist" /* Redirect output structure to the directory. */,
|
||||
// "rootDir": "./", /* Specify the root directory of input files. Use to control the output directory structure with --outDir. */
|
||||
// "composite": true, /* Enable project compilation */
|
||||
"incremental": true, /* Enable incremental compilation */
|
||||
"tsBuildInfoFile": ".cache/tsconfig.tsbuildinfo", /* Specify file to store incremental compilation information */
|
||||
// "incremental": true, /* Enable incremental compilation */
|
||||
// "tsBuildInfoFile": ".cache/tsconfig.tsbuildinfo" /* Specify file to store incremental compilation information */,
|
||||
// "removeComments": true, /* Do not emit comments to output. */
|
||||
// "noEmit": true, /* Do not emit outputs. */
|
||||
// "importHelpers": true, /* Import emit helpers from 'tslib'. */
|
||||
@ -60,5 +60,5 @@
|
||||
// "emitDecoratorMetadata": true, /* Enables experimental support for emitting type metadata for decorators. */
|
||||
"resolveJsonModule": true
|
||||
},
|
||||
"include": ["."]
|
||||
"include": ["src"]
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user