barmalei / zebkit Goto Github PK

Hi,

I'm new to angularjs, and have been having trouble trying to create a zebra canvas in a directive.
Do you happen to have a small example of this working?
No matter how I do it I seem to end up with root being undefined.

I was stepping through in firebug but quickly get lost in the easyoop instantiation -- somewhere in there root doesn't get set, or gets unset.

The canvas does seem to get created but root is undefined.

Fix it!

What is the API to fire custom events (e.g. for special components)?

Thanks!

I suggest to port "Zebra" to Dart language (dartlang.org). Dart have C or Java-like syntax, Zebra in Dart will see nice.

hi

I test the page zebra-master/samples/richui.simpleapp.html on my devices android 4.0 (sony xperia and huawei tablet )

1. when click on button it does't delete the text into the text component.
2. the text component focus does't open keyboard mobile

thanks

Hi, whilst trying to implement a custom component, I noticed a few situations where my component would refuse to repaint properly (it would call repaint, but the repainting would be short-circuited somehow). Looking at the PaintManager.repaint function, there are two things that seem fishy to me. First, we have

    var da = canvas.$da;
    if (da.width > 0) {
        if (x >= da.x                &&
            y >= da.y                &&
            x + w <= da.x + da.width &&
            y + h <= da.y + da.height  )
         {
            return;
         }
         MB.unite(da.x, da.y, da.width, da.height, x, y, w, h, da);
    }
   else {
       MB.intersection(0, 0, canvas.width, canvas.height, x, y, w, h, da);
   }

It seems like there should not be an early return there, as we don't want to skip painting entirely; we just want to avoid calling MB.unite when unnecessary.

Second issue is that at the end of the function passed to setTimeout, we have

    $this.paint(context, canvas);

    context.restore();
    canvas.$da.width = -1; //!!!    

It seems to me that the last line is unnecessary, and in fact I tried commenting it out and things seemed to work OK. Actually, fixing the two issues described here seemed to solve my problem, although of course it could have broken something else.

Are these bugs? Can you explain what scenario the canvas.$da.width = -1 is supposed to guard against? If needed, I can try to create some problematic examples to help you reproduce my issue, but this will take some effort, so I figured I would ask first. Thanks!

I seem to get this error in chrome and IE11

