How to align an image in Qooxdoo? - javascript

I'm currently creating a new Qooxdoo application, and have setup a layout similar to the Feedreader demo, with a banner image across the top (logo etc). I've had no problem adding the image into the javascript but cant for the life of me find a way to have it right-aligned on the screen. I've tried using various layout options, vbox, hbox, atom etc but no joy.
Unfortunately because of the perl-based compiler I've been developing this on my laptop at home rather than on the web server so I can't paste in my code at this time.
Any ideas?
If not, I'll post the code later on.
Thanks

Did you try a simple canvas layout and align the logo on the right? Just check out the playground sample over here: http://tinyurl.com/cuufhmh

Related

How to create full page capture screen from onepage and horizontal scroll applications?

How to create a screenshot of an application that has horizontal scroll or scrolling in the form of a slider?
I would like to take a full screenshot, not just the first screen. For example, from applications like below.
https://piscinasdecemento.com/
https://studiochevojon.com/
Is it possible?
I worked on a similar project with HTML 2 CANVAS. it's a powerful library for generating images or pdfs from webpages. Good Enough you, don't need any backend to do this. Only Javascript is needed (add some JQuery if you want).
check it out here
https://html2canvas.hertzen.com/
You can also try out other Javascript Libraries similar to html2canvas
here https://openbase.com/categories/js/best-javascript-screen-capture-libraries?orderBy=RECOMMENDED&

AFrame - Is it possible to replace the marker with a custom image without the black border?

I know we can generate a custom image using this link.
But the point is, I want a custom image that does not have any borders. With the link provided you can generate a custom image or .patt file with a black border around that image. It is applied to every image that is uploaded. The thing is, I want to use that image the way I want without the border as is shown. So my question is, is this possible in AFrame?
If not, please suggest me any other library or any other process that I can use to achieve this, if this is possible at all.
Update: Please look at #kalwalt's answer below. It is possible now.
currently it is not possible to use markers without border using jsartoolkit. There has been work to enable this. You can have a look here: https://github.com/artoolkitx/jsartoolkit5/tree/nft
However, that only performs on desktop not mobile.
Another way could be using OpenCV.js template matching: https://docs.opencv.org/3.4/d8/dd1/tutorial_js_template_matching.html
cheers
The NFT feature that Thor_Bux mentioned is merged on the master branch of artoolkitx/jsartooolkit5 and also in the new AR.js repository.
You can find the Ar.js documentation at:
https://ar-js-org.github.io/AR.js-Docs/
Image Tracking (NFT):
https://ar-js-org.github.io/AR.js-Docs/image-tracking/
Note that Ar.js is under a new github organization and any collaboration is very welcome.

Full screen photo viewer

I have a table set up on a website I use it to display 9 images with descriptions. I want to be able to click on an image and have it be displayed larger like in a gallery but i would like to not have it change the layout of the page.
I am just starting to work on this web page so almost any way to do this will be helpful.
Lightbox is a pretty commonly used one, but I'd suggest you try and build your own. It's not a terribly difficult thing to program and it will help you grow as a programmer.

Javascript/HTML5 Image Viewer with Labels

I am reconstructing a massive collection of medical modules that were created in Flash. All of the modules are being redesigned for cross platform enjoyment (js and HTML5). I have been searching for a library or plugin that will add arrows(with rollover capabilities) and text above an image when the user clicks a button. I have had little luck.
The closest package I have found is Zoomify, but it's still not what I am looking for. They are asking for too much money for maximum development capabilities. I was really hoping to find a JQuery plugin or javascript library that would allow me to fully customize the interface. Here is a screenshot of an OLD FLASH module:
The red arrow corresponds to the link selected on the left. The new design is much more appealing but the underlying idea is the same, click buttons point to the objects.
If there is no such library or plugin should I create a simple javascript image viewer and store overlay coordinates in a database? Or is that overkill? I have hunderds of these things to do... maybe thousands :( Any help/direction would be greatly appreciated.
What you are asking for is provided by CSS, which enables one to place text directly on top of an image or other rendered HTML. The key CSS properties to investigate are:
position set to 'absolute'
values for at least two of top, right, bottom or left
use z-index to specifying layering/order
Lightbox is a good option "Lightbox is a simple, unobtrusive script used to overlay images on top of the current page. It's a snap to setup and works on all modern browsers."

JavaScript library or code to track user clicks to generate heatmaps

Is there any JS library or code available to track user clicks? We'll use this to generate heatmaps using Heatmap.js.
This JS lib/code is supposed to work with fixed and liquid CSS layouts, cross browser, and different screen resolutions.
We have tried some simple tracking code, but it's not tracking the click positions properly for different screen resolutions and layouts.
I just wanted to check if something like this already has been implemented so that we can avoid reinventing the wheel and save time.
Any help, links, suggestions are much appreciated.
Thanks.
I found this website today searching for the same thing : www.crazyegg.com however I think you should "buy" their services instead of just importing a .js .

Categories

Resources