Europe Hyundai / Kia Support (#4)

* WIP: Europe support

* auth working!

* Europe support continued: refreshTokens, getDeviceId, getCar added

* working app skeleton / status working

* fix remote status being different JSON than cached

* app colors for light / dark mode

* Europe - working for UK enabled other countries

* adjust logic for determining charge and power - making them seperate. Deal with lack of power in app and widget

* adjust logic for determining charge and power  #2

* remove language / sub-region and move to preferred distance unit.  Europe deal with login failure and URI encode username/password

* Europe switch to CCS2 status commands + handle CCS2 header correctly.

* fix ccuCCS2ProtocolSupport setting

* finalize europe charging power attribute + made width of charging rate based on number size

* add kia europe settings

* chore: prettier fix

* ioniq 5N image

Author: andyfase

docs/app-assets/car-images/ioniq5n.png

@@ -25,6 +25,7 @@
     "globals": "^15.14.0",
     "prettier": "^3.4.2",
     "rollup": "^4.30.1",
+    "rollup-plugin-polyfill-node": "^0.13.0",
     "tslib": "^2.8.1",
     "typescript": "^5.7.3"
   }

package-lock.json

@@ -1,5 +1,6 @@
 import typescript from '@rollup/plugin-typescript'
 import { nodeResolve } from '@rollup/plugin-node-resolve'
+import nodePolyfills from 'rollup-plugin-polyfill-node'
 import terser from '@rollup/plugin-terser'
 
 import addFileIconSettings from './rollup-plugin-add-file-icon-settings'
@@ -23,7 +24,7 @@ const config = {
       addFileIconSettings(),
     ],
   },
-  plugins: [typescript(), nodeResolve()],
+  plugins: [typescript(), nodeResolve(), nodePolyfills(/* options */)],
   watch: {
     include: 'src/**',
   },

package.json

