├── .gitignore ├── AUTHORS ├── LICENSE ├── README.md ├── console.js ├── index.html ├── main.js ├── package.json ├── qmlweb-viewer.js ├── renderer.js └── usage.js /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules/ 2 | coverage/ 3 | tmp/ 4 | .idea/ 5 | *~ 6 | *.bak 7 | *.log 8 | .*.swp 9 | .*.swo 10 | *.kdev4 11 | *kate-swp 12 | .arcconfig 13 | .project 14 | -------------------------------------------------------------------------------- /AUTHORS: -------------------------------------------------------------------------------- 1 | # Authors ordered by first contribution. 2 | 3 | Сковорода Никита Андреевич 4 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | QmlWeb-Viewer is licensed under the MIT license, as follows: 2 | 3 | """ 4 | MIT License 5 | 6 | Copyright (c) 2016 QmlWeb contributors 7 | 8 | Permission is hereby granted, free of charge, to any person obtaining a copy of 9 | this software and associated documentation files (the "Software"), to deal in 10 | the Software without restriction, including without limitation the rights to 11 | use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of 12 | the Software, and to permit persons to whom the Software is furnished to do so, 13 | subject to the following conditions: 14 | 15 | The above copyright notice and this permission notice shall be included in all 16 | copies or substantial portions of the Software. 17 | 18 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 19 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS 20 | FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR 21 | COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER 22 | IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN 23 | CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. 24 | """ 25 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # QmlWeb-based QML viewer 2 | 3 | [![Join the chat at https://gitter.im/qmlweb/qmlweb](https://badges.gitter.im/qmlweb/qmlweb.svg)](https://gitter.im/qmlweb/qmlweb?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge) 4 | 5 | [![npm](https://img.shields.io/npm/v/qmlweb-viewer.svg)](https://www.npmjs.com/package/qmlweb-viewer) 6 | [![GitHub tag](https://img.shields.io/github/tag/qmlweb/qmlweb-viewer.svg)](https://github.com/qmlweb/qmlweb-viewer/releases) 7 | 8 | This is a QmlWeb-based GUI viewer for `*.qml` files. 9 | 10 | Based on [QmlWeb](https://github.com/qmlweb/qmlweb) and [Electron](https://github.com/electron/electron). 11 | 12 | This is not a replacement to Qt QML by any means and should not be used in 13 | production. 14 | 15 | The only purpose of this tool is to test QmlWeb and visually compare the 16 | rendered results with Qt QML output (e.g. `qmlscene`). 17 | 18 | ## Installation and usage 19 | 20 | ### Prerequisites 21 | 22 | You need Node.js with npm to install and run qmlweb-viewer. 23 | 24 | See [Installing Node.js via package manager](https://nodejs.org/en/download/package-manager/) 25 | or [Node Version Manager](http://nvm.sh) for more detailed instructions on that. 26 | 27 | ### Local install (to a subdirectory) 28 | 29 | ```sh 30 | npm i qmlweb-viewer 31 | ./node_modules/.bin/qmlweb-viewer path-to-file.qml 32 | ``` 33 | 34 | This way, `qmlweb-viewer` will be installed into the `node_modules` 35 | subdirectory. 36 | 37 | ### Global install 38 | 39 | See [Fixing npm permissions](https://docs.npmjs.com/getting-started/fixing-npm-permissions) 40 | to fix permissions issues, running `npm` as root is not recommended. 41 | 42 | ```sh 43 | npm install -g qmlweb-viewer 44 | qmlweb-viewer path-to-file.qml 45 | ``` 46 | 47 | This way, you can use `qmlweb-viewer` from any directory, it will be added into 48 | your `PATH`. 49 | 50 | ## Debugging 51 | 52 | Launch with the `--debug` flag, e.g. `qmlweb-viewer --debug path-to-file.qml` 53 | to open a Developer Tools window alongside with your QML file. 54 | 55 | ### Using with a development version of QmlWeb 56 | 57 | To use with QmlWeb from the `master` branch (or any other non-release version), 58 | follow the [installation](#installation-and-usage) steps, then remove the 59 | `./node_modules/qmlweb/lib` directory and replace it with a symlink to a `./lib` 60 | directory of your development QmlWeb version. 61 | 62 | ## License 63 | 64 | QmlWeb-Viewer is licensed under the MIT license, see 65 | [LICENSE](https://github.com/qmlweb/qmlweb-parser/blob/master/LICENSE). 66 | -------------------------------------------------------------------------------- /console.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | const electron = require('electron'); 4 | 5 | const _console = console; 6 | console = {}; 7 | [ 'assert', 'count', 'dir', 'dirxml', 'error', 8 | 'group', 'groupCollapsed', 'groupEnd', 9 | 'info', 'log', 'profile', 'profileEnd', 'table', 10 | 'time', 'timeEnd', 'timeStamp', 'trace', 'warn' 11 | ].forEach(method => { 12 | console[method] = function(...args) { 13 | _console[method].apply(_console, args); 14 | try { 15 | electron.ipcRenderer.send('console', {method: method, args: args}); 16 | } catch (e) {} 17 | }; 18 | }); 19 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | QmlWeb 5 | 6 | 7 | 8 | 16 | 17 | -------------------------------------------------------------------------------- /main.js: -------------------------------------------------------------------------------- 1 | const electron = require('electron'); 2 | const path = require('path'); 3 | const minimist = require('minimist'); 4 | const usage = require('./usage'); 5 | const ipcMain = electron.ipcMain; 6 | 7 | const argv = minimist(process.argv.slice(2), { 8 | boolean: true 9 | }); 10 | 11 | if (argv.help) { 12 | console.error(usage); 13 | process.exit(0); 14 | } 15 | 16 | let argument = argv._[0]; 17 | if (!argument) { 18 | console.error('Error: No filename specified!'); 19 | process.exit(1); 20 | } 21 | argument = path.resolve(argument); 22 | 23 | global.qmlwebViewer = { 24 | argument 25 | }; 26 | 27 | const app = electron.app; 28 | const BrowserWindow = electron.BrowserWindow; 29 | let mainWindow; 30 | 31 | function createWindow () { 32 | mainWindow = new BrowserWindow({ 33 | width: 20, 34 | height: 20, 35 | fullscreen: argv.fullscreen 36 | }); 37 | mainWindow.setMenu(null); 38 | if (argv.maximized) { 39 | mainWindow.maximize(); 40 | } 41 | mainWindow.loadURL(`file://${__dirname}/index.html`); 42 | if (argv.debug) { 43 | mainWindow.webContents.openDevTools({ detach: true }); 44 | } 45 | mainWindow.on('closed', () => { mainWindow = null }); 46 | } 47 | 48 | ipcMain.on('console', (event, arg) => { 49 | try { 50 | console[arg.method].apply(console, arg.args); 51 | } catch (e) {} 52 | }); 53 | 54 | app.on('ready', createWindow) 55 | 56 | app.on('window-all-closed', () => { 57 | // On OS X it is common for applications and their menu bar 58 | // to stay active until the user quits explicitly with Cmd + Q 59 | if (process.platform !== 'darwin') { 60 | app.quit() 61 | } 62 | }); 63 | 64 | app.on('activate', () => { 65 | // On OS X it's common to re-create a window in the app when the 66 | // dock icon is clicked and there are no other windows open. 67 | if (mainWindow === null) { 68 | createWindow() 69 | } 70 | }); 71 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "qmlweb-viewer", 3 | "version": "0.0.5", 4 | "description": "Bringing QmlWeb to your desktop", 5 | "license": "MIT", 6 | "repository": "qmlweb/qmlweb-viewer", 7 | "main": "main.js", 8 | "bin": { 9 | "qmlweb-viewer": "qmlweb-viewer.js" 10 | }, 11 | "scripts": { 12 | "start": "electron ." 13 | }, 14 | "dependencies": { 15 | "electron-prebuilt": "^1.4.10", 16 | "minimist": "^1.2.0", 17 | "qmlweb": "^0.2.0" 18 | }, 19 | "files": [ 20 | "AUTHORS", 21 | "LICENSE", 22 | "README.md", 23 | "*.html", 24 | "*.js" 25 | ] 26 | } 27 | -------------------------------------------------------------------------------- /qmlweb-viewer.js: -------------------------------------------------------------------------------- 1 | #!/usr/bin/env node 2 | 3 | const electron = require('electron-prebuilt'); 4 | const child_process = require('child_process'); 5 | 6 | try { 7 | child_process.execFileSync(electron, [__dirname].concat(process.argv.slice(2)), { stdio: 'inherit' }); 8 | } catch (e) { 9 | process.exitCode = e.status; 10 | } 11 | -------------------------------------------------------------------------------- /renderer.js: -------------------------------------------------------------------------------- 1 | const remote = require('electron').remote; 2 | const qmlwebViewer = remote.getGlobal('qmlwebViewer'); 3 | 4 | const Engine = typeof QmlWeb !== 'undefined' && QmlWeb.QMLEngine 5 | ? QmlWeb.QMLEngine 6 | : QMLEngine; 7 | const engine = new Engine(); 8 | engine.loadFile(qmlwebViewer.argument); 9 | engine.start(); 10 | const qml = engine.rootObject; 11 | 12 | const window = remote.getCurrentWindow(); 13 | window.setSize(qml.width, qml.height); 14 | -------------------------------------------------------------------------------- /usage.js: -------------------------------------------------------------------------------- 1 | module.exports = `Usage: qmlweb-viewer [options] 2 | 3 | Options 4 | --maximized ...................... Run maximized 5 | --fullscreen ..................... Run fullscreen 6 | --debug .......................... Open Dev Tools window 7 | --help ........................... Display help and exit 8 | `; 9 | --------------------------------------------------------------------------------