How does one build Yue from source?

local gui = require('yue.gui')
local win = gui.Window.create{}
win.onclose = function() gui.MessageLoop:quit() end
win:setcontentview(gui.Button.create('Content View'))
win:setcontentsize{width=400, height=400}
win:center()
win:activate()
gui.MessageLoop:run()

os: win10

os:win10

local gui = require 'yue.gui'

local win = gui.Window.create {}
win.onclose = function() gui.MessageLoop.quit() end

local view = gui.Container.create()

local msg = gui.Label.create('nothing')
msg:setstyle { Margin = 10 }
view:addchildview(msg)

local text1 = gui.Entry.create()
text1:setstyle { Margin = 10 }
function text1:ontextchange()
    msg:settext('text1:ontextchange()')
end
view:addchildview(text1)

local text2 = gui.TextEdit.create()
text2:setstyle { Margin = 10, FlexGrow = 1 }
function text2:ontextchange()
    msg:settext('text2:ontextchange()')
end
view:addchildview(text2)

win:setcontentview(view)
win:setcontentsize { width = 400, height = 200 }
win:center()
win:activate()
gui.MessageLoop.run()

我本地是有yode的
{ Error: Request failed with status code 403
[1] at createError (/Users/yuri/work/react-yue-app/node_modules/axios/lib/core/createError.js:16:15)
[1] at settle (/Users/yuri/work/react-yue-app/node_modules/axios/lib/core/settle.js:18:12)
[1] at IncomingMessage.handleStreamEnd (/Users/yuri/work/react-yue-app/node_modules/axios/lib/adapters/http.js:201:11)
[1] at emitNone (events.js:111:20)
[1] at IncomingMessage.emit (events.js:208:7)
[1] at endReadableNT (_stream_readable.js:1064:12)
[1] at _combinedTickCallback (internal/process/next_tick.js:138:11)
[1] at process._tickCallback (internal/process/next_tick.js:180:9)
[1] config:
[1] { adapter: [Function: httpAdapter],
[1] transformRequest: { '0': [Function: transformRequest] },
[1] transformResponse: { '0': [Function: transformResponse] },
[1] timeout: 0,
[1] xsrfCookieName: 'XSRF-TOKEN',
[1] xsrfHeaderName: 'X-XSRF-TOKEN',
[1] maxContentLength: -1,
[1] validateStatus: [Function: validateStatus],
[1] headers:
[1] { Accept: 'application/json, text/plain, /',
[1] 'User-Agent': 'axios/0.18.0' },
[1] method: 'get',
[1] url: 'https://api.github.com/repos/yue/yode/releases/latest',
[1] data: undefined },
[1] request:
[1] ClientRequest {
[1] domain: null,
[1] _events:
[1] { socket: [Function],
[1] abort: [Function],
[1] aborted: [Function],
[1] error: [Function],
[1] timeout: [Function],
[1] prefinish: [Function: requestOnPrefinish] },
[1] _eventsCount: 6,
[1] _maxListeners: undefined,
[1] output: [],
[1] outputEncodings: [],
[1] outputCallbacks: [],
[1] outputSize: 0,
[1] writable: true,
[1] _last: true,
[1] upgrading: false,
[1] chunkedEncoding: false,
[1] shouldKeepAlive: false,
[1] useChunkedEncodingByDefault: false,
[1] sendDate: false,
[1] _removedConnection: false,
[1] _removedContLen: false,
[1] _removedTE: false,
[1] _contentLength: 0,
[1] _hasBody: true,
[1] _trailer: '',
[1] finished: true,
[1] _headerSent: true,
[1] socket:
[1] TLSSocket {
[1] _tlsOptions: [Object],
[1] _secureEstablished: true,
[1] _securePending: false,
[1] _newSessionPending: false,
[1] _controlReleased: true,
[1] _SNICallback: null,
[1] servername: 'api.github.com',
[1] npnProtocol: undefined,
[1] alpnProtocol: false,
[1] authorized: true,
[1] authorizationError: null,
[1] encrypted: true,
[1] _events: [Object],
[1] _eventsCount: 9,
[1] connecting: false,
[1] _hadError: false,
[1] _handle: null,
[1] _parent: null,
[1] _host: 'api.github.com',
[1] _readableState: [Object],
[1] readable: false,
[1] domain: null,
[1] _maxListeners: undefined,
[1] _writableState: [Object],
[1] writable: false,
[1] allowHalfOpen: false,
[1] _bytesDispatched: 158,
[1] _sockname: null,
[1] _pendingData: null,
[1] _pendingEncoding: '',
[1] server: undefined,
[1] _server: null,
[1] ssl: null,
[1] _requestCert: true,
[1] _rejectUnauthorized: true,
[1] parser: null,
[1] _httpMessage: [Circular],
[1] _idleNext: null,
[1] _idlePrev: null,
[1] _idleTimeout: -1,
[1] [Symbol(asyncId)]: 15,
[1] [Symbol(bytesRead)]: 1138 },
[1] connection:
[1] TLSSocket {
[1] _tlsOptions: [Object],
[1] _secureEstablished: true,
[1] _securePending: false,
[1] _newSessionPending: false,
[1] _controlReleased: true,
[1] _SNICallback: null,
[1] servername: 'api.github.com',
[1] npnProtocol: undefined,
[1] alpnProtocol: false,
[1] authorized: true,
[1] authorizationError: null,
[1] encrypted: true,
[1] _events: [Object],
[1] _eventsCount: 9,
[1] connecting: false,
[1] _hadError: false,
[1] _handle: null,
[1] _parent: null,
[1] _host: 'api.github.com',
[1] _readableState: [Object],
[1] readable: false,
[1] domain: null,
[1] _maxListeners: undefined,
[1] _writableState: [Object],
[1] writable: false,
[1] allowHalfOpen: false,
[1] _bytesDispatched: 158,
[1] _sockname: null,
[1] _pendingData: null,
[1] _pendingEncoding: '',
[1] server: undefined,
[1] _server: null,
[1] ssl: null,
[1] _requestCert: true,
[1] _rejectUnauthorized: true,
[1] parser: null,
[1] _httpMessage: [Circular],
[1] _idleNext: null,
[1] _idlePrev: null,
[1] _idleTimeout: -1,
[1] [Symbol(asyncId)]: 15,
[1] [Symbol(bytesRead)]: 1138 },
[1] _header: 'GET /repos/yue/yode/releases/latest HTTP/1.1\r\nAccept: application/json, text/plain, /\r\nUser-Agent: axios/0.18.0\r\nHost: api.github.com\r\nConnection: close\r\n\r\n',
[1] _onPendingData: [Function: noopPendingOutput],
[1] agent:
[1] Agent {
[1] domain: null,
[1] _events: [Object],
[1] _eventsCount: 1,
[1] _maxListeners: undefined,
[1] defaultPort: 443,
[1] protocol: 'https:',
[1] options: [Object],
[1] requests: {},
[1] sockets: [Object],
[1] freeSockets: {},
[1] keepAliveMsecs: 1000,
[1] keepAlive: false,
[1] maxSockets: Infinity,
[1] maxFreeSockets: 256,
[1] maxCachedSessions: 100,
[1] _sessionCache: [Object] },
[1] socketPath: undefined,
[1] timeout: undefined,
[1] method: 'GET',
[1] path: '/repos/yue/yode/releases/latest',
[1] _ended: true,
[1] res:
[1] IncomingMessage {
[1] _readableState: [Object],
[1] readable: false,
[1] domain: null,
[1] _events: [Object],
[1] _eventsCount: 3,
[1] _maxListeners: undefined,
[1] socket: [Object],
[1] connection: [Object],
[1] httpVersionMajor: 1,
[1] httpVersionMinor: 1,
[1] httpVersion: '1.1',
[1] complete: true,
[1] headers: [Object],
[1] rawHeaders: [Array],
[1] trailers: {},
[1] rawTrailers: [],
[1] upgrade: false,
[1] url: '',
[1] method: null,
[1] statusCode: 403,
[1] statusMessage: 'Forbidden',
[1] client: [Object],
[1] _consuming: true,
[1] _dumped: false,
[1] req: [Circular],
[1] responseUrl: 'https://api.github.com/repos/yue/yode/releases/latest',
[1] redirects: [],
[1] read: [Function] },
[1] aborted: undefined,
[1] timeoutCb: null,
[1] upgradeOrConnect: false,
[1] parser: null,
[1] maxHeadersCount: null,
[1] _redirectable:
[1] Writable {
[1] _writableState: [Object],
[1] writable: true,
[1] domain: null,
[1] _events: [Object],
[1] _eventsCount: 2,
[1] _maxListeners: undefined,
[1] _options: [Object],
[1] _redirectCount: 0,
[1] _redirects: [],
[1] _requestBodyLength: 0,
[1] _requestBodyBuffers: [],
[1] _onNativeResponse: [Function],
[1] _currentRequest: [Circular],
[1] _currentUrl: 'https://api.github.com/repos/yue/yode/releases/latest' },
[1] [Symbol(outHeadersKey)]: { accept: [Array], 'user-agent': [Array], host: [Array] } },
[1] response:
[1] { status: 403,
[1] statusText: 'Forbidden',
[1] headers:
[1] { date: 'Wed, 05 Sep 2018 08:33:55 GMT',
[1] 'content-type': 'application/json; charset=utf-8',
[1] 'content-length': '248',
[1] connection: 'close',
[1] server: 'GitHub.com',
[1] status: '403 Forbidden',
[1] 'x-ratelimit-limit': '60',
[1] 'x-ratelimit-remaining': '0',
[1] 'x-ratelimit-reset': '1536136444',
[1] 'x-github-media-type': 'github.v3',
[1] 'access-control-expose-headers': 'ETag, Link, Retry-After, X-GitHub-OTP, X-RateLimit-Limit, X-RateLimit-Remaining, X-RateLimit-Reset, X-OAuth-Scopes, X-Accepted-OAuth-Scopes, X-Poll-Interval',
[1] 'access-control-allow-origin': '*',
[1] 'strict-transport-security': 'max-age=31536000; includeSubdomains; preload',
[1] 'x-frame-options': 'deny',
[1] 'x-content-type-options': 'nosniff',
[1] 'x-xss-protection': '1; mode=block',
[1] 'referrer-policy': 'origin-when-cross-origin, strict-origin-when-cross-origin',
[1] 'content-security-policy': 'default-src 'none'',
[1] 'x-runtime-rack': '0.022645',
[1] 'x-github-request-id': '5463:54D0:BFA729:FDD307:5B8F94F3' },
[1] config:
[1] { adapter: [Function: httpAdapter],
[1] transformRequest: [Object],
[1] transformResponse: [Object],
[1] timeout: 0,
xsrfCookieName: 'XSRF-TOKEN',
[1] xsrfHeaderName: 'X-XSRF-TOKEN',
[1] maxContentLength: -1,
[1] validateStatus: [Function: validateStatus],
[1] headers: [Object],
[1] method: 'get',
[1] url: 'https://api.github.com/repos/yue/yode/releases/latest',
[1] data: undefined },
[1] request:
[1] ClientRequest {
[1] domain: null,
[1] _events: [Object],
[1] _eventsCount: 6,
[1] _maxListeners: undefined,
[1] output: [],
[1] outputEncodings: [],
[1] outputCallbacks: [],
[1] outputSize: 0,
[1] writable: true,
[1] _last: true,
[1] upgrading: false,
[1] chunkedEncoding: false,
[1] shouldKeepAlive: false,
[1] useChunkedEncodingByDefault: false,
[1] sendDate: false,
[1] _removedConnection: false,
[1] _removedContLen: false,
[1] _removedTE: false,
[1] _contentLength: 0,
[1] _hasBody: true,
[1] _trailer: '',
[1] finished: true,
[1] _headerSent: true,
[1] socket: [Object],
[1] connection: [Object],
[1] _header: 'GET /repos/yue/yode/releases/latest HTTP/1.1\r\nAccept: application/json, text/plain, /\r\nUser-Agent: axios/0.18.0\r\nHost: api.github.com\r\nConnection: close\r\n\r\n',
[1] _onPendingData: [Function: noopPendingOutput],
[1] agent: [Object],
[1] socketPath: undefined,
[1] timeout: undefined,
[1] method: 'GET',
[1] path: '/repos/yue/yode/releases/latest',
[1] _ended: true,
[1] res: [Object],
[1] aborted: undefined,
[1] timeoutCb: null,
[1] upgradeOrConnect: false,
[1] parser: null,
[1] maxHeadersCount: null,
[1] _redirectable: [Object],
[1] [Symbol(outHeadersKey)]: [Object] },
[1] data:
[1] { message: 'API rate limit exceeded for 182.150.27.146. (But here's the good news: Authenticated requests get a higher rate limit. Check out the documentation for more details.)',
[1] documentation_url: 'https://developer.github.com/v3/#rate-limiting' } } }

