What is the best way to "paginate" a loooong SVG file on iOS? - iphone

I am facing an interesting problem with SVG and iOS.
I need to render very long SVG files (up to about 5mb large), which hasn't been a problem using UIWebView. I also haven't had a problem scrolling them smoothly with JS, but since I'm waiting on my developer program application to be approved I haven't tested the performance on an actual device.
I'm now trying to achieve a page-turning effect like how the iBooks app flips pages. It doesn't have to be as elaborate and intricate, the gist of the idea is that the next section of the svg will "wipe over" the last.
Reason being, I need both "pages" of content to remain static to ease the reading of the content during the "flipping" process. Scrolling very quickly makes the contents of the SVG difficult to read.
Here is a graphic representation of what I would like to achieve:
---------------------------
| |
| |
| |
| 1 |
| |
| |
| |
| |
---------------------------
---------------------------
| | |
| | |
| | |
| 2 | 1 |
| |-> |
| | |
| / |
| / |
---------------------------
---------------------------
| | |
| | |
| | |
| 2 | 1 |
| |-> |
| | |
| / |
| / |
---------------------------
---------------------------
| |
| |
| |
| 2 |
| |
| |
| |
| |
---------------------------
Looking forward to some interesting ideas from you veterans!

I haven't rut to such needs, but from what I know, it could be made by two UIViews (or any of their subclasses). All you have to do is a custom animation on flip(a simple one if you interested in flip only, a harder one if you need the animation actually to go one with the finger). And of course you'll need to put corresponding part of your file to those views. Actually I would suggest using 3 views, so you'll be able to put content of the next "page" while it still offscreen. That will make your animation smoother.

Related

Flutter: Responsive Web - Multiple Listviews in a Column

I am working on a flutter web application and need to place multiple list views in a column.
I am trying to use responsive-framework. But it doesn't seem to work with my project. I tried Wrap widget. I doesn't work either.
What I want to do is moving around the list views based on the screen size.
Just one Column two Columns for wider screen
| 1 | | 1 | | 5 |
| 2 | | 2 | | 6 |
| 3 | => | 3 |
| 4 | | 4 |
| 5 |
| 6 |
This order of the list views should be exactly what I illustrated above.
Below is not what I need.
| 1 | | 2 |
| 3 | | 4 |
| 5 | | 6 |
| 7 |
Any tips??
Try GridView. There's a lot to it depending on your requirements for the Container Size. But GridView.builder with SliverGridDelegateWithMaxCrossAxisExtent (there are other variants).
You'll need to change the axis direction to horizontal in your case.

How to convert text-based table to image from terminal in the same structure?

I'm trying to convert text-based table to the image, but the structure is broken after convertation.
I have file with the next structure:
+-----------+------+------------+-----------------+
| City name | Area | Population | Annual Rainfall |
+-----------+------+------------+-----------------+
| Adelaide | 1295 | 1158259 | 600.5 |
| Brisbane | 5905 | 1857594 | 1146.4 |
| Darwin | 112 | 120900 | 1714.7 |
| Hobart | 1357 | 205556 | 619.5 |
| Sydney | 2058 | 4336374 | 1214.8 |
| Melbourne | 1566 | 3806092 | 646.9 |
| Perth | 5386 | 1554769 | 869.4 |
+-----------+------+------------+-----------------+%
after a conversation with ImageMagick and command below:
convert label:"$(cat test.txt)" result1.png
I have next image:
As you can see, the structure of the columns is broken.
Do you have an idea of how can such an issue be solved?
Regards,
Ihor
You need to set the TypeFace to something monospace to match the terminal.
convert -font "Liberation-Mono" label:#test.txt result1.png
You can identify which fonts on the system by running
identify -list font | grep Mono

Swift & Firebase - Split data for user info?

