I have 50 local HTML files. I want to show these in scrollview or list. I tried by stageWebView. But it shows always on top of the stage. is there any way to do this. if it is possible in mxml na also, tell me...
(In mxml, i tried with mx:HTML but its not working in device. its working in desktop oly.)
QNXStageWebView is a native component, not a Flash display object, so there's no way to put it in the middle of the display list, sandwiched between other layers.
Your choices are to display on top, or to display behind the entire stage. In the latter case you would of course want to make your background transparent, but then draw a non-transparent "frame" in all the regions not covered by the QNXStageWebView.
Until the native SDK is available it's extremely unlikely there will be any "fix" for this, and even then it may have similar restrictions.
Related
I can share the code if needed but it felt like a lot to share to start, so I'll try to explain narratively. I am creating an interface to display network data (as you might have guessed from the title). My first issue has been going on for a few days where visIgraphLayout is not laying out my visual correctly. Regardless of using "full" or "square" as the "type", the network map extends beyond the edge of the display space. When I resize the interface window, then the map will snap to full. Why won't it simply resize automatically? If it matters, I do have the output space in a box element. Also, I have the layout styles working off radiobuttons, and when I switch between styles the map goes beyond the edges again.
Part 2 begins. While the above problem is annoying, it was livable. However, a new wrinkle popped up. I added some font size control to my visNodes code - i.e., radiobuttons set to switch between off (0), small (5), standard (14), and large (40) font size options. Once I implemented this code, when I resize the interface window, now the network map disappears completely after initial load. If I select a new label option, it will redraw but beyond the edges of the space.
All the issues resolve themselves if I ditch the visIgraphLayout, but then I lose the layout functionality which I really like.
I hope this is clear enough. I really appreciate any insights the community might provide. Be well.
I think I have figured out an answer. Long story short, certain pieces didn't work and play well with others. Went through and build it again, and all it good.
Cheers.
Here is the desired outcome I'm looking to achieve by scrolling using react-scroll-parallax.
On Mobile browser
View web browser example here
Description
I want to create a website with the parallax affect shown above. The key elements being a website build in react containing three pages.
While scrolling from Page 1 to Page 2 I want the mobile device mock to start halfway on the screen (as to avoid the other content of page 1), then move to being basically centered.
While scrolling from Page 2 to Page 3, the website and components stick and once again act like a normal website scroll.
Additionally, during the scroll from Page 1 to Page 2, I want the content inside the device mock to scroll as well.
What I tried
For starters I was able to get nearly the affect I wanted by using a div with it's z-index and absolute position set, and parallax on translateY of -50, 125.
<div className={"absolute z-10 w-full"}>
<Parallax translateY={[-50, 125]}></Parallax>
</div>
The problem became however when I wanted to place content inside the div. Having another div within the parallax that also had z-index set seemed to mess with the parallax affect.
Important notes
Content inside device mock
One issue I found that was tricky was trying to place the content inside the device mock. I want a parallax both on the device mock itself, and the content within it.
I'm not entirely sure how I should crop the content inside the device mock.
The device mock svg frame and device mock mask can be found here if you want to give it a try
Device mock svg and mask
I tried imgs with various z-indexes, masking the div with an svg mask, using image backgrounds. Nothing is quite getting the preferred outcome.
Scaling of device mock
I want to make sure this works well on both mobile and browser. With that said I was trying to use margins to scale the device mock but I had a hard time with trying to then correctly get the mask to work for the content within the mock.
I'm not sure if using dedicated width and height sizes would be the ideal way to go, but very open to suggestions! It seems hard to scale the device frame and the mask properly.
Parallax of device and parallax of device content
I want the content inside the device mock to be html so that I can change it more than just an image. That being said the most important feature I want is for both the device and the content inside to have a parallax scroll affect.
Summary
I know this is a bit much for a quick simple stack overflow issue, but I've been trying a lot to get this to work and just can't seem to nail down the little details correctly. I sincerely appreciate all help and suggestions and if there is anything else I can provide please let me know!
The trickier part of the request was blowing up the <svg>, adding new <path /> and <clipPath /> for the color swap inside the phone mock.
Eventually I got it working here. The part linking the clipPath transition to the scroll progress looks like this:
const [y, setY] = React.useState(1739);
const onProgressChange = React.useCallback(
(a) =>
setY(Math.max(Math.min(1739, 1739 - ((a - 0.24) / 0.0018) * 17), 36)),
[setY]
);
const { ref } = useParallax({
translateY: [0, 185],
onProgressChange
});
The 1739 and 36 are max and min values for the translation and they are strictly related to the svg's viewBox. The other values allow tweaking the start, end and speed of animation, with regards to overall scroll progress.
This, together with some CSS, took care of binding the right animations to the correct scroll progress.
Feel free to tweak it some more, especially if you add more markup.
The other thing I wanted was a function activated shortly after scrolling, which would snap the scroll to certain positions. Namely, to the .page elements.
I used gsap's ScrollTrigger plugin for the task, for multiple reasons:
I'm somewhat familiar with it (used it before)
it's performant, light and non-obtrusive (basically quits when it detects another user scroll)
listens to all relevant events (touch, mouse pointer, keyboard) without me having to make sense of them, providing a unified interface.
uses inertia (if you scroll down faster from page 1 it will scroll past page 2, directly to page 3 - other scroll plugins limit you to having to scroll once for each page change)
works well on mobile devices
There are other libs/plugins out there for the task, you don't have to use gsap (although I do think it's awesome). If you end up including it in your project, make sure you comply with their licensing (which is not MIT).
By the way, my first choice for the parallax effect per-se would also be gsap, as their timelines provide a lot of flexibility and options.
Their most advanced stuff is reserved for subscribers, but even if you limit yourself to the free plugins, you're still getting more than from alternative libs/plugins, IMHO.
See it working.
I am designing my app UI with the GUI Builder. I created a new Form and defined a style as follow :
FinishFlagIcon {
background-image: url(pics/FinishFlag.png);
cn1-background-type: cn1-image-scaled-fit;
cn1-source-dpi: 320;
font-size: 11.9mm;
}
I set this style on a label and it appears on the GUI Builder.
However when I launch the project in the simulator it does not appear anymore.
I also tried to use a Scaled Label and defined the icon as FinishFlag (which was present in the res file), and again it appeared in the GUI Builder but not in the simulator. Of course there is no error printed in the console telling me the file could not be found.
Please note: the res/myCustomTheme.css folder holds all the subfolders related to the png (and those subfolders are populated with low to hd pngs) and the src/theme.res has the pictures (folowing Shai's advice) :
So what should I do to make the picture appear in the simulator ?
Edit : I tried to hand code the UI and added a Label (with the UIID defined above) to the the central area of a BorderLayout. I does not appear either until I add 3 spaces or more to the Label. I did not try again with the GUI Builder. It looks odd to me, is it done on purpose ?
Edit September 13th 2017 : If I build the app and open it on a real Android device then the labels appear.
Edit September 15th 2017 : For people having the issue of component not showing, as advised in the accepted answer the solution consists in removing top or bottom constraint of the component not showing and setting it to auto (click on the lock) so that there is enough space for the components. So eventually after setting to "auto" the bottom constraint of the progress bar an labels the expected result appear on the simulator :
Any help appreciated,
The images in your issue are a red herring. It looks like the problem is with your layout insets. Notice that none of your lower components are showing up in the simulator. The "progression" label, the three zeroes, etc...
I can't see the constraints you are using for the flags or the zeroes labels, but I can see that the "progression" label has fixed insets on both top and bottom. This may result in a zero height if there isn't enough space for it. Try changing either the top or bottom insets to "auto" so that they are flexible.
Try changing the simulator to use the desktop theme so that you can resize the window and see how the form looks at different sizes.
You can also easily verify this by overriding the layoutContainer() method of the form, and check the height that your flag label is getting:
public void layoutContainer() {
super.layoutContainer();
System.out.println("finishflag height: "+gui_FinishFlag.getHeight());
}
I'm not sure what's the "right" solution for this so maybe Steve can interject but this is what's happening.
You have two resource files: theme & theme.css.
The images in theme.css work great for your styles. However, since the loading process loads theme and not theme.css the simulator is unaware of these images as the theme res file doesn't know of them.
The GUI builder is probably scanning all the res files here so it lets you do that which might be a mistake... You have the following options to workaround this:
Load theme.css and discard theme - you will need to define the inheritNativeThemeBool flag and should no longer use the designer tool if you take that approach
Use the designer tool to load the images rather than CSS
Explicitly load the css res file using Resources.open and explicitly pass it to the Form
Explicitly load the css res file using Resources.open and set it as the global resource file
A customer has asked us to a add a feature to his website allowing visitors to colour in panels in a simple line drawing.
The website visitor will have a limited palette to choose from and will select a colour and click in a shape within the line drawing to colour it in as in:
There will only be four or five of these line drawings. The drawings themselves are not required to be interactive or flexible, only the colouring.
The line drawings will be super simple and we don't need to save the visitor's selections although the visitor will want to print or email the result.
Simple simple stuff. Most of the time where you see this done on sophisticated websites I assume it's done with Flash.
But is Flash the only way to go? Or can it be done with JQuery/Javascript or Silverlight or something else? Our team's knowledge covers ASP.NET, HTML, CSS, Javascript. No experience of Flash.
If you have a finite number of line drawings, and a limited number of colours, you could just pre-generate every possible colour/section combination - isolate each area as a transparent GIF/PNG and composite them using position:absolute to create an "onion skin" / animation cel effect. Use some old-school HTML image-map code (or server-side parsing of the myimage.X / myimage.Y parameters, or jQuery) to work out where they clicked, identify the image section under the mouse click location, and replace that image only with the corresponding version in their selected colour.
You can't draw these kinds of shape without using canvas or SVG. And I am not sure about the support provided by browsers for these.
If you can go for canvas then you ca ntake a look at
Processing js library
or for SVG
Raphaël—JavaScript Library
There are only two ways i can think of atm:
Split the line drawings into the colourable elements and show each image absolutly positioned to merge the images into one on the website.
Use Javascript to load a pre-coloured image of that part with "onclick" (or generate a coloured version with asp/php/whatever server-side.
Not sure if it's possible to print absolute positioned elements cleanly.
Use flash, it's simple there so even without experience you should be able to do it in 1-2 workdays.
My guess is that you could use the new HTML 5 canvas element to achieve this goal in an open, standards compliant manner.
Note: canvas is a new feature and is only supported in recent browser releases (latest Safari, Firefox or Chrome for example).
Facebook Connect uses JS/CSS overlays/popups for user interaction. I have sites with Flash elements, and no matter how I set the z-indices, the Flash always seems to go to the top.
I have a similar and likely related problem with a div with display:fixed at the top of the screen, where it gets covered by the Flash when you start scrolling.
How can I make sure the Flash element layers properly?
If you just need your flash to fall behind other object then you should use wmode=opaque. This will correct the z-index.
wmode=transparent will also correct the z-index but it also makes your stage transparent so whenever you have nothing on the stage or gaps between objects your html will show through underneath. This in turn causes more system strain.
Ergo if you just need the z-index correcting use wmode=opaque
Generally, I've needed to set the wmode=transparent property on the Flash object and/or embed string.
http://www.communitymx.com/content/article.cfm?cid=e5141