I really hope there is some description in the doc of the steps(installation, project creation, etc.) to start using yue with node.

local gui = require('yue.gui')

local win = gui.Window.create{}
win.onclose = function() gui.MessageLoop.quit() end

local view = gui.Container.create()
view:setstyle { AlignItems = 'center', JustifyContent = 'center' }

local label = gui.Label.create('Content View')
label:setfont(gui.Font.create('宋体', 30, "normal", "normal"))
view:addchildview(label)

win:setcontentview(view)
win:setcontentsize{width=400, height=400}
win:center()
win:activate()

gui.MessageLoop.run()

os: win10

how about them?

The code like below would throw and make the gui exits when the button is clicked:

const gui = require('gui')

function main() {
  // create window
  const win = gui.Window.create({})
  win.setContentSize({ width: 850, height: 550 })

  // create content view
  const contentView = gui.Container.create()
  contentView.setStyle({ flexDirection: 'row' })

  const childContainer = gui.Container.create()
  childContainer.onDraw.connect((...args) => console.log(args))

  const button = gui.Button.create({
    title: '+',
  })
  button.onClick.connect(() => {
    console.log('btn clicked')
  })

  childContainer.addChildView(button)
  contentView.addChildView(childContainer)
  win.setContentView(contentView)

  win.center()
  win.setVisible(true)
  win.deactivate()
}