@@ -35,6 +35,7 @@ interface updatingActions {
 
 let isUpdating = false
 let updatingIconAngle = 0
+const darkMode = Device.isUsingDarkAppearance()
 
 const { present, connect, setState } = getTable<{
   name: string
@@ -58,7 +59,7 @@ const { present, connect, setState } = getTable<{
 const MIN_API_REFRESH_TIME = 900000 // 15 minutes
 
 export async function createApp(config: Config, bl: Bluelink) {
-  await loadTintedIcons()
+  await loadTintedIcons(darkMode)
 
   // not blocking call - render UI with last cache and then update from a non forced remote call (i.e. to server but not to car)
   // if its been at least MIN_API_REFRESH_TIME milliseconds
@@ -187,12 +188,24 @@ const pageIcons = connect(
     const lastSeen = new Date(lastUpdated)
     const batteryIcon = isCharging ? 'charging' : 'not-charging'
     const batteryText = 'Not Charging'
+    const chargingPowerText = chargingPower > 0 ? `${chargingPower.toFixed(1).toString()} kW` : '- kW'
+    let chargingPowerTextRowPercentage = '25%'
+
+    // annoying but impacts UI fairly significantly.
+    if (chargingPowerText.length <= 4)
+      chargingPowerTextRowPercentage = '15%' // '? kw'
+    else if (chargingPowerText.length <= 6)
+      chargingPowerTextRowPercentage = '18%' // '1.2 kw'
+    else if (chargingPowerText.length <= 7)
+      chargingPowerTextRowPercentage = '21%' // '10.5 kw'
+    else if (chargingPowerText.length <= 8) chargingPowerTextRowPercentage = '25%' // '222.1 kw'
 
     const chargingRow: DivChild[] = []
     if (updatingActions && updatingActions.charge) {
-      chargingRow.push(P(updatingActions.charge.text, { align: 'left', width: '70%', color: Color.yellow() }))
+      chargingRow.push(P(updatingActions.charge.text, { align: 'left', width: '70%', color: Color.orange() }))
     } else if (isCharging) {
-      chargingRow.push(P(`${chargingPower.toString()} kW`, { align: 'left', width: '20%' }))
+      // @ts-ignore
+      chargingRow.push(P(chargingPowerText, { align: 'left', width: chargingPowerTextRowPercentage }))
       chargingRow.push(Img(getTintedIcon('charging-complete'), { align: 'left', width: '10%' }))
       chargingRow.push(P(`${getChargeCompletionString(lastSeen, remainingChargeTimeMins)}`, { align: 'left' }))
     } else {
@@ -261,7 +274,7 @@ const pageIcons = connect(
           P(updatingActions && updatingActions.climate ? updatingActions.climate.text : conditioningText, {
             align: 'left',
             width: '70%',
-            ...(updatingActions && updatingActions.climate && { color: Color.yellow() }),
+            ...(updatingActions && updatingActions.climate && { color: Color.orange() }),
           }),
         ],
         {
@@ -332,7 +345,7 @@ const pageIcons = connect(
           P(updatingActions && updatingActions.lock ? updatingActions.lock.text : lockedText, {
             align: 'left',
             width: '70%',
-            ...(updatingActions && updatingActions.lock && { color: Color.yellow() }),
+            ...(updatingActions && updatingActions.lock && { color: Color.orange() }),
           }),
         ],
         {
@@ -379,7 +392,7 @@ const pageIcons = connect(
             {
               align: 'left',
               width: '70%',
-              ...(updatingActions && updatingActions.status && { color: Color.yellow() }),
+              ...(updatingActions && updatingActions.status && { color: Color.orange() }),
             },
           ),
         ],
@@ -453,7 +466,11 @@ async function doAsyncUpdate(props: doAsyncUpdateProps) {
         updatingActions: {
           [props.actionKey]: {
             image: didSucceed
-              ? await getAngledTintedIconAsync('checkmark.arrow.trianglehead.counterclockwise', Color.green(), 0)
+              ? await getAngledTintedIconAsync(
+                  'checkmark.arrow.trianglehead.counterclockwise',
+                  darkMode ? Color.green() : Color.green(),
+                  0,
+                )
               : await getAngledTintedIconAsync(
                   'exclamationmark.arrow.trianglehead.2.clockwise.rotate.90',
                   Color.red(),
@@ -491,7 +508,7 @@ async function doAsyncUpdate(props: doAsyncUpdateProps) {
       setState({
         updatingActions: {
           [props.actionKey]: {
-            image: await getAngledTintedIconAsync('arrow.trianglehead.clockwise', Color.yellow(), updatingIconAngle),
+            image: await getAngledTintedIconAsync('arrow.trianglehead.clockwise', Color.orange(), updatingIconAngle),
             text: props.updatingText,
           },
         },

rollup.config.ts

@@ -12,9 +12,10 @@ export interface Auth {
 }
 
 export interface Config {
-  manufacturer: string | undefined
+  manufacturer: string
   auth: Auth
   tempType: 'C' | 'F'
+  distanceUnit: 'km' | 'mi'
   climateTempWarm: number
   climateTempCold: number
   allowWidgetRemoteRefresh: boolean
@@ -44,12 +45,13 @@ export interface CustomClimateConfig {
 }
 
 export interface FlattenedConfig {
-  manufacturer: string | undefined
+  manufacturer: string
   username: string
   password: string
   pin: string
   region: string
   tempType: 'C' | 'F'
+  distanceUnit: 'km' | 'mi'
   climateTempWarm: number
   climateTempCold: number
   allowWidgetRemoteRefresh: boolean
@@ -60,9 +62,8 @@ export interface FlattenedConfig {
 }
 
 // const SUPPORTED_REGIONS = ['canada']
-const SUPPORTED_REGIONS = ['canada', 'usa']
+const SUPPORTED_REGIONS = ['canada', 'usa', 'europe']
 const SUPPORTED_MANUFACTURERS = ['Hyundai', 'Kia']
-
 const DEFAULT_TEMPS = {
   C: {
     cold: 19,
@@ -83,11 +84,12 @@ const DEFAULT_CONFIG = {
     region: '',
   },
   tempType: 'C',
+  distanceUnit: 'km',
   climateTempCold: DEFAULT_TEMPS.C.cold,
   climateTempWarm: DEFAULT_TEMPS.C.warm,
   debugLogging: false,
   allowWidgetRemoteRefresh: false,
-  manufacturer: undefined,
+  manufacturer: 'hyundai',
   customClimates: [],
   widgetConfig: {
     standardPollPeriod: 1,
@@ -149,6 +151,7 @@ export async function loadConfigScreen() {
       region,
       pin,
       tempType,
+      distanceUnit,
       climateTempWarm,
       climateTempCold,
       debugLogging,
@@ -168,6 +171,7 @@ export async function loadConfigScreen() {
             pin: pin,
           },
           tempType: tempType,
+          distanceUnit: distanceUnit,
           climateTempCold: climateTempCold,
           climateTempWarm: climateTempWarm,
           allowWidgetRemoteRefresh: allowWidgetRemoteRefresh,
@@ -237,7 +241,7 @@ export async function loadConfigScreen() {
         label: 'Choose your Car Manufacturer',
         options: SUPPORTED_MANUFACTURERS,
         allowCustom: false,
-        isRequired: false,
+        isRequired: true,
       },
       vin: {
         type: 'textInput',
@@ -251,6 +255,13 @@ export async function loadConfigScreen() {
         allowCustom: false,
         isRequired: true,
       },
+      distanceUnit: {
+        type: 'dropdown',
+        label: 'Choose your preferred distance unit',
+        options: ['km', 'mi'],
+        allowCustom: false,
+        isRequired: true,
+      },
       climateTempWarm: {
         type: 'numberValue',
         label: 'Climate temp when pre-heating (whole number or .5)',

src/app.ts

@@ -41,7 +41,7 @@ import { confirm } from './lib/scriptable-utils'
       Script.complete()
       return resp
     } catch (error) {
-      logError(JSON.stringify(error))
+      logError(`main error ${JSON.stringify(error)}`)
     }
   }
 })()