Skip to content

Improving SRW Sample element UI

Paul Moeller edited this page Jun 5, 2020 · 2 revisions

Below are the code changes for several improvements to the sirepo SRW sample element UI. View the Github Commit.

  • Show/Hide the "Background Color" field unless the "Cutoff Background Noise Ratio" is selected (srw.js):
function updateSampleFields(item) {
    //...

    // hide the sample.backgroundColor field unless sample.cutoffBackgroundNoise has a non-zero value
    panelState.showField('sample', 'backgroundColor', item.cutoffBackgroundNoise);
}

// call the updateSampleFields() method anytime one of the sample fields below are updated
beamlineService.watchBeamlineField(
    $scope, 'sample', 
    ['cropArea', 'tileImage', 'rotateAngle', 'cutoffBackgroundNoise'], 
    updateSampleFields);
  • Add range validation to the "Cutoff Background Noise Ratio" field, valid values are between 0 and 1 (srw-schema.js):
// field: [label, type, default-value, help-text, min value, max value]
"cutoffBackgroundNoise": ["Cutoff Background Noise Ratio", "Float", 0.5, "The ratio for cutoff the background noise (between 0 and 1)", 0, 1],     
  • Add a new field which will display the sample preview image (srw.js):
// add a custom editor for the OutputImageFormat type (which is also an enum in the schema).
// this will call the angularjs directive samplePreview
    SIREPO.appFieldEditors += [
        // ...
        '<div data-ng-switch-when="OutputImageFormat">',
          '<div data-sample-preview=""></div>',
        '</div>',

Much of the former imageFileField directive is repurposed into the samplePreview directive.

samplePreview directive

Clone this wiki locally