main()

Change the order of connect like this:

const gui = require('gui')

function main() {
  // create window
  const win = gui.Window.create({})
  win.setContentSize({ width: 850, height: 550 })

  // create content view
  const contentView = gui.Container.create()
  contentView.setStyle({ flexDirection: 'row' })

  // create another container to make it complex
  const childContainer = gui.Container.create()

  // finally a button
  const button = gui.Button.create({
    title: '+',
  })
  button.onClick.connect(() => {
    console.log('btn clicked')
  })

  // NOTE: bind the onDraw event of childContainer behind the onClick of button
  childContainer.onDraw.connect((...args) => console.log(args))

  childContainer.addChildView(button)
  contentView.addChildView(childContainer)
  win.setContentView(contentView)

  win.center()
  win.setVisible(true)
  win.deactivate()
}

main()

And it will not throw but the callback will lose arguments. Expect:

yue.Container {}  yue.Painter {}  { x: 0, y: 0, width: 24, height: 28 }

Actual:

yue.Container {} 

I am interested in the tool that is used to build the documentation, it looks very nice and clean.

Is this tool open source or available somewhere? I might use it for my own projects.

Thanks!

I'm using "gui": "^0.4.3" at node v8.9.4 and the code below doesn't print true:

const gui = require('gui')

function promiseReslve() {
  const p = new Promise((resolve) => {
    resolve('true')
  })

  p.then((res) => {
    console.log(res)
  })
}

promiseReslve()
gui.MessageLoop.run()

But the promise is actually resolved when I set a timer to print its value.
Remove the gui.MessageLoop.run() and then it will print true:

const gui = require('gui')

function promiseReslve() {
  const p = new Promise((resolve) => {
    resolve('true')
  })

  p.then((res) => {
    console.log(res)
  })
}

promiseReslve()
// gui.MessageLoop.run()

This may be related to the yue's MessageLoop API and the node event loop.

The current compile option is MT, and statically linked Lua. When using lua.exe to load yue.dll, it crashes. For example, a memory created by lua.exe is freed within yue.dll.