I currently coding a fitness app that permits to record all the personal records for a user.
I'm really new with Cloud Firestore from Firebase, so I really don't know how I could structure the database.
In my mind, I have two options:
OPTION 1
Users
|
+--UserID
| |
| +--Name
| +--Phone
| +--etc..
|
|
Users-records
|
+--UserID
| |
| +--RecordName
| | |
| | +--recordValue
| | +--recordType
| |
| +--RecordName
| | +--recordValue
| | +--recordType
OPTION 2
Users
|
+--UserID
| |
| +--Name
| +--Phone
| +--etc..
| +--Records
| | |
| | +--RecordName
| | | |
| | | +--recordValue
| | | +--recordType
| | +--RecordName
| | | |
| | | +--recordValue
| | | +--recordType
The questions are: Do I have to split the collection for the user?
Do you think this architecture is well designed for the purpose (ie record personal records from users)?
Thank you very much
Your database structure really depends on how you are going to use it. Keep in mind that whenever you observe a node, you are also observing all of the children nodes.
So I'd probably go with something closer to Option two, maybe like this:
Users
|
+--UserID
| |
| +--UserInfo
| | |
| | +--Name
| | +--Phone
| | +--etc..
| |
| +--Records
| | |
| | +--RecordName
| | | |
| | | +--recordValue
| | | +--recordType
| | +--RecordName
| | | |
| | | +--recordValue
| | | +--recordType
I'd choose this, because I'd image you'd want to get all of the UserInfo at once, So we can observe that "UserInfo" node and get all of the children: name, phone, etc....
Then I'd think you'd also want to get all of the records at once, so we can observe that "Records" node and get all of that data.
Additionally, if you wanted, you could get everything at once by observing the UserID!
However, if you were maybe going to be getting a list of all the users, then you definitely don't want all this data in one spot and this design wouldn't work, because that is a lot of data to observe just to get all the users.
In summary: Choose an option which makes it easiest for you to get what you need, without getting extra data you don't want!

How to present data in a tree like table in UI5

I have data which is expected to be displayed in a structured table. It is expected that the table can be opened and collapsed on two levels allowing
you to drill down in the data.
Example: Cities World Wide
When the table is loaded it should be displayed like this:
Area | Country | Name | Population | ...
--------------+----------------+-------------+-------------+----
Europe | | | |
North America | | | |
... | | | |
when I click on "Europe" the second level is shown:
Area | Country | Name | Population | ...
--------------+----------------+-------------+-------------+-----
Europe | | | |
| Germany | | |
| Czech Republic | | |
North America | | | |
... | | | |
When I now click on "Germany" the third level containing the actual city data is shown:
Area | Country | Name | Population | ...
--------------+----------------+-------------+-------------+-----
Europe | | | |
| Germany | | |
| | Berlin | 4 Million | ...
| | Leipzig | 0.5 Million | ...
| Czech Republic | | |
North America | | | |
... | | | |
How can I achieve a drill down in a tree like structure like shown in this example in UI5?
Since one of the requirement is to also to see and compare the data at once I believe a table control would be best but I don't know how to bring in this drill down behavior.
Mobile support is not required. The person using this will be a data analyst working on a big screen.
Any help appreciated.
While writing this question I came up with the search phrase "ui5 tree table" and voila:
https://experience.sap.com/fiori-design-web/ui-components/tree-table/
This is what I was looking for.

Scrollview Scrolling with dynamic images on them and vertical/horizontal scrolling but one at a time

I am able to achieve horizontal scrolling with dynamic addition of images on them, with infinite scrolling and lazy loading of images as well.
Actually, I am kind of stuck, about how to proceed with vertical scrolling of image in regards to horizontal image being displayed.
For Eg: I pull down some images from server, those are random pics, and those pics are associated to some albums of a user on my server.
So, when user scrolls left to right (horizontal) then scrollview should display all the downloaded bunch of images, but when user scroll up/down then scrollview should display other images associated to album of current image (from horizontal mode). Say I downloaded image 1,2,3 and 4. and When I scroll up/down then say for index 2, it should display 2.1, 2.2 etc which is nothing but linked to the album.
I have the json with me for both vertical and horizontal screens. however, I am not sure how to modify my current flow (infinite scrolling+lazy load) with albums kinda view.
Thanks for the help.
Create vertical ScrollViews inside your horizontal ScrollView. Each vertical ScrollView represents an album. Fill all images in that album to this vertical ScrollView. Set direction lock to yes for all ScrollViews. The whole structure should like below.
------------- -------------
| | | |
| ------- | | ------- | > Vertical ScrollViews
| | | | | | | | with images inside
| | | | | | | |
| | | | | | | |
| | | | | | | |
| ------- | | ------- |
| | | |
-------------------------------------------------------------------------------
| | | | | |
| | ------- | | ------- | |
| | | | | | | | | |
| | | | | | | | | |
| | | | | | | | | Horizontal ScrollView |
| | | | | | | | | with vertical Scrolls |
| | ------- | | ------- | |
| | | | | |
| ------------- ------------- |
-------------------------------------------------------------------------------
For solve this issue you have to create touch method for horizontal scroll and according to touch update the vertical scroll Scrollview data.If you need then I also post some tips of code.
if(CGRectContainsPoint([imgView frame], [touch locationInView:scrollView]))
{
[self ShowDetailView:imgView];
break;
}
}
}
-(void)ShowDetailView:(UIImageView *)imgView
{
selectOther_ImageView.image = imgView.image;
}