ExperimentBaseExtracts.vue 7.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234
  1. <template>
  2. <div>
  3. <slot></slot>
  4. </div>
  5. </template>
  6. <script>
  7. import ExperimentBase from '@/mixins/ExperimentBase'
  8. import { mapGetters } from 'vuex'
  9. import { API_ROUTES, findNearestUpper, findNearestLower } from '@/functions'
  10. import { EXPERIMENT as experimentMsgId } from '@/../config.messagesId'
  11. export default {
  12. name: 'ExperimentBaseExtracts',
  13. mixins: [ExperimentBase],
  14. data() {
  15. return {
  16. // Updated when `setExtractConfig` is called
  17. extractConfig: {
  18. x: null,
  19. y: null
  20. },
  21. extracts: [],
  22. extractsInfos: null,
  23. showHoverBorder: null,
  24. lockConfig: null
  25. }
  26. },
  27. computed: {
  28. ...mapGetters(['getHostURI'])
  29. },
  30. methods: {
  31. // Load extracts from the API
  32. async getExtracts(quality = 'min') {
  33. const URI = `${this.getHostURI}${API_ROUTES.getImageExtracts(this.sceneName, quality, this.extractConfig.x, this.extractConfig.y)}`
  34. const { data } = await fetch(URI)
  35. .then(async res => {
  36. res.json = await res.json()
  37. return res
  38. })
  39. .then(res => {
  40. if (!res.ok) throw new Error(res.json.message + res.json.data ? `\n${res.json.data}` : '')
  41. return res.json
  42. })
  43. return data
  44. },
  45. // Convert a simple API extracts object to get more informations
  46. getExtractFullObject(extractsApiObj) {
  47. return extractsApiObj.extracts.map((url, i) => ({
  48. link: this.getHostURI + url,
  49. quality: extractsApiObj.info.image.quality,
  50. zone: i + 1,
  51. index: i,
  52. nextQuality: findNearestUpper(extractsApiObj.info.image.quality, this.qualities),
  53. precQuality: findNearestLower(extractsApiObj.info.image.quality, this.qualities),
  54. loading: false
  55. }))
  56. },
  57. // Config was updated, load extracts and save progression
  58. async setExtractConfig(config, configuratorRef) {
  59. if (!config) return
  60. this.loadingMessage = 'Loading configuration extracts...'
  61. this.loadingErrorMessage = null
  62. try {
  63. this.extractConfig.x = config.x
  64. this.extractConfig.y = config.y
  65. this.extractConfig.quality = config.quality
  66. const data = await this.getExtracts(config.quality || undefined)
  67. this.extractsInfos = data.info
  68. this.extracts = this.getExtractFullObject(data)
  69. // If there is a configurator, retract it
  70. if (configuratorRef) configuratorRef.setVisibility(false)
  71. }
  72. catch (err) {
  73. console.error('Failed to load new configuration', err)
  74. this.loadingErrorMessage = 'Failed to load new configuration. ' + err.message
  75. }
  76. finally {
  77. this.loadingMessage = null
  78. this.saveProgress()
  79. }
  80. },
  81. // An action was triggered, load extracts and save progression
  82. async extractAction(event, extractObj) {
  83. const { index, nextQuality, precQuality, quality } = extractObj
  84. let action, newQuality
  85. if (event.button === 0) action = 'needLess' // Left click
  86. if (event.button === 2) action = 'needMore' // Right click
  87. if (action === 'needLess') newQuality = precQuality
  88. if (action === 'needMore') newQuality = nextQuality
  89. // Do not load a new extract if same quality
  90. if (newQuality === quality) return
  91. // Set loading state
  92. this.extracts[index].loading = true
  93. try {
  94. const collectedData = this.getClickDataObject(event, extractObj, action)
  95. this.sendMessage({ msgId: experimentMsgId.DATA, msg: collectedData })
  96. // Loading new extract
  97. const data = await this.getExtracts(newQuality)
  98. this.extracts[index].link = this.getHostURI + data.extracts[index]
  99. this.extracts[index].quality = data.info.image.quality
  100. this.extracts[index].nextQuality = findNearestUpper(data.info.image.quality, this.qualities)
  101. this.extracts[index].precQuality = findNearestLower(data.info.image.quality, this.qualities)
  102. this.extracts[index].loading = false
  103. }
  104. catch (err) {
  105. // TODO: toast message if fail
  106. console.error('Failed to load extract', err)
  107. }
  108. finally {
  109. this.extracts[index].loading = false
  110. this.saveProgress()
  111. }
  112. },
  113. getClickDataObject(event, extractObj, action) {
  114. const { index } = extractObj
  115. const clientSideData = {
  116. extractSize: {
  117. width: event.target.clientWidth,
  118. height: event.target.clientHeight
  119. },
  120. imageSize: {
  121. width: event.target.clientWidth * this.extractConfig.x,
  122. height: event.target.clientHeight * this.extractConfig.y
  123. },
  124. clickPosition: {
  125. extract: {
  126. x: event.offsetX,
  127. y: event.offsetY
  128. },
  129. image: {
  130. x: event.offsetX + (this.extracts[index].index % this.extractConfig.x) * event.target.clientWidth,
  131. y: event.offsetY + (Math.floor(this.extracts[index].index / this.extractConfig.x)) * event.target.clientHeight
  132. }
  133. }
  134. }
  135. const calculatedRealData = {}
  136. calculatedRealData.extractSize = {
  137. width: this.extractsInfos.extractsSize.width,
  138. height: this.extractsInfos.extractsSize.height
  139. }
  140. calculatedRealData.imageSize = {
  141. width: this.extractsInfos.image.metadata.width,
  142. height: this.extractsInfos.image.metadata.height
  143. }
  144. calculatedRealData.clickPosition = {
  145. extract: {
  146. x: Math.floor((calculatedRealData.imageSize.width * clientSideData.clickPosition.extract.x) / clientSideData.imageSize.width),
  147. y: Math.floor((calculatedRealData.imageSize.height * clientSideData.clickPosition.extract.y) / clientSideData.imageSize.height)
  148. },
  149. image: {
  150. x: Math.floor((calculatedRealData.imageSize.width * clientSideData.clickPosition.image.x) / clientSideData.imageSize.width),
  151. y: Math.floor((calculatedRealData.imageSize.height * clientSideData.clickPosition.image.y) / clientSideData.imageSize.height)
  152. }
  153. }
  154. // Sending event to WebSocket server
  155. const loggedObj = {
  156. experimentName: this.experimentName,
  157. sceneName: this.sceneName,
  158. extractConfig: this.extractConfig,
  159. clickedExtract: {
  160. link: this.extracts[index].link,
  161. quality: this.extracts[index].quality,
  162. nextQuality: this.extracts[index].nextQuality,
  163. precQuality: this.extracts[index].precQuality,
  164. zone: this.extracts[index].zone,
  165. index: this.extracts[index].index
  166. },
  167. action,
  168. clientSideData,
  169. calculatedRealData
  170. }
  171. return loggedObj
  172. },
  173. // Finish an experiment, sending full data to the server
  174. // Don't forget to surcharge this function when using this mixin to add more data
  175. finishExperiment() {
  176. const obj = {
  177. experimentName: this.experimentName,
  178. sceneName: this.sceneName,
  179. extractConfig: this.extractConfig,
  180. extracts: this.extracts.map(x => ({
  181. index: x.index,
  182. link: x.link,
  183. nextQuality: x.nextQuality,
  184. precQuality: x.precQuality,
  185. quality: x.quality,
  186. zone: x.zone
  187. })),
  188. qualities: this.qualities,
  189. referenceImage: this.referenceImage
  190. }
  191. this.sendMessage({ msgId: experimentMsgId.VALIDATED, msg: obj })
  192. this.setExperimentDone({ experimentName: this.experimentName, sceneName: this.sceneName, done: true })
  193. this.$router.push(`/experiments/${this.experimentName}/${this.sceneName}/validated`)
  194. }
  195. }
  196. }
  197. </script>
  198. <style>
  199. /* White border when hovering on extracts */
  200. .extract-hover-border:hover {
  201. z-index: 1;
  202. outline: 2px #f4f4f4 solid;
  203. }
  204. .img-extract-loader {
  205. height: 100%;
  206. width: 0px;
  207. display: flex;
  208. justify-content: center;
  209. align-items: center;
  210. }
  211. </style>