local gui = require('yue.gui')
local win = gui.Window.create{}
win.onclose = function() gui.MessageLoop:quit() end

local main = gui.Container.create()

local label = gui.Label.create('hello')
main:addchildview(label)

local button = gui.Button.create('close')
function button:onmousedown()
    main:setvisible(false)
end
main:addchildview(button)

win:setcontentview(main)
win:setcontentsize{width=400, height=400}
win:center()
win:activate()
gui.MessageLoop:run()

os: win10

I want to use canvas to do offline render, and new content can be drawn to canvas successfully, but the old content cannot be cleaned.

So I guess if it might be ok to add a new API to Canvas class to clear its content totally?

thanks

I appear to have no way to smooth out the animation of the progress bar when doing incremental updates. For instance, if I call myBar.setValue(50) and then myBar.setValue(60), it appears progress in both cases go from 0 to 50, and then 0 to 60.

Hi, in the docs it mentions that yue uses GDI+ to draw the ui on windows, but I didn't see any info about what yue uses to draw the ui on Linux and MacOS.

Cheers.

Hi,

I sadly can't find any way to add a toolbar item to my toolbar on macOS.

There is a definition of a toolbar item but I couldn't find how to append it to the toolbar.

Thank you for your help!

Does the yue support utf-8? Simple-app using Chinese will cause garbled characters.

local gui = require('yue.gui')

local win = gui.Window.create{}
win.onclose = function() gui.MessageLoop.quit() end

local view = gui.Container.create()

local label = gui.Label.create('Content View')
label:setvisible(false)
view:addchildview(label)

view:setvisible(false)
view:setvisible(true)

win:setcontentview(view)
win:setcontentsize{width=400, height=400}
win:center()
win:activate()

gui.MessageLoop.run()

os: win10

What is the best way to handle asynchronous functions in yue, considering the fact that it blocks the event loop?

#30 has been fixed, but there are still bugs in some cases.

local gui = require('yue.gui')

local win = gui.Window.create{}
win.onclose = function() gui.MessageLoop.quit() end

local view1 = gui.Container.create()
view1:setstyle { FlexGrow = 1 } 

local view2 = gui.Container.create()
view2:setstyle { Position = 'absolute' }
view1:addchildview(view2)

local label = gui.Label.create('测试测试')
view2:addchildview(label) 

win:setcontentview(view1)
win:setcontentsize{width=400, height=400}
win:center()
win:activate()

gui.MessageLoop.run()

os : win10

as title.

thanks and cheers

Hello,

I think it would be nice to have a getNativeWindowHandle() function and hookWindowMessage() like electron have.

When I tried to resolve url with extension other than .html - usage of processor drasticly increments. From about 0,5% of usage to about 26% at resolving that non-html url. And nothing change over time. Process still have that high processor usage. Second try of it make usage about 50%, third on about 75%.

Reproducing
To be able to reproduce this bug just use the sample code in the form of "Mugan", add two files test.html and test.css and make two anchors, one for each of them:

<a href='mugan://app/test.html'>test.html</a>
<a href='mugan://app/test.css'>test.css</a>

First of them works great. But second makes process usage higher for nothing.

This is not documented / mentioned in the doc for TextEdit or the base View.

Other components such as Button/Label seem to render fine without an explicit SetStyle call.

I would make a mention that it is necessary for rendering.

Tab is one of the most basic UI element that is widely used, please consider add the support of it :)

Does it make sense to add rounded corners rendering option to View component?

hello. I'm trying to create app with tray icon and I'm getting an error.

Error when running script: tray.lua:6: attempt to call a nil value (field 'create')

code:

local gui = require('yue.gui')

local win = gui.Window.create{}

local tray_icon = gui.Image.createfrompath('icon.png')
local tray = gui.Tray.create(tray_icon)

win.onclose = function() gui.MessageLoop.quit() end
win:setcontentsize{width=500, height=500}

win:center()
win:activate()
gui.MessageLoop.run()

os: win 8.1
yue version: lua_yue_lua_5.3_v0.4.3_win_x64

I have a modify lua implementation. Compared to the official lua, it has the same api and the same behavior. But the memory layout of lua_State is different.

So inline lstate.h will make it crash.
https://github.com/yue/yue/blob/master/lua/inline.h

Can you add an option to turn off this inline? Thanks.

The button below is expected to throw an error and log the error in my node process when clicked:

const gui = require('gui')

const win = gui.Window.create({})
win.setContentSize({ width: 400, height: 400 })
win.onClose = () => gui.lifetime.quit()

const contentView = gui.Container.create()
contentView.setStyle({ flexDirection: 'row' })
win.setContentView(contentView)

const btnA = gui.Button.create('a')
contentView.addChildView(btnA)

// throw when this button is clicked
btnA.onClick = () => {
  throw new Error('invalid')
}

win.center()
win.activate()

if (!process.versions.yode) {
  gui.MessageLoop.run()
  process.exit(0)
}

But it doesn't.

I could catch the error in the callback. But this would make debugging much more difficult when developing.

I really like the idea of yue, unfortunately the fact that it relies on a fork of node makes it incompatible with all the app packagers I've stumbled upon. Is there any way to turn a yue app to a simple to distribute executable?

os:win10

Error message:

[0301/110440.107:ERROR:callback_internal.h(219)] Error when calling lua function: error converting arg at index 2 from nil to yue.Color

local gui = require 'yue.gui'

