Drawing Heat Map on iOS - ios

I'm developing iOS app and I want to add/draw an HeatMap without using Google maps or any kind of map. I just want to draw it on my View. I have been looking for an open source library for iOS but I didn't find any.
Do anyone know a way how do I draw an HeatMap on View in iOS?
Here is an example for what I'm looking for but it's for Android platform:
https://github.com/HeartlandSoftware/AndroidHeatMap
Thanks, Tal.

in github enter in search field:
language:swift heatmap
you will get:
https://github.com/jamesdouble/JDSwiftHeatMap

If anyone is still looking for a heatmap that doesn't require a MKMapView and one that you can just place over an image, you could try this cocoapod
pod 'LFHeatMap'
https://github.com/gpolak/LFHeatMap.
Before you consider it for your project just know that you can't adjust the colour gradient of the "heat" without hacking the library a little. But it's pretty easy to use:
let points: [CGPoint] = [CGPoint(x: 25, y: 25),
CGPoint(x: 125, y: 125),
CGPoint(x: 200, y: 200)]
let image = LFHeatMap.heatMap(with: CGRect(x: 0, y: 0, width: 300, height: 300),
boost: 0.5,
points: points,
weights: nil)
let overlayHeatMap = UIImageView(image: image)
self.view.addSubview(overlayHeatMap)
overlayHeatMap.frame = CGRect(x: 0, y: 50, width: 300, height: 300)
If you're interested in changing the colour you can fiddle with code around line 411 in LFHeatMap.m below the comment that says '// Red and alpha component'

Related

Konva scale down group

I have an 850x600px Konva stage, and a picture created with lots of SVG images. I want to try to scale down the whole stage/layer/group for it to fit in a phone screen.
I´ve tried to set the scale to less than 1 (Example: 0.5) but I don´t seem to get it to work.
Which would be the best approach to achieve this?
Config example:
var stage = new Konva.Stage({
container: 'container',
width: 850,
height: 600,
scale: 0.5
});
You can't set scale to 0.5. You need to use:
scale: {x: 0.5, y: 0.5}
Or you can use this:
scaleX: 0.5,
scaleY: 0.5
Note: I am going to add a warning for invalid values for scale and some other properties in Konva v3.

How to draw a partial border?

Just as the following image, how to draw that black line?
I want the line to be drawn on layer, not on another view.
The problem I got is how to locate the bottom. Thanks for any suggestion.
Here i have used textfield same way you can use for button also
let borderOld = CALayer()
let width = CGFloat(1.5)
borderOld.frame = CGRect(x: 0, y: txtField.frame.size.height - width, width: txtField.frame.size.width, height: txtField.frame.size.height)
borderOld.borderWidth = width
txtField.layer.masksToBounds = true
txtField.layer.addSublayer(borderOld)

Sizing of Live Views in Swift Playground

I'm having trouble figuring out how to lay out views in Swift Playgrounds for iPad, though this may also be relevant to Mac users.
The following code should create a view with a red square (also a view) that is near the edges of its' super view, but not touching them.
let v = UIView(frame: CGRect(x: 0, y: 0, width: 500, height: 500))
let sqv = UIView(frame: CGRect(x: 400, y: 400, width: 50, height: 50))
sqv.backgroundColor = .red
v.addSubview(sqv)
PlaygroundPage.current.liveView = v
The result is not what you'd expect:
I suspect I know what is going on here; live views are at a fixed size that is larger than the display area. Some characteristics of the view are ignored when it is acting as the live view. However, I can't find where this is mentioned in the documentation, which vexes me. More importantly, how do I deal with this? I would like to be able to layout simple UIs that change to fit the current size of the live view. I don't know how to address this issue without trial & error and hardcoding, which are two things I would really like to avoid.
I suspect I know what is going on here; live views are at a fixed size that is larger than the display area.
Actually it's more like the other way around. An iPad screen is 1024 points wide (in landscape orientation). The right-hand pane (where it shows your live view) is 512 points wide. The playground forces your root view (v) to fill that pane, inset by 40 points on the left, right, and top (and more on the bottom). So your root view's width is forced to 432 ( = 512 - 2 * 40), less than the 500 you specified.
Views created in code (like yours) have translatesAutoresizingMaskIntoConstraints = true, and a resizing mask of 0, which means don't adjust the view's frame at all when its parent is resized. So the playground resizes your root view to width 432, but your root view doesn't move or resize its subview (sqv).
The easiest fix is to set the autoresizing mask of the subview to express your intent that it remain near the right and bottom edges of the root view. That means it should have flexible top and left margins:
let v = UIView(frame: CGRect(x: 0, y: 0, width: 500, height: 500))
let sqv = UIView(frame: CGRect(x: 400, y: 400, width: 50, height: 50))
sqv.autoresizingMask = [.flexibleLeftMargin, .flexibleTopMargin]
sqv.backgroundColor = .red
v.addSubview(sqv)
PlaygroundPage.current.liveView = v
Result:
let sqv = UIView(frame: CGRect(x: UIScreen.mainScreen().bounds.width-50-1, y:400, width: 50, height: 50))
The above code places your subview 1 point away from the right of the main view. Try changing the value 1 after 50 in x to desired value.

How can I make a UIRefreshControl smaller?

UIRefreshControl uses a very large spinner:
I'd like to resize it (the frame of the spinner, not the pull-down length!) to look more like this:
I can't see anything in the reference docs about how do this, and though it inherits from UIView, setting the frame doesn't work (possibly because I'm using AutoLayout?)
let refreshControl = UIRefreshControl()
refreshControl.frame = CGRect.init(x: 0, y: 0, width: 32, height: 32)
Simply use refreshControl.transform = CGAffineTransformMakeScale(0.5, 0.5);
No need to import QuartzCore or doing whatever else.
It's easy. Just select from the inspector:
I think you use a large one.
Also you can do this:
import QuartzCore
activityIndicator.transform = CGAffineTransformMakeScale(0.75, 0.75);
This will create an activity indicator 15px wide
Update: Swift 5
refreshControl.transform = CGAffineTransform(scaleX: 0.75, y: 0.75)

iOS dynamic UI in simple terms?

This may be too basic or require rephrasing. I am in the process of learning Swift and iOS programming and have developed a basic application that runs successfully on my iPhone 5. The app consists of a label, a button, and a UIImageView. It looks the way I want it to on my iPhone 5.
I figured most of this out by just playing around and so I am creating all these elements programatically. The code looks like this:
let banner = UILabel(frame: CGRect(x: 10, y: 10, width: 300.0, height: 75.0))
let button = UIButton(frame: CGRect(x: 45, y: 75, width: 235.0, height: 60.0))
let imageView = UIImageView(frame: CGRect(x: 22, y: 150, width: 280.0, height: 410.0))
And then I configure them in viewDidLoad to make them show stuff.
Now the question...how to I make them all the right size when running on different devices? I can load up the app on my iPad Mini but it's all scrunched over to the left of the view. So I need to do some kind of dynamic layout but not sure where to start.
All help appreciated!
Rather than creating the view sizes explicitly with initWithFrame: constructors, you can programmatically create and NSLayoutConstraints to your views to automatically layout your views, the same as if you used Auto Layout with the Interface Builder. See Apple's Auto Layout Guide for more details.

Resources