ExperimentBaseExtracts.vue 9.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288
  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. comment: null,
  26. dialogMore: false,
  27. dialogLess: false
  28. }
  29. },
  30. computed: {
  31. ...mapGetters(['getHostURI'])
  32. },
  33. methods: {
  34. // Load extracts from the API
  35. async getExtracts(quality = 'min') {
  36. const URI = `${this.getHostURI}${API_ROUTES.getImageExtracts(this.sceneName, quality, this.extractConfig.x, this.extractConfig.y)}`
  37. const { data } = await fetch(URI)
  38. .then(async res => {
  39. res.json = await res.json()
  40. return res
  41. })
  42. .then(res => {
  43. if (!res.ok) throw new Error(res.json.message + res.json.data ? `\n${res.json.data}` : '')
  44. return res.json
  45. })
  46. data.extracts = data.extracts.map(x => this.getHostURI + x)
  47. return data
  48. },
  49. // There was an error loading extracts in v-img
  50. // (extracts have probably been removed from the server)
  51. // //
  52. // Get all extracts qualities and remove duplicates
  53. // Then do all the API extract-generation API calls then reload the page
  54. async extractsRemovedFromServerFallback() {
  55. this.loadingMessage = 'Synchronizing with the server...'
  56. try {
  57. const qualities = [...new Set(this.extracts.map(x => x.quality))]
  58. await Promise.all(qualities.map(x => this.getExtracts(x)))
  59. }
  60. catch (err) {
  61. console.error(err)
  62. this.loadingErrorMessage = 'Failed to synchronize with the server. Try reloading the page.'
  63. }
  64. finally {
  65. this.loadingMessage = null
  66. }
  67. },
  68. // Convert a simple API extracts object to get more informations
  69. getExtractFullObject(extractsApiObj) {
  70. return extractsApiObj.extracts.map((url, i) => ({
  71. link: url,
  72. quality: extractsApiObj.info.image.quality,
  73. zone: i + 1,
  74. index: i,
  75. nextQuality: findNearestUpper(extractsApiObj.info.image.quality, this.qualities),
  76. precQuality: findNearestLower(extractsApiObj.info.image.quality, this.qualities),
  77. loading: false
  78. }))
  79. },
  80. // Config was updated, load extracts and save progression
  81. async setExtractConfig(config, configuratorRef) {
  82. if (!config) return
  83. this.loadingMessage = 'Loading configuration extracts...'
  84. this.loadingErrorMessage = null
  85. try {
  86. this.extractConfig.x = config.x
  87. this.extractConfig.y = config.y
  88. this.extractConfig.quality = config.quality
  89. const data = await this.getExtracts(config.quality || undefined)
  90. this.extractsInfos = data.info
  91. // Put extracts in cache if not already there
  92. if (this.extracts.length === 0) this.extracts = this.getExtractFullObject(data)
  93. // If there is a configurator, retract it
  94. if (configuratorRef) configuratorRef.setVisibility(false)
  95. }
  96. catch (err) {
  97. console.error('Failed to load new configuration', err)
  98. this.loadingErrorMessage = 'Failed to load new configuration. ' + err.message
  99. }
  100. finally {
  101. this.loadingMessage = null
  102. this.saveProgress()
  103. }
  104. },
  105. // An action was triggered, load extracts and save progression
  106. async extractAction(event, extractObj) {
  107. const { index, nextQuality, precQuality, quality } = extractObj
  108. const qualityIndex = this.qualities.indexOf(quality)
  109. let action, newQuality
  110. if (event.button === 0) action = 'needMore' // Left click
  111. if (event.button === 2) action = 'needLess' // Right click
  112. if (event.button === 0 && event.ctrlKey) action = 'need10More' // ctrl + Right click
  113. if (event.button === 2 && event.ctrlKey) action = 'need10Less' // ctrl + Left click
  114. if (action === 'needLess') newQuality = precQuality
  115. if (action === 'needMore') newQuality = nextQuality
  116. if (action === 'need10More') {
  117. if (qualityIndex + 10 >= this.qualities.length - 1)
  118. newQuality = this.qualities[this.qualities.length - 1]
  119. else
  120. newQuality = this.qualities[qualityIndex + 10]
  121. }
  122. if (action === 'need10Less') {
  123. if (qualityIndex - 10 <= 0)
  124. newQuality = this.qualities[0]
  125. else
  126. newQuality = this.qualities[qualityIndex - 10]
  127. }
  128. // Do not load a new extract if same quality
  129. if (newQuality === quality) {
  130. // display alert once limit is reached
  131. if (action === 'needLess' || action === 'need10Less') {
  132. this.dialogLess = true
  133. }
  134. if (action === 'needMore' || action === 'need10More') {
  135. this.dialogMore = true
  136. }
  137. return
  138. }
  139. // Set loading state
  140. this.extracts[index].loading = true
  141. try {
  142. const collectedData = this.getClickDataObject(event, extractObj, action)
  143. this.sendMessage({ msgId: experimentMsgId.DATA, msg: collectedData })
  144. // Loading new extract
  145. const data = await this.getExtracts(newQuality)
  146. this.extracts[index].link = data.extracts[index]
  147. this.extracts[index].quality = data.info.image.quality
  148. this.extracts[index].nextQuality = findNearestUpper(data.info.image.quality, this.qualities)
  149. this.extracts[index].precQuality = findNearestLower(data.info.image.quality, this.qualities)
  150. this.extracts[index].loading = false
  151. }
  152. catch (err) {
  153. // TODO: toast message if fail
  154. console.error('Failed to load extract', err)
  155. }
  156. finally {
  157. this.extracts[index].loading = false
  158. this.saveProgress()
  159. }
  160. },
  161. getClickDataObject(event, extractObj, action) {
  162. const { index } = extractObj
  163. const clientSideData = {
  164. extractSize: {
  165. width: event.target.clientWidth,
  166. height: event.target.clientHeight
  167. },
  168. imageSize: {
  169. width: event.target.clientWidth * this.extractConfig.x,
  170. height: event.target.clientHeight * this.extractConfig.y
  171. },
  172. clickPosition: {
  173. extract: {
  174. x: event.offsetX,
  175. y: event.offsetY
  176. },
  177. image: {
  178. x: event.offsetX + (this.extracts[index].index % this.extractConfig.x) * event.target.clientWidth,
  179. y: event.offsetY + (Math.floor(this.extracts[index].index / this.extractConfig.x)) * event.target.clientHeight
  180. }
  181. }
  182. }
  183. const calculatedRealData = {}
  184. calculatedRealData.extractSize = {
  185. width: this.extractsInfos.extractsSize.width,
  186. height: this.extractsInfos.extractsSize.height
  187. }
  188. calculatedRealData.imageSize = {
  189. width: this.extractsInfos.image.metadata.width,
  190. height: this.extractsInfos.image.metadata.height
  191. }
  192. calculatedRealData.clickPosition = {
  193. extract: {
  194. x: Math.floor((calculatedRealData.imageSize.width * clientSideData.clickPosition.extract.x) / clientSideData.imageSize.width),
  195. y: Math.floor((calculatedRealData.imageSize.height * clientSideData.clickPosition.extract.y) / clientSideData.imageSize.height)
  196. },
  197. image: {
  198. x: Math.floor((calculatedRealData.imageSize.width * clientSideData.clickPosition.image.x) / clientSideData.imageSize.width),
  199. y: Math.floor((calculatedRealData.imageSize.height * clientSideData.clickPosition.image.y) / clientSideData.imageSize.height)
  200. }
  201. }
  202. // Sending event to WebSocket server
  203. const loggedObj = {
  204. experimentName: this.experimentName,
  205. sceneName: this.sceneName,
  206. extractConfig: this.extractConfig,
  207. clickedExtract: {
  208. link: this.extracts[index].link,
  209. quality: this.extracts[index].quality,
  210. nextQuality: this.extracts[index].nextQuality,
  211. precQuality: this.extracts[index].precQuality,
  212. zone: this.extracts[index].zone,
  213. index: this.extracts[index].index
  214. },
  215. action,
  216. clientSideData,
  217. calculatedRealData
  218. }
  219. return loggedObj
  220. },
  221. // Finish an experiment, sending full data to the server
  222. // Don't forget to surcharge this function when using this mixin to add more data
  223. finishExperiment() {
  224. const obj = {
  225. experimentName: this.experimentName,
  226. sceneName: this.sceneName,
  227. extractConfig: this.extractConfig,
  228. extracts: this.extracts.map(x => ({
  229. index: x.index,
  230. link: x.link,
  231. nextQuality: x.nextQuality,
  232. precQuality: x.precQuality,
  233. quality: x.quality,
  234. zone: x.zone
  235. })),
  236. qualities: this.qualities,
  237. referenceImage: this.referenceImage,
  238. comment: this.comment
  239. }
  240. this.sendMessage({ msgId: experimentMsgId.VALIDATED, msg: obj })
  241. this.setExperimentFinished()
  242. this.$router.push(`/experiments/${this.experimentName}/${this.sceneName}/validated`)
  243. }
  244. }
  245. }
  246. </script>
  247. <style>
  248. /* White border when hovering on extracts */
  249. .extract-hover-border:hover {
  250. z-index: 1;
  251. outline: 2px #f4f4f4 solid;
  252. }
  253. .img-extract-loader {
  254. height: 100%;
  255. width: 0px;
  256. display: flex;
  257. justify-content: center;
  258. align-items: center;
  259. }
  260. </style>