local window = {}

local win = gui.Window.create { }
function win.onclose()
    gui.MessageLoop.quit()
end

local view = gui.Container.create()

local colors = { '#00ADD9', '#00AD3C', '#D9A33C' }
for i = 1, 3 do
    local color1 = colors[i]
    local color2 = ('#%06X'):format(tonumber('0x' .. color1:sub(2)) + 0x101010)
    local btn = gui.Button.create('')
    btn:setbackgroundcolor(color1)
    btn._backgroundcolor1 = color1
    btn._backgroundcolor2 = color2
    function btn:onmouseleave()
        print('onmouseleave', self, self._backgroundcolor1)
        self:setbackgroundcolor(self._backgroundcolor1)
    end
    function btn:onmouseenter()
        print('onmouseenter', self, self._backgroundcolor2)
        self:setbackgroundcolor(self._backgroundcolor2)
    end

    btn:setstyle { Margin = 10, FlexGrow = 1 }
    view:addchildview(btn)
end

win:setcontentview(view)
win:setcontentsize { width = 400, height = 600 }
win:center()
win:activate()

gui.MessageLoop.run()

environment:

ubuntu 16.04

issue description

ref-counted container may cause segmentation fault if setting on_draw event.

sample code

  scoped_refptr<nu::Container> radarView = new nu::Container;
  radarView->SetStyle("position", "absolute", "width", radar_view_size, "height", radar_view_size, "top", 0, "right", 0);
  radarView->on_draw.Connect([&](nu::Container* self, nu::Painter* painter, const nu::RectF& dirty){
    std::cout << "container on_draw on rect: " << self->GetBounds().ToString() << std::endl;
    scoped_refptr<nu::Canvas> temp_canvas = new nu::Canvas(nu::SizeF(radar_view_size, radar_view_size), 1.0f);
    nu::RectF bounds = self->GetBounds();
    painter->DrawCanvas(temp_canvas.get(), nu::RectF(0, 0, bounds.width(), bounds.height()));
  });

I can use label to display a text but the text will be truncated when it's longer than the width of its container:

I want to make it wrapped rather than truncated. I have tried the flexWrap: 'wrap' layout property but it doesn't work as expected.

Maybe I have missed some components or layout properties?

Example from: https://github.com/yue/yue-sample-apps/tree/master/editor

Environment

• OS: macOS 10.13.3
• node: 8.1.4
• node-gui: 0.3.1
• download-yue: 1.1.1

Description:

Starting the example with node ., the editor mostly works, but the menu at the top of the screen is not sensitive until the editor window has been de-focused and re-focused. There doesn't appear to be anything in the example code causing this.

os:win10

local gui = require('yue.gui')

local win = gui.Window.create{}
win.onclose = function() gui.MessageLoop:quit() end

local main = gui.Container.create()
main:setstyle { FlexDirection = 'row', FlexGrow = 1 }

local title = {'测试',  '测试ABC', 'ABCDEFG'}

for size = 10, 18, 2 do
    local view = gui.Container.create()
    view:setstyle { FlexGrow = 1 }
    local font = gui.Font.create('宋体', size, 'normal', 'normal')
    for i = 1, 3 do
        local c = gui.Button.create(title[i])
        c:setstyle { Margin = 10, FlexGrow = 1 }
        c:setbackgroundcolor('#00AD3C')
        c:setfont(font)
        view:addchildview(c)
    end
    main:addchildview(view)
end

win:setcontentview(main)
win:setcontentsize{width = 500, height=200}
win:center()
win:activate()

gui.MessageLoop:run()

一直在想是否可以基于chromium的源码抽取基本的base、gui、net库。陈先生对chromium非常有研究，没这样去做，我的想法估计是不可行的。“yue”项目很有意义，期望您能坚持做下去。谢谢！

Hi, thanks for your awesome project! I'm planning to write a tray app, something like https://github.com/maxogden/menubar via yue, but I can't find how to get the position of tray on the screen and screen size in the documents.

Hello,

First, I want to express my gratitude for making this library, I find it very cool... and having that coolness without bloating my app it is a nice plus. Nice work! 👍

I am using opencv4nodejs in my application that captures some video footage and run some calculations in order to find some objects.

My goal is to display an Image somewhere in a Container or Canvas and refresh it with the calculation results, let's say, every 15 frames.

So, I searched a little and cannot find an optimal way to draw the image from memory (a javascript ArrayBuffer) since the Image class only have the createFromPath(path) constructor. And writting the results on an file to disk in order to show it every time is refreshed is rather unnaceptable.

So, I want to ask if there is a way to create an Image class from the ArrayBuffer, or if someone already has done it, if he or she can point me in the right direction since I am a little lost here.

Thanks very much in advance and best regards

Environment

• OS: macOS 10.13.3
• node: 8.1.4
• node-gui: 0.3.1
• download-yue: 1.1.1

Code sample

const gui = require('gui');
const win = gui.Window.create({});
const OBJ_CONST = (obj) => Object.seal(Object.freeze(obj));
const SIZE = OBJ_CONST({ width: 400, height: 400 });
win.onClose = () => gui.MessageLoop.quit();
win.setContentSize(SIZE);
const contentView = gui.Container.create();
const canvas = gui.Canvas.create(SIZE, 1.0);
contentView.onDraw = (self, painter, dirty) => {
    let tgtRect = Object.assign({ x: 0, y: 0 }, SIZE);
    if (painter) {
        console.log(painter, painter.drawCanvas);
        try {
          painter.drawCanvas(canvas, tgtRect);
        } catch (e) {
          console.error(e);
        }
    }
};
win.setContentView(contentView);
win.center();
win.activate();
gui.MessageLoop.run();
process.exit(0);

