Cars Widget.widget.json

{
    "template": "\n<div class=\"section\">\n\n\t<div class=\"sectionIconContainer\"><div class=\"sectionIcon\"><svg viewBox=\"0 0 48 48\"><use xlink:href=\"/static/matrix-theme/icons.svg#bmw\"></use></svg></div></div>\n\t<div class=\"title\">BMW i3</div>\n\t<div class=\"controls\">\n\n\t\t<div class=\"widget\">\n\t\t\t<div class=\"icon off\"><svg viewBox=\"0 0 48 48\"><use xlink:href=\"/static/matrix-theme/squidink.svg#charging-2\"></use></svg></div>\n\t\t\t<div class=\"name\">Battery</div>\n\n\t\t\t<div class=\"valueGroup\"><div class=\"value\">{{itemValue('bmw_chargingLevelHv')}}%</div><div class=\"value\">{{itemValue('bmw_beRemainingRangeElectricKm') | number:0}} km</div></div>\t\t\t\n\t\t\t<div class=\"batteryGroup\">\n\t\t\t\t<div class=\"battery\"><div class=\"batteryShell\"><div class=\"batteryLevel {{itemValue('bmw_chargingLevelHvName')}}\" style=\"width: {{itemValue('bmw_chargingLevelHv') | number:0}}%;\"></div></div><div class=\"batteryTip\"><div class=\"batteryTip1\"></div><div class=\"batteryTip2 {{itemValue('bmw_chargingLevelHvName')}}\"></div></div></div>\n\t\t\t</div>\n\t\t</div>\n\n\t\t<div class=\"widget\" ng-if=\"itemValue('bmw_charging_status')=='CHARGING'\" >\n\t\t\t<div class=\"icon blink\"><svg viewBox=\"0 0 48 48\"><use xlink:href=\"/static/matrix-theme/squidink.svg#plug\"></use></svg></div>\n\t\t\t<div class=\"name\">Charging</div>\n\t\t\t<div class=\"valueGroup\"><div class=\"value\">Active</div><div class=\"value\">{{itemValue('bmw_chargingTimeRemaining') | number:0}} min to full ({{itemValue('bmw_chargingDateTimeComplete') | date:'HH:mm'}})</div></div>\t\t\t\n\t\t</div>\n\n \t\t<div class=\"widget\" ng-if=\"itemValue('bmw_charging_status')=='FINISHED_FULLY_CHARGED'\" >\n\t\t\t<div class=\"icon off\"><svg viewBox=\"0 0 48 48\"><use xlink:href=\"/static/matrix-theme/squidink.svg#plug\"></use></svg></div>\n\t\t\t<div class=\"name\">Charging</div>\n\t\t\t<div class=\"valueGroup\"><div class=\"value\">Complete</div><div class=\"value\">finished at {{itemValue('bmw_chargingDateTimeComplete') | date:'HH:mm'}}</div></div>\t\t\t\n\t\t</div>\n\n \t\t<div class=\"widget\" ng-if=\"itemValue('bmw_charging_status')=='WAITING_FOR_CHARGING'\" >\n\t\t\t<div class=\"icon off\"><svg viewBox=\"0 0 48 48\"><use xlink:href=\"/static/matrix-theme/squidink.svg#plug\"></use></svg></div>\n\t\t\t<div class=\"name\">Charging</div>\n\t\t\t<div class=\"valueGroup\"><div class=\"value\">Waiting to Charge</div><div class=\"value\">last charge at {{itemValue('bmw_chargingDateTimeComplete') | date:'HH:mm'}}</div></div>\t\t\t\n\t\t</div>\n    \n \t\t<div class=\"widget\" ng-if=\"itemValue('bmw_charging_status')!='FINISHED_FULLY_CHARGED' && itemValue('bmw_charging_status')!='WAITING_FOR_CHARGING' && itemValue('bmw_charging_status')!='CHARGING'\" >\n\t\t\t<div class=\"icon warn\"><svg viewBox=\"0 0 48 48\"><use xlink:href=\"/static/matrix-theme/squidink.svg#plug\"></use></svg></div>\n\t\t\t<div class=\"name\">Charging</div>\n\t\t\t<div class=\"valueGroup\"><div class=\"value warning\">Not Charging</div><div class=\"value\">last charge at {{itemValue('bmw_chargingDateTimeComplete') | date:'HH:mm'}}</div></div>\t\t\t\n\t\t</div>\n    \n \t\t<div class=\"widget wide\">\n\t\t\t<div class=\"icon off\"><svg viewBox=\"0 0 48 48\"><use xlink:href=\"/static/matrix-theme/squidink.svg#charging-2\"></use></svg></div>\n\t\t\t<div class=\"name\">History</div>\n    \t<div class=\"graph\">\n\t\t\t\t<img width=\"275\" height=\"100\" src=\"http://openhabianpi.local:3000/render/dashboard-solo/db/mini-graphs?orgId=1&panelId=4&from=now-7d&to=now&width=550&height=250&tz=UTC%2B02%3A00\" />\n\t\t\t\t<div class=\"legend\">Last 7 days</div>\n    \t</div>    \n    </div>    \n\n\t\t<div class=\"widget\">\n\t\t\t<div class=\"icon off\"><svg viewBox=\"0 0 48 48\"><use xlink:href=\"/static/matrix-theme/squidink.svg#battery\"></use></svg></div>\n\t\t\t<div class=\"name\">Fuel</div>\n\n\t\t\t<div class=\"valueGroup\"><div class=\"value\">{{itemValue('bmw_fuelPercent') | number:0}}%</div><div class=\"value\">{{itemValue('bmw_beRemainingRangeFuelKm') | number:0}} km</div></div>\t\t\t\n\t\t\t<div class=\"fuelGroup\">\n\t\t\t\t<div class=\"fuel\">\n\t\t\t\t\t<div class=\"fuelShell\"><div class=\"fuelLevel {{itemValue('bmw_fuelPercentName')}}\" style=\"width: {{itemValue('bmw_fuelPercent') | number:0}}%;\"></div></div>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</div>    \n    \n    <div class=\"widget\">\n\t\t\t<div class=\"icon off\"><svg viewBox=\"0 0 48 48\"><use xlink:href=\"/static/matrix-theme/squidink.svg#direction-n\"></use></svg></div>\n\t\t\t<div class=\"name\">Odometer</div>\n\t\t\t<div class=\"valueGroup\"><div class=\"value\">{{itemValue('bmw_mileage') | number:'0'}} km</div></div>\t\t\t\n\t\t</div>\n\n    <div class=\"widget\">\n\t\t\t<div class=\"icon off\"><svg viewBox=\"0 0 48 48\"><use xlink:href=\"/static/matrix-theme/squidink.svg#controal-4\"></use></svg></div>\n\t\t\t<div class=\"name\">Status</div>\n\t\t\t<div class=\"valueGroup\">\n        <div class=\"value\">{{itemValue('bmw_door_lock_state')}}</div>\n        <div class=\"value\"><div class=\"door\">Closed</div><img style=\"width: 100%; padding: 20px 20px 20px 40px;\" src=\"/static/matrix-theme/bmwi3.png\" /></div>\n      </div>\t\t\t\n\t\t</div>\n\n    <div class=\"widget\" ng-click=\"sendCmd('bmw_forceupdate', 'ON')\">\n\t\t\t<div class=\"icon off\"><svg viewBox=\"0 0 48 48\"><use xlink:href=\"/static/matrix-theme/squidink.svg#double-arrow\"></use></svg></div>\n\t\t\t<div class=\"name\">Update</div>\n      <div class=\"valueGroup\"><div class=\"value\">{{itemValue('bmw_updateTime_converted_timestamp') | date:'MMM d, HH:mm'}} from car</div><div class=\"value\">{{itemValue('bmw_lastConnectionDateTime') | date:'MMM d, HH:mm'}} to car</div></div>\t\t\t\n\t\t</div>\n\n\t</div>\n\n</div>\n\n\n<div class=\"section\">\n\n\t<div class=\"sectionIconContainer\"><div class=\"sectionIcon\"><svg viewBox=\"0 0 48 48\"><use xlink:href=\"/static/matrix-theme/icons.svg#volvo\"></use></svg></div></div>\n\t<div class=\"title\">Volvo XC90</div>\n\t<div class=\"controls\">\n\n\t\t<div class=\"widget\">\n\t\t\t<div class=\"icon off\"><svg viewBox=\"0 0 48 48\"><use xlink:href=\"/static/matrix-theme/squidink.svg#battery\"></use></svg></div>\n\t\t\t<div class=\"name\">Fuel</div>\n\n\t\t\t<div class=\"valueGroup\"><div class=\"value\">{{itemValue('volvo_fuelAmountLevel') | number:0}}%</div><div class=\"value\">{{itemValue('volvo_distanceToEmpty') | number:0}} km</div></div>\t\t\t\n\t\t\t<div class=\"fuelGroup\">\n\t\t\t\t<div class=\"fuel\">\n\t\t\t\t\t<div class=\"fuelShell\"><div class=\"fuelLevel {{itemValue('volvo_fuelAmountLevelName')}}\" style=\"width: {{itemValue('volvo_fuelAmountLevel') | number:0}}%;\"></div></div>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</div>    \n \n    <div class=\"widget\">\n\t\t\t<div class=\"icon off\"><svg viewBox=\"0 0 48 48\"><use xlink:href=\"/static/matrix-theme/squidink.svg#direction-n\"></use></svg></div>\n\t\t\t<div class=\"name\">Odometer</div>\n\t\t\t<div class=\"valueGroup\"><div class=\"value\">{{itemValue('volvo_odometer') | number:'0'}} m</div></div>\t\t\t\n\t\t</div>\n\n    <div class=\"widget\">\n\t\t\t<div class=\"icon off\"><svg viewBox=\"0 0 48 48\"><use xlink:href=\"/static/matrix-theme/squidink.svg#controal-4\"></use></svg></div>\n\t\t\t<div class=\"name\">Status</div>\n\t\t\t<div class=\"valueGroup\">\n        <div class=\"value\">{{itemValue('volvo_carLocked')}}</div>\n        <div class=\"value\"><img style=\"width: 100%; padding: 20px 20px 20px 40px;\" src=\"/static/matrix-theme/volvoxc90.png\" /></div>\n      </div>\t\t\t\n\t\t</div>\n\n\t\t<div class=\"widget\" ng-click=\"sendCmd('volvo_forceupdate', 'ON')\">\n\t\t\t<div class=\"icon off\"><svg viewBox=\"0 0 48 48\"><use xlink:href=\"/static/matrix-theme/squidink.svg#double-arrow\"></use></svg></div>\n\t\t\t<div class=\"name\">Update</div>\n\t\t\t<div class=\"valueGroup\"><div class=\"value\">{{itemValue('volvo_distanceToEmptyTimestamp') | date:'MMM d, HH:mm'}} from car</div><div class=\"value\">{{itemValue('volvo_lastConnectionDateTime') | date:'MMM d, HH:mm'}} to car</div></div>\t\t\t\n\t\t</div>\n\n\t</div>\n\n</div>",
    "name": "Cars Widget"
}