2020.2

var val = $(this).val();
camObj[camera] = val;
});
event.detail.state['my-camera-data'] = JSON.stringify(camObj);
});
In the olcotgrestorestate event handler the previously stored JSON is read from the
event.detail.state and parsed into a JavaScript object. A for ... in loop is then used to
iterate over the keys (the camera names) in that object. Inside this loop the cameras are added
by calling the addCamera() function with the ID and value (the path to the picture) of each
Camera element. Subsequently the restore-state.cotg event of the new widget is called to
make sure that the thumbnail of the picture is shown and the Clear button becomes visible.
window.addEventListener('olcotgrestorestate', function(event) {
var json = JSON.parse(event.detail.state['my-camera-data']);
for (var cameraID in json) {
var value = json[cameraID];
addCameraWidget(cameraID,value);
$('#' + cameraID).trigger('restore-state.cotg',
event.detail.state);
}
});
function addCameraWidget(cameraID, value) {
if(typeof value == 'undefined') {
value = '';
}
var html = '<label>Camera' +
'<div id="' + cameraID + '" role="cotg.PhotoWidget">' +
'<div class="panel" role="control-wrapper"
style="position:relative;">' +
'<img role="photo" src="">' +
'<input role="photo-data" class="camera-dyn" name="' + cameraID +
'" type="hidden" value="' + value + '">' +
'</div>' +
'<button class="small" role="take-button" type="button">Take
now</button>' +
'<button class="small" role="pick-button"
type="button">Library</button>' +
'<button class="small" role="clear-button"
type="button">Clear</button>' +
'</div></label>';
Page 597