Expectation

painter.drawCanvas should be present, according to the docs, and should copy the contents of the passed Canvas (canvas) to the Container, scaled to fit the passed RectF (tgtRect).

Should output on the console: yue.Painter {} [Function: drawCanvas]

Actual

Application reports:

yue.Painter {} undefined
TypeError: painter.drawCanvas is not a function
    at Function.contentView.onDraw (/Users/bellio851/test/yue/index.js:13:19)
    at Object.<anonymous> (/Users/bellio851/test/yue/index.js:22:5)
    ...

Side note:

The reason the if (painter) is there is that sometimes the first call of onDraw passes null for the painter argument. I get similar results using drawCanvasFromRect.

The code sample is simplified from the Lua sample found here:

https://github.com/yue/yue-sample-apps/blob/master/drawing/lua/drawing.lua

Nice job and I encounter some problems when trying to bind onClick events to buttons.

Use the node binding of yue 0.2.1:

import gui from 'gui'

const win = gui.Window.create({})
win.setContentSize({ width: 400, height: 400 })
win.onClose = () => gui.lifetime.quit()

const contentView = gui.Container.create()
win.setContentView(contentView)

const btnA = gui.Button.create('a')
contentView.addChildView(btnA)

// bind the onClick event of btnA
btnA.onClick.connect(() => {
  console.log('a clicked')
})

const btnB = gui.Button.create('b')
contentView.addChildView(btnB)

// bind the onClick event of btnB
btnB.onClick.connect(() => {
  console.log('b clicked')
})

win.center()
win.activate()

if (!process.versions.yode) {
  gui.lifetime.run()
  process.exit(0)
}

When btnA clicked:

a clicked
b clicked

When btnB clicked:

(it logs nothing)

The assignment way works as expected:

btnA.onClick = () => {
  console.log('a clicked')
}

But I can't find a way to disconnect a listener by assignment.

I've been struggling for 2 hours trying to build libyue.lib before giving up. The documentation states:

Enter the directory of libyue and create a build sub-directory for building.

What libyue directory is that?

So I downloaded the pre-built 0.4.0 .zip and even the libyue.lib seems to be missing this symbol:

main.obj : error LNK2019: unresolved external symbol 
"private: bool __thiscall base::subtle::RefCountedBase::CalledOnValidSequence(void)
const " (?CalledOnValidSequence@RefCountedBase@subtle@base@@ABE_NXZ) referenced in function _WinMain@16

when compiling and linking this sample.

PS. I used a simple GNU-makefile to build for MSVC-2017 (32-bit).

Edit. Building in _DEBUG-mode (-MTd) is okay.

