1
<!DOCTYPE html>
2
<html>
3
<head>
4
    <meta charset="utf-8" />
5
    <title>Wialon Playground - Change unit icon</title>
6
    <script type="text/javascript" src="//code.jquery.com/jquery-latest.min.js"></script>
7
    <script type="text/javascript" src="//hst-api.wialon.com/wsdk/script/wialon.js"></script>
8
</head>
9
<body>
10
11
<div class="wrap"><table id="units_table"></table></div>
12
<div style="display:inline-block;">
13
    Select unit: <select id="unit"><option></option></select>
14
    <input type="file" id="upload_icon" name="upload_icon"/>
15
    <input type="button" value="Change icon" id="change_icon_btn"/>
16
    <div id="log"></div>
17
</div>
18
19
20
</body>
21
</html>
HTML
6
 
1
div{vertical-align:top;}
2
td{padding:0px 10px;}
3
.wrap{display:inline-block; max-height:200px; overflow:auto;}
4
.odd{background:#EEE;}
5
#log{border: 1px solid #c6c6c6;}
6
CSS
63
 
1
// Print message to log
2
function msg(text) { $("#log").prepend(text + "<br/>"); }
3
4
function init() { // Execute after login succeed
5
    var sess = wialon.core.Session.getInstance(); // get instance of current Session
6
    // flags to specify what kind of data should be returned
7
    var flags = wialon.item.Item.dataFlag.base | wialon.item.Item.dataFlag.image;
8
    sess.loadLibrary("itemIcon"); // load Icon Library
9
    
10
    sess.updateDataFlags( // load items to current session
11
    [{type: "type", data: "avl_unit", flags: flags, mode: 0}], // Items specification
12
        function (code) { // updateDataFlags callback
13
            if (code) { msg(wialon.core.Errors.getErrorText(code)); return; } // exit if error code 
14
            // get loaded 'avl_unit's items with edit icons access 
15
            var units = wialon.util.Helper.filterItems(sess.getItems("avl_unit"),
16
                wialon.item.Item.accessFlag.editImage); 
17
            if (!units || !units.length){ msg("No units found"); return; } // check if units found
JS
Result
Source code of example Close ✕
1
 
1
/*source*/