Forum Archive

Hello,

I have my code posted below and everything is running fine, however I would like to have the app run on multiple different size devices while maintaining the general layout. They do not have to be exactly the same size for all layouts however the positioning should be in the same place. Where would I add the .flex function in my code below?

Edit*** Would I need to make a custom view class first?

import utm
import simplekml
import console

#run the GUI

import ui
tf = ui.TextField()
tf.keyboard_type = ui.KEYBOARD_PHONE_PAD

#add image to background
#import Image
#image = view['imageview1']
#ImageView.Image = ui.Image.named('grid.png')


def createbutton(sender):
    #basemap
    #block
    #zone
    #copy input from textfield to variable
    #BLOCK = "00"
    BASEMAP = int(sender.superview['basemaptext'].text)
    BLOCK = str(sender.superview['blocktext'].text)
    ZONE = int(sender.superview['zonetext'].text)
    WAYPOINT = str(sender.superview['waypointtext'].text)

    #The syntax is utm.to_latlon(EASTING, NORTHING, ZONE NUMBER, ZONE LETTER).

    #converts the strings to ints
    BLOCK = str(BLOCK)
    BASEMAP = str(BASEMAP)
    ZONE = int(ZONE)
    if BLOCK == "":
        EASTING = BASEMAP[0:-3] + BLOCK[0:-1] + "0000"
        NORTHING = BASEMAP[2:] + BLOCK[1:] + "0000"
        EASTING = int(EASTING)
        NORTHING = int(NORTHING)

    else:
        EASTING = BASEMAP[0:-3] + BLOCK[0:-1] + "000"
        NORTHING = BASEMAP[2:] + BLOCK[1:] + "000"
        EASTING = int(EASTING)
        NORTHING = int(NORTHING)

#print(EASTING)
#print(NORTHING)
    int(EASTING)
    int(NORTHING)
    int(ZONE)

    #Return (LAT,LONG)
    #print("Latitutde, Longitutde in Decimal Degrees")

    #print(utm.to_latlon(EASTING,NORTHING,ZONE,'N'))
    #split and reverse for the kml conversion
    location = str(utm.to_latlon(EASTING, NORTHING, ZONE, 'N'))

    lati = location.split(',')[0]
    longi = location.split(',')[1]
    kmllocation = (longi.strip("()"), lati.strip("()"))
    #Create the kml file
    kml = simplekml.Kml()
    kml.newpoint(name=WAYPOINT, coords=[(kmllocation)])
    #save kml location
    kmlfile = WAYPOINT + ".kml"
    kml.save(kmlfile)
    console.open_in(kmlfile)

v = ui.load_view('UTM2KML').present('fullscreen')

for simple ui, you can define flex within the ui editor, for each element. By using ui.View containers, you can get a fair degree of control. You set the width or height autoresize, and anchors to top,left,bottom and/or right, for each ui element.

Hello Jon,

I have set my flex below to WH as I just want the buttons and labels to maintain their ratio compared to the screen size. How would I set a frame size that auto-adjusting for each different device? Below is my UI code:

