I'm trying to display a Globe with points on it that open a card when clicked.
I kinda try different approaches and came up to this result : http://lefutoir.fr/timac/v1.html#
I'll need to put an HD texture of course but my main issue is that I have z-index issues. When I open some cards they are below other because of a z-index passed when they are created. I can't find any way to get control on that z-index to make it super high when I open a card.
If anyone there could have an idea that would be awesome. Tell me if you need the code I'll copy there but it's quite long.
Thanks a lot !
I want to make the open card on top of the other dots.
It looks like you're using a third-party library called three-globe, so it's hiding a lot of the mechanisms from you. I recommend you build your CSS3DObjects so you have more control over them, like in this example.
The problem you're encountering is that each dot has its own card, so when you open a card, it will almost always have subsequent dots on top of it, regardless of Z-indexing:
<dot>
<card>
</dot>
<dot>
<card>
</dot>
<dot>
<card>
</dot>
What you should do is create all the dots first, and then the cards, so the cards will always be displayed on top.
<dot />
<dot />
<dot />
<card />
<card />
<card />
Related
I used Factor of RelativeLayout in Xamarin.Forms a lot, this way my app UI scaled properly on any device. RelativeLayout is not recommended for use anymore and no replacement offered, so I wonder what would be techniques to indicate for example I want the xaml element to occupy 80% of it's parent element (container)? Should I calculate real width/height of the container in the runtime, depending on the device resolution? Or there is a better solution? I just can find nothing close in .Net Maui to what RelativeLayout+Factor allowed me to do in Xamarin.Forms.
I fear right now there is no way except Creating your own derivate of a Relative Layout. I've got the same problem of converting a Xamarin App to MAUI. There we did use a relative Layout to display various machines at their respective positions inside a building.
I found a few examples on how to create a custom layout here.
I would not recommend using the compatibility namespace. For me it makes problems and upon activating it, some of my page content is no longer displayed.
Hope this helps at least a little.
One option is to use the Grid layout with ColumnDefinitions="*,8*,*".
Place the content in Column 1.
AbsoluteLayout and RelativeLayout now exist only in the compatibility namespace, you can update your code to use them by adding the new namespace, and prefixing your XAML references:
<ContentPage
xmlns:cmp="clr-namespace:Microsoft.Maui.Controls.Compatibility;assembly=Microsoft.Maui.Controls"
...
>
<cmp:AbsoluteLayout>
<BoxView
Color="Red"
cmp:RelativeLayout.XConstraint="{cmp:ConstraintExpression Type=Constant, Constant=0}"
cmp:RelativeLayout.YConstraint="{cmp:ConstraintExpression Type=Constant, Constant=0}" />
</cmp:AbsoluteLayout>
</ContentPage>
Long ago I searched on Internet for a SVG image plugin and found that one, which is almost broken, outdated and thus unusable. Is there any other plugin that I might miss that allows to show SVG images and works fine with recent Nativescript version?
For anyone still struggling with this, there is another route you could take. What ended up doing was converting my svg files into a font file (.tff). My svg files were simple, so I'm not sure if this will work for every case, but at least it works for using icons. It's really easy to convert svg files to a .ttf file. I used this online tool converter, then I added the file into my nativescript app/fonts folder. Now I can use a label like this to display the svg files:
<label
style="font-family: yourFontFileName;"
text="A" //This will show the icon mapping to the letter 'A'
></label>
It's also worth noting that since it's a font, you can change stroke color, and size.
Note: Android uses the file name as the font name, while IOS has its own font name. To find the font name you can just open your .ttf file, and it should open a window showing the letters (icons) and the font name as the title
There is an updated fork from teammaestro
<Page xmlns="http://schemas.nativescript.org/tns.xsd"
xmlns:svg="#teammaestro/nativescript-svg" loaded="pageLoaded">
<StackLayout>
<svg:SVGImage src="~/image/nativescript.svg" height="100" />
<svg:SVGImage src="https://media4.giphy.com/media/3uyIgVxP1qAjS/200.svg" height="200" />
<svg:SVGImage src="res://somesvg" height="200" />
</StackLayout>
</Page>
In a WP7 game I'm building my Enemy classes are wrapped in an EnemyControl.
The Enemy Control uses a spritesheet of all the different animation states for that enemy type. There are only 4 images which I statically cache the bitmaps for.
The problem I have is that despite both the image being cached (BitmapImage statically and CacheMode="BitmapCache"), when the Image is loaded by the control it adds approximately 2 meg of Texture/System memory per control.
This is a significant problem as it limits the number of enemies I can conceivably have on screen.
Does anyone have any ideas how I could improve this situation? or otherwise solve it?
Here's the xaml if interested:
<Canvas x:Name="canEnemyControl">
<Canvas.RenderTransform>
<TranslateTransform x:Name="enemyControlTransform" X="0"/>
</Canvas.RenderTransform>
<Canvas.Clip>
<RectangleGeometry x:Name="clipGeometry" Rect="0,0,60,60" />
</Canvas.Clip>
<Image x:Name="imgEnemy" Stretch="None" CacheMode="BitmapCache" >
<Image.RenderTransform>
<TranslateTransform x:Name="enemyImageTransform" X="0" Y="0" />
</Image.RenderTransform>
</Image>
</Canvas>
I don't think your implementation will scale because I don't think the multiple Image elements know to share the same bitmap cache.
Solution: CompositionTarget.Rendering and WriteableBitmapEx
One possible solution would be to use CompositionTarget.Rendering for rendering like in my answer here. This fires an event before the screen is updated so you can do your own drawing. I believe this is how Krashlander and some other Silverlight games work (though I think he may have switched over to XNA in later versions).
Then I think that you can use WriteableBitmapEx to use one instance of your source image to draw it into multiple places on a buffer. You should scale much better because you have your buffer the size of your screen/viewport, and you have your one copy of each image. The memory requirements for displaying 1 enemy and 1000 should be the same.
I will add a disclaimer that I haven't tried this exact approach, but I do use CompositionTarget.Rendering in one of my apps for smooth screen updates.
I'm trying to resize a flash game inside a VGroup, no matter what configuration i try to set, some of my flash games are clipped out. i see only 80% of the actual flash screen.
this is my code:
<s:VGroup id="gameVGroup" clipAndEnableScrolling="true" height="480" maxHeight="480" width="540" maxWidth="540">
<mx:SWFLoader id="swfGameLoader" loadForCompatibility="true" scaleContent="true" maintainAspectRatio="true" width="100%" height="100%" maxWidth="540" maxHeight="480" />
</s:VGroup>
any ideas?
update
i still want to maintain aspect ratio.
so if the game is wider or taller then my application window, i want it to be resized properly.
maintainAspectRatio="false"
I have the following frameset:
<frameset rows="625,*" cols="*" framespacing="0" frameborder="0" border="0" noresize>
<frame marginheight="0px" src="music-NEW.php" name="mainFrame" scrolling="NO" frameborder="0" noresize>
<frame marginheight="0px" src="musicplayer.php" name="bottomFrame" scrolling="NO" frameborder="0" noresize>
</frameset>
in IE the frameset renders how I would like, the appearance of one seamless page. in Firefox, the frameset displays with a grabable bar between the frames and allows grabbing the bar and resizing the frame, which I can't seem to get rid of.
also, why do the frames not line up straight in Firefox and Safari?
Add a noresize="noresize" to your frame:
<frame noresize="noresize">
Do you really want the user not to be able to resize your frames?
WHY?
Do you know, how big his screen is? Do you know, if he/she is disabled and cannot read small letters and has to resize this frame?
In my opinion, you better think about fixed sizes and prohibiting something. Your visitor/user won't be lucky. Nonetheless, he/she will always be able to remove this stupid attribute (Firebug e.g.).
Just my two cents.
You might want to know marginwidth and marginheight have to be larger then 0px. Try without that attribute?
marginwidth = pixels [CN]
This attribute specifies the amount of space to be left between the frame's contents in its left and right margins. The value must be greater than zero (pixels). The default value depends on the user agent.
marginheight = pixels [CN]
This attribute specifies the amount of space to be left between the frame's contents in its top and bottom margins. The value must be greater than zero (pixels). The default value depends on the user agent.
Old question now, but perhaps it would be relevant to use an IFRAME in situations like this.