log
0 info it worked if it ends with ok
1 verbose cli [ 'C:\Program Files\nodejs\node.exe',
1 verbose cli 'C:\Users\Administrator.WIN-DKN9OK77VLJ\AppData\Roaming\npm\node_modules\npm\bin\npm-cli.js',
1 verbose cli 'i',
1 verbose cli 'gui' ]
2 info using [email protected]
3 info using [email protected]
4 verbose npm-session 1485adf0ac06def0
5 silly install loadCurrentTree
6 silly install readLocalPackageData
7 http fetch GET 304 https://registry.npmjs.org/gui 1894ms (from cache)
8 silly pacote tag manifest for gui@latest fetched in 2134ms
9 timing stage:loadCurrentTree Completed in 5152ms
10 silly install loadIdealTree
11 silly install cloneCurrentTreeToIdealTree
12 timing stage:loadIdealTree:cloneCurrentTree Completed in 1ms
13 silly install loadShrinkwrap
14 timing stage:loadIdealTree:loadShrinkwrap Completed in 4ms
15 silly install loadAllDepsIntoIdealTree
16 silly resolveWithNewModule [email protected] checking installable status
17 http fetch GET 304 https://registry.npmjs.org/download-yue 967ms (from cache)
18 silly pacote range manifest for [email protected] fetched in 1002ms
19 silly resolveWithNewModule [email protected] checking installable status
20 timing stage:loadIdealTree:loadAllDepsIntoIdealTree Completed in 1064ms
21 timing stage:loadIdealTree Completed in 1078ms
22 silly currentTree SodaScriptIDE
23 silly idealTree SodaScriptIDE
23 silly idealTree +-- [email protected]
23 silly idealTree -- [email protected] 24 silly install generateActionsToTake 25 timing stage:generateActionsToTake Completed in 18ms 26 silly diffTrees action count 2 27 silly diffTrees add [email protected] 28 silly diffTrees add [email protected] 29 silly decomposeActions action count 16 30 silly decomposeActions fetch [email protected] 31 silly decomposeActions extract [email protected] 32 silly decomposeActions preinstall [email protected] 33 silly decomposeActions build [email protected] 34 silly decomposeActions install [email protected] 35 silly decomposeActions postinstall [email protected] 36 silly decomposeActions finalize [email protected] 37 silly decomposeActions refresh-package-json [email protected] 38 silly decomposeActions fetch [email protected] 39 silly decomposeActions extract [email protected] 40 silly decomposeActions preinstall [email protected] 41 silly decomposeActions build [email protected] 42 silly decomposeActions install [email protected] 43 silly decomposeActions postinstall [email protected] 44 silly decomposeActions finalize [email protected] 45 silly decomposeActions refresh-package-json [email protected] 46 silly install executeActions 47 silly doSerial global-install 16 48 verbose correctMkdir C:\Users\Administrator.WIN-DKN9OK77VLJ\AppData\Roaming\npm-cache\_locks correctMkdir not in flight; initializing 49 timing audit compress Completed in 11ms 50 info audit Submitting payload of 353bytes 51 verbose lock using C:\Users\Administrator.WIN-DKN9OK77VLJ\AppData\Roaming\npm-cache\_locks\staging-434453f6dbf14ad7.lock for J:\SodaScriptIDE\node_modules\.staging 52 silly doParallel extract 2 53 silly extract [email protected] 54 silly extract [email protected] 55 silly tarball trying [email protected] by hash: sha512-AczZ5yj1+SsW7pj9vlupDFB0KL6GgRPBXs1mOWCVb8V142CrDzeYOTGPOujIxysHQF7e5g3x0geaVF5rej2oKw== 56 silly tarball trying gui@latest by hash: sha512-O1iTA5VwotFIAbS3T5kfz+UASWpm+YlxP/gr6TQRK/DFiQ2ja8iAxZ2zaQZKc3zJicYs5EiupRRx+9ku2kmtzw== 57 silly extract gui@latest extracted to J:\SodaScriptIDE\node_modules\.staging\gui-9060ddab (187ms) 58 silly extract [email protected] extracted to J:\SodaScriptIDE\node_modules\.staging\download-yue-ed42c3ac (240ms) 59 timing action:extract Completed in 252ms 60 silly doReverseSerial unbuild 16 61 silly doSerial remove 16 62 silly doSerial move 16 63 silly doSerial finalize 16 64 silly finalize J:\SodaScriptIDE\node_modules\download-yue 65 silly finalize J:\SodaScriptIDE\node_modules\gui 66 timing action:finalize Completed in 43ms 67 silly doParallel refresh-package-json 2 68 silly refresh-package-json J:\SodaScriptIDE\node_modules\download-yue 69 silly refresh-package-json J:\SodaScriptIDE\node_modules\gui 70 timing action:refresh-package-json Completed in 97ms 71 silly doParallel preinstall 2 72 silly preinstall [email protected] 73 info lifecycle [email protected]~preinstall: [email protected] 74 silly preinstall [email protected] 75 info lifecycle [email protected]~preinstall: [email protected] 76 timing action:preinstall Completed in 9ms 77 silly doSerial build 16 78 silly build [email protected] 79 info linkStuff [email protected] 80 silly linkStuff [email protected] has J:\SodaScriptIDE\node_modules as its parent node_modules 81 verbose linkBins [ { 'download-yue': 'download-yue.js' }, 81 verbose linkBins 'J:\\SodaScriptIDE\\node_modules\\.bin', 81 verbose linkBins false ] 82 silly build [email protected] 83 info linkStuff [email protected] 84 silly linkStuff [email protected] has J:\SodaScriptIDE\node_modules as its parent node_modules 85 timing action:build Completed in 28ms 86 silly doSerial global-link 16 87 silly doParallel update-linked 0 88 silly doSerial install 16 89 silly install [email protected] 90 info lifecycle [email protected]~install: [email protected] 91 silly install [email protected] 92 info lifecycle [email protected]~install: [email protected] 93 timing action:install Completed in 3ms 94 silly doSerial postinstall 16 95 silly postinstall [email protected] 96 info lifecycle [email protected]~postinstall: [email protected] 97 silly postinstall [email protected] 98 info lifecycle [email protected]~postinstall: [email protected] 99 verbose lifecycle [email protected]~postinstall: unsafe-perm in lifecycle true 100 verbose lifecycle [email protected]~postinstall: PATH: C:\Users\Administrator.WIN-DKN9OK77VLJ\AppData\Roaming\npm\node_modules\npm\node_modules\npm-lifecycle\node-gyp-bin;J:\SodaScriptIDE\node_modules\gui\node_modules\.bin;J:\SodaScriptIDE\node_modules\.bin;C:\Users\Administrator.WIN-DKN9OK77VLJ\AppData\Roaming\npm;C:\Program Files\nodejs\;C:\Program Files (x86)\ActiveState Komodo IDE 11\;C:\Python27\;C:\Python27\Scripts;C:\Program Files (x86)\Common Files\Oracle\Java\javapath;C:\Windows\system32;C:\Windows;C:\Windows\System32\Wbem;C:\Windows\System32\WindowsPowerShell\v1.0\;K:\jdk-1.8.0_162\bin;C:\Program Files\nodejs\;C:\Program Files (x86)\Brackets\command;C:\Program Files\Git\cmd;C:\Program Files\Bandizip\;C:\Users\Administrator.WIN-DKN9OK77VLJ\AppData\Roaming\npm 101 verbose lifecycle [email protected]~postinstall: CWD: J:\SodaScriptIDE\node_modules\gui 102 silly lifecycle [email protected]~postinstall: Args: [ '/d /s /c', 'node install.js' ] 103 timing audit submit Completed in 1422ms 104 http fetch POST 200 https://registry.npmjs.org/-/npm/v1/security/audits/quick 1419ms 105 timing audit body Completed in 1ms 106 silly lifecycle [email protected]~postinstall: Returned: code: 1 signal: null 107 info lifecycle [email protected]~postinstall: Failed to exec postinstall script 108 timing action:postinstall Completed in 1950ms 109 verbose unlock done using C:\Users\Administrator.WIN-DKN9OK77VLJ\AppData\Roaming\npm-cache\_locks\staging-434453f6dbf14ad7.lock for J:\SodaScriptIDE\node_modules\.staging 110 timing stage:rollbackFailedOptional Completed in 22ms 111 timing stage:runTopLevelLifecycles Completed in 9063ms 112 silly saveTree SodaScriptIDE 112 silly saveTree -- [email protected]
112 silly saveTree -- [email protected] 113 warn enoent ENOENT: no such file or directory, open 'J:\SodaScriptIDE\package.json' 114 verbose enoent This is related to npm not being able to find a file. 115 warn SodaScriptIDE No description 116 warn SodaScriptIDE No repository field. 117 warn SodaScriptIDE No README data 118 warn SodaScriptIDE No license field. 119 verbose stack Error: [email protected] postinstall: node install.js119 verbose stack Exit status 1 119 verbose stack at EventEmitter.<anonymous> (C:\Users\Administrator.WIN-DKN9OK77VLJ\AppData\Roaming\npm\node_modules\npm\node_modules\npm-lifecycle\index.js:304:16) 119 verbose stack at EventEmitter.emit (events.js:182:13) 119 verbose stack at ChildProcess.<anonymous> (C:\Users\Administrator.WIN-DKN9OK77VLJ\AppData\Roaming\npm\node_modules\npm\node_modules\npm-lifecycle\lib\spawn.js:55:14) 119 verbose stack at ChildProcess.emit (events.js:182:13) 119 verbose stack at maybeClose (internal/child_process.js:961:16) 119 verbose stack at Process.ChildProcess._handle.onexit (internal/child_process.js:248:5) 120 verbose pkgid [email protected] 121 verbose cwd J:\SodaScriptIDE 122 verbose Windows_NT 6.1.7601 123 verbose argv "C:\\Program Files\\nodejs\\node.exe" "C:\\Users\\Administrator.WIN-DKN9OK77VLJ\\AppData\\Roaming\\npm\\node_modules\\npm\\bin\\npm-cli.js" "i" "gui" 124 verbose node v10.7.0 125 verbose npm v6.2.0 126 error code ELIFECYCLE 127 error errno 1 128 error [email protected] postinstall:node install.js`
128 error Exit status 1
129 error Failed at the [email protected] postinstall script.
129 error This is probably not a problem with npm. There is likely additional logging output above.
130 verbose exit [ 1, true ]

Attempting to build it from this release:

https://github.com/yue/yue/releases/download/v0.2.0/libyue_v0.2.0_linux_x64.zip

[ 50%] Linking CXX executable sample_app
../lib/libyue.a(lifetime_gtk.o): In function `nu::Lifetime::PlatformInit()':
/home/travis/build/yue/yue/out/Release/../../nativeui/gtk/lifetime_gtk.cc:23: undefined reference to `gtk_init'

(followed by about 500 other errors of undefined symbol references)

This worked fine on Arch Linux - judging from pkg-config output, I don't think I'm missing any libs.

version

• osx Sierra
• [email protected], installed from npm
• [email protected]

minimal reproduction

const gui = require('gui')
console.log(gui)

this returns:

{ App: [Function: yue.App],
  Font: { [Function: yue.Font] create: [Function], default: [Function] },
  Color: { [Function: yue.Color] rgb: [Function], argb: [Function] },
  Image: { [Function: yue.Image] createFromPath: [Function] },
  Painter: [Function: yue.Painter],
  Event:
   { [Function: yue.Event]
     maskShift: 131072,
     maskControl: 262144,
     maskAlt: 524288,
     maskMeta: 1048576 },
  FileDialog:
   { [Function: yue.FileDialog]
     optionPickFolders: 1,
     optionMultiSelect: 2,
     optionShowHidden: 4 },
  FileOpenDialog: { [Function: yue.FileOpenDialog] create: [Function] },
  FileSaveDialog: { [Function: yue.FileSaveDialog] create: [Function] },
  MenuBar: { [Function: yue.MenuBar] create: [Function] },
  Menu: { [Function: yue.Menu] create: [Function] },
  MenuItem: { [Function: yue.MenuItem] create: [Function] },
  Window: { [Function: yue.Window] create: [Function] },
  View: [Function: yue.View],
  Container: { [Function: yue.Container] create: [Function] },
  Button: { [Function: yue.Button] create: [Function] },
  Browser: { [Function: yue.Browser] create: [Function] },
  Entry: { [Function: yue.Entry] create: [Function] },
  Label: { [Function: yue.Label] create: [Function] },
  ProgressBar: { [Function: yue.ProgressBar] create: [Function] },
  Group: { [Function: yue.Group] create: [Function] },
  Scroll: { [Function: yue.Scroll] create: [Function] },
  TextEdit: { [Function: yue.TextEdit] create: [Function] },
  Toolbar: { [Function: yue.Toolbar] create: [Function] },
  Vibrant: { [Function: yue.Vibrant] create: [Function] },
  app: yue.App {},
  Lifetime: [Function: yue.Lifetime],
  lifetime: yue.Lifetime {} }

What is expected?

It seems to me that gui object has Canvas property.

Code:

local pickFolderForm = gui.TextEdit.create()
pickFolderForm:setstyle{width= 400, height: 25}
pickFolderForm:settext("Type in folder")

function pickFolderForm.shouldinsertnewline( self )
    print(self)
    return false
end

Video: https://streamable.com/jpn4p