[
  {
    "nodes" : [
      {
        "nodes" : [

        ],
        "frame" : "{{0, 653}, {768, 371}}",
        "class" : "Label",
        "attributes" : {
          "uuid" : "34EA299A-E35A-4B5C-AEC2-B67AFD3CDB4C",
          "flex" : "WH",
          "corner_radius" : 0,
          "background_color" : "RGBA(1.000000,1.000000,1.000000,1.000000)",
          "frame" : "{{70, 181}, {150, 32}}",
          "number_of_lines" : 1,
          "border_color" : "RGBA(0.000000,0.000000,0.000000,1.000000)",
          "border_width" : 0,
          "alignment" : "center",
          "alpha" : 1,
          "text_color" : "RGBA(0.000000,0.000000,0.000000,1.000000)",
          "text" : "Elilan Ganesathas 2018",
          "font_name" : "<System-Bold>",
          "class" : "Label",
          "name" : "label6",
          "font_size" : 12
        },
        "selected" : false
      },
      {
        "nodes" : [

        ],
        "frame" : "{{257, 146}, {247, 36}}",
        "class" : "Label",
        "attributes" : {
          "uuid" : "11097835-EEB2-4A81-8C61-15CE6E2C2A0C",
          "flex" : "WH",
          "corner_radius" : 9,
          "background_color" : "RGBA(0.878431,0.878431,0.878431,1.000000)",
          "frame" : "{{70, 181}, {150, 32}}",
          "border_color" : "RGBA(1.000000,1.000000,1.000000,1.000000)",
          "border_width" : 5,
          "alignment" : "center",
          "text_color" : "RGBA(0.030660,0.030660,0.029127,1.000000)",
          "text" : "Basemap",
          "font_name" : "<System-Bold>",
          "class" : "Label",
          "name" : "BASEMAP",
          "font_size" : 18
        },
        "selected" : false
      },
      {
        "nodes" : [

        ],
        "frame" : "{{257, 200}, {247, 133}}",
        "class" : "TextField",
        "attributes" : {
          "uuid" : "1C82B89B-A4B5-4FBE-A060-F10AFC35E467",
          "flex" : "WH",
          "corner_radius" : 0,
          "frame" : "{{45, 181}, {200, 32}}",
          "border_color" : "RGBA(1.000000,1.000000,1.000000,1.000000)",
          "border_width" : 0,
          "tint_color" : "RGBA(0.500000,0.666667,1.000000,1.000000)",
          "custom_attributes" : "{\"keyboard_type\":\nui.KEYBOARD_PHONE_PAD}",
          "alignment" : "center",
          "autocorrection_type" : "no",
          "text_color" : "RGBA(1.000000,0.000000,0.000000,1.000000)",
          "placeholder" : "_ _ _ _ _",
          "text" : "",
          "font_name" : "<System>",
          "spellchecking_type" : "no",
          "class" : "TextField",
          "name" : "basemaptext",
          "font_size" : 30
        },
        "selected" : false
      },
      {
        "nodes" : [

        ],
        "frame" : "{{536, 146}, {164, 36}}",
        "class" : "Label",
        "attributes" : {
          "uuid" : "7FF6FA7C-463C-4187-89D8-7658A3F3B5DE",
          "flex" : "WH",
          "corner_radius" : 9,
          "background_color" : "RGBA(0.878431,0.878431,0.878431,1.000000)",
          "frame" : "{{70, 181}, {150, 32}}",
          "border_color" : "RGBA(1.000000,1.000000,1.000000,1.000000)",
          "border_width" : 5,
          "alignment" : "center",
          "text" : "Block",
          "font_name" : "<System-Bold>",
          "class" : "Label",
          "name" : "BLOCK",
          "font_size" : 18
        },
        "selected" : false
      },
      {
        "nodes" : [

        ],
        "frame" : "{{536, 200}, {164, 133}}",
        "class" : "TextField",
        "attributes" : {
          "uuid" : "9FCE15C4-0B3C-4CCA-AF82-4D3C17588E94",
          "flex" : "WH",
          "frame" : "{{46, 181}, {200, 32}}",
          "custom_attributes" : "{\"keyboard_type\":\nui.KEYBOARD_NUMBER_PAD}",
          "alignment" : "center",
          "autocorrection_type" : "default",
          "text_color" : "RGBA(1.000000,0.000000,0.000000,1.000000)",
          "placeholder" : "00",
          "text" : "",
          "font_name" : "<System>",
          "spellchecking_type" : "default",
          "class" : "TextField",
          "name" : "blocktext",
          "font_size" : 30
        },
        "selected" : false
      },
      {
        "nodes" : [

        ],
        "frame" : "{{64, 146}, {164, 36}}",
        "class" : "Label",
        "attributes" : {
          "uuid" : "80F99A57-609E-4531-9159-D6B23E31DACD",
          "flex" : "WH",
          "corner_radius" : 9,
          "background_color" : "RGBA(0.878431,0.878431,0.878431,1.000000)",
          "frame" : "{{70, 181}, {150, 32}}",
          "border_color" : "RGBA(1.000000,1.000000,1.000000,1.000000)",
          "border_width" : 5,
          "alignment" : "center",
          "text" : "Zone",
          "font_name" : "<System-Bold>",
          "class" : "Label",
          "name" : "ZONE",
          "font_size" : 18
        },
        "selected" : false
      },
      {
        "nodes" : [

        ],
        "frame" : "{{197, 548}, {370, 89}}",
        "class" : "Button",
        "attributes" : {
          "uuid" : "B59051F7-53EF-4D80-8F11-C01DB0D7E4FC",
          "name" : "button1",
          "flex" : "WH",
          "corner_radius" : 9,
          "background_color" : "RGBA(0.937500,1.000000,0.937500,1.000000)",
          "frame" : "{{105, 181}, {80, 32}}",
          "border_color" : "RGBA(0.000000,1.000000,0.000000,1.000000)",
          "border_width" : 2,
          "tint_color" : "RGBA(0.000000,0.882075,0.000000,1.000000)",
          "custom_attributes" : "",
          "title" : "Create",
          "action" : "createbutton",
          "font_bold" : true,
          "class" : "Button",
          "image_name" : "iob:flag_24",
          "font_size" : 20
        },
        "selected" : false
      },
      {
        "nodes" : [

        ],
        "frame" : "{{314, 384}, {172, 35}}",
        "class" : "Label",
        "attributes" : {
          "uuid" : "95B8D196-F064-4D67-8196-6A46BF6A0D3E",
          "flex" : "WH",
          "corner_radius" : 9,
          "background_color" : "RGBA(0.878431,0.878431,0.878431,1.000000)",
          "frame" : "{{309, 496}, {150, 32}}",
          "border_color" : "RGBA(1.000000,1.000000,1.000000,1.000000)",
          "border_width" : 5,
          "alignment" : "center",
          "text" : "Waypoint ID",
          "font_name" : "<System-Bold>",
          "class" : "Label",
          "name" : "label1",
          "font_size" : 18
        },
        "selected" : true
      },
      {
        "nodes" : [

        ],
        "frame" : "{{64, 427}, {659, 98}}",
        "class" : "TextField",
        "attributes" : {
          "name" : "waypointtext",
          "text_color" : "RGBA(1.000000,0.000000,0.000000,1.000000)",
          "flex" : "WH",
          "frame" : "{{284, 496}, {200, 32}}",
          "spellchecking_type" : "no",
          "class" : "TextField",
          "uuid" : "F1BBB0CA-847E-4EDE-B6EA-BA586A14F354",
          "alignment" : "center",
          "autocorrection_type" : "no",
          "font_size" : 30,
          "font_name" : "<System-Bold>"
        },
        "selected" : false
      },
      {
        "nodes" : [

        ],
        "frame" : "{{64, 200}, {164, 133}}",
        "class" : "TextField",
        "attributes" : {
          "uuid" : "2657EABF-340A-420D-BFA2-25B6CC3295D3",
          "flex" : "WH",
          "frame" : "{{45, 181}, {200, 32}}",
          "custom_attributes" : "{\"keyboard_type\":\nui.KEYBOARD_PHONE_PAD}",
          "alignment" : "center",
          "autocorrection_type" : "no",
          "action" : "",
          "text_color" : "RGBA(1.000000,0.000000,0.000000,1.000000)",
          "placeholder" : "_ _",
          "font_name" : "<System>",
          "spellchecking_type" : "no",
          "class" : "TextField",
          "name" : "zonetext",
          "font_size" : 30
        },
        "selected" : false
      },
      {
        "nodes" : [

        ],
        "frame" : "{{333, 14}, {100, 100}}",
        "class" : "ImageView",
        "attributes" : {
          "border_width" : 0,
          "flex" : "WH",
          "tint_color" : "RGBA(1.000000,1.000000,1.000000,1.000000)",
          "frame" : "{{334, 462}, {100, 100}}",
          "class" : "ImageView",
          "background_color" : "RGBA(1.000000,1.000000,1.000000,1.000000)",
          "uuid" : "D38A39B4-BE84-4D0D-B2D0-5B235D404B57",
          "border_color" : "RGBA(0.000000,0.000000,0.000000,1.000000)",
          "corner_radius" : 0,
          "name" : "imageview1",
          "image_name" : "iob:ios7_paperplane_outline_256"
        },
        "selected" : false
      }
    ],
    "frame" : "{{0, 0}, {768, 1024}}",
    "class" : "View",
    "attributes" : {
      "flex" : "WH",
      "custom_class" : "",
      "enabled" : true,
      "tint_color" : "RGBA(0.000000,0.478000,1.000000,1.000000)",
      "border_color" : "RGBA(0.000000,0.000000,0.000000,1.000000)",
      "background_color" : "RGBA(1.000000,1.000000,1.000000,1.000000)",
      "name" : "Flight Buddy"
    },
    "selected" : false
  }
]