Failed to load resource: the server responded with a status of 404 (Not Found) http://192.168.1.180:8080/zebra.json?1404159338765&
Error: HTTP error 404 response = 'Not Found' url = http://192.168.1.180:8080/zebra.json?1404159338765&
at SEND (http://192.168.1.180:8080/zebra.min.js:1:47193)
at ProxyMethod.a as SEND
at GET (http://192.168.1.180:8080/zebra.min.js:1:46457)
at ProxyMethod.a as GET
at Package.pkg.GET (http://192.168.1.180:8080/zebra.min.js:1:47407)
at loadByUrl (http://192.168.1.180:8080/zebra.min.js:1:30717)
at ProxyMethod.a (http://192.168.1.180:8080/zebra.min.js:1:5344)
at $template.$super (http://192.168.1.180:8080/zebra.min.js:1:8347)
at loadByUrl (http://192.168.1.180:8080/zebra.min.js:1:88908)
at ProxyMethod.a as loadByUrl
Uncaught Error: Error: HTTP error 404 response = 'Not Found' url = http://192.168.1.180:8080/zebra.json?1404159338765& 192.168.1.180:8080/zebra.min.js:1
Uncaught TypeError: Cannot read property 's' of undefined

My path for Jason is the same as the path for zebra.js etc.?

Sad as it looks like a good canvas control library ,Personally I do not like Jason died with the Argonauts! I have my own lib working in just pure JavaScript! e.g. KISS principle) AS HTML5 / WebSocket and UI with just JavaScript works on most modern browsers without the pain of DOM/CSS all pixel perfect.

Hmmm,

did something special change with the last update? Since then, many of my programs do not show up any more :-(

Right now, everything I can say is: zCanvas.root seems to end up with a size of 0x0 pixels - which seems to be too small to become visible.

What might be special with my scenario: I am dynamically adding widgets after initial set-up.

Right now, the situation is a real show-stopper for me :-(

Kind regards,

Andreas Rozek

hi

I would be very usefull to have 9-slice scaling in zebra to create component or custom graphic.
http://radleymarx.com/blog/simple-guide-to-9-patch/
it possible use open source tool ( http://developer.android.com/tools/help/draw9patch.html ) to genere image , then import all image by zebra.

:)

If a hidden element precedes canvas element the mouse cursor location is calculated wrongly. Also there is potential issue with dynamic added proceeders elements (should be checked)

removed

It works fine when I statically include a script tag for zebra: script src="http://repo.zebkit.org/pa3/zebra.min.js" /script

However, I do not have access to the static html, so I must load it using JQuery: $.getScript('http://repo.zebkit.org/pa3/zebra.min.js');

This results in an error when I call new zCanvas()

Uncaught TypeError: Cannot call method 'performCont' of null zebra.js:3622:$prototype.layoutSet

Thanks!

In my opinion the design in a framework is essential, therefore a good minimal design like capuccino or sproutcore would be better.

I don't intent to hurt the feeling of the author but I would not use an app with such a design. This is a productive suggestion and you might get a lot more users...

I love what you have developed here and I am very tempted to use it to build my products. There is some feedback I would like to give you about my experience as I review and think about this framework. I know other people are going to have the same issues and concerns. You are close to making this perfect!

Website issues:

1. Your website loads kind of slow in the United States. (It was really slow for me yesterday. It is a little bit faster today.) This gives the impression that ZebKit is slow. This will scare some people away.
2. Your ability to explain things and articulate concepts is very good, even excellent. However, while your proper use of english is not bad, it's not very good either. This scares people away. (I know it shouldn't, but it does.) There's a certain flow with language that some native english speakers could assist you with that would captivate your audience better.

A single solution to 1 and 2 may be to host your website directly from GitHub. This would improve the speed of the website. It would also allow people like me to proofread the wording of all your website's content and create pull requests so that better english is used on your website. GitHub encourages people to host their pages on their platform and has set up a special method for it: http://pages.github.com/

I tried out your demo using the following mobile devices: iPad2, Amazon Kindle Fire HDX, and an Android phone. I found the following issues on all of these mobile devices. What is interesting is that almost the exact same issues were present on all of the devices, which testifies well to the consistency of the framework across all touch devices.

1. The virtual keyboard does not appear when trying to type into the text boxes. This is the biggest killer for adoption on mobile devices. We all know that mobile devices are the future. If there is absolutely no way to get the native virtual keyboard to show up on mobile devices, then you may need to do something drastic, like create your own virtual keyboard control popup. That may sound extreme, but then again, what you are doing to emulate all UI controls is already extreme. This would be more of the same--think of the ZebKit virtual keyboard as just another UI control that ZebKit emulates. As far as designers are concerned, there is a big bonus to this and a great potential selling point for ZebKit: UI consistency. The native virtual keyboards give users a different design experience (depending on what device they use), which drives designers nuts. By adopting ZebKit with its virtual keyboard, designers can ensure a consistent look and feel for the virtual keyboard that appears on their web application. I cannot emphasize enough how important it is for a virtual keyboard to work on mobile devices.
2. When I want to scroll the entire page up and down, swiping up and down across the application is not responsive. I am forced to swipe up and down to the left of the application on the DOM in order for it to respond and scroll the whole page up and down. This problem will block the functionality of a large full screen application that extends its canvas beyond the borders of the page.
3. On the Basic UI tab, the slider is giving me problems. I want to press and swipe back and forth for the needle to move along with the swiping action of my finger, but it only works sometimes. The problem I am experiencing is that the hit target of the needle is too small. When I press on the needle, if I don't hit the needle exactly, it will not follow my finger as I swipe. This is really hard to do with touch screens and nearly impossible with small mobile devices. So, I think it needs to work like this for both the PC and the mobile context: Instead of making the small needle the hit target for swiping action, make the whole entire slider bar the hit target for swiping action. When I lay my finger anywhere on the slider bar, the needle should immediately jump underneath my finger and then track with my finger as I slide it back and forth. The same thing can be true for clicking with the mouse. When the mouse press is down anywhere on the slider bar, the needle should jump underneath the mouse cursor and then track with the mouse cursor as I slide it back and forth. There can be different options available for how the slider could work, but this is the most user friendly one under all the different contexts of usage that applications will face in my opinion. So I would recommend that this be the default behavior.
4. After I tap on buttons, the graphic for the buttons always remains in the down state. At the bottom of the Basic UI tab, when I tap on any of the buttons, they remain dark and do not become light again. This happens on all mobile devices that I've tried and does not happen from a PC with the mouse.
5. On the Panels tab inside of the Scroll Panel sub-tab, in the textarea at the bottom right with the vertical and horizontal scroll with the HTML source code in it, I encountered the following problem. When scrolling the horizontal content to the right, when I get near the end, it jumps back to the left. If I scroll fast, it jumps back to the left very prematurely while it is still in the middle. It should be able to scroll all the way to the right and then stop, even if I continue to scroll in that direction. It shouldn't suddenly jump back to the left.
6. On the Tree tab, the icons that collapse and expand the tree nodes are extremely hard to touch. The hit area on the icons to collapse and expand the tree nodes needs to be increased a lot. (I do like how double-tapping on the items themselves collapses and expands the nodes. This works great except on the iPad2 where double-tapping the items does not work to collapse or expand the nodes. Double-tapping also does not work to start edit mode for the editable tree on the iPad2. This is the only difference between my touch devices that I found.)
7. On Tooltip & Win, when the demo window is open and activated, the X at the top right is extremely hard to tap. The hit area needs to be greatly increased for that to be usable on mobile devices.
8. On Tooltip & Win, I would love it if the tooltips popped up when you touch-and-hold the hit area. That would make tooltips useful on touch platforms instead of not having any way of showing up. And also, the delay on tooltips should be adjustable so that they can show up instantly without delay.
9. On the Designer tab, the blue handles to stretch the different UI components could barely be adjusted at all. The hit target needs to be much larger for these handles.

There's one more thing that might be outside of your control, and that is trying to develop a team of core developers for this framework. You might be the most dedicated and reliable person in the world, but there is no way for us to know that. When there's just one person, it makes us nervous. When we commit to using your framework, the success of our projects depend on updates and maintenance of your framework over the long term. When there's a team of people behind it, we feel more secure about committing to it. Again, this is just something to keep in mind and is not entirely under your control. But by fixing the 11 issues above, you are sure to attract a lot more people, including core developers.

If you can get all of these issues fixed, it will go a LONG way toward the a wider adoption of your framework. I may go ahead and develop something small for my personal use just to see how it feels to develop with it. You have a great thing going on here and I want to see you become very successful with it.

Again, I'm really excited about the future of this framework.

Chrome browser demonstrates poor performance for Canvas.clip() operation. FF and Safari are faster but extensive usage of clip operation also has noticeable influence to rendering performance. The test case is grid component where every cell is clipped before its content rendering. Having ~ 10x50 visible cells can slow down rendering what especially important when a user scrolls up/down grid content.

Partially the problem has been solved by minimizing number of clip operations where it is possible, but more deeper investigation is required. The questions are the following:
-- Can minimizing clip over clip (when we clip over prev. cllp) speed up rendering ?
-- Can offscreen buffer usage solve the problem ?
-- What is about applying global composition instead of clip ?

I can't seem to figure out how to call the constructor for a mixin/multiple inheritance parent. Is there support for this?

Thanks.

I am trying to use zebra as a menu overlay over an existing webGL application. I created a separate canvas element that I am overlaying over the webGL component, but now it appears that I am losing my click and mouse events to the webGL, even when not clicking on the zebra elements. Do you have any suggestions for how best to approach this?

Edit: It appears that when I click over the zebra element, it also passes through to the other element, it is only when I am over webGL canvas that the clicks are swallowed.

Well, I have try to use IME in the text edit box, but failed, the IME wil close when the edit box get force. BUT the Ctrl+C & Ctrl+V works, and font displayed right.

This problem may case by the canvas support by browser?

Click events not working in IE 11. No mouse events are getting triggered.

Upto IE 10, it is working.

Need:

• video layer
• gui layer
• all in one canvas element (i.e. not absolute positing)
  How to made it?

Hi Andrei,

Firstly, Zebra is impressive. I've been reviewing lots of JS frameworks lately, in particular looking for better ways to handle UI, and I finally hit a point where I thought "why is every one of these assuming JS/HTML/DOM/CSS is the way to create a rich UI?!". Googled "JS windowing framework" and found Zebra. My first impression was joy and awe. Finally! Read on for some opinions on why Zebra is awesome followed by an appeal to fixing the one thing that makes it a non-starter.

Zebra addresses a few things that to my knowledge no other framework does, which makes it potentially an important piece of the Web/Mobile ecosystem. These are probably obvious but worth underscoring as unique aspects of your framework:

• A UI framework that does not try to mask or contort DOM manipulations as the basic underlying engine. DOM is good okay for essentially text-based, heirarchical documents, and some web apps are just much more interactive documents. But for "rich" data that is not text-based or not heirarchical (and where the interaction paradigm is not simple CRUD), all attempts to force this model result in excessive complexity. Even with clever approaches like FB's React.js that aim to get 60fps by minimizing DOM updates, the structure is not suited to writing, say, Photoshop or Garage Band.
• Allows a much more OO approach to UI components. Many if not all frameworks out there assume the same underlying reality that logic belongs in JS, layout/structure in HTML, and "styling" in CSS. (Unfortunately "styling" increasingly includes layout, visual behavior, interactivity...). This means invariably you get the ever-praised "separation of concerns" (MV_) tied to this artifical way of separating concerns. Your FooWidget *can_ own its own JS file, HTML template, separate CSS (assuming you will concatenate all these as part of a build process). And in theory this is a good thing, as "designers" are separated from "developers". In practice though, it makes it more cubmersome to separate concerns by functional blocks. That is, to have all the logic, structure, and if desired, custom styling of the FooWidget in one place. Zebra's approach nicely allows this entirely in JS, or via loaded JSON per component, or both, and/or with "site-wide" styling applied. IMHO this is much more flexible than the inherently screwy relationship between JS/HTML/CSS.
• Gives developers much more control over the appearance across browsers and devices. <canvas> is a lot smaller (and consistently supported) platform to rest on than all the variations of other DOM elements.
• Uses familiar paradigms. This is arguably a good and a bad thing. Is Zebra too Java-like in its approach? Is it not idiomatic Javascript? Maybe, but then I found it a lot more sane than most frameworks for approaching a GUI. Lots of developers have used Swing, Qt, Flex, etc. and could adopt this framework more easily than those that essentially require learning a new language built on top of JS.
• Performance. On this one, the 20fps throttling (which another contributor commented on) is a little concerning. But in theory, rendering to <canvas> avoids the overhead of DOM reflow/repaint, and also in theory, replacing the underlying renderer with WebGL is not a hard problem, given the time.
• Lastly, because of all of the above -- and this is the killer selling point for me -- Zebra allows an app with very rich, not text-based, not rectilinear, not heirarchical data (e.g. maps, musical scores, image editing, audio DSP chaining, ...) to use the same GUI framework to also render standard widgets.

The last point is huge. There are a LOT of apps out there that use the same herd of JQuery UI or Twitter Bootstrap widgets to prettify what are essentially CRUD applications. They may pull in another library like Google Maps APIs to include less "CRUDdy" types of data and presentation, but those are the exceptions. And then there are a LOT of apps that are rich, dynamic visualizations. Of these, how many even have standard widgets like menus, input forms, toolbars? If they do, they may use an IFrame approach, or separate the widgety parts from the rich parts in presentation and in code. This can lead to headaches as separate frameworks (and paradigms) are needed to bridge form the two, even though they are intrinsically in the same domain (whatever the application does).

Sorry for the long (praising) rant, but all of this is to underscore that Zebra, in theory, offers a lot of things much needed to Web/Mobile developers. Is it perfect? No. It has bugs, it maybe has some outdated ideas (though honestly, it's got some forward-thinking ideas and just ideas not seen by the JS world as much too). But its potential is great.

Alas, I am hesitant to use it at all. As @DavidPesta wrote, the sole maintainer problem is a big barrier, not only because people worry what happens if you get hit by a bus or your work requires you to drop support, but because it is fundamentally impossible for a single person to maintain a widely used framework. And that means, to potential adopters (like me), it's a non-starter because no matter how useful, elegant, well-documented it is, they know they're banking their app's future on something that is statistically likely to turn into abandonware. Also, they know that there will be bugs that cannot be resolved, or cannot be resolved easily/quickly enough to warrant. And unfortunately they don't know in advance where those gotchas are, know there's a safety net if/when they encounter difficulties, because there's little to no community.

I believe you understand all of this already. And presumably, you cannot devote any more energy to Zebra than you do. What you have is very impressive and clearly you are devoted to improving and maintaining the framework. But, presumably, your job is important and offers way more income than an open source framework would. Possibly you also have a life aside from these :) I also imagine that as a personal project, having very strong control over any changes is important.

I would like to politely suggest that you consider the benefits of rechanneling your energy with Zebra from core developer to benevolent overlord. That is, focus on bringing other contributors on board and building community. This could mean giving up some or all available cycles to adding to the code (though in the long run I'd bet it would free up cycles as I'll explain). And it would mean engaging in politics and such that, if you're like me, you avoid when possible. But consider the benefits:

Zebra gets improved by people with differing experience or use cases. Improvements to performance, APIs, documentation are a good thing.

Zebra gets buzz, and more people use it. Maybe you aren't concerned with this last piece as much as developing a personal framework for its own sake. I'm sure there are people using Zebra already (showcase?). But when I say "more" I mean putting Zebra on the map alongside JQuery, Angular, React, Meteor. Not for fame and glory but because there's a real need there that Zebra can help fill. If its supported by not just you, it can fill that need better and sooner (and, maybe, provide some fame and glory, which can lead to money (which leads to suffering!!)).

Meteor is promising for realtime apps. React is promising for speedy apps that fit within a hierarchical document model. Angular is promising for people who want to practice real-world computer science to validate input forms with tons of unit tests (I kid, I kid...). JQuery, Underscore, Backbone and other older libraries all still serve purposes for specific problems. None of these addresses the needs of rich application GUIs. There are Myriad libraries for doing graphics -- Raphael, Create.js two name a couple. And there are game frameworks, which may offer rudimentary widgets for menus or buttons. But for more productive applications, how does one create a rich GUI for the web or mobile? Many things point to Javascript/HTML5 as the future for app development. It's ubiquitous and platform and tooling support are accelerating.

This is far too long (especially for an "issue"). But it's meant as a strong appeal. Consider whether you could devote the time you now spend updating Zebra to engaging the development community. Solicit and respond to pull requests. Focus on documentation (which as it exists is pretty damn good, by the way). Require contributions to pass tests, and non-trivial contributions to add tests. Build a forum or a wiki or whatever suits you. A community of users and contributors can form on its own but it requires someone doing these pieces. It does not require you to relinquish control over the design and philosophy of Zebra. There will be contributors who make you feel less smart. There will be trolls and people who annoy or complain (cough). But if you have these problems, it means Zebra is growing.

I really hope you will consider such a shift in your focus, as I would love to be able to use Zebra in my own projects. I think a LOT of developers would feel the same way as me (many have never even heard of Zebra). I may carve out a little time to play with the framework, maybe even build an app for my own use because I love to learn new things. But as it is right now, I doubt I will risk building an app for public consumption, as I just need to know the technologies I'm using are and will be supported.

As a maybe salient final point -- I would just fork Zebra or use it as the basis of building my own GUI windowing framework on top of <canvas> except that it would take me years to recreate the amount of functionality, design sense, and wisdom that exists already in your framework. Consider what you have there, and how far it could go. Do not underestimate the power of open source.

Cheers!
Jason

Hi. What's the proper way to implement a modal mode (catch all events) for a UI component? I've been messing around with showModalWindow, and it hasn't been going well.

Thanks!

HI :)
I'm try to develop an app with ponegap so I have to work with default android browser :((( .
I test richui.mobile.list.htm and I find :

1. to see the page I need to touch the screen at the start
2. some time the page is stretched , particularly whe I change rotations

new test
I have one 4 button with mousePressed and one text for log event , I put these code to monitor event
///////////
zebra.ui.events.addListener(new MouseListener([
function mousePressed(e) {

                        log('[mousePressed]-> '+e.source)
                        },
        function mouseReleased(e) {
                        log('[mouseReleased]-> '+e.source)
                        }
                ]));

///////////

I see that some time the mouseReleased non log , example
(Every button log userAget)

click on button 1 log:
"Mozilla/5.0 (------------"
[mousePressed]-> $zObj_685 -----> btn1

then click on button 2-----

[mouseReleased]-> $zObj_685-----> btn1
"Mozilla/5.0 (------------"
[mousePressed]-> $zObj_686-----> btn2

then click on button 3 -----
"Mozilla/5.0 (------------"
[mouseReleased]-> $zObj_686-----> btn2
"Mozilla/5.0 (------------"
[mousePressed]-> $zObj_687-----> btn3
[mouseReleased]-> $zObj_687-----> btn3

new test

I try to load richui.demo.html on mobile but don't see the application.

hope to help you ...thanks

license.txt has a copy of LGPLv2.1. readme.md says
"Lesser General Public License (LGPL) and MIT for academic projects"

Does that mean:

1. LGPL, or {MIT for academic projects only}, or
2. "LGPL for academic projects only, or MIT for academic projects only"

What does "for academic projects" mean (what is an academic project)?

Since neither LGPL (including the version in license.txt) nor the MIT license as commonly understood have any limitation to "academic projects", are you aware of that and are trying to modify these open source licenses so that your project can only be used by "academic projects"?

If the correct interpretation is 1) ("academic projects get special permission to use MIT instead of LGPL"), does this mean that any distributee of the academic project that is not an academic project has to revert to treating the license as LGPL, or do you mean something else?

Do you have plans of using TypeScript language instead of JavaScript? Or provide DefinitelyTyped interfaces?

If you load the demo, it fails to show up in either IE9 or IE10.

The example code for the tab pane component in ui.js at line 4046 (https://github.com/barmalei/zebra/blob/master/src/ui.js#L4046) has a typo, it's missing the "new" operator.

It should read: "var tabs = new zebra.ui.Tabs();"

Image elements can be scaled arbitrarily, but they can't be rotated at the moment. It would be great to have such a support.

Maybe it's also possible to have rotated widgets in general? (textboxes, label, etc)

The Zebra code is littered with calls to Event.stopPropagation(). Web pages using Zebra UI are among the most likely to want to capture certain events globally to prevent their default effects, as well as perform other tasks. For example, to prevent the backspace key from navigating back or "ctrl-r" or the F5 key from performing a refresh. or to use "ctrl-s" to trigger a custom save routine. These handlers will never fire while a Zebra managed canvas is focused

Having to set up additional handlers per-canvas to get these events is wasteful and leads to unmanageable code.

While changing the event bubbling behaviour constitutes a major "binary" break, it should at least be made configurable in the zebra.json file, even if the default behaviour remains preventing event propagation.

Okay. First of all I'd like to complain how there is an issue entry in github asking for a user forum and pointing to http://www.zebkit.com/ask/ but then when I ask a question it'd tell me that user registration is disabled. So, I can't really ask a question there.

Now for the actual issue.

There is only so little documentation on how to use tabs. I couldn't figure it out.
I had a look in the docs at http://repo.zebkit.org/latest/api/classes/zebra.ui.Tabs.html but it wouldn't tell me how to actually USE them. I managed to put a Tabs instance on my canvas (since there's example code on how to do that) but there's not a single line of text explaining how to use tabs, how to add tabs, how to name tabs and how to fill tabs with content. All I find are attributes and methods that are no use for these tasks. All I get is nothing.

Touch events shouldn't preclude normal mouse events, since some devices (many windows 8 laptops, for example) have both a mouse and a touchscreen. One solution is to treat mouse events as touch events internally, though simply adding both handlers at the same time might work (at least until the next time a browser vendor updates their pointer events api :P ).

Extend Zebra IO package with communication classes to support interaction to XML-RPC and JSON-RPC remote services.
The code should look lie as follow:

// JSON RPC
var remoteService = new JRPC(url, ["method1", "method2"]);

// call remote methods
remoteService.method1(1, 2);
remoteService.method2([1,2,3,4]);

If you use Microsoft IIS as your main web server
you will need to add the MIME type for jason

File extension = .json
MIME Type = application/json

Is it necessary for Panel.repaint to be asynchronous? We're composting zebra over WebGL, and this produces flickering. Can we have an immediateRepaint method, at least?

Thanks.

How is the recommended way to have a file upload field?

Zebra UI engine is powerful but small package that can be used as basement for various graphical tasks and custom UI development. Zebra engine provides:
-- UI components layouting and set of predefined layout managers
-- UI components painting control
-- UI components events handling
-- UI Layers
-- Focus behavior customization
-- Many UI view elements to render pictures, texts, borders, colors etc
-- And so on

Firefox, Safrai and IE11(my only tested version) work OK with Zebra
But Chrome with touch screens fails to read mouse events.
I think its just the event order?
Touch/Mouse on Microsoft has a common class but the others still treat
mouse and touch as different events.
For none multi-touch events I send them off to the same handlers.
I have not looked at source yet?

Hello!

As it seems that I'm starting to pollute this "issue" list with announcements and other stuff, the question arises if there is an "official" forum for Zebra? A forum would be much better suited to "informative" contributions and leave this "issue" list for actual "issues"!

Kind regards,

Andreas Rozek

I can't change colum width when I set setUsePsMetric, what I would like is that the default width of a column is according to content (strings), but changeable by the user.
Happens in Chrome,Safari,Firefox on Mac OS X Maverics

var header = new zebra.ui.grid.GridCaption(headerModel).properties ({
            isAutoFit: true,
            istResizeable: true
        });
grid.add(zebra.layout.TOP, header);
grid.setUsePsMetric(true);

BTW, how to make the grid sortable? I tink setSortable (0,true) failed.

It looks like zebra.ui.Label.setValue doesn't actually handle TextModels as suggested in the documentation. I can give more details if you can't reproduce.

Hi. I need windows to activate on mouseover (and auto-unactivate on mouseout). How should this be done? Should I add the functionality to WinLayer, or should I write a new BaseLayer? I plan on submitting the final patch for review, since this is a pretty important thing to have, I think.

Hello!

How can I enforce that a given Panel is redrawn? I thought, "repaint" would do the trick - but it doesn't.

Concrete example: I'm loading an image myself using loadImage and want it's "container" to be redrawn automatically as soon as the image becomes available.

I already tried setPreferredSize (shouldn't this trigger a new layout?), setPreferredSize + invalidate, repaint, vrp...but nothing seems to work reliably.

Any hint would be greatly appreciated!

Kind regards,

Andreas Rozek

First of all, excellent work! Sad that it does not yet support touch devices - tested on Windows 8 and Windows Phone 8, clicks/taps are handled very erratically.

See http://blogs.msdn.com/b/ie/archive/2011/10/19/handling-multi-touch-and-mouse-input-in-all-browsers.aspx and http://blogs.windows.com/windows_phone/b/wpdev/archive/2012/11/15/adapting-your-webkit-optimized-site-for-internet-explorer-10.aspx - should be straightforward to implement.

Also, it would be interesting to have a soft-keyboard handled by Zebkit itself - to resolve problems observed with Android fullscreen webapps, for example.

I want to know whether it supports animation?

I have a server-side log I want to show. I want to colour the log lines, and I've worked out how to do that by overriding a label's view's paintLine(). I long-poll the server and get new log lines as they are generated on the server, and the server is responsive.

As the log grows, the number of lines grows, so I try to append the new lines to the multi-line text model by messing with the model's internals. This also seems to work.

My only problem is if I place this label in a ScrollPan. When the label grows, often the scroll bars completely mess up; there is a pause - several seconds - and then sometimes they jump back to the middle, sometimes the thumb gets longer rather than shorter, often the bottom row is not entirely visible etc.

I have used Chrome's profiler and its not showing any time being spent anywhere. The browser is nice and idle and the longest times are in milliseconds.

The behaviour I want is if the user scrolls to the bottom of the log they follow the bottom.

Here's my complete code:

zebra.ready(function() {
    eval(zebra.Import("ui", "layout"));
    var canvas = new zCanvas(400, 400);
    canvas.fullScreen();
    var root = canvas.root;
    var log = new zebra.ui.Label(new zebra.data.Text("Internal Log"));
    root.properties({
        layout : new BorderLayout(8,8),
        border : new Border(),
        padding: 8,
        kids: {
           CENTER: new zebra.ui.ScrollPan(log),
        }
    });
    var log_update = function(ofs) {
        var req = new XMLHttpRequest();  
        req.open("GET", "/api/log?ofs=" + (ofs || 0), true); // get delta
        req.onload = function() {
            var model = log.view.target;
            var start_line = model.getLines(), start_ofs = model.textLength;
            var resp = JSON.parse(req.responseText).log;
            for(var row in resp) {
                row = resp[row];
                ofs = row[0] + 1; // where we fetch from next time is row after this
                var label = row[1];
                row = row[2].replace(/[\s\r\n]+$/, ""); // trim last \n only
                var i = model.getLines();
                model.parse(i, row);
                model.setExtraChar(i, label); // stuff extra info into the 'extraChar' field
                model.textLength += row.length;
            }
            if(start_ofs != model.textLength) {
                model._.textUpdated(model, true, start_ofs, model.textLength - start_ofs, start_line, model.getLines() - start_line);
                log.invalidate();
                log.repaint();
            }
            log_update(ofs);
        };
        req.send(null);
    };
    log.setFont(new zebra.ui.Font("Courier New", 14));
    log.view.paintLine = function(g,x,y,line,d) {
        var colour = {
                web:"rgb(255, 80, 200)",
                sim:"rgb(0, 200, 80)",
                client:"rgb(80, 0, 200)",
            }[this.target.getExtraChar(line)];
        if(colour) g.setColor(colour);
        g.fillText(this.getLine(line), x, y);
    };
    log_update();
});

Hi, while typing the cursor position is going far from writing position and when I click to text and press backspace it happens that I delete on wrong position (nearly 1 letter distance). I got also impression that distance changes a bit depending on paddings or borders I use in parent panels. Any Idea to set that correctly?

hi

I have:
var txt_model = new zebra.data.SingleLineTxt('hi') ;

var viewTxt = new TextField(txt_model )

but when update the model txt_model.setValue('hello') the view don't change, it change only if it has focus ..

the problem in between zebra.data.Text() and zebra.ui.Label() too .

thanks

I'm having a few issues with ScrollWheel. First, there is a bug in Chrome where an offset of 100 is zeroed, I'll be submitting a patch for that in a little while. Second, why is there no scroll wheel event type? Why do we have to go through the ScrollPan interface?

Anyway, I ended up writing a ScrollPan stub to translate scroll events, but it's extremely clunky.

Thanks.

Hi all,
I'm developing offline app using Chrome (it's actually https://github.com/rogerwang/node-webkit but nevemind) and i face the issue, that zebra.io.SEND cannot get local config-files (like canvas.json).

Chrome can get them (responce and responceText are filling normally) using flag --allow-file-access-from-files, but the responce code (status) in XMLHttpRequest is 0. In Zebra i found this code:

        if (callback == null) {
            if (r.status != 200) {
                var e = new Error("HTTP error " + r.status + " response = '" + r.statusText + "' url = " + url);
                e.request = r;
                throw e;
            }
            return r.responseText;

That means status code MUST be 200 to initialize library. In my case this is impossible due to the files are stored locally.

Any tips how can I use this library in